style(front): improves print stylesheet for CV (#1044)

Closes: #1044

.github/workflows/dispatch-bd-fe--cms.yml

@@ -1,33 +1,94 @@
 name: 📡 CMS Publish
+run-name: "📢 CMS Publish to ${{ inputs.env == 'prd' && 'PRD' || 'STG' }}"
 
 on:
   workflow_dispatch:
+    inputs:
+      env:
+        description: "Target deployment environment."
+        type: environment
+        required: true
+        default: "stg"
+
+permissions:
+  checks: write
+  contents: write
+  pull-requests: write
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
 
 jobs:
-  approve:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    concurrency:
-      group: cms-publish
-      cancel-in-progress: true
+  lint:
+    name: 💨
+    uses: ./.github/workflows/lint.yml
+    with:
+      env: ${{ inputs.env }}
 
+  build_deploy:
+    name: 🚀
+    needs: lint
+    uses: ./.github/workflows/bd-fe.yml
+    with:
+      env: ${{ inputs.env }}
+    secrets:
+      AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_REGION: ${{ secrets.AWS_REGION }}
+      PUBLIC_API_URL: ${{ secrets.PUBLIC_API_URL }}
+      PUBLIC_API_PATH_NAVIGATION: ${{ secrets.PUBLIC_API_PATH_NAVIGATION }}
+      PUBLIC_API_PATH_HOME: ${{ secrets.PUBLIC_API_PATH_HOME }}
+      PUBLIC_API_PATH_FOOTER: ${{ secrets.PUBLIC_API_PATH_FOOTER }}
+      PUBLIC_API_PATH_PRIVACY: ${{ secrets.PUBLIC_API_PATH_PRIVACY }}
+      PUBLIC_API_PATH_POSTS_PAGE: ${{ secrets.PUBLIC_API_PATH_POSTS_PAGE }}
+      PUBLIC_API_PATH_POSTS: ${{ secrets.PUBLIC_API_PATH_POSTS }}
+      PUBLIC_POSTS_PREVIEW_PARAMS: ${{ secrets.PUBLIC_POSTS_PREVIEW_PARAMS }}
+      PUBLIC_API_PATH_POST: ${{ secrets.PUBLIC_API_PATH_POST }}
+      PUBLIC_POST_PARAMS: ${{ secrets.PUBLIC_POST_PARAMS }}
+      PUBLIC_API_PATH_CATEGORY: ${{ secrets.PUBLIC_API_PATH_CATEGORY }}
+      PUBLIC_CATEGORY_PAGE_PARAMS: ${{ secrets.PUBLIC_CATEGORY_PAGE_PARAMS }}
+      PUBLIC_API_PATH_CV_PAGE: ${{ secrets.PUBLIC_API_PATH_CV_PAGE }}
+      PUBLIC_API_LANDING_PAGE_PARTIAL: ${{ secrets.PUBLIC_API_LANDING_PAGE_PARTIAL }}
+      PUBLIC_API_CV_COLLECTION_PARAMS: ${{ secrets.PUBLIC_API_CV_COLLECTION_PARAMS }}
+      PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING: ${{ secrets.PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING }}
+      PUBLIC_API_CV_PATH_LANDING_EXPERIENCE_LISTING: ${{ secrets.PUBLIC_API_CV_PATH_LANDING_EXPERIENCE_LISTING }}
+      API_KEY: ${{ secrets.API_KEY }}
+      PUBLIC_ENV: ${{ secrets.PUBLIC_ENV }}
+      DISTRIBUTION: ${{ secrets.DISTRIBUTION }}
+      GH_WORKFLOW_TOKEN: ${{ secrets.GH_WORKFLOW_TOKEN }}
+
+  backstop:
+    name: 👀
+    needs: build_deploy
+    uses: ./.github/workflows/test-backstop.yml
+    with:
+      env: ${{ inputs.env }}
+    secrets:
+      GH_WORKFLOW_TOKEN: ${{ secrets.GH_WORKFLOW_TOKEN }}
+      AWS_S3_BUCKET_REPORTS: ${{ secrets.AWS_S3_BUCKET_REPORTS }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_REGION: ${{ secrets.AWS_REGION }}
+      REPORTS_DISTRIBUTION: ${{ secrets.REPORTS_DISTRIBUTION }}
+
+  summarize:
+    name: ✍ Workflow
+    needs: [backstop, lighthouse, pagespeed]
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ inputs.env }}
+      url: "https://${{ vars.WWW_DOMAIN }}"
     steps:
