diff --git a/.github/assets/faustjs-logo.svg b/.github/assets/faustjs-logo.svg new file mode 100644 index 0000000..923848d --- /dev/null +++ b/.github/assets/faustjs-logo.svg @@ -0,0 +1 @@ + diff --git a/.github/workflows/blueprint-export-diff.yml b/.github/workflows/blueprint-export-diff.yml index 9fb63bc..ae68fd3 100644 --- a/.github/workflows/blueprint-export-diff.yml +++ b/.github/workflows/blueprint-export-diff.yml @@ -9,7 +9,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v2 with: - node-version: '16' + 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) diff --git a/.gitignore b/.gitignore index 1437c53..3da3c1a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +package-lock.json # testing /coverage diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..deed13c --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/jod diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 1d7cdcc..18e4f82 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -14,4 +14,4 @@ This will import the ACM Blueprint export into your WordPress database. Make any 1. Before exporting, make sure you have deleted any of the initial content that gets created upon a WordPress install (e.g. "Sample Page", "Hello World", any comments, etc.) 2. From the WP CLI, run `wp acm blueprint export --open --wp-options=category_base,permalink_structure,nav_menu_options,theme_mods_twentytwentytwo --post-types=nav_menu_item,post,page,testimonial,project`. This will export the site into the appropriate ACM Blueprint .zip, and also open the location where the .zip was saved. It will also export the Navigational Menus and the CPTs from the ACM models. -3. Replace the existing `acm-blueprint.zip` in the repo with the newly exported `acm-blueprint.zip` and make a PR with the changes. \ No newline at end of file +3. Replace the existing `acm-blueprint.zip` in the repo with the newly exported `acm-blueprint.zip` and make a PR with the changes. diff --git a/README.md b/README.md index de66e4b..f49da9c 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,92 @@ -# Faust Scaffold +# ![Faust.js Logo](./.github/assets/faustjs-logo.svg) Faust.js Starter Kit -This repository contains a starter scaffolding to get you up and running quickly on [WP Engine's Headless Platform](https://wpengine.com/atlas/) with a WordPress site skeleton for more advanced developers. +This repository contains a starter kit to get you up and running quickly on [WP Engine's Headless Platform](https://wpengine.com/headless-wordpress/) with a WordPress site skeleton for more advanced developers. -## For more information +## Getting Started 🚀 -For more information on this Blueprint please check out the following sources: +To get started on WP Engine's Platform please follow the docs here [https://developers.wpengine.com/docs/atlas/getting-started/create-app/](https://developers.wpengine.com/docs/atlas/getting-started/create-app/) + +## Project Structure + +```bash +├── components/ +├── fragments/ +├── pages/ +├── queries/ +├── styles/ +├── wp-templates/ +│ ├── archive.js # For your category/archive templates +│ ├── front-page.js # Front page +│ ├── index.js # Mapping for available templates +│ ├── page.js # Single page +│ └── single.js # Single post or singular +├── DEVELOPMENT.md +├── faust.config.js +├── next.config.js +├── package.json +├── possibleTypes.json +└── README.md +└── screenshots +``` + +## Available Commands + +| Command | Script | Description | +| ------------- | ----------------------------- | -------------------------------- | +| `dev` | `faust dev` | Start the development server | +| `build` | `faust build` | Build the project for production | +| `generate` | `faust generatePossibleTypes` | Generate GraphQL possible types | +| `start` | `faust start` | Start the production server | +| `format` | `prettier . --write` | Format code with Prettier | +| `test:format` | `prettier . --check` | Check code formatting | + +## Screenshots + +
+ View Screenshots + +![Front Page](screenshots/front-page.png) + +![Category Page](screenshots/category-page.png) + +![Single Page](screenshots/single-page.png) + +![Single Post](screenshots/single-post.png) + +
+ +## Our Community 🩵 + +At WP Engine, we have a strong community built around headless WordPress to support you with your journey. + +- [Discord Headless Community Channel](https://faustjs.org/discord) +- [Fortnightly Headless Community Call](https://discord.gg/headless-wordpress-836253505944813629?event=1371472220592930857) +- [WP Engine's Headless Platform developer community](https://wpengine.com/builders/headless) +- [WP Engine`s Builders YouTube Channel](https://www.youtube.com/@WPEngineBuilders) +- [WP Engine's Headless Platform](https://wpengine.com/headless-wordpress/) +- [WP Engines Headless Platform Docs](https://developers.wpengine.com/docs/atlas/overview/) + +## Plugin Ecosystem 🪄 -- [WP Engine's Headless Platform](https://wpengine.com/atlas/) - [Faust.js](https://faustjs.org) - [WPGraphQL](https://www.wpgraphql.com) -- [WP Engine's Headless Platform developer community](https://developers.wpengine.com) +- [WPGraphQL Content Blocks](https://github.com/wpengine/wp-graphql-content-blocks) +- [WPGraphQL IDE](https://github.com/wp-graphql/wpgraphql-ide) +- [HWP Toolkit](https://github.com/wpengine/hwptoolkit) + +## Documentation 🔎 + +> [!NOTE] +> We are continuously adding new docs for [Faustjs.org](https://faustjs.org/docs) + +- [Faust.js Documentation](https://faustjs.org/docs/) +- [Headless Platform Documentation](https://wpengine.com/headless-wordpress/) +- [WPGraphQL Documentation](https://developers.wpengine.com/docs/atlas/overview/) + + +## Contributions -### Contributor License Agreement +## Contributor License Agreement All external contributors to WP Engine products must have a signed Contributor License Agreement (CLA) in place before the contribution may be accepted into any WP Engine codebase. diff --git a/components/entry-header.js b/components/EntryHeader.js similarity index 86% rename from components/entry-header.js rename to components/EntryHeader.js index ba53ce8..6a2752b 100644 --- a/components/entry-header.js +++ b/components/EntryHeader.js @@ -1,4 +1,4 @@ -import style from "./entry-header.module.css"; +import style from "../styles/entry-header.module.css"; export default function EntryHeader({ title, date, author }) { return ( diff --git a/components/FeaturedImage.js b/components/FeaturedImage.js new file mode 100644 index 0000000..aff8654 --- /dev/null +++ b/components/FeaturedImage.js @@ -0,0 +1,38 @@ +import Link from "next/link"; +import Image from "next/image"; +import styles from "../styles/featured-image.module.css"; + +export function FeaturedImage({ + post, + classNames = "h-48 my-9 relative", + uri = false, + title = "", +}) { + if (!post.featuredImage?.node?.sourceUrl) { + return ""; + } + + return ( +
+ {typeof uri === "string" && uri.trim() !== "" ? ( + + {post.featuredImage.node.altText + + ) : ( + {post.featuredImage.node.altText + )} +
+ ); +} diff --git a/components/Footer.js b/components/Footer.js new file mode 100644 index 0000000..cc2c99c --- /dev/null +++ b/components/Footer.js @@ -0,0 +1,15 @@ +import styles from "../styles/footer.module.css"; + +export default function Footer() { + return ( + + ); +} diff --git a/components/Header.js b/components/Header.js new file mode 100644 index 0000000..d637c8d --- /dev/null +++ b/components/Header.js @@ -0,0 +1,52 @@ +import { gql } from "@apollo/client"; +import Link from "next/link"; +import style from "../styles/header.module.css"; + +export default function Header({ siteTitle, siteDescription, menuItems }) { + return ( +
+
+ +

{siteTitle}

+

{siteDescription}

+ + + +
+
+ ); +} + +Header.fragments = { + entry: gql` + fragment HeaderFragment on RootQuery { + generalSettings { + title + description + } + primaryMenuItems: menuItems(where: { location: PRIMARY }) { + nodes { + id + uri + path + label + parentId + cssClasses + menu { + node { + name + } + } + } + } + } + `, +}; diff --git a/components/PostListItem.js b/components/PostListItem.js new file mode 100644 index 0000000..b04d564 --- /dev/null +++ b/components/PostListItem.js @@ -0,0 +1,47 @@ +import Link from "next/link"; +import { FeaturedImage } from "./FeaturedImage"; +import styles from "../styles/post-list-item.module.css"; + +export default function PostListItem({ post }) { + const { title, excerpt, uri, date } = post; + + return ( +
+ + +

+ + {title} + +

+ + {post.author && post.author.node && ( +
+ by {post.author.node.name} +
+ )} + + + +
+ + + Read more + +
+ ); +} diff --git a/components/footer.js b/components/footer.js index 5e8ebf8..cc2c99c 100644 --- a/components/footer.js +++ b/components/footer.js @@ -1,4 +1,4 @@ -import styles from "./footer.module.css"; +import styles from "../styles/footer.module.css"; export default function Footer() { return ( @@ -7,6 +7,9 @@ export default function Footer() { WP Engine + + © {new Date().getFullYear()} + ); } diff --git a/components/header.js b/components/header.js index 2ef5767..d637c8d 100644 --- a/components/header.js +++ b/components/header.js @@ -1,11 +1,11 @@ import { gql } from "@apollo/client"; import Link from "next/link"; -import style from "./header.module.css"; +import style from "../styles/header.module.css"; export default function Header({ siteTitle, siteDescription, menuItems }) { return (
-
+

{siteTitle}

{siteDescription}

@@ -13,7 +13,7 @@ export default function Header({ siteTitle, siteDescription, menuItems }) {