Ivan/blog-fs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 文章详情 添加日期

Browse Source
This commit is contained in:
Ivan Li 2021-07-03 22:36:38 +08:00
parent 2b4c8b432d
commit 959a2e9a33
9 changed files with 451 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored Normal file
View File

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

4
babel.config.js Normal file
View File

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

2
codegen.yml
View File

@ -6,6 +6,6 @@ generates:
- "typescript"
- "typescript-operations"
- "typescript-react-apollo"
./graphql.schema.json:
commons/graphql/graphql.schema.json:
plugins:
- "introspection"

36
commons/graphql/client.ts
View File

@ -1,19 +1,28 @@
import { useMemo } from "react";
import {
ApolloClient,
ApolloLink,
from,
HttpLink,
InMemoryCache,
NormalizedCacheObject,
} from "@apollo/client";
import { concatPagination } from "@apollo/client/utilities";
import { equals, mergeDeepWith } from "ramda";
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({
uri: "/api/graphql",
cache: new InMemoryCache(),
});
const schema = buildClientSchema(
introspectionResult as unknown as IntrospectionQuery
);
const typesMap = {
DateTime: DateTimeResolver,
};
export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
@ -22,9 +31,7 @@ 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)
typeof window === "undefined" ? process.env.BACKEND_URI : "/api/graphql", // Server URL (must be absolute)
credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
});
@ -40,7 +47,11 @@ function createApolloClient() {
});
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: from([errorLink, httpLink]),
link: from([
errorLink,
withScalars({ schema, typesMap }) as ApolloLink,
httpLink,
]),
cache: new InMemoryCache({
typePolicies: {
Query: {
@ -66,10 +77,7 @@ export function initializeApollo(initialState = null) {
const data = mergeDeepWith(
(a, b) => {
if (Array.isArray(a) && Array.isArray(b)) {
return [
...a,
...b.filter((bi) => a.every((ai) => !equals(ai, bi))),
];
return [...a, ...b.filter((bi) => a.every((ai) => !equals(ai, bi)))];
} else {
return b;
}
@ -91,7 +99,7 @@ export function initializeApollo(initialState = null) {
export function addApolloState(client, pageProps) {
if (pageProps?.props) {
pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
pageProps.props[APOLLO_STATE_PROP_NAME] = clone(client.cache.extract());
}
return pageProps;

0
graphql.schema.json → commons/graphql/graphql.schema.json
View File

537
package-lock.json generated
View File

@ -8,15 +8,20 @@
"version": "0.1.0",
"dependencies": {
"@apollo/client": "^3.3.16",
"apollo-link-scalars": "^2.1.3",
"babel-plugin-superjson-next": "^0.3.0",
"classnames": "^2.2.6",
"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",
@ -24,13 +29,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/classnames": "^2.3.1",
"@types/graphql": "^14.5.0",
"@types/highlight.js": "^10.1.0",
"@types/date-fns": "^2.6.0",
"@types/postcss-import": "^12.0.0",
"@types/postcss-nested": "^4.2.3",
"@types/ramda": "^0.27.40",
"@types/react": "^17.0.4",
"@types/tailwindcss": "^2.0.2",
"autoprefixer": "^10.2.5",
@ -372,7 +372,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"
}
@ -381,7 +380,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"
@ -638,9 +636,12 @@
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
"integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-option": {
"version": "7.12.17",
@ -2339,44 +2340,14 @@
"node": ">= 6"
}
},
"node_modules/@types/autoprefixer": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
"integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
"deprecated": "This is a stub types definition. autoprefixer provides its own type definitions, so you do not need this installed.",
"node_modules/@types/date-fns": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
"integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
"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": "*"
}
},
"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/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": "*"
"date-fns": "*"
}
},
"node_modules/@types/http-proxy-agent": {
@ -2468,31 +2439,12 @@
"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",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
"dev": true
},
"node_modules/@types/ramda": {
"version": "0.27.40",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.40.tgz",
"integrity": "sha512-V99ZfTH2tqVYdLDAlgh2uT+N074HPgqnAsMjALKSBqogYd0HbuuGMqNukJ6fk9Ml/Htaus76fsc4Yh3p7q1VdQ==",
"dev": true,
"dependencies": {
"ts-toolbelt": "^6.15.1"
}
},
"node_modules/@types/react": {
"version": "17.0.4",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
@ -2717,6 +2669,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",
@ -2902,6 +2883,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",
@ -3787,10 +3797,16 @@
"dev": true
},
"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
"version": "2.22.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
"integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debounce": {
"version": "1.2.1",
@ -4750,6 +4766,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",
@ -6027,6 +6062,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",
@ -6108,12 +6149,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",
@ -6132,11 +6198,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=",
"dev": true
"integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
@ -6147,8 +6217,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=",
"dev": true
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
},
"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",
@ -6156,6 +6240,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",
@ -6173,6 +6267,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",
@ -8619,6 +8718,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",
@ -8968,12 +9100,6 @@
}
}
},
"node_modules/ts-toolbelt": {
"version": "6.15.5",
"resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
"integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
"dev": true
},
"node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@ -9445,6 +9571,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": {
@ -9740,7 +9875,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"
},
@ -9749,7 +9883,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"
@ -9992,9 +10125,9 @@
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
"integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
},
"@babel/helper-validator-option": {
"version": "7.12.17",
@ -11439,40 +11572,13 @@
"integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
"dev": true
},
"@types/autoprefixer": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
"integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
"@types/date-fns": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
"integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
"dev": true,
"requires": {
"autoprefixer": "*"
}
},
"@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/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": "*"
"date-fns": "*"
}
},
"@types/http-proxy-agent": {
@ -11553,30 +11659,12 @@
}
}
},
"@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",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
"dev": true
},
"@types/ramda": {
"version": "0.27.40",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.40.tgz",
"integrity": "sha512-V99ZfTH2tqVYdLDAlgh2uT+N074HPgqnAsMjALKSBqogYd0HbuuGMqNukJ6fk9Ml/Htaus76fsc4Yh3p7q1VdQ==",
"dev": true,
"requires": {
"ts-toolbelt": "^6.15.1"
}
},
"@types/react": {
"version": "17.0.4",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
@ -11758,6 +11846,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",
@ -11897,6 +12008,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",
@ -12670,10 +12802,9 @@
"dev": true
},
"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
"version": "2.22.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
"integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
},
"debounce": {
"version": "1.2.1",
@ -13452,6 +13583,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",
@ -14411,6 +14557,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",
@ -14470,12 +14622,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",
@ -14494,11 +14671,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=",
"dev": true
"integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
},
"lodash.isplainobject": {
"version": "4.0.6",
@ -14509,8 +14690,22 @@
"lodash.isstring": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
"dev": true
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
},
"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",
@ -14518,6 +14713,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",
@ -14535,6 +14740,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",
@ -16496,6 +16706,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",
@ -16758,12 +16992,6 @@
"resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
"integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw=="
},
"ts-toolbelt": {
"version": "6.15.5",
"resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
"integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
"dev": true
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@ -17127,6 +17355,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"
}
}
}
}