-      - name: ✓ Approve
-        uses: dgrebb/[email protected]
-        with:
-          secret: ${{ github.TOKEN }}
-          approvers: dgrebb
-          minimum-approvals: 1
-          issue-title: "Deploying ${{ github.ref_name }} via CMS Dispatch Event"
-          issue-body: "Please approve or deny the deployment of version ${{ github.ref_name }}."
-          exclude-workflow-initiator-as-approver: false
-          additional-approved-words: y,a
-          labels: "content"
-      - name: 🛰️ Dispatch B&D FE
+      - name: generate
         run: |
-          curl --location 'https://api.github.com/repos/dgrebb/dgrebb.com/actions/workflows/bd-fe.yml/dispatches' \
-          -H 'Content-Type: application/json' \
-          -H 'Accept: application/vnd.github+json' \
-          -H 'Authorization: Bearer ${{ secrets.DISPATCH_TOKEN }}' \
-          --data '{"ref": "${{ github.ref_name }}"}'
+          echo '# Summary' >> $GITHUB_STEP_SUMMARY
+          echo '## Run Initiator'
+          echo '- Actor: ${{ github.actor }}' >> $GITHUB_STEP_SUMMARY 
+          echo '- Event: ${{ github.event_name }}' >> $GITHUB_STEP_SUMMARY
+          echo '## Run Details' >> $GITHUB_STEP_SUMMARY
+          echo '- Branch: [${{ env.BRANCH_NAME }}](https://github.com/dgrebb/dgrebb.com/tree/${{ env.BRANCH_NAME }})' >> $GITHUB_STEP_SUMMARY
+          if [ "${{ github.event_name }}" = "pull_request" ]; then 
+            echo '- Pull Request: [#${{ github.event.number }}](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}) ${{ github.event.pull_request.title }}' >> $GITHUB_STEP_SUMMARY
+            echo '- ${{ github.event.pull_request.changed_files }} Files Changed: [ ${{ github.event.pull_request.commits }} Commits](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/commits) | [Diff](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/files)' >> $GITHUB_STEP_SUMMARY
+          fi

front/package.json

