payload cms: setup & first user

Initial commit from Create Next App
clean slate
2024-12-14 22:58:15 +11:00 · 2024-12-03 11:30:25 +11:00 · 2024-12-03 11:30:06 +11:00
63 changed files with 4507 additions and 2248 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,5 +0,0 @@
-**/node_modules
-.git
-.gitignore
-.local
-.env*
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-
-/.local/
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions

 # testing
 /coverage
@@ -26,8 +29,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

-# local env files
-.env.development
+# env files (can opt-in for committing if needed)
+.env*

 # vercel
 .vercel
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
--- a/.idea/dataSources.local.xml
+++ b/.idea/dataSources.local.xml
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="dataSourceStorageLocal" created-in="WS-241.15989.105">
-    <data-source name="devblog@mysql-server" uuid="32913bc6-cafd-416c-b070-eee7c73cf755">
-      <database-info product="MySQL" version="8.3.0" jdbc-version="4.2" driver-name="MySQL Connector/J" driver-version="mysql-connector-java-8.0.25 (Revision: 08be9e9b4cba6aa115f9b27b215887af40b159e0)" dbms="MYSQL" exact-version="8.3.0" exact-driver-version="8.0">
-        <extra-name-characters>#@</extra-name-characters>
-        <identifier-quote-string>`</identifier-quote-string>
-      </database-info>
-      <case-sensitivity plain-identifiers="exact" quoted-identifiers="exact" />
-      <secret-storage>master_key</secret-storage>
-      <user-name>devblog</user-name>
-      <schema-mapping>
-        <introspection-scope>
-          <node kind="schema">
-            <name qname="@" />
-            <name qname="devblog" />
-          </node>
-        </introspection-scope>
-      </schema-mapping>
-      <ssl-config use-ide-store="true" use-java-store="true" use-system-store="true">
-        <ca-cert>$USER_HOME$/Documents/db-ssl/ca.crt</ca-cert>
-        <client-cert>$USER_HOME$/Documents/db-ssl/mbp.crt</client-cert>
-        <client-key>$USER_HOME$/Documents/db-ssl/mbp.key</client-key>
-        <enabled>true</enabled>
-        <mode>VERIFY_FULL</mode>
-      </ssl-config>
-    </data-source>
-  </component>
-</project>
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="devblog@mysql-server" uuid="32913bc6-cafd-416c-b070-eee7c73cf755">
-      <driver-ref>mysql.8</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
-      <jdbc-url>jdbc:mysql://mysql-server.suyono.dev:13306/devblog</jdbc-url>
-      <working-dir>$ProjectFileDir$</working-dir>
-    </data-source>
-  </component>
-</project>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/nextts.iml" filepath="$PROJECT_DIR$/.idea/nextts.iml" />
-    </modules>
-  </component>
-</project>
--- a/.idea/nextts.iml
+++ b/.idea/nextts.iml
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="MANUAL" />
-    <option name="myRunOnReformat" value="true" />
-  </component>
-</project>
--- a/.idea/sqldialects.xml
+++ b/.idea/sqldialects.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SqlDialectMappings">
-    <file url="PROJECT" dialect="MySQL" />
-  </component>
-</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,2 +0,0 @@
-nodejs 20.12.2
-pnpm 9.0.6
--- a/37
+++ b/37
@@ -1,37 +0,0 @@
-FROM node:lts-alpine as base
-
-FROM base as builder
-USER 1000:1000
-ADD --chown=1000:1000 . /home/node/nextts
-WORKDIR /home/node/nextts
-RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
-ENV PATH=/home/node/.local/share/pnpm:$PATH
-RUN pnpm install && pnpm run build
-
-FROM base as runtime
-
-RUN npm install -g pm2
-
-
-COPY --from=builder /home/node/nextts/public /home/node/nextts/public
-COPY --from=builder /home/node/nextts/.next/standalone /home/node/nextts
-COPY --from=builder /home/node/nextts/.next/static /home/node/nextts/.next/static
-ADD --chown=1000:1000 pm2.config.js /home/node/nextts/
-ADD --chown=1000:1000 dummies /home/node/nextts/dummies
-
-RUN chown -R 1000:1000 /home/node/nextts
-
-USER 1000:1000
-WORKDIR /home/node/nextts
-
-ENV PORT 3000
-ENV NODE_ENV production
-ENV HOME /home/node
-ENV HOSTNAME "0.0.0.0"
-
-RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
-ENV PATH=/home/node/.local/share/pnpm:$PATH
-RUN pnpm install
-
-CMD ["pm2-runtime", "pm2.config.js"]
-#CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

 ## Getting Started

@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the

 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

 ## Learn More

@@ -27,10 +27,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

 ## Deploy on Vercel

 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/app/(my-app)/favicon.ico
+++ b/app/(my-app)/favicon.ico
--- a/app/(my-app)/fonts/GeistMonoVF.woff
+++ b/app/(my-app)/fonts/GeistMonoVF.woff
--- a/app/(my-app)/fonts/GeistVF.woff
+++ b/app/(my-app)/fonts/GeistVF.woff
--- a/app/(my-app)/globals.css
+++ b/app/(my-app)/globals.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
--- a/app/(my-app)/layout.tsx
+++ b/app/(my-app)/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/app/(my-app)/page.tsx
+++ b/app/(my-app)/page.tsx
@@ -0,0 +1,101 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+              app/page.tsx
+            </code>
+            .
+          </li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}
--- a/app/(payload)/admin/[[...segments]]/not-found.tsx
+++ b/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap })
+
+export default NotFound
--- a/app/(payload)/admin/[[...segments]]/page.tsx
+++ b/app/(payload)/admin/[[...segments]]/page.tsx
@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams, importMap })
+
+export default Page
--- a/app/(payload)/admin/importMap.js
+++ b/app/(payload)/admin/importMap.js
@@ -0,0 +1 @@
+export const importMap = {}
--- a/app/(payload)/api/[...slug]/route.ts
+++ b/app/(payload)/api/[...slug]/route.ts
@@ -0,0 +1,19 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const PUT = REST_PUT(config)
+export const OPTIONS = REST_OPTIONS(config)
--- a/app/(payload)/api/graphql-playground/route.ts
+++ b/app/(payload)/api/graphql-playground/route.ts
@@ -0,0 +1,7 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)
--- a/app/(payload)/api/graphql/route.ts
+++ b/app/(payload)/api/graphql/route.ts
@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)
--- a/app/(payload)/custom.scss
+++ b/app/(payload)/custom.scss
--- a/app/(payload)/layout.tsx
+++ b/app/(payload)/layout.tsx
@@ -0,0 +1,31 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import type { ServerFunctionClient } from 'payload'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,7 +0,0 @@
-export default function About() {
-    return(
-        <div className={`flex flex-col`}>
-            <p>About</p>
-        </div>
-    )
-}
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,7 +0,0 @@
-export default function Blog() {
-    return(
-        <div className={`flex flex-col`}>
-            <p>Blog Post List</p>
-        </div>
-    )
-}
--- a/app/dbcheck/page.tsx
+++ b/app/dbcheck/page.tsx
@@ -1,28 +0,0 @@
-import { getPromisePool } from "@/backend/db";
-import {RowDataPacket} from "mysql2";
-
-async function query() {
-    try {
-        const [rows, fields] = await getPromisePool().query<RowDataPacket[]>('select slug from post limit 1;')
-        return(rows[0]['slug'] as string)
-    } catch (e) {
-        console.log(e)
-        return('something went wrong')
-    }
-}
-
-export default async function DbCheck({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined }}) {
-    let flag = "empty";
-
-    if (typeof searchParams["flag"] === 'string') {
-        flag = searchParams["flag"]
-    }
-
-    return(
-        <div className={`flex flex-col`}>
-            <p>Env: { process.env.MYSQL_HOST }</p>
-            <p>Result: { await query() }</p>
-            <p>Flag: { flag }</p>
-        </div>
-    )
-}
--- a/app/fonts.ts
+++ b/app/fonts.ts
@@ -1,23 +0,0 @@
-import { Raleway, Syne, Questrial, Nunito_Sans } from "next/font/google";
-
-export const raleway = Raleway({
-    subsets: ['latin'],
-    display: "swap",
-})
-
-export const syne = Syne({
-    subsets: ['latin'],
-    display: "swap",
-})
-
-export const questrial = Questrial({
-    subsets: ['latin'],
-    display: "swap",
-    weight: ['400'],
-})
-
-export const nunito_sans = Nunito_Sans({
-    subsets: ['latin'],
-    display: "swap",
-    }
-)
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/app/globals.css.orig
+++ b/app/globals.css.orig
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,31 +0,0 @@
-import "./globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-import React from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <div className={`flex flex-col bg-white`}>
-          <BlogHeader />
-          {children}
-          <BlogFooter />
-        </div>
-      </body>
-    </html>
-  );
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,76 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import { raleway, syne, questrial } from "@/app/fonts";
-
-export default function Home() {
-  return (
-      <div className={`flex flex-col`}>
-        <div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
-          <Image
-              src={`https://assets.suyono.me/placeholder.webp`}
-              alt={`blog cover`}
-              className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
-              width={1581}
-              height={759}
-          />
-          <div className={`flex flex-col-reverse col-start-1 row-start-1 w-screen`}>
-            <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10 z-10`}>
-              <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
-                SUYONO
-              </p>
-              <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
-                A Tech Archive
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className={`flex flex-row justify-center my-8`}>
-          <div className={`border border-slate-100 flex flex-col`}>
-            <Link
-                href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
-                className={`flex flex-row max-w-4xl items-center`}
-            >
-              <Image
-                  src="https://assets.suyono.me/pthumb.webp"
-                  alt="post thumbnail"
-                  width={454}
-                  height={341}
-              />
-              <div className={`flex flex-col mx-10`}>
-                <p className={`${syne.className} text-2xl`}>
-                  Nginx + SSL Client Certificate Verification: Manage Access to a
-                  site
-                </p>
-                <p className={`${questrial.className} line-clamp-3 mt-4`}>
-                  Access control is a fundamental part of security. Most entities
-                  rely on the combination of username and password, sometimes with
-                  additional multi-factor authentication to improve security. Some
-                  entities also use the SSL client certificate verification to
-                  manage access to specific resources. One of the use cases where
-                  SSL client certificate verification fits perfectly is managing
-                  access to internet-facing development or staging servers. In
-                  this post, I&apos;ll share how to set up the certificates and
-                  configure nginx to verify users based on their certificates.
-                </p>
-              </div>
-            </Link>
-          </div>
-        </div>
-        <div className={`flex flex-row bg-teal-50 justify-center`}>
-          <div className={`max-w-4xl py-28 px-10`}>
-            <p className={`text-3xl ${raleway.className}`}>Hi There</p>
-            <p className={`text-base ${raleway.className} my-4`}>
-              a new take on experience is the best teacher
-            </p>
-            <p className={`${raleway.className} text-sm`}>
-              I started this blog as an archive of my experiences and knowledge.
-              By writing them out, I hope it will help me unlearn and relearn the
-              various knowledge and skills I&apos;ve accumulated. I hope the
-              articles, source code examples, and server config examples I wrote
-              will help you somehow. Read on and enjoy!
-            </p>
-          </div>
-        </div>
-      </div>
-  );
-}
--- a/app/post/[slug]/nodeHandler.tsx
+++ b/app/post/[slug]/nodeHandler.tsx
@@ -1,109 +0,0 @@
-import {ReactElement} from "react";
-import {domToReact, Element} from "html-react-parser";
-import {nunito_sans, raleway} from "@/app/fonts";
-import {Code} from "bright";
-import {mark} from "@/bright-extension/mark";
-
-export type nodeHandlerResult = {match :boolean, element? :ReactElement}
-export type nodeHandler = (node :Element) => nodeHandlerResult
-
-function h1(node: Element): nodeHandlerResult {
-    if (node.name === "h1") {
-        if (node.attribs.class === "title") {
-            return {
-                match: true,
-                element: (
-                    <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
-                        {domToReact(node.children)}
-                    </h1>
-                ),
-            };
-        }
-        return {
-            match: true,
-            element: (
-                <h1 className={`${raleway.className} mx-auto w-224 text-3xl`}>
-                    {domToReact(node.children)}
-                </h1>
-            ),
-        };
-    }
-
-    return { match: false};
-}
-
-function h2(node: Element): nodeHandlerResult {
-    if (node.name === "h2") {
-        return {
-          match: true,
-          element: (
-              <h1 className={`${raleway.className} mx-auto w-224 text-2xl`}>
-                  {domToReact(node.children)}
-              </h1>
-          )
-        };
-    }
-
-    return {match: false};
-}
-
-function h3(node: Element): nodeHandlerResult {
-    if (node.name === "h3") {
-        return {
-            match: true,
-            element: (
-                <h1 className={`${raleway.className} mx-auto w-224 text-xl`}>
-                    {domToReact(node.children)}
-                </h1>
-            )
-        };
-    }
-    return {match: false};
-}
-
-function code(node: Element): nodeHandlerResult {
-    if (node.name === "code") {
-        let linenumber = false;
-        if ("class" in node.attribs) {
-            const classes = node.attribs.class.split(" ");
-            if (classes.includes("linenumber")) {
-                linenumber = true;
-            }
-        }
-
-        return {
-            match: true,
-            element: (
-                <div className={`w-224 mx-auto`}>
-                    <Code
-                        lang={`${node.attribs.lang}`}
-                        lineNumbers={linenumber}
-                        extensions={[mark]}
-                    >
-                        {domToReact(node.children)}
-                    </Code>
-                </div>
-            )
-        };
-    }
-
-    return {match: false};
-}
-
-function p(node: Element): nodeHandlerResult {
-    if (node.name === "p") {
-        if (node.attribs.class === "paragraph") {
-            return {
-                match: true,
-                element: (
-                    <h1 className={`${nunito_sans.className} mx-auto w-224`}>
-                        {domToReact(node.children)}
-                    </h1>
-                )
-            };
-        }
-    }
-    return {match: false};
-}
-
-export const handlers: nodeHandler[] = [h1, h2, h3, code, p];
--- a/app/post/[slug]/page.tsx
+++ b/app/post/[slug]/page.tsx
@@ -1,45 +0,0 @@
-import { getPost } from "@/backend/post";
-import DOMPurify from "dompurify";
-import { JSDOM } from "jsdom";
-import parse, {
-  Element,
-  // domToReact,
-  HTMLReactParserOptions,
-} from "html-react-parser";
-import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
-import { handlers } from "@/app/post/[slug]/nodeHandler";
-
-const options: HTMLReactParserOptions = {
-  replace: (domNode) => {
-    for (let handler of handlers) {
-      if (domNode instanceof Element && domNode.attribs) {
-        let result = handler(domNode)
-        if (result.match && typeof result.element !== 'undefined') {
-          return result.element
-        }
-      }
-    }
-  },
-};
-
-export default async function Post({ params }: { params: { slug: string } }) {
-  let content;
-
-  const dummySlug = await DummyPostSlug();
-  if (dummySlug === params.slug) {
-    content = await DummyPostString();
-    // console.log(content);
-  } else {
-    content = await getPost(params.slug);
-  }
-
-  content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
-  // console.log(content)
-  const elem = parse(content, options);
-
-  return (
-  <div className={`flex flex-col`}>
-    {elem}
-  </div>
-  );
-}
--- a/backend/db.ts
+++ b/backend/db.ts
@@ -1,42 +0,0 @@
-import mysql, { PoolOptions, Pool } from "mysql2";
-import { Pool as pPool } from "mysql2/promise"
-import * as fs from 'fs';
-import * as appEnv from "./env";
-
-let pool: Pool | undefined;
-let promisePool: pPool | undefined;
-
-export function getPool(): Pool {
-    const access: PoolOptions = {
-        host: appEnv.getMysqlHost(),
-        port: appEnv.getMysqlPort(),
-        user: appEnv.getMysqlUser(),
-        password: appEnv.getMysqlPassword(),
-        database: appEnv.getMysqlDatabase(),
-        waitForConnections: true,
-        connectionLimit: 10,
-        maxIdle: 10,
-        idleTimeout: 60000,
-        queueLimit: 0,
-        enableKeepAlive: true,
-        keepAliveInitialDelay: 0,
-        ssl: {
-            ca: fs.readFileSync(appEnv.getMysqlSslCaFile()),
-            key: fs.readFileSync(appEnv.getMysqlSslKeyFile()),
-            cert: fs.readFileSync(appEnv.getMysqlSslCertFile())
-        }
-    }
-
-    if (typeof pool === 'undefined') {
-        pool = mysql.createPool(access)
-    }
-
-    return pool
-}
-
-export function getPromisePool(): pPool {
-    if (typeof promisePool === 'undefined') {
-        promisePool = getPool().promise()
-    }
-    return promisePool
-}
--- a/backend/env.ts
+++ b/backend/env.ts
@@ -1,63 +0,0 @@
-export function getMysqlHost(): string {
-    if (typeof process.env.MYSQL_HOST === 'undefined') {
-        throw new Error("missing env MYSQL_HOST")
-    }
-
-    return process.env.MYSQL_HOST
-}
-
-export function getMysqlPort(): number {
-    if (typeof process.env.MYSQL_PORT === 'undefined') {
-        throw new Error("missing env MYSQL_PORT")
-    }
-
-    return parseInt(process.env.MYSQL_PORT)
-}
-
-export function getMysqlUser(): string {
-    if (typeof process.env.MYSQL_USER === 'undefined') {
-        throw new Error("missing env MYSQL_USER")
-    }
-
-    return process.env.MYSQL_USER
-}
-
-export function getMysqlPassword(): string {
-    if (typeof process.env.MYSQL_PASSWORD === 'undefined') {
-        throw new Error("missing env MYSQL_PASSWORD")
-    }
-
-    return process.env.MYSQL_PASSWORD
-}
-
-export function getMysqlDatabase(): string {
-    if (typeof process.env.MYSQL_DATABASE === 'undefined') {
-        throw new Error("missing env MYSQL_DATABASE")
-    }
-
-    return process.env.MYSQL_DATABASE
-}
-
-export function getMysqlSslCaFile(): string {
-    if (typeof process.env.MYSQL_SSL_CA === 'undefined') {
-        throw new Error("missing env MYSQL_SSL_CA")
-    }
-
-    return process.env.MYSQL_SSL_CA
-}
-
-export function getMysqlSslCertFile(): string {
-    if (typeof process.env.MYSQL_SSL_CERT === 'undefined') {
-        throw new Error("missing env MYSQL_SSL_CERT")
-    }
-
-    return process.env.MYSQL_SSL_CERT
-}
-
-export function getMysqlSslKeyFile(): string {
-    if (typeof process.env.MYSQL_SSL_KEY === 'undefined') {
-        throw new Error("missing env MYSQL_SSL_KEY")
-    }
-
-    return process.env.MYSQL_SSL_KEY
-}
--- a/backend/post.ts
+++ b/backend/post.ts
@@ -1,13 +0,0 @@
-import { RowDataPacket } from "mysql2";
-import { getPromisePool } from "@/backend/db";
-
-export async function getPost(slug: string): Promise<string> {
-    try {
-        const [rows, fields] = await getPromisePool().query<RowDataPacket[]>(
-            'select content from post where slug = ?', [slug])
-        return rows[0]['content']
-    } catch (e) {
-        console.log(e)
-        throw e
-    }
-}
--- a/bright-extension/lineNumbers.tsx
+++ b/bright-extension/lineNumbers.tsx
@@ -1,11 +0,0 @@
-import { Extension } from 'bright';
-
-export const lineNumbers :Extension = {
-    name: "lineNumbers",
-    beforeHighlight: (props, annotations) => {
-        console.log(annotations);
-        if (annotations.length > 0 ) {
-            return { ...props, lineNumbers: true }
-        }
-    }
-}
--- a/bright-extension/mark.tsx
+++ b/bright-extension/mark.tsx
@@ -1,15 +0,0 @@
-import { Extension } from "bright";
-
-export const mark: Extension = {
-  name: "mark",
-  InlineAnnotation: ({ children, query }) => {
-    return (
-        <mark style={{ background: query }}>{children}</mark>
-    )
-  },
-  MultilineAnnotation: ({ children, query }) => {
-    return (
-        <div style={{ background: query }}>{children}</div>
-    )
-  },
-};
--- a/components/blogFooter.tsx
+++ b/components/blogFooter.tsx
@@ -1,13 +0,0 @@
-import {raleway} from "@/app/fonts";
-
-export default function BlogFooter() {
-    return (
-      <div>
-        <p className={`${raleway.className} text-center text-xl my-10`}>Suyono</p>
-        <p className={`${raleway.className} text-center`}>suyono3484@gmail.com</p>
-        <p className={`${raleway.className} text-center mt-20 mb-10`}>
-          &copy;2023 by Suyono. Built using Next.js
-        </p>
-      </div>
-    );
-}
--- a/components/blogHeader.tsx
+++ b/components/blogHeader.tsx
@@ -1,25 +0,0 @@
-import Link from "next/link";
-import { raleway }from "@/app/fonts";
-
-export default function BlogHeader() {
-    return(
-        <div>
-            <div className="ml-20 py-8">
-                <p className={`${raleway.className} text-2xl font-thin`}>SUYONO</p>
-            </div>
-            <div className="bg-gray-100">
-                <div className="flex flex-row ml-20">
-                    <Link href="/" className={`${raleway.className} m-2 font-thin text-sm`}>
-                        Home
-                    </Link>
-                    <Link href="/about" className={`${raleway.className} m-2 font-thin text-sm`}>
-                        About
-                    </Link>
-                    <Link href="/blog" className={`${raleway.className} m-2 font-thin text-sm`}>
-                        Blog
-                    </Link>
-                </div>
-            </div>
-        </div>
-    )
-}
--- a/components/dummyPost.tsx
+++ b/components/dummyPost.tsx
@@ -1,13 +0,0 @@
-import { promises as fsp } from 'fs'
-
-export async function DummyPostString() {
-    let path = ""
-    if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
-        path = process.env.DUMMY_HTML_DIR + "test1.html";
-    }
-    return await fsp.readFile(path, "utf-8")
-}
-
-export async function DummyPostSlug() {
-    return "dummy-post"
-}
--- a/dummies/test1.html
+++ b/dummies/test1.html
@@ -1,130 +0,0 @@
-<h1 class="title">Nginx + SSL Client Certificate Verification: Manage access to a site</h1>
-<p class="paragraph">Access control is a fundamental part of security. Most entities rely on
-    the combination of username and password, sometimes with additional multi-factor authentication
-    to improve security. Some entities also use the SSL client certificate verification to manage access
-    to specific resources. One of the use cases where SSL client certificate verification fits perfectly is
-    managing access to internet-facing development or staging servers. In this post, I&apos;ll share how
-    to set up the certificates and configure nginx to verify users based on their certificates.</p>
-<h1>Preparing the certificates</h1>
-<p class="paragraph">There are two certificates we are going to create. The first one is the root
-    certificate. It will be placed in the Nginx server. The second one is the client certificate. It will
-    be installed in the client machine/browsers.</p>
-<h2>Root CA</h2>
-<p class="paragraph">For generating a root CA, execute these two steps:</p>
-<h3>Generate RSA Key</h3>
-<code lang="shell">openssl genrsa -aes256 -out ca.key 4096</code>
-<h3>Create Root CA crt file.</h3>
-<code lang="shell">openssl req -new -x509 -days 3650 -key ca.key -out ca.crt</code>
-<h2>Setup CA configuration</h2>
-<p class="paragraph">This is an optional step, but if you want to be able to revoke access you
-    previously granted, you need to do this step.</p>
-<p class="paragraph">Create a file named ca.cnf in the same directory as the ca.key and ca.crt.</p>
-<code lang="ini" class="linenumber">[ ca ]
-default_ca = gca
-
-[ crl_ext ]
-authorityKeyIdentifier=keyid:always
-
-[ gca ]
-dir = ./
-new_certs_dir = $dir
-unique_subject = no
-certificate = $dir/ca.crt
-database = $dir/certindex
-; mark(1[9:11]) dimgrey
-private_key = $dir/ca.key
-serial = $dir/certserial
-default_days = 365
-default_md = sha256
-policy = gca_policy
-x509_extensions = gca_extensions
-crlnumber = $dir/crlnumber
-default_crl_days = 365
-
-[ gca_policy ]
-commonName = supplied
-stateOrProvinceName = supplied
-countryName = optional
-emailAddress = optional
-organizationName = supplied
-organizationUnitName = optional
-
-[ gca_extensions ]
-basicConstraints = CA:false
-subjectKeyIdentifier = hash
-authorityKeyIdentifier = keyid:always
-keyUsage = digitalSignature,keyEncipherment
-extendedKeyUsage = serverAuth
-crlDistributionPoints = URI:http://example.com/root.crl
-subjectAltName = @alt_names
-
-[ alt_names ]
-DNS.1 = example.com
-DNS.2 = *.example.com</code>
-<p class="paragraph">Initialize an empty file for the CA database.</p>
-<code lang="shell">touch certindex</code>
-<p class="paragraph">Initialize value for certserial and crlnumber</p>
-<code lang="shell">echo 01 > certserial
-echo 01 > crlnumber</code>
-<h2>User Certificates</h2>
-<h3>Generate the user RSA key.</h3>
-<code lang="shell">openssl genrsa -aes256 -out client01/user.key 4096</code>
-<h3>Create Certificate-Signing Request (CSR)</h3>
-<code lang="shell">openssl req -new -key client01/user.key -out client01/user.csr</code>
-<h3>Sign the CSR.</h3>
-<p class="paragraph">If you did the setup CA configuration step, sign the CSR file by running this command.</p>
-<code lang="shell">openssl ca -config ca.cnf -in client01/user.csr -out client01/user.crt</code>
-<p class="paragraph">If you skipped the setup CA configuration step, sign the CSR file by running this command.</p>
-<code lang="shell">openssl x509 -req -days 365 -in client01/user.csr -CA ca.crt -CAkey ca.key -set_serial 01 -out client01/user.crt</code>
-<h3>Convert the crt file to pfx/p12 file.</h3>
-<p class="paragraph">Most of the time, browsers/client machines only accept a certificate in the pfx format. Run this
-    command to convert the crt file to the pfx/p12 format.</p>
-<code lang="shell">openssl pkcs12 -export -out client01/user.pfx -inkey client01/user.key -in client01/user.crt -certfile ca.crt</code>
-<p class="paragraph">You'll be prompted to enter an export password. You must input the exact password when adding
-    the certificate to a browser.</p>
-<br/>
-<h1>Setting up nginx with client certificates verification</h1>
-<p class="paragraph">Add these lines to a server block in your nginx configuration</p>
-<code lang="shell" class="linenumber">ssl_client_certificate /path/to/client/verfication/ca.crt;
-ssl_verify_client optional;
-ssl_verify_depth 2;</code>
-<p class="paragraph">You can do location-based access control. Location-based here refers to a location block in your
-    nginx configuration, for example:</p>
-<code lang="shell">    location /private {
-# mark(1[13:41]) dimgrey
-        if ($ssl_client_verify != SUCCESS) {
-            return 403;
-        }
-
-        ....
-
-    }
-</code>
-<p class="paragraph">Here is a complete example of a server block in the nginx configuration</p>
-<code lang="shell">server {
-    listen 443 ssl http2;
-    listen [::]:443 ssl http2;
-
-    server_name www.example.com;
-    ssl_certificate /path/to/your/https/certificate.pem;
-    ssl_certificate_key /path/to/your/https/private-key.pem;
-    include snippets/ssl-params.conf;
-
-# mark(1:3) dimgrey
-    ssl_client_certificate /path/to/client/verification/ca.crt;
-    ssl_verify_client optional;
-    ssl_verify_depth 2;
-
-    root /usr/share/nginx/html;
-    index  index.html index.htm;
-
-    location / {
-# mark(1[13:41]) dimgrey
-        if ($ssl_client_verify != SUCCESS) {
-            return 403;
-        }
-
-    }
-}</code>
-<br/>
-<h1>Adding the User Certificates to the client machine/browsers</h1>
--- a/next.config.js
+++ b/next.config.js
@@ -1,19 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-    output: "standalone",
-    webpack: (config) => {
-        config.externals = [...config.externals, "jsdom"];
-        return config;
-    },
-    images: {
-        remotePatterns: [
-            {
-                protocol: "https",
-                hostname: "assets.suyono.me",
-                pathname: "/**"
-            },
-        ]
-    }
-}
-
-module.exports = nextConfig
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,9 @@
+import { withPayload } from '@payloadcms/next/withPayload';
+
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default withPayload(nextConfig);
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextts",
+  "name": "blogts2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
@@ -9,29 +9,25 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "@types/dompurify": "^3.0.5",
-    "@types/jsdom": "^21.1.6",
-    "@types/node": "20.6.5",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.16",
-    "bright": "^0.8.5",
-    "dompurify": "^3.1.2",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.3",
-    "html-react-parser": "^4.2.10",
-    "jsdom": "^22.1.0",
-    "mysql2": "^3.9.7",
-    "next": "14.2.3",
-    "postcss": "8.4.30",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "redis": "^4.6.13",
-    "sharp": "^0.33.3",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "@payloadcms/db-postgres": "^3.7.0",
+    "@payloadcms/next": "^3.7.0",
+    "@payloadcms/richtext-lexical": "^3.7.0",
+    "graphql": "^16.9.0",
+    "next": "15.0.3",
+    "payload": "^3.7.0",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "sharp": "^0.33.5"
  },
  "devDependencies": {
-    "prettier": "3.0.3"
-  }
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  },
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }
--- a/payload.config.ts
+++ b/payload.config.ts
@@ -0,0 +1,33 @@
+import sharp from 'sharp'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+// import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { postgresAdapter } from '@payloadcms/db-postgres'
+import { buildConfig } from 'payload'
+
+export default buildConfig({
+  // If you'd like to use Rich Text, pass your editor here
+  editor: lexicalEditor(),
+
+  // Define and configure your collections in this array
+  collections: [],
+
+  // Your Payload secret - should be a complex and secure string, unguessable
+  secret: process.env.PAYLOAD_SECRET || '',
+  // Whichever Database Adapter you're using should go here
+  // Mongoose is shown as an example, but you can also use Postgres
+//   db: mongooseAdapter({
+//     url: process.env.DATABASE_URI || '',
+//   }),
+  db: postgresAdapter({
+    // Postgres-specific arguments go here.
+    // `pool` is required.
+    pool: {
+      connectionString: process.env.DATABASE_URI,
+    },
+  }),
+  // If you want to resize images, crop, set focal point, etc.
+  // make sure to install it and pass it to the config.
+  // This is optional - if you don't need to do these things,
+  // you don't need it!
+  sharp,
+})
--- a/pm2.config.js
+++ b/pm2.config.js
@@ -1,7 +0,0 @@
-module.exports = {
-    apps: [{
-        script: "server.js",
-        instances: 4,
-        exec_mode: "cluster"
-    }]
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,26 +1,18 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";

-const config: Config = {
+export default {
  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
      },
-      width: {
-        '224': '56rem',
-      },
-      height: {
-        '192': '48rem',
-      }
    },
  },
  plugins: [],
-}
-export default config
+} satisfies Config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
@@ -19,7 +19,10 @@
      }
    ],
    "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@payload-config": [
+        "./payload.config.ts"
+      ]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
Author	SHA1	Message	Date
Suyono	df5de71d17	payload cms: setup & first user	2024-12-14 22:58:15 +11:00
Suyono	6716ac6907	Initial commit from Create Next App	2024-12-03 11:30:25 +11:00
Suyono	b0ca2bbeb3	clean slate	2024-12-03 11:30:06 +11:00
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>`