From 33ba4db9cbd334c9a10f15880e13e3fb589c3b10 Mon Sep 17 00:00:00 2001
From: David Steele <david@pgmasters.net>
Date: Sat, 30 Sep 2023 09:40:44 -0400
Subject: [PATCH] Use CSS to number sections in documentation.

This reduces churn in the HTML when sections are added or removed from the documentation.
---
 doc/lib/pgBackRestDoc/Html/DocHtmlPage.pm |  4 +-
 doc/resource/html/default.css             | 57 +++++++++++++++++++++--
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/doc/lib/pgBackRestDoc/Html/DocHtmlPage.pm b/doc/lib/pgBackRestDoc/Html/DocHtmlPage.pm
index a05151f62..5f87468c8 100644
--- a/doc/lib/pgBackRestDoc/Html/DocHtmlPage.pm
+++ b/doc/lib/pgBackRestDoc/Html/DocHtmlPage.pm
@@ -250,14 +250,14 @@ sub sectionProcess
 
     if ($self->{bTocNumber})
     {
-        $oSectionHeaderElement->addNew(HTML_DIV, "section${iDepth}-number", {strContent => $strSectionNo});
+        $oSectionHeaderElement->addNew(HTML_DIV, "section${iDepth}-number");
     }
 
     $oSectionHeaderElement->addNew(HTML_DIV, "section${iDepth}-title", {strContent => $strSectionTitle});
 
     if ($self->{bTocNumber})
     {
-        $oSectionTocElement->addNew(HTML_DIV, "section${iDepth}-toc-number", {strContent => $strSectionNo});
+        $oSectionTocElement->addNew(HTML_DIV, "section${iDepth}-toc-number");
     }
 
     my $oTocSectionTitleElement = $oSectionTocElement->addNew(HTML_DIV, "section${iDepth}-toc-title");
diff --git a/doc/resource/html/default.css b/doc/resource/html/default.css
index 93e579d63..86b0ae5a0 100644
--- a/doc/resource/html/default.css
+++ b/doc/resource/html/default.css
@@ -19,12 +19,15 @@ body
     width: 100%;
     text-align: justify;
     font-weight: 400;
+    counter-reset: section1-counter;
+    counter-reset: section1-toc-counter;
 }
 
 a:link, a:visited, a:hover, a:active
 {
     text-decoration: underline;
     color: black;
+    display: inline-block;
 }
 
 @media (min-width: 1000px)
@@ -154,7 +157,14 @@ Table of Contents
 {
     display: inline;
     font-size: 14pt;
-    margin-right: .5em;
+    margin-right: .75em;
+    counter-reset: section2-toc-counter;
+}
+
+.section1-toc-number:before
+{
+    counter-increment: section1-toc-counter;
+    content: counter(section1-toc-counter);
 }
 
 .section1-toc-title
@@ -171,7 +181,14 @@ Table of Contents
 .section2-toc-number
 {
     display: inline;
-    margin-right: .5em;
+    margin-right: .75em;
+    counter-reset: section3-toc-counter;
+}
+
+.section2-toc-number:before
+{
+    counter-increment: section2-toc-counter;
+    content: counter(section1-toc-counter) "." counter(section2-toc-counter);
 }
 
 .section2-toc-title
@@ -187,7 +204,13 @@ Table of Contents
 .section3-toc-number
 {
     display: inline;
-    margin-right: .5em;
+    margin-right: .75em;
+}
+
+.section3-toc-number:before
+{
+    counter-increment: section3-toc-counter;
+    content: counter(section1-toc-counter) "." counter(section2-toc-counter) "." counter(section3-toc-counter);
 }
 
 .section3-toc-title
@@ -201,6 +224,8 @@ Section
 .section1
 {
     margin-top: 2.5em;
+    counter-reset: section2-counter;
+    counter-increment: section1-counter;
 }
 
 .section1:first-of-type
@@ -213,6 +238,17 @@ Section
     margin-top: 1em;
 }
 
+.section2
+{
+    counter-reset: section3-counter;
+    counter-increment: section2-counter;
+}
+
+.section3
+{
+    counter-increment: section3-counter;
+}
+
 .section1-header, .section2-header, .section3-header, .page-toc-header
 {
     margin-top: .5em;
@@ -254,6 +290,11 @@ Section
     margin-top: 0px;
 }
 
+.section1-number:before
+{
+    content: counter(section1-counter);
+}
+
 .section1-subtitle
 {
     font-size: 16pt;
@@ -276,6 +317,11 @@ Section
     font-size: 16pt;
 }
 
+.section2-number:before
+{
+    content: counter(section1-counter) "." counter(section2-counter);
+}
+
 .section2-subtitle, .section2-subtitle
 {
     font-size: 14pt;
@@ -305,6 +351,11 @@ Section
     border-bottom: 1px #27689d solid;
 }
 
+.section3-number:before
+{
+    content: counter(section1-counter) "." counter(section2-counter) "." counter(section3-counter);
+}
+
 .section-intro
 {
     margin-top: .75em;