Merge branch 'main' into kristinacyin-patch-1

.eleventy.js

@@ -1,7 +1,7 @@
 const { DateTime } = require('luxon');
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
-const pluginNavigation = require('@11ty/eleventy-navigation');
+const pluginNavigation = require('@11ty/eleventy-navigation'); // Allows nested side nav items.
 const markdownIt = require('markdown-it');
 const markdownItAttrs = require('markdown-it-attrs');
 const markdownItAnchor = require('markdown-it-anchor');
@@ -13,6 +13,7 @@ const { imageShortcode, imageWithClassShortcode } = require('./config');
 const dotenv = require('dotenv');
 dotenv.config();
 
+
 module.exports = function (config) {
   // Set pathPrefix for site
   let pathPrefix = '/';
@@ -159,6 +160,31 @@ module.exports = function (config) {
     </svg>`;
   });
 
+  // Set the modal 
+  //
+  //
+  // We're hardcoding all this stuff instead of using params to
+  // get this deployed quickly. If we use another modal on the site,
+  // we should consider refactoring this to a paired shortcode with
+  // multiple params. If we use 3+ different modals on the site, we
+  // HAVE to refactor this.
+
+  // Button trigger
+  config.addLiquidShortcode('modal-trigger--button', function () {
+    return `<a href="#modal-start-application" class="usa-button" aria-controls="modal-start-application" data-open-modal>Start a .gov domain request</a>`;
+  });
+
+  // Inline link trigger
+  config.addLiquidShortcode('modal-trigger--inline', function () {
+    return `<a href="#modal-start-application" class="usa-button usa-button--unstyled" aria-controls="modal-start-application" data-open-modal>Start a .gov domain request</a>`;
+  });
+
+  // Modal body (always pair with a trigger)
+  // Minified to avoid whitespace issues in rendering 
+  config.addLiquidShortcode('modal-body', function () {
+    return `<div class="usa-modal" id="modal-start-application" aria-labelledby="modal-start-application-heading" aria-describedby="modal-start-application-description"><div class="usa-modal__content"><div class="usa-modal__main"><h2 class="usa-modal__heading utility-header" id="modal-start-application-heading">Requirements for requesting a .gov domain</h2><div class="usa-prose"><ul><li>You must be a government employee, or be working on behalf of a government organization, to request a .gov domain.</li><li><a class="usa-link--external" href="https://login.gov/help/get-started/create-your-account/">You must have a Login.gov account</a>. Login.gov provides a simple and secure process for signing in to many government services with one account.<ul><li>Before you request your first .gov domain, you must verify your identity with Login.gov. This is a necessary layer of security that requires you to prove you are you, and not someone pretending to be you. <a href="https://get.gov/help/account-management/#get-help-with-login.gov">Get help with Login.gov</a>.</li></ul></li></ul><p>If you have <a href="https://get.gov/domains/before/#information-you%E2%80%99ll-need-to-complete-the-domain-request-form">the information you need</a>, requesting your domain might take around 15 minutes. </p></div><div class="usa-modal__footer"><ul class="usa-button-group"><li class="usa-button-group__item"><a class="usa-button" href="https://manage.get.gov/request/">Continue to Login.gov</a></li><li class="usa-button-group__item"><button type="button" class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal>Cancel</button></li></ul></div></div><button type="button" class="usa-button usa-modal__close" aria-label="Close this window" data-close-modal><svg class="usa-icon" aria-hidden="true" focusable="false" role="img"><use xlink:href="#svg-close"></use></svg></button></div></div>`;
+  });
+
   // If BASEURL env variable exists, update pathPrefix to the BASEURL
   if (process.env.BASEURL) {
     pathPrefix = process.env.BASEURL

README.md

@@ -29,6 +29,16 @@ For more about the template and it's functionality see [here](https://github.com
 
 `npm run dev`
 
+#### Run with 'clean' to force reset the assets
+
+If you are having issues with assets being locally cached/not updating:
+
+`npm run clean && npm run dev`
+
+### Run Pa11y
+
+`npm run pa11y`
+
 ## Adding new content and front matter
 You can create new pages by creating a new markdown file (.md) and adding “front matter” to the top of the markdown file. The front matter section starts and ends with three hyphens (---). It consists of key-value pairs that define some meta-data and options for the page. 
 You should set the following front matter on all pages.

_data/assetPaths.json

@@ -4,6 +4,6 @@
   "app.js": "/assets/js/app-XWR645AF.js",
   "app.map": "/assets/js/app-XWR645AF.js.map",
   "uswds.js": "/assets/js/uswds-init.js",
-  "styles.css": "/assets/styles/styles-XNWETRGL.css",
-  "styles.map": "/assets/styles/styles-XNWETRGL.css.map"
+  "styles.css": "/assets/styles/styles-I32PKXXT.css",
+  "styles.map": "/assets/styles/styles-I32PKXXT.css.map"
 }

_data/site.yaml

@@ -37,10 +37,10 @@ searchgov:
   endpoint: https://search.usa.gov
 
 #   # Replace this with your search.gov account.
-  affiliate: beta.get.gov
+  affiliate: get.gov
 
 #   # Replace this with your access key.
-  access_key: 1dDc6veg9gSCDz4GbBODf_VBUjxYXWTGB6mQpP4GiCw=
+  access_key: hEUY8jNk7Zcmn7Ni5Tafek-3eapK2RJ8WpeUDHnc_T4=
     #
 #   # This renders the results within the page instead of sending to user to search.gov.
   inline: true

_includes/blog-preview.html

@@ -2,11 +2,11 @@ <h2>The latest from .gov</h2>
 <ul class="usa-list">
   {% for post in posts limit:2 %}
   <li class="blog-item">
-    <h3 class="title-bullet margin-bottom-05 margin-top-1">
+    <h4 class="title-bullet font-heading-lg margin-bottom-05 margin-top-1">
       <a class="usa-link" href="{{ post.url | url }}" >
         {{ post.data.title }}
       </a>
-    </h3>
+    </h4>
     <time class="text-base-dark" 
           datetime="{{ post.date | date: '%Y-%m-%dT12:00:00+01:00' }}"
     >

_includes/content-blocks/general_domain_requirements.md

@@ -4,6 +4,6 @@ Your domain name must:
 - Relate to your organization’s name, location, and/or services
 - Be clear to the general public. Your domain name must not be easily confused with other organizations.
 
-Names that <em>uniquely apply to your organization</em> are likely to be approved over names that could also apply to other organizations. In most instances, this requires including your state’s two-letter abbreviation. 
+Names that <em>uniquely apply to your organization</em> are likely to be approved over names that could also apply to other organizations. 
 
 Requests for your organization’s initials or an abbreviated name might not be approved, but we encourage you to request the name you want.

_includes/content-blocks/what_we_offer.md

@@ -1,11 +1,13 @@
 ## We offer support for your .gov domain
 ### What we offer
 
-**Domain registration**: [Request your .gov now](#) or learn about the [information you'll need to complete your request](../../domains/before).
+**Domain registration**: {% modal-trigger--inline %} or learn about the [information you'll need to complete your request](../../domains/before).
+
+{% modal-body %}
 
 **Domain name consultation**: If you need help coming up with your .gov domain name, [contact us](../../contact).
 
-**Domain management support:** Once your .gov domain is up and running, you can:
+**Domain management support:** Once your .gov domain is up and running we’ll support you.
 
 - Check the status of your domain requests and manage your registered domains.
 - Stay informed about [domain security best practices](../../domains/security).

_includes/domain-search.html

@@ -5,7 +5,9 @@
 
 <script>
     function checkDomainAvailability() {
-        // TODO: update baseUrl to stable when Cloudflare migrates their data 11/15
+        // Cancel the default action
+        event.preventDefault();
+
         const baseUrl = "https://manage.get.gov/api/v1/available/?domain="
 
         var requested_domain = document.getElementById('domain-input').value
@@ -28,7 +30,7 @@
                 <div class="usa-alert usa-alert--success usa-alert--slim" role="alert">
                     <div class="usa-alert__body">
                         <p class="usa-alert__text">
-                        <b>${requested_domain_display_string}</b> is available!
+                            That domain is available!
                             <a class="usa-link" href="{{ '/domains/before/' | url }}">
                                 Read about next steps to take before requesting your .gov domain.
                             </a>
@@ -37,17 +39,12 @@
                 </div>
                 `
                 )
-            } 
-            else {
+            } else {
                 render_result(`
                 <div class="usa-alert usa-alert--error usa-alert--slim" role="alert">
                     <div class="usa-alert__body">
                         <p class="usa-alert__text">
-                            <b>${requested_domain_display_string}</b> isn't available.
                             ${response.message} 
-                            <a class="usa-link" href="{{ '/domains/choosing/' | url }}">
-                                Read more about choosing your .gov domain.
-                            </a>
                         </p>
                     </div>
                 </div>
@@ -60,28 +57,18 @@
     }
 
     function render_result(content, append = true){
-      document.getElementById('domain-available-message').innerHTML = (append == true) ? content : `<div></div>`;
+      document.getElementById('usa-search--domain_message').innerHTML = (append == true) ? content : `<div></div>`;
     }
-
-    document.addEventListener("keypress", function(event) {
-        // If the user presses the "Enter" key on the keyboard
-        if (event.key === "Enter") {
-            // Cancel the default action
-            event.preventDefault();
-            // Click the "check availability" button
-            document.getElementById("check-domain-availability-button").click();
-        }
-    });
 
 </script>
 
 <section class="usa-section domain-section padding-bottom-5 bg-accent-cool-lighter">
     <div class="grid-container">
-        <div class="domain-search-image">
+        <div class="domain-section__image">
             <h2>
                 Start your .gov domain search
             </h2>
-            <h3 class="domain-search-subtitle
+            <h3 class="domain-section__subtitle
             line-height-heading-3
             margin-top-0 margin-bottom-3
             text-normal"
@@ -92,24 +79,23 @@ <h2>
                     Read more about choosing your .gov domain.
                 </a>
             </h3>
-            <form class="usa-search domain-search domain-search-wrapper" role="search">
+            <form class="usa-search usa-search--domain" role="search">
                 <label class="usa-sr-only" for="domain-input">Search</label>
-                <div class="domain-search-input-wrapper">
-                <input 
-                    class="usa-input usagov-search-autocomplete" 
-                    id="domain-input"
-                    type="search" 
-                    name="query" 
-                    autocomplete="off"
-                    aria-label="Check Domain Name input"
-                    title="Check Domain input"
-                >
+                <div class="usa-search--domain__form-group">
+                    <input 
+                        class="usa-input usagov-search-autocomplete" 
+                        id="domain-input"
+                        type="search" 
+                        name="query" 
+                        autocomplete="off"
+                        aria-label="Check Domain Name input"
+                        title="Check Domain input"
+                    >
                     <span class="usa-search__submit-text">.gov</span>
                 </div>
                     <button 
-                    id="check-domain-availability-button"
-                    class="usa-button availability-button" 
-                    type="button"
+                    class="usa-button usa-search--domain__submit" 
+                    type="submit"
                     onclick="checkDomainAvailability()"
                     onsubmit="return false"
                     aria-label="Check availability of Domain Name"
@@ -118,7 +104,7 @@ <h2>
                         Check availability
                     </button>
             </form>
-            <div class="domain-alert" id="domain-available-message"></div>
+            <div class="usa-search--domain_message" id="usa-search--domain_message"></div>
         </div>
     </div>
 </section>

_includes/featured-dotgov.html

@@ -1,18 +1,18 @@
 <div
-    class="usa-summary-box margin-top-3 tablet:margin-top-1"
+    class="usa-summary-box"
     role="region"
     aria-labelledby="summary-box-key-information"
     >
     <div class="usa-summary-box__body">
-      <h3 class="usa-summary-box__heading" id="summary-box-key-information">
+      <h2>
         Featured .gov
-      </h3>
+      </h2>
   <div class="usa-summary-box__text">
     <h4 class="font-heading-lg text-semibold margin-top-205 margin-bottom-205">
       <a class="usa-link usa-link--external" rel="noopener noreferrer" href="https://blackhistorymonth.gov/">BlackHistoryMonth.gov</a>
     </h4>
     <p>A collaboration between the Library of Congress and other federal agencies recognizing the unique history, experiences, and contributions of Black Americans.</p>
-    <p><a class="usa-link" href="{{ '/about/data' | url }}">Explore more .gov data</a></p>  
+    <p><a class="usa-link" href="{{ '/about/data' | url }}">Explore .gov data</a></p>  
   </div>
     </div>
 </div>

_includes/header.html

@@ -5,7 +5,7 @@
 
 <div class="page-landing-page layout-demo ">
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
-  {% include "beta-banner.html" %}
+  <!-- {% include "maintenance-banner.html" %} -->
   <div class="usa-banner">
     <div class="usa-accordion">
       <section

_includes/learn-more.html

@@ -54,7 +54,7 @@ <h2>Learn about .gov domains</h2>
               </div>
               <div class="usa-icon-list__content">
                 <a href="{{ '/domains/election-offices' | url }}" class="usa-link highlight__learn__link">
-                  .gov domains for election offices
+                  .Gov domains for election offices
                 </a>
               </div>
             </li>
@@ -63,4 +63,4 @@ <h2>Learn about .gov domains</h2>
       </div>
     </div>
   </div>
-</section>
+</section>

_includes/maintenance-banner.html

@@ -0,0 +1,12 @@
+<section aria-label="Alert" >
+    <div class="usa-alert usa-alert--warning usa-alert--no-icon">
+      <div class="usa-alert__body">
+        <div class="grid-container">
+          <p class="usa-alert__text">
+            Jan 30, 2024, 20:10 ET: We are investigating an outage of manage.get.gov. DNS resolution of the .gov zone and individual domains are not affected.
+          </p>
+        </div>
+      </div>
+    </div>
+</section>
+

_includes/meta.html

@@ -18,13 +18,22 @@
     ================================================== -->
   <title>{{ title }}  |  {{site.title}}</title>
   <meta property="og:title" content="{{site.title}}" />
-  <meta name="description" content="{{site.description}}" />
-  <meta property="og:description" content="{{site.description}}" />
+
+  <!-- Custom Meta Description -->
+  {% if excerpt %}
+    <meta name="description" content="{{ excerpt }}" />
+    <meta property="og:description" content="{{ excerpt }}" />
+    <meta name="twitter:description" content="{{ excerpt }}" />
+  {% else %}
+    <meta name="description" content="{{site.description}}" />
+    <meta property="og:description" content="{{site.description}}" />
+    <meta name="twitter:description" content="{{site.description}}" />
+  {% endif %}
+  <!-- End Custom Meta Description -->
 
   <meta name="twitter:card" content="summary" />
   <meta name="twitter:site" content="@{{site.twitter}}" />
   <meta name="twitter:title" content="{{site.title}}" />
-  <meta name="twitter:description" content="{{site.description}}" />
 
   <meta property="og:type" content="article" />
   <link rel="canonical" href="{{ page.url }}" />

_includes/sidenav.html

@@ -6,7 +6,7 @@
 <aside class="usa-layout-docs-sidenav desktop:grid-col-3 padding-bottom-4">
   <nav>
     <ul class="usa-sidenav">
-      {% assign links = collections[eleventyNavigation.key] | eleventyNavigation %}
+      {% assign links = collections[tags] | eleventyNavigation %}
       {% for link in links %}
         {% assign _current = false %}
         {% if link.url == page.url %}
@@ -18,6 +18,30 @@
           >
            {{ link.title }}
           </a>
+          <!--
+            The following code allows us to nest to a depth of one, which for now is good.
+            we should look into adding recursion (using macros) if we want any deeper nesting
+          -->
+          {% assign splitLink = page.url | split:link.url %} <!--Check to see if submenu should be open-->
+          {% if splitLink[0] == blank %} <!--If the first entry in the array is blank, then the page url starts with the link url.  Load the submenu-->
+            {% if link.children.length %}
+              <ul class="usa-sidenav__sublist">
+                {%- for child in link.children %}
+                  {% assign _current = false %}
+                  {% if child.url == page.url %}
+                    {% assign _current = true %}
+                  {% endif %}
+                  <li class="usa-sidenav__item">
+                    <a href="{{ child.url | url }}"
+                      {% if _current %} class="usa-current" {% endif %}
+                    >
+                    {{ child.title }}
+                    </a>
+                  </li>
+                {% endfor -%}
+              </ul>
+            {% endif %}
+          {% endif %}
         </li>
     {% endfor %}
     </ul>