Update latest changes from portfolio theme

.github/workflows/blueprint-export-diff.yml

@@ -0,0 +1,26 @@
+name: Blueprint Export Diff
+on: pull_request
+jobs:
+  blueprint_export_diff:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - name: Check for changes
+        id: check-for-export-changes
+        run: echo ::set-output name=check::$(git diff --name-only origin/main --exit-code -- acm-blueprint.zip)
+      - name: Setup
+        if: steps.check-for-export-changes.outputs.check != 0
+        run: |
+          wget https://github.com/wpengine/atlas-blueprint-portfolio/raw/main/acm-blueprint.zip -O /tmp/acm-blueprint-base.zip
+          unzip -j /tmp/acm-blueprint-base.zip -d /tmp/acm-blueprint-base
+          unzip -j ./acm-blueprint.zip -d /tmp/acm-blueprint-compare
+      - name: Create Diff
+        if: steps.check-for-export-changes.outputs.check != 0
+        run: |
+          diff -ry --suppress-common-lines /tmp/acm-blueprint-base/ /tmp/acm-blueprint-compare/ || true > /tmp/diff-output.txt
+          cat /tmp/diff-output.txt

src/components/ContentWrapper/ContentWrapper.module.scss

@@ -1,8 +1,9 @@
 @import 'styles/Variables';
 
 .content {
-  max-width: $grid-max-width;
+  max-width: $content-max-width;
   margin: 0 auto;
+  line-height: 1.6875;
 
   :global {
     * {
@@ -28,8 +29,14 @@
     }
 
     a {
-      color: var(--color-black);
+      color: var(--color-secondary);
       text-decoration: underline;
+
+      &:hover,
+      &:focus {
+        color: var(--color-secondary);
+        text-decoration: none;
+      }
     }
 
     li {
@@ -106,7 +113,7 @@
     }
 
     thead th {
-      border-bottom: 1px solid var(--color-secondary);
+      border-bottom: 1px solid var(--color-tertiary);
       padding-bottom: 0.5em;
     }
 
@@ -116,7 +123,7 @@
     }
 
     tr {
-      border-bottom: 1px solid var(--color-secondary);
+      border-bottom: 1px solid var(--color-tertiary);
     }
 
     td {

src/components/Posts/Posts.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { Heading, FeaturedImage, PostInfo } from 'components';
 import appConfig from 'app.config';
+import useFocusFirstNewResult from 'hooks/useFocusFirstNewResult';
 
 import styles from './Posts.module.scss';
 
@@ -14,12 +15,16 @@ import styles from './Posts.module.scss';
  * @returns {React.ReactElement} The Projects component
  */
 function Posts({ posts, intro, id }) {
+  const { firstNewResultRef, firstNewResultIndex } =
+    useFocusFirstNewResult(posts);
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <section {...(id && { id })}>
       {intro && <p>{intro}</p>}
       <div className={styles['post-list']}>
-        {posts?.map((post) => {
+        {posts?.map((post, i) => {
+          const isFirstNewResult = i === firstNewResultIndex;
           let image = post?.featuredImage?.node;
 
           if (!image && appConfig.archiveDisplayFeaturedImage) {
@@ -49,7 +54,9 @@ function Posts({ posts, intro, id }) {
 
                 <Heading level="h4" className={styles.header}>
                   <Link href={post?.uri ?? '#'}>
-                    <a>{post.title()}</a>
+                    <a ref={isFirstNewResult ? firstNewResultRef : null}>
+                      {post.title()}
+                    </a>
                   </Link>
                 </Heading>
                 <PostInfo

src/components/ThemeStyles/ThemeStyles.js

@@ -4,23 +4,23 @@ const themes = {
   blue: {
     '--color-black': '#000',
     '--color-primary': '#000066',
-    '--color-secondary': '#cccccc',
-    '--color-tertiary': '#eeeeee',
-    '--color-white': '#ffffff',
+    '--color-secondary': '#0969da',
+    '--color-tertiary': '#CCCCCC',
+    '--color-white': '#FFFFFF',
   },
   red: {
     '--color-black': '#000',
     '--color-primary': '#660000',
-    '--color-secondary': '#CCCCCC',
-    '--color-tertiary': '#EEEEEE',
-    '--color-white': '#fff',
+    '--color-secondary': '#B50505',
+    '--color-tertiary': '#CCCCCC',
+    '--color-white': '#FFFFFF',
   },
   green: {
     '--color-black': '#000',
     '--color-primary': '#006600',
-    '--color-secondary': '#CCCCCC',
-    '--color-tertiary': '#EEEEEE',
-    '--color-white': '#fff',
+    '--color-secondary': '#006827',
+    '--color-tertiary': '#CCCCCC',
+    '--color-white': '#FFFFFF',
   },
 };
 

src/hooks/useFocusFirstNewResult.js

@@ -0,0 +1,33 @@
+import appConfig from 'app.config';
+import { useRef, useEffect, useState } from 'react';
+
+/**
+ * The `useFocusFirstNewResult` hook provides the ability to set the focus
+ * on the first new post result in order to improve accessibility.
+ *
+ * @param {array} posts An array of posts.
+ * @returns {{firstNewResultRef: HTMLDivElement, firstNewResultIndex: number}} Result object
+ */
+export default function useFocusFirstNewResult(posts) {
+  const firstNewResultRef = useRef();
+  const [firstNewResultIndex, setFirstnewResultIndex] = useState(0);
+
+  useEffect(() => {
+    const isPaginated = posts.length > appConfig.postsPerPage;
+
+    if (isPaginated) {
+      firstNewResultRef.current?.focus();
+
+      setFirstnewResultIndex(() => {
+        const partialSetLength = posts.length % appConfig.postsPerPage;
+        const delta =
+          partialSetLength === 0 ? appConfig.postsPerPage : partialSetLength;
+        const focusIndex = posts.length - delta;
+
+        return focusIndex;
+      });
+    }
+  }, [posts, firstNewResultIndex]);
+
+  return { firstNewResultRef, firstNewResultIndex };
+}

src/pages/index.js

@@ -54,18 +54,18 @@ export default function Page() {
               world's #1 open source CMS in one powerful headless platform.{' '}
             </p>
             <div className={styles.actions}>
-              <Button styleType="secondary" href="#">
+              <Button styleType="secondary" href="/contact-us">
                 GET STARTED
               </Button>
-              <Button styleType="primary" href="#">
+              <Button styleType="primary" href="/about">
                 LEARN MORE
               </Button>
             </div>
           </section>
           <section className="cta">
             <CTA
               Button={() => (
-                <Button href="#">
+                <Button href="/posts">
                   Get Started <FaArrowRight style={{ marginLeft: `1rem` }} />
                 </Button>
               )}
@@ -85,7 +85,7 @@ export default function Page() {
           <section className="cta">
             <CTA
               Button={() => (
-                <Button href="#">
+                <Button href="/posts">
                   Get Started <FaArrowRight style={{ marginLeft: `1rem` }} />
                 </Button>
               )}

src/styles/_Grid.scss

@@ -5,13 +5,19 @@
 
 .container {
   margin: 0 auto;
-  max-width: $grid-max-width;
+  max-width: $container-max-width;
   padding: 0 2rem;
   position: relative;
   width: 100%;
 
   &.small {
-    max-width: $container-max-width-sm;
+    max-width: $content-max-width;
+  }
+}
+
+@media (min-width: $breakpoint-medium) {
+  .container {
+    width: percentage(10/12);
   }
 }
 
@@ -180,24 +186,6 @@
   }
 }
 
-@media (min-width: 102.5rem) {
-  .container {
-    max-width: 120rem;
-  }
-}
-
-@media (max-width: 102.4rem) {
-  .container {
-    max-width: 102.4rem;
-  }
-}
-
-@media (max-width: 76.8rem) {
-  .container {
-    max-width: 76.8rem;
-  }
-}
-
 @media (min-width: 40rem) {
   .row {
     flex-direction: row;

src/styles/_Variables.scss

@@ -1,14 +1,13 @@
 $font-family: Inter, Verdana, Arial, Helvetica, sans-serif;
-$font-weight-normal: 300;
+$font-weight-normal: 400;
 $font-weight-bold: 600;
 $font-weight-extra-bold: 700;
 
 $breakpoint-extra-small: 640px;
 $breakpoint-small: 768px;
 $breakpoint-medium: 1024px;
 
-$grid-max-width: 62rem;
-$container-max-width: 102.4rem;
-$container-max-width-sm: 64rem;
+$container-max-width: 1200px;
+$content-max-width: 620px;
 
 $box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);