14
package.json
View File

@ -11,15 +11,20 @@
},
"dependencies": {
"@apollo/client": "^3.3.16",
"apollo-link-scalars": "^2.1.3",
"babel-plugin-superjson-next": "^0.3.0",
"classnames": "^2.2.6",
"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",
@ -27,13 +32,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/classnames": "^2.3.1",
"@types/graphql": "^14.5.0",
"@types/highlight.js": "^10.1.0",
"@types/date-fns": "^2.6.0",
"@types/postcss-import": "^12.0.0",
"@types/postcss-nested": "^4.2.3",
"@types/ramda": "^0.27.40",
"@types/react": "^17.0.4",
"@types/tailwindcss": "^2.0.2",
"autoprefixer": "^10.2.5",

13
pages/articles/[id].tsx
View File

@ -4,7 +4,8 @@ import { GetServerSideProps } from "next";
import { addApolloState, initializeApollo } from "../../commons/graphql/client";
import { ARTICLE } from "../../commons/graphql/queries";
import { Article } from "../../commons/graphql/generated";
import { format, formatRelative } from "date-fns";
import { zhCN } from "date-fns/locale";
interface Props {
article: Article;
}
@ -13,12 +14,20 @@ const ArticleDetails: FC<Props> = ({ article }) => {
// const { data } = useQuery<{ article: Article }>(ARTICLE, {
// variables: router.query,
// });
return (
<main className={styles.articleDetails}>
<article className={styles.article}>
<header>
<h1>{article.title}</h1>
<time>{article.publishedAt}</time>
<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>

17
pages/articles/article.module.css
View File

@ -9,18 +9,12 @@
& > header {
@apply my-8 mx-4;
h1 {
@apply text-4xl font-medium;
@apply text-4xl font-medium mb-4;
:global(.dark) & {
@apply text-gray-200;
}
}
time {
@apply text-sm text-gray-500;
:global(.dark) & {
@apply text-gray-400;
}
}
}
& > div {
@apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
@ -364,7 +358,16 @@
}
}
}
.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;