From 3cafe3839fb110798f576d3288b1f69f39c3bf08 Mon Sep 17 00:00:00 2001 From: Alex Moon Date: Tue, 12 Aug 2025 14:29:12 -0700 Subject: [PATCH 1/3] initial previews example commit --- examples/astro/previews/.wp-env.json | 25 + examples/astro/previews/README.md | 18 + .../astro/previews/example-app/.gitignore | 24 + examples/astro/previews/example-app/README.md | 48 ++ .../previews/example-app/astro.config.mjs | 7 + .../astro/previews/example-app/package.json | 16 + .../previews/example-app/public/favicon.svg | 9 + .../previews/example-app/src/assets/astro.svg | 1 + .../example-app/src/assets/background.svg | 1 + .../example-app/src/components/Nav.astro | 50 ++ .../components/TemplateHierarchyInfo.astro | 52 ++ .../example-app/src/content.config.ts | 32 + .../astro/previews/example-app/src/env.d.ts | 6 + .../example-app/src/layouts/Layout.astro | 36 + .../previews/example-app/src/lib/client.js | 48 ++ .../previews/example-app/src/lib/seedQuery.js | 91 +++ .../example-app/src/lib/templateHierarchy.ts | 98 +++ .../previews/example-app/src/lib/templates.ts | 184 +++++ .../previews/example-app/src/pages/404.astro | 11 + .../previews/example-app/src/pages/500.astro | 8 + .../example-app/src/pages/[...uri].astro | 31 + .../src/pages/wp-templates/archive.astro | 86 +++ .../src/pages/wp-templates/home.astro | 91 +++ .../src/pages/wp-templates/index.astro | 84 +++ .../src/pages/wp-templates/single.astro | 131 ++++ .../astro/previews/example-app/tsconfig.json | 5 + examples/astro/previews/package.json | 22 + .../astro/previews/wp-env/db/database.sql | 652 ++++++++++++++++++ .../astro/previews/wp-env/setup/.htaccess | 15 + 29 files changed, 1882 insertions(+) create mode 100644 examples/astro/previews/.wp-env.json create mode 100644 examples/astro/previews/README.md create mode 100644 examples/astro/previews/example-app/.gitignore create mode 100644 examples/astro/previews/example-app/README.md create mode 100644 examples/astro/previews/example-app/astro.config.mjs create mode 100644 examples/astro/previews/example-app/package.json create mode 100644 examples/astro/previews/example-app/public/favicon.svg create mode 100644 examples/astro/previews/example-app/src/assets/astro.svg create mode 100644 examples/astro/previews/example-app/src/assets/background.svg create mode 100644 examples/astro/previews/example-app/src/components/Nav.astro create mode 100644 examples/astro/previews/example-app/src/components/TemplateHierarchyInfo.astro create mode 100644 examples/astro/previews/example-app/src/content.config.ts create mode 100644 examples/astro/previews/example-app/src/env.d.ts create mode 100644 examples/astro/previews/example-app/src/layouts/Layout.astro create mode 100644 examples/astro/previews/example-app/src/lib/client.js create mode 100644 examples/astro/previews/example-app/src/lib/seedQuery.js create mode 100644 examples/astro/previews/example-app/src/lib/templateHierarchy.ts create mode 100644 examples/astro/previews/example-app/src/lib/templates.ts create mode 100644 examples/astro/previews/example-app/src/pages/404.astro create mode 100644 examples/astro/previews/example-app/src/pages/500.astro create mode 100644 examples/astro/previews/example-app/src/pages/[...uri].astro create mode 100644 examples/astro/previews/example-app/src/pages/wp-templates/archive.astro create mode 100644 examples/astro/previews/example-app/src/pages/wp-templates/home.astro create mode 100644 examples/astro/previews/example-app/src/pages/wp-templates/index.astro create mode 100644 examples/astro/previews/example-app/src/pages/wp-templates/single.astro create mode 100644 examples/astro/previews/example-app/tsconfig.json create mode 100644 examples/astro/previews/package.json create mode 100644 examples/astro/previews/wp-env/db/database.sql create mode 100644 examples/astro/previews/wp-env/setup/.htaccess diff --git a/examples/astro/previews/.wp-env.json b/examples/astro/previews/.wp-env.json new file mode 100644 index 00000000..029eb757 --- /dev/null +++ b/examples/astro/previews/.wp-env.json @@ -0,0 +1,25 @@ +{ + "phpVersion": "8.3", + "plugins": [ + "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip", + "https://github.com/wpengine/hwptoolkit/releases/download/%40wpengine%2Fhwp-previews-wordpress-plugin-0.0.8/hwp-previews.zip", + "https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip" + ], + "themes": ["https://downloads.wordpress.org/theme/nude.1.2.zip"], + "config": { + "WP_DEBUG": true, + "SCRIPT_DEBUG": false, + "GRAPHQL_DEBUG": true, + "WP_DEBUG_LOG": true, + "WP_DEBUG_DISPLAY": false, + "SAVEQUERIES": false + }, + "mappings": { + "db": "./wp-env/db", + "wp-content/uploads": "./wp-env/uploads", + ".htaccess": "./wp-env/setup/.htaccess" + }, + "lifecycleScripts": { + "afterStart": "wp-env run cli -- wp theme activate nude && wp-env run cli -- wp theme delete --all && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush" + } +} diff --git a/examples/astro/previews/README.md b/examples/astro/previews/README.md new file mode 100644 index 00000000..ad71d533 --- /dev/null +++ b/examples/astro/previews/README.md @@ -0,0 +1,18 @@ +# Astro Template HIerarchy and Data fetching w/URQL Example + +In this example we show how to implement the WP Template Hierarchy in Astro for use with a Headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content. + +## Getting Started + +> [!IMPORTANT] +> Docker Desktop needs to be installed to run WordPress locally. + +1. Run `npm run example:setup` to install dependencies and configure the local WP server. +2. Run `npm run example:start` to start the WP server and Astro development server. + +> [!NOTE] +> When you kill the long running process this will not shutdown the local WP instance, only Astro. You must run `npm run example:stop` to kill the local WP server. + +## Trouble Shooting + +To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. diff --git a/examples/astro/previews/example-app/.gitignore b/examples/astro/previews/example-app/.gitignore new file mode 100644 index 00000000..016b59ea --- /dev/null +++ b/examples/astro/previews/example-app/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ + +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/examples/astro/previews/example-app/README.md b/examples/astro/previews/example-app/README.md new file mode 100644 index 00000000..ff19a3e7 --- /dev/null +++ b/examples/astro/previews/example-app/README.md @@ -0,0 +1,48 @@ +# Astro Starter Kit: Basics + +```sh +npm create astro@latest -- --template basics +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── layouts/ +│ │ └── Layout.astro +│ └── pages/ +│ └── index.astro +└── package.json +``` + +To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/). + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:4321` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/astro/previews/example-app/astro.config.mjs b/examples/astro/previews/example-app/astro.config.mjs new file mode 100644 index 00000000..245b4b2d --- /dev/null +++ b/examples/astro/previews/example-app/astro.config.mjs @@ -0,0 +1,7 @@ +// @ts-check +import { defineConfig } from "astro/config"; + +// https://astro.build/config +export default defineConfig({ + output: "server", +}); diff --git a/examples/astro/previews/example-app/package.json b/examples/astro/previews/example-app/package.json new file mode 100644 index 00000000..07f65ee1 --- /dev/null +++ b/examples/astro/previews/example-app/package.json @@ -0,0 +1,16 @@ +{ + "name": "astro-previews-example-app", + "description": "A template for Astro with WordPress and URQL", + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@urql/core": "^5.1.1", + "astro": "^5.6.1" + } +} diff --git a/examples/astro/previews/example-app/public/favicon.svg b/examples/astro/previews/example-app/public/favicon.svg new file mode 100644 index 00000000..f157bd1c --- /dev/null +++ b/examples/astro/previews/example-app/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/examples/astro/previews/example-app/src/assets/astro.svg b/examples/astro/previews/example-app/src/assets/astro.svg new file mode 100644 index 00000000..8cf8fb0c --- /dev/null +++ b/examples/astro/previews/example-app/src/assets/astro.svg @@ -0,0 +1 @@ + diff --git a/examples/astro/previews/example-app/src/assets/background.svg b/examples/astro/previews/example-app/src/assets/background.svg new file mode 100644 index 00000000..4b2be0ac --- /dev/null +++ b/examples/astro/previews/example-app/src/assets/background.svg @@ -0,0 +1 @@ + diff --git a/examples/astro/previews/example-app/src/components/Nav.astro b/examples/astro/previews/example-app/src/components/Nav.astro new file mode 100644 index 00000000..d35cab7d --- /dev/null +++ b/examples/astro/previews/example-app/src/components/Nav.astro @@ -0,0 +1,50 @@ +--- +/** + * We've hard coded this but you can use the client to fetch this data from WP Menus! + * import { client, gql } from "../lib/client"; + */ +--- + + + diff --git a/examples/astro/previews/example-app/src/components/TemplateHierarchyInfo.astro b/examples/astro/previews/example-app/src/components/TemplateHierarchyInfo.astro new file mode 100644 index 00000000..d294d4dc --- /dev/null +++ b/examples/astro/previews/example-app/src/components/TemplateHierarchyInfo.astro @@ -0,0 +1,52 @@ +--- +const template = Astro.locals.templateData; + +if (!template) { + return null; +} +--- + + diff --git a/examples/astro/previews/example-app/src/content.config.ts b/examples/astro/previews/example-app/src/content.config.ts new file mode 100644 index 00000000..fc82f890 --- /dev/null +++ b/examples/astro/previews/example-app/src/content.config.ts @@ -0,0 +1,32 @@ +import { defineCollection, z } from "astro:content"; +import { readdir } from "node:fs/promises"; +import { join } from "node:path"; + +const TEMPLATE_PATH = "wp-templates"; + +const templates = defineCollection({ + loader: async () => { + const files = await readdir(join("src", "pages", TEMPLATE_PATH)); + return files.map((file) => { + const slug = file.replace(".astro", ""); + + if (slug === "index") { + return { + id: slug, + path: join(TEMPLATE_PATH, "/"), + }; + } + + return { + id: slug, + path: join(TEMPLATE_PATH, slug), + }; + }); + }, + schema: z.object({ + id: z.string(), + path: z.string(), + }), +}); + +export const collections = { templates }; diff --git a/examples/astro/previews/example-app/src/env.d.ts b/examples/astro/previews/example-app/src/env.d.ts new file mode 100644 index 00000000..f873a378 --- /dev/null +++ b/examples/astro/previews/example-app/src/env.d.ts @@ -0,0 +1,6 @@ +declare namespace App { + interface Locals { + templateData?: import("./lib/templateHierarchy").TemplateData; + isPreview?: boolean; + } +} diff --git a/examples/astro/previews/example-app/src/layouts/Layout.astro b/examples/astro/previews/example-app/src/layouts/Layout.astro new file mode 100644 index 00000000..7e3e8b01 --- /dev/null +++ b/examples/astro/previews/example-app/src/layouts/Layout.astro @@ -0,0 +1,36 @@ +--- +import Nav from "../components/Nav.astro"; +import TemplateHierarchyInfo from "../components/TemplateHierarchyInfo.astro"; +--- + + + + + + + + + Astro Basics + + + +