Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
Merge pull request #3 from wpengine/update-latest-changes-from-portfo…
Browse files Browse the repository at this point in the history
…lio-1

Update latest changes from portfolio theme
  • Loading branch information
blakewilson authored Apr 6, 2022
2 parents 9bb093d + d807eae commit e09ea52
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 43 deletions.
26 changes: 26 additions & 0 deletions .github/workflows/blueprint-export-diff.yml
Original file line number Diff line number Diff line change
@@ -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
15 changes: 11 additions & 4 deletions src/components/ContentWrapper/ContentWrapper.module.scss
Original file line number Diff line number Diff line change
@@ -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 {
* {
Expand All @@ -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 {
Expand Down Expand Up @@ -106,7 +113,7 @@
}

thead th {
border-bottom: 1px solid var(--color-secondary);
border-bottom: 1px solid var(--color-tertiary);
padding-bottom: 0.5em;
}

Expand All @@ -116,7 +123,7 @@
}

tr {
border-bottom: 1px solid var(--color-secondary);
border-bottom: 1px solid var(--color-tertiary);
}

td {
Expand Down
11 changes: 9 additions & 2 deletions src/components/Posts/Posts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand Down
18 changes: 9 additions & 9 deletions src/components/ThemeStyles/ThemeStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};

Expand Down
33 changes: 33 additions & 0 deletions src/hooks/useFocusFirstNewResult.js
Original file line number Diff line number Diff line change
@@ -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 };
}
8 changes: 4 additions & 4 deletions src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,18 @@ export default function Page() {
world&apos;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>
)}
Expand All @@ -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>
)}
Expand Down
28 changes: 8 additions & 20 deletions src/styles/_Grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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;
Expand Down
7 changes: 3 additions & 4 deletions src/styles/_Variables.scss
Original file line number Diff line number Diff line change
@@ -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);

1 comment on commit e09ea52

@headless-platform-by-wp-engine

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Branch main was deployed successfully
Your environment main of app atlas-bp-basic was successfully updated
View build logs: https://my.wpengine.com/atlas#/atlas-bp-basic/v1tecse1xf1ytykaqqgur5qz/560g0ly3hacbq7m66zmtcecs
View your environment URL: https://hv1tecse1xf1ytykaqqgur5qz.js.wpenginepowered.com

Please sign in to comment.