Test adding Payload CMS

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install, build, and upload your site
         uses: withastro/action@v1
         with:
@@ -36,4 +36,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

README.md

@@ -40,6 +40,8 @@ Just as a stake in the ground:
 - Some sort of headless CMS
 - [Pico CSS](https://picocss.com/) as a starting point
 
+Another new SSG tool that looks interesting is [Enhance](https://enhance.dev/), though it doesn't have nearly the usage of Astro yet.
+
 
 ### CMS
 
@@ -74,4 +76,8 @@ Some of the old site repos listed below contain [old blog posts](https://github.
 ## Packages
 
 - `astro`
-  - Hello, world project from the Astro CLI.  Start the server with `npm run astro:dev`.
+  - A basic skeleton of the existing site using Astro, including previous blog posts.
+  - Start the server with `npm run astro:dev`.
+- `payload`
+  - A containerized combo of Astro, Payload and MongoDB, built from the [`astroad`](https://github.com/mooxl/astroad) template.
+  - Start the docker containers with `npm run payload:dev`.

package.json

@@ -4,6 +4,7 @@
     "./packages/*"
   ],
   "scripts": {
-    "astro:dev": "npm run dev -w astro"
+    "astro:dev": "npm run dev -w astro",
+    "payload:dev": "npm run dev -w payload"
   }
 }

packages/astro/package.json

@@ -15,6 +15,7 @@
     "@picocss/pico": "^2.0.6",
     "astro": "^4.0.6",
     "astro-icon": "^1.0.4",
+    "slate-serializers": "^2.1.6",
     "typescript": "^5.3.3"
   }
 }

packages/astro/src/components/HeaderNav.astro

@@ -3,6 +3,7 @@ import NavLink from "./NavLink.astro";
 import NavDropdown from "./NavDropdown.astro";
 
 const routes = [
+	{ label: "Payload", page: "posts" },
 	{ label: "Wiki", page: "wiki" },
 	{ label: "Get Started", page: "getting-started" },
 	{ label: "Events", page: "events" },

packages/astro/src/components/Post.astro

@@ -0,0 +1,33 @@
+---
+import { getContentArray } from "@/utils/getContentArray";
+
+type Post = {
+	title: string;
+	content: any[];
+}
+
+interface Props {
+	post: Post;
+}
+
+const { post: { title, content } } = Astro.props;
+const contentNodes = getContentArray(content);
+---
+
+<article>
+	<h2 set:html={title} />
+	{contentNodes.map((node) => {
+		if (typeof node === "string") {
+			return <Fragment set:html={node} />;
+		} else {
+			return (
+				<img
+					src={`http://localhost:3001/media/${node.src}`}
+					width={node.width}
+					height={node.height}
+					alt="whatever"
+				/>
+			);
+		}
+	})}
+</article>

packages/astro/src/pages/posts.astro

@@ -0,0 +1,19 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Post from "@/components/Post.astro";
+
+const payloadURL = import.meta.env.PAYLOAD_BASE_URL;
+let posts;
+
+try {
+	const res = await fetch(`${payloadURL}/api/posts`);
+
+	posts = (await res.json()).docs;
+} catch (e) {
+	console.error(e);
+}
+---
+
+<BaseLayout title="Posts">
+	{posts?.map((post) => <Post post={post} />)}
+</BaseLayout>

packages/astro/src/utils/getContentArray.ts

@@ -0,0 +1,42 @@
+import { payloadSlateToDomConfig, slateToHtml } from "slate-serializers";
+import { Element } from "domhandler";
+
+export function getContentArray(
+	content: any[])
+{
+	const html = slateToHtml(content, {
+		...payloadSlateToDomConfig,
+		elementTransforms: {
+			...payloadSlateToDomConfig.elementTransforms,
+			upload: ({ node }) =>
+				// @ts-ignore
+				new Element("img", {
+					src: node.value.filename,
+					width: `${node.value.width}`,
+					height: `${node.value.height}`,
+				}),
+		},
+	}).replaceAll("<p></p>", "<p>&nbsp;</p>");
+	const htmlImageArray: (string | { src: string; width: number; height: number })[] = [];
+	let lastIndex = 0;
+
+	while (true) {
+		const imgStartIndex = html.indexOf("<img", lastIndex);
+		if (imgStartIndex === -1) {
+			htmlImageArray.push(html.substring(lastIndex));
+			break;
+		}
+		const imgEndIndex = html.indexOf(">", imgStartIndex) + 1;
+		const imgTag = html.substring(imgStartIndex, imgEndIndex);
+		const remainingHtml = html.substring(lastIndex, imgStartIndex);
+		const imgObject = {
+			src: imgTag.match(/src="(.*?)"/)![1],
+			width: +imgTag.match(/width="(.*?)"/)![1],
+			height: +imgTag.match(/height="(.*?)"/)![1],
+		};
+		htmlImageArray.push(remainingHtml, imgObject);
+		lastIndex = imgEndIndex;
+	}
+
+	return htmlImageArray;
+}

packages/payload/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/astro"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/payload"
+    schedule:
+      interval: "daily"

packages/payload/.github/workflows/payload.yml

@@ -0,0 +1,29 @@
+name: Payload update
+on:
+  repository_dispatch:
+    types: [payload_update]
+jobs:
+  cancel:
+    name: Cancel Previous Runs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          ignore_sha: true
+          access_token: ${{ github.token }}
+          workflow_id: "payload.yml"
+
+  build:
+    needs: cancel
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger build
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          key: ${{ secrets.KEY }}
+          script: |
+            cd ${{ secrets.PATH }}
+            yarn prod astro

packages/payload/.github/workflows/push.yml

@@ -0,0 +1,74 @@
+name: Code Deployment and Environment Setup
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    name: Run remote SSH commands
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone or pull repository
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          key: ${{ secrets.KEY }}
+          script_stop: false
+          script: |
+            if [ -d ${{ secrets.PATH }} ]; then
+              cd ${{ secrets.PATH }}
+              git pull
+            else
+              mkdir -p ${{ secrets.PATH }}
+              cd ${{ secrets.PATH }}
+              git clone [email protected]:${{ github.repository }}.git .
+            fi
+
+      - name: Update environment variables
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          key: ${{ secrets.KEY }}
+          script_stop: false
+          script: |
+            # Bash function to replace env variables
+            replace_env() {
+              local env_var=$1
+              local new_value=$2
+              awk -v var="${env_var}" -v val="${new_value}" -F '=' '{OFS=FS} $1 == var {$2 = val} 1' .env > .env.tmp && mv .env.tmp .env
+            }
+
+            cd ${{ secrets.PATH }}
+
+            # Replace .env with vars
+            replace_env 'NAME' '${{ vars.NAME }}'
+            replace_env 'ASTRO_HOST' '${{ vars.ASTRO_HOST }}'
+            replace_env 'PAYLOAD_HOST' '${{ vars.PAYLOAD_HOST }}'
+            replace_env 'PAYLOAD_URL' '${{ vars.PAYLOAD_URL }}'
+            replace_env 'PAYLOAD_PORT' '${{ vars.PAYLOAD_PORT }}'
+
+            # Replace .env with secrets
+            replace_env 'PAYLOAD_SECRET' '${{ secrets.PAYLOAD_SECRET }}'
+            replace_env 'MONGODB_URI' 'mongodb://${{ secrets.MONGODB_USER }}:${{ secrets.MONGODB_PW }}@mongo:27017'
+            replace_env 'MONGODB_USER' '${{ secrets.MONGODB_USER }}'
+            replace_env 'MONGODB_PW' '${{ secrets.MONGODB_PW }}'
+            replace_env 'TOKEN' '${{ secrets.TOKEN }}'
+
+            # Replace .env with GitHub repository
+            replace_env 'REPOSITORY' '${{ github.repository }}'
+
+            mkdir -p ./astro
+            cp .env ./astro/.env
+
+      - name: Start Production Services
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          key: ${{ secrets.KEY }}
+          script: |
+            cd ${{ secrets.PATH }}
+            yarn prod payload
+            yarn prod astro

packages/payload/.gitignore

@@ -0,0 +1,3 @@
+data
+yarn-debug.log*
+yarn-error.log*

packages/payload/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Max Schmidt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/payload/README.md

@@ -0,0 +1,82 @@
+# Payload and Astro
+
+## Usage
+
+The `payload` package in the monorepo is set up to work with the `astro` package.  To start it, open two terminals from the root of the monorepo.  In one run `npm run payload:dev` to start the Payload CMS docker image.  In the other, run `npm run astro:dev` to start the Astro server.
+
+You can then go to `localhost:3001` and create a login for the local Payload instance.  Then create some posts via the admin UI.
+
+On the Astro site, click the Payload link in the header to render the posts that you created in the CMS.
+
+<br>
+
+<details>
+<summary>The info below is from the original readme for the Astroad package.</summary>
+
+# Astroad
+
+Astroad is a pre-configured setup for Astro and Payloadcms, designed to make it easy for you to start building your website. With Astroad, you'll have a complete development environment that you can run locally using Docker. This setup simplifies the testing and development of your website before deploying it to a production environment.
+
+## Prerequisites
+
+Before getting started with Astroad, make sure you have the necessary software installed:
+
+- Docker
+- Node.js
+- Yarn
+
+## Configuration
+
+While there's no configuration necessary for local development, deployment via Github Workflows requires specific secrets and variables to be set.
+
+### Secrets:
+
+- `USER`: User on the server
+- `HOST`: IP or URL of the server
+- `KEY`: SSH KEY for connecting to the server
+- `MONGODB_PW`: Password for MongoDB
+- `MONGODB_USER`: User for MongoDB
+- `PATH`: Path where the repository resides on the server
+- `PAYLOAD_PORT`: Port at which Payload listens
+- `PAYLOAD_SECRET`: String to encrypt Payload data
+- `TOKEN`: Github Access Token for the webhook to trigger the payload.yml workflow and execute a new Astro build
+
+### Variables:
+
+- `ASTRO_HOST`: Hostdomain of the Frontend
+- `PAYLOAD_HOST`: Hostdomain of the CMS
+- `PAYLOAD_URL`: URL of the CMS
+- `NAME`: Name of the Container and Project
+
+Please remember to set these secrets and variables in your repository settings to ensure a successful deployment through Github Workflows.
+
+Once the secrets and variables are set on GitHub, they will replace the existing ones in the `.env` file on the server during deployment. This is done by the push.yml workflow, which replaces the placeholders in the `.env` with the actual secrets and variables defined in the repository settings. Please ensure that the names of your secrets and variables match with the placeholders in the `.env` file.
+
+## Getting started
+
+To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.
+
+You have two options for getting the repository:
+
+1. Use the 'Use this template' button on the Github repository. This will create a new repository in your Github account with the same directory structure and files as Astroad. After the new repository is created, you can clone it to your local machine.
+1. Alternatively, you can directly clone the Astroad repository: git clone https://github.com/mooxl/astroad.git. If you choose this option, remember to change the origin of your remote repository to a new one to avoid pushing changes directly to the Astroad repository. This can be done with the command: git remote set-url origin https://github.com/USERNAME/REPOSITORY.git where USERNAME is your username and REPOSITORY is the name of your new repository.
+
+Once you've cloned the repository or created your own from the template, follow these steps:
+
+1. Change into the repository directory: `cd {newName}`
+1. Start the containers: `yarn dev`
+
+This will start up the Astro, Payloadcms and Mongo containers and make them available on your local machine. Astro will be served at http://localhost:3000 and the Payload will be available at http://localhost:3001.
+
+## Development
+
+The `docker-compose.yml` and `docker-compose-dev.yml` files includes everything you need to run the containers. The containers use the environment variables declared in the `.env` file and mounted volumes to store data persistently even after the containers are stopped and started.
+
+## Deployment
+
+Deployment is handled by a Github Actions Workflow on every push. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs `yarn prod`.
+
+Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, there’s a `payload.yml` workflow that gets triggered by a webhook after every content change from Payload.
+
+Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment.
+</details>

packages/payload/docker-compose-dev.yml

@@ -0,0 +1,13 @@
+services:
+  payload:
+    build:
+      target: dev
+    volumes:
+      - ./payload/src:/base/src
+      - ./astro/src/types.ts:/types.ts
+    ports:
+      - 3001:3001
+
+  mongo:
+    ports:
+      - 27017:27017