diff --git a/.github/workflows/build-test-deploy.yml b/.github/workflows/build-test-deploy.yml index 8619e2df6e..002db686f0 100644 --- a/.github/workflows/build-test-deploy.yml +++ b/.github/workflows/build-test-deploy.yml @@ -43,7 +43,8 @@ jobs: - name: Install Dependencies run: | npm config set legacy-peer-deps true - npm ci --ignore-scripts --workspace @alexwilson/personal-website + npm install --workspace @alexwilson/personal-website + npm rebuild - name: Build run: npx lerna run --scope @alexwilson/personal-website build env: @@ -80,7 +81,8 @@ jobs: - name: Install Dependencies run: | npm config set legacy-peer-deps true - npm ci --ignore-scripts --workspace @alexwilson/personal-website + npm install --workspace @alexwilson/personal-website + ls -la node_modules/@parcel/watcher - name: Run Tests run: npx lerna run --scope @alexwilson/personal-website test diff --git a/.github/workflows/monorepo-deploy.yml b/.github/workflows/monorepo-deploy.yml index 9de647b4d5..179cad2d72 100644 --- a/.github/workflows/monorepo-deploy.yml +++ b/.github/workflows/monorepo-deploy.yml @@ -24,9 +24,10 @@ jobs: cache: "npm" - name: Install Dependencies run: | - rm services/personal-website/package.json + rm services/personal-website/package.json npm config set legacy-peer-deps true - npm ci --ignore-scripts --production=false + npm install --include=dev + npm install lerna - id: find-projects name: Find affected projects run: | @@ -70,6 +71,7 @@ jobs: runs-on: ubuntu-latest env: NODE_ENV: ${{ secrets.NODE_ENV }} + CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} strategy: matrix: ${{ fromJson(needs.prepare.outputs.projects) }} steps: @@ -85,7 +87,7 @@ jobs: run: | rm services/personal-website/package.json npm config set legacy-peer-deps true - npm ci --ignore-scripts --production=false + npm install --include=dev - name: Test run: npx lerna run test --scope ${{ matrix.name }} @@ -118,11 +120,12 @@ jobs: run: | rm services/personal-website/package.json npm config set legacy-peer-deps true - npm ci --ignore-scripts --production=false + npm install --include=dev - name: Deploy run: npx lerna run deploy --scope ${{ matrix.name }} env: CI: true + CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} CF_ZONE_ID: ${{ secrets.CF_ZONE_ID }} CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }} CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }} diff --git a/.nvmrc b/.nvmrc index 3c032078a4..209e3ef4b6 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18 +20 diff --git a/components/legacy-components/src/article-card/article-card.js b/components/legacy-components/src/article-card/article-card.js index a0c1f534b2..d90fdaf3cd 100644 --- a/components/legacy-components/src/article-card/article-card.js +++ b/components/legacy-components/src/article-card/article-card.js @@ -1,46 +1,53 @@ -import { Link } from "gatsby" -import { format as formatDate } from 'date-fns' -import React from "react" -import ResponsiveImage from '../responsive-image' - -export default function articleCard({article, withBody = true, withImage = true, withDate = true}) { - - const date = new Date(article.date) +import { Link } from "@reach/router"; +import { format as formatDate } from "date-fns"; +import React from "react"; +import ResponsiveImage from "../responsive-image"; + +export function ArticleCard({ + article, + linkImplementation = Link, + withBody = true, + withImage = true, + withDate = true, +}) { + const date = new Date(article.date); + const LinkImplementation = linkImplementation; return (
-
-
-

{ article.title }

+

+ + {article.title} + +

- {(withBody !== false) ? + {withBody !== false ? (
-

- { article.content.excerpt } -

-
- :null} +

{article.content.excerpt}

+
+ ) : null} - {(withDate !== false) ? + {withDate !== false ? (
- +
- :null} - + ) : null}
- {(withImage !== false && article.image && article.image.thumbnail) ? + {withImage !== false && article.image && article.image.thumbnail ? (
- +
- :null} - + ) : null} - ) - + ); } + +export default ArticleCard; diff --git a/components/legacy-components/src/article-card/index.js b/components/legacy-components/src/article-card/index.js index 1b1ca82cf2..63a88e273a 100644 --- a/components/legacy-components/src/article-card/index.js +++ b/components/legacy-components/src/article-card/index.js @@ -1,4 +1,4 @@ import "./article-card.scss"; import ArticleCard from "./article-card" -export {ArticleCard} +export { ArticleCard } export default ArticleCard diff --git a/components/legacy-components/src/header/header.js b/components/legacy-components/src/header/header.js index 94032ed36a..6128541b21 100644 --- a/components/legacy-components/src/header/header.js +++ b/components/legacy-components/src/header/header.js @@ -176,11 +176,13 @@ class Header extends Component { Header.propTypes = { siteTitle: PropTypes.string, image: PropTypes.string, + location: PropTypes.object } Header.defaultProps = { siteTitle: `Alex Wilson`, image: null, + location: { pathname: "/" } } export default Header diff --git a/components/legacy-components/src/responsive-image/index.js b/components/legacy-components/src/responsive-image/index.js index c4057a6f56..cbf737feaf 100644 --- a/components/legacy-components/src/responsive-image/index.js +++ b/components/legacy-components/src/responsive-image/index.js @@ -1,4 +1,4 @@ -import './responsive-image.scss' -import ResponsiveImage from './responsive-image' -export {ResponsiveImage} -export default ResponsiveImage +import "./responsive-image.scss"; +import ResponsiveImage from "./responsive-image"; +export { ResponsiveImage }; +export default ResponsiveImage; diff --git a/components/legacy-components/src/responsive-image/responsive-image.js b/components/legacy-components/src/responsive-image/responsive-image.js index 6e8999d482..1683dd567d 100644 --- a/components/legacy-components/src/responsive-image/responsive-image.js +++ b/components/legacy-components/src/responsive-image/responsive-image.js @@ -1,24 +1,33 @@ -import React from 'react' +import React from "react"; -export default function responsiveImage({src, alt, width, height, quality, format, className}) { - - const queryParams = [] - if (Number.isInteger(width)) queryParams.push(`width=${width}`) - if (Number.isInteger(height)) queryParams.push(`height=${height}`) +export function ResponsiveImage({ + src, + alt, + width, + height, + quality, + format, + className, +}) { + const queryParams = []; + if (Number.isInteger(width)) queryParams.push(`width=${width}`); + if (Number.isInteger(height)) queryParams.push(`height=${height}`); if (quality) { - queryParams.push(`quality=${quality}`) + queryParams.push(`quality=${quality}`); } if (format) { - queryParams.push(`format=${format}`) + queryParams.push(`format=${format}`); } return ( {alt} - ) + ); } + +export default ResponsiveImage; diff --git a/components/legacy-components/stories/article-card.stories.js b/components/legacy-components/stories/article-card.stories.js new file mode 100644 index 0000000000..7f7fed220e --- /dev/null +++ b/components/legacy-components/stories/article-card.stories.js @@ -0,0 +1,29 @@ +import { ArticleCard } from '../src/article-card'; + +export default { + title: 'Legacy/Article Card', + component: ArticleCard, + tags: ['autodocs'], + parameters: { + layout: 'fullscreen', + }, +}; + +export const Default = { + args: { + article: { + title: "Test Article", + slug: "/#", + date: new Date(), + image: { + thumbnail: "https://avatars.githubusercontent.com/u/440052" + }, + content: { + excerpt: "This is some test copy" + } + }, + withBody: true, + withImage: true, + withDate: true, + } +}; diff --git a/components/legacy-components/stories/footer.stories.js b/components/legacy-components/stories/footer.stories.js new file mode 100644 index 0000000000..61fc832f44 --- /dev/null +++ b/components/legacy-components/stories/footer.stories.js @@ -0,0 +1,12 @@ +import { Footer } from '../src/footer'; + +export default { + title: 'Legacy/Footer', + component: Footer, + tags: ['autodocs'], + parameters: { + layout: 'fullscreen', + }, +}; + +export const Default = {}; diff --git a/components/legacy-components/stories/form.stories.js b/components/legacy-components/stories/form.stories.js new file mode 100644 index 0000000000..939c2c654b --- /dev/null +++ b/components/legacy-components/stories/form.stories.js @@ -0,0 +1,31 @@ +import { Form, Input, InlineGroup, TextArea, Submit } from '../src/form'; + +export default { + title: 'Legacy/Form', + component: Form, + tags: ['autodocs'], + parameters: { + layout: 'fullscreen', + }, +}; + +export const Default = { + render: () => +
+ + + +