From 0e25a00fe3621239d0483169054c0b7d6e50df86 Mon Sep 17 00:00:00 2001
From: Will Faught <willfaught@users.noreply.github.com>
Date: Sat, 4 Mar 2023 15:28:39 -0800
Subject: [PATCH] Change article metadata classes to IDs

---
 README.md                                     |  8 +--
 exampleSite/content/_index.md                 |  2 +-
 exampleSite/content/customization/_index.md   | 26 +++++----
 exampleSite/content/customization/hide.md     | 26 +++++----
 exampleSite/content/customization/style.md    | 58 ++++++++++---------
 .../layouts/partials/paige/style-first.css    | 13 +++--
 layouts/partials/paige/content.html           |  2 +-
 layouts/partials/paige/metadata.html          | 14 +++--
 layouts/partials/paige/toc.html               |  2 +-
 9 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/README.md b/README.md
index 60d16386..6b3d2688 100644
--- a/README.md
+++ b/README.md
@@ -805,11 +805,11 @@ If you want a more minimal look,
 try the following in your `layouts/partials/paige/style-first.css`:
 
 ```css
-.paige-authors,
-.paige-reading-time,
-.paige-terms,
-.paige-toc,
+#paige-authors,
 #paige-credit,
+#paige-reading-time,
+#paige-terms,
+#paige-toc,
 #paige-pages .paige-authors,
 #paige-pages .paige-date,
 #paige-pages .paige-summary,
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 76dcda2b..8c3d5c8e 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -14,7 +14,7 @@ paige:
       bootstrap_icon: "github"
       name: "GitHub"
       url: "https://github.com/willfaught/paige"
-  style: ".paige-title { font-size: 5rem; }"
+  style: "#paige-title { font-size: 5rem; }"
 title: "Paige"
 ---
 
diff --git a/exampleSite/content/customization/_index.md b/exampleSite/content/customization/_index.md
index 88a067c0..be98cc82 100644
--- a/exampleSite/content/customization/_index.md
+++ b/exampleSite/content/customization/_index.md
@@ -5,15 +5,16 @@ date: "2022-02-23"
 description: "Demonstration of Paige customization."
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
@@ -33,15 +34,16 @@ This page has the following parameters:
 ```yaml
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
diff --git a/exampleSite/content/customization/hide.md b/exampleSite/content/customization/hide.md
index 1bcb7de7..c5642ffe 100644
--- a/exampleSite/content/customization/hide.md
+++ b/exampleSite/content/customization/hide.md
@@ -5,15 +5,16 @@ date: "2023-02-01"
 description: "Demonstration of Paige customization that hides data."
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
@@ -34,15 +35,16 @@ This page has the following parameters:
 ```yaml
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
diff --git a/exampleSite/content/customization/style.md b/exampleSite/content/customization/style.md
index fb59a8e6..a72c4681 100644
--- a/exampleSite/content/customization/style.md
+++ b/exampleSite/content/customization/style.md
@@ -5,27 +5,28 @@ date: "2023-01-01"
 description: "Demonstration of Paige customization that styles data."
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
     }
-    .paige-authors { font-style: italic; }
-    .paige-content { font-style: italic; }
-    .paige-date { font-style: italic; }
-    .paige-description { font-style: italic; }
-    .paige-reading-time { font-style: italic; }
-    .paige-terms { font-style: italic; }
-    .paige-title { font-style: italic; }
-    .paige-toc { font-style: italic; }
+    #paige-authors { font-style: italic; }
+    #paige-content { font-style: italic; }
+    #paige-date { font-style: italic; }
+    #paige-description { font-style: italic; }
+    #paige-reading-time { font-style: italic; }
+    #paige-terms { font-style: italic; }
+    #paige-title { font-style: italic; }
+    #paige-toc { font-style: italic; }
     #paige-copyright { font-style: italic; }
     #paige-credit { font-style: italic; }
     #paige-pages .paige-authors { font-style: italic; }
@@ -49,27 +50,28 @@ This page has the following parameters:
 ```yaml
 paige:
   style: |
