chore: Update scaffold project

.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)

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

.nvmrc

@@ -0,0 +1 @@
+lts/jod

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.
+3. Replace the existing `acm-blueprint.zip` in the repo with the newly exported `acm-blueprint.zip` and make a PR with the changes.

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
+
+<details>
+    <summary>View Screenshots</summary>
+
+![Front Page](screenshots/front-page.png)
+
+![Category Page](screenshots/category-page.png)
+
+![Single Page](screenshots/single-page.png)
+
+![Single Post](screenshots/single-post.png)
+
+</details>
+
+## 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.
 

components/entry-header.js → 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 (

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 (
+    <div className={styles.wrapper + " " + classNames}>
+      {typeof uri === "string" && uri.trim() !== "" ? (
+        <Link href={uri} title={title} className={styles.link}>
+          <Image
+            src={post.featuredImage.node.sourceUrl}
+            alt={post.featuredImage.node.altText || post.title}
+            fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className={styles.image}
+          />
+        </Link>
+      ) : (
+        <Image
+          src={post.featuredImage.node.sourceUrl}
+          alt={post.featuredImage.node.altText || post.title}
+          fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className={styles.image}
+        />
+      )}
+    </div>
+  );
+}

components/Footer.js

@@ -0,0 +1,15 @@
+import styles from "../styles/footer.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      Powered by{" "}
+      <a href="https://wpengine.com" target="_blank" rel="noopener noreferrer">
+        WP Engine
+      </a>
+      <span>
+        &copy; {new Date().getFullYear()}
+      </span>
+    </footer>
+  );
+}

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 (
+    <header className={style.header}>
+      <div className={`container ${style.container}`}>
+        <Link href="/" className={style.brand}>
+          <h2 className={style.siteTitle}>{siteTitle}</h2>
+          <p className={style.siteDescription}>{siteDescription}</p>
+        </Link>
+
+        <nav className={style.nav}>
+          <ul>
+            {(Array.isArray(menuItems) ? menuItems : []).map((item) => (
+              <li key={item.id}>
+                <Link href={item.uri}>{item.label}</Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+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
+            }
+          }
+        }
+      }
+    }
+  `,
+};

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 (
+    <article className={styles.article}>
+      <time className={styles.time} dateTime={post.date}>
+        {new Date(date).toLocaleDateString(undefined, {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })}
+      </time>
+
+      <h2 className={styles.title}>
+        <Link href={uri} title={title} className={styles.link}>
+          {title}
+        </Link>
+      </h2>
+
+      {post.author && post.author.node && (
+        <div className={styles.authorRow}>
+          <span>by {post.author.node.name}</span>
+        </div>
+      )}
+
+      <FeaturedImage
+        post={post}
+        uri={uri}
+        title={title}
+        classNames="h-48 my-9 relative"
+      />
+
+      <div
+        className={styles.excerpt}
+        dangerouslySetInnerHTML={{ __html: excerpt }}
+      />
+
+      <Link href={uri} title="Read more" className={styles.readMore}>
+        Read more
+      </Link>
+    </article>
+  );
+}

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() {
       <a href="https://wpengine.com" target="_blank" rel="noopener noreferrer">
         WP Engine
       </a>
+      <span>
+        &copy; {new Date().getFullYear()}
+      </span>
     </footer>
   );
 }

components/header.js

@@ -1,19 +1,19 @@
 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 (
     <header className={style.header}>
-      <div className="container">
+      <div className={`container ${style.container}`}>
         <Link href="/" className={style.brand}>
           <h2 className={style.siteTitle}>{siteTitle}</h2>
           <p className={style.siteDescription}>{siteDescription}</p>
         </Link>
 
         <nav className={style.nav}>
           <ul>
-            {menuItems.map((item) => (
+            {(Array.isArray(menuItems) ? menuItems : []).map((item) => (
               <li key={item.id}>
                 <Link href={item.uri}>{item.label}</Link>
               </li>

fragments/PostListFragment.js

@@ -0,0 +1,25 @@
+import { gql } from "@apollo/client";
+
+export const POST_LIST_FRAGMENT = gql`
+  fragment PostListFragment on Post {
+    id
+    title
+    uri
+    excerpt
+    date
+    featuredImage {
+      node {
+        sourceUrl
+        altText
+      }
+    }
+    author {
+      node {
+        name
+        avatar {
+          url
+        }
+      }
+    }
+  }
+`;

next.config.js

@@ -1,6 +1,11 @@
-const { withFaust, getWpHostname } = require('@faustwp/core');
+const { withFaust } = require("@faustwp/core");
 
 /**
  * @type {import('next').NextConfig}
  **/
-module.exports = withFaust({});
+module.exports = withFaust({
+  images: {
+    domains: ["faustexample.wpengine.com"],
+  },
+  trailingSlash: true,
+});