Initial import

.env

@@ -0,0 +1,11 @@
+NAME=astroad
+ASTRO_HOST=localhost:3000
+PAYLOAD_HOST=payload:3001
+PAYLOAD_URL=http://localhost:3001
+PAYLOAD_PORT=3001
+PAYLOAD_SECRET=supersecretkey
+MONGODB_URI=mongodb://payload:test@mongo:27017
+MONGODB_USER=payload
+MONGODB_PW=test
+TOKEN=supersecrettoken
+REPOSITORY=mooxl/astroad

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

.gitignore

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

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.

README.md

@@ -0,0 +1,66 @@
+# 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.

astro/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+Dockerfile
+README.md

astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# macOS-specific files
+.DS_Store
+
+# types
+src/types.ts

astro/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

astro/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts-alpine as base
+WORKDIR /base
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+COPY . .
+
+FROM base AS dev
+ENV NODE_ENV=development
+EXPOSE 3000
+CMD ["yarn","dev"]
+
+FROM base AS build
+ENV NODE_ENV=production
+WORKDIR /build
+COPY --from=base /base .
+ADD "https://random-uuid.deno.dev" skipcache
+RUN yarn build
+
+FROM nginx:stable AS prod
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /build/dist /usr/share/nginx/html
+EXPOSE 3000

astro/astro.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+import image from "@astrojs/image";
+import sitemap from "@astrojs/sitemap";
+import prefetch from "@astrojs/prefetch";
+
+export default defineConfig({
+  compressHTML: true,
+  build: {
+    inlineStylesheets: "auto",
+  },
+  experimental: {
+    viewTransitions: true,
+  },
+  integrations: [
+    tailwind({
+      config: {
+        applyBaseStyles: false,
+      },
+    }),
+    image({
+      serviceEntryPoint: "@astrojs/image/sharp",
+    }),
+    prefetch({
+      selector: "a",
+    }),
+    sitemap(),
+  ],
+});

astro/nginx.conf

@@ -0,0 +1,35 @@
+events {
+    worker_connections  1024;
+}
+
+http {
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    
+    server {
+        listen 80;
+
+        location / {
+            root /usr/share/nginx/html;
+            try_files $uri $uri/ =404;
+        }
+
+        location /error_page.html {
+            internal;
+        }
+
+        location ~* \.(jpg|jpeg|png|gif|ico|css|js|htm|html)$ {
+            root /usr/share/nginx/html;
+            expires 30d;  
+            add_header Pragma public;
+            add_header Cache-Control "public";
+        }
+
+        error_page 404 /error_page.html;
+    }
+}

astro/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "astroad",
+  "description": "Astroad - Astro",
+  "type": "module",
+  "version": "1.1",
+  "license": "MIT",
+  "scripts": {
+    "dev": "astro dev --host",
+    "build": "astro build"
+  },
+  "dependencies": {
+    "@astrojs/image": "^0.17.3",
+    "@astrojs/prefetch": "^0.3.0",
+    "@astrojs/sitemap": "^2.0.2",
+    "@astrojs/tailwind": "4.0.0",
+    "astro": "^2.10.12",
+    "css-select": "5.1.0",
+    "sharp": "^0.32.6",
+    "slate-serializers": "0.4.1",
+    "tailwindcss": "^3.3.3"
+  },
+  "devDependencies": {
+    "prettier": "^3.0.2",
+    "prettier-plugin-astro": "^0.11.1",
+    "prettier-plugin-tailwindcss": "^0.5.4"
+  }
+}

astro/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

astro/src/components/Content.astro

@@ -0,0 +1,27 @@
+---
+import { Image } from "@astrojs/image/components";
+import { getContentArray } from "@/utils/helpers";
+import { getImageSrc } from "@/utils/payload";
+const { content } = Astro.props;
+const contentArray = getContentArray(content);
+---
+
+<div>
+  {
+    contentArray.map((value) => {
+      if (typeof value === "string") {
+        return <article set:html={value} />;
+      } else {
+        return (
+          <Image
+            src={getImageSrc(value.src)}
+            width={value.width}
+            height={value.height}
+            format="webp"
+            alt="hallo"
+          />
+        );
+      }
+    })
+  }
+</div>

astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

astro/src/layouts/Layout.astro

@@ -0,0 +1,36 @@
+---
+
+export interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+    <style>
+      @font-face {
+        font-family: "Plex";
+        src: url("/fonts/Plex-Regular.woff2") format("woff2");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Plex";
+        src: url("/fonts/Plex-Bold.woff2") format("woff2");
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+      }
+    </style>
+  </head>
+  <body class="mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200">
+    <slot />
+  </body>
+</html>

