Migrate linked figures

18F · Jul 24, 2024 · eb27d36 · eb27d36
1 parent 0c3b760
commit eb27d36
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 164 deletions.
diff --git a/_data/team_members.csv b/_data/team_members.csv
@@ -7,7 +7,7 @@ abdulrahim-tahlil,Abdulrahim,Tahlil,,
 adam-drake,Adam,Drake,,
 adam-kendall,Adam,Kendall,,/team/adam-kendall/
 adrian-webb,Adrian,Webb,,/team/adrian-webb/
-afeld,Ai,Feldman,,/team/afeld/
+afeld,Aiden,Feldman,,/team/afeld/
 alan,Alan,DeLevie,Alan deLevie,/team/alan/
 alan-atlas,Alan,Atlas,,/team/alan-atlas/
 alan-brouilette,Alan,Brouilette,,/team/alan-brouilette/

diff --git a/_includes/linked-figure.html b/_includes/linked-figure.html
@@ -0,0 +1,9 @@
+<figure>
+  {% assign href = url | default: image %}
+  <a href="{{ href | url }}">
+    <img src="{{ image | url }}" alt={{ alt }} />
+  </a>
+  {% if caption %}
+  <figcaption>{{ caption }}</figcaption>
+  {% endif %}
+</figure>
diff --git a/config/ignores/index.js b/config/ignores/index.js
@@ -0,0 +1,5 @@
+const ignoresPlugin = (eleventyConfig) => {
+  eleventyConfig.watchIgnores.add('.cache/related-posts-*.md')
+}
+
+module.exports = ignoresPlugin;
diff --git a/config/index.js b/config/index.js
@@ -4,6 +4,7 @@ const collections = require('./collections')
 const dataExtensions = require('./data_extensions')
 const events = require('./events')
 const filters = require('./filters')
+const ignores = require('./ignores')
 const markdown = require('./markdown')
 const passthroughs = require('./passthroughs')
 const plugins = require('./plugins')
