From a878b681310f8a9c481f85ed50392d1a17dfe1d0 Mon Sep 17 00:00:00 2001
From: lcummings3424 <liam.cummings@gsa.gov>
Date: Mon, 22 Jul 2024 15:26:39 -0500
Subject: [PATCH] Refactor in-page nav

---
 themes/digital.gov/layouts/_default/list.html | 20 +------
 .../digital.gov/layouts/_default/single.html  | 18 +-----
 .../layouts/communities/single.html           | 58 ++++++-------------
 .../partials/core/usa-in-page-nav.html        | 18 ++++++
 .../digital.gov/layouts/resources/single.html | 15 ++---
 .../digital.gov/layouts/services/single.html  | 14 +----
 6 files changed, 47 insertions(+), 96 deletions(-)
 create mode 100644 themes/digital.gov/layouts/partials/core/usa-in-page-nav.html

diff --git a/themes/digital.gov/layouts/_default/list.html b/themes/digital.gov/layouts/_default/list.html
index cadd235057..7acd417f6f 100644
--- a/themes/digital.gov/layouts/_default/list.html
+++ b/themes/digital.gov/layouts/_default/list.html
@@ -14,7 +14,7 @@
                 <p class="kicker">{{- .Params.kicker -}}</p>
               {{- end -}}
 
-              {{/* Page Title */}}
+              {{/* Page  Title */}}
               <h1>{{- .Title | markdownify -}}</h1>
 
               {{/* Deck */}}
@@ -27,23 +27,7 @@ <h1>{{- .Title | markdownify -}}</h1>
       </header>
 
       <section class="grid-container grid-container-desktop">
-        <div class="usa-in-page-nav-container">
-          <!-- 
-        data-root-margin sets the observable "window" for the element, details here https://designsystem.digital.gov/components/in-page-navigation/#using-the-in-page-navigation-component-2
-        the values ensure that the sidenav links highlight in order when there are multiple headers visible on the viewport, otherwise the highlight skips headers
-       -->
-          <aside
-            class="usa-in-page-nav"
-            data-title-heading-level="h3"
-            data-root-margin="-350px 0px -350px 0px"
-          ></aside>
-          <div class="">
-            {{/* Content */}}
-            <div class="content usa-prose">
-              {{- .Content -}}
-            </div>
-          </div>
-        </div>
+        {{- partial "partials/core/usa-in-page-nav.html" . -}}
       </section>
     </article>
   </main>
diff --git a/themes/digital.gov/layouts/_default/single.html b/themes/digital.gov/layouts/_default/single.html
index cadd235057..f778cd2d3e 100644
--- a/themes/digital.gov/layouts/_default/single.html
+++ b/themes/digital.gov/layouts/_default/single.html
@@ -27,23 +27,7 @@ <h1>{{- .Title | markdownify -}}</h1>
       </header>
 
       <section class="grid-container grid-container-desktop">
-        <div class="usa-in-page-nav-container">
-          <!-- 
-        data-root-margin sets the observable "window" for the element, details here https://designsystem.digital.gov/components/in-page-navigation/#using-the-in-page-navigation-component-2
-        the values ensure that the sidenav links highlight in order when there are multiple headers visible on the viewport, otherwise the highlight skips headers
-       -->
-          <aside
-            class="usa-in-page-nav"
-            data-title-heading-level="h3"
-            data-root-margin="-350px 0px -350px 0px"
-          ></aside>
-          <div class="">
-            {{/* Content */}}
-            <div class="content usa-prose">
-              {{- .Content -}}
-            </div>
-          </div>
-        </div>
+        {{- partial "partials/core/usa-in-page-nav.html" . -}}
       </section>
     </article>
   </main>
diff --git a/themes/digital.gov/layouts/communities/single.html b/themes/digital.gov/layouts/communities/single.html
index 52d8028105..4f6b158846 100644
--- a/themes/digital.gov/layouts/communities/single.html
+++ b/themes/digital.gov/layouts/communities/single.html
@@ -15,18 +15,13 @@ <h1>{{ .Title | markdownify }} Community</h1>
       </header>
 
       <div class="usa-in-page-nav-container">
-        <!--
-        data-root-margin sets the observable "window" for the element, details here https://designsystem.digital.gov/components/in-page-navigation/#using-the-in-page-navigation-component-2
-        the values ensure that the sidenav links highlight in order when there are multiple headers visible on the viewport, otherwise the highlight skips headers
-       -->
         <aside
           class="usa-in-page-nav"
           data-title-heading-level="h3"
           data-root-margin="-350px 0px -350px 0px"
         ></aside>
-        {{/* Summary */}}
-        {{- if .Params.summary -}}
-          <div class="content usa-prose">
+        <div class="content usa-prose">
+          {{- if .Params.summary -}}
             <p>{{- .Params.summary | markdownify -}}</p>
 
             {{- if .Params.community_list -}}
@@ -47,11 +42,7 @@ <h4 class="join-community-form__header">
                 {{- range $i, $e := .Params.community_list -}}
                   <div class="join-community-form__body">
                     <div class="join-community-form__body-eligibility">
-                      {{/* Checks to see if the community is public or govt only and sets the "terms" of the community, with an option to override the terms for each community by setting it in the front matter */}}
-
-                      {{/* PUBLIC */}}
                       {{- if eq $e.type "public" -}}
-                        {{/* Checking to see if community terms are defined */}}
                         {{- if $e.terms -}}
                           <p>{{- $e.terms | markdownify -}}</p>
                         {{- else -}}
@@ -59,7 +50,6 @@ <h4 class="join-community-form__header">
                         {{- end -}}
                       {{- end -}}
 
-                      {{/* GOVT */}}
                       {{- if eq $e.type "government" -}}
                         {{- if $e.terms -}}
                           <p>{{- $e.terms | markdownify -}}</p>
@@ -70,7 +60,6 @@ <h4 class="join-community-form__header">
                         {{- end -}}
                       {{- end -}}
 
-                      {{/* GOVT_ONLY */}}
                       {{- if eq $e.type "government_only" -}}
                         {{- if $e.terms -}}
                           <p>{{- $e.terms | markdownify -}}</p>
@@ -81,51 +70,42 @@ <h4 class="join-community-form__header">
                     </div>
 
                     <div class="join-community-form__body-email">
-                      {{/* Community JOIN types ---
-                        - Listerv via an email (most common)
-                        - Listerv via a form
-                        - Google Group
-                        - Slack
-                      */}}
-                      {{/* Listserv Platforms without form sign-up option */}}
                       {{- if and (eq $e.platform "listserv") (not $e.subscribe_form ) -}}
                         {{- partial "core/community-join-without-form.html" (dict "context" . "e" $e) -}}
                       {{- end -}}
 
-                      {{/* Google Group platforms */}}
                       {{- if and (eq $e.platform "google-group") ( $e.subscribe_form ) -}}
                         {{- partial "core/community-join-google-group.html" (dict "context" . "e" $e) -}}
                       {{- end -}}
 
-                      {{/* Slack platforms */}}
                       {{- if and (eq $e.platform "slack") ( $e.subscribe_form ) -}}
                         {{- partial "core/community-join-slack.html" (dict "context" . "e" $e) -}}
                       {{- end -}}
-
                     </div>
                   </div>
                 {{- end -}}
-
               </section>
             {{- end -}}
-            <div>
-              {{- .Content -}}
-            </div>
+          {{- end -}}
+
 
-            <div class="community_events">
-              {{- partial "core/get-upcomingevents.html" . -}}
-            </div>
+          <div>
+            {{- .Content -}}
+          </div>
+
+          <div class="community_events">
+            {{- partial "core/get-upcomingevents.html" . -}}
+          </div>
 
-            <div class="Community_conduct">
-              <h2 id="community-conduct">Community Conduct</h2>
-              {{- partial "core/community_pagefooter.html" . -}}
-              <br />
-            </div>
-            <div>
-              <br />
-            </div>
+          <div class="Community_conduct">
+            <h2 id="community-conduct">Community Conduct</h2>
+            {{- partial "core/community_pagefooter.html" . -}}
+            <br />
           </div>
-        {{- end -}}
+          <div>
+            <br />
+          </div>
+        </div>
       </div>
     </article>
   </main>
diff --git a/themes/digital.gov/layouts/partials/core/usa-in-page-nav.html b/themes/digital.gov/layouts/partials/core/usa-in-page-nav.html
new file mode 100644
index 0000000000..2cfc259731
--- /dev/null
+++ b/themes/digital.gov/layouts/partials/core/usa-in-page-nav.html
@@ -0,0 +1,18 @@
+<!-- partials/core/usa-in-page-nav.html -->
+<div class="usa-in-page-nav-container">
+  <!-- 
+    data-root-margin sets the observable "window" for the element, details here https://designsystem.digital.gov/components/in-page-navigation/#using-the-in-page-navigation-component-2
+    the values ensure that the sidenav links highlight in order when there are multiple headers visible on the viewport, otherwise the highlight skips headers
+    -->
+  <aside
+    class="usa-in-page-nav"
+    data-title-heading-level="h3"
+    data-root-margin="-350px 0px -350px 0px"
+  ></aside>
+  <div class="">
+    {{/* Content */}}
+    <div class="content usa-prose">
+      {{- .Content -}}
+    </div>
+  </div>
+</div>
diff --git a/themes/digital.gov/layouts/resources/single.html b/themes/digital.gov/layouts/resources/single.html
index e704112f95..3b2a7092bf 100644
--- a/themes/digital.gov/layouts/resources/single.html
+++ b/themes/digital.gov/layouts/resources/single.html
@@ -18,15 +18,13 @@ <h1>{{- .Title | markdownify -}}</h1>
       </header>
 
       <div class="usa-in-page-nav-container">
-        <div>
-          {{/* Content */}}
-          <div class="content usa-prose">
-            {{- .Content -}}
-          </div>
-
-          {{/* Touchpoints Form */}}
-          {{- partial "core/touchpoints-form.html" . -}}
+        <div class="content usa-prose">
+          {{- .Content -}}
         </div>
+
+        {{- partial "core/touchpoints-form.html" . -}}
+
+
         <aside
           class="dg-sidebar usa-in-page-nav"
           data-title-heading-level="h4"
@@ -34,7 +32,6 @@ <h1>{{- .Title | markdownify -}}</h1>
           aria-label="Related content"
         >
           <div class="dg-related-items" data-related-items>
-            {{/* Related Communities and Services */}}
             {{- partial "core/get_related.html" . -}}
           </div>
         </aside>
diff --git a/themes/digital.gov/layouts/services/single.html b/themes/digital.gov/layouts/services/single.html
index 74563d8fb3..9fb1a06ce9 100644
--- a/themes/digital.gov/layouts/services/single.html
+++ b/themes/digital.gov/layouts/services/single.html
@@ -30,19 +30,7 @@ <h1>{{- .Title | markdownify -}}</h1>
         </div>
       </header>
 
-      <div class="usa-in-page-nav-container">
-        <aside
-          class="usa-in-page-nav"
-          data-title-heading-level="h3"
-          data-root-margin="-350px 0px -350px 0px"
-        ></aside>
-        <div>
-          {{/* Content */}}
-          <div class="content">
-            {{- .Content -}}
-          </div>
-        </div>
-      </div>
+      {{- partial "partials/core/usa-in-page-nav.html" . -}}
     </article>
   </main>
 {{- end -}}