feat: 登录功能。
This commit is contained in:
Ivan Li
parent
ad881bde93
commit
55f2023404
2
.vscode/launch.json
vendored
2
.vscode/launch.json
vendored
@ -8,7 +8,7 @@
|
|||||||
"type": "pwa-chrome",
|
"type": "pwa-chrome",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"name": "Launch Chrome against localhost",
|
"name": "Launch Chrome against localhost",
|
||||||
"url": "http://blog.localhost",
|
"url": "http://user.localhost",
|
||||||
"webRoot": "${workspaceFolder}",
|
"webRoot": "${workspaceFolder}",
|
||||||
"userDataDir": "/Users/ivan/Projects/.chrome"
|
"userDataDir": "/Users/ivan/Projects/.chrome"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
client: {
|
client: {
|
||||||
service: {
|
service: {
|
||||||
name: 'blog-be',
|
name: "auth-center",
|
||||||
url: 'http://api.blog.localhost/graphql'
|
url: "http://localhost:7152/graphql",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
overwrite: true
|
overwrite: true
|
||||||
schema: "http://localhost:7132/graphql"
|
schema: "http://localhost:7152/graphql"
|
||||||
generates:
|
generates:
|
||||||
commons/graphql/generated.tsx:
|
commons/graphql/generated.tsx:
|
||||||
plugins:
|
plugins:
|
||||||
|
|||||||
@ -14,22 +14,18 @@ export type Scalars = {
|
|||||||
DateTime: any;
|
DateTime: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Article = {
|
export type Account = {
|
||||||
__typename?: 'Article';
|
__typename?: 'Account';
|
||||||
id: Scalars['ID'];
|
id: Scalars['ID'];
|
||||||
title: Scalars['String'];
|
name: Scalars['String'];
|
||||||
content: Scalars['String'];
|
nick: Scalars['String'];
|
||||||
publishedAt?: Maybe<Scalars['DateTime']>;
|
password: Scalars['String'];
|
||||||
tags: Array<Scalars['String']>;
|
registeredAt: Scalars['DateTime'];
|
||||||
html: Scalars['String'];
|
|
||||||
description?: Maybe<Scalars['String']>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type CreateArticleInput = {
|
export type CreateAccountInput = {
|
||||||
title: Scalars['String'];
|
name: Scalars['String'];
|
||||||
content: Scalars['String'];
|
password: Scalars['String'];
|
||||||
publishedAt?: Maybe<Scalars['DateTime']>;
|
|
||||||
tags: Array<Scalars['String']>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -38,44 +34,62 @@ export type Hello = {
|
|||||||
message: Scalars['String'];
|
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 = {
|
export type Mutation = {
|
||||||
__typename?: 'Mutation';
|
__typename?: 'Mutation';
|
||||||
createArticle: Article;
|
createAccount: Account;
|
||||||
updateArticle: Article;
|
updateAccount: Account;
|
||||||
removeArticle: Scalars['Int'];
|
removeAccount: Account;
|
||||||
|
login: LoggedInfo;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationCreateArticleArgs = {
|
export type MutationCreateAccountArgs = {
|
||||||
createArticleInput: CreateArticleInput;
|
createAccountInput: CreateAccountInput;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationUpdateArticleArgs = {
|
export type MutationUpdateAccountArgs = {
|
||||||
updateArticleInput: UpdateArticleInput;
|
updateAccountInput: UpdateAccountInput;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationRemoveArticleArgs = {
|
export type MutationRemoveAccountArgs = {
|
||||||
id: Scalars['String'];
|
id: Scalars['String'];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type MutationLoginArgs = {
|
||||||
|
loginInput: LoginInput;
|
||||||
|
};
|
||||||
|
|
||||||
export type Query = {
|
export type Query = {
|
||||||
__typename?: 'Query';
|
__typename?: 'Query';
|
||||||
hello: Hello;
|
hello: Hello;
|
||||||
articles: Array<Article>;
|
accounts: Array<Account>;
|
||||||
article: Article;
|
account: Account;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type QueryArticleArgs = {
|
export type QueryAccountArgs = {
|
||||||
id: Scalars['String'];
|
id: Scalars['String'];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type UpdateArticleInput = {
|
export type UpdateAccountInput = {
|
||||||
title?: Maybe<Scalars['String']>;
|
name?: Maybe<Scalars['String']>;
|
||||||
content?: Maybe<Scalars['String']>;
|
password?: Maybe<Scalars['String']>;
|
||||||
publishedAt?: Maybe<Scalars['DateTime']>;
|
|
||||||
tags?: Maybe<Array<Scalars['String']>>;
|
|
||||||
id: Scalars['String'];
|
id: Scalars['String'];
|
||||||
};
|
};
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
"types": [
|
"types": [
|
||||||
{
|
{
|
||||||
"kind": "OBJECT",
|
"kind": "OBJECT",
|
||||||
"name": "Article",
|
"name": "Account",
|
||||||
"description": null,
|
"description": null,
|
||||||
"fields": [
|
"fields": [
|
||||||
{
|
{
|
||||||
@ -30,7 +30,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "title",
|
"name": "name",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [],
|
"args": [],
|
||||||
"type": {
|
"type": {
|
||||||
@ -46,7 +46,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "content",
|
"name": "nick",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [],
|
"args": [],
|
||||||
"type": {
|
"type": {
|
||||||
@ -62,65 +62,33 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "publishedAt",
|
"name": "password",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [],
|
"args": [],
|
||||||
"type": {
|
"type": {
|
||||||
|
"kind": "NON_NULL",
|
||||||
|
"name": null,
|
||||||
|
"ofType": {
|
||||||
|
"kind": "SCALAR",
|
||||||
|
"name": "String",
|
||||||
|
"ofType": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"isDeprecated": false,
|
||||||
|
"deprecationReason": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "registeredAt",
|
||||||
|
"description": null,
|
||||||
|
"args": [],
|
||||||
|
"type": {
|
||||||
|
"kind": "NON_NULL",
|
||||||
|
"name": null,
|
||||||
|
"ofType": {
|
||||||
"kind": "SCALAR",
|
"kind": "SCALAR",
|
||||||
"name": "DateTime",
|
"name": "DateTime",
|
||||||
"ofType": null
|
"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",
|
|
||||||
"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,
|
"isDeprecated": false,
|
||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
@ -153,12 +121,12 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"kind": "INPUT_OBJECT",
|
"kind": "INPUT_OBJECT",
|
||||||
"name": "CreateArticleInput",
|
"name": "CreateAccountInput",
|
||||||
"description": null,
|
"description": null,
|
||||||
"fields": null,
|
"fields": null,
|
||||||
"inputFields": [
|
"inputFields": [
|
||||||
{
|
{
|
||||||
"name": "title",
|
"name": "name",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "NON_NULL",
|
"kind": "NON_NULL",
|
||||||
@ -174,7 +142,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "content",
|
"name": "password",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "NON_NULL",
|
"kind": "NON_NULL",
|
||||||
@ -188,42 +156,6 @@
|
|||||||
"defaultValue": null,
|
"defaultValue": null,
|
||||||
"isDeprecated": false,
|
"isDeprecated": false,
|
||||||
"deprecationReason": null
|
"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,
|
"interfaces": null,
|
||||||
@ -267,24 +199,126 @@
|
|||||||
"enumValues": null,
|
"enumValues": null,
|
||||||
"possibleTypes": 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",
|
"kind": "OBJECT",
|
||||||
"name": "Mutation",
|
"name": "Mutation",
|
||||||
"description": null,
|
"description": null,
|
||||||
"fields": [
|
"fields": [
|
||||||
{
|
{
|
||||||
"name": "createArticle",
|
"name": "createAccount",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [
|
"args": [
|
||||||
{
|
{
|
||||||
"name": "createArticleInput",
|
"name": "createAccountInput",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "NON_NULL",
|
"kind": "NON_NULL",
|
||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "INPUT_OBJECT",
|
"kind": "INPUT_OBJECT",
|
||||||
"name": "CreateArticleInput",
|
"name": "CreateAccountInput",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -298,7 +332,7 @@
|
|||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "OBJECT",
|
"kind": "OBJECT",
|
||||||
"name": "Article",
|
"name": "Account",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -306,18 +340,18 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "updateArticle",
|
"name": "updateAccount",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [
|
"args": [
|
||||||
{
|
{
|
||||||
"name": "updateArticleInput",
|
"name": "updateAccountInput",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "NON_NULL",
|
"kind": "NON_NULL",
|
||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "INPUT_OBJECT",
|
"kind": "INPUT_OBJECT",
|
||||||
"name": "UpdateArticleInput",
|
"name": "UpdateAccountInput",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -331,7 +365,7 @@
|
|||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "OBJECT",
|
"kind": "OBJECT",
|
||||||
"name": "Article",
|
"name": "Account",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -339,7 +373,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "removeArticle",
|
"name": "removeAccount",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [
|
"args": [
|
||||||
{
|
{
|
||||||
@ -363,8 +397,41 @@
|
|||||||
"kind": "NON_NULL",
|
"kind": "NON_NULL",
|
||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "SCALAR",
|
"kind": "OBJECT",
|
||||||
"name": "Int",
|
"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
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -377,16 +444,6 @@
|
|||||||
"enumValues": null,
|
"enumValues": null,
|
||||||
"possibleTypes": 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",
|
"kind": "OBJECT",
|
||||||
"name": "Query",
|
"name": "Query",
|
||||||
@ -409,7 +466,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "articles",
|
"name": "accounts",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [],
|
"args": [],
|
||||||
"type": {
|
"type": {
|
||||||
@ -423,7 +480,7 @@
|
|||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "OBJECT",
|
"kind": "OBJECT",
|
||||||
"name": "Article",
|
"name": "Account",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -433,7 +490,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "article",
|
"name": "account",
|
||||||
"description": null,
|
"description": null,
|
||||||
"args": [
|
"args": [
|
||||||
{
|
{
|
||||||
@ -458,7 +515,7 @@
|
|||||||
"name": null,
|
"name": null,
|
||||||
"ofType": {
|
"ofType": {
|
||||||
"kind": "OBJECT",
|
"kind": "OBJECT",
|
||||||
"name": "Article",
|
"name": "Account",
|
||||||
"ofType": null
|
"ofType": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -473,12 +530,12 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"kind": "INPUT_OBJECT",
|
"kind": "INPUT_OBJECT",
|
||||||
"name": "UpdateArticleInput",
|
"name": "UpdateAccountInput",
|
||||||
"description": null,
|
"description": null,
|
||||||
"fields": null,
|
"fields": null,
|
||||||
"inputFields": [
|
"inputFields": [
|
||||||
{
|
{
|
||||||
"name": "title",
|
"name": "name",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "SCALAR",
|
"kind": "SCALAR",
|
||||||
@ -490,7 +547,7 @@
|
|||||||
"deprecationReason": null
|
"deprecationReason": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "content",
|
"name": "password",
|
||||||
"description": null,
|
"description": null,
|
||||||
"type": {
|
"type": {
|
||||||
"kind": "SCALAR",
|
"kind": "SCALAR",
|
||||||
@ -501,38 +558,6 @@
|
|||||||
"isDeprecated": false,
|
"isDeprecated": false,
|
||||||
"deprecationReason": null
|
"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",
|
"name": "id",
|
||||||
"description": null,
|
"description": null,
|
||||||
|
|||||||
7548
package-lock.json
generated
7548
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -1,20 +1,27 @@
|
|||||||
{
|
{
|
||||||
"name": "blog-fs",
|
"name": "launch-fs",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev -p 7133",
|
"dev": "next dev -p 7153",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start -p 7133",
|
"start": "next start -p 7153",
|
||||||
"predev": "npm run generate",
|
"predev": "npm run generate",
|
||||||
"generate": "graphql-codegen --config codegen.yml"
|
"generate": "graphql-codegen --config codegen.yml"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apollo/client": "^3.3.16",
|
"@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",
|
"apollo-link-scalars": "^2.1.3",
|
||||||
"babel-plugin-superjson-next": "^0.3.0",
|
"babel-plugin-superjson-next": "^0.3.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"date-fns": "^2.22.1",
|
"date-fns": "^2.22.1",
|
||||||
|
"formik": "^2.2.9",
|
||||||
|
"formik-material-ui": "^3.0.1",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
"graphql-scalars": "^1.10.0",
|
"graphql-scalars": "^1.10.0",
|
||||||
"highlight.js": "^11.0.1",
|
"highlight.js": "^11.0.1",
|
||||||
@ -24,7 +31,8 @@
|
|||||||
"ramda": "^0.27.1",
|
"ramda": "^0.27.1",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"superjson": "^1.7.4"
|
"superjson": "^1.7.4",
|
||||||
|
"yup": "^0.32.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@graphql-codegen/cli": "1.21.4",
|
"@graphql-codegen/cli": "1.21.4",
|
||||||
|
|||||||
@ -1,23 +1,3 @@
|
|||||||
.page {
|
.page {
|
||||||
@apply flex;
|
@apply flex bg-gray-300 min-h-screen h-full;
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -1,12 +1,10 @@
|
|||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
import "tailwindcss/tailwind.css";
|
import "tailwindcss/tailwind.css";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { GlobalSidebar } from "../components/layouts/global-sidebar";
|
|
||||||
import styles from "./_app.module.css";
|
import styles from "./_app.module.css";
|
||||||
import { ApolloProvider } from "@apollo/client";
|
import { ApolloProvider } from "@apollo/client";
|
||||||
import { useApollo } from "../commons/graphql/client";
|
import { useApollo } from "../commons/graphql/client";
|
||||||
import { ThemeProvider, useTheme } from '../commons/theme';
|
import { ThemeProvider } from "../commons/theme";
|
||||||
import { SwitchTheme } from "../components/switch-theme";
|
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
const apolloClient = useApollo(pageProps);
|
const apolloClient = useApollo(pageProps);
|
||||||
@ -14,19 +12,8 @@ function MyApp({ Component, pageProps }) {
|
|||||||
<ApolloProvider client={apolloClient}>
|
<ApolloProvider client={apolloClient}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<div className={styles.page}>
|
<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} />
|
<Component {...pageProps} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
68
pages/_document.tsx
Normal file
68
pages/_document.tsx
Normal 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(),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -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;
|
|
||||||
@ -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
10
pages/auth/login.module.css
Normal 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
123
pages/auth/login.tsx
Normal 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
14
pages/auth/mutations.ts
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
@ -2,45 +2,13 @@ import { useQuery } from "@apollo/client";
|
|||||||
import { GetServerSideProps } from 'next';
|
import { GetServerSideProps } from 'next';
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import React from "react";
|
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() {
|
export default function Index() {
|
||||||
const { data, loading } = useQuery<{ articles: Article[] }>(ARTICLE_FOR_HOME);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className={styles.index}>
|
<main>
|
||||||
<ol>
|
<h1>Launch</h1>
|
||||||
{data?.articles?.map((article) => (
|
<hr />
|
||||||
<Item article={article} key={article.id} />
|
<p>Powered By Ivan.</p>
|
||||||
))}
|
|
||||||
</ol>
|
|
||||||
</main>
|
</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,4 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
|
mode: "jit",
|
||||||
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
|
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
|
||||||
darkMode: "class", // or 'media' or 'class'
|
darkMode: "class", // or 'media' or 'class'
|
||||||
theme: {
|
theme: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user