diff --git a/src/pages/docs/pages/layouts.md b/src/pages/docs/pages/layouts.md
index 2bdae606..55851050 100644
--- a/src/pages/docs/pages/layouts.md
+++ b/src/pages/docs/pages/layouts.md
@@ -60,26 +60,26 @@ Below is an example of a _page.html_ layout:
You can create more layouts and use them for pages with the following steps:
-
-
1. Create a new layout, e.g. _layouts/blog.html_
1. In your frontmatter, specify that layout's filename
+
+
- ```md
- ---
- layout: blog
- ---
+ ```md
+ ---
+ layout: blog
+ ---
- ## My First Post
+ ## My First Post
- Lorum Ipsum
- ```
+ Lorum Ipsum
+ ```
-
+
## App
diff --git a/src/pages/docs/reference/rendering-strategies.md b/src/pages/docs/reference/rendering-strategies.md
index f38b6bde..54fb8803 100644
--- a/src/pages/docs/reference/rendering-strategies.md
+++ b/src/pages/docs/reference/rendering-strategies.md
@@ -41,65 +41,67 @@ For example, creating a list of blog posts for a blog landing page, based on all
1. Add the `prerender` config to _greenwood.config.js_
-
+
- ```js
- export default {
- prerender: true,
- };
- ```
+ ```js
+ export default {
+ prerender: true,
+ };
+ ```
-
+
1. Create a content fetching component
-
+
- ```js
- import { getContentByRoute } from "@greenwood/cli/src/data/queries.js";
+ ```js
+ import { getContentByRoute } from "@greenwood/cli/src/data/queries.js";
- export default class BlogPostsList extends HTMLElement {
- async connectedCallback() {
- const posts = await getContentByRoute("/blog/");
+ export default class BlogPostsList extends HTMLElement {
+ async connectedCallback() {
+ const posts = await getContentByRoute("/blog/");
- this.innerHTML = `
- ${posts
- .map((post) => {
+ this.innerHTML = `
+ ${posts
+ .map((post) => {
return `
${post.title}
`;
- })
- .join("")}
- `;
- }
- }
+ })
+ .join("")}
+ `;
+ }
+ }
- customElements.define("blog-posts-list", BlogPostsList);
- ```
+ customElements.define("blog-posts-list", BlogPostsList);
+ ```
-
+
1. Add it to your HTML page with the [**static** optimization attribute](/docs/reference/configuration/#optimization), as well as the custom element definition
-
-
- ```html
-
-
-
- Blog
-
-
-
- All Blog Posts
-
+
+
+ ```html
+
+
+
+ Blog
+
+
+
+ All Blog Posts
+
+
+
Now you will have list of all your blog posts, automatically generated and formatted from your own content, kept up to date with every change. All with no runtime JavaScript!
diff --git a/src/pages/guides/ecosystem/storybook.md b/src/pages/guides/ecosystem/storybook.md
index 93c6da86..96e36cdd 100644
--- a/src/pages/guides/ecosystem/storybook.md
+++ b/src/pages/guides/ecosystem/storybook.md
@@ -282,81 +282,79 @@ This can be accomplished with the [**storybook-addon-fetch-mock**](https://story
1. First, install the **storybook-addon-fetch-mock** addon
-
+
-
+
- ```shell
- npm i -D storybook-addon-fetch-mock
- ```
+ ```shell
+ npm i -D storybook-addon-fetch-mock
+ ```
- ```shell
- yarn add storybook-addon-fetch-mock --save-dev
- ```
+ ```shell
+ yarn add storybook-addon-fetch-mock --save-dev
+ ```
- ```shell
- pnpm add -D storybook-addon-fetch-mock
- ```
+ ```shell
+ pnpm add -D storybook-addon-fetch-mock
+ ```
-
+
-
+
1. Then add it to your _.storybook/main.js_ configuration file as an **addon**
-
+
-
+
- ```js
- const config = {
- addons: [
- "storybook-addon-fetch-mock",
- ],
- };
+ ```js
+ const config = {
+ addons: ["storybook-addon-fetch-mock"],
+ };
- export default config;
- ```
+ export default config;
+ ```
-
+
-
+
1. Then in your story files, configure your Story to return mock data
-
-
-
-
- ```js
- import "./blog-posts-list.js";
- import pages from "../../stories/mocks/graph.json";
-
- export default {
- parameters: {
- fetchMock: {
- mocks: [
- {
- matcher: {
- url: "http://localhost:1984/___graph.json",
- response: {
- // this is an example of mocking out getContentByRoute
- body: pages.filter((page) => page.route.startsWith("/blog/")),
- },
- },
- },
- ],
- },
- },
- };
+
+
+
+
+ ```js
+ import "./blog-posts-list.js";
+ import pages from "../../stories/mocks/graph.json";
+
+ export default {
+ parameters: {
+ fetchMock: {
+ mocks: [
+ {
+ matcher: {
+ url: "http://localhost:1984/___graph.json",
+ response: {
+ // this is an example of mocking out getContentByRoute
+ body: pages.filter((page) => page.route.startsWith("/blog/")),
+ },
+ },
+ },
+ ],
+ },
+ },
+ };
- const Template = () => "
+
-
+
> To quickly get a "mock" graph to use in your stories, you can run `greenwood build` and copy the _graph.json_ file from the build output directory.
diff --git a/src/pages/guides/ecosystem/tailwind.md b/src/pages/guides/ecosystem/tailwind.md
index 0c2f077d..6c9cbd13 100644
--- a/src/pages/guides/ecosystem/tailwind.md
+++ b/src/pages/guides/ecosystem/tailwind.md
@@ -16,134 +16,131 @@ As Tailwind is a PostCSS plugin, you'll need to take a couple of extra steps to
1. Let's install Tailwind and needed dependencies into our project, including Greenwood's [PostCSS plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss)
-
+
-
+
- ```shell
- npm i -D @greenwood/plugin-postcss tailwindcss autoprefixer
- ```
+ ```shell
+ npm i -D @greenwood/plugin-postcss tailwindcss autoprefixer
+ ```
- ```shell
- yarn add @greenwood/plugin-postcss tailwindcss autoprefixer --save-dev
- ```
+ ```shell
+ yarn add @greenwood/plugin-postcss tailwindcss autoprefixer --save-dev
+ ```
- ```shell
- pnpm add -D @greenwood/plugin-postcss tailwindcss autoprefixer
- ```
+ ```shell
+ pnpm add -D @greenwood/plugin-postcss tailwindcss autoprefixer
+ ```
-
+
-
+
1. Now run the Tailwind CLI to initialize our project with Tailwind
-
+
-
+
- ```shell
- $ npx tailwindcss init
- ```
+ ```shell
+ $ npx tailwindcss init
+ ```
-
+
-
+
1. Create a [PostCSS configuration file](/docs/plugins/postcss/#installation) in the root of your project with needed Tailwind plugins
-
+
-
+
- ```js
- export default {
- plugins: [
- (await import("tailwindcss")).default,
- (await import("autoprefixer")).default
- ],
- };
- ```
+ ```js
+ export default {
+ plugins: [(await import("tailwindcss")).default, (await import("autoprefixer")).default],
+ };
+ ```
-
+
-
+
1. Create a _tailwind.config.js_ file and configure accordingly for your project
-
+
-
+
- ```js
- /** @type {import('tailwindcss').Config} */
- export default {
- content: ["./src/**/*.{html,js}"],
- theme: {},
- plugins: [],
- };
- ```
+ ```js
+ /** @type {import('tailwindcss').Config} */
+ export default {
+ content: ["./src/**/*.{html,js}"],
+ theme: {},
+ plugins: [],
+ };
+ ```
-
+
-
+
1. Add the PostCSS plugin to your _greenwood.config.js_
-
+
-
+
- ```js
- import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss";
+ ```js
+ import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss";
- export default {
- plugins: [greenwoodPluginPostCss()],
- };
- ```
+ export default {
+ plugins: [greenwoodPluginPostCss()],
+ };
+ ```
-
+
-
+
## Usage
1. Now you'll want to create an "entry" point CSS file to include the initial Tailwind `@import`s.
-
+
-
+
- ```css
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- ```
+ ```css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ ```
-
+
-
+
1. And include that in your layouts or pages
-
+
-
+
- ```html
-
-
-
+
-
+
Now you're ready to start using Tailwind! 🎯
diff --git a/src/pages/guides/ecosystem/web-test-runner.md b/src/pages/guides/ecosystem/web-test-runner.md
index 45655888..44465761 100644
--- a/src/pages/guides/ecosystem/web-test-runner.md
+++ b/src/pages/guides/ecosystem/web-test-runner.md
@@ -16,80 +16,80 @@ For the sake of this guide, we will be covering a minimal setup but you are free
1. First, let's install WTR and the JUnit Reporter. You can use your favorite package manager
-
+
-
+
- ```shell
- npm i -D @web/test-runner @web/test-runner-junit-reporter
- ```
+ ```shell
+ npm i -D @web/test-runner @web/test-runner-junit-reporter
+ ```
- ```shell
- yarn add @web/test-runner @web/test-runner-junit-reporter --save-dev
- ```
+ ```shell
+ yarn add @web/test-runner @web/test-runner-junit-reporter --save-dev
+ ```
- ```shell
- pnpm add -D @web/test-runner @web/test-runner-junit-reporter
- ```
+ ```shell
+ pnpm add -D @web/test-runner @web/test-runner-junit-reporter
+ ```
-
+
-
+
1. You'll also want something like [**chai**](https://www.chaijs.com/) to write your assertions with
-
+
-
+
- ```shell
- npm i -D @esm-bundle/chai
- ```
+ ```shell
+ npm i -D @esm-bundle/chai
+ ```
- ```shell
- yarn add @esm-bundle/chai --save-dev
- ```
+ ```shell
+ yarn add @esm-bundle/chai --save-dev
+ ```
- ```shell
- pnpm add -D @esm-bundle/chai
- ```
+ ```shell
+ pnpm add -D @esm-bundle/chai
+ ```
-
+
-
+
1. Next, create a basic _web-test-runner.config.js_ configuration file
-
-
-
-
- ```js
- import { defaultReporter } from "@web/test-runner";
- import { junitReporter } from "@web/test-runner-junit-reporter";
-
- export default {
- // customize your spec pattern here
- files: "./src/**/*.spec.js",
- // enable this if you're using npm / node_modules
- nodeResolve: true,
- // optionally configure reporters and coverage
- reporters: [
- defaultReporter({ reportTestResults: true, reportTestProgress: true }),
- junitReporter({
- outputPath: "./reports/test-results.xml",
- }),
- ],
- coverage: true,
- coverageConfig: {
- reportDir: "./reports",
- },
- };
- ```
-
-
-
-
+
+
+
+
+ ```js
+ import { defaultReporter } from "@web/test-runner";
+ import { junitReporter } from "@web/test-runner-junit-reporter";
+
+ export default {
+ // customize your spec pattern here
+ files: "./src/**/*.spec.js",
+ // enable this if you're using npm / node_modules
+ nodeResolve: true,
+ // optionally configure reporters and coverage
+ reporters: [
+ defaultReporter({ reportTestResults: true, reportTestProgress: true }),
+ junitReporter({
+ outputPath: "./reports/test-results.xml",
+ }),
+ ],
+ coverage: true,
+ coverageConfig: {
+ reportDir: "./reports",
+ },
+ };
+ ```
+
+
+
+
## Usage
diff --git a/src/pages/guides/hosting/aws.md b/src/pages/guides/hosting/aws.md
index a3bed314..69cc13af 100644
--- a/src/pages/guides/hosting/aws.md
+++ b/src/pages/guides/hosting/aws.md
@@ -66,52 +66,52 @@ If you're using GitHub, you can use GitHub Actions to automate the pushing of bu
1. We also recommend adding your bucket name as secret too, e.g. `AWS_BUCKET_NAME`
1. At the root of your repo add a GitHub Action called _.github/workflows/publish.yml_ and adapt as needed for your own branch, build commands, and package manager.
-
-
-
-
- ```yml
- name: Upload Website to S3
-
- on:
- push:
- branches:
- - main
-
- jobs:
- build:
- runs-on: ubuntu-latest
-
- # match to your version of NodeJS
- steps:
- - uses: actions/checkout@v4
- - uses: actions/setup-node@v4
- with:
- node-version: 22
-
- - name: Install Dependencies
- run: |
- npm ci
-
- # use your greenwood build script
- - name: Run Build
- run: |
- npm run build
-
- - name: Upload to S3 and invalidate CDN
- uses: opspresso/action-s3-sync@master
- env:
- AWS_ACCESS_KEY_ID: ${{ secrets.AWS_SECRET_ACCESS_KEY_ID }}
- AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
- # make sure this matches your bucket's region
- AWS_REGION: "us-east-1"
- FROM_PATH: "./public"
- # your target s3 bucket name goes here
- DEST_PATH: s3://${{ secrets.AWS_BUCKET_NAME }}
- ```
-
-
-
-
+
+
+
+
+ ```yml
+ name: Upload Website to S3
+
+ on:
+ push:
+ branches:
+ - main
+
+ jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ # match to your version of NodeJS
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 22
+
+ - name: Install Dependencies
+ run: |
+ npm ci
+
+ # use your greenwood build script
+ - name: Run Build
+ run: |
+ npm run build
+
+ - name: Upload to S3 and invalidate CDN
+ uses: opspresso/action-s3-sync@master
+ env:
+ AWS_ACCESS_KEY_ID: ${{ secrets.AWS_SECRET_ACCESS_KEY_ID }}
+ AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+ # make sure this matches your bucket's region
+ AWS_REGION: "us-east-1"
+ FROM_PATH: "./public"
+ # your target s3 bucket name goes here
+ DEST_PATH: s3://${{ secrets.AWS_BUCKET_NAME }}
+ ```
+
+
+
+
Now when you push changes to your repo, the action will run an the build files will automatically be uploaded.
diff --git a/src/pages/guides/hosting/github.md b/src/pages/guides/hosting/github.md
index 13877035..20e915b9 100644
--- a/src/pages/guides/hosting/github.md
+++ b/src/pages/guides/hosting/github.md
@@ -19,85 +19,88 @@ Following the steps [outlined here](https://pages.github.com/), first make sure
1. Created a repo in the format **{username}.github.io** or **{username}.github.io/{repo-name}**
1. If using **{username}.github.io/{repo-name}**, make sure to set Greenwood's [base path](/docs/reference/configuration/#base-path) configuration to match
-
-
+
+
- ```js
- export default {
- basePath: "/repo-name",
- };
- ```
+ ```js
+ export default {
+ basePath: "/repo-name",
+ };
+ ```
-
+
-
+
1. Get your project all setup in your repository.
1. If you don't have a build script, let's add one to _package.json_ to use in our GitHub Action
-
-
+
+
- ```json
- "scripts": {
- "build": "greenwood build"
- }
- ```
+ ```json
+ {
+ "scripts": {
+ "build": "greenwood build"
+ }
+ }
+ ```
-
+
-
+
## Setup
1. Create a file called _.github/workflows/gh-pages.yml_ in your repo
1. Now add this GitHub Action, _making sure to use the correct branch name for your project_; **_master_, _main_**, etc. (We're leveraging [this action](https://github.com/marketplace/actions/github-pages-action) at the end for the actual auto deploy)
-
-
-
- ```yml
- name: Deploy GitHub Pages
-
- on:
- push:
- branches:
- # configure your branch accordingly
- - main
-
- jobs:
- build-and-deploy:
- runs-on: ubuntu-latest
-
- # match to your version of NodeJS
- steps:
- - uses: actions/checkout@v4
- - uses: actions/setup-node@v4
- with:
- node-version: 22
-
- # or replace with yarn, pnpm, etc
- - name: Install Dependencies
- run: |
- npm ci
-
- # use your greenwood build script
- - name: Run Build
- run: |
- npm run build
-
- - name: Deploy to GitHub Pages
- uses: peaceiris/actions-gh-pages@v3
- # change the branch name to match your repo
- if: ${{ github.ref == 'refs/heads/main' }}
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./public
- ```
-
-
-
-
+
+
+
+
+ ```yml
+ name: Deploy GitHub Pages
+
+ on:
+ push:
+ branches:
+ # configure your branch accordingly
+ - main
+
+ jobs:
+ build-and-deploy:
+ runs-on: ubuntu-latest
+
+ # match to your version of NodeJS
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 22
+
+ # or replace with yarn, pnpm, etc
+ - name: Install Dependencies
+ run: |
+ npm ci
+
+ # use your greenwood build script
+ - name: Run Build
+ run: |
+ npm run build
+
+ - name: Deploy to GitHub Pages
+ uses: peaceiris/actions-gh-pages@v3
+ # change the branch name to match your repo
+ if: ${{ github.ref == 'refs/heads/main' }}
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ publish_dir: ./public
+ ```
+
+
+
+
1. Now `git` commit that and push it to your repo!
diff --git a/src/pages/guides/tutorials/theme-packs.md b/src/pages/guides/tutorials/theme-packs.md
index 9d809d6e..ecbe4193 100644
--- a/src/pages/guides/tutorials/theme-packs.md
+++ b/src/pages/guides/tutorials/theme-packs.md
@@ -274,27 +274,27 @@ When it comes to publishing, it should be fairly straightforward, and you'll jus
1. Add _dist/_ to _.gitignore_ (or whatever **files** location you want to use for publishing)
1. Add a `prepublish` script to your _package.json_ to create the _dist/_ directory with all the needed layouts and styles
-
-
-
-
- ```json
- {
- "name": "my-theme-pack",
- "version": "0.1.0",
- "description": "My Custom Greenwood Theme Pack",
- "main": "my-theme-pack.js",
- "type": "module",
- "files": ["dist/"],
- "scripts": {
- "prepublish": "rm -rf dist/ && mkdir dist/ && rsync -rv --exclude 'pages/' src/ dist"
- }
- }
- ```
+
+
+
+
+ ```json
+ {
+ "name": "my-theme-pack",
+ "version": "0.1.0",
+ "description": "My Custom Greenwood Theme Pack",
+ "main": "my-theme-pack.js",
+ "type": "module",
+ "files": ["dist/"],
+ "scripts": {
+ "prepublish": "rm -rf dist/ && mkdir dist/ && rsync -rv --exclude 'pages/' src/ dist"
+ }
+ }
+ ```
-
+
-
+
1. Now, when you run `npm publish` a fresh _dist/_ folder will be made and [included in your package](https://unpkg.com/browse/greenwood-starter-presentation/)