Conversation
Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>
|
@copilot update the site project in the sample folder to use the plugin and confirm the it is working |
Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/a918c9f7-2c20-4d92-8c84-2df54f54ce37 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>
Done in commit ecce0af. The sample project now explicitly registers both plugins in return await Bootstrapper
.Factory
.CreateWeb(args)
.AddConfigurator(new ReadingTimeConfigurator())
.AddConfigurator(new ReadingProgressBarConfigurator())
.RunAsync();
The teal bar is visible at the top of the page and grows from 0% → 100% as the reader scrolls through the post. |
|
@copilot extract the style into a css file and the JavaScript into a script file |
Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/5f5a378a-23e4-4d17-9ebc-fb7fc0c6150e Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>
Done in commit eee4eba. The CSS and JS are now in separate embedded resource files:
The module reads them at build time via <div id="reading-progress-bar"></div>
<style>:root { --rpb-color: #0085A1; }
#reading-progress-bar {
position: fixed;
...
background-color: var(--rpb-color, #0085A1);
}
</style>
<script>
window.addEventListener('scroll', function() {
...
});
</script> |
Implements a reading progress bar plugin for Statiq blog posts, based on Jeremy Davis's approach.
New classes
ReadingProgressBarModule—ParallelModulethat processes.mddocuments and adds aReadingProgressBarmetadata key containing a self-contained HTML fragment (fixed-position<div>, CSS loaded from an embedded stylesheet, scroll-driven JS loaded from an embedded script file). Bar color is configurable viaProgressBarColorinappsettings.json(default:#0085A1), applied via the--rpb-colorCSS custom property.ReadingProgressBarConfigurator—IConfigurator<Bootstrapper>that inserts the module into theContentpipeline at position 3, mirroringReadingTimeConfigurator.Embedded resources
The CSS and JavaScript are maintained as separate files inside the plugin assembly:
ReadingProgressBar/reading-progress-bar.css— Bar styles usingvar(--rpb-color, #0085A1)for the configurable colour.ReadingProgressBar/reading-progress-bar.js— Scroll handler usingaddEventListenerto avoid overwriting other scroll event handlers on the page.The module reads these at runtime via
Assembly.GetManifestResourceStream()and injects the content inline, prefixed with a small:root { --rpb-color: ... }rule for the configured colour.Template integration
Add to your post layout inside
<body>:@Html.Raw(Model.GetString("ReadingProgressBar"))Optional configuration
Sample project
The sample project has been updated to demonstrate the plugin end-to-end:
sample/Program.cs— Explicitly registers bothReadingTimeConfiguratorandReadingProgressBarConfiguratoron the bootstrapper.sample/appsettings.json— Includes"ProgressBarColor": "#0085A1"to demonstrate the configurable bar colour.sample/input/posts/_layout.cshtml— Renders the progress bar via@Html.Raw(Model.GetString("ReadingProgressBar"))and declares@model IDocument.sample/input/posts/_ViewStart.cshtml— Corrected file casing (Linux case-sensitive filesystem) and cleaned up verbatim string prefix.sample/input/posts/_ViewImports.cshtml— Added@using Statiq.Commonto makeIMetadataextension methods available across all Razor views in the posts directory.The site generates successfully with the reading progress bar injected at the top of every blog post:
Original prompt
📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.