@@ -18,6 +19,7 @@ module.exports = function EighteenF(eleventyConfig) {
   eleventyConfig.addPlugin(dataExtensions)
   eleventyConfig.addPlugin(events)
   eleventyConfig.addPlugin(filters)
+  eleventyConfig.addPlugin(ignores)
   eleventyConfig.addPlugin(markdown)
   eleventyConfig.addPlugin(passthroughs)
   eleventyConfig.addPlugin(plugins)

diff --git a/config/shortcodes/imageWithClass.js b/config/shortcodes/imageWithClass.js
@@ -1,21 +1,3 @@
-const path = require('path')
-const Image = require('@11ty/eleventy-img')
+const assetUrl = require('../../lib/asset_url')
 
-module.exports = async (src, cls, alt) => {
-  let pathPrefix = ''
-
-  if (process.env.BASEURL) {
-    pathPrefix = process.env.BASEURL
-  }
-
-  const ext = path.extname(src)
-  const fileType = ext.replace('.', '')
-
-  const metadata = await Image(src, {
-    formats: [fileType],
-    outputDir: './_site/img/',
-  })
-
-  const data = metadata[fileType] ? metadata[fileType][0] : metadata.jpeg[0]
-  return `<img src="${pathPrefix}${data.url}" class="${cls}" alt="${alt}" loading="lazy" decoding="async">`
-}
+module.exports = async (src, cls, alt) => `<img src="${await assetUrl(src)}" class="${cls}" alt="${alt}" loading="lazy" decoding="async">`
diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js
@@ -2,7 +2,6 @@ const image = require('./image')
 const imageWithClass = require('./imageWithClass')
 const uswdsIcon = require('./uswdsIcon')
 
-
 const shortcodesPlugin = (eleventyConfig) => {
   eleventyConfig.addShortcode('image', image)
   eleventyConfig.addShortcode('image_with_class', imageWithClass)

diff --git a/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md b/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md
@@ -117,11 +117,9 @@ on those outcomes.
 The Infrastructure Leads keep a [kanban](https://18f.gsa.gov/2016/08/31/kanban-for-government/) board
 to track the status of ATOs:
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/ato/ato-kanban.png">
-    <img src="{{site.baseurl}}/assets/blog/ato/ato-kanban.png" alt="Screenshot of the ATO Kanban board on GitHub."/>
-  </a>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/ato/ato-kanban.png",
+     alt: "Screenshot of the ATO Kanban board on GitHub." %}
 
 Systems are prioritized based on their launch deadlines, whether they
 have an existing ATO that’s expiring, and preparedness of the project
@@ -205,7 +203,7 @@ principles of an ATO Sprinting Team, make sure to:
 As mentioned above, we have been dramatically improving the time to ATO:
 
 <figure>
-  <img src="{{site.baseurl}}/assets/blog/ato/ato-completion-date-graph.png" alt="Graph showing ATO completion timeline with starting date on the x- axis, and the dates to complete on the y-axis. There is a clear trend downward."/>
+  {% image "assets/blog/ato/ato-completion-date-graph.png", "Graph showing ATO completion timeline with starting date on the x- axis, and the dates to complete on the y-axis. There is a clear trend downward." %}
 </figure>
 
 *“ATO effort started on” is measured from when we acknowledged “this

diff --git a/content/posts/2018-08-15-shared-infrastructure-as-code.md b/content/posts/2018-08-15-shared-infrastructure-as-code.md
@@ -66,8 +66,8 @@ can go through and see immediately what domains we manage as well as how
 they’re configured**, all in one place.
 
 <figure>
-  <a href="{{site.baseurl}}/assets/blog/dns-post/github-terraform-files.png">
-    <img src="{{site.baseurl}}/assets/blog/dns-post/github-terraform-files.png" alt="Screenshot of GitHub showing a list of Terraform files. Each corresponds to a domain."/>
+  <a href="{{ "/assets/blog/dns-post/github-terraform-files.png" | url }}">
+    <img src="{{ "/assets/blog/dns-post/github-terraform-files.png" | url }}" alt="Screenshot of GitHub showing a list of Terraform files. Each corresponds to a domain."/>
   </a>
   <figcaption><a href="https://github.com/18F/dns/tree/master/terraform">List of Terraform files that correspond to domains</a></figcaption>
 </figure>
@@ -77,8 +77,8 @@ made by [pull
 request](https://github.com/18F/dns/pulls?utf8=%E2%9C%93&q=is%3Apr).
 
 <figure>
-  <a href="{{site.baseurl}}/assets/blog/dns-post/github-pull-request.png">
-    <img src="{{site.baseurl}}/assets/blog/dns-post/github-pull-request.png" alt="Screenshot of a pull request in GitHub, with an explanation of why the change is being made. It also shows that an issue from another repository links to the pull request."/>
+  <a href="{{ "/assets/blog/dns-post/github-pull-request.png" | url }}">
+    <img src="{{ "/assets/blog/dns-post/github-pull-request.png" | url }}" alt="Screenshot of a pull request in GitHub, with an explanation of why the change is being made. It also shows that an issue from another repository links to the pull request."/>
   </a>
   <figcaption><a href="https://github.com/18F/dns/pull/273">Example pull request</a></figcaption>
 </figure>
@@ -88,8 +88,8 @@ integration
 (CI)](https://docs.microsoft.com/en-us/azure/devops/what-is-continuous-integration) in CircleCI.
 
 <figure>
-  <a href="{{site.baseurl}}/assets/blog/dns-post/changes-to-code.png">
-    <img src="{{site.baseurl}}/assets/blog/dns-post/changes-to-code.png" alt="Two browser windows, one from GitHub showing the changes to the code, the other showing the resulting changes from Terraform in CircleCI."/>
+  <a href="{{ "/assets/blog/dns-post/changes-to-code.png" | url }}">
+    <img src="{{ "/assets/blog/dns-post/changes-to-code.png" | url }}" alt="Two browser windows, one from GitHub showing the changes to the code, the other showing the resulting changes from Terraform in CircleCI."/>
   </a>
   <figcaption><a href="https://github.com/18F/dns/pull/267/files">Example diff</a> and <a href="https://circleci.com/gh/18F/dns/483">continuous integration</a> output</figcaption>
 </figure>

diff --git a/...0-23-two-exercises-for-improving-design-research-through-reflective-practice.md b/...0-23-two-exercises-for-improving-design-research-through-reflective-practice.md
@@ -64,19 +64,15 @@ times I might have done better (for example, when I suggested alternate
 UI designs after observing my participant struggle at completing a
 task).
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/design-research-reflective-practice/usability-test.png">
-    <img src="{{site.baseurl}}/assets/blog/design-research-reflective-practice/usability-test.png" alt="Screenshot of usability test video."/>
-  </a>
-  <figcaption>Usability test</figcaption>
-</figure>
-
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/design-research-reflective-practice/feedback.png">
-    <img src="{{site.baseurl}}/assets/blog/design-research-reflective-practice/feedback.png" alt="Screenshot of feedback from researcher suggesting an alternate UI design. Highlighted text reads: You discussed possibilities not in the design. She had a problem with the magnifying glass icon, and you suggested a plus icon. It may have been better to ask what she would prefer first."/>
-  </a>
-  <figcaption>Experienced researcher feedback</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/design-research-reflective-practice/usability-test.png",
+     alt: "Screenshot of usability test video.",
+     caption: "Usability test" %}
+
+{% include "linked-figure.html",
+     image: "/assets/blog/design-research-reflective-practice/feedback.png",
+     alt: "Screenshot of feedback from researcher suggesting an alternate UI design. Highlighted text reads: You discussed possibilities not in the design. She had a problem with the magnifying glass icon, and you suggested a plus icon. It may have been better to ask what she would prefer first.",
+     caption: "Experienced researcher feedback" %}
 
 Third, socialize the performance-related feedback you receive. In this
 case, I passed my recording and the time-stamped feedback I received
@@ -136,12 +132,10 @@ prerequisite here is that you’ll need to have conducted a few studies
 beforehand). In the second, the team conducts a retrospective focused
 on research practices.
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/design-research-reflective-practice/research-review.png">
-    <img src="{{site.baseurl}}/assets/blog/design-research-reflective-practice/research-review.png" alt="Screenshot of slides for a research review session."/>
-  </a>
-  <figcaption>Slides that provide an overview of the team's recent research.</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/design-research-reflective-practice/research-review.png",
+     alt: "Screenshot of slides for a research review session.",
+     caption: "Slides that provide an overview of the team's recent research." %}
 
 As I mentioned, this was a five-month engagement that began with two
 months of foundational research and concluded with three months of
