commons/graphql/generated.tsx

@@ -21,8 +21,6 @@ export type Article = {
   content: Scalars['String'];
   publishedAt?: Maybe<Scalars['DateTime']>;
   tags: Array<Scalars['String']>;
-  html: Scalars['String'];
-  description?: Maybe<Scalars['String']>;
 };
 
 export type CreateArticleInput = {

commons/graphql/queries.ts

@@ -5,7 +5,7 @@ export const ARTICLE_FOR_HOME = gql`
     articles {
       id
       title
-      description
+      content
       publishedAt
     }
   }
@@ -16,8 +16,7 @@ export const ARTICLE = gql`
     article(id: $id) {
       id
       title
-      description
+      content
-      html
       publishedAt
     }
   }

graphql.schema.json

@@ -96,34 +96,6 @@
             },
             "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,

package-lock.json

@@ -10,7 +10,6 @@
         "@apollo/client": "^3.3.16",
         "classnames": "^2.2.6",
         "graphql": "^15.5.0",
-        "highlight.js": "^11.0.1",
         "next": "10.2.0",
         "postcss-import": "^14.0.1",
         "postcss-nested": "^5.0.5",
@@ -27,7 +26,6 @@
         "@types/autoprefixer": "^10.2.0",
         "@types/classnames": "^2.3.1",
         "@types/graphql": "^14.5.0",
-        "@types/highlight.js": "^10.1.0",
         "@types/postcss-import": "^12.0.0",
         "@types/postcss-nested": "^4.2.3",
         "@types/ramda": "^0.27.40",
@@ -2369,16 +2367,6 @@
         "graphql": "*"
       }
     },
-    "node_modules/@types/highlight.js": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
-      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
-      "deprecated": "This is a stub types definition. highlight.js provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "highlight.js": "*"
-      }
-    },
     "node_modules/@types/http-proxy-agent": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
@@ -4908,14 +4896,6 @@
       "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",
@@ -11466,15 +11446,6 @@
         "graphql": "*"
       }
     },
-    "@types/highlight.js": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
-      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
-      "dev": true,
-      "requires": {
-        "highlight.js": "*"
-      }
-    },
     "@types/http-proxy-agent": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
@@ -13569,11 +13540,6 @@
         }
       }
     },
-    "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",

package.json

@@ -13,7 +13,6 @@
     "@apollo/client": "^3.3.16",
     "classnames": "^2.2.6",
     "graphql": "^15.5.0",
-    "highlight.js": "^11.0.1",
     "next": "10.2.0",
     "postcss-import": "^14.0.1",
     "postcss-nested": "^5.0.5",
@@ -30,7 +29,6 @@
     "@types/autoprefixer": "^10.2.0",
     "@types/classnames": "^2.3.1",
     "@types/graphql": "^14.5.0",
-    "@types/highlight.js": "^10.1.0",
     "@types/postcss-import": "^12.0.0",
     "@types/postcss-nested": "^4.2.3",
     "@types/ramda": "^0.27.40",

pages/_app.tsx

@@ -6,7 +6,7 @@ import styles from "./_app.module.css";
 import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../commons/graphql/client";
 import { ThemeProvider, useTheme } from '../commons/theme';
-import { SwitchTheme } from "../components/switch-theme";
+import { SwitchTheme } from '../components/switch-theme';
 
 function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps);

pages/articles/[id].tsx

@@ -1,9 +1,11 @@
 import { FC } from "react";
 import styles from "./article.module.css";
-import { GetServerSideProps } from "next";
+import { GetServerSideProps, GetStaticProps } from "next";
 import { addApolloState, initializeApollo } from "../../commons/graphql/client";
 import { ARTICLE } from "../../commons/graphql/queries";
 import { Article } from "../../commons/graphql/generated";
+import { useQuery } from '@apollo/client';
+import { useRouter } from 'next/router';
 
 interface Props {
   article: Article;
@@ -20,10 +22,7 @@ const ArticleDetails: FC<Props> = ({ article }) => {
           <h1>{article.title}</h1>
           <time>{article.publishedAt}</time>
         </header>
-        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
+        <div dangerouslySetInnerHTML={{__html: article.content}}></div>
-        <footer>
-          <div className={styles.articleEnd}>The End</div>
-        </footer>
       </article>
     </main>
   );

pages/articles/article.module.css

@@ -1,15 +1,15 @@
 .articleDetail {
 }
 .article {
-  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
+  @apply bg-gray-50 m-2 overflow-hidden rounded-xl;
 
   :global(.dark) & {
     @apply bg-gray-800;
   }
   & > header {
-    @apply my-8 mx-4;
+      @apply my-8 mx-4;
     h1 {
-      @apply text-4xl font-medium;
+      @apply text-2xl font-medium;
 
       :global(.dark) & {
         @apply text-gray-200;
@@ -24,353 +24,5 @@
   }
   & > 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;
-      }
-    }
-
-    :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;
-        }
-      }
-    }
-  }
-}
-
-.articleEnd {
-  @apply text-center text-gray-400 text-sm my-6;
-
-  &:before,
-  &:after {
-    content: "※";
-    @apply mx-4 text-xs align-text-top;
   }
 }

pages/index.tsx

@@ -26,7 +26,7 @@ function Item({ article }: { article: Article }) {
     <Link href={`/articles/${article.id}`}>
       <li className={styles.item}>
         <h2 className={styles.title}>{article.title}</h2>
-        <p className={styles.description}>{article.description}</p>
+        <p className={styles.description}>{article.content}</p>
       </li>
     </Link>
   );

styles/globals.css

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