feat: 样式完善

feat: 代码高亮
feat: 文章列表和内容优化。
2021-07-03 11:40:16 +08:00 · 2021-07-03 11:25:14 +08:00 · 2021-07-03 09:55:27 +08:00
11 changed files with 431 additions and 12 deletions
--- a/commons/graphql/generated.tsx
+++ b/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 = {
--- a/commons/graphql/queries.ts
+++ b/commons/graphql/queries.ts
@ -5,7 +5,7 @@ export const ARTICLE_FOR_HOME = gql`
    articles {
      id
      title
-      content
+      description
      publishedAt
    }
  }
@ -16,7 +16,8 @@ export const ARTICLE = gql`
    article(id: $id) {
      id
      title
-      content
+      description
+      html
      publishedAt
    }
  }
--- a/graphql.schema.json
+++ b/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,
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
        "@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",
@ -26,6 +27,7 @@
        "@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",
@ -2367,6 +2369,16 @@
        "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",
@ -4896,6 +4908,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",
@ -11446,6 +11466,15 @@
        "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",
@ -13540,6 +13569,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",
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "@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",
@ -29,6 +30,7 @@
    "@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",
--- a/pages/_app.tsx
+++ b/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);
--- a/pages/articles/[id].tsx
+++ b/pages/articles/[id].tsx
@ -1,11 +1,9 @@
 import { FC } from "react";
 import styles from "./article.module.css";
-import { GetServerSideProps, GetStaticProps } from "next";
+import { GetServerSideProps } 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;
@ -22,7 +20,10 @@ const ArticleDetails: FC<Props> = ({ article }) => {
          <h1>{article.title}</h1>
          <time>{article.publishedAt}</time>
        </header>
-        <div dangerouslySetInnerHTML={{__html: article.content}}></div>
+        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
+        <footer>
+          <div className={styles.articleEnd}>The End</div>
+        </footer>
      </article>
    </main>
  );
--- a/pages/articles/article.css
+++ b/pages/articles/article.css
--- a/pages/articles/article.module.css
+++ b/pages/articles/article.module.css
@ -1,15 +1,15 @@
 .articleDetail {
 }
 .article {
-  @apply bg-gray-50 m-2 overflow-hidden rounded-xl;
+  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;

  :global(.dark) & {
    @apply bg-gray-800;
  }
  & > header {
-      @apply my-8 mx-4;
+    @apply my-8 mx-4;
    h1 {
-      @apply text-2xl font-medium;
+      @apply text-4xl font-medium;

      :global(.dark) & {
        @apply text-gray-200;
@ -24,5 +24,353 @@
  }
  & > 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;
+  }
+}
--- a/pages/index.tsx
+++ b/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.content}</p>
+        <p className={styles.description}>{article.description}</p>
      </li>
    </Link>
  );
--- a/styles/globals.css
+++ b/styles/globals.css
@ -0,0 +1,3 @@
+* {
+  @apply transition-colors;
+}
Author	SHA1	Message	Date
Ivan Li	2b4c8b432d	feat: 样式完善	2021-07-03 11:40:16 +08:00
Ivan Li	6492223f73	feat: 代码高亮	2021-07-03 11:25:14 +08:00
Ivan Li	b1fcee8e4e	feat: 文章列表和内容优化。	2021-07-03 09:55:27 +08:00