Using Markdown instead of Rich text

.gitignore

@@ -41,4 +41,4 @@ next-env.d.ts
 .env
 
 /media
-/database
+/database/*.db

README.md

@@ -45,17 +45,13 @@ Docker and it's compose plugin are required, below is a matrix on how to install
 |MacOS|[docs.docker.com/.../mac-install](https://docs.docker.com/desktop/install/mac-install/)
 |Windows|[docs.docker.com/.../windows-install](https://docs.docker.com/desktop/install/windows-install/)
 
+### Creating the compose file
 
-### Starting it up
+Create a `docker-compose.yml` file in your project directory with the following content:
 
-To start this wiki, follow these steps:
-
-1. **Create a `docker-compose.yml` file** in the root directory of your project with the following content:
-
-```yml
+```yaml
 services:
-
-  wiki: 
+  wiki:
     image: ghcr.io/thijmengthn/wiki:latest
     container_name: wiki
     restart: unless-stopped
@@ -64,19 +60,23 @@ services:
     ports:
       - 3000:3000
     environment:
-      - PAYLOAD_SECRET=073c61eb3cb96b4c455b3242
+      - PAYLOAD_SECRET=your_secret_key_here
 ```
 
-2. **Run the following command** to start the wiki:
+Replace `your_secret_key_here` with a secure secret key of your choice.
 
-    ```sh
-    docker compose up -d
-    ```
+### Starting the Wiki
+
+Run the following command to start the service:
+
+```sh
+docker compose up -d
+```
 
-This will start the wiki in detached mode. You can access it by navigating to `http://localhost:3000` in your web browser.
+You can now access the wiki by navigating to [localhost:3000](http://localhost:3000) in your browser.
 
 
 
-## ✨ This wiki is for everyone!
+## ✨ A wiki for everyone!
 
 Whether you need help, want to pitch in, or found a bug that needs fixing, just [open an issue](https://github.com/ThijmenGThN/swaparr/issues). We're all ears and ready to collaborate with you!

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@payloadcms/db-sqlite": "latest",
+    "@payloadcms/live-preview-react": "^3.7.0",
     "@payloadcms/next": "latest",
     "@payloadcms/payload-cloud": "latest",
     "@payloadcms/richtext-lexical": "latest",

src/app/(home)/[category]/[page]/page.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link"
+import remarkGfm from 'remark-gfm'
 import { getPayload } from 'payload'
 import config from '@payload-config'
-import { RichText } from '@payloadcms/richtext-lexical/react'
+import Markdown from 'react-markdown'
 
 import Search from "@/components/Search"
 import Header from "@/components/Header"
@@ -30,12 +31,14 @@ export default async function Page({ params }: { params: Promise<{ page: string,
             <div className="flex flex-col gap-y-6 mt-16 mx-8 sm:mx-16">
                 <div className="flex flex-col gap-y-4 mx-8">
                     <p className="text-sm">
-                        {page?.docs[0]?.description}
+                        {page?.docs[0]?.subtitle}
                     </p>
                 </div>
 
                 <div className="rounded border shadow-sm p-8 bg-gradient-to-tr from-gray-50 to-white">
-                    <RichText data={page?.docs[0]?.content} />
+                    <Markdown remarkPlugins={[remarkGfm]} className='prose min-w-full'>
+                        {page?.docs[0]?.markdown}
+                    </Markdown>
                 </div>
 
                 <div className="mx-auto mt-16">

src/app/(home)/[category]/page.tsx

@@ -42,7 +42,7 @@ export default async function Page({ params }: { params: Promise<{ page: string,
                                         {page?.title}
                                     </p>
                                     <p className="text-xs text-neutral">
-                                        {page?.description}
+                                        {page?.subtitle}
                                     </p>
                                 </Link>
                             </li>

src/app/(home)/page.tsx

@@ -37,7 +37,7 @@ export default async function Page() {
                                         {category?.title}
                                     </p>
                                     <p className="text-xs text-neutral">
-                                        {category?.description}
+                                        {category?.subtitle}
                                     </p>
                                 </Link>
                             </li>

src/app/(payload)/admin/importMap.js

@@ -1,47 +1,5 @@
-import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
-import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
-import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+
 
 export const importMap = {
-  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
-  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
-  "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
+
 }

src/collections/Categories.ts

@@ -13,9 +13,6 @@ export const Categories: CollectionConfig = {
   slug: 'categories',
   admin: {
     useAsTitle: 'title',
-    livePreview: {
-      url: 'http://localhost:3000',
-    },
   },
   hooks: {
     beforeChange: [beforeChangeHook]
@@ -36,8 +33,8 @@ export const Categories: CollectionConfig = {
       required: true,
     },
     {
-      name: 'description',
-      type: 'textarea',
+      name: 'subtitle',
+      type: 'text',
       required: true,
     },
   ],

src/collections/Pages.ts

@@ -13,9 +13,6 @@ export const Pages: CollectionConfig = {
   slug: 'pages',
   admin: {
     useAsTitle: 'title',
-    livePreview: {
-      url: ({data}) => `http://localhost:3000/${data.category.slug}/${data.slug}`
-    }
   },
   hooks: {
     beforeChange: [beforeChangeHook]
@@ -36,8 +33,8 @@ export const Pages: CollectionConfig = {
       required: true,
     },
     {
-      name: 'description',
-      type: 'textarea',
+      name: 'subtitle',
+      type: 'text',
       required: true,
     },
     {
@@ -47,8 +44,8 @@ export const Pages: CollectionConfig = {
       required: true,
     },
     {
-      name: 'content',
-      type: 'richText',
+      name: 'markdown',
+      type: 'textarea',
       required: true,
     },
   ],

src/collections/Settings.ts

@@ -2,11 +2,6 @@ import { GlobalConfig } from 'payload'
 
 export const Settings: GlobalConfig = {
   slug: 'settings',
-  admin: {
-    livePreview: {
-      url: 'http://localhost:3000',
-    },
-  },
   fields: [
     {
       name: "sitename",
@@ -23,7 +18,7 @@ export const Settings: GlobalConfig = {
     },
     {
       name: "disclaimer",
-      type: "text",
+      type: "textarea",
       required: true,
       defaultValue: "This platform provides general information for reference purposes. Content may vary based on customization. All rights reserved."
     }

src/payload-types.ts

@@ -88,23 +88,9 @@ export interface Page {
   id: number;
   slug?: string | null;
   title: string;
-  description: string;
+  subtitle: string;
   category: number | Category;
-  content: {
-    root: {
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  };
+  markdown: string;
   updatedAt: string;
   createdAt: string;
 }
@@ -116,7 +102,7 @@ export interface Category {
   id: number;
   slug?: string | null;
   title: string;
-  description: string;
+  subtitle: string;
   updatedAt: string;
   createdAt: string;
 }
@@ -203,9 +189,9 @@ export interface UsersSelect<T extends boolean = true> {
 export interface PagesSelect<T extends boolean = true> {
   slug?: T;
   title?: T;
-  description?: T;
+  subtitle?: T;
   category?: T;
-  content?: T;
+  markdown?: T;
   updatedAt?: T;
   createdAt?: T;
 }
@@ -216,7 +202,7 @@ export interface PagesSelect<T extends boolean = true> {
 export interface CategoriesSelect<T extends boolean = true> {
   slug?: T;
   title?: T;
-  description?: T;
+  subtitle?: T;
   updatedAt?: T;
   createdAt?: T;
 }

src/styles/globals.css

@@ -1,14 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.payload-richtext code {
-    background: black;
-    color: white;
-    border-radius: .5rem;
-    padding: 1rem 1.25rem;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    user-select: all; /* Makes the content copyable */
-}