feat: 添加 Google Analytics 代码。

.env

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_FIRST_NAME=Ivan
 NEXT_PUBLIC_LAST_NAME=Li
+BACKEND_URI=http://127.0.0.1:7132/graphql

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "superjson"
+  ]
+}

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ["next/babel"],
+  plugins: ["superjson-next"],
+};

codegen.yml

@@ -1,11 +1,11 @@
 overwrite: true
-schema: "http://api.blog.localhost/graphql"
+schema: "http://localhost:7132/graphql"
 generates:
   commons/graphql/generated.tsx:
     plugins:
       - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
-  ./graphql.schema.json:
+  commons/graphql/graphql.schema.json:
     plugins:
       - "introspection"

commons/graphql/client.ts

@@ -1,6 +1,112 @@
-import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { useMemo } from "react";
+import {
+  ApolloClient,
+  ApolloLink,
+  from,
+  HttpLink,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from "@apollo/client";
+import { concatPagination } from "@apollo/client/utilities";
+import { clone, equals, mergeDeepWith } from "ramda";
+import { onError } from "@apollo/client/link/error";
+import { buildClientSchema, IntrospectionQuery } from "graphql";
+import { DateTimeResolver } from "graphql-scalars";
+import introspectionResult from "./graphql.schema.json"; // schema 文件
+import { withScalars } from "apollo-link-scalars";
+import superjson from "superjson";
 
-export const client = new ApolloClient({
+const schema = buildClientSchema(
-  uri: "/api/graphql",
+  introspectionResult as unknown as IntrospectionQuery
-  cache: new InMemoryCache(),
+);
-});
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};
+
+export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
+
+let apolloClient: ApolloClient<NormalizedCacheObject>;
+
+function createApolloClient() {
+  const httpLink = new HttpLink({
+    uri:
+      typeof window === "undefined" ? process.env.BACKEND_URI : "/api/graphql", // Server URL (must be absolute)
+    credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
+  });
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors)
+      graphQLErrors.forEach(({ message, locations, path }) =>
+        console.log(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        )
+      );
+
+    if (networkError) console.log(`[Network error]: ${networkError}`);
+  });
+  return new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link: from([
+      errorLink,
+      withScalars({ schema, typesMap }) as ApolloLink,
+      httpLink,
+    ]),
+    cache: new InMemoryCache({
+      typePolicies: {
+        Query: {
+          fields: {
+            allPosts: concatPagination(),
+          },
+        },
+      },
+    }),
+  });
+}
+
+export function initializeApollo(initialState = null) {
+  const _apolloClient = apolloClient ?? createApolloClient();
+
+  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
+  // gets hydrated here
+  if (initialState) {
+    // Get existing cache, loaded during client side data fetching
+    const existingCache = _apolloClient.extract();
+
+    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
+    const data = mergeDeepWith(
+      (a, b) => {
+        if (Array.isArray(a) && Array.isArray(b)) {
+          return [...a, ...b.filter((bi) => a.every((ai) => !equals(ai, bi)))];
+        } else {
+          return b;
+        }
+      },
+      initialState,
+      existingCache
+    );
+
+    // Restore the cache with the merged data
+    _apolloClient.cache.restore(data);
+  }
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === "undefined") return _apolloClient;
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient;
+
+  return _apolloClient;
+}
+
+export function addApolloState(client, pageProps) {
+  if (pageProps?.props) {
+    pageProps.props[APOLLO_STATE_PROP_NAME] = clone(client.cache.extract());
+  }
+
+  return pageProps;
+}
+
+export function useApollo(pageProps) {
+  const state = pageProps[APOLLO_STATE_PROP_NAME];
+  const store = useMemo(() => initializeApollo(state), [state]);
+  return store;
+}

commons/graphql/generated.tsx

@@ -21,6 +21,8 @@ export type Article = {
   content: Scalars['String'];
   publishedAt?: Maybe<Scalars['DateTime']>;
   tags: Array<Scalars['String']>;
+  html: Scalars['String'];
+  description?: Maybe<Scalars['String']>;
 };
 
 export type CreateArticleInput = {
@@ -30,6 +32,10 @@ export type CreateArticleInput = {
   tags: Array<Scalars['String']>;
 };
 
+export type CreateTagInput = {
+  name: Scalars['String'];
+};
+
 
 export type Hello = {
   __typename?: 'Hello';
@@ -41,6 +47,9 @@ export type Mutation = {
   createArticle: Article;
   updateArticle: Article;
   removeArticle: Scalars['Int'];
+  createTag: Tag;
+  updateTag: Tag;
+  removeTag: Tag;
 };
 
 
@@ -58,11 +67,28 @@ export type MutationRemoveArticleArgs = {
   id: Scalars['String'];
 };
 
+
+export type MutationCreateTagArgs = {
+  createTagInput: CreateTagInput;
+};
+
+
+export type MutationUpdateTagArgs = {
+  updateTagInput: UpdateTagInput;
+};
+
+
+export type MutationRemoveTagArgs = {
+  id: Scalars['String'];
+};
+
 export type Query = {
   __typename?: 'Query';
   hello: Hello;
   articles: Array<Article>;
   article: Article;
+  tags: Array<Tag>;
+  tag: Tag;
 };
 
 
@@ -70,6 +96,17 @@ export type QueryArticleArgs = {
   id: Scalars['String'];
 };
 
+
+export type QueryTagArgs = {
+  id: Scalars['String'];
+};
+
+export type Tag = {
+  __typename?: 'Tag';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+};
+
 export type UpdateArticleInput = {
   title?: Maybe<Scalars['String']>;
   content?: Maybe<Scalars['String']>;
@@ -77,3 +114,8 @@ export type UpdateArticleInput = {
   tags?: Maybe<Array<Scalars['String']>>;
   id: Scalars['String'];
 };
+
+export type UpdateTagInput = {
+  name?: Maybe<Scalars['String']>;
+  id: Scalars['String'];
+};

commons/graphql/graphql.schema.json

@@ -96,6 +96,34 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "html",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "description",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -202,6 +230,33 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "CreateTagInput",
+        "description": null,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "name",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "SCALAR",
         "name": "DateTime",
@@ -342,6 +397,105 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "createTag",
+            "description": null,
+            "args": [
+              {
+                "name": "createTagInput",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "CreateTagInput",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Tag",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "updateTag",
+            "description": null,
+            "args": [
+              {
+                "name": "updateTagInput",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "UpdateTagInput",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Tag",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "removeTag",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Tag",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -436,6 +590,106 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "tags",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "Tag",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "tag",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Tag",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "OBJECT",
+        "name": "Tag",
+        "description": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -526,6 +780,45 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "UpdateTagInput",
+        "description": null,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "name",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "id",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "SCALAR",
         "name": "Boolean",

commons/graphql/queries.ts

@@ -5,7 +5,19 @@ export const ARTICLE_FOR_HOME = gql`
     articles {
       id
       title
-      content
+      description
+      publishedAt
+    }
+  }
+`;
+
+export const ARTICLE = gql`
+  query Article($id: String!) {
+    article(id: $id) {
+      id
+      title
+      description
+      html
       publishedAt
     }
   }

commons/theme.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, FC, useContext, useEffect, useState } from "react";
+
+const getInitialTheme = (): Mode => {
+  if (typeof window === "undefined") {
+    return 'auto';
+  }
+  const text = window?.localStorage?.getItem('theme');
+  switch (text) {
+    case 'dark': return 'dark';
+    case 'light': return 'light';
+    default: return 'auto';
+  }
+};
+
+type RawMode = "light" | "dark";
+type Mode = RawMode | "auto";
+
+interface Content {
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+}
+
+export const ThemeContext = createContext<Content>({
+  mode: 'error' as Mode,
+  setMode: (_) => {console.log},
+});
+
+export const ThemeProvider: FC = ({ children }) => {
+  const [mode, setMode] = useState<Mode>(() => getInitialTheme());
+
+  useEffect(() => {
+    if (window) {
+      localStorage.setItem("theme", mode);
+      let _mode = mode;
+      if (_mode === "auto") {
+        _mode =
+          window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      if (_mode === "dark") {
+        window.document.documentElement.classList.add("dark");
+      } else {
+        window.document.documentElement.classList.remove("dark");
+      }
+    }
+  }, [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export function useTheme () {
+  return useContext(ThemeContext);
+}

components/layouts/global-sidebar.module.css

@@ -1,19 +1,25 @@
 .wrapper {
-  @apply bg-green-400 text-white;
+  @apply bg-green-400 text-white min-h-screen;
+  @apply fixed top-0 sm:left-0 right-0 bottom-0 sm:static -left-full;
+  @apply transition-all;
   :global(.dark) & {
     @apply bg-gray-800 text-gray-400;
   }
+
+  &.focusOpen {
+    @apply left-0;
+  }
 }
 .sidebar {
   @apply overflow-hidden flex flex-col fixed top-0;
-  @apply text-center shadow-2xl;
+  @apply text-center shadow-2xl h-screen;
-  height: 100vh;
   padding-top: 10vh;
 }
 
 .avatar {
-  @apply w-16 h-16;
+  @apply w-36 h-36 rounded-full;
-  @apply md:w-36 md:h-36 rounded-full;
+  @apply sm:w-16 sm:h-16;
+  @apply md:w-36 md:h-36;
   @apply mx-auto md:my-8 flex-none;
   
   :global(.dark) & {
@@ -22,14 +28,14 @@
 }
 
 .name {
-  @apply md:text-3xl md:tracking-wide font-mono;
+  @apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
   @apply md:my-8 my-4 flex-none select-all;
 }
 .nav {
   @apply my-auto text-left self-center;
 }
 .navItem {
-  @apply leading-8 md:text-lg cursor-pointer my-2;
+  @apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
   @apply tracking-widest;
   small {
     @apply text-xs md:inline hidden;

components/layouts/global-sidebar.tsx

@@ -1,19 +1,28 @@
-import React, { FC } from "react";
+import React, { FC, MouseEventHandler } from "react";
-import styles from "./global-layout.module.css";
+import styles from "./global-sidebar.module.css";
-import Image from "next/image";
 import Link from "next/link";
-import classnames from 'classnames';
+import classnames from "classnames";
 
 const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;
 
 interface Props {
   className: string;
+  focusOpen?: boolean;
+  onClick?: MouseEventHandler;
 }
 
-export const GlobalSidebar: FC<Props> = ({className}) => {
+export const GlobalSidebar: FC<Props> = ({
-
+  className,
+  focusOpen = false,
+  onClick,
+}) => {
   return (
-    <div className={classnames(className, styles.wrapper)}>
+    <div
+      className={classnames(className, styles.wrapper, {
+        [styles.focusOpen]: focusOpen,
+      })}
+      onClick={onClick}
+    >
       <aside className={classnames(className, styles.sidebar)}>
         <img className={styles.avatar} src="/images/avatar.png" />
         <h2 className={styles.name}>{fullName}</h2>

components/switch-theme.tsx

@@ -0,0 +1,10 @@
+import { useTheme } from "../commons/theme";
+
+export const SwitchTheme = () => {
+  const { setMode, mode } = useTheme();
+
+  if (mode === "light") {
+    return <button onClick={() => setMode("dark")}>暗色</button>;
+  }
+  return <button onClick={() => setMode("light")}>亮色</button>;
+};

ecosystem.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  apps: [
+    {
+      name: "blog-fs",
+      script: "npm",
+      args: "run start",
+      watch: false,
+      ignore_watch: ["node_modules"],
+      log_date_format: "MM-DD HH:mm:ss.SSS Z",
+      env: {},
+      max_restarts: 5,
+    },
+  ],
+};

package-lock.json

@@ -8,13 +8,24 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.3.16",
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
+        "apollo-link-scalars": "^2.1.3",
+        "babel-plugin-superjson-next": "^0.3.0",
         "classnames": "^2.2.6",
+        "clsx": "^1.1.1",
+        "date-fns": "^2.22.1",
         "graphql": "^15.5.0",
+        "graphql-scalars": "^1.10.0",
+        "highlight.js": "^11.0.1",
         "next": "10.2.0",
         "postcss-import": "^14.0.1",
         "postcss-nested": "^5.0.5",
+        "ramda": "^0.27.1",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "superjson": "^1.7.4"
       },
       "devDependencies": {
         "@graphql-codegen/cli": "1.21.4",
@@ -22,11 +33,8 @@
         "@graphql-codegen/typescript": "1.22.0",
         "@graphql-codegen/typescript-operations": "1.17.16",
         "@graphql-codegen/typescript-react-apollo": "2.2.4",
-        "@types/autoprefixer": "^10.2.0",
+        "@types/date-fns": "^2.6.0",
-        "@types/classnames": "^2.3.1",
-        "@types/graphql": "^14.5.0",
         "@types/postcss-import": "^12.0.0",
-        "@types/postcss-nested": "^4.2.3",
         "@types/react": "^17.0.4",
         "@types/tailwindcss": "^2.0.2",
         "autoprefixer": "^10.2.5",
@@ -368,7 +376,6 @@
       "version": "7.13.12",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
       "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.13.12"
       }
@@ -377,7 +384,6 @@
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.0.tgz",
       "integrity": "sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.14.0",
         "to-fast-properties": "^2.0.0"
@@ -634,9 +640,12 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.0",
+      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.12.17",
@@ -1222,6 +1231,51 @@
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
       "dev": true
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -2335,34 +2389,14 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@types/autoprefixer": {
+    "node_modules/@types/date-fns": {
-      "version": "10.2.0",
+      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
-      "integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
+      "integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
-      "deprecated": "This is a stub types definition. autoprefixer provides its own type definitions, so you do not need this installed.",
+      "deprecated": "This is a stub types definition for date-fns (https://github.com/date-fns/date-fns). date-fns provides its own type definitions, so you don't need @types/date-fns installed!",
       "dev": true,
       "dependencies": {
-        "autoprefixer": "*"
+        "date-fns": "*"
-      }
-    },
-    "node_modules/@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "classnames": "*"
-      }
-    },
-    "node_modules/@types/graphql": {
-      "version": "14.5.0",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
-      "integrity": "sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==",
-      "deprecated": "This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "graphql": "*"
       }
     },
     "node_modules/@types/http-proxy-agent": {
@@ -2454,16 +2488,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@types/postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
-      "deprecated": "This is a stub types definition. postcss-nested provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "postcss-nested": "*"
-      }
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -2694,6 +2718,35 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "dependencies": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "peerDependencies": {
+        "graphql": "14.x || 15.x"
+      }
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -2879,6 +2932,35 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/babel-plugin-superjson-next": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.3.0.tgz",
+      "integrity": "sha512-fTE8uWUy9OJG7PkRNP094XDdieoBsZR2iatxurbNqLyd4INXpwuuQ246iLu4+dAeQHtGhOJZxsPR8KdbNvdnlQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/types": "^7.13.17",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "next": ">=9.0.0",
+        "superjson": "1.x"
+      }
+    },
+    "node_modules/babel-plugin-superjson-next/node_modules/@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -3466,6 +3548,14 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -3764,10 +3854,16 @@
       "dev": true
     },
     "node_modules/date-fns": {
-      "version": "1.30.1",
+      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
-      "dev": true
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
     },
     "node_modules/debounce": {
       "version": "1.2.1",
@@ -4727,6 +4823,25 @@
         "node": ">= 6"
       }
     },
+    "node_modules/graphql-scalars": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "dependencies": {
+        "tslib": "~2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/graphql-scalars/node_modules/tslib": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+    },
     "node_modules/graphql-tag": {
       "version": "2.12.4",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@@ -4885,6 +5000,14 @@
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5996,6 +6119,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/listr-verbose-renderer/node_modules/date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+      "dev": true
+    },
     "node_modules/listr-verbose-renderer/node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -6077,12 +6206,37 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "node_modules/lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "node_modules/lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
+    "node_modules/lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
     "node_modules/lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "node_modules/lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -6101,11 +6255,15 @@
       "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
       "dev": true
     },
+    "node_modules/lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-      "dev": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -6116,8 +6274,22 @@
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-      "dev": true
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "node_modules/lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
+    },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
@@ -6125,6 +6297,16 @@
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
       "dev": true
     },
+    "node_modules/lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -6142,6 +6324,11 @@
       "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
       "dev": true
     },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -7681,6 +7868,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ramda": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
+      "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8583,6 +8775,39 @@
         "stylis": "^3.5.0"
       }
     },
+    "node_modules/superjson": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.7.4.tgz",
+      "integrity": "sha512-A6DYTe04+x4L9NPywHeGZNy6/gLe8qqKCwhEfTH9M4eXpTjiTsF83JZ3j4hwXx1ogRb4779nWxsDlJGIECOJkw==",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "lodash.clonedeep": "^4.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/superjson/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/superjson/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -9403,6 +9628,15 @@
       "version": "0.8.15",
       "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
       "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "dependencies": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
     }
   },
   "dependencies": {
@@ -9698,7 +9932,6 @@
       "version": "7.13.12",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
       "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.13.12"
       },
@@ -9707,7 +9940,6 @@
           "version": "7.14.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.0.tgz",
           "integrity": "sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.14.0",
             "to-fast-properties": "^2.0.0"
@@ -9950,9 +10182,9 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.14.0",
+      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
     },
     "@babel/helper-validator-option": {
       "version": "7.12.17",
@@ -10436,6 +10668,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -11397,31 +11658,13 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
-    "@types/autoprefixer": {
+    "@types/date-fns": {
-      "version": "10.2.0",
+      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
-      "integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
+      "integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
       "dev": true,
       "requires": {
-        "autoprefixer": "*"
+        "date-fns": "*"
-      }
-    },
-    "@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "dev": true,
-      "requires": {
-        "classnames": "*"
-      }
-    },
-    "@types/graphql": {
-      "version": "14.5.0",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
-      "integrity": "sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==",
-      "dev": true,
-      "requires": {
-        "graphql": "*"
       }
     },
     "@types/http-proxy-agent": {
@@ -11502,15 +11745,6 @@
         }
       }
     },
-    "@types/postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
-      "dev": true,
-      "requires": {
-        "postcss-nested": "*"
-      }
-    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -11698,6 +11932,29 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "requires": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      }
+    },
     "arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -11837,6 +12094,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-superjson-next": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.3.0.tgz",
+      "integrity": "sha512-fTE8uWUy9OJG7PkRNP094XDdieoBsZR2iatxurbNqLyd4INXpwuuQ246iLu4+dAeQHtGhOJZxsPR8KdbNvdnlQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/types": "^7.13.17",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -12339,6 +12617,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -12610,10 +12893,9 @@
       "dev": true
     },
     "date-fns": {
-      "version": "1.30.1",
+      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
-      "dev": true
     },
     "debounce": {
       "version": "1.2.1",
@@ -13392,6 +13674,21 @@
         }
       }
     },
+    "graphql-scalars": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "requires": {
+        "tslib": "~2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "graphql-tag": {
       "version": "2.12.4",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@@ -13509,6 +13806,11 @@
         }
       }
     },
+    "highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -14346,6 +14648,12 @@
             "restore-cursor": "^2.0.0"
           }
         },
+        "date-fns": {
+          "version": "1.30.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+          "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+          "dev": true
+        },
         "figures": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -14405,12 +14713,37 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
+    "lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -14429,11 +14762,15 @@
       "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
       "dev": true
     },
+    "lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
     "lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-      "dev": true
     },
     "lodash.isplainobject": {
       "version": "4.0.6",
@@ -14444,8 +14781,22 @@
     "lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-      "dev": true
+    },
+    "lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
+    },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
     },
     "lodash.once": {
       "version": "4.1.1",
@@ -14453,6 +14804,16 @@
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
       "dev": true
     },
+    "lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -14470,6 +14831,11 @@
       "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
       "dev": true
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -15684,6 +16050,11 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
+    "ramda": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
+      "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -16426,6 +16797,30 @@
       "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
       "requires": {}
     },
+    "superjson": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.7.4.tgz",
+      "integrity": "sha512-A6DYTe04+x4L9NPywHeGZNy6/gLe8qqKCwhEfTH9M4eXpTjiTsF83JZ3j4hwXx1ogRb4779nWxsDlJGIECOJkw==",
+      "requires": {
+        "debug": "^4.3.1",
+        "lodash.clonedeep": "^4.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17051,6 +17446,15 @@
       "version": "0.8.15",
       "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
       "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "requires": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
     }
   }
 }

package.json

@@ -5,19 +5,30 @@
   "scripts": {
     "dev": "next dev -p 7133",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 7133",
     "predev": "npm run generate",
     "generate": "graphql-codegen --config codegen.yml"
   },
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "apollo-link-scalars": "^2.1.3",
+    "babel-plugin-superjson-next": "^0.3.0",
     "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
+    "date-fns": "^2.22.1",
     "graphql": "^15.5.0",
+    "graphql-scalars": "^1.10.0",
+    "highlight.js": "^11.0.1",
     "next": "10.2.0",
     "postcss-import": "^14.0.1",
     "postcss-nested": "^5.0.5",
+    "ramda": "^0.27.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "superjson": "^1.7.4"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "1.21.4",
@@ -25,11 +36,8 @@
     "@graphql-codegen/typescript": "1.22.0",
     "@graphql-codegen/typescript-operations": "1.17.16",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
-    "@types/autoprefixer": "^10.2.0",
+    "@types/date-fns": "^2.6.0",
-    "@types/classnames": "^2.3.1",
-    "@types/graphql": "^14.5.0",
     "@types/postcss-import": "^12.0.0",
-    "@types/postcss-nested": "^4.2.3",
     "@types/react": "^17.0.4",
     "@types/tailwindcss": "^2.0.2",
     "autoprefixer": "^10.2.5",

pages/_app.module.css

@@ -1,17 +1,18 @@
 .page {
   @apply flex;
+  min-width: 370px;
 }
 .sidebar {
-  @apply md:w-64 w-32 flex-none;
+  @apply w-full md:w-64 sm:w-32 flex-none;
 }
 .primary {
-  @apply flex-auto;
+  @apply flex-auto w-screen min-w-0;
   @apply bg-gray-100 text-gray-700;
   :global(.dark) & {
     @apply bg-gray-700 text-gray-300;
   }
   .wrapper {
-    @apply mx-auto max-w-screen-xl;
+    @apply mx-auto max-w-screen-lg;
   }
 }
 .pageHeader {
@@ -20,4 +21,16 @@
   :global(.dark) & {
     @apply bg-gray-800;
   }
+}
+.headerBtn {
+  @apply sm:hidden text-green-400;
+  @apply w-4 h-4 p-0 focus:outline-none;
+
+  &.opened {
+    @apply text-white;
+  }
+
+  & > * {
+    @apply absolute;
+  }
 }

pages/_app.tsx

@@ -1,43 +1,72 @@
 import "../styles/globals.css";
 import "tailwindcss/tailwind.css";
-import React from "react";
+import React, { useState } from "react";
 import { GlobalSidebar } from "../components/layouts/global-sidebar";
 import styles from "./_app.module.css";
 import { ApolloProvider } from "@apollo/client";
-import { client } from "../commons/graphql/client";
+import { useApollo } from "../commons/graphql/client";
+import { ThemeProvider, useTheme } from "../commons/theme";
+import { SwitchTheme } from "../components/switch-theme";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCross,
+  faHamburger,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+import clsx from "clsx";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
+  const apolloClient = useApollo(pageProps);
+  const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
   return (
-    <ApolloProvider client={client}>
+    <ApolloProvider client={apolloClient}>
-      <div className={styles.page}>
+      <Head>
-        <GlobalSidebar className={styles.sidebar} />
+        <title>Ivan‘s Blog</title>
-        <div className={styles.primary}>
+        <script
-          <header className={styles.pageHeader}>
+          async
-            <h1>{"Ivan Li 的个人博客"}</h1>
+          src="https://www.googletagmanager.com/gtag/js?id=UA-120892498-1"
-            <div className={styles.actions}>
+        ></script>
-              <button onClick={() => switchTheme("light")}>亮色</button>
+        {`<script>
-              <button onClick={() => switchTheme("dark")}>暗色</button>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-120892498-1');
+        </script>`}
+      </Head>
+      <ThemeProvider>
+        <div className={styles.page}>
+          <GlobalSidebar
+            className={styles.sidebar}
+            focusOpen={focusOpenSidebar}
+            onClick={() => setFocusOpenSidebar(false)}
+          />
+          <div className={styles.primary}>
+            <header className={styles.pageHeader}>
+              <button
+                className={clsx(styles.headerBtn, {
+                  [styles.opened]: focusOpenSidebar,
+                })}
+                onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
+              >
+                <FontAwesomeIcon
+                  icon={focusOpenSidebar ? faTimes : faHamburger}
+                />
+              </button>
+              <h1>{"Ivan Li 的个人博客"}</h1>
+              <div className={styles.actions}>
+                <SwitchTheme />
+              </div>
+            </header>
+            <div className={styles.wrapper}>
+              <Component {...pageProps} />
             </div>
-          </header>
-          <div className={styles.wrapper}>
-            <Component {...pageProps} />
           </div>
         </div>
-      </div>
+      </ThemeProvider>
     </ApolloProvider>
   );
 }
 
-function switchTheme(mode: "light" | "dark" | "auto") {
-  if (mode === "auto") {
-    mode = "light";
-  }
-
-  if (mode === "dark") {
-    document.documentElement.classList.add("dark");
-  } else {
-    document.documentElement.classList.remove("dark");
-  }
-}
-
 export default MyApp;

pages/articles/[id].tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import styles from "./article.module.css";
+import { GetServerSideProps } from "next";
+import { addApolloState, initializeApollo } from "../../commons/graphql/client";
+import { ARTICLE } from "../../commons/graphql/queries";
+import { Article } from "../../commons/graphql/generated";
+import { formatRelative } from "date-fns";
+import { zhCN } from "date-fns/locale";
+import Head from "next/head";
+interface Props {
+  article: Article;
+}
+const ArticleDetails: FC<Props> = ({ article }) => {
+  // const router = useRouter()
+  // const { data } = useQuery<{ article: Article }>(ARTICLE, {
+  //   variables: router.query,
+  // });
+
+  return (
+    <main className={styles.articleDetails}>
+      <Head>
+        <title>{article.title} - Ivan‘s Blog - IvanLi.cc</title>
+      </Head>
+      <article className={styles.article}>
+        <header>
+          <h1>{article.title}</h1>
+          <div className={styles.headerInfo}>
+            <address>作者 Ivan Li，发布于 </address>
+            <time>
+              {formatRelative(article.publishedAt, new Date(), {
+                locale: zhCN,
+              })}
+            </time>
+          </div>
+        </header>
+        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
+        <footer>
+          <div className={styles.articleEnd}>The End</div>
+        </footer>
+      </article>
+    </main>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const apolloClient = initializeApollo();
+
+  const { data } = await apolloClient.query<{ article: Article }>({
+    query: ARTICLE,
+    variables: params,
+  });
+
+  return addApolloState(apolloClient, {
+    props: { article: data.article },
+  });
+};
+
+export default ArticleDetails;

pages/articles/article.module.css

@@ -0,0 +1,382 @@
+.articleDetail {
+}
+.article {
+  @apply bg-gray-50 md:mx-2 overflow-hidden rounded-xl my-6;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
+  & > header {
+    @apply my-8 mx-4;
+    h1 {
+      @apply text-2xl md:text-4xl font-medium mb-4;
+
+      :global(.dark) & {
+        @apply text-gray-200;
+      }
+    }
+  }
+  & > div {
+    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      @apply text-red-400;
+
+      :global(.dark) & {
+        @apply text-white;
+      }
+    }
+
+    h1 {
+      @apply hidden;
+    }
+
+    h2 {
+      @apply text-2xl mt-8 mb-4 font-semibold border-b border-red-500 leading-10;
+
+      :global(.dark) & {
+        @apply border-green-700;
+      }
+    }
+
+    h3 {
+      @apply text-xl mt-6 mb-2 font-light;
+    }
+
+    h4 {
+      @apply mt-4 font-medium;
+    }
+
+    p {
+      @apply my-4;
+    }
+
+    ul {
+      @apply pl-4;
+
+      li {
+        @apply list-disc;
+      }
+    }
+    ol {
+      @apply pl-4;
+
+      li {
+        @apply list-decimal;
+      }
+    }
+
+    a {
+      @apply text-red-400 underline;
+
+      :global(.dark) & {
+        @apply text-green-500;
+      }
+      &:hover {
+        @apply filter saturate-200;
+      }
+    }
+
+    code,
+    pre {
+      @apply font-mono rounded;
+    }
+
+    blockquote {
+      @apply bg-gray-400 bg-opacity-10 px-4 overflow-hidden border-l-2 border-green-400;
+    }
+
+    code:not(:global(.hljs)) {
+      @apply p-1 text-red-500 bg-red-100;
+      :global(.dark) & {
+        @apply bg-green-800 bg-opacity-20 text-green-400;
+      }
+    }
+    code:global(.hljs) {
+      @apply text-sm;
+    }
+
+    :global {
+      :not(:global(.dark)) & {
+        pre code.hljs {
+          display: block;
+          overflow-x: auto;
+          padding: 1em;
+        }
+
+        code.hljs {
+          padding: 3px 5px;
+        }
+
+        .hljs {
+          color: #68615e;
+          background: #f1efee;
+        }
+
+        .hljs ::selection {
+          color: #a8a19f;
+        }
+
+        /* purposely do not highlight these things */
+        .hljs-formula,
+        .hljs-params,
+        .hljs-property {
+        }
+
+        /* base03 - #9c9491 -  Comments, Invisibles, Line Highlighting */
+        .hljs-comment {
+          color: #9c9491;
+        }
+
+        /* base04 - #766e6b -  Dark Foreground (Used for status bars) */
+        .hljs-tag {
+          color: #766e6b;
+        }
+
+        /* base05 - #68615e -  Default Foreground, Caret, Delimiters, Operators */
+        .hljs-subst,
+        .hljs-punctuation,
+        .hljs-operator {
+          color: #68615e;
+        }
+
+        .hljs-operator {
+          opacity: 0.7;
+        }
+
+        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+        .hljs-bullet,
+        .hljs-variable,
+        .hljs-template-variable,
+        .hljs-selector-tag,
+        .hljs-name,
+        .hljs-deletion {
+          color: #f22c40;
+        }
+
+        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+        .hljs-symbol,
+        .hljs-number,
+        .hljs-link,
+        .hljs-attr,
+        .hljs-variable.constant_,
+        .hljs-literal {
+          color: #df5320;
+        }
+
+        /* base0A - Classes, Markup Bold, Search Text Background */
+        .hljs-title,
+        .hljs-class .hljs-title,
+        .hljs-title.class_ {
+          color: #c38418;
+        }
+
+        .hljs-strong {
+          font-weight: bold;
+          color: #c38418;
+        }
+
+        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+        .hljs-code,
+        .hljs-addition,
+        .hljs-title.class_.inherited__,
+        .hljs-string {
+          color: #7b9726;
+        }
+
+        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+        .hljs-built_in,
+        .hljs-doctag,
+        .hljs-quote,
+        .hljs-keyword.hljs-atrule,
+        .hljs-regexp {
+          color: #3d97b8;
+        }
+
+        /* base0D - Functions, Methods, Attribute IDs, Headings */
+        .hljs-function .hljs-title,
+        .hljs-attribute,
+        .ruby .hljs-property,
+        .hljs-title.function_,
+        .hljs-section {
+          color: #407ee7;
+        }
+
+        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+        .hljs-type,
+        .hljs-template-tag,
+        .diff .hljs-meta,
+        .hljs-keyword {
+          color: #6666ea;
+        }
+        .hljs-emphasis {
+          color: #6666ea;
+          font-style: italic;
+        }
+
+        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+        .hljs-meta,
+        .hljs-meta .hljs-keyword,
+        .hljs-meta .hljs-string {
+          color: #c33ff3;
+        }
+
+        .hljs-meta .hljs-keyword,
+        .hljs-meta-keyword {
+          font-weight: bold;
+        }
+      }
+      :global(.dark) & {
+        pre code.hljs {
+          display: block;
+          overflow-x: auto;
+          padding: 1em;
+        }
+
+        code.hljs {
+          padding: 3px 5px;
+        }
+
+        .hljs {
+          color: #929181;
+          background: #22221b;
+        }
+
+        .hljs ::selection {
+          color: #5f5e4e;
+        }
+
+        /* purposely do not highlight these things */
+        .hljs-formula,
+        .hljs-params,
+        .hljs-property {
+        }
+
+        /* base03 - #6c6b5a -  Comments, Invisibles, Line Highlighting */
+        .hljs-comment {
+          color: #6c6b5a;
+        }
+
+        /* base04 - #878573 -  Dark Foreground (Used for status bars) */
+        .hljs-tag {
+          color: #878573;
+        }
+
+        /* base05 - #929181 -  Default Foreground, Caret, Delimiters, Operators */
+        .hljs-subst,
+        .hljs-punctuation,
+        .hljs-operator {
+          color: #929181;
+        }
+
+        .hljs-operator {
+          opacity: 0.7;
+        }
+
+        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+        .hljs-bullet,
+        .hljs-variable,
+        .hljs-template-variable,
+        .hljs-selector-tag,
+        .hljs-name,
+        .hljs-deletion {
+          color: #ba6236;
+        }
+
+        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+        .hljs-symbol,
+        .hljs-number,
+        .hljs-link,
+        .hljs-attr,
+        .hljs-variable.constant_,
+        .hljs-literal {
+          color: #ae7313;
+        }
+
+        /* base0A - Classes, Markup Bold, Search Text Background */
+        .hljs-title,
+        .hljs-class .hljs-title,
+        .hljs-title.class_ {
+          color: #a5980d;
+        }
+
+        .hljs-strong {
+          font-weight: bold;
+          color: #a5980d;
+        }
+
+        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+        .hljs-code,
+        .hljs-addition,
+        .hljs-title.class_.inherited__,
+        .hljs-string {
+          color: #7d9726;
+        }
+
+        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+        .hljs-built_in,
+        .hljs-doctag, /* guessing */
+        .hljs-quote,
+        .hljs-keyword.hljs-atrule,
+        .hljs-regexp {
+          color: #5b9d48;
+        }
+
+        /* base0D - Functions, Methods, Attribute IDs, Headings */
+        .hljs-function .hljs-title,
+        .hljs-attribute,
+        .ruby .hljs-property,
+        .hljs-title.function_,
+        .hljs-section {
+          color: #36a166;
+        }
+
+        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+        .hljs-type,
+        .hljs-template-tag,
+        .diff .hljs-meta,
+        .hljs-keyword {
+          color: #5f9182;
+        }
+        .hljs-emphasis {
+          color: #5f9182;
+          font-style: italic;
+        }
+
+        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+        .hljs-meta,
+        .hljs-meta .hljs-keyword,
+        .hljs-meta .hljs-string {
+          color: #9d6c7c;
+        }
+
+        .hljs-meta .hljs-keyword,
+        .hljs-meta-keyword {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+.headerInfo {
+  @apply text-sm text-gray-500 pl-2;
+  :global(.dark) & {
+    @apply text-gray-400;
+  }
+  
+  address, time {
+    @apply inline not-italic;
+  }
+}
+.articleEnd {
+  @apply text-center text-gray-400 text-sm my-6;
+
+  &:before,
+  &:after {
+    content: "※";
+    @apply mx-4 text-xs align-text-top;
+  }
+}

pages/index.module.css

@@ -6,20 +6,20 @@
 .item {
   @apply my-2 mx-4 px-4 overflow-hidden;
   @apply rounded-md shadow-sm hover:shadow;
-  @apply bg-gray-50 hover:bg-white;
+  @apply bg-gray-50 hover:bg-white cursor-pointer;
 
   :global(.dark) & {
     @apply bg-gray-800;
   }
-  
+
   .title {
-    @apply text-lg my-4;
+    @apply text-xl my-4;
   }
   .description {
-    @apply text-sm text-gray-600 leading-6 my-4;
+    @apply text-base text-gray-600 leading-6 my-4 font-light;
 
-  :global(.dark) & {
+    :global(.dark) & {
-    @apply text-gray-400;
+      @apply text-gray-400;
-  }
+    }
   }
 }

pages/index.tsx

@@ -1,23 +1,46 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from "@apollo/client";
-import { Article } from '../commons/graphql/generated';
+import { GetServerSideProps } from 'next';
-import { ARTICLE_FOR_HOME } from '../commons/graphql/queries';
+import Link from "next/link";
-import styles from './index.module.css';
+import React from "react";
+import { addApolloState, initializeApollo } from '../commons/graphql/client';
+import { Article } from "../commons/graphql/generated";
+import { ARTICLE_FOR_HOME } from "../commons/graphql/queries";
+import styles from "./index.module.css";
 
 export default function Index() {
-  const { data, loading } = useQuery<{articles: Article[]}>(ARTICLE_FOR_HOME);
+  const { data, loading } = useQuery<{ articles: Article[] }>(ARTICLE_FOR_HOME);
 
-  return <main className={styles.index}>
+  return (
-    <ol>
+    <main className={styles.index}>
-      {
+      <ol>
-        data?.articles?.map(article => <Item article={article} key={article.id} />)
+        {data?.articles?.map((article) => (
-      }
+          <Item article={article} key={article.id} />
-    </ol>
+        ))}
-  </main>;
+      </ol>
+    </main>
+  );
 }
 
-function Item({article}: {article: Article}) {
+function Item({ article }: { article: Article }) {
-  return <li className={styles.item}>
+  return (
-    <h2 className={styles.title}>{article.title}</h2>
+    <Link href={`/articles/${article.id}`}>
-    <p className={styles.description}>{article.content}</p>
+      <li className={styles.item}>
-  </li>
+        <h2 className={styles.title}>{article.title}</h2>
-}
+        <p className={styles.description}>{article.description}</p>
+      </li>
+    </Link>
+  );
+}
+
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: ARTICLE_FOR_HOME,
+  });
+
+  return addApolloState(apolloClient, {
+    props: {},
+  });
+};

styles/globals.css

@@ -0,0 +1,3 @@
+* {
+  @apply transition-colors;
+}