Add Prettier to repo

.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier", "plugin:prettier/recommended"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "singleQuote": true
+      }
+    ]
+  }
 }

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI test
+
+on:
+  # Triggers the workflow on push or pull request events but only for the dev branch
+  - pull_request
+  - push
+  # Allows you to run this workflow manually from the Actions tab
+  - workflow_dispatch
+
+jobs:
+  install-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - run: npm ci
+      # Running build would lint and check type
+      - run: npm run build
+        env:
+          COFACTS_API_URL: 'https://dev-api.cofacts.tw/graphql'

README.md

@@ -1,5 +1,7 @@
 # Cofacts Dashboard
 
+[![CI test](https://github.com/cofacts/dashboard/actions/workflows/ci.yml/badge.svg)](https://github.com/cofacts/dashboard/actions/workflows/ci.yml)
+
 Visualize the data of Cofacts fact-checking platform.
 
 ## Getting Started
@@ -23,3 +25,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 The main branch of this repository is automatically deployed to `https://dash.cofacts.tw`.
 
 
+## Other scripts
+- `npm run lint`: Run eslint (includes prettier).
+- `npm run codegen`: Generates types for graphql queries. Useful when Typescript complains about.`TypedDocumentNode<unknown, Variables>` for new or updated GraphQL queries.
+- `npm run build` and `npm start`: Generate production build and start, respectively.

app/layout.tsx

@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

app/page.tsx

@@ -2,23 +2,25 @@ import { request } from 'graphql-request';
 import { graphql } from '@/typegen/gql';
 
 async function getData() {
-  return request(process.env.COFACTS_API_URL ?? '', graphql(/* GraphQL */ `
-    query LoadAPIStats {
-      allArticles: ListArticles {
-        totalCount
+  return request(
+    process.env.COFACTS_API_URL ?? '',
+    graphql(/* GraphQL */ `
+      query LoadAPIStats {
+        allArticles: ListArticles {
+          totalCount
+        }
+        allRepliedArticles: ListArticles {
+          totalCount
+        }
+        articlesHasUsefulReplies: ListArticles {
+          totalCount
+        }
       }
-      allRepliedArticles: ListArticles {
-        totalCount
-      }
-      articlesHasUsefulReplies: ListArticles {
-        totalCount
-      }
-    }
-  `));
+    `)
+  );
 }
 
 export default async function Home() {
-
   const resp = await getData();
 
   return (

codegen.ts

@@ -5,10 +5,10 @@ import type { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   overwrite: true,
   schema: process.env.COFACTS_API_URL,
-  documents: ["app/**/*.tsx"],
+  documents: ['app/**/*.tsx'],
   generates: {
     'typegen/': {
-      preset: "client",
+      preset: 'client',
       plugins: [],
       presetConfig: {
         fragmentMasking: false,
@@ -19,8 +19,8 @@ const config: CodegenConfig = {
         skipTypename: true,
         avoidOptionals: true,
       },
-    }
-  }
+    },
+  },
 };
 
 export default config;

package.json

@@ -26,7 +26,10 @@
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "postcss": "^8",
+    "prettier": "3.2.5",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.3.3"
   },

tailwind.config.ts

@@ -1,17 +1,17 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   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))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },

typegen/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n    query LoadAPIStats {\n      allArticles: ListArticles {\n        totalCount\n      }\n      allRepliedArticles: ListArticles {\n        totalCount\n      }\n      articlesHasUsefulReplies: ListArticles {\n        totalCount\n      }\n    }\n  ": types.LoadApiStatsDocument,
+    "\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    ": types.LoadApiStatsDocument,
 };
 
 /**
@@ -33,7 +33,7 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query LoadAPIStats {\n      allArticles: ListArticles {\n        totalCount\n      }\n      allRepliedArticles: ListArticles {\n        totalCount\n      }\n      articlesHasUsefulReplies: ListArticles {\n        totalCount\n      }\n    }\n  "): (typeof documents)["\n    query LoadAPIStats {\n      allArticles: ListArticles {\n        totalCount\n      }\n      allRepliedArticles: ListArticles {\n        totalCount\n      }\n      articlesHasUsefulReplies: ListArticles {\n        totalCount\n      }\n    }\n  "];
+export function graphql(source: "\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "): (typeof documents)["\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};