From 64455aeb92f6c890694634fdb99b883b32935e5c Mon Sep 17 00:00:00 2001
From: Will Faught <willfaught@users.noreply.github.com>
Date: Fri, 30 Dec 2022 23:17:37 -0800
Subject: [PATCH] Add site params content_max_width, metadata_max_width

---
 README.md                            |  2 ++
 layouts/partials/paige/article.html  |  8 +++++---
 layouts/partials/paige/content.html  | 20 ++++++--------------
 layouts/partials/paige/metadata.html |  2 +-
 layouts/partials/paige/script.html   |  4 ++--
 layouts/partials/paige/style.html    | 20 ++++++++++++++++----
 layouts/partials/paige/toc.html      | 10 +++-------
 7 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 2b06554b..983e1bfc 100644
--- a/README.md
+++ b/README.md
@@ -212,6 +212,7 @@ paige:
     scripts_path: "my-assets/my-bootstrap.bundle.min.js" # Use local Bootstrap scripts
     styles_path: "my-assets/my-bootstrap.min.css" # Use local Bootstrap styles
   color: "#123456" # Theme color for Safari and Windows
+  content_max_width: 66ch # Page table of contents and content max width
   comments:
     cactus: # cactus.chat
       account_id: "123456"
@@ -234,6 +235,7 @@ paige:
   hide_theme_comment: true # Don't put a link to this project in a code comment
   hide_theme_link: true # Don't put a link to this project in the footer
   menu_style: "links" # Menu is link list for "links", tab list for "tabs", or pill list if unset
+  metadata_max_width: 100ch # Page metadata max width
   rss:
     managing_editor: "Michael Bluth"
     web_master: "Michael Bluth"
diff --git a/layouts/partials/paige/article.html b/layouts/partials/paige/article.html
index 9deab301..6906fd12 100644
--- a/layouts/partials/paige/article.html
+++ b/layouts/partials/paige/article.html
@@ -1,5 +1,7 @@
 <article>
-    {{ partial "paige/metadata" . }}
-    {{ partial "paige/toc" . }}
-    {{ partial "paige/content" . }}
+    <div class="align-items-center d-flex flex-column mb-0">
+        {{ partial "paige/metadata" . }}
+        {{ partial "paige/toc" . }}
+        {{ partial "paige/content" . }}
+    </div>
 </article>
diff --git a/layouts/partials/paige/content.html b/layouts/partials/paige/content.html
index 35f40eff..90497922 100644
--- a/layouts/partials/paige/content.html
+++ b/layouts/partials/paige/content.html
@@ -1,17 +1,9 @@
 {{ if .Content }}
-<section>
-    <div class="container-fluid">
-        <div class="justify-content-center row">
-            <div class="col col-auto px-0">
-                <article>
-                    {{ if .Scratch.Get "paige_show_full_pages" }}
-                    {{ .Content }}
-                    {{ else }}
-                    {{ .Content | replaceRE `(<h[1-6] id="([^"]+)".+)(</h[1-6]+>)` `${1}<a class="paige-header-link" href="#${2}">#</a>${3}` | safeHTML }}
-                    {{ end }}
-                </article>
-            </div>
-        </div>
-    </div>
+<section class="paige-content">
+    {{ if .Scratch.Get "paige_show_full_pages" }}
+    {{ .Content }}
+    {{ else }}
+    {{ .Content | replaceRE `(<h[1-6] id="([^"]+)".+)(</h[1-6]+>)` `${1}<a class="paige-header-link" href="#${2}">#</a>${3}` | safeHTML }}
+    {{ end }}
 </section>
 {{ end }}
diff --git a/layouts/partials/paige/metadata.html b/layouts/partials/paige/metadata.html
index d700b306..34aea251 100644
--- a/layouts/partials/paige/metadata.html
+++ b/layouts/partials/paige/metadata.html
@@ -1,4 +1,4 @@
-<section>
+<section class="paige-metadata">
     {{ partial "paige/title" . }}
     {{ partial "paige/description" . }}
     {{ partial "paige/other" . }}
diff --git a/layouts/partials/paige/script.html b/layouts/partials/paige/script.html
index d91d6a3a..b0ecd741 100644
--- a/layouts/partials/paige/script.html
+++ b/layouts/partials/paige/script.html
@@ -1,11 +1,11 @@
 <script>
 function paigeResize() {
-    var e = document.querySelector("body > div.container > div.row > div.col");
+    var e = document.querySelector('body > div.container');
     var s = getComputedStyle(e);
     var px = parseFloat(s.paddingLeft) + parseFloat(s.paddingRight);
     var bx = parseFloat(s.borderLeftWidth) + parseFloat(s.borderRightWidth);
     var w = e.offsetWidth - px - bx;
-    var es = document.querySelectorAll("article > div");
+    var es = document.querySelectorAll('section[class="paige-content"] > div');
     for (var i = 0; i < es.length; i++) {
         var e = es[i];
         if (e.offsetWidth !== w) {
diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html
index f4f15655..8c46b72d 100644
--- a/layouts/partials/paige/style.html
+++ b/layouts/partials/paige/style.html
@@ -1,8 +1,4 @@
 <style>
-article > div {
-    margin-bottom: 1rem;
-}
-
 body, html {
     height: 100%;
 }
@@ -21,6 +17,22 @@ h1:hover .paige-header-link, h2:hover .paige-header-link, h3:hover .paige-header
     display: inline;
 }
 
+section[class="paige-content"] > div {
+    margin-bottom: 1rem;
+}
+
+{{ with .Site.Params.paige.content_max_width }}
+section[class="paige-content"], section[class="paige-toc"] {
+    max-width: {{ . }};
+}
+{{ end }}
+
+{{ with .Site.Params.paige.metadata_max_width }}
+section[class="paige-metadata"] {
+    max-width: {{ . }};
+}
+{{ end }}
+
 .paige-header-link {
     display: none;
     margin-left: 0.25ch;
diff --git a/layouts/partials/paige/toc.html b/layouts/partials/paige/toc.html
index 2805a19e..1b5fd631 100644
--- a/layouts/partials/paige/toc.html
+++ b/layouts/partials/paige/toc.html
@@ -1,11 +1,7 @@
 {{ if and .Content .Params.paige.toc (ne .TableOfContents `<nav id="TableOfContents"></nav>`) }}
-<section>
-    <div class="container-fluid mb-3">
-        <div class="justify-content-center row">
-            <div class="border col col-auto pe-3 ps-3 pt-3 rounded">
-                {{ .TableOfContents }}
-            </div>
-        </div>
+<section class="paige-toc">
+    <div class="border mb-3 pe-3 ps-3 pt-3 rounded">
+        {{ .TableOfContents }}
     </div>
 </section>
 {{ end }}