-    .paige-authors,
-    .paige-date,
-    .paige-reading-time,
-    .paige-terms,
-    .paige-toc,
+    #paige-authors,
     #paige-credit,
+    #paige-date,
+    #paige-reading-time,
+    #paige-terms,
+    #paige-toc,
     #paige-pages .paige-authors,
-    #paige-pages .paige-date-header,
     #paige-pages .paige-date,
+    #paige-pages .paige-date-header,
+    #paige-pages .paige-reading-time,
     #paige-pages .paige-summary,
     #paige-pages .paige-terms {
         display: block;
     }
-    .paige-authors { font-style: italic; }
-    .paige-content { font-style: italic; }
-    .paige-date { font-style: italic; }
-    .paige-description { font-style: italic; }
-    .paige-reading-time { font-style: italic; }
-    .paige-terms { font-style: italic; }
-    .paige-title { font-style: italic; }
-    .paige-toc { font-style: italic; }
+    #paige-authors { font-style: italic; }
+    #paige-content { font-style: italic; }
+    #paige-date { font-style: italic; }
+    #paige-description { font-style: italic; }
+    #paige-reading-time { font-style: italic; }
+    #paige-terms { font-style: italic; }
+    #paige-title { font-style: italic; }
+    #paige-toc { font-style: italic; }
     #paige-copyright { font-style: italic; }
     #paige-credit { font-style: italic; }
     #paige-pages .paige-authors { font-style: italic; }
diff --git a/exampleSite/layouts/partials/paige/style-first.css b/exampleSite/layouts/partials/paige/style-first.css
index ac9ff088..a007ef43 100644
--- a/exampleSite/layouts/partials/paige/style-first.css
+++ b/exampleSite/layouts/partials/paige/style-first.css
@@ -1,12 +1,13 @@
-.paige-authors,
-.paige-date,
-.paige-reading-time,
-.paige-terms,
-.paige-toc,
+#paige-authors,
 #paige-credit,
+#paige-date,
+#paige-reading-time,
+#paige-terms,
+#paige-toc,
 #paige-pages .paige-authors,
-#paige-pages .paige-date-header,
 #paige-pages .paige-date,
+#paige-pages .paige-date-header,
+#paige-pages .paige-reading-time,
 #paige-pages .paige-summary,
 #paige-pages .paige-terms {
     display: none;
diff --git a/layouts/partials/paige/content.html b/layouts/partials/paige/content.html
index f64f456c..1709f080 100644
--- a/layouts/partials/paige/content.html
+++ b/layouts/partials/paige/content.html
@@ -11,5 +11,5 @@
 {{ $content := cond ($fullpages | not) ($page.Content | replaceRE `(<h[1-6] id="([^"]+)".+)(</h[1-6]+>)` (printf `${1}<a aria-label="%v" class="paige-header-link" href="#${2}">#</a>${3}` (i18n "paige_aria_section_link")) | safeHTML) $page.Content }}
 
 {{ with $content }}
-    <div class="mw-100 overflow-x-auto paige-content">{{ . }}</div>
+    <div class="mw-100 overflow-x-auto {{ if $fullpages }} paige-content {{ end }}" {{ if not $fullpages }} id="paige-content" {{ end }}>{{ . }}</div>
 {{ end }}
diff --git a/layouts/partials/paige/metadata.html b/layouts/partials/paige/metadata.html
index cb4d9935..e23be3ee 100644
--- a/layouts/partials/paige/metadata.html
+++ b/layouts/partials/paige/metadata.html
@@ -10,10 +10,12 @@
 
 {{ $authors := partial "paige/authors.html" $page }}
 {{ $categories := $page.Params.categories | default slice | uniq }}