astro/src/pages/index.astro

@@ -0,0 +1,45 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getPosts } from "@/utils/payload";
+
+const posts = await getPosts();
+---
+
+<Layout title="Astroad">
+  <main class="" >
+    <h1 class="font-bold text-5xl">Astroad</h1>
+    <p class="mt-3 text-lg">
+      Astroad is a pre-configured setup for Astro and Payloadcms that makes it
+      easy to get started with building your website. With Astroad, you'll have
+      a complete development environment that you can run locally using Docker.
+      This makes it easy to test and develop your website before deploying it to
+      a production environment.
+      <br />
+       When you're ready to deploy the website on your own server, Astrotus
+      comes with a production environment that requires the use of Traefik as a
+      reverse proxy. This setup provides a secure and scalable production
+      environment for your website.
+    </p>
+    <h2 class="mt-6 font-bold text-2xl">Posts</h2>
+    <div class="flex gap-4 mt-3 flex-wrap">
+      {
+        posts.length > 0 ? (
+          posts.map((post) => (
+            <a href={`/posts/${post.id}/`}>
+              <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
+                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
+                {post.publishedDate && (
+                  <p>
+                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
+                  </p>
+                )}
+              </article>
+            </a>
+          ))
+        ) : (
+          <p>Add Posts in Payloadcms</p>
+        )
+      }
+    </div>
+  </main>
+</Layout>

astro/src/pages/posts/[id].astro

@@ -0,0 +1,31 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Content from "@/components/Content.astro";
+import type { Post } from "@/types";
+import { getPost, getPosts } from "@/utils/payload";
+
+export async function getStaticPaths() {
+  const posts = await getPosts();
+  const paths = posts.map((post: Post) => ({
+    params: { id: post.id },
+  }));
+  return paths;
+}
+
+const { id } = Astro.params;
+const post = id && (await getPost(id));
+---
+
+{
+  post ? (
+    <Layout title={`Astroad | ${post.title!}`}>
+      <div class="space-y-3 my-3">
+        <a href="/">BACK</a>
+        <h1 class="font-bold text-5xl" transition:name=`title-${post.id}`>{post.title}</h1>
+        {post.content && <Content content={post.content} />}
+      </div>
+    </Layout>
+  ) : (
+    <div>404</div>
+  )
+}

astro/src/types.ts

@@ -0,0 +1,54 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * This file was automatically generated by Payload.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+export interface Config {
+  collections: {
+    posts: Post;
+    users: User;
+    media: Media;
+  };
+  globals: {};
+}
+export interface Post {
+  id: string;
+  title?: string;
+  hallo?: string;
+  publishedDate?: string;
+  content?: {
+    [k: string]: unknown;
+  }[];
+  status?: 'draft' | 'published';
+  updatedAt: string;
+  createdAt: string;
+}
+export interface User {
+  id: string;
+  name?: string;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  salt?: string;
+  hash?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+  password?: string;
+}
+export interface Media {
+  id: string;
+  alt?: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  width?: number;
+  height?: number;
+}

astro/src/utils/helpers.ts

@@ -0,0 +1,41 @@
+import { payloadSlateToDomConfig, slateToHtml } from "slate-serializers";
+import { Element } from "domhandler";
+
+export const 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;
+};

astro/src/utils/payload.ts

@@ -0,0 +1,13 @@
+import type { Post } from "@/types";
+
+const url = import.meta.env.DEV
+  ? "http://payload:3001"
+  : `${import.meta.env.PAYLOAD_URL}`;
+
+export const getPosts = async () =>
+  (await (await fetch(`${url}/api/posts`)).json()).docs as Post[];
+
+export const getPost = async (id: string) =>
+  (await (await fetch(`${url}/api/posts/${id}`)).json()) as Post;
+
+export const getImageSrc = (src: string) => `${url}/media/${src}`;

astro/tailwind.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    fontFamily: {
+      plex: ["Plex", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        gray: {
+          DEFAULT: "#111111",
+          light: "#888888",
+          dark: "#222222",
+        },
+      },
+    },
+  },
+  safelist: [],
+  plugins: [],
+};

