Clone starter

apps/api/.dockerignore

@@ -0,0 +1 @@
+ **/node_modules

apps/api/.eslintrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+  rules: {},
+};

apps/api/.gitignore

@@ -0,0 +1,169 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+.vscode/*.code-snippets
+
+# Ignore code-workspaces
+*.code-workspace
+
+# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
+
+# Local media files
+media

apps/api/Dockerfile

@@ -0,0 +1,39 @@
+FROM node:18-alpine as base
+RUN npm i -g pnpm turbo
+
+FROM base AS pruner
+WORKDIR /app
+COPY . .
+RUN turbo prune --scope=@turbopress/api --docker
+
+# remove all empty node_modules folder structure
+RUN rm -rf /app/out/full/*/*/node_modules
+
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+RUN apk update
+WORKDIR /app
+
+# Add lockfile and package.json's of isolated subworkspace
+COPY .gitignore .gitignore
+COPY --from=pruner /app/out/json/ .
+RUN pnpm install
+
+# Build the project and its dependencies
+COPY --from=pruner /app/out/full/ .
+ENV PAYLOAD_CONFIG_PATH=src/payload.config.ts
+RUN pnpm build:api
+
+# Run App
+FROM base as runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PAYLOAD_CONFIG_PATH=dist/payload.config.js
+COPY --from=builder /app/apps/api/package.json .
+RUN pnpm install --prod
+COPY --from=builder /app/apps/api/dist ./dist
+COPY --from=builder /app/apps/api/build ./build
+
+EXPOSE 3000
+
+CMD ["node", "dist/server.js"]

apps/api/README.md

@@ -0,0 +1,19 @@
+# api
+
+This project was created using create-payload-app using the blog template.
+
+## How to Use
+
+`yarn dev` will start up your application and reload on any changes.
+
+### Docker
+
+If you have docker and docker-compose installed, you can run `docker-compose up`
+
+To build the docker image, run `docker build -t my-tag -f Dockerfile ../..`
+
+Ensure you are passing all needed environment variables when starting up your container via `--env-file` or setting them with your deployment.
+
+The 3 typical env vars will be `MONGODB_URI`, `PAYLOAD_SECRET`, and `PAYLOAD_CONFIG_PATH`
+
+`docker run --env-file .env -p 3000:3000 my-tag`

apps/api/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": ["src"],
+  "ext": "ts",
+  "exec": "ts-node src/server.ts"
+}

apps/api/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@turbopress/api",
+  "description": "Headless CMS based on Payload",
+  "version": "1.0.0",
+  "main": "dist/server.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nodemon",
+    "build:payload": "payload build",
+    "build:server": "tsc",
+    "build": "pnpm copyfiles && pnpm build:payload && pnpm build:server",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
+    "generate:types": "payload generate:types",
+    "lint": "eslint  \"./src/**/*.{js,ts}\" --fix",
+    "serve": "PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js"
+  },
+  "dependencies": {
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "payload": "latest",
+    "@payloadcms/plugin-seo": "latest",
+    "@payloadcms/plugin-cloud-storage": "latest",
+    "@aws-sdk/client-s3": "latest",
+    "@aws-sdk/lib-storage": "latest"
+  },
+  "devDependencies": {
+    "eslint": "latest",
+    "@types/express": "^4.17.9",
+    "copyfiles": "^2.4.1",
+    "nodemon": "^2.0.6",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.8.4",
+    "webpack-hot-middleware": "^2.25.4",
+    "eslint-config-custom": "*"
+  }
+}

apps/api/src/blocks/Menu.ts

@@ -0,0 +1,128 @@
+import payload from "payload";
+import { Block } from "payload/types";
+import Pages from "../collections/Pages";
+import linkField from "../fields/linkField";
+
+export const Menu: Block = {
+  slug: "menu",
+  interfaceName: "Menu",
+  fields: [
+    {
+      name: "type",
+      type: "select",
+      options: ["default"],
+      required: true,
+      defaultValue: "default",
+    },
+    {
+      name: "menus",
+      type: "array",
+      fields: [
+        {
+          name: "mainMenu",
+          type: "group",
+          interfaceName: "MainMenu",
+          fields: [
+            {
+              type: "row",
+              fields: [
+                {
+                  name: "type",
+                  type: "radio",
+                  options: [
+                    {
+                      label: "Internal link",
+                      value: "reference",
+                    },
+                    {
+                      label: "Custom URL",
+                      value: "custom",
+                    },
+                    {
+                      label: "None",
+                      value: "none",
+                    },
+                  ],
+                  defaultValue: "reference",
+                  admin: {
+                    layout: "horizontal",
+                    width: "50%",
+                  },
+                },
+                {
+                  name: "newTab",
+                  label: "Open in new tab",
+                  type: "checkbox",
+                  admin: {
+                    condition: (_, siblingData) => siblingData?.type != "none",
+                    width: "50%",
+                    style: {
+                      alignSelf: "flex-end",
+                    },
+                  },
+                },
+                {
+                  name: "reference",
+                  label: "Document to link to",
+                  type: "relationship",
+                  relationTo: [Pages.slug],
+                  required: true,
+                  maxDepth: 0,
+                  admin: {
+                    condition: (_, siblingData) =>
+                      siblingData?.type === "reference",
+                    width: "50%",
+                  },
+                  hooks: {
+                    afterRead: [
+                      async ({ value, siblingData }) => {
+                        if (value && siblingData.type === "reference") {
+                          const id = value.value;
+                          const pages = await payload.find({
+                            collection: "pages",
+                            where: {
+                              id: { equals: id },
+                            },
+                            depth: 0,
+                          });
+
+                          if (pages.docs[0]?.slug)
+                            siblingData.url = pages.docs[0].slug;
+                        }
+                      },
+                    ],
+                  },
+                },
+                {
+                  name: "url",
+                  label: "Custom URL",
+                  type: "text",
+                  required: true,
+                  admin: {
+                    condition: (_, siblingData) =>
+                      siblingData?.type === "custom",
+                    width: "50%",
+                  },
+                },
+                {
+                  name: "label",
+                  label: "Label",
+                  type: "text",
+                  required: true,
+                  admin: {
+                    width: "50%",
+                  },
+                },
+              ],
+            },
+            {
+              name: "subMenu",
+              type: "array",
+              fields: [linkField()],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

apps/api/src/blocks/PageContent.ts

@@ -0,0 +1,17 @@
+import { Block } from "payload/types";
+
+export const PageContent: Block = {
+  slug: "pageContent",
+  interfaceName: "PageContent",
+  fields: [
+    {
+      name: "description",
+      type: "textarea",
+      defaultValue:
+        "This block will display the content of the page (if any). Please edit the original page change the value.",
+      admin: {
+        readOnly: true,
+      },
+    },
+  ],
+};

apps/api/src/blocks/PageList.ts

@@ -0,0 +1,52 @@
+import { Block } from "payload/types";
+import Categories from "../collections/Categories";
+import { PagesField } from "../collections/Pages";
+import Tags from "../collections/Tags";
+
+const PageListField = {
+  numberOfItems: "numberOfItems",
+  filterByCategories: "filterByCategories",
+  filterByTags: "filterByTags",
+  sortBy: "sortBy",
+  pages: "pages",
+};
+
+type PageListField = (typeof PageListField)[keyof typeof PageListField];
+
+export const PageList: Block = {
+  slug: "pageList",
+  interfaceName: "PageList",
+  fields: [
+    {
+      name: PageListField.numberOfItems,
+      type: "number",
+      defaultValue: 5,
+    },
+    {
+      name: PageListField.filterByCategories,
+      type: "relationship",
+      relationTo: [Categories.slug],
+      maxDepth: 0,
+      hasMany: true,
+    },
+    {
+      name: PageListField.filterByTags,
+      type: "relationship",
+      relationTo: [Tags.slug],
+      hasMany: true,
+      maxDepth: 0,
+    },
+    {
+      name: PageListField.sortBy,
+      type: "select",
+      options: [
+        PagesField.title,
+        PagesField.createdAt,
+        PagesField.updatedAt,
+        `-${PagesField.title}`,
+        `-${PagesField.createdAt}`,
+        `-${PagesField.updatedAt}`,
+      ],
+    },
+  ],
+};

apps/api/src/blocks/ReusableContent.ts

@@ -0,0 +1,15 @@
+import { Block } from "payload/types";
+import Contents from "../collections/Contents";
+
+export const ReusableContent: Block = {
+  slug: "reusableContent",
+  interfaceName: "ReusableContent",
+  fields: [
+    {
+      name: "reference",
+      type: "relationship",
+      // maxDepth: 0,
+      relationTo: [Contents.slug],
+    },
+  ],
+};

apps/api/src/blocks/SiteTitle.ts

@@ -0,0 +1,9 @@
+import { Block } from "payload/types";
+
+export const SiteTitle: Block = {
+  slug: "siteTitle",
+  interfaceName: "SiteTitle",
+  fields: [
+    { name: "siteName", type: "text", required: true, admin: { width: "50%" } },
+  ],
+};

apps/api/src/collections/Categories.ts

@@ -0,0 +1,37 @@
+import type { CollectionConfig } from "payload/types";
+
+const CategoriesField = {
+  name: "name",
+  slug: "slug",
+};
+
+type CategoriesField = (typeof CategoriesField)[keyof typeof CategoriesField];
+
+const Categories: CollectionConfig = {
+  slug: "categories",
+  admin: {
+    useAsTitle: CategoriesField.name,
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: CategoriesField.name,
+      type: "text",
+      required: true,
+    },
+    {
+      name: CategoriesField.slug,
+      type: "text",
+      required: true,
+      unique: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+  ],
+  timestamps: false,
+};
+
+export default Categories;

apps/api/src/collections/Contents.ts

@@ -0,0 +1,48 @@
+import { CollectionConfig } from "payload/types";
+import { Menu } from "../blocks/Menu";
+import { PageContent } from "../blocks/PageContent";
+import { PageList } from "../blocks/PageList";
+import { SiteTitle } from "../blocks/SiteTitle";
+
+const ContentsField = {
+  name: "name",
+  slug: "slug",
+  description: "description",
+};
+type ContentsField = (typeof ContentsField)[keyof typeof ContentsField];
+
+const Contents: CollectionConfig = {
+  slug: "contents",
+  access: {
+    read: () => true,
+  },
+  admin: {
+    useAsTitle: ContentsField.name,
+  },
+  fields: [
+    {
+      name: ContentsField.name,
+      type: "text",
+      required: true,
+    },
+    {
+      name: ContentsField.slug,
+      type: "text",
+      unique: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: ContentsField.description,
+      type: "text",
+    },
+    {
+      name: "blocks",
+      type: "blocks",
+      blocks: [Menu, PageContent, PageList, SiteTitle],
+    },
+  ],
+};
+
+export default Contents;

apps/api/src/collections/Layouts.ts

@@ -0,0 +1,79 @@
+import { CollectionConfig } from "payload/types";
+import { Menu } from "../blocks/Menu";
+import { PageContent } from "../blocks/PageContent";
+import { PageList } from "../blocks/PageList";
+import { ReusableContent } from "../blocks/ReusableContent";
+import { SiteTitle } from "../blocks/SiteTitle";
+
+const LayoutsField = {
+  name: "name",
+  slug: "slug",
+  description: "description",
+};
+type LayoutsField = (typeof LayoutsField)[keyof typeof LayoutsField];
+
+const blocks = [ReusableContent];
+
+const Layouts: CollectionConfig = {
+  slug: "layouts",
+  access: {
+    read: () => true,
+  },
+  admin: {
+    useAsTitle: LayoutsField.name,
+  },
+  fields: [
+    {
+      name: LayoutsField.name,
+      type: "text",
+      required: true,
+    },
+    {
+      name: LayoutsField.slug,
+      type: "text",
+      unique: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: LayoutsField.description,
+      type: "text",
+    },
+    {
+      name: "header",
+      type: "group",
+      fields: [
+        {
+          name: "blocks",
+          type: "blocks",
+          blocks: [...blocks, Menu, SiteTitle],
+        },
+      ],
+    },
+    {
+      name: "body",
+      type: "group",
+      fields: [
+        {
+          name: "blocks",
+          type: "blocks",
+          blocks: [...blocks, PageContent, PageList],
+        },
+      ],
+    },
+    {
+      name: "footer",
+      type: "group",
+      fields: [
+        {
+          name: "blocks",
+          type: "blocks",
+          blocks: blocks,
+        },
+      ],
+    },
+  ],
+};
+
+export default Layouts;

apps/api/src/collections/Media.ts

@@ -0,0 +1,29 @@
+import type { CollectionConfig } from "payload/types";
+
+const Media: CollectionConfig = {
+  slug: "media",
+  access: {
+    read: () => true,
+  },
+  upload: {
+    disableLocalStorage: true,
+    adminThumbnail: "thumbnail",
+    imageSizes: [
+      {
+        height: 400,
+        width: 400,
+        crop: "center",
+        name: "thumbnail",
+      },
+      {
+        width: 900,
+        height: 450,
+        crop: "center",
+        name: "sixteenByNineMedium",
+      },
+    ],
+  },
+  fields: [],
+};
+
+export default Media;

apps/api/src/collections/Pages.ts

@@ -0,0 +1,113 @@
+import type { CollectionConfig } from "payload/types";
+
+export const PagesField = {
+  title: "title",
+  slug: "slug",
+  author: "author",
+  publishedDate: "publishedDate",
+  categories: "categories",
+  tags: "tags",
+  content: "content",
+  status: "status",
+  layout: "layout",
+  createdAt: "createdAt",
+  updatedAt: "updatedAt",
+};
+
+type PagesField = (typeof PagesField)[keyof typeof PagesField];
+
+const PagesFieldStatus = {
+  Draft: "Draft",
+  Published: "Published",
+};
+
+type PagesFieldStatus =
+  (typeof PagesFieldStatus)[keyof typeof PagesFieldStatus];
+
+const Pages: CollectionConfig = {
+  slug: "pages",
+  admin: {
+    defaultColumns: [
+      PagesField.title,
+      PagesField.slug,
+      PagesField.author,
+      PagesField.categories,
+      PagesField.tags,
+      PagesField.status,
+    ],
+    useAsTitle: PagesField.title,
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: PagesField.title,
+      type: "text",
+      required: true,
+    },
+    {
+      name: PagesField.slug,
+      type: "text",
+      required: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.author,
+      type: "relationship",
+      relationTo: "users",
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.publishedDate,
+      type: "date",
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.categories,
+      type: "relationship",
+      relationTo: "categories",
+      hasMany: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.tags,
+      type: "relationship",
+      relationTo: "tags",
+      hasMany: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.status,
+      type: "select",
+      options: Object.entries(PagesFieldStatus).map((e) => {
+        return { label: e[0], value: e[1] };
+      }),
+      defaultValue: PagesFieldStatus.Draft,
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: PagesField.layout,
+      type: "relationship",
+      relationTo: "layouts",
+    },
+    {
+      name: PagesField.content,
+      type: "richText",
+    },
+  ],
+};
+
+export default Pages;

apps/api/src/collections/Tags.ts

@@ -0,0 +1,37 @@
+import type { CollectionConfig } from "payload/types";
+
+const TagsField = {
+  name: "name",
+  slug: "slug",
+};
+
+type TagsField = (typeof TagsField)[keyof typeof TagsField];
+
+const Tags: CollectionConfig = {
+  slug: "tags",
+  admin: {
+    useAsTitle: TagsField.name,
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: TagsField.name,
+      type: "text",
+      required: true,
+    },
+    {
+      name: TagsField.slug,
+      type: "text",
+      required: true,
+      unique: true,
+      admin: {
+        position: "sidebar",
+      },
+    },
+  ],
+  timestamps: false,
+};
+
+export default Tags;

apps/api/src/collections/Users.ts

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

apps/api/src/fields/enableField.ts

@@ -0,0 +1,15 @@
+import { SelectField } from "payload/types";
+
+function enableField(fieldOverrides?: Partial<SelectField>): SelectField {
+  return {
+    label: "Enable",
+    name: "enable",
+    type: "select",
+    options: ["Yes", "No"],
+    defaultValue: "Yes",
+    required: true,
+    ...fieldOverrides,
+  };
+}
+
+export default enableField;

apps/api/src/fields/linkField.ts

@@ -0,0 +1,100 @@
+import payload from "payload";
+import { GroupField } from "payload/types";
+
+function linkField(fieldOverrides?: Partial<GroupField>): GroupField {
+  return {
+    name: "link",
+    type: "group",
+    interfaceName: "Link",
+    fields: [
+      {
+        type: "row",
+        fields: [
+          {
+            name: "type",
+            type: "radio",
+            options: [
+              {
+                label: "Internal link",
+                value: "reference",
+              },
+              {
+                label: "Custom URL",
+                value: "custom",
+              },
+            ],
+            defaultValue: "reference",
+            admin: {
+              layout: "horizontal",
+              width: "50%",
+            },
+          },
+          {
+            name: "newTab",
+            label: "Open in new tab",
+            type: "checkbox",
+            admin: {
+              width: "50%",
+              style: {
+                alignSelf: "flex-end",
+              },
+            },
+          },
+          {
+            name: "reference",
+            label: "Document to link to",
+            type: "relationship",
+            relationTo: ["pages"],
+            required: true,
+            maxDepth: 0,
+            admin: {
+              condition: (_, siblingData) => siblingData?.type === "reference",
+              width: "50%",
+            },
+            hooks: {
+              afterRead: [
+                async ({ value, siblingData }) => {
+                  if (value && siblingData.type === "reference") {
+                    const id = value.value;
+                    const pages = await payload.find({
+                      collection: "pages",
+                      where: {
+                        id: { equals: id },
+                      },
+                      depth: 0,
+                    });
+
+                    if (pages.docs[0]?.slug)
+                      if (pages.docs[0]) siblingData.url = pages.docs[0].slug;
+                  }
+                },
+              ],
+            },
+          },
+          {
+            name: "url",
+            label: "Custom URL",
+            type: "text",
+            required: true,
+            admin: {
+              condition: (_, siblingData) => siblingData?.type === "custom",
+              width: "50%",
+            },
+          },
+          {
+            name: "label",
+            label: "Label",
+            type: "text",
+            required: true,
+            admin: {
+              width: "50%",
+            },
+          },
+        ],
+      },
+    ],
+    ...fieldOverrides,
+  };
+}
+
+export default linkField;

apps/api/src/payload.config.ts

@@ -0,0 +1,59 @@
+import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
+import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import seo from "@payloadcms/plugin-seo";
+import { GenerateTitle } from "@payloadcms/plugin-seo/dist/types";
+import path from "path";
+import { buildConfig } from "payload/config";
+import Categories from "./collections/Categories";
+import Contents from "./collections/Contents";
+import Layouts from "./collections/Layouts";
+import Media from "./collections/Media";
+import Pages from "./collections/Pages";
+import Tags from "./collections/Tags";
+import Users from "./collections/Users";
+const generateTitle: GenerateTitle = ({ slug, doc }) => {
+  let title = "TurboPress";
+  if (slug == "pages") {
+    const page = doc as any;
+    return (title = `TurboPress - ${page?.title?.value}`);
+  }
+  return title;
+};
+
+const adapter = s3Adapter({
+  config: {
+    credentials: {
+      accessKeyId: process.env.S3_ACCESS_KEY_ID,
+      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
+    },
+    region: process.env.S3_REGION,
+    endpoint: process.env.S3_ENDPOINT,
+  },
+  bucket: process.env.S3_BUCKET,
+});
+
+export default buildConfig({
+  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL ?? "http://localhost:3000",
+  admin: {
+    user: Users.slug,
+  },
+  collections: [Categories, Contents, Layouts, Media, Pages, Tags, Users],
+  typescript: {
+    outputFile: path.join(__dirname, "../types", "payload.ts"),
+  },
+  plugins: [
+    seo({
+      collections: ["pages"],
+      uploadsCollection: "media",
+      generateTitle: generateTitle,
+    }),
+    cloudStorage({
+      collections: {
+        media: {
+          adapter: adapter,
+        },
+      },
+    }),
+  ],
+  cors: "*",
+});

apps/api/src/server.ts

@@ -0,0 +1,30 @@
+import express from "express";
+import payload from "payload";
+
+const app = express();
+
+// Redirect root to Admin panel
+app.get("/", (_, res) => {
+  res.redirect("/admin");
+});
+
+const start = async () => {
+  // Initialize Payload
+  await payload.init({
+    secret: process.env.PAYLOAD_SECRET,
+    mongoURL: process.env.MONGODB_URI,
+    express: app,
+    onInit: async () => {
+      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
+    },
+    mongoOptions: {
+      dbName: process.env.DB_NAME,
+    },
+  });
+
+  // Add your own express routes here
+
+  app.listen(process.env.PAYLOAD_PORT ?? 3000);
+};
+
+start();

apps/api/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react",
+    "paths": {
+      "payload/generated-types": ["./types/payload.ts"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "build"],
+  "ts-node": {
+    "transpileOnly": true,
+    "swc": true
+  }
+}

apps/api/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./payload";
+export * from "./rich-text-export";

apps/api/types/payload.ts

@@ -0,0 +1,200 @@
+/* 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: {
+    categories: Category;
+    contents: Content;
+    layouts: Layout;
+    media: Media;
+    pages: Page;
+    tags: Tag;
+    users: User;
+  };
+  globals: {};
+}
+export interface Category {
+  id: string;
+  name: string;
+  slug: string;
+}
+export interface Content {
+  id: string;
+  name: string;
+  slug?: string;
+  description?: string;
+  blocks?: (Menu | PageContent | PageList | SiteTitle)[];
+  updatedAt: string;
+  createdAt: string;
+}
+export interface Menu {
+  type: 'default';
+  menus?: {
+    mainMenu: MainMenu;
+    id?: string;
+  }[];
+  id?: string;
+  blockName?: string;
+  blockType: 'menu';
+}
+export interface MainMenu {
+  type?: 'reference' | 'custom' | 'none';
+  newTab?: boolean;
+  reference: {
+    value: string | Page;
+    relationTo: 'pages';
+  };
+  url: string;
+  label: string;
+  subMenu?: {
+    link: Link;
+    id?: string;
+  }[];
+}
+export interface Page {
+  id: string;
+  title: string;
+  slug: string;
+  author?: string | User;
+  publishedDate?: string;
+  categories?: string[] | Category[];
+  tags?: string[] | Tag[];
+  status?: 'Draft' | 'Published';
+  layout?: string | Layout;
+  content?: {
+    [k: string]: unknown;
+  }[];
+  meta?: {
+    title?: string;
+    description?: string;
+    image?: string | Media;
+  };
+  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 Tag {
+  id: string;
+  name: string;
+  slug: string;
+}
+export interface Layout {
+  id: string;
+  name: string;
+  slug?: string;
+  description?: string;
+  header?: {
+    blocks?: (ReusableContent | Menu | SiteTitle)[];
+  };
+  body?: {
+    blocks?: (ReusableContent | PageContent | PageList)[];
+  };
+  footer?: {
+    blocks?: ReusableContent[];
+  };
+  updatedAt: string;
+  createdAt: string;
+}
+export interface ReusableContent {
+  reference?: {
+    value: string | Content;
+    relationTo: 'contents';
+  };
+  id?: string;
+  blockName?: string;
+  blockType: 'reusableContent';
+}
+export interface SiteTitle {
+  siteName: string;
+  id?: string;
+  blockName?: string;
+  blockType: 'siteTitle';
+}
+export interface PageContent {
+  description?: string;
+  id?: string;
+  blockName?: string;
+  blockType: 'pageContent';
+}
+export interface PageList {
+  numberOfItems?: number;
+  filterByCategories?:
+    | {
+        value: string;
+        relationTo: 'categories';
+      }[]
+    | {
+        value: Category;
+        relationTo: 'categories';
+      }[];
+  filterByTags?:
+    | {
+        value: string;
+        relationTo: 'tags';
+      }[]
+    | {
+        value: Tag;
+        relationTo: 'tags';
+      }[];
+  sortBy?: 'title' | 'createdAt' | 'updatedAt' | '-title' | '-createdAt' | '-updatedAt';
+  id?: string;
+  blockName?: string;
+  blockType: 'pageList';
+}
+export interface Media {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  width?: number;
+  height?: number;
+  sizes?: {
+    thumbnail?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+    sixteenByNineMedium?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+  };
+}
+export interface Link {
+  type?: 'reference' | 'custom';
+  newTab?: boolean;
+  reference: {
+    value: string | Page;
+    relationTo: 'pages';
+  };
+  url: string;
+  label: string;
+}

apps/api/types/rich-text-export.ts

@@ -0,0 +1,22 @@
+import type {
+  RichTextElement,
+  RichTextLeaf,
+} from "payload/dist/fields/config/types";
+import type { RichTextCustomElement, RichTextCustomLeaf } from "payload/types";
+
+type DefaultRichTextLeaf = Exclude<RichTextLeaf, RichTextCustomLeaf>;
+export type FormattedText = {
+  [key in DefaultRichTextLeaf]?: boolean;
+} & {
+  text: string;
+};
+
+type DefaultRichTextElement =
+  | Exclude<RichTextElement, RichTextCustomElement>
+  | "li"
+  | "quote";
+export type FormattedElement = {
+  type: DefaultRichTextElement;
+  url?: string;
+  children: FormattedText[];
+};

apps/web/.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  extends: ["custom", "plugin:astro/recommended"],
+  overrides: [
+    {
+      files: ["*.astro"],
+      parser: "astro-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".astro"],
+      },
+      rules: {
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+  ],
+};

apps/web/.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*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/web/README.md

@@ -0,0 +1,13 @@
+# Astro with Tailwind
+
+```
+npm create astro@latest -- --template with-tailwindcss
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-tailwindcss)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-tailwindcss)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/with-tailwindcss/devcontainer.json)
+
+Astro comes with [Tailwind](https://tailwindcss.com) support out of the box. This example showcases how to style your Astro project with Tailwind.
+
+For complete setup instructions, please see our [Tailwind Integration Guide](https://docs.astro.build/en/guides/integrations-guide/tailwind).

apps/web/astro.config.mjs

@@ -0,0 +1,24 @@
+import mdx from "@astrojs/mdx";
+import node from "@astrojs/node";
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
+
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  integrations: [mdx(), tailwind(), svelte()],
+  server: {
+    port: parseInt(process.env.ASTRO_PORT ?? "3000"),
+  },
+  output: "server",
+  adapter: node({
+    mode: "standalone",
+  }),
+  vite: {
+    define: {
+      "import.meta.env.PAYLOAD_PUBLIC_SERVER_URL": JSON.stringify(
+        process.env.PAYLOAD_PUBLIC_SERVER_URL,
+      ),
+    },
+  },
+});

apps/web/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@turbopress/web",
+  "description": "Front end website based on Astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint  \"./src/**/*.{js,ts,tsx,astro}\" --fix",
+    "serve": "node dist/server/entry.mjs"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "latest",
+    "@astrojs/node": "latest",
+    "@astrojs/svelte": "latest",
+    "@astrojs/tailwind": "latest",
+    "@turbopress/api": "*",
+    "astro": "latest",
+    "autoprefixer": "latest",
+    "@iconify/svelte": "latest",
+    "postcss": "latest",
+    "qs": "^6.11.2",
+    "slate": "latest",
+    "tailwindcss": "latest",
+    "astro-icon": "latest",
+    "nanostores": "latest",
+    "svelte": "latest",
+    "svelte-inview": "4.0.1 "
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/escape-html": "^1.0.2",
+    "@types/qs": "^6.9.7",
+    "escape-html": "^1.0.3",
+    "eslint": "latest",
+    "eslint-config-custom": "*",
+    "eslint-plugin-astro": "latest",
+    "svelte-breakpoints": "latest"
+  }
+}

apps/web/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>

apps/web/src/components/NoHomePage.astro

@@ -0,0 +1,6 @@
+<div class="grid place-items-center h-full w-full content-center">
+  <div class="text-xl font-bold">No homepage has been setup.</div>
+  <div class="text-lg">
+    Create a new page with slug 'home' in the admin panel.
+  </div>
+</div>

apps/web/src/components/RenderLayout.astro

@@ -0,0 +1,18 @@
+---
+import type {
+  FormattedElement,
+  FormattedText,
+  Layout,
+} from "@turbopress/api/types";
+import RenderBody from "./body/RenderBody.astro";
+import RenderHeader from "./header/RenderHeader.astro";
+interface Props {
+  layout: Layout;
+  content?: (FormattedElement | FormattedText)[];
+}
+
+const { layout, content } = Astro.props;
+---
+
+<RenderHeader blocks={layout.header?.blocks} />
+<RenderBody blocks={layout.body?.blocks} {content} />

apps/web/src/components/RenderReusableContent.astro

@@ -0,0 +1,30 @@
+---
+import type { Content } from "@turbopress/api/types";
+import { getContentSingle } from "../services/api/content.service";
+import RenderSiteTitle from "./header/RenderSiteTitle.astro";
+import RenderMenu from "./menu/RenderMenu.astro";
+interface Props {
+  content: string | Content;
+}
+
+const content: Content | undefined =
+  typeof Astro.props.content == "string"
+    ? await getContentSingle(Astro.props.content)
+    : Astro.props.content;
+
+if (!content?.blocks) return;
+
+const blocks = content.blocks;
+---
+
+{
+  blocks.map((block) => {
+    if (!block.id) return;
+    if (block.blockType == "siteTitle")
+      return <RenderSiteTitle siteTitle={block} />;
+    if (block.blockType == "menu" && block.menus)
+      return <RenderMenu menu={block} />;
+
+    return <div>block = {block.id}</div>;
+  })
+}

apps/web/src/components/body/RenderBody.astro

@@ -0,0 +1,36 @@
+---
+import type {
+  FormattedElement,
+  FormattedText,
+  PageContent,
+  PageList,
+  ReusableContent,
+} from "@turbopress/api/types";
+import RenderContent from "../RenderReusableContent.astro";
+import RenderPageContent from "./RenderPageContent.astro";
+// import RenderPageList from "./page-list/RenderPageList.astro";
+import RenderPageList from "./page-list/RenderPageList.svelte";
+interface Props {
+  blocks?: (PageList | ReusableContent | PageContent)[];
+  content?: (FormattedElement | FormattedText)[];
+}
+
+const { blocks = [], content } = Astro.props;
+
+if (blocks.length === 0) return;
+---
+
+<main class="p-6 flex flex-wrap">
+  {
+    blocks.map((block) => {
+      if (!block.id) return;
+      if (block.blockType == "reusableContent" && block.reference?.value)
+        return <RenderContent content={block.reference.value} />;
+      if (block.blockType == "pageContent")
+        return <RenderPageContent {content} />;
+      if (block.blockType == "pageList")
+        return <RenderPageList {block} client:only />;
+      return <div>{block.id}</div>;
+    })
+  }
+</main>

apps/web/src/components/body/RenderPageContent.astro

@@ -0,0 +1,17 @@
+---
+import type { FormattedElement, FormattedText } from "@turbopress/api/types";
+import RichText from "../rich-text/RichText.astro";
+interface Props {
+  content?: (FormattedElement | FormattedText)[];
+  title?: string;
+}
+const { content } = Astro.props;
+---
+
+{
+  content && (
+    <article class="w-full justify-center prose max-w-none prose-headings:m-0 prose-headings:my-3 prose-p:m-0 prose-p:my-2">
+      <RichText richText={content} />
+    </article>
+  )
+}

apps/web/src/components/body/page-list/PageListItem.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Page } from "@turbopress/api/types";
+  import RichText from "../../rich-text/RichText.svelte";
+
+  export let page: Page;
+</script>
+
+{#if page.content}
+  <section class="">
+    <header>
+      <h2>{page.title}</h2>
+    </header>
+    <article>
+      <RichText richText={page.content}></RichText>
+    </article>
+    <hr />
+  </section>
+{/if}

apps/web/src/components/body/page-list/RenderPageList.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Page, PageList } from "@turbopress/api/types";
+  import { inview } from "svelte-inview";
+  import { writable, type Writable } from "svelte/store";
+  import { getPageCollection } from "../../../services/api";
+  import type { PayloadCollection } from "../../../types";
+  import PageListItem from "./PageListItem.svelte";
+
+  export let block: PageList;
+
+  const query = {
+    where: {
+      or: [
+        {
+          categories: {
+            in: block.filterByCategories?.map((f) => f.value),
+          },
+        },
+        {
+          tags: {
+            in: block.filterByTags?.map((f) => f.value),
+          },
+        },
+      ],
+    },
+    limit: block.numberOfItems ?? 5,
+    page: 1,
+    sort: block.sortBy,
+  };
+
+  const queryState = writable(query);
+  const collection: Writable<PayloadCollection<Page> | undefined> = writable();
+
+  async function getPages() {
+    const pages = await getPageCollection($queryState);
+    collection.set(pages);
+  }
+
+  queryState.subscribe((s) => {
+    getPages();
+  });
+
+  $: pages = $collection?.docs;
+
+  function handleChange({ detail }: CustomEvent<ObserverEventDetails>) {
+    isInView = detail.inView;
+    if (detail.inView && $collection?.hasNextPage) {
+      queryState.set({ ...$queryState, limit: $queryState.limit + 1 });
+    }
+  }
+
+  let isInView: boolean;
+</script>
+
+<div
+  class="w-full prose max-w-none prose-headings:m-0 prose-headings:my-3 prose-p:m-0 prose-p:my-2"
+>
+  {#if pages}
+    {#each pages as page}
+      <PageListItem {page}></PageListItem>
+    {/each}
+  {/if}
+
+  <div use:inview on:inview_change={handleChange}></div>
+</div>

apps/web/src/components/header/RenderHeader.astro

@@ -0,0 +1,29 @@
+---
+import type { Menu, ReusableContent, SiteTitle } from "@turbopress/api/types";
+import RenderContent from "../RenderReusableContent.astro";
+import RenderMenu from "../menu/RenderMenu.astro";
+import RenderSiteTitle from "./RenderSiteTitle.astro";
+// import SiteTitle from "./SiteTitle.astro";
+interface Props {
+  blocks?: (Menu | ReusableContent | SiteTitle)[];
+}
+
+const { blocks = [] } = Astro.props;
+
+if (blocks.length === 0) return;
+---
+
+<header class="shadow p-6 flex flex-wrap">
+  {
+    blocks.map((block) => {
+      if (!block.id) return;
+      if (block.blockType == "siteTitle")
+        return <RenderSiteTitle siteTitle={block} />;
+      if (block.blockType == "reusableContent" && block.reference?.value)
+        return <RenderContent content={block.reference.value} />;
+      if (block.blockType == "menu" && block.menus)
+        return <RenderMenu menu={block} />;
+      return <div>{block.id}</div>;
+    })
+  }
+</header>

apps/web/src/components/header/RenderSiteTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { SiteTitle } from "@turbopress/api/types";
+import Link from "../link/Link.astro";
+interface Props {
+  siteTitle: SiteTitle;
+}
+
+const { siteTitle } = Astro.props;
+---
+
+<div class="flex-grow">
+  <Link link="/">
+    <div class="font-bold text-lg">{siteTitle.siteName}</div>
+  </Link>
+  <div class="w-full"></div>
+</div>

apps/web/src/components/link/Link.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  link?: string | undefined;
+  target?: "_self" | "_blank" | "_top" | "_parent";
+  class?: string;
+}
+
+const { link, target, class: className } = Astro.props;
+---
+
+{
+  link && (
+    <a
+      href={link}
+      {target}
+      class={"cursor-pointer hover:text-indigo-600 " + className}
+    >
+      <slot />
+    </a>
+  )
+}
+{!link && <slot />}

apps/web/src/components/link/Link.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let link: string | undefined = undefined;
+  export let target:
+    | "_self"
+    | "_blank"
+    | "_top"
+    | "_parent"
+    | undefined
+    | null = undefined;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if link}
+  <a
+    href={link}
+    {target}
+    class="cursor-pointer hover:text-indigo-600 {$$props.class ?? ''}"
+    ><slot /></a
+  >
+{:else}
+  <slot />
+{/if}

apps/web/src/components/menu/RenderMenu.astro

@@ -0,0 +1,18 @@
+---
+import type { MainMenu, Menu } from "@turbopress/api/types";
+import DefaultMenu from "./default/DefaultMenu.svelte";
+interface Props {
+  menu: Menu;
+}
+
+const { menu } = Astro.props;
+const menus = menu.menus ?? [];
+
+const mainMenus: MainMenu[] = menus.map((menu) => menu.mainMenu);
+---
+
+{
+  () => {
+    return <DefaultMenu menus={mainMenus} client:only="svelte" />;
+  }
+}

apps/web/src/components/menu/default/DefaultMenu.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { MainMenu } from "@turbopress/api/types";
+  import { useMediaQuery } from "svelte-breakpoints";
+  import DefaultDesktopMenu from "./desktop/DefaultDesktopMenu.svelte";
+  import DefaultMobileMenu from "./mobile/DefaultMobileMenu.svelte";
+
+  export let menus: MainMenu[];
+
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+</script>
+
+{#if !$isDesktop}
+  <DefaultMobileMenu {menus}></DefaultMobileMenu>
+{/if}
+
+{#if $isDesktop}
+  <DefaultDesktopMenu {menus}></DefaultDesktopMenu>
+{/if}

apps/web/src/components/menu/default/defaultMenu.ts

@@ -0,0 +1,11 @@
+import { map } from "nanostores";
+
+interface MobileMenuState {
+  isOpen: boolean;
+  activeIndex?: number;
+}
+
+export const mobileMenuState = map<MobileMenuState>({
+  isOpen: false,
+  activeIndex: undefined,
+});

apps/web/src/components/menu/default/desktop/DefaultDesktopMenu.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { MainMenu } from "@turbopress/api/types";
+  import { mobileMenuState } from "../defaultMenu";
+  import MainMenuSvelte from "./_MainMenu.svelte";
+
+  export let menus: MainMenu[];
+
+  function handleClick() {
+    mobileMenuState.setKey("isOpen", !isOpen);
+  }
+
+  $: isOpen = $mobileMenuState.isOpen;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="flex items-center cursor-pointer text-sm"
+  on:click={handleClick}
+  on:keypress={handleClick}
+>
+  {#each menus as menu, i}
+    <MainMenuSvelte {menu} />
+  {/each}
+</div>
+
+<!-- {#if isOpen}
+  <div class="w-full cursor-pointer lg:hidden">
+    {#each menus as menu, i}
+      <MainMenuSvelte {menu} index={i} />
+    {/each}
+  </div>
+{/if} -->

apps/web/src/components/menu/default/desktop/_MainMenu.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { MainMenu } from "@turbopress/api/types";
+  import Link from "../../../link/Link.svelte";
+
+  export let menu: MainMenu;
+
+  const subMenus = menu.subMenu ?? [];
+</script>
+
+<div class="group relative inline-block text-left group">
+  <div id="menu-button" aria-expanded="false" aria-haspopup="true">
+    <Link
+      link={menu.url}
+      class="hover:text-black w-full group-hover:bg-slate-100 p-2 "
+    >
+      {menu.label}
+    </Link>
+  </div>
+
+  <div
+    class="mt-2 absolute right-0 z-10 w-56 origin-top-right rounded-sm bg-white ring-1 ring-slate-200 focus:outline-none hidden group-hover:block"
+    role="menu"
+    aria-orientation="vertical"
+    aria-labelledby="menu-button"
+    tabindex="-1"
+  >
+    <div class="" role="none">
+      {#each subMenus as subMenu}
+        <Link link={subMenu.link.url}>
+          <div
+            class="px-3 py-1.5 block hover:bg-slate-100 ring-1 ring-inset ring-gray-200 ring-opacity-30"
+          >
+            {subMenu.link.label}
+          </div>
+        </Link>
+      {/each}
+    </div>
+  </div>
+</div>

apps/web/src/components/menu/default/desktop/_SubMenu.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Link } from "@turbopress/api/types";
+  import LinkSvelte from "../../../link/Link.svelte";
+  export let subMenu: {
+    link: Link;
+    id?: string;
+  };
+</script>
+
+<LinkSvelte
+  link={subMenu.link.url}
+  class="h-7 hover:text-black hover:bg-slate-100 flex items-center"
+>
+  <div class="w-full px-3">
+    {subMenu.link.label}
+  </div>
+</LinkSvelte>

apps/web/src/components/menu/default/mobile/DefaultMobileMenu.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import type { MainMenu } from "@turbopress/api/types";
+  import { mobileMenuState } from "../defaultMenu";
+  import MainMenuSvelte from "./_MainMenu.svelte";
+
+  export let menus: MainMenu[];
+
+  function handleClick() {
+    mobileMenuState.setKey("isOpen", !isOpen);
+  }
+
+  $: isOpen = $mobileMenuState.isOpen;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="flex items-center cursor-pointer font-semibold hover:text-indigo-600"
+  on:click={handleClick}
+  on:keypress={handleClick}
+>
+  {#if isOpen}
+    <Icon icon="ic:round-close" class="h-5 w-5 mr-2" />
+  {:else}
+    <Icon icon="ic:baseline-menu" class="h-5 w-5 mr-2" />
+  {/if}
+  <div>Menu</div>
+</div>
+
+{#if isOpen}
+  <div class="w-full cursor-pointer lg:hidden">
+    {#each menus as menu, i}
+      <MainMenuSvelte {menu} index={i} />
+    {/each}
+  </div>
+{/if}

apps/web/src/components/menu/default/mobile/_MainMenu.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import type { MainMenu } from "@turbopress/api/types";
+  import Link from "../../../link/Link.svelte";
+  import { mobileMenuState } from "../defaultMenu";
+  import SubMenu from "./_SubMenu.svelte";
+
+  export let menu: MainMenu;
+  export let index: number;
+
+  $: isOpen = $mobileMenuState.activeIndex == index;
+
+  function handleClick() {
+    if (isOpen) mobileMenuState.setKey("activeIndex", undefined);
+    else mobileMenuState.setKey("activeIndex", index);
+  }
+</script>
+
+<div class="flex items-center h-7">
+  <Link link={menu.url} class="hover:text-black w-full hover:bg-slate-100 p-1 ">
+    <div class="w-full">{menu.label}</div>
+  </Link>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="hover:bg-slate-100 h-8 w-10 {isOpen ? 'bg-indigo-50' : ''}"
+    on:click={handleClick}
+    on:keydown={handleClick}
+  >
+    <Icon
+      icon="ic:sharp-keyboard-arrow-down"
+      class="text-2xl mx-auto mt-1  transition-transform  duration-200 {isOpen
+        ? 'rotate-180 text-indigo-800 '
+        : ''}"
+    ></Icon>
+  </div>
+</div>
+
+{#if isOpen}
+  {#if menu.subMenu}
+    {#each menu.subMenu as subMenu}
+      <SubMenu {subMenu} />
+    {/each}
+  {/if}
+{/if}

apps/web/src/components/menu/default/mobile/_SubMenu.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Link } from "@turbopress/api/types";
+  import LinkSvelte from "../../../link/Link.svelte";
+  export let subMenu: {
+    link: Link;
+    id?: string;
+  };
+</script>
+
+<LinkSvelte
+  link={subMenu.link.url}
+  class="h-7 hover:text-black hover:bg-slate-100 flex items-center"
+>
+  <div class="w-full px-3">
+    {subMenu.link.label}
+  </div>
+</LinkSvelte>

apps/web/src/components/rich-text/RichText.astro

@@ -0,0 +1,65 @@
+---
+import type { FormattedElement, FormattedText } from "@turbopress/api/types";
+import escapeHTML from "escape-html";
+import { Text } from "slate";
+
+interface Props {
+  richText: (FormattedElement | FormattedText)[];
+}
+
+const { richText } = Astro.props;
+---
+
+{
+  richText.map((node) => {
+    return Text.isText(node) ? (
+      <Fragment>
+        {node.bold && <strong>{node.text}</strong>}
+        {node.code && <code>{node.text}</code>}
+        {node.italic && <em>{node.text}</em>}
+        {!node.bold && !node.code && !node.italic && (
+          <Fragment>{node.text}</Fragment>
+        )}
+      </Fragment>
+    ) : (
+      <Fragment>
+        {node.type === "h1" && (
+          <h1>{<Astro.self richText={node.children} />}</h1>
+        )}
+        {node.type === "h2" && (
+          <h2>{<Astro.self richText={node.children} />}</h2>
+        )}
+        {node.type === "h3" && (
+          <h3>{<Astro.self richText={node.children} />}</h3>
+        )}
+        {node.type === "h4" && (
+          <h4>{<Astro.self richText={node.children} />}</h4>
+        )}
+        {node.type === "h5" && (
+          <h5>{<Astro.self richText={node.children} />}</h5>
+        )}
+        {node.type === "h6" && (
+          <h6>{<Astro.self richText={node.children} />}</h6>
+        )}
+        {node.type === "quote" && (
+          <p>{<Astro.self richText={node.children} />}</p>
+        )}
+        {node.type === "ul" && (
+          <ul>{<Astro.self richText={node.children} />}</ul>
+        )}
+        {node.type === "ol" && (
+          <ol>{<Astro.self richText={node.children} />}</ol>
+        )}
+        {node.type === "li" && (
+          <li>{<Astro.self richText={node.children} />}</li>
+        )}
+        {node.type === "link" && (
+          <a href={escapeHTML(node.url)}>
+            {<Astro.self richText={node.children} />}
+          </a>
+        )}
+        {!node.type && <p>{<Astro.self richText={node.children} />}</p>}
+      </Fragment>
+    );
+  })
+}

apps/web/src/components/rich-text/RichText.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { FormattedElement, FormattedText } from "@turbopress/api/types";
+  import { Text } from "slate";
+
+  export let richText: (FormattedElement | FormattedText | any)[];
+</script>
+
+{#each richText as node}
+  {#if Text.isText(node)}
+    {#if node.bold}
+      <strong>{node.text}</strong>
+    {/if}
+    {#if node.code}
+      <strong>{node.text}</strong>
+    {/if}
+    {#if node.italic}
+      <strong>{node.text}</strong>
+    {/if}
+    {#if !node.bold && !node.code && !node.italic}
+      {node.text}
+    {/if}
+  {:else}
+    {#if node.type === "h1"}
+      <h1><svelte:self richText={node.children}></svelte:self></h1>
+    {/if}
+    {#if node.type === "h2"}
+      <h2><svelte:self richText={node.children}></svelte:self></h2>
+    {/if}
+    {#if node.type === "h3"}
+      <h3><svelte:self richText={node.children}></svelte:self></h3>
+    {/if}
+    {#if node.type === "h4"}
+      <h4><svelte:self richText={node.children}></svelte:self></h4>
+    {/if}
+    {#if node.type === "h5"}
+      <h5><svelte:self richText={node.children}></svelte:self></h5>
+    {/if}
+    {#if node.type === "h6"}
+      <h6><svelte:self richText={node.children}></svelte:self></h6>
+    {/if}
+    {#if !node.type}
+      <p><svelte:self richText={node.children}></svelte:self></p>
+    {/if}
+  {/if}
+{/each}

apps/web/src/env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly ASTRO_PORT: string;
+}

apps/web/src/layouts/MainLayout.astro

@@ -0,0 +1,48 @@
+---
+import type {
+  FormattedElement,
+  FormattedText,
+  Layout,
+  Media,
+} from "@turbopress/api/types";
+import RenderLayout from "../components/RenderLayout.astro";
+interface Props {
+  title?: string;
+  description?: string;
+  layout?: string | Layout;
+  content?: (FormattedElement | FormattedText | any)[];
+  image?: string | Media;
+}
+const {
+  title = "AstroCMS",
+  description = "Astro, TailwindCSS, and PayloadCMS",
+  layout,
+  content,
+  image,
+} = Astro.props;
+
+const metaImage = image
+  ? typeof image === "string"
+    ? image
+    : image.url
+  : undefined;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="description" content={description} />
+    {metaImage && <meta property="og:image" content={metaImage} />}
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body class="h-screen">
+    {
+      layout && typeof layout != "string" && (
+        <RenderLayout layout={layout} {content} />
+      )
+    }
+    {!layout && <slot />}
+  </body>
+</html>

apps/web/src/pages/404.astro

@@ -0,0 +1,12 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+import { getLayoutSingle } from "../services/api/layout.service";
+
+const layout = await getLayoutSingle("404");
+---
+
+<MainLayout title="Error 404" layout={layout} description="Page not found">
+  Not found, error 404 The page you are looking for no longer exists. Perhaps
+  you can return back to the homepage and see if you can find what you are
+  looking for. Or, you can try finding it by using the search form below.
+</MainLayout>

apps/web/src/pages/[...slug].astro

@@ -0,0 +1,16 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+import { getPageSingle } from "../services/api";
+const { slug } = Astro.params;
+
+const page = await getPageSingle(slug!);
+if (!page) return Astro.redirect("/404");
+if (page.slug == "home") return Astro.redirect("/");
+---
+
+<MainLayout title={page.title} layout={page.layout} description="">
+  {page.title}
+  {page.layout}
+  <!-- {homePage && <RenderPage page={homePage} />}
+  {!homePage && <NoHomePage />} -->
+</MainLayout>

apps/web/src/pages/index.astro

@@ -0,0 +1,18 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+import { getPageSingle } from "../services/api";
+
+const homePage = await getPageSingle("home");
+
+const pageTitle = homePage?.meta?.title ?? homePage?.title ?? "TurboPress";
+
+const layout = homePage?.layout;
+---
+
+<MainLayout
+  title={pageTitle}
+  {layout}
+  description={homePage?.meta?.description}
+  content={homePage?.content}
+  image={homePage?.meta?.image}
+/>

apps/web/src/services/api/api.service.ts

@@ -0,0 +1,31 @@
+import qs from "qs";
+import type { PayloadCollection } from "../../types";
+
+export async function apiFetch<T = any>(
+  url: string | URL,
+  options: RequestInit = {},
+) {
+  const defaultOptions = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const res = await fetch(url, { ...defaultOptions, ...options });
+  if (res.ok) {
+    return res.json() as T;
+  }
+  throw new Error(`Error fetching data: ${res.statusText} (${res.status})}`);
+}
+
+export async function getPayloadCollection<CollectionType>(
+  url: string | URL,
+  query: any = null,
+) {
+  const stringifiedQuery = qs.stringify(query, { addQueryPrefix: true });
+  return apiFetch<PayloadCollection<CollectionType>>(url + stringifiedQuery);
+}
+
+export async function getPayloadDocument<CollectionType>(url: string | URL) {
+  return apiFetch<CollectionType>(url);
+}

apps/web/src/services/api/content.service.ts

@@ -0,0 +1,16 @@
+import type { Layout } from "@turbopress/api/types";
+import { getPayloadCollection } from "./api.service";
+
+export async function getContentCollection(query: any = null) {
+  const url = ` ${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/layouts`;
+  return getPayloadCollection<Layout>(url, query);
+}
+
+export async function getContentSingle(
+  name: string,
+): Promise<Layout | undefined> {
+  const pages = await getContentCollection({
+    where: { name: { equals: name } },
+  });
+  if (pages.docs[0]) return pages.docs[0];
+}

apps/web/src/services/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./api.service";
+export * from "./page.service";

apps/web/src/services/api/layout.service.ts

@@ -0,0 +1,16 @@
+import type { Layout } from "@turbopress/api/types";
+import { getPayloadCollection } from "./api.service";
+
+export async function getLayoutCollection(query: any = null) {
+  const url = ` ${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/layouts`;
+  return getPayloadCollection<Layout>(url, query);
+}
+
+export async function getLayoutSingle(
+  name: string,
+): Promise<Layout | undefined> {
+  const pages = await getLayoutCollection({
+    where: { name: { equals: name } },
+  });
+  if (pages.docs[0]) return pages.docs[0];
+}

apps/web/src/services/api/media.service.ts

@@ -0,0 +1,19 @@
+import type { Media } from "@turbopress/api/types";
+import { getPayloadCollection, getPayloadDocument } from "./api.service";
+
+export async function getMediaCollection(query: any = null) {
+  const url = `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/medias`;
+  return getPayloadCollection<Media>(url, query);
+}
+
+export async function getMediaSingle(slug: string): Promise<Media | undefined> {
+  const medias = await getMediaCollection({
+    where: { slug: { equals: slug } },
+  });
+  if (medias.docs[0]) return medias.docs[0];
+}
+
+export async function getMediaById(id: string): Promise<Media | undefined> {
+  const url = `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/media/` + id;
+  return getPayloadDocument<Media>(url);
+}

apps/web/src/services/api/page.service.ts

@@ -0,0 +1,14 @@
+import type { Page } from "@turbopress/api/types";
+import { getPayloadCollection } from "./api.service";
+
+export async function getPageCollection(query: any = null) {
+  const url = `${import.meta.env.PAYLOAD_PUBLIC_SERVER_URL}/api/pages`;
+  return getPayloadCollection<Page>(url, query);
+}
+
+export async function getPageSingle(slug: string): Promise<Page | undefined> {
+  const pages = await getPageCollection({
+    where: { slug: { equals: slug } },
+  });
+  if (pages.docs[0]) return pages.docs[0];
+}

apps/web/src/types.ts

@@ -0,0 +1,22 @@
+import type { FormattedElement, FormattedText } from "@turbopress/api/types";
+
+declare module "slate" {
+  interface CustomTypes {
+    Element: FormattedElement;
+    Text: FormattedText;
+  }
+}
+
+export type PayloadCollection<CollectionType = any> = {
+  totalDocs?: number;
+  limit?: number;
+  totalPages?: number;
+  page?: number;
+  pagingCounter?: number;
+  hasPrevPage?: boolean;
+  hasNextPage?: boolean;
+  prevPage?: number;
+  nextPage?: number;
+  hasMore?: boolean;
+  docs: CollectionType[];
+};

apps/web/tailwind.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography")],
+};

apps/web/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "exclude": ["node_modules"]
+}