Statiq.Plugins 0.0.2

<img src="src/Statiq.Plugins/icon.png" width="30px" /> Statiq Plugins

Various Plugins

Made With

• https://www.statiq.dev/framework
  • https://github.com/statiqdev/Statiq.Framework
• https://www.statiq.dev/web
  • https://github.com/statiqdev/Statiq.Web

Plugins

• Image Gallery
• Reading Time

Image Gallery

A Statiq shortcode to produce an inline image gallery using Lightbox2.

Add the ImageGalleryConfigurator to your bootstrapper:

return await Bootstrapper
  .Factory
  .CreateWeb(args)
  .AddConfigurator<Bootstrapper>(new ImageGalleryConfigurator())
  .RunAsync();

Include the Lightbox2 CSS and JS in your layout (e.g. via CDN):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Note: For production use, add Subresource Integrity (SRI) integrity attributes to the above tags. You can generate the hashes at srihash.org or retrieve them from the cdnjs library page.

Then use the shortcode in any Markdown or Razor content file. Use the raw shortcode syntax (<?! ... ?>) so the body is not pre-processed by Markdown (which would otherwise wrap each line in <p> tags):

<?! ImageGallery Name=my-gallery ?>
/images/photo1.jpg|Caption for photo 1|Image Alt
/images/photo2.jpg|Caption for photo 2
/images/photo3.jpg
<?!/ ImageGallery ?>

Parameters:

Content format:

Each line inside the shortcode is one image. Fields are pipe-separated: src, optional title (shown as caption in lightbox), and optional alt (alt text for the lightbox image — falls back to title if omitted).

src
src|title
src|title|alt

The shortcode renders Lightbox2-compatible markup:

<div class="image-gallery">
  <a href="/images/photo1.jpg" data-lightbox="my-gallery" data-title="Caption for photo 1" data-alt="Caption for photo 1">
    <img src="/images/photo1.jpg" alt="Caption for photo 1" />
  </a>
  ...
</div>

When any Lightbox2 options are provided, a configuration <script> block is also emitted:

<?! ImageGallery Name=my-gallery WrapAround=true AlbumLabel="Photo %1 of %2" ?>
/images/photo1.jpg|Caption for photo 1
/images/photo2.jpg|Caption for photo 2
<?!/ ImageGallery ?>

<script>
lightbox.option({
  'wrapAround': true,
  'albumLabel': "Photo %1 of %2"
});
</script>

Reading time

Adding reading time estimates to blog posts from @ Jeremy Davis

• https://blog.jermdavis.dev/posts/2023/reading-time-estimates-statiq

In your appsettings.json add a new property ReadingSpeed and set it to your desired value:

"ReadingSpeed": 100

You can then override the input/_header.cshtml of your theme and place the calculated time after the tags.

<span>~@Model.GetString("ReadingTime") minutes</span>

Docs

• Docs
  • Libraries
• LICENSE