From 212576f0d24de207f73c276868d1fdff755afdba Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 14:00:09 -0800
Subject: [PATCH 01/10] Set pdfAvailable to false build-primer-spec-action will
 set it to true if it is used to generate PDFs.

---
 _layouts/spec.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/_layouts/spec.html b/_layouts/spec.html
index e57a4a32..4a90c374 100644
--- a/_layouts/spec.html
+++ b/_layouts/spec.html
@@ -50,6 +50,13 @@
         -->
         <script>
             window.PrimerSpecConfig = {
+                {%- comment -%}
+                    !! STOP !!
+                    The `pdfPath` flag is set by seshrs/build-primer-spec-action
+                    after the PDF for this page has been built.
+                    Do not change this code without also updating build-primer-spec-action.
+                {%- endcomment %}
+                pdfPath: null, // @managed by build-primer-spec-action
                 hideSidebarOnLoad: {{ page.hideSidebarOnLoad | default: false }},
                 disableSidebar: {{ page.disableSidebar | default: false }},
                 defaultSubthemeName: '{{ site.primerSpec.defaultSubthemeName | default: "default" }}',

From 4485c8233441180c0f2d20e044293abd403530ef Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 21:31:25 -0800
Subject: [PATCH 02/10] Send url+baseurl config from Jekyll to JS

---
 _layouts/spec.html | 1 +
 src_js/Config.ts   | 2 ++
 src_js/global.d.ts | 2 ++
 3 files changed, 5 insertions(+)

diff --git a/_layouts/spec.html b/_layouts/spec.html
index 4a90c374..310e46b7 100644
--- a/_layouts/spec.html
+++ b/_layouts/spec.html
@@ -57,6 +57,7 @@
                     Do not change this code without also updating build-primer-spec-action.
                 {%- endcomment %}
                 pdfPath: null, // @managed by build-primer-spec-action
+                siteQualifiedBaseUrl: '{{ site.url }}{{ site.baseurl }}/',
                 hideSidebarOnLoad: {{ page.hideSidebarOnLoad | default: false }},
                 disableSidebar: {{ page.disableSidebar | default: false }},
                 defaultSubthemeName: '{{ site.primerSpec.defaultSubthemeName | default: "default" }}',
diff --git a/src_js/Config.ts b/src_js/Config.ts
index 0b2ce47a..4cfea206 100644
--- a/src_js/Config.ts
+++ b/src_js/Config.ts
@@ -25,6 +25,8 @@ export default {
   BUILD_MODE: process.env.BUILD_MODE,
 
   // From window.PrimerSpecConfig
+  PDF_PATH: window.PrimerSpecConfig.pdfPath || null,
+  SITE_QUALIFIED_BASE_URL: window.PrimerSpecConfig.siteQualifiedBaseUrl || '/',
   HIDE_SIDEBAR_ON_LOAD: getHideSidebarOnLoad(),
   DISABLE_SIDEBAR: window.PrimerSpecConfig.disableSidebar || false,
   INIT_SUBTHEME_NAME,
diff --git a/src_js/global.d.ts b/src_js/global.d.ts
index 98edafb6..798625c0 100644
--- a/src_js/global.d.ts
+++ b/src_js/global.d.ts
@@ -1,6 +1,8 @@
 // Need to declare that the window object may have a PrimerSpecConfig.
 // eslint-disable-next-line no-var
 declare var PrimerSpecConfig: {
+  pdfPath?: string | null;
+  siteQualifiedBaseUrl?: string;
   hideSidebarOnLoad?: boolean;
   disableSidebar?: boolean;
   defaultSubthemeName?: string;

From 116b095907b93941701348c57cd2eb5b3127113f Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 21:44:33 -0800
Subject: [PATCH 03/10] Implement 'download' button in topbar

---
 _sass/spec/base.scss                         |  8 +++++
 src_js/Config.ts                             |  2 +-
 src_js/components/Topbar.tsx                 | 29 +++++++++++++---
 src_js/components/common/IconType.ts         |  1 +
 src_js/components/common/InlineButton.tsx    | 36 ++++++++++++++++++--
 src_js/components/common/openExternalLink.ts | 35 +++++++++++++++++++
 6 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 src_js/components/common/openExternalLink.ts

diff --git a/_sass/spec/base.scss b/_sass/spec/base.scss
index cea5133a..6f03cf61 100644
--- a/_sass/spec/base.scss
+++ b/_sass/spec/base.scss
@@ -154,10 +154,18 @@ $INFO_BORDER_COLOR: rgba(4, 66, 137, 0.2);
   &-left {
     position: absolute;
     left: 1em;
+    .primer-spec-topbar-button {
+      display: inline;
+      padding-right: 2em;
+    }
   }
   &-right {
     position: absolute;
     right: 1em;
+    .primer-spec-topbar-button {
+      display: inline;
+      padding-left: 2em;
+    }
   }
 }
 
diff --git a/src_js/Config.ts b/src_js/Config.ts
index 4cfea206..39c64d50 100644
--- a/src_js/Config.ts
+++ b/src_js/Config.ts
@@ -25,7 +25,7 @@ export default {
   BUILD_MODE: process.env.BUILD_MODE,
 
   // From window.PrimerSpecConfig
-  PDF_PATH: window.PrimerSpecConfig.pdfPath || null,
+  PDF_PATH: window.PrimerSpecConfig.pdfPath || 'blah.pdf',
   SITE_QUALIFIED_BASE_URL: window.PrimerSpecConfig.siteQualifiedBaseUrl || '/',
   HIDE_SIDEBAR_ON_LOAD: getHideSidebarOnLoad(),
   DISABLE_SIDEBAR: window.PrimerSpecConfig.disableSidebar || false,
diff --git a/src_js/components/Topbar.tsx b/src_js/components/Topbar.tsx
index 43fcfd5e..86669bd5 100644
--- a/src_js/components/Topbar.tsx
+++ b/src_js/components/Topbar.tsx
@@ -2,7 +2,8 @@ import { h } from 'preact';
 import { useLayoutEffect, useRef } from 'preact/hooks';
 import clsx from 'clsx';
 import IconType from './common/IconType';
-import InlineButton from './common/InlineButton';
+import InlineButton, { InlineLinkButton } from './common/InlineButton';
+import Config from '../Config';
 
 type PropsType = {
   isSmallScreen: boolean;
@@ -35,7 +36,7 @@ export default function Topbar(props: PropsType): h.JSX.Element {
   let sidebar_toggle = null;
   if (props.showSidebarToggle) {
     sidebar_toggle = props.sidebarShown ? null : (
-      <div class={`primer-spec-sidebar-toggle-fixed primer-spec-float-left`}>
+      <div class={`primer-spec-topbar-button primer-spec-float-left`}>
         <InlineButton
           icon={IconType.SIDEBAR}
           onClick={props.onToggleSidebar}
@@ -45,10 +46,27 @@ export default function Topbar(props: PropsType): h.JSX.Element {
     );
   }
 
+  let downloadPdfButton = null;
+  if (!props.isSmallScreen && !props.settingsShown && Config.PDF_PATH != null) {
+    const href = Config.SITE_QUALIFIED_BASE_URL + Config.PDF_PATH;
+    downloadPdfButton = (
+      <div class="primer-spec-topbar-button">
+        <InlineLinkButton
+          icon={IconType.DOWNLOAD}
+          href={href}
+          download
+          ariaLabel={
+            props.settingsShown ? 'Close settings pane' : 'Open settings pane'
+          }
+        />
+      </div>
+    );
+  }
+
   let settings_toggle = null;
   if (props.showSettingsToggle) {
     settings_toggle = (
-      <div class="primer-spec-settings-toggle primer-spec-float-right">
+      <div class="primer-spec-topbar-button">
         <InlineButton
           icon={props.settingsShown ? IconType.CLOSE : IconType.SETTINGS}
           onClick={props.onToggleSettings}
@@ -78,7 +96,10 @@ export default function Topbar(props: PropsType): h.JSX.Element {
       )}
     >
       {sidebar_toggle}
-      {settings_toggle}
+      <div class="primer-spec-float-right">
+        {downloadPdfButton}
+        {settings_toggle}
+      </div>
     </header>
   );
 }
diff --git a/src_js/components/common/IconType.ts b/src_js/components/common/IconType.ts
index ca116f8d..657c1863 100644
--- a/src_js/components/common/IconType.ts
+++ b/src_js/components/common/IconType.ts
@@ -4,5 +4,6 @@ enum IconType {
   SETTINGS = 'fas fa-cog',
   SIDEBAR = 'fas fa-bars',
   EXTERNAL_LINK = 'fas fa-external-link-alt',
+  DOWNLOAD = 'fas fa-file-download',
 }
 export default IconType;
diff --git a/src_js/components/common/InlineButton.tsx b/src_js/components/common/InlineButton.tsx
index 828cb863..dada5277 100644
--- a/src_js/components/common/InlineButton.tsx
+++ b/src_js/components/common/InlineButton.tsx
@@ -1,15 +1,18 @@
 import { h } from 'preact';
 import IconType from './IconType';
 import { Hoverable } from './Hoverable';
+import { openExternalLink } from './openExternalLink';
 
-export type PropsType = {
+export type InlineButtonPropsType = {
   icon: IconType;
   floatRight?: boolean;
   onClick?: () => void;
   ariaLabel?: string;
 };
 
-export default function InlineButton(props: PropsType): h.JSX.Element {
+export default function InlineButton(
+  props: InlineButtonPropsType,
+): h.JSX.Element {
   return (
     <Hoverable floatRight={props.floatRight}>
       <button
@@ -29,3 +32,32 @@ export default function InlineButton(props: PropsType): h.JSX.Element {
     </Hoverable>
   );
 }
+
+export type InlineLinkButtonPropsType = {
+  icon: IconType;
+  floatRight?: boolean;
+  href: string;
+  download?: string | boolean;
+  ariaLabel?: string;
+};
+
+export function InlineLinkButton(
+  props: InlineLinkButtonPropsType,
+): h.JSX.Element {
+  return (
+    <Hoverable floatRight={props.floatRight}>
+      <a
+        class="btn-link primer-spec-hoverable no-print"
+        role="button"
+        href={props.href}
+        onClick={(event) => {
+          event.preventDefault();
+          openExternalLink({ url: props.href, download: props.download });
+        }}
+        aria-label={props.ariaLabel}
+      >
+        <i class={props.icon} />
+      </a>
+    </Hoverable>
+  );
+}
diff --git a/src_js/components/common/openExternalLink.ts b/src_js/components/common/openExternalLink.ts
new file mode 100644
index 00000000..21aae2f4
--- /dev/null
+++ b/src_js/components/common/openExternalLink.ts
@@ -0,0 +1,35 @@
+export function openExternalLink(props: {
+  url: string;
+  download?: string | boolean;
+}): void {
+  const { url, download } = props;
+
+  try {
+    sanityCheckUrl(url);
+  } catch (e) {
+    console.error('Blocking attempt to open external link. Error:', e);
+    return;
+  }
+
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  if (download != null && download !== false) {
+    // Use the original filename by not specifying one here.
+    anchor.download = typeof download === 'boolean' ? '' : download;
+  }
+  anchor.style.display = 'none';
+  document.body.appendChild(anchor);
+  anchor.click();
+  setTimeout(
+    () => {
+      document.body.removeChild(anchor);
+    },
+    2000, // 2 seconds
+  );
+}
+
+function sanityCheckUrl(url: string): void {
+  if (!url.startsWith('https://') && !url.startsWith('/')) {
+    throw new Error(`Expected HTTPS external link, received: ${url}`);
+  }
+}

From c641829d53205198deeb0f8516b2df7f36888040 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 22:09:04 -0800
Subject: [PATCH 04/10] Update PR and develop preview workflows to generate
 PDFs

---
 .github/workflows/upload-develop-preview.yml | 8 ++++++++
 .github/workflows/upload-pr-preview.yml      | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/.github/workflows/upload-develop-preview.yml b/.github/workflows/upload-develop-preview.yml
index f48f790c..fdee2f98 100644
--- a/.github/workflows/upload-develop-preview.yml
+++ b/.github/workflows/upload-develop-preview.yml
@@ -47,6 +47,14 @@ jobs:
           sed -i "\$ s/\$/ (develop preview build: $(date '+%Y-%m-%d') ($(git rev-parse HEAD)))/" VERSION
           ./script/ci-site-preview-build "https://preview.sesh.rs" "/previews/$REPO/develop-preview"
 
+      # Use `build-primer-spec-action` to generate PDFs of each page.
+      # Docs: https://github.com/seshrs/build-primer-spec-action
+      - name: 👷‍♀️ Build the rest of the Primer Spec site
+        uses: seshrs/build-primer-spec-action@main # TODO: Change this to v1 after releasing the new version of build-primer-spec-action
+        with:
+          build_jekyll_site: false
+          configure_github_pages: false
+
       # Upload the site to Primer Spec Preview and comment on the PR.
       # The Primer Spec Preview secret is stored as an encrypted repo or
       # organization secret named `PRIMER_SPEC_PREVIEW_SECRET`.
diff --git a/.github/workflows/upload-pr-preview.yml b/.github/workflows/upload-pr-preview.yml
index 53637664..24f20af5 100644
--- a/.github/workflows/upload-pr-preview.yml
+++ b/.github/workflows/upload-pr-preview.yml
@@ -42,6 +42,14 @@ jobs:
           sed -i "\$ s/\$/ (PR preview build: $(date '+%Y-%m-%d'))/" VERSION
           ./script/ci-site-preview-build "https://preview.sesh.rs" "/previews/$REPO/$PR_NUMBER"
 
+      # Use `build-primer-spec-action` to generate PDFs of each page.
+      # Docs: https://github.com/seshrs/build-primer-spec-action
+      - name: 👷‍♀️ Build the rest of the Primer Spec site
+        uses: seshrs/build-primer-spec-action@main # TODO: Change this to v1 after releasing the new version of build-primer-spec-action
+        with:
+          build_jekyll_site: false
+          configure_github_pages: false
+
       # Upload the site to Primer Spec Preview and comment on the PR.
       # The Primer Spec Preview secret is stored as an encrypted repo or
       # organization secret named `PRIMER_SPEC_PREVIEW_SECRET`.

From 5ab2ee85bb598ee8c96cc966d108bcae26f103e2 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 22:22:47 -0800
Subject: [PATCH 05/10] Use string input instead of boolean See
 seshrs/build-primer-spec-action@3d88b00

---
 .github/workflows/upload-develop-preview.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/upload-develop-preview.yml b/.github/workflows/upload-develop-preview.yml
index fdee2f98..3ae5d5fe 100644
--- a/.github/workflows/upload-develop-preview.yml
+++ b/.github/workflows/upload-develop-preview.yml
@@ -52,8 +52,8 @@ jobs:
       - name: 👷‍♀️ Build the rest of the Primer Spec site
         uses: seshrs/build-primer-spec-action@main # TODO: Change this to v1 after releasing the new version of build-primer-spec-action
         with:
-          build_jekyll_site: false
-          configure_github_pages: false
+          build_jekyll_site: 'false'
+          configure_github_pages: 'false'
 
       # Upload the site to Primer Spec Preview and comment on the PR.
       # The Primer Spec Preview secret is stored as an encrypted repo or

From 8e8eec11c995ac06008c2fe3ed2c052bddd272a6 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 22:28:55 -0800
Subject: [PATCH 06/10] Cache Ruby and Node setup steps

---
 .github/workflows/upload-develop-preview.yml | 2 ++
 .github/workflows/upload-pr-preview.yml      | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/upload-develop-preview.yml b/.github/workflows/upload-develop-preview.yml
index 3ae5d5fe..6a2890fd 100644
--- a/.github/workflows/upload-develop-preview.yml
+++ b/.github/workflows/upload-develop-preview.yml
@@ -30,11 +30,13 @@ jobs:
         with:
           ruby-version: '3.0'
           bundler-cache: true
+          cache-version: 0 # Increment this number if you need to re-download cached gems
 
       - name: ⬢ Setup Node
         uses: actions/setup-node@v1
         with:
           node-version: '16'
+          cache: 'npm'
 
       - name: ⚙️ Install dependencies
         run: |
diff --git a/.github/workflows/upload-pr-preview.yml b/.github/workflows/upload-pr-preview.yml
index 24f20af5..380de344 100644
--- a/.github/workflows/upload-pr-preview.yml
+++ b/.github/workflows/upload-pr-preview.yml
@@ -24,11 +24,13 @@ jobs:
         with:
           ruby-version: '3.0'
           bundler-cache: true
+          cache-version: 0 # Increment this number if you need to re-download cached gems
 
       - name: ⬢ Setup Node
         uses: actions/setup-node@v1
         with:
           node-version: '16'
+          cache: 'npm'
 
       - name: ⚙️ Install dependencies
         run: |
@@ -47,8 +49,8 @@ jobs:
       - name: 👷‍♀️ Build the rest of the Primer Spec site
         uses: seshrs/build-primer-spec-action@main # TODO: Change this to v1 after releasing the new version of build-primer-spec-action
         with:
-          build_jekyll_site: false
-          configure_github_pages: false
+          build_jekyll_site: 'false'
+          configure_github_pages: 'false'
 
       # Upload the site to Primer Spec Preview and comment on the PR.
       # The Primer Spec Preview secret is stored as an encrypted repo or

From a5a815f23926030c0e5952f37910f2075ad4fcf6 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 23:10:47 -0800
Subject: [PATCH 07/10] Fix ARIA label of download button

---
 src_js/components/Topbar.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src_js/components/Topbar.tsx b/src_js/components/Topbar.tsx
index 86669bd5..87147946 100644
--- a/src_js/components/Topbar.tsx
+++ b/src_js/components/Topbar.tsx
@@ -55,9 +55,7 @@ export default function Topbar(props: PropsType): h.JSX.Element {
           icon={IconType.DOWNLOAD}
           href={href}
           download
-          ariaLabel={
-            props.settingsShown ? 'Close settings pane' : 'Open settings pane'
-          }
+          ariaLabel="Download PDF version of this page"
         />
       </div>
     );

From 5e8648eba511e3b911c85ade9960f8ad965ed0df Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 28 Nov 2022 23:27:30 -0800
Subject: [PATCH 08/10] Add tooltip to download button

---
 src_js/components/Topbar.tsx              | 2 +-
 src_js/components/common/InlineButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src_js/components/Topbar.tsx b/src_js/components/Topbar.tsx
index 87147946..4e096b6e 100644
--- a/src_js/components/Topbar.tsx
+++ b/src_js/components/Topbar.tsx
@@ -55,7 +55,7 @@ export default function Topbar(props: PropsType): h.JSX.Element {
           icon={IconType.DOWNLOAD}
           href={href}
           download
-          ariaLabel="Download PDF version of this page"
+          ariaLabel="Download this page as a PDF file"
         />
       </div>
     );
diff --git a/src_js/components/common/InlineButton.tsx b/src_js/components/common/InlineButton.tsx
index dada5277..4a82bb59 100644
--- a/src_js/components/common/InlineButton.tsx
+++ b/src_js/components/common/InlineButton.tsx
@@ -47,7 +47,7 @@ export function InlineLinkButton(
   return (
     <Hoverable floatRight={props.floatRight}>
       <a
-        class="btn-link primer-spec-hoverable no-print"
+        class="btn-link primer-spec-hoverable no-print tooltipped tooltipped-no-delay tooltipped-w"
         role="button"
         href={props.href}
         onClick={(event) => {

From 7e9fae7104c7c93785960dacea31958cf74c2a00 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 19 Dec 2022 22:41:02 -0500
Subject: [PATCH 09/10] Show download button in settings screen always

---
 src_js/components/Topbar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src_js/components/Topbar.tsx b/src_js/components/Topbar.tsx
index 4e096b6e..cd7aac22 100644
--- a/src_js/components/Topbar.tsx
+++ b/src_js/components/Topbar.tsx
@@ -47,7 +47,10 @@ export default function Topbar(props: PropsType): h.JSX.Element {
   }
 
   let downloadPdfButton = null;
-  if (!props.isSmallScreen && !props.settingsShown && Config.PDF_PATH != null) {
+  if (
+    Config.PDF_PATH != null &&
+    (!props.isSmallScreen || (props.isSmallScreen && props.settingsShown))
+  ) {
     const href = Config.SITE_QUALIFIED_BASE_URL + Config.PDF_PATH;
     downloadPdfButton = (
       <div class="primer-spec-topbar-button">

From f125b047383c112336718776c8fbaee75399dec3 Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Mon, 19 Dec 2022 22:42:49 -0500
Subject: [PATCH 10/10] Revert accidental change to Config I made this change
 while simulating the PDF download button.

---
 src_js/Config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_js/Config.ts b/src_js/Config.ts
index 39c64d50..4cfea206 100644
--- a/src_js/Config.ts
+++ b/src_js/Config.ts
@@ -25,7 +25,7 @@ export default {
   BUILD_MODE: process.env.BUILD_MODE,
 
   // From window.PrimerSpecConfig
-  PDF_PATH: window.PrimerSpecConfig.pdfPath || 'blah.pdf',
+  PDF_PATH: window.PrimerSpecConfig.pdfPath || null,
   SITE_QUALIFIED_BASE_URL: window.PrimerSpecConfig.siteQualifiedBaseUrl || '/',
   HIDE_SIDEBAR_ON_LOAD: getHideSidebarOnLoad(),
   DISABLE_SIDEBAR: window.PrimerSpecConfig.disableSidebar || false,