@@ -20,8 +20,8 @@
     "preview": "vite --config vite.config.js preview",
     "preview.local": "vite --config vite.local.config.js preview",
     "postbuild.l": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/posts/category/index.html' -i '**/cv/**' -t --attribution=false --domain https://local.dgrebb.com",
-    "postbuild.s": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/posts/category/index.html' -i '**/cv/**' -t --attribution=false --domain https://stg.dgrebb.com",
-    "postbuild": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/posts/category/index.html' -i '**/cv/**' -t --attribution=false --domain https://www.dgrebb.com",
+    "postbuild.s": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/cv/**' -t --attribution=false --domain https://stg.dgrebb.com",
+    "postbuild": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/cv/**' -t --attribution=false --domain https://www.dgrebb.com",
     "format": "prettier --write .",
     "test.all": "npm run test.integration && npm run test.unit",
     "test.integration": "playwright test",

front/src/lib/components/cv/Timeline.svelte

@@ -38,6 +38,9 @@
             <span class="timeline-text-highlight"
               >{prettyDate(startDate).year}</span
             >
+            <span class="print-date"
+              >{prettyDate(startDate).year} - {prettyDate(endDate).year}</span
+            >
           {:else}
             <span class="timeline-text-highlight m">{currentYear}</span>
             <span class="timeline-text-highlight d">Current</span>

front/src/lib/styles/pages/cv.css

@@ -35,6 +35,7 @@
   & .summary {
     margin: 0 auto;
     padding: 0 1rem;
+    color: var(--fg-clr-o);
     p {
       padding: 0.5rem 0;
     }
@@ -76,6 +77,10 @@
       }
     }
   }
+  .print-links {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 .experience-timeline {
@@ -354,7 +359,7 @@
       }
     }
     .timeline-text-highlight {
-      vertical-align: text-bottom;
+      /* vertical-align: text-bottom; */
       color: var(--primary-clr);
       &.m {
         display: inline;
@@ -373,6 +378,10 @@
     }
   }
   .experience-timeline-date {
+    .print-date {
+      display: none;
+      visibility: hidden;
+    }
     @media screen and (min-width: 640px) {
       text-align: right;
     }

front/src/lib/styles/print.css

@@ -1,10 +1,38 @@
 @media print {
   :root {
     background: transparent !important;
+    height: auto !important;
+  }
+  @page {
+    size: auto;
+    margin: 0.5in 1in 0.5in 1in;
   }
   html,
   body {
     background: transparent !important;
+    height: auto !important;
+    overflow: visible !important;
+    font-family: Georgia, 'Times New Roman', Times, serif !important;
+
+    & > *,
+    strong,
+    em,
+    .self {
+      font-family: Georgia, 'Times New Roman', Times, serif !important;
+    }
+
+    strong,
+    .self {
+      font-weight: 700 !important;
+    }
+
+    em {
+      font-style: italic !important;
+    }
+
+    a {
+      border: none !important;
+    }
 
     & > div > header.header,
     & > div > footer.footer,
@@ -22,10 +50,22 @@
     display: block !important;
   }
   .cv-masthead {
+    h1.page-heading {
+      letter-spacing: -0.083rem !important;
+    }
     .summary {
       padding: 0;
       padding-bottom: 0.5rem;
     }
+    .link-list {
+      display: none;
+    }
+    .print-links {
+      display: block;
+      visibility: visible;
+      padding-top: 0;
+      text-align: center;
+    }
   }
   .experience-timeline {
     margin: 0 !important;
@@ -37,6 +77,7 @@
       display: none;
     }
     .experience-timeline-item {
+      display: block;
       border: none;
       padding: 1rem 0 0;
       &:before {
@@ -47,12 +88,33 @@
         top: 0;
         right: 0;
         line-height: 1.5;
+        .print-date {
+          display: inline;
+          visibility: visible;
+          text-align: right;
+        }
+        .timeline-text-highlight {
+          display: none;
+        }
+      }
+      .timeline-text-highlight.m {
+        display: none !important;
+      }
+      .timeline-text-highlight.d {
+        display: inline !important;
       }
       h1.item-title {
+        padding-right: 1in;
         padding-bottom: 0.25rem;
+        font-weight: 500 !important;
         font-size: 1.25rem;
         font-family: var(--font-lbb);
         text-transform: uppercase;
+        &::after {
+          border-bottom: 1px solid black !important;
+          border-image: none !important;
+          width: 100% !important;
+        }
       }
       .item-basics {
         &:before,

front/src/routes/cv/+page.svelte

@@ -20,6 +20,9 @@
       <a id="main">Main Content</a>
       <h1 class="page-heading">{title}</h1>
       <Links links={generalContent.filter((link) => link.cv === true)} />
+      <p class="print-links">
+        dgrebb.com <br />github.com/dgrebb • linkedin.com/in/dgrebb
+      </p>
       {#if intro}
         <div class="summary">
           {@html intro}

front/svelte.config.js

@@ -47,10 +47,10 @@ const config = {
         if (path === '/404' && referrer === '/privacy/') {
           return;
         }
-        if (path.includes('/uploads')) {
+        if (path.includes('/uploads') || /^\/cv\//.test(path)) {
           return;
         }
-        if (path.includes('/v') || path.includes('/cv')) {
+        if (path.includes('/v')) {
           return;
         }
         throw new Error(message);