@@ -155,12 +149,10 @@ foundational or generative research.
 For that reason, I framed our review with [a tweet by Dave Malouf](https://twitter.com/daveixd/status/992924500667830273)
 describing research across various levels:
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/design-research-reflective-practice/tweet.png">
-    <img src="{{site.baseurl}}/assets/blog/design-research-reflective-practice/tweet.png" alt="Screenshot of a tweet by Dave Malouf. Text reads: A great framing I use is there are 3 levels of research: Foundational: akin to problem-space rsearch. (Opportunity for design) Generative: product idea generation w/in a space (get to the right design) Validative: is the product I've got good. (is the Design right?)"/>
-  </a>
-  <figcaption>Tweet by Dave Malouf</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/design-research-reflective-practice/tweet.png",
+     alt: "Screenshot of a tweet by Dave Malouf. Text reads: A great framing I use is there are 3 levels of research: Foundational: akin to problem-space rsearch. (Opportunity for design) Generative: product idea generation w/in a space (get to the right design) Validative: is the product I've got good. (is the Design right?)",
+     caption: "Tweet by Dave Malouf" %}
 
 I also shared this local-maxima diagram I learned about from [Joshua Porter’s 52 Weeks of UX](http://52weeksofux.com/post/694598769/the-local-maximum).
 

diff --git a/...t/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md b/...t/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md
@@ -56,12 +56,11 @@ of Health (NIH) (This link starts the video at the 39-minute mark, when
 the test begins). Note especially how Krug interacts with the
 participant.
 
-<figure>
-  <a href="https://youtu.be/6fjn1Zz3lMU?t=2340">
-    <img src="{{site.baseurl}}/assets/blog/remote-usability-test/nih-screenshot.png" alt="Screenshot of video showing NIH site. When clicked it will take you to the video"/>
-  </a>
-  <figcaption>Steve Krug usability test for NIH</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/remote-usability-test/nih-screenshot.png",
+     url: "https://youtu.be/6fjn1Zz3lMU?t=2340"
+     alt: "Screenshot of video showing NIH site. When clicked it will take you to the video",
+     caption: "Steve Krug usability test for NIH" %}
 
 That doesn’t look *too* difficult… right?
 
