Review layouts

This commit:

- Removes unused layouts and partials
- Reviews all layouts and partials for correct data
  - Removes `include.` references, not part of 11ty
- Removes defunct .about.yml data
- Minor tweaks to code spacing, layout, indentation

While working on this, I noticed some duplicate includes, like header is basically the same as usa-banner. I think that's why we don't have a menu: I suspect the `header` file in Jekyll was the top menu, but got overwritten by the "this is a .gov site" banner, which is called usa-banner in Jekyll but header in 18F/guides.

_data/social_media.yml

@@ -18,7 +18,7 @@
     dark: /assets/img/social-icons/svg/linkedin-darkest.svg
 -
   platform: RSS feed
-  link: /feed.xml
+  link: /feed/
   image:
     light: /assets/img/social-icons/svg/rss-lightest.svg
     dark: /assets/img/social-icons/svg/rss25.svg

_includes/banner-cta.html

@@ -2,10 +2,14 @@
   <div class="grid-container">
     <div class="grid-row">
       <div class="grid-col">
-          <p class="font-sans-lg text-white">Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.</p>
-          <a class="usa-button an18f-button--accent" href="{{ "/contact/" | url }}">Contact us</a>
-        </div>
+        <p class="font-sans-lg text-white">
+          Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.
+        </p>
+        <a class="usa-button an18f-button--accent" href="{{ "/contact/" | url }}">
+          Contact us
+        </a>
       </div>
     </div>
   </div>
+</div>
 </section>

_includes/card-with-image-guides.html

@@ -1,22 +1,45 @@
 {% comment %}
-This partial outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image.
-It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page.
-The whole card is no longer a clickable link. In the future, these might be condensed back down
-into a single partial and class, but it will probably require some more conditional statements
-because the behaviors are so different.
-
-The expected arguments for this partial are:
-link_url - the url the links on the card will link to (href)
-image_path - the path to the image, note that the partial will prepend the site baseurl
-text_content - the text to be displayed next to the image; the guide name
-text_descrip - the longer description to be displayed under the card heading
-
-Optional arguments:
-card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
-image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
-image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
-image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
-hero.url - for guides where "promoted" = true, this will be the hero image for the card.
+This partial outputs a card with a heading, icon, descriptive text, a
+link, and, optionally, a hero image. It was spun off from the
+"card-with-image" partial to accomodate the unique needs of the guides
+index page.
+
+The whole card is no longer a clickable link. In the future, these
+might be condensed back down into a single partial and class, but it
+will probably require some more conditional statements because the
+behaviors are so different.
+
+Required arguments
+------------------
+link_url
+the url the links on the card will link to (href)
+
+image_path
+the path to the image, note that the partial will prepend the site baseurl
+
+text_content
+the text to be displayed next to the image; the guide name
+
+text_descrip
+the longer description to be displayed under the card heading
+
+Optional arguments
+------------------
+card_color
+if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
+
+image_alt_text
+will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
+
+image_side
+if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
+
+image_size
+if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
+
+hero_url
+for guides where "promoted" = true, this will be the hero image for the card.
+
 {% endcomment %}
 
 <div class="card-with-image-guides display-flex flex-column radius-lg">

_includes/card-with-image.html

@@ -1,16 +1,32 @@
 {% comment %}
 This partial outputs a card with image and text. The whole card is a clickable link.
 
-The expected arguments for this partial are:
-link_url - the url the card will link to (href)
-image_path - the path to the image, note that the partial will prepend the site baseurl
-text_content - the text to be displayed next to the image
-
-Optional arguments:
-card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
-image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
-image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
-image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
+Required arguments
+------------------
+link_url
+the url the card will link to (href)
+
+image_path
+the path to the image, note that the partial will prepend the site baseurl
+
+text_content
+the text to be displayed next to the image
+
+
+Optional arguments
+------------------
+card_color
+if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
+
+image_alt_text
+will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
+
+image_side
+if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
+
+image_size
+if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
+
 {% endcomment %}
 
 <a href="{{ link_url }}"

_includes/feature-image.html

@@ -1,6 +1,6 @@
-{% assign include_image = include.image | default: page.image %}
-{% assign include_image_alt = include.image | default: page.image_alt | default: "" %}
-{% assign include_figcaption = include.image_figcaption | default: page.image_figcaption %}
+{% assign include_image = image | default: page.image %}
+{% assign include_image_alt = image | default: page.image_alt | default: "" %}
+{% assign include_figcaption = image_figcaption | default: page.image_figcaption %}
 
 {% if page.hero %}
 <figure class="post-feature_image" role="img" title="{{ include_image_alt }}" style="background-image: url('{{ site.baseurl }}{{ include_image }}')">

_includes/featured-posts.html

@@ -1,6 +1,6 @@
-{% assign featured_posts = include.related_posts %}
+{% assign featured_posts = related_posts %}
 {% if featured_posts.size > 0 %}
-{% if include.color_mode == "dark"%}
+{% if color_mode == "dark"%}
   {% assign border_color = "border-primary-lightest" %}
   {% assign text_color = "text-white" %}
   {% assign hover_color = "hover-primary-lightest" %}
@@ -19,7 +19,7 @@ <h3 class="border-top-05 {{ border_color }} {{ hover_color }} padding-top-3 marg
           {{ post.title }}
         </h3>
       </a>
-      {% if include.show_excerpt %}
+      {% if show_excerpt %}
         {{ post.excerpt }}
       {% endif %}
     </li>

_includes/footer.html

@@ -3,9 +3,9 @@
     <div class="grid-container">
       <div class="grid-row">
         <div class="grid-col usa-dark-background">
-          <p class="margin-bottom-0 text-white"> This project is maintained by <a class="usa-link text-primary-dark" href="https://18f.gsa.gov/">18F</a></p>
-          <p class="margin-bottom-0 margin-top-05 text-white"> Learn more about our <a class="usa-link text-primary-dark" href="https://18f.gsa.gov/linking-policy/">Linking Policy</a></p>
-          <p class="margin-top-05 text-white"> Have questions or would like to contact us? Email us at <a class="usa-link text-primary-dark" href="mailto:18f@gsa.gov">18F@gsa.gov</a></p>
+          <p class="margin-bottom-0 text-white">This project is maintained by <a class="usa-link text-primary-dark" href="https://18f.gsa.gov/">18F</a></p>
+          <p class="margin-bottom-0 margin-top-05 text-white">Learn more about our <a class="usa-link text-primary-dark" href="https://18f.gsa.gov/linking-policy/">Linking Policy</a></p>
+          <p class="margin-top-05 text-white">Have questions or would like to contact us? Email us at <a class="usa-link text-primary-dark" href="mailto:18f@gsa.gov">18F@gsa.gov</a></p>
         </div>
       </div>
     </div>

_includes/graphic-block.html

@@ -1,9 +1,9 @@
 <div class="border-bottom-05 border-primary-lightest">
-  <img src="{{ site.baseurl }}{{include.image_path}}" 
+  <img src="{{ site.baseurl }}{{ image_path }}"
        class="width-full"
-       alt="{{ include.image_alt_text }}"
-  > 
-  <p class=" font-sans-lg line-height-sans-4 padding-bottom-3" > 
-    {{ include.body_text }}
+       alt="{{ image_alt_text }}"
+  >
+  <p class=" font-sans-lg line-height-sans-4 padding-bottom-3" >
+    {{ body_text }}
   </p>
 </div>

_includes/layouts/post.html

@@ -6,6 +6,7 @@
 {% endcomment %}
 
 {% if page.image %}
+  {% comment %}This include will probably need to pass in data explicitly.{% endcomment %}
   {% include "feature-image.html" %}
 {% endif %}
 

_includes/layouts/styled-container.html

@@ -13,7 +13,7 @@
       </div>
       <aside class="tablet:grid-offset-1 tablet:grid-col-4 margin-bottom-2">
         {%- if page.subnav_items %}
-          {% include "subnav.html" subnav_items=page.subnav_items %}
+          {% include "subnav.html" subnav_items: page.subnav_items %}
         {% endif %}
         {%- if page.side_cta -%}
           {% include "side-cta.html" %}