Add prettier as a linter

.github/quality.yml

@@ -0,0 +1,24 @@
+name: Quality
+on:
+  pull_request:
+    branches: [main]
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  prettier:
+    name: Format with Prettier
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Check formatting
+        run: yarn format:check

.prettierignore

@@ -0,0 +1,6 @@
+next-env.d.ts
+.next
+.vscode
+.material
+yarn.lock
+node_modules

README.md

@@ -12,7 +12,7 @@ Install Node.js and npm or yarn. Then run:
 
 ```bash
 yarn install
-# or 
+# or
 npm install
 ```
 
@@ -42,7 +42,6 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-
 ## Prisma Studio
 
 Prisma Studio is a GUI for viewing and editing the database. It can be started with:

components/AttributionDialog.tsx

@@ -1,112 +1,137 @@
-import { Modal } from 'flowbite-react';
-import { Attribution } from 'lib/material';
-import React, { useEffect } from 'react';
-import { useEdges } from 'reactflow';
-import Image from 'next/image';
+import { Modal } from "flowbite-react"
+import { Attribution } from "lib/material"
+import React, { useEffect } from "react"
+import { useEdges } from "reactflow"
+import Image from "next/image"
 
 interface LicenseProps {
-  name: string;
+  name: string
 }
 
 const License: React.FC<LicenseProps> = ({ name }) => {
   if (name === "CC-BY-4.0") {
     return (
-      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><Image alt="Creative Commons License" src="https://i.creativecommons.org/l/by/4.0/88x31.png" width={88} height={31}/></a>
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
+        <Image
+          alt="Creative Commons License"
+          src="https://i.creativecommons.org/l/by/4.0/88x31.png"
+          width={88}
+          height={31}
+        />
+      </a>
     )
   } else if (name == "CC-BY-SA-4.0") {
     return (
-      <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><Image alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" width={88} height={31}/></a>
+      <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
+        <Image
+          alt="Creative Commons License"
+          src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"
+          width={88}
+          height={31}
+        />
+      </a>
     )
   } else if (name == "CC-BY-NC-4.0") {
     return (
-      <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><Image alt="Creative Commons License" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" width={88} height={31}/></a>
+      <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
+        <Image
+          alt="Creative Commons License"
+          src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png"
+          width={88}
+          height={31}
+        />
+      </a>
     )
   } else if (name == "CC-BY-NC-SA-4.0") {
     return (
-      <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><Image alt="Creative Commons License" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" width={88} height={31}/></a>
+      <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
+        <Image
+          alt="Creative Commons License"
+          src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
+          width={88}
+          height={31}
+        />
+      </a>
     )
-  }  else {
-    return (<>unknown</>)
+  } else {
+    return <>unknown</>
   }
 }
 
 interface CitationListProps {
   citations: Attribution[]
 }
 
-
 const CitationList: React.FC<CitationListProps> = ({ citations }) => {
   return (
     <div className="flex flex-col space-y-4">
       {citations.map((citation, i) => (
         <div key={i} className="flex items-center space-x-4">
           <a href={citation.url}>
-            <Image src={citation.image} alt={citation.citation} className="h-40 w-40" width={88} height={31}/>
+            <Image src={citation.image} alt={citation.citation} className="h-40 w-40" width={88} height={31} />
           </a>
           <p className="text-lg font-normal text-gray-700 dark:text-gray-400">{citation.citation}</p>
           <License name={citation.license} />
         </div>
       ))}
     </div>
-  );
-};
+  )
+}
 
 interface CitationDialogProps {
-  citations: Attribution[];
-  isOpen: boolean;
-  onClose: () => void;
+  citations: Attribution[]
+  isOpen: boolean
+  onClose: () => void
 }
 
 const AttributionDialog: React.FC<CitationDialogProps> = ({ citations, isOpen, onClose }) => {
   // This is a hack to prevent the modal from rendering on the server
-  const [mounted, setMounted] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false)
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    setMounted(true)
+  }, [])
 
-  const pageLicense = overallLicense(citations);
+  const pageLicense = overallLicense(citations)
 
   return (
     <>
-    {mounted ? (
-      <Modal
-        dismissible={true}
-        show={isOpen}
-        onClose={onClose}
-
-      >
-      <Modal.Header>
-        Licensing and Attribution
-      </Modal.Header>
-      <Modal.Body>
-        <div className="flex items-center justify-between pb-4">
-          <p className="text-lg font-normal text-gray-800 dark:text-gray-300"> This page is licenced under the {pageLicense} license </p>
-          <License name={pageLicense} />
+      {mounted ? (
+        <Modal dismissible={true} show={isOpen} onClose={onClose}>
+          <Modal.Header>Licensing and Attribution</Modal.Header>
+          <Modal.Body>
+            <div className="flex items-center justify-between pb-4">
+              <p className="text-lg font-normal text-gray-800 dark:text-gray-300">
+                {" "}
+                This page is licenced under the {pageLicense} license{" "}
+              </p>
+              <License name={pageLicense} />
+            </div>
+            <p className="text-lg font-normal text-gray-800 dark:text-gray-300 pb-2">
+              Material for this page derived from:
+            </p>
+            <CitationList citations={citations} />
+          </Modal.Body>
+        </Modal>
+      ) : (
+        <div style={{ display: "none" }}>
+          <CitationList citations={citations} />
         </div>
-        <p className="text-lg font-normal text-gray-800 dark:text-gray-300 pb-2">Material for this page derived from:</p>
-        <CitationList citations={citations} />
-      </Modal.Body>
-      </Modal>
-    ) : (
-      <div style={{ display: "none" }}>
-        <CitationList citations={citations} />
-      </div>
-    )}
+      )}
     </>
-  );
-};
-
-
+  )
+}
 
 const overallLicense = (citations: Attribution[]) => {
-  return citations.map((citation) => citation.license).reduce((a: string, b: string) => {
-    if (a === b) {
-      return a
-    } 
-    const hasSA = a.includes("SA") || b.includes("SA");
-    const hasNC = a.includes("NC") || b.includes("NC");
-    return `CC-BY${hasNC ? "-NC" : ""}${hasSA ? "-SA" : ""}-4.0`
-  }, "CC-BY-4.0")
+  return citations
+    .map((citation) => citation.license)
+    .reduce((a: string, b: string) => {
+      if (a === b) {
+        return a
+      }
+      const hasSA = a.includes("SA") || b.includes("SA")
+      const hasNC = a.includes("NC") || b.includes("NC")
+      return `CC-BY${hasNC ? "-NC" : ""}${hasSA ? "-SA" : ""}-4.0`
+    }, "CC-BY-4.0")
 }
 
-export default AttributionDialog;
+export default AttributionDialog

components/Callout.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState } from "react"
 
 interface ChallengeProps {
-  content: React.ReactNode,
+  content: React.ReactNode
 }
 
 const Callout: React.FC<ChallengeProps> = ({ content }) => {