uswds-jekyll 4.1.0 → 4.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 285f8c20da27c19919ac01305cac7d1845fd85a8
-  data.tar.gz: df74eaf77ecf8d47c66152851fbf9968775d306d
+SHA256:
+  metadata.gz: d66abed686bf7cab270424ed9e27df903f6fd3a8b6e5992a8af32572365c0a07
+  data.tar.gz: 3ed7ff3610291b1b97e9d58f2bafdf520f29be82e69fb4952943804e396ec13b
 SHA512:
-  metadata.gz: 8fcc1da3e3d11cc0b7a7c9a42e4540750c364afba86db8251d9a2a48bc9f4aa71ed26e06c61260a2a2e4343dcf11fd52eff2fee773e1e48527e2d5531ea2b671
-  data.tar.gz: 6ec627845720232a60ad4b1c38f6a7d4e3ddfc13010c85c1a9515a4696181c43e84006cfca8a7a76aeed98560a77ded5d19f96a70003d099a95fca0525e89232
+  metadata.gz: 07edf05992481180980340d152539871b98a877065455f3efa92b5498971f9b5ec52f1d00e461ad0870c5bc933b9edf85762f6833760a89bda6e2a7f4c0e7504
+  data.tar.gz: 160780e8ac43fec6e728b7f53e492e452276a15ecec4fd9ba711d175e22a4c349079a454322bec929a8eae506c45e295f124467d0efe3bc05d3808f89387311c

data/README.md

@@ -9,8 +9,12 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
     - [Versioning](#versioning)
 1. [Configuration](#configuration)
     - [Site title](#site-title)
+    - [Site description](#site-description)
     - [Navigation](#navigation)
     - [Page subnavigation](#page-subnavigation)
+    - [Hero](#hero)
+    - [Tagline intro](#tagline-intro)
+    - [Graphics list](#graphics-list)
     - [Color and font configuration](#color-and-font-configuration)
     - [Search](#search)
     - [Analytics](#analytics)
@@ -142,6 +146,10 @@ You can change your site's title with the `title` field in your
 _only_ in the site header, you can set the `title` field in
 `_data/header.yml`.
 
+### Site description
+
+You can change your site's description with the `description` field in your
+`_config.yml`. If you want to override it for a particular page, you can set the `description` field in that page's frontmatter.
 
 ### Navigation
 
@@ -174,6 +182,15 @@ shared by different components, such as the [header](#header) and
 [footer](#footer). See the documentation for those components for
 more info.
 
+### Page title
+
+Set each page's title in its frontmatter:
+
+```md
+---
+title: About us
+---
+```
 
 ### Page subnavigation
 
@@ -202,6 +219,19 @@ The `subnav` field should be used to link to sections _within_ the current
 page, because links to other pages will cause the linking page's side
 navigation to collapse when visited.
 
+
+`sidenav` is a key _into_ `_data/navigation.yml`. See the [navigation](#navigation) docs for more info.
+
+A page's "current" or "active" state in the sidenav is
+determined by whether a link's `href` matches `page.url` or
+`page.permalink` for each page being rendered.
+
+`subnav` is a list of links to display on this page under its own link in the side navigation.
+
+**Note that subnav link hrefs are not prefixed with
+`site.baseurl`** because this breaks hash links prefixed with
+`#`.
+
 **Pro tip:** Unless your Jekyll configuration specifies otherwise, the default
 Markdown formatter (Kramdown) will automatically generate predictable `id`
 attributes for your page headings and convert markdown like this:
@@ -226,10 +256,53 @@ redcarpet:
     - with_toc_data
 ```
 
+**Pro tip:** If you're like us and prefer your navigation sticky, you can add `sticky_sidenav: true` on [page](#layout-page), [project](#layout-project), and [team member](#layout-team-member) layouts to have the sidenav follow as you scroll.
+
+### Hero
+
+```yml
+hero: # optional
+  image: /path/to/image.jpg # optional
+  callout:
+    alt: Callout white text! # optional
+    text: The rest of the callout
+  button: # optional
+    text: The button text
+    href: /button-href/
+```
+
+### Tagline intro
+
+```yml
+# optional, but must be used in conjunction with 'intro', below
+tagline: A tagline for your page
+# also optional, but must be used with 'tagline', above
+intro: |
+  Some introductory text content.
+
+  This will be processed as **Markdown**.
+```
+
+### Graphics list
+```yml
+# an optional list of graphics to display before or after the content
+graphics:
+  - image:
+      # note the indentation here: graphics[n].image.src
+      src: /path/to/image.ext
+      alt: optional alt text
+    title: Optional graphic title, rendered as an <h3>
+    description: Graphic description text, processed as _Markdown_.
+
+# optional
+graphics_position: (before|after)
+```
+
 ### Color and font configuration
 
 The default colors and fonts can be configured in the `_data/theme.yml` file.
 
+
 ### Search
 
 [Search.gov](https://search.gov/) is used for search and can be configured in `_config.yml`.
@@ -457,7 +530,7 @@ header data to come directly from the Jekyll configuration file
 `_includes/header.html` to look like this:
 
 ```html
-{% assign header = site.header %}
+{% assign header = site.data.header %}
 {% include components/header--basic.html %}
 ```
 
@@ -489,11 +562,17 @@ See this repo's [footer.yml](_data/footer.yml) for more info.
 This theme provides the following layouts, which you can use by
 setting the `layout` [front matter] on each page, like so:
 
-```yaml
+```yml
 ---
 layout: name
 ---
 ```
+Supported (optional) front matter for page layouts.
+
+- [page navigation](#page-subnavigation)
+- [hero](#hero)
+- [tagline intro](#tagline-intro)
+- [graphics list](#graphics-list)
 
 ### `layout: default`
 
@@ -512,36 +591,6 @@ This layout implements the [home page
 template](https://designsystem.digital.gov/page-templates/landing/), which
 accommodates the following [front matter]:
 
-```yml
-hero: # optional
-  image: /path/to/image.jpg # optional
-  callout:
-    alt: Callout white text! # optional
-    text: The rest of the callout
-  button: # optional
-    text: The button text
-    href: /button-href/
-
-# optional, but must be used in conjunction with 'intro', below
-tagline: A tagline for your page
-# also optional, but must be used with 'tagline', above
-intro: |
-  Some introductory text content.
-
-  This will be processed as **Markdown**.
-
-# an optional list of graphics to display before or after the content
-graphics:
-  - image:
-      # note the indentation here: graphics[n].image.src
-      src: /path/to/image.ext
-      alt: optional alt text
-    title: Optional graphic title, rendered as an <h3>
-    description: Graphic description text, processed as _Markdown_.
-
-# optional
-graphics_position: (before|after)
-```
 
 Check out the YAML front matter in the [home demo
 page](demo/home.html) for an example of how to structure it.
@@ -549,22 +598,7 @@ page](demo/home.html) for an example of how to structure it.
 ### `layout: page`
 
 This layout implements the [document page
-template](https://designsystem.digital.gov/page-templates/docs/), and
-accommodates an optional side navigation. Supported [front matter]:
-
-* `sidenav` is a key _into_ `_data/navigation.yml`. See the
-  [navigation](#navigation) docs for more info.
-
-    A page's "current" or "active" state in the sidenav is
-    determined by whether a link's `href` matches `page.url` or
-    `page.permalink` for each page being rendered.
-
-* `subnav` is a list of links to display on this page under its own
-  link in the side navigation.
-
-    **Note that subnav link hrefs are not prefixed with
-    `site.baseurl`** because this breaks hash links prefixed with
-    `#`.
+template](https://designsystem.digital.gov/page-templates/docs/).
 
 See the [page demo page](demo/page.md) for an example of how this
 works, and see [_data/navigation.yml](_data/navigation.yml) for how

data/_includes/components/banner.html

@@ -1,4 +1,4 @@
-<div class="usa-banner">
+<section class="usa-banner">
   <div class="usa-accordion">
     <header class="usa-banner-header">
       <div class="usa-grid usa-banner-inner"> <img src="{{ site.baseurl }}/assets/uswds/img/favicons/favicon-57.png" alt="U.S. flag">
@@ -7,7 +7,7 @@
     <div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner">
       <div class="usa-banner-guidance-gov usa-width-one-half"> <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/assets/uswds/img/icon-dot-gov.svg" alt="Dot gov">
         <div class="usa-media_block-body">
-          <p> <strong>The .gov means it’s official.</strong> <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site. </p>
+          <p> <strong>The {{ header.government_tld | default: ".gov" }} means it’s official.</strong> <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site. </p>
         </div>
       </div>
       <div class="usa-banner-guidance-ssl usa-width-one-half"> <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/assets/uswds/img/icon-https.svg" alt="Https">
@@ -17,4 +17,4 @@
       </div>
     </div>
   </div>
-</div>
+</section>

data/_includes/components/footer--big.html

@@ -0,0 +1,114 @@
+{% if footer %}
+<footer class="usa-footer usa-footer-big" role="contentinfo">
+
+  {% if footer.last_updated %}
+    <div class="usa-grid">
+      <div class="usa-width-one-whole">
+        <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if footer.top %}
+    <div class="usa-grid usa-footer-return-to-top">
+      <a href="{{ footer.top.href | default: '#' }}">{{ footer.top.text | default: 'Return to top' }}</a>
+    </div>
+  {% endif %}
+
+
+
+  {% if footer.links %}
+    {% assign footer_links = site.data.navigation[footer.links] | default: footer.links %}
+    {% assign _sizes = 'whole half third fourth sixth' | split: ' ' %}
+    {% assign _size = footer_links.size | minus: 1 %}
+    {% assign _size = _sizes[_size] | default: 'whole' %}
+  <div class="usa-footer-primary-section">
+    <div class="usa-grid">
+      <nav class="usa-footer-nav{% if footer.big_footer_signup_form %} usa-width-two-thirds{% endif %}">
+        {% for _topic in footer_links %}
+        <ul class="usa-unstyled-list usa-width-one-{{ _size }} usa-footer-primary-content">
+          <li class="usa-footer-primary-link">
+            <h4>{{ _topic.text }}</h4>
+          {% for _link in _topic.links %}
+          <li class="usa-footer-secondary-link">
+            <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              {{ _link.text }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+        {% endfor %}
+      </nav>
+      {% if footer.big_footer_signup_form %}
+      <div class="usa-sign_up-block usa-width-one-third">
+        <h3 class="usa-sign_up-header">Sign up</h3>
+
+        <label class="" for="email" id="">Your email address</label>
+        <input id="email" name="email" type="email">
+
+        <button type="submit">Sign up</button>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+  {% if footer.logos or footer.heading or footer.contact or footer.edit_page %}
+  <div class="usa-footer-secondary_section">
+    <div class="usa-grid">
+      <div class="usa-footer-logo usa-width-one-half">
+        {% if footer.logos %}
+          {% for logo in footer.logos -%}
+            {% if logo.url %}
+              <a href="{{ logo.url }}">
+            {% endif %}
+            <img class="usa-footer-big-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
+            {% if logo.url %}
+              </a>
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+        {% if footer.heading %}
+        <h3 class="usa-footer-big-logo-heading">{{ footer.heading }}</h3>
+        {% endif %}
+      </div>
+
+      {% if footer.contact %}
+      <div class="usa-footer-contact-links usa-width-one-half">
+        {% assign social_links = site.data.footer.contact.social_links %}
+        {% if footer.contact.contact_links %}
+          {% for _link in social_links %}
+            <a class="usa-link-{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              <span>{{ _link.text }}</span>
+            </a>
+          {% endfor %}
+        {% endif %}
+        {% if footer.contact.heading %}
+          <h3 class="usa-footer-contact-heading">{{ footer.contact.heading }}</h3>
+          {% endif %}
+          {% if footer.contact.contact_links %}
+            <address>
+              {% assign contact_links = site.data.footer.contact.contact_links %}
+              {% for _link in contact_links %}
+                <div class="usa-footer-primary-content usa-footer-contact_info">
+                  <p>
+                    <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                      {{ _link.text }}
+                    </a>
+                  </p>
+                </div>
+              {% endfor %}
+            </address>
+        {% endif %}
+      {% endif %}
+      {% if footer.edit_page %}
+        <small><a href="https://github.com/{{ site.github.organization }}/{{ site.github.repository }}/edit/{{ site.github.default_branch }}/{{ page.path }}" class="usa-sidenav-edit" target="_blank">{{ footer.edit_page.text | default: 'Edit this page' }}</a></small>
+      {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}

data/_includes/components/footer--medium.html

@@ -8,7 +8,7 @@
       </div>
     </div>
   {% endif %}
-  
+
   {% if footer.top %}
     <div class="usa-grid usa-footer-return-to-top">
       <a href="{{ footer.top.href | default: '#' }}">{{ footer.top.text | default: 'Return to top' }}</a>
@@ -39,7 +39,7 @@
   </div>
   {% endif %}
 
-  {% if footer.logos or footer.heading or footer.contact %}
+  {% if footer.logos or footer.heading or footer.contact or footer.edit_page %}
   <div class="usa-footer-secondary_section">
     <div class="usa-grid">
       <div class="usa-footer-logo usa-width-one-half">

data/_includes/components/footer--slim.html

@@ -0,0 +1,89 @@
+{% if footer %}
+<footer class="usa-footer usa-footer-slim" role="contentinfo">
+
+  {% if footer.last_updated %}
+    <div class="usa-grid">
+      <div class="usa-width-one-whole">
+        <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if footer.top %}
+    <div class="usa-grid usa-footer-return-to-top">
+      <a href="{{ footer.top.href | default: '#' }}">{{ footer.top.text | default: 'Return to top' }}</a>
+    </div>
+  {% endif %}
+
+
+
+  {% if footer.links %}
+    {% assign footer_links = site.data.navigation[footer.links] | default: footer.links %}
+    {% assign _sizes = 'whole half third fourth sixth' | split: ' ' %}
+    {% assign _size = footer_links.size | minus: 1 %}
+    {% assign _size = _sizes[_size] | default: 'whole' %}
+  <div class="usa-footer-primary-section">
+    <div class="usa-grid">
+      <nav class="usa-footer-nav{% if footer.contact.contact_links %} usa-width-two-thirds{% endif %}">
+        <ul class="usa-unstyled-list">
+          {% for _link in footer_links %}
+          <li class="usa-width-one-{{ _size }} usa-footer-primary-content">
+            <a class="usa-footer-primary-link" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              {{ _link.text }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </nav>
+    {% if footer.contact.contact_links %}
+      <address>
+        <div class="usa-width-one-third">
+          {% assign contact_links = site.data.footer.contact.contact_links %}
+          {% for _link in contact_links %}
+            <div class="usa-footer-primary-content usa-footer-contact_info">
+              <p>
+                <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                  {{ _link.text }}
+                </a>
+              </p>
+            </div>
+          {% endfor %}
+        </div>
+      </address>
+    {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+  {% if footer.logos or footer.edit_page %}
+  <div class="usa-footer-secondary_section">
+    <div class="usa-grid">
+      <div class="usa-footer-logo usa-width-one-half">
+        {% if footer.logos %}
+          {% for logo in footer.logos -%}
+            {% if logo.url %}
+              <a href="{{ logo.url }}">
+            {% endif %}
+            <img class="usa-footer-slim-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
+            {% if logo.url %}
+              </a>
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+        {% if footer.heading %}
+        <h3 class="usa-footer-slim-logo-heading">{{ footer.heading }}</h3>
+        {% endif %}
+      </div>
+
+      {% if footer.edit_page %}
+      <div class="usa-footer-contact-links usa-width-one-half align-right">
+        <small><a href="https://github.com/{{ site.github.organization }}/{{ site.github.repository }}/edit/{{ site.github.default_branch }}/{{ page.path }}" class="usa-sidenav-edit" target="_blank">{{ footer.edit_page.text | default: 'Edit this page' }}</a></small>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}