site: lint and prettier

.eslintrc.js

@@ -2,16 +2,16 @@ module.exports = {
   env: {
     browser: true,
     es2021: false,
-    node: true
+    node: true,
   },
-  extends: ['plugin:react/recommended', 'standard'],
+  extends: ["plugin:react/recommended", "standard", "prettier"],
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 8,
-    sourceType: 'module'
+    sourceType: "module",
   },
-  plugins: ['react'],
-  rules: {}
-}
+  plugins: ["react"],
+  rules: { "react/prop-types": 0 },
+};

components/Container.js

@@ -1,4 +1,5 @@
-// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis
+import React from "react";
+
 export default function Container({ children }) {
   return (
     <div className="flex flex-col min-h-screen w-full items-center">

components/Header.js

@@ -1,10 +1,8 @@
+import React from "react";
 import Link from "next/link";
 import SingleColumn from "./SingleColumn";
 import { useRouter } from "next/router";
-// import { useState, useEffect } from "react";
 import classnames from "classnames";
-// import path from "path";
-// import Section from "../components/Section";
 
 function ActiveLink({ children, href, className, currentPath }) {
   const firstCrumb = currentPath.split("/")[1];
@@ -23,10 +21,6 @@ function ActiveLink({ children, href, className, currentPath }) {
 
 export default function Header(props) {
   const currentPath = useRouter().asPath;
-
-  const routeDepth = currentPath.split("/").length;
-
-  const firstCrumb = currentPath.split("/")[1];
   return (
     <div className="flex flex-col w-full items-center">
       <SingleColumn>

components/Layout.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Meta from "./Meta";
 import Header from "./Header";
 

components/Markdown.js

@@ -1,16 +1,16 @@
-import remark from 'remark'
-import gfm from 'remark-gfm'
-import slug from 'remark-slug'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
-import rehypeStringify from 'rehype-stringify'
-import rehypeRaw from 'rehype-raw'
+import remark from "remark";
+import gfm from "remark-gfm";
+import slug from "remark-slug";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypeRaw from "rehype-raw";
 
 const options = {
-  handlers: {}
-}
+  handlers: {},
+};
 
-export default async function Markdown (content) {
+export default async function Markdown(content) {
   const result = await remark()
     .use(remarkParse, options)
     .use(gfm)
@@ -18,7 +18,7 @@ export default async function Markdown (content) {
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
     .use(rehypeStringify)
-    .process(content)
+    .process(content);
 
-  return result.toString()
+  return result.toString();
 }

components/Meta.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 
 export default function Meta() {

components/Section.js

@@ -1,3 +1,4 @@
+import React from "react";
 import classnames from "classnames";
 
 // Provides a flexible layout building block

components/Sigil.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { sigil, reactRenderer } from "@tlon/sigil-js";
 
 export default function Sigil(props) {

components/SingleColumn.js

@@ -1,4 +1,5 @@
-// Provides a limited-width column with all children center-aligned along the vertical axis
+import React from "react";
+
 export default function SingleColumn({ children }) {
   return (
     <div className="flex flex-col w-full items-center max-w-screen-2xl">

package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "autoprefixer": "^10.3.6",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",

pages/[slug].js

@@ -1,19 +1,17 @@
-import React from 'react'
-import fs from 'fs'
-import path from 'path'
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import matter from 'gray-matter'
-import { decode } from 'html-entities'
-import { contentFilePaths, CONTENT_PATH } from '../lib/api'
-import Markdown from '../components/Markdown'
-import Container from '../components/Container'
-import Layout from '../components/Layout'
-import Section from '../components/Section'
-import SingleColumn from '../components/SingleColumn'
+import React from "react";
+import fs from "fs";
+import path from "path";
+import Head from "next/head";
+import matter from "gray-matter";
+import { decode } from "html-entities";
+import { contentFilePaths, CONTENT_PATH } from "../lib/api";
+import Markdown from "../components/Markdown";
+import Container from "../components/Container";
+import Layout from "../components/Layout";
+import Section from "../components/Section";
+import SingleColumn from "../components/SingleColumn";
 
-export default function DynamicPage ({ markdown, data }) {
-  const router = useRouter()
+export default function DynamicPage({ markdown, data }) {
   return (
     <Layout>
       <Head>
@@ -32,30 +30,30 @@ export default function DynamicPage ({ markdown, data }) {
         </SingleColumn>
       </Container>
     </Layout>
-  )
+  );
 }
 
 export const getStaticProps = async ({ params }) => {
-  const pagePath = path.join(CONTENT_PATH, `${params.slug}.md`)
-  const source = fs.readFileSync(pagePath)
-  const { content, data } = matter(source)
-  const markdown = await Markdown(content)
+  const pagePath = path.join(CONTENT_PATH, `${params.slug}.md`);
+  const source = fs.readFileSync(pagePath);
+  const { content, data } = matter(source);
+  const markdown = await Markdown(content);
 
   return {
     props: {
       markdown,
-      data
-    }
-  }
-}
+      data,
+    },
+  };
+};
 
 export const getStaticPaths = async () => {
   const paths = contentFilePaths
-    .map((path) => path.replace(/\.md?$/, ''))
-    .map((slug) => ({ params: { slug } }))
+    .map((path) => path.replace(/\.md?$/, ""))
+    .map((slug) => ({ params: { slug } }));
 
   return {
     paths,
-    fallback: false
-  }
-}
+    fallback: false,
+  };
+};

pages/_app.js

@@ -1,3 +1,4 @@
+import React from "react";
 import "../styles/globals.css";
 import "../styles/prism.css";
 

pages/community.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 import matter from "gray-matter";
 import { decode } from "html-entities";

pages/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import Container from "../components/Container";