+{{ $class := $fullpages }}
 {{ $commiturl := "" }}
 {{ $date := cond (eq ($page.Param "paige.date.source" | default "published") "published") $page.PublishDate $page.Lastmod }}
 {{ $dateformat := $page.Param "paige.date.format" | default ":date_long" }}
 {{ $description := $page.Description | markdownify }}
+{{ $id := not $fullpages }}
 {{ $nogap := "mb-0" }}
 {{ $readingtime := $page.ReadingTime }}
 {{ $tags := $page.Params.tags | default slice | uniq }}
@@ -27,15 +29,15 @@
 
 <div class="paige-metadata w-100">
     {{ with $title }}
-        <h1 class="display-5 fw-bold paige-title text-center">{{ with $titlelink }}<a href="{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end }}{{ if $fullpages }}<a aria-label="{{ i18n `paige_aria_page_link` }}" class="paige-header-link" href="{{ $titlepage }}">#</a>{{ end }}</h1>
+        <h1 class="display-5 fw-bold {{ if $class }} paige-title {{ end }} text-center" {{ if $id }} id="paige-title" {{ end }}>{{ with $titlelink }}<a href="{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end }}{{ if $fullpages }}<a aria-label="{{ i18n `paige_aria_page_link` }}" class="paige-header-link" href="{{ $titlepage }}">#</a>{{ end }}</h1>
     {{ end }}
 
     {{ with $description }}
-        <p class="lead paige-description text-center">{{ . }}</p>
+        <p class="lead {{ if $class }} paige-description {{ end }} text-center" {{ if $id }} id="paige-description" {{ end }}>{{ . }}</p>
     {{ end }}
 
     {{ if or $categories $tags }}
-        <p class="paige-terms text-center">
+        <p class="{{ if $class }} paige-terms {{ end }} text-center" {{ if $id }} id="paige-terms" {{ end }}>
             {{ $terms := slice }}
 
             {{ range $categories }}
@@ -55,11 +57,11 @@
     {{ if or $authors $date $readingtime }}
         <div class="mb-3">
             {{ with $authors }}
-                <p class="mb-0 paige-authors text-center text-secondary">{{ . }}</p>
+                <p class="mb-0 {{ if $class }} paige-authors {{ end }} text-center text-secondary" {{ if $id }} id="paige-authors" {{ end }}>{{ . }}</p>
             {{ end }}
 
             {{ with $date }}
-                <p class="mb-0 paige-date text-center text-secondary">
+                <p class="mb-0 {{ if $class }} paige-date {{ end }} text-center text-secondary" {{ if $id }} id="paige-date" {{ end }}>
                     {{ with $commiturl }}
                         <a class="link-secondary text-decoration-none" href="{{ . }}">
                     {{ end }}
@@ -73,7 +75,7 @@
             {{ end }}
 
             {{ with $readingtime }}
-                <p class="mb-0 paige-reading-time text-center text-secondary">{{ . }} {{ i18n "paige_minutes" . }}</p>
+                <p class="mb-0 {{ if $class }} paige-reading-time {{ end }} text-center text-secondary" {{ if $id }} id="paige-reading-time" {{ end }}>{{ . }} {{ i18n "paige_minutes" . }}</p>
             {{ end }}
         </div>
     {{ end }}
diff --git a/layouts/partials/paige/toc.html b/layouts/partials/paige/toc.html
index 2fbd6734..ad55b33c 100644
--- a/layouts/partials/paige/toc.html
+++ b/layouts/partials/paige/toc.html
@@ -9,7 +9,7 @@
 {{ end }}
 
 {{ if and $page.Content (not $fullpages) (ne $page.TableOfContents `<nav id="TableOfContents"></nav>`) }}
-    <div class="paige-toc">
+    <div id="paige-toc">
         <div class="border mb-3 pe-3 ps-3 pt-3 rounded">
             {{ $page.TableOfContents }}
         </div>