paveg · paveg · Mar 16, 2024 · Mar 16, 2024 · Mar 16, 2024 · Mar 16, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,15 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": [
+    "unused-imports"
+  ],
+  "rules": {
+    "import/order": "error",
+    "unused-imports/no-unused-imports": "error"
+  }
 }
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -0,0 +1,55 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: ["main"]
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install Dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Run ESLint
+        run: pnpm run lint:ci
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true
diff --git a/.gitignore b/.gitignore
@@ -33,4 +33,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.contentlayer
+.contentlayer
+
+# ESLint
+eslint-results.sarif
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,51 @@
+# ============================= Copied from .gitignore =============================
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Contentlayer
+.contentlayer
+
+# Sitemap related files (generated by next-sitemap)
+/public/robots.txt
+/public/sitemap*.xml
+
+# RSS related files (generated by generateRSS.js)
+/public/atom.xml
+/public/feed.xml
+/public/feed.json
+
+# ============================ ./Copied from .gitignore ============================
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 80,
+  semi: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};
diff --git a/README.md b/README.md
@@ -1,7 +1,5 @@
 # Next.js + Contentlayer
 
-A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.
+A template with Next.js 14 app dir, Contentlayer, Tailwind CSS and dark mode.
 
 https://next-contentlayer.vercel.app
-
-
diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
@@ -50,7 +50,7 @@ export default async function PagePage({ params }: PageProps) {
   }
 
   return (
-    <article className="py-6 prose dark:prose-invert">
+    <article className="prose py-6 dark:prose-invert">
       <h1>{page.title}</h1>
       {page.description && <p className="text-xl">{page.description}</p>}
       <hr />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,14 +21,14 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`antialiased min-h-screen bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50 ${inter.className}`}
+        className={`min-h-screen bg-white text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-50 ${inter.className}`}
       >
         <Providers>
-          <div className="max-w-2xl mx-auto py-10 px-4">
+          <div className="mx-auto max-w-2xl px-4 py-10">
             <header>
               <div className="flex items-center justify-between">
                 <ModeToggle />
-                <nav className="ml-auto text-sm font-medium space-x-6">
+                <nav className="ml-auto space-x-6 text-sm font-medium">
                   <Link href="/">Home</Link>
                   <Link href="/about">About</Link>
                 </nav>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
+import Link from "next/link"
 import { allPosts } from "@/.contentlayer/generated"
 import { PostNotFound } from "@/components/post-not-found"
-import Link from "next/link"
 
 export default function Home() {
   console.info(allPosts.length)

diff --git a/app/posts/[...slug]/page.tsx b/app/posts/[...slug]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"
+import { Metadata } from "next"
 import { allPosts } from "contentlayer/generated"
 
-import { Metadata } from "next"
 import { Mdx } from "@/components/mdx-components"
 
 interface PostProps {
@@ -50,10 +50,10 @@ export default async function PostPage({ params }: PostProps) {
   }
 
   return (
-    <article className="py-6 prose dark:prose-invert">
+    <article className="prose py-6 dark:prose-invert">
       <h1 className="mb-2">{post.title}</h1>
       {post.description && (
-        <p className="text-xl mt-0 text-slate-700 dark:text-slate-200">
+        <p className="mt-0 text-xl text-slate-700 dark:text-slate-200">
           {post.description}
         </p>
       )}

diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
@@ -8,7 +8,7 @@ export function ModeToggle() {
   return (
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className="border rounded-md w-6 h-6 flex items-center justify-center">
+      className="flex h-6 w-6 items-center justify-center rounded-md border">
       <span className="sr-only">Toggle mode</span>
       {theme && theme === "dark" ? (
         <svg
@@ -17,7 +17,7 @@ export function ModeToggle() {
           viewBox="0 0 24 24"
           strokeWidth={1.5}
           stroke="currentColor"
-          className="w-4 h-4">
+          className="h-4 w-4">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -31,7 +31,7 @@ export function ModeToggle() {
           viewBox="0 0 24 24"
           strokeWidth={1.5}
           stroke="currentColor"
-          className="w-4 h-4">
+          className="h-4 w-4">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"

diff --git a/package.json b/package.json
@@ -7,25 +7,33 @@
     "build": "next build",
     "preview": "next build && next start",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "lint:ci": "next lint --config .eslintrc.json --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif"
   },
   "dependencies": {
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "18.16.1",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
-    "@vercel/analytics": "^1.0.0",
+    "@vercel/analytics": "^1.2.2",
     "autoprefixer": "10.4.14",
-    "contentlayer": "^0.3.2",
-    "eslint": "8.39.0",
+    "contentlayer": "^0.3.4",
     "eslint-config-next": "13.3.1",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "next": "14.0.4",
-    "next-contentlayer": "^0.3.2",
+    "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "eslint": "8.39.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unused-imports": "^3.1.0"
   }
 }