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-09 22:57:26 +08:00
parent ad881bde93
commit 55f2023404
18 changed files with 4246 additions and 4470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/launch.json vendored
View File

@ -8,7 +8,7 @@
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://blog.localhost",
"url": "http://user.localhost",
"webRoot": "${workspaceFolder}",
"userDataDir": "/Users/ivan/Projects/.chrome"
}

8
apollo.config.js
View File

@ -1,8 +1,8 @@
module.exports = {
client: {
service: {
name: 'blog-be',
url: 'http://api.blog.localhost/graphql'
}
}
name: "auth-center",
url: "http://localhost:7152/graphql",
},
},
};

2
codegen.yml
View File

@ -1,5 +1,5 @@
overwrite: true
schema: "http://localhost:7132/graphql"
schema: "http://localhost:7152/graphql"
generates:
commons/graphql/generated.tsx:
plugins:

72
commons/graphql/generated.tsx
View File

@ -14,22 +14,18 @@ export type Scalars = {
DateTime: any;
};
export type Article = {
__typename?: 'Article';
export type Account = {
__typename?: 'Account';
id: Scalars['ID'];
title: Scalars['String'];
content: Scalars['String'];
publishedAt?: Maybe<Scalars['DateTime']>;
tags: Array<Scalars['String']>;
html: Scalars['String'];
description?: Maybe<Scalars['String']>;
name: Scalars['String'];
nick: Scalars['String'];
password: Scalars['String'];
registeredAt: Scalars['DateTime'];
};
export type CreateArticleInput = {
title: Scalars['String'];
content: Scalars['String'];
publishedAt?: Maybe<Scalars['DateTime']>;
tags: Array<Scalars['String']>;
export type CreateAccountInput = {
name: Scalars['String'];
password: Scalars['String'];
};
@ -38,44 +34,62 @@ export type Hello = {
message: Scalars['String'];
};
export type LoggedInfo = {
__typename?: 'LoggedInfo';
account: Account;
/** jwt, access application */
accessToken: Scalars['String'];
/** jwt, refresh token in auth center */
refreshToken: Scalars['String'];
};
export type LoginInput = {
name: Scalars['String'];
password: Scalars['String'];
};
export type Mutation = {
__typename?: 'Mutation';
createArticle: Article;
updateArticle: Article;
removeArticle: Scalars['Int'];
createAccount: Account;
updateAccount: Account;
removeAccount: Account;
login: LoggedInfo;
};
export type MutationCreateArticleArgs = {
createArticleInput: CreateArticleInput;
export type MutationCreateAccountArgs = {
createAccountInput: CreateAccountInput;
};
export type MutationUpdateArticleArgs = {
updateArticleInput: UpdateArticleInput;
export type MutationUpdateAccountArgs = {
updateAccountInput: UpdateAccountInput;
};
export type MutationRemoveArticleArgs = {
export type MutationRemoveAccountArgs = {
id: Scalars['String'];
};
export type MutationLoginArgs = {
loginInput: LoginInput;
};
export type Query = {
__typename?: 'Query';
hello: Hello;
articles: Array<Article>;
article: Article;
accounts: Array<Account>;
account: Account;
};
export type QueryArticleArgs = {
export type QueryAccountArgs = {
id: Scalars['String'];
};
export type UpdateArticleInput = {
title?: Maybe<Scalars['String']>;
content?: Maybe<Scalars['String']>;
publishedAt?: Maybe<Scalars['DateTime']>;
tags?: Maybe<Array<Scalars['String']>>;
export type UpdateAccountInput = {
name?: Maybe<Scalars['String']>;
password?: Maybe<Scalars['String']>;
id: Scalars['String'];
};

311
commons/graphql/graphql.schema.json
View File

@ -10,7 +10,7 @@
"types": [
{
"kind": "OBJECT",
"name": "Article",
"name": "Account",
"description": null,
"fields": [
{
@ -30,7 +30,7 @@
"deprecationReason": null
},
{
"name": "title",
"name": "name",
"description": null,
"args": [],
"type": {
@ -46,7 +46,7 @@
"deprecationReason": null
},
{
"name": "content",
"name": "nick",
"description": null,
"args": [],
"type": {
@ -62,43 +62,7 @@
"deprecationReason": null
},
{
"name": "publishedAt",
"description": null,
"args": [],
"type": {
"kind": "SCALAR",
"name": "DateTime",
"ofType": null
},
"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": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "html",
"name": "password",
"description": null,
"args": [],
"type": {
@ -114,13 +78,17 @@
"deprecationReason": null
},
{
"name": "description",
"name": "registeredAt",
"description": null,
"args": [],
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "DateTime",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
@ -153,12 +121,12 @@
},
{
"kind": "INPUT_OBJECT",
"name": "CreateArticleInput",
"name": "CreateAccountInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "title",
"name": "name",
"description": null,
"type": {
"kind": "NON_NULL",
@ -174,7 +142,7 @@
"deprecationReason": null
},
{
"name": "content",
"name": "password",
"description": null,
"type": {
"kind": "NON_NULL",
@ -188,42 +156,6 @@
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "publishedAt",
"description": null,
"type": {
"kind": "SCALAR",
"name": "DateTime",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "tags",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
@ -267,24 +199,126 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "LoggedInfo",
"description": null,
"fields": [
{
"name": "account",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Account",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "accessToken",
"description": "jwt, access application",
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "refreshToken",
"description": "jwt, refresh token in auth center",
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "LoginInput",
"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
},
{
"name": "password",
"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": "OBJECT",
"name": "Mutation",
"description": null,
"fields": [
{
"name": "createArticle",
"name": "createAccount",
"description": null,
"args": [
{
"name": "createArticleInput",
"name": "createAccountInput",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "CreateArticleInput",
"name": "CreateAccountInput",
"ofType": null
}
},
@ -298,7 +332,7 @@
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Article",
"name": "Account",
"ofType": null
}
},
@ -306,18 +340,18 @@
"deprecationReason": null
},
{
"name": "updateArticle",
"name": "updateAccount",
"description": null,
"args": [
{
"name": "updateArticleInput",
"name": "updateAccountInput",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "UpdateArticleInput",
"name": "UpdateAccountInput",
"ofType": null
}
},
@ -331,7 +365,7 @@
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Article",
"name": "Account",
"ofType": null
}
},
@ -339,7 +373,7 @@
"deprecationReason": null
},
{
"name": "removeArticle",
"name": "removeAccount",
"description": null,
"args": [
{
@ -363,8 +397,41 @@
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Int",
"kind": "OBJECT",
"name": "Account",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "login",
"description": null,
"args": [
{
"name": "loginInput",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "LoginInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "LoggedInfo",
"ofType": null
}
},
@ -377,16 +444,6 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "Int",
"description": "The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Query",
@ -409,7 +466,7 @@
"deprecationReason": null
},
{
"name": "articles",
"name": "accounts",
"description": null,
"args": [],
"type": {
@ -423,7 +480,7 @@
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Article",
"name": "Account",
"ofType": null
}
}
@ -433,7 +490,7 @@
"deprecationReason": null
},
{
"name": "article",
"name": "account",
"description": null,
"args": [
{
@ -458,7 +515,7 @@
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Article",
"name": "Account",
"ofType": null
}
},
@ -473,12 +530,12 @@
},
{
"kind": "INPUT_OBJECT",
"name": "UpdateArticleInput",
"name": "UpdateAccountInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "title",
"name": "name",
"description": null,
"type": {
"kind": "SCALAR",
@ -490,7 +547,7 @@
"deprecationReason": null
},
{
"name": "content",
"name": "password",
"description": null,
"type": {
"kind": "SCALAR",
@ -501,38 +558,6 @@
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "publishedAt",
"description": null,
"type": {
"kind": "SCALAR",
"name": "DateTime",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "tags",
"description": null,
"type": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,

7574
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -1,20 +1,27 @@
{
"name": "blog-fs",
"name": "launch-fs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 7133",
"dev": "next dev -p 7153",
"build": "next build",
"start": "next start -p 7133",
"start": "next start -p 7153",
"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",
"@material-ui/core": "^4.12.0",
"@material-ui/icons": "^4.11.2",
"apollo-link-scalars": "^2.1.3",
"babel-plugin-superjson-next": "^0.3.0",
"classnames": "^2.2.6",
"date-fns": "^2.22.1",
"formik": "^2.2.9",
"formik-material-ui": "^3.0.1",
"graphql": "^15.5.0",
"graphql-scalars": "^1.10.0",
"highlight.js": "^11.0.1",
@ -24,7 +31,8 @@
"ramda": "^0.27.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"superjson": "^1.7.4"
"superjson": "^1.7.4",
"yup": "^0.32.9"
},
"devDependencies": {
"@graphql-codegen/cli": "1.21.4",

22
pages/_app.module.css
View File

@ -1,23 +1,3 @@
.page {
@apply flex;
}
.sidebar {
@apply md:w-64 w-32 flex-none;
}
.primary {
@apply flex-auto;
@apply bg-gray-100 text-gray-700;
:global(.dark) & {
@apply bg-gray-700 text-gray-300;
}
.wrapper {
@apply mx-auto max-w-screen-lg;
}
}
.pageHeader {
@apply p-3 bg-gray-50 flex justify-between;
:global(.dark) & {
@apply bg-gray-800;
}
@apply flex bg-gray-300 min-h-screen h-full;
}

17
pages/_app.tsx
View File

@ -1,12 +1,10 @@
import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import React from "react";
import { GlobalSidebar } from "../components/layouts/global-sidebar";
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 { ThemeProvider } from "../commons/theme";
function MyApp({ Component, pageProps }) {
const apolloClient = useApollo(pageProps);
@ -14,18 +12,7 @@ function MyApp({ Component, pageProps }) {
<ApolloProvider client={apolloClient}>
<ThemeProvider>
<div className={styles.page}>
<GlobalSidebar className={styles.sidebar} />
<div className={styles.primary}>
<header className={styles.pageHeader}>
<h1>{"Ivan Li 的个人博客"}</h1>
<div className={styles.actions}>
<SwitchTheme />
</div>
</header>
<div className={styles.wrapper}>
<Component {...pageProps} />
</div>
</div>
<Component {...pageProps} />
</div>
</ThemeProvider>
</ApolloProvider>

68
pages/_document.tsx Normal file
View File

@ -0,0 +1,68 @@
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};

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

@ -1,54 +0,0 @@
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";
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}>
<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;

0
pages/articles/article.css
View File

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

@ -1,382 +0,0 @@
.articleDetail {
}
.article {
@apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
:global(.dark) & {
@apply bg-gray-800;
}
& > header {
@apply my-8 mx-4;
h1 {
@apply 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;
}
}

10
pages/auth/login.module.css Normal file
View File

@ -0,0 +1,10 @@
.loginWrapper {
@apply flex sm:items-center justify-center flex-col w-screen px-4 sm:px-0 items-stretch bg-green-50;
}
.login {
}
.form {
@apply w-full md:w-96 py-4 px-8 shadow-md rounded-lg;
@apply bg-white;
}

123
pages/auth/login.tsx Normal file
View File

@ -0,0 +1,123 @@
import React, { useEffect, useState } from "react";
import styles from "./login.module.css";
import { Field, Form, Formik, FormikHelpers } from "formik";
import * as yup from "yup";
import { TextField } from "formik-material-ui";
import { Button, InputAdornment, makeStyles } from "@material-ui/core";
import classNames from "classnames";
import { AccountCircle, Lock } from "@material-ui/icons";
import { LoggedInfo, LoginInput } from "../../commons/graphql/generated";
import { useMutation } from "@apollo/client";
import { LOGIN } from "./mutations";
const useStyles = makeStyles({
field: {
margin: "16px 0",
},
loginBtn: {
margin: "8px 0",
},
});
export default function Index() {
const [messagePort, setMessagePort] = useState(() => undefined);
useEffect(() => {
const { port1, port2 } = new MessageChannel();
setMessagePort(port1);
port1.onmessage = (ev: MessageEvent) => {
console.log(ev);
};
window.opener?.postMessage("init-channel", "*", [port2]);
window.parent?.postMessage("init-channel", "*", [port2]);
}, []);
const [login, { loading: logining }] =
useMutation<{ login: LoggedInfo }>(LOGIN);
const submit = (values, helpers: FormikHelpers<LoggedInfo>) => {
login({
variables: {
input: values,
},
})
.then(({ data }) => {
messagePort.postMessage({
type: "logged",
payload: data.login,
});
})
.finally(() => {
helpers.setSubmitting(false);
});
};
const classes = useStyles();
return (
<div className={styles.loginWrapper}>
<main className={styles.login}>
<Formik
initialValues={
{
name: "",
password: "",
} as LoginInput
}
validationSchema={yup.object().shape({
name: yup.string().max(100, "怎么会有这么长的用户名！！"),
password: yup
.string()
.max(100, "不会吧不会吧，怎么会有这么长的密码？"),
})}
onSubmit={submit}
>
{({ isSubmitting }) => {
return (
<Form className={styles.form}>
<Field
className={classNames(classes.field)}
name="name"
component={TextField}
placeholder="账户 / Username"
size="medium"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
<Field
className={classNames(classes.field)}
name="password"
component={TextField}
placeholder="密码 / Password"
size="medium"
type="password"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Lock />
</InputAdornment>
),
}}
/>
<Button
variant="contained"
color="primary"
fullWidth
type="submit"
className={classes.loginBtn}
disabled={isSubmitting}
>
登录 / Login
</Button>
</Form>
);
}}
</Formik>
</main>
</div>
);
}

14
pages/auth/mutations.ts Normal file
View File

@ -0,0 +1,14 @@
import { gql } from "@apollo/client";
export const LOGIN = gql`
mutation Login($input: LoginInput!) {
login(loginInput: $input) {
account {
id
name
nick
}
accessToken
refreshToken
}
}
`;

40
pages/index.tsx
View File

@ -2,45 +2,13 @@ import { useQuery } from "@apollo/client";
import { GetServerSideProps } from 'next';
import Link from "next/link";
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);
return (
<main className={styles.index}>
<ol>
{data?.articles?.map((article) => (
<Item article={article} key={article.id} />
))}
</ol>
<main>
<h1>Launch</h1>
<hr />
<p>Powered By Ivan.</p>
</main>
);
}
function Item({ article }: { article: Article }) {
return (
<Link href={`/articles/${article.id}`}>
<li className={styles.item}>
<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: {},
});
};

1
tailwind.config.js
View File

@ -1,4 +1,5 @@
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: "class", // or 'media' or 'class'
theme: {