@@ -119,7 +118,7 @@ usability tests power its design. With apologies to the artist [M.C. Escher](htt
 this depicted in the following way:
 
 <figure>
-    <img src="{{site.baseurl}}/assets/blog/remote-usability-test/ux-hands.png" alt="M.C Escher image of two hands forming a circle one representing design and the other usability testing"/>
+    {% image "assets/blog/remote-usability-test/ux-hands.png", "M.C Escher image of two hands forming a circle one representing design and the other usability testing" %}
   <figcaption>M.C. Escher's Drawing Hands</figcaption>
 </figure>
 

diff --git a/content/posts/2019-07-16-on-the-road-to-innovation.md b/content/posts/2019-07-16-on-the-road-to-innovation.md
@@ -19,12 +19,10 @@ across the nation to learn more about their projects. Meet Fellows
 Clarice Chan and Sarayu Srinivasan who share more about their work at
 the VA and NIST.
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/pif/pif-sarayu-srinivasan.jpg">
-    <img src="{{site.baseurl}}/assets/blog/pif/pif-sarayu-srinivasan.jpg" alt="Profile picture of Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world."/>
-  </a>
-  <figcaption>PIF Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/pif/pif-sarayu-srinivasan.jpg",
+     alt: "Profile picture of Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world.",
+     caption: "PIF Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world" %}
 
 Here is Presidential Innovation Fellow Sarayu Srinivasan in front of
 Summit, the fastest supercomputer in the world! This up close tour also
@@ -72,13 +70,10 @@ importantly, customer touch-points. Clarice Chan, a PIF detailed to the
 US Department of Veterans Affairs, began her digital transformation
 journey doing just that.
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/pif/pif-clarice-chan.jpg">
-    <img src="{{site.baseurl}}/assets/blog/pif/pif-clarice-chan.jpg" alt="Profile picture of Clarice Chan seating n a chair at the VA customer call center."/>
-  </a>
-  <figcaption>PIF Clarice Chan, visiting a VA field office on a
-  listening tour to understand how the VA interacts with its customers.</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/pif/pif-clarice-chan.jpg",
+     alt: "Profile picture of Clarice Chan seating n a chair at the VA customer call center.",
+     caption: "PIF Clarice Chan, visiting a VA field office on a listening tour to understand how the VA interacts with its customers." %}
 
 Before diving into designing solutions, Clarice toured VA’s across the
 country on an immersive listening tour. She spent time observing VA

diff --git a/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md b/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md
@@ -44,12 +44,10 @@ Our plans changed when our first innovation specialist decided to leave for an o
 
 ## Help along the way
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/eiti-nrrd/nrrd-workshop.png">
-    <img src="{{site.baseurl}}/assets/blog/eiti-nrrd/nrrd-workshop.png" alt="Product management workshop with 18F and ONRR. There is a group of people seating around a table with yellow stickie notes. On a wall there are long pieces of paper with yellow sticky notes on them"/>
-  </a>
-  <figcaption>18F and ONNR during a workshop</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/eiti-nrrd/nrrd-workshop.png",
+     alt: "Product management workshop with 18F and ONRR. There is a group of people seating around a table with yellow stickie notes. On a wall there are long pieces of paper with yellow sticky notes on them",
+     caption: "18F and ONNR during a workshop" %}
 
 Luckily, I was not thrown into the deep end without a buoy, as we still had a transition agreement with 18F for a few more months. The 18F employee who had been managing the product began co-working with me as much as possible. She provided me training and resources that helped me better understand the role and tools of the trade, such as roadmapping. I began taking over meetings that she had been running, but we would have weekly coaching meetings to discuss challenges I encountered and questions I had.
 
@@ -73,12 +71,10 @@ As I continue to learn in this role and balance my product management responsibi
 
 I encourage my team members to bring me their concerns. While I don’t always have solutions ready, we are often able to brainstorm together and make tweaks to our processes in hopes of continuously improving the way we work.
 
-<figure>
-  <a href="{{site.baseurl}}/assets/blog/eiti-nrrd/nrrd-home.png">
-    <img src="{{site.baseurl}}/assets/blog/eiti-nrrd/nrrd-home.png" alt="Screenshot of https://revenuedata.doi.gov/"/>
-  </a>
-  <figcaption>https://revenuedata.doi.gov/</figcaption>
-</figure>
+{% include "linked-figure.html",
+     image: "/assets/blog/eiti-nrrd/nrrd-home.png",
+     alt: "Screenshot of https://revenuedata.doi.gov/",
+     caption: "https://revenuedata.doi.gov/" %}
 
 ## What’s next