Refactor in-page nav

GSA · Jul 22, 2024 · a878b68 · a878b68
1 parent 5abdb38
commit a878b68
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 96 deletions.
diff --git 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
@@ -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
@@ -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,19 +42,14 @@ <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 -}}
                           <p>Open to the public.</p>
                         {{- 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
@@ -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
@@ -18,23 +18,20 @@ <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"
           data-root-margin="-350px 0px -350px 0px"
           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
@@ -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 -}}