Add status banner

README.md

@@ -3,6 +3,7 @@
 # Quarto word count
 
 
+- [Experimental new feature!](#experimental-new-feature)
 - [Why counting words is hard](#why-counting-words-is-hard)
 - [Using the word count script](#using-the-word-count-script)
   - [Installing](#installing)
@@ -18,6 +19,47 @@
 
 <!-- README.md is generated from README.qmd. Please edit that file -->
 
+## Experimental new feature!
+
+> [!TIP]
+>
+> I’ve added an experimental new feature that lets you add a sticky
+> status bar at the top of HTML documents to show the word count. I’ve
+> found that this is *super helpful* when writing, since I don’t need to
+> constantly check the terminal output.
+>
+> I haven’t figured out the best way to work with Lua filters and Quarto
+> shortcodes (and getting filters/shortcodes to run in the right order),
+> so for now the process is a little convoluted.
+>
+> 1.  Enable `wordcount-banner: true` in the YAML front matter
+>
+> 2.  Specify the content of the banner using the different shortcodes
+>     in `params: wordcount:`
+>
+> 3.  Include an HTML file that uses Javascript to inject the status
+>     banner into the document.
+>
+> Here’s a minimal example:
+>
+> ``` qmd
+> ---
+> title: Something
+> format:
+>   wordcount-html: 
+>     wordcount-banner: true
+> params:
+>   wordcount: |
+>     <strong>-1 total words</strong>:  in the body •  in the references •  in the notes
+> ---
+>
+> ::: {.content-visible when-meta="wordcount-banner"}
+> {{< include _extensions/andrewheiss/wordcount/banner.html >}}
+> :::
+>
+> Actual text stuff goes here.
+> ```
+
 ## Why counting words is hard
 
 In academic writing and publishing, word counts are important, since

README.qmd

@@ -17,6 +17,40 @@ knitr::opts_chunk$set(
 )
 ```
 
+## Experimental new feature!
+
+::: {.callout-tip}
+I've added an experimental new feature that lets you add a sticky status bar at the top of HTML documents to show the word count. I've found that this is *super helpful* when writing, since I don't need to constantly check the terminal output.
+
+I haven't figured out the best way to work with Lua filters and Quarto shortcodes (and getting filters/shortcodes to run in the right order), so for now the process is a little convoluted.
+
+1. Enable `wordcount-banner: true` in the YAML front matter
+
+2. Specify the content of the banner using the different shortcodes in `params: wordcount: `
+
+3. Include an HTML file that uses Javascript to inject the status banner into the document.
+
+Here's a minimal example:
+
+````qmd
+---
+title: Something
+format:
+  wordcount-html: 
+    wordcount-banner: true
+params:
+  wordcount: |
+    <strong>{{< words-sum body-note-ref >}} total words</strong>: {{< words-body >}} in the body • {{< words-ref >}} in the references • {{< words-note >}} in the notes
+---
+
+::: {.content-visible when-meta="wordcount-banner"}
+{{{< include _extensions/andrewheiss/wordcount/banner.html >}}}
+:::
+
+Actual text stuff goes here.
+````
+:::
+
 ## Why counting words is hard
 
 In academic writing and publishing, word counts are important, since many journals specify word limits for submitted articles. Counting how many words you have in a Quarto Markdown file is tricky, though, for a bunch of reasons:

_extensions/wordcount/_extension.yml

@@ -4,7 +4,7 @@ authors:
     orcid: 0000-0003-1866-860X
   - name: Justin Landis
     orcid: 0000-0001-5501-4934
-version: 1.5.0
+version: 1.6.0
 quarto-required: ">=1.4.551"
 contributes:
   shortcodes: 

_extensions/wordcount/banner.html

@@ -0,0 +1,32 @@
+<script>
+// Create a status div
+var statusDiv = document.createElement('div');
+statusDiv.className = 'alert alert-primary text-center';
+statusDiv.role = 'alert';
+
+// Add the content of params$wordcount to the status div
+statusDiv.innerHTML = '<i class="bi bi-bar-chart-fill"></i>&ensp;`r params$wordcount`';
+
+// Create a <header class="fixed-top"> element to hold the status div
+var header = document.createElement('header');
+header.className = 'fixed-top';
+
+// Add the status div to the header
+header.appendChild(statusDiv);
+
+// Insert the header div before the `quarto-content` div
+var quartoContent = document.getElementById('quarto-content');
+if (quartoContent) {
+    quartoContent.parentNode.insertBefore(header, quartoContent);
+}
+
+// Add padding to the top of the body to create space for the banner
+document.body.style.paddingTop = statusDiv.offsetHeight + 'px';
+
+// Inject style attribute into the sidebar div if it's there
+var sidebar = document.getElementById('quarto-margin-sidebar');
+if (sidebar) {
+    sidebar.style.top = '67px';
+    sidebar.style.maxHeight = 'calc(-67px + 100vh)';
+}
+</script>