init branch phuc-dev

.env.example

@@ -7,8 +7,8 @@ POSTGRES_USER=postgres
 POSTGRES_PASSWORD=password
 DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?schema=public"
 
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
 
-FACEBOOK_CLIENT_ID=
-FACEBOOK_CLIENT_SECRET=
+# FACEBOOK_CLIENT_ID=
+# FACEBOOK_CLIENT_SECRET=

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+   "files.exclude": {
+      "**/.git": true,
+      "**/.svn": true,
+      "**/.hg": true,
+      "**/CVS": true,
+      "**/.DS_Store": true,
+      "**/Thumbs.db": true,
+      "**/node_modules": true
+   }
+}

docker-compose.yaml

@@ -1,5 +1,5 @@
 version: "3.8"
-name: nextjs-template
+# name: nextjs-template
 
 services:
   postgres:

package.json

@@ -17,9 +17,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@next-auth/prisma-adapter": "1.0.7",
-    "@prisma/client": "5.1.1",
-    "@tanstack/react-table": "8.9.3",
-    "framer-motion": "10.16.1",
+    "@prisma/client": "^5.2.0",
+    "framer-motion": "10.16.0",
     "jotai": "2.3.1",
     "next": "13.4.19",
     "next-auth": "4.23.1",
@@ -30,14 +29,18 @@
     "swr": "2.2.1"
   },
   "devDependencies": {
-    "@types/node": "20.5.2",
+    "@tanstack/react-table": "^8.9.3",
+    "@types/node": "20.5.1",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "9.0.0",
+    "lodash": "^4.17.21",
     "prettier": "3.0.2",
-    "prisma": "5.1.1",
+    "prisma": "^5.2.0",
+    "suneditor": "^2.45.1",
+    "suneditor-react": "^3.4.1",
     "ts-node": "10.9.1",
     "typescript": "5.1.6"
   }

prisma/migrations/20230715184123_init/migration.sql

@@ -36,7 +36,18 @@ CREATE TABLE "User" (
 
     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
 );
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" TEXT NOT NULL,
+    "title": TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "published" BOOLEAN,
+    "authorId" TEXT,
+    "content" TEXT,
 
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
 -- CreateTable
 CREATE TABLE "VerificationToken" (
     "identifier" TEXT NOT NULL,

prisma/schema.prisma

@@ -51,6 +51,7 @@ model User {
   role          UserRole  @default(USER)
   accounts      Account[]
   sessions      Session[]
+  Post          Post[]
 }
 
 model VerificationToken {
@@ -60,3 +61,14 @@ model VerificationToken {
 
   @@unique([identifier, token])
 }
+
+model Post {
+  id        String   @id @default(uuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  published Boolean  @default(false)
+  title     String   @db.VarChar(255)
+  content   String
+  authorId  String
+  author    User?    @relation(fields: [authorId], references: [id])
+}

src/components/CustomSunEditor/index.tsx

@@ -0,0 +1,60 @@
+import { type FC, useRef } from 'react';
+import SunEditor, { buttonList } from 'suneditor-react';
+import SunEditorCore from 'suneditor/src/lib/core';
+import 'suneditor/dist/css/suneditor.min.css';
+
+type PropTypes = {
+  autoFocus?: boolean;
+  width?: string;
+  height?: string;
+  onChange?: ((content: string) => void) | undefined;
+  placeholder?: string;
+  onSave?: ((content: string) => void) | undefined;
+};
+const PagePostEditor: FC<PropTypes> = (props) => {
+  const {
+    autoFocus = true,
+    width = '100%',
+    height = '300px',
+    onChange,
+    placeholder,
+    onSave,
+  } = props;
+  const editor = useRef<SunEditorCore>();
+  // The sunEditor parameter will be set to the core suneditor instance when this function is called
+  const getSunEditorInstance = (sunEditor: SunEditorCore) => {
+    editor.current = sunEditor;
+  };
+
+  return (
+    <SunEditor
+      autoFocus={autoFocus}
+      width={width}
+      height={height}
+      onChange={onChange}
+      placeholder={placeholder}
+      onSave={onSave}
+      setOptions={{
+        buttonList: [
+          ['undo', 'redo'],
+          ['font', 'fontSize', 'formatBlock'],
+          ['paragraphStyle', 'blockquote'],
+          ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+          ['fontColor', 'hiliteColor', 'textStyle'],
+          ['removeFormat'],
+          //  '/', // Line break
+          ['outdent', 'indent'],
+          ['align', 'horizontalRule', 'list', 'lineHeight'],
+          ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
+          /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
+          ['fullScreen', 'showBlocks', 'codeView'],
+          ['preview', 'print'],
+          ['save'],
+        ],
+        // Other option
+      }}
+      getSunEditorInstance={getSunEditorInstance}
+    />
+  );
+};
+export default PagePostEditor;

src/components/Navbar/index.tsx

@@ -14,7 +14,7 @@ export const Navbar = () => {
       <NextLink href="/server">Server</NextLink>
 
       <NextLink href="/admin">Admin</NextLink>
-
+      <NextLink href="/post/pageposteditor">Pages</NextLink>
       <ProfileMenu />
     </Flex>
   );