Correct the blog post and blog page templates

This commit: - Fixes the header, so the title appears - Removes unused parts of templates - Removes unused filters - Renames `image_accessibility` to `image_alt` site-wide - Sets up partials for images - Adjusts image asset paths - Incidentally removes a duplicate layout (`primary` and `guides` were the same)
18F · Jun 26, 2024 · a54fa31 · a54fa31
1 parent 42f4f37
commit a54fa31
Show file tree

Hide file tree

Showing 48 changed files with 163 additions and 233 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -20,9 +20,7 @@ const { readableDate
       , teamPhoto
       , teamLink
       , markdownify
-      , weightedSort
-      , asRelativeUrl
-      , matchPosts } = require('./config/filters');
+      , weightedSort } = require('./config/filters');
 const { postsCollection, servicesCollection, tagsCollection } = require('./config/collections');
 const { headingLinks } = require('./config/headingLinks');
 const { contrastRatio, humanReadableContrastRatio } = require('./config/wcagColorContrast');
@@ -107,12 +105,11 @@ module.exports = function (config) { /* eslint-disable-line func-names */
   config.addFilter('team_photo', teamPhoto);
   // Add a link to an 18F team member's author page
   config.addFilter('team_link', teamLink);
-  config.addFilter('weighted_sort', weightedSort);
-  config.addFilter('relative_url', asRelativeUrl);
-  config.addFilter('match_posts', matchPosts);
   config.addFilter('limit', (arr, limit) => arr.slice(0, limit));
   config.addFilter('matching', (collection, author) => collection.filter((post) => post.data.authors.includes(author)));
   config.addFilter('markdownify', markdownify);
+  config.addFilter('relative_url', (url) => url);
+  config.addFilter('weighted_sort', weightedSort);
 
   // Color contrast checkers for the color matrix in the Brand guide
   config.addFilter('contrastRatio', contrastRatio);
@@ -188,7 +185,7 @@ module.exports = function (config) { /* eslint-disable-line func-names */
     // Check for external URLs. External means any site that is not a federal .gov url
     // This check can't detect state/local .gov domains. Those will need to be
     // manually adjusted
-    const baseURL = new URL('https://guides.18f.gov/');
+    const baseURL = new URL('https://18f.gsa.gov/');
     const hrefValue = token.attrGet('href');
 
     if (!(new URL(hrefValue, baseURL).hostname.endsWith('.gov'))) {

diff --git a/_includes/adjacent_page_links.html b/_includes/adjacent_page_links.html
@@ -0,0 +1,38 @@
+{% assign previous = collections.posts | getPreviousCollectionItem: page %}
+{% assign next = collections.posts | getNextCollectionItem: page %}
+{% if previous or next %}
+<section class="margin-top-6 post-pagination">
+  <div class="grid-container">
+    <hr class="hr-1-base-lighter">
+    <div class="grid-row grid-gap">
+      <div class="grid-col-6">
+        {% if previous %}
+        <a href="{{ previous.url | url }}"
+           class="text-no-underline post-pagination__link"
+        >
+          <h2 class="post-pagination__heading">
+            {% include "svg/icons/arrow-left.svg" %}
+            Previous Post
+          </h2>
+          <p class="measure-1 text-bold text-primary-darkest">{{ previous.data.title }}</p>
+        </a>
+        {% endif %}
+      </div>
+      <div class="grid-col-6 text-right">
+        {% if next %}
+        <a href="{{ next.url | url }}"
+           class="text-no-underline post-pagination__link"
+        >
+          <h2 class="post-pagination__heading">
+            Next Post
+            {% include "svg/icons/arrow-right.svg" %}
+          </h2>
+          <p class="measure-1 float-right text-bold text-primary-darkest text-right">{{ next.data.title }}</p>
+        </a>
+        {% endif %}
+      </div>
+    </div>
+    <hr class="hr-1-base-lighter">
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/feature-image-small.html b/_includes/feature-image-small.html
@@ -0,0 +1,11 @@
+{% if image and image_feature_small %}
+  {% comment %}
+    The blog posts frontmatter has historically had the image paths set
+    with an absolute path, by including the leading slash.
+
+    The image shortcode needs the image URL without that slash,
+    hence the assign statement here removing the first one.
+  {% endcomment %}
+  {% assign rel_image_path = image | remove_first: "/" %}
+  {% image_with_class rel_image_path "image-feature-small" image_alt %}
+{% endif %}
diff --git a/_includes/feature-image.html b/_includes/feature-image.html
@@ -1,11 +1,16 @@
-{% 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 }}')">
-  {% if include_figcaption %}
-    <figcaption>{{- include_figcaption -}}</figcaption>
-  {% endif %}
-</figure>
+{% if image %}
+  {% comment %}
+    I'm wondering if there's a better way to do this, like setting up
+    a shortcode.
+  {% endcomment %}
+  <figure
+    class="post-feature_image"
+    role="img"
+    title="{{ image_alt }}"
+    style="background-image: url('{{ image | url }}')"
+    >
+    {% if image_figcaption %}
+      <figcaption>{{ image_figcaption }}</figcaption>
+    {% endif %}
+  </figure>
 {% endif %}
diff --git a/_includes/layouts/default.html b/_includes/layouts/default.html
@@ -11,25 +11,17 @@
       {% endif %}
     {% endcomment %}
   </head>
-  <body class="{{ layout.class }} {{ page.class }} {% if site.site_width %}site-{{ site.site_width }}{% endif %}">
-
+  <body class="{{ layout.class }} {{ page.class }}">
     {% include "skipnav.html" %}
     {% include "header.html" %}
 
-    {% if page.tagline and page.intro %}
-    <section class="grid-container usa-section">
-      <div class="grid-row grid-gap">
-        <div class="tablet:grid-col-4">
-          <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">{{ page.tagline }}</h2>
-        </div>
-        <div class="tablet:grid-col-8 usa-prose">
-          {{ page.intro | markdownify }}
-        </div>
-      </div>
-    </section>
-    {% endif %}
+    {% comment %}
+      code smell: Altering layouts based on the value of `layout`.
 
-    {% if page.layout == 'post' %}
+      We probably do this because every other layout needs the <main> tag,
+      while the post layout needs <article> without being wrapped in <main>.
+    {% endcomment %}
+    {% if layout == 'post' %}
       {{ content }}
     {% else %}
       <main id="main-content">
@@ -38,8 +30,6 @@ <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">{{ page.tagline
     {% endif %}
 
     {% include "footer.html" %}
-
     {% include "scripts.html" %}
-
   </body>
 </html>
diff --git a/_includes/layouts/guides.html b/_includes/layouts/guides.html
diff --git a/_includes/layouts/post.html b/_includes/layouts/post.html
@@ -1,14 +1,7 @@
 ---
 layout: default
 ---
-{% comment %}
-Some of the `page.` references will need to be deleted — but I'm not yet sure which.
-{% endcomment %}
-
-{% if page.image %}
-  {% comment %}This include will probably need to pass in data explicitly.{% endcomment %}
-  {% include "feature-image.html" %}
-{% endif %}
+{% include "feature-image.html" %}
 
 <article id="main-content" class="post-article margin-top-6" itemscope itemtype="http://schema.org/BlogPosting">
   <div class="grid-container">
@@ -30,11 +23,11 @@ <h1 itemprop="name headline">{{ title }}</h1>
     <div class="grid-row grid-gap margin-top-8">
       <div class="tablet:grid-col-7">
         <div class="post-content" itemprop="articleBody">
-          {% if page.image and page.image_feature_small %}
-            {% image_with_class page.image "image-feature-small" page.image_accessibility %}
-          {% endif %}
+
+          {% include "feature-image-small.html" %}
 
           {{ content }}
+
         </div>
       </div>
       <aside class="tablet:grid-offset-1 tablet:grid-col-4">
@@ -44,49 +37,12 @@ <h1 itemprop="name headline">{{ title }}</h1>
   </div>
 </article>
 
-{% assign previous = collections.posts | getPreviousCollectionItem: page %}
-{% assign next = collections.posts | getNextCollectionItem: page %}
-{% if previous or next %}
-<section class="margin-top-6 post-pagination">
-  <div class="grid-container">
-    <hr class="hr-1-base-lighter">
-    <div class="grid-row grid-gap">
-      <div class="grid-col-6">
-        {% if previous %}
-        <a href="{{ previous.url | url }}"
-           class="text-no-underline post-pagination__link"
-        >
-          <h2 class="post-pagination__heading">
-            {% include "svg/icons/arrow-left.svg" %}
-            Previous Post
-          </h2>
-          <p class="measure-1 text-bold text-primary-darkest">{{ previous.data.title }}</p>
-        </a>
-        {% endif %}
-      </div>
-      <div class="grid-col-6 text-right">
-        {% if next %}
-        <a href="{{ next.url | url }}"
-           class="text-no-underline post-pagination__link"
-        >
-          <h2 class="post-pagination__heading">
-            Next Post
-            {% include "svg/icons/arrow-right.svg" %}
-          </h2>
-          <p class="measure-1 float-right text-bold text-primary-darkest text-right">{{ next.data.title }}</p>
-        </a>
-        {% endif %}
-      </div>
-    </div>
-    <hr class="hr-1-base-lighter">
-  </div>
-</section>
-{% endif %}
+{% include "adjacent_page_links.html" %}
 
 <section class="margin-top-3 margin-bottom-6">
   <div class="grid-container">
     {% comment %}
-      Replace the next line with the related posts generator.
+      TODO: Replace the next line with the related posts generator.
     {% endcomment %}
     {% assign related_posts = collections.posts | reverse | slice: 0, 3 %}
     {% include "featured-posts.html",

diff --git a/_includes/layouts/primary.html b/_includes/layouts/primary.html
@@ -3,24 +3,21 @@
 main:
   class: 'primary-layout'
 ---
-
-{% assign page_title = page.subnav_title | default: page.title %}
-
 <section class="usa-section section-padding-sm">
   <div class="grid-container">
-    <h1> {{ page.title }} </h1>
-    {% if page.lead %}
-      <p class="font-sans-xl line-height-sans-3">{{ page.lead }}</p>
+    <h1>{{ title }}</h1>
+    {% if lead %}
+      <p class="font-sans-xl line-height-sans-3">{{ lead }}</p>
     {% endif %}
-    {% if page.image %}
-      {% image_with_class page.image "margin-top-4" page.image_alt_text %}
+    {% if image %}
+      {% image_with_class image "margin-top-4" image_alt_text %}
     {% endif %}
   </div>
 </section>
 
- {{ content }}
+{{ content }}
 
-{% if page.banner_cta %}
+{% if banner_cta %}
   {% include "banner-cta.html" %}
 {% endif %}
 
diff --git a/_includes/meta.html b/_includes/meta.html
@@ -24,15 +24,21 @@
   {% assign page_title = title | append: ' | 18F ' %}
 {% endif %}
 
+{% comment %}
+  Descriptions are escaped because some contain HTML content which,
+  left to its own devices, renders in a way that messes up <head>
+  and looks quite bad.
+{% endcomment %}
+
 <title>{{ page_title }}</title>
 <meta property="og:title" content="{{ page_title }}" />
-<meta name="description" content="{{ description }}" />
-<meta property="og:description" content="{{ description }}" />
+<meta name="description" content="{{ description | escape }}" />
+<meta property="og:description" content="{{ description | escape }}" />
 
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:site" content="@{{ site.twitter }}" />
 <meta name="twitter:title" content="{{ title }}" />
-<meta name="twitter:description" content="{{ description }}" />
+<meta name="twitter:description" content="{{ description | escape }}" />
 
 <meta property="og:type" content="article" />
 <link rel="canonical" href="{{ page.url }}" />

diff --git a/config/filters.js b/config/filters.js
@@ -89,12 +89,10 @@ const teamLink = (slug) => {
   return `<a href="/author/${slug.toLowerCase()}/">${name}</a>`
 }
 
-// TODO These all need implementation, they're just placeholders so the site builds at all
-// TODO remove the eslint-disable directive after implementation
+// TODO This needs implementation, it's just a placeholder for now.
+// TODO Remove the eslint-disable directive after implementation
 /* eslint-disable */
 const weightedSort = (array, weight_name, sort_name) => array
-const asRelativeUrl = (url) => url
-const matchPosts = (page, property='tags') => []
 /* eslint-enable */
 
 const md = markdownIt({ html: true });
@@ -111,6 +109,4 @@ module.exports = {
   teamLink,
   markdownify,
   weightedSort,
-  asRelativeUrl,
-  matchPosts,
 };
diff --git a/content/pages/about.md b/content/pages/about.md
@@ -3,7 +3,7 @@ title: About 18F
 permalink: /about/
 layout: styled-container
 lead: We help other government agencies build, buy, and share technology products. 18F is a team of designers, software engineers, strategists, and product managers within the General Services Administration. We collaborate with other agencies to fix technical problems, build products, and improve public service through technology.
-image: /assets/img/about/gsahq.jpg
+image: assets/img/about/gsahq.jpg
 image_alt_text: "General Services Administration headquarters"
 side_cta: true
 subnav_items:

diff --git a/content/pages/guides.html b/content/pages/guides.html
@@ -1,7 +1,7 @@
 ---
 title: Guides
 permalink: /guides/
-layout: guides
+layout: primary
 lead: Principles and standards that shape our work
 hide_footer_rule: true
 ---

diff --git a/content/pages/projects/products/cloud-gov.md b/content/pages/projects/products/cloud-gov.md
@@ -4,8 +4,8 @@ title: Expedited path to the cloud
 subtitle: Reducing the compliance and labor burden of moving to the cloud
 permalink: /our-work/cloud-gov/
 excerpt: A government-customized hosting platform that takes care of technical infrastructure and security compliance requirements.
-image: /assets/img/projects/cg.png
-image_accessibility: "The cloud.gov logo of a white star over a black and blue hexagon"
+image: assets/img/projects/cg.png
+image_alt: "The cloud.gov logo of a white star over a black and blue hexagon"
 image_icon: folderwithclock.svg
 project_weight: 3
 tag: cloud.gov

diff --git a/content/pages/projects/products/eregs.md b/content/pages/projects/products/eregs.md
@@ -5,8 +5,8 @@ subtitle: A shared service for user-friendly regulations
 permalink: /our-work/eregulations/
 redirect_from: /project/eregulations/
 excerpt: An open-source tool that makes government regulations easier to find, read, and understand.
-image: /assets/blog/eregs/regulations-atf-gov.png
-image_accessibility:
+image: assets/blog/eregs/regulations-atf-gov.png
+image_alt:
 image_icon:
 tag: eregulations
 expiration_date:

diff --git a/content/pages/projects/products/login-gov.md b/content/pages/projects/products/login-gov.md
@@ -4,8 +4,8 @@ title: Secure access to services
 subtitle: A single sign-on for government
 permalink: /our-work/login-gov/
 excerpt: A single sign-on solution for government websites that enables the public to access services across select agencies with the same username and password.
-image: /assets/img/projects/login-gov.png
-image_accessibility: "The login.gov logo over a blue background with red and blue circlar lines surrounding the logo"
+image: assets/img/projects/login-gov.png
+image_alt: "The login.gov logo over a blue background with red and blue circlar lines surrounding the logo"
 image_icon:
 project_weight: 4
 tag: identity