From b1fcee8e4e48c266233b8828d955c6a1614020be Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Sat, 3 Jul 2021 09:55:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E7=AB=A0=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E5=92=8C=E5=86=85=E5=AE=B9=E4=BC=98=E5=8C=96=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- commons/graphql/generated.tsx | 2 + commons/graphql/queries.ts | 5 +- graphql.schema.json | 28 ++++++++++ pages/_app.tsx | 1 + pages/articles/[id].tsx | 9 ++-- pages/articles/article.css | 2 + pages/articles/article.module.css | 89 ++++++++++++++++++++++++++++++- pages/index.tsx | 2 +- 8 files changed, 129 insertions(+), 9 deletions(-) create mode 100644 pages/articles/article.css diff --git a/commons/graphql/generated.tsx b/commons/graphql/generated.tsx index 06624ca..5906ab1 100644 --- a/commons/graphql/generated.tsx +++ b/commons/graphql/generated.tsx @@ -21,6 +21,8 @@ export type Article = { content: Scalars['String']; publishedAt?: Maybe; tags: Array; + html: Scalars['String']; + description?: Maybe; }; export type CreateArticleInput = { diff --git a/commons/graphql/queries.ts b/commons/graphql/queries.ts index e20bdff..726689b 100644 --- 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 } } diff --git a/graphql.schema.json b/graphql.schema.json index 10022ec..572ffa2 100644 --- 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, diff --git a/pages/_app.tsx b/pages/_app.tsx index 8ea5271..6a3a8c5 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,7 @@ import { ApolloProvider } from "@apollo/client"; import { useApollo } from "../commons/graphql/client"; import { ThemeProvider, useTheme } from '../commons/theme'; import { SwitchTheme } from '../components/switch-theme'; +import "./articles/article.css"; function MyApp({ Component, pageProps }) { const apolloClient = useApollo(pageProps); diff --git a/pages/articles/[id].tsx b/pages/articles/[id].tsx index e59d41d..5b7abdd 100644 --- 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 = ({ article }) => {

{article.title}

-
+
+
+
The End
+
); diff --git a/pages/articles/article.css b/pages/articles/article.css new file mode 100644 index 0000000..7d72d52 --- /dev/null +++ b/pages/articles/article.css @@ -0,0 +1,2 @@ +.article { +} diff --git a/pages/articles/article.module.css b/pages/articles/article.module.css index 5d31b75..a601942 100644 --- a/pages/articles/article.module.css +++ b/pages/articles/article.module.css @@ -1,13 +1,13 @@ .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; @@ -24,5 +24,90 @@ } & > 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; + } + } + + code, + pre { + @apply font-mono rounded; + } + + code { + @apply p-1 text-red-500 bg-red-100; + :global(.dark) & { + @apply bg-green-800 bg-opacity-20 text-green-400; + } + } + + pre { + @apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto; + :global(.dark) & { + @apply bg-green-800 bg-opacity-20; + } + code { + @apply text-current bg-transparent; + + :global(.dark) & { + @apply text-current bg-transparent; + } + } + } + } +} + +.articleEnd { + @apply text-center text-gray-400 text-sm my-6; + + &:before, &:after { + content: '※'; + @apply mx-4 text-xs align-text-top; } } \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index ab4ac4e..f929dd0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -26,7 +26,7 @@ function Item({ article }: { article: Article }) {

  • {article.title}

    -

    {article.content}

    +

    {article.description}

    • );