astro/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "types": ["@astrojs/image/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

docker-compose-dev.yml

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

docker-compose-prod.yml

@@ -0,0 +1,34 @@
+services:
+  astro:
+    build:
+      context: astro
+      target: prod
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.${NAME}-astro.rule=Host(`${ASTRO_HOST}`)"
+      - "traefik.http.routers.${NAME}-astro.entrypoints=https"
+      - "traefik.http.routers.${NAME}-astro.tls.certresolver=httpresolver"
+      - traefik.docker.network=traefik_network
+    networks:
+      - traefik_network
+
+  payload:
+    build:
+      context: payload
+      target: prod
+    volumes:
+      - ./data/media:/prod/dist/media
+    environment:
+      - REPOSITORY=${REPOSITORY}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.${NAME}-payload.rule=Host(`${PAYLOAD_HOST}`)
+      - traefik.http.routers.${NAME}-payload.entrypoints=https
+      - traefik.http.routers.${NAME}-payload.tls.certresolver=httpresolver
+      - traefik.docker.network=traefik_network
+    networks:
+      - traefik_network
+
+networks:
+  traefik_network:
+    external: true

docker-compose.yml

@@ -0,0 +1,46 @@
+services:
+  astro:
+    container_name: ${NAME}-astro
+    restart: unless-stopped
+    build:
+      context: astro
+    networks:
+      - front
+    depends_on:
+      - payload
+
+  payload:
+    container_name: ${NAME}-payload
+    restart: unless-stopped
+    build:
+      context: payload
+    environment:
+      NAME: ${NAME}
+      PAYLOAD_URL: ${PAYLOAD_URL}
+      PAYLOAD_PORT: ${PAYLOAD_PORT}
+      PAYLOAD_SECRET: ${PAYLOAD_SECRET}
+      MONGODB_URI: ${MONGODB_URI}
+      TOKEN: ${TOKEN}
+    networks:
+      - front
+      - back
+    depends_on:
+      - mongo
+
+  mongo:
+    container_name: ${NAME}-mongo
+    image: mongo:6.0.5
+    restart: unless-stopped
+    volumes:
+      - ./data/mongo:/data/db
+    command:
+      - --storageEngine=wiredTiger
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${MONGODB_USER}
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGODB_PW}
+    networks:
+      - back
+
+networks:
+  front:
+  back:

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "astroad",
+  "description": "A pre-configured setup for easy website development with Astro and Payload CMS using Docker.",
+  "license": "MIT",
+  "version": "1.1",
+  "scripts": {
+    "dev": "docker compose -f docker-compose.yml -f docker-compose-dev.yml  up --build",
+    "prod": "docker compose -f docker-compose.yml -f docker-compose-prod.yml up -d --build",
+    "stop": "docker compose -f docker-compose.yml -f docker-compose-dev.yml down && docker compose -f docker-compose.yml -f docker-compose-prod.yml down"
+  }
+}

payload/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+Dockerfile

payload/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.env
+build
+dist
+src/media

payload/Dockerfile

@@ -0,0 +1,29 @@
+FROM node:lts as base
+WORKDIR /base
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+COPY . .
+
+FROM base AS dev
+ENV NODE_ENV=development
+EXPOSE 3001
+CMD ["yarn","dev"]
+
+
+FROM base AS build
+ENV NODE_ENV=production
+WORKDIR /build
+COPY --from=base /base .
+RUN yarn build
+
+FROM build as prod
+ENV NODE_ENV=production
+WORKDIR /prod
+COPY package*.json  .
+RUN yarn install --production
+
+COPY --from=build /build/tsconfig.json ./tsconfig.json
+COPY --from=build /build/dist ./dist
+COPY --from=build /build/build ./build
+EXPOSE 3000
+CMD ["yarn", "serve"]

payload/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "ext": "ts",
+  "ignore": ["src/types.ts"],
+  "exec": "yarn generate:types && ts-node src/server.ts"
+}

payload/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "astroad",
+  "description": "Astroad - Payload",
+  "version": "1.1",
+  "main": "dist/server.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
+    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts node -r tsconfig-paths/register node_modules/payload/dist/bin/index.js build",
+    "build:server": "tsc",
+    "build": "yarn build:payload && yarn build:server",
+    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js node -r tsconfig-paths/register dist/server.js",
+    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts node -r tsconfig-paths/register node_modules/payload/dist/bin/index.js generate:types"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.3.1",
+    "express": "^4.17.1",
+    "payload": "^1.15.6",
+    "tsconfig-paths": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.18",
+    "nodemon": "^3.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6"
+  }
+}

payload/src/collections/Media.ts

@@ -0,0 +1,25 @@
+import { CollectionConfig } from "payload/types";
+
+export const Media: CollectionConfig = {
+  slug: "media",
+  admin: {},
+  access: {
+    read: (): boolean => true,
+    create: () => true,
+    update: () => true,
+  },
+  upload: {
+    staticURL: "/media",
+    staticDir: "media",
+    mimeTypes: ["image/*"],
+  },
+
+  fields: [
+    {
+      name: "alt",
+      type: "text",
+    },
+  ],
+};
+
+export default Media;

payload/src/collections/Posts.ts

@@ -0,0 +1,98 @@
+import { CollectionConfig } from "payload/types";
+const Posts: CollectionConfig = {
+  slug: "posts",
+  admin: {
+    defaultColumns: ["title", "author", "status"],
+    useAsTitle: "title",
+  },
+  access: {
+    read: () => true,
+    create: () => true,
+    update: () => true,
+  },
+  hooks: {
+    afterChange: [
+      async () => {
+        console.log(process.env.TOKEN);
+
+        try {
+          process.env.NODE_ENV !== "development" &&
+            console.log(
+              await fetch(
+                `https://api.github.com/repos/${process.env.REPOSITORY}/dispatches`,
+                {
+                  method: "POST",
+                  headers: {
+                    Accept: "application/vnd.github.everest-preview+json",
+                    Authorization: `token ${process.env.TOKEN}`,
+                  },
+                  body: JSON.stringify({
+                    event_type: "payload_update",
+                  }),
+                }
+              )
+            );
+        } catch (e) {
+          console.log(e);
+        }
+      },
+    ],
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+    },
+    {
+      name: "hallo",
+      type: "text",
+    },
+    {
+      name: "publishedDate",
+      type: "date",
+    },
+
+    {
+      name: "content",
+      type: "richText",
+      admin: {
+        elements: ["h2", "h3", "h4", "link", "ol", "ul", "upload"],
+        leaves: ["bold", "italic", "underline"],
+        upload: {
+          collections: {
+            media: {
+              fields: [
+                {
+                  name: "imagel",
+                  type: "upload",
+                  relationTo: "media",
+                  required: true,
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    {
+      name: "status",
+      type: "select",
+      options: [
+        {
+          value: "draft",
+          label: "Draft",
+        },
+        {
+          value: "published",
+          label: "Published",
+        },
+      ],
+      defaultValue: "draft",
+      admin: {
+        position: "sidebar",
+      },
+    },
+  ],
+};
+
+export default Posts;

payload/src/collections/Users.ts

@@ -0,0 +1,21 @@
+import { CollectionConfig } from 'payload/types';
+
+const Users: CollectionConfig = {
+  slug: 'users',
+  auth: true,
+  admin: {
+    useAsTitle: 'email',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    // Email added by default
+    {
+      name: 'name',
+      type: 'text',
+    }
+  ],
+};
+
+export default Users;

payload/src/payload.config.ts

@@ -0,0 +1,26 @@
+import { buildConfig } from "payload/config";
+import path from "path";
+import Posts from "@/collections/Posts";
+import Users from "@/collections/Users";
+import Media from "@/collections/Media";
+
+export default buildConfig({
+  serverURL: process.env.PAYLOAD_URL,
+  admin: {
+    user: Users.slug,
+    webpack: (config) => ({
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@": path.resolve(__dirname, "./"),
+        },
+      },
+    }),
+  },
+  collections: [Posts, Users, Media],
+  typescript: {
+    outputFile: path.resolve("/", "types.ts"),
+  },
+});

payload/src/server.ts

@@ -0,0 +1,21 @@
+import express from "express";
+import payload from "payload";
+
+require("dotenv").config();
+const app = express();
+
+app.get("/", (_, res) => {
+  res.redirect("/admin");
+});
+
+payload.init({
+  secret: process.env.PAYLOAD_SECRET,
+  mongoURL: process.env.MONGODB_URI,
+  express: app,
+  onInit: () => {
+    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
+  },
+});
+
+app.use("/media", express.static("media"));
+app.listen(process.env.PAYLOAD_PORT);

payload/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*", "./dist/*", "./dist/src/*"]
+    },
+    "jsx": "react"
+  },
+  "ts-node": {
+    "transpileOnly": true,
+    "require": ["tsconfig-paths/register"]
+  }
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": ["*.ts"],
+  "references": [
+    {
+      "path": "./astro/tsconfig.json"
+    },
+    {
+      "path": "./payload/tsconfig.json"
+    }
+  ]
+}