Add lint configs

pahans · May 17, 2024 · cd1114f · cd1114f
1 parent 586974d
commit cd1114f
Show file tree

Hide file tree

Showing 13 changed files with 6,590 additions and 2,982 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["eslint:recommended", "prettier", "next/core-web-vitals"],
+  "globals": {
+    "React": true
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,13 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@mdxeditor/editor": "^3.0.7",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",
@@ -24,6 +26,7 @@
     "@types/react-dom": "^18.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
+    "eslint-config-prettier": "^9.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",

diff --git a/src/app/[slug]/(read)/page.tsx b/src/app/[slug]/(read)/page.tsx
@@ -1,6 +1,4 @@
-import Image from "next/image";
-
-export default function BlogPost() {
+export default function BlogPostPage() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div>blog post</div>

diff --git a/src/app/components/MDXEditor/ForwardRefEditor.tsx b/src/app/components/MDXEditor/ForwardRefEditor.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { forwardRef } from "react";
+import { type MDXEditorMethods, type MDXEditorProps } from "@mdxeditor/editor";
+
+const Editor = dynamic(() => import("./InitializedMDXEditor"), {
+  // Make sure we turn SSR off
+  ssr: false,
+  loading: () => <p>Loading...</p>,
+});
+
+// This is what is imported by other components. Pre-initialized with plugins, and ready
+// to accept other props, including a ref.
+export const ForwardRefEditor = forwardRef<MDXEditorMethods, MDXEditorProps>(
+  (props, ref) => <Editor {...props} editorRef={ref} />
+);
+
+ForwardRefEditor.displayName = "ForwardRefEditor";
diff --git a/src/app/components/MDXEditor/InitializedMDXEditor.tsx b/src/app/components/MDXEditor/InitializedMDXEditor.tsx
@@ -0,0 +1,56 @@
+"use client";
+import type { ForwardedRef } from "react";
+import {
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  markdownShortcutPlugin,
+  toolbarPlugin,
+  MDXEditor,
+  UndoRedo,
+  CodeToggle,
+  CreateLink,
+  ListsToggle,
+  InsertCodeBlock,
+  InsertImage,
+  BoldItalicUnderlineToggles,
+  InsertTable,
+  type MDXEditorMethods,
+  type MDXEditorProps,
+} from "@mdxeditor/editor";
+import "@mdxeditor/editor/style.css";
+
+export default function InitializedMDXEditor({
+  editorRef,
+  ...props
+}: { editorRef: ForwardedRef<MDXEditorMethods> | null } & MDXEditorProps) {
+  return (
+    <MDXEditor
+      contentEditableClassName="prose"
+      plugins={[
+        headingsPlugin(),
+        listsPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        markdownShortcutPlugin(),
+        toolbarPlugin({
+          toolbarContents: () => (
+            <>
+              <UndoRedo />
+              <BoldItalicUnderlineToggles />
+              <CodeToggle />
+              <InsertCodeBlock />
+              <CreateLink />
+              <ListsToggle />
+              <InsertTable />
+              <InsertImage />
+            </>
+          ),
+        }),
+      ]}
+      {...props}
+      ref={editorRef}
+    />
+  );
+}
diff --git a/src/app/components/MDXEditor/index.ts b/src/app/components/MDXEditor/index.ts
@@ -0,0 +1 @@
+export { ForwardRefEditor as MDXEditor } from "./ForwardRefEditor";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,11 +7,11 @@ export const metadata: Metadata = {
   description: "Pressing simplicity into every word.",
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
+interface RootLayoutProps {
   children: React.ReactNode;
-}>) {
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

diff --git a/src/app/new-post/layout.tsx b/src/app/new-post/layout.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create new blog post",
+};
+
+interface NewPostLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function NewPostLayout({ children }: NewPostLayoutProps) {
+  return <main>{children}</main>;
+}
diff --git a/src/app/new-post/page.tsx b/src/app/new-post/page.tsx
@@ -0,0 +1,3 @@
+export default function NewPostPage() {
+  return <div className="">create new blog post</div>;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,4 @@
-import Image from "next/image";
-
-export default function Home() {
+export default function HomePage() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       Hello World

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,6 +7,6 @@ const config: Config = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {},
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };
 export default config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,7 +18,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ForwardRefEditor as MDXEditor } from "./ForwardRefEditor";