diff --git a/.eslintrc.json b/.eslintrc.json index 194ccd17..4ef7763b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,52 +1,48 @@ { - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:prettier/recommended", - "plugin:cypress/recommended", - "plugin:@next/next/recommended" - ], - "plugins": [ - "react", - "@typescript-eslint", - "prettier", - "cypress" - ], - "env": { - "node": true, - "browser": true, - "jasmine": true, - "jest": true, - "es6": true, - "cypress/globals": true - }, - "rules": { - "camelcase": "error", - "prettier/prettier": [ - "error", - { - "singleQuote": true - } - ], - "react/prop-types": "off", - "react/display-name": "off", - "react/react-in-jsx-scope": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/ban-ts-ignore": "off", - "@typescript-eslint/ban-ts-comment": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "cypress/no-assigning-return-values": "error", - "cypress/no-unnecessary-waiting": "error", - "cypress/assertion-before-screenshot": "warn", - "cypress/no-force": "warn", - "cypress/no-async-tests": "error" - }, - "parser": "@typescript-eslint/parser", - "settings": { - "react": { - "pragma": "React", - "version": "detect" - } - } -} \ No newline at end of file + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:prettier/recommended", + "plugin:cypress/recommended", + "plugin:@next/next/recommended" + ], + "plugins": ["react", "@typescript-eslint", "prettier", "cypress"], + "env": { + "node": true, + "browser": true, + "jasmine": true, + "jest": true, + "es6": true, + "cypress/globals": true + }, + "rules": { + "camelcase": "error", + "react/prop-types": "off", + "react/display-name": "off", + "react/react-in-jsx-scope": "off", + "react/self-closing-comp": [ + "error", + { + "component": true, + "html": true + } + ], + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/ban-ts-ignore": "off", + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "cypress/no-assigning-return-values": "error", + "cypress/no-unnecessary-waiting": "error", + "cypress/assertion-before-screenshot": "warn", + "cypress/no-force": "warn", + "cypress/no-async-tests": "error" + }, + "parser": "@typescript-eslint/parser", + "settings": { + "react": { + "pragma": "React", + "version": "detect" + } + } +} diff --git a/.github/workflows/testing.yml b/.github/workflows/cypress-testing.yml similarity index 60% rename from .github/workflows/testing.yml rename to .github/workflows/cypress-testing.yml index 6b1e218c..190659fa 100644 --- a/.github/workflows/testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -13,6 +13,16 @@ jobs: steps: - name: Checkout uses: actions/checkout@v2 + - name: Setup Environmental Variables + run: | + touch .env + echo NEXT_PUBLIC_SENTRY_DSN=${{ secrets.SENTRY_DSN }} >> .env + echo SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} >> .env + echo SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }} >> .env + echo SENTRY_ORG=${{ secrets.SENTRY_ORG }} >> .env + echo NEXT_PUBLIC_BUTTONDOWN_TOKEN=${{ secrets.BUTTONDOWN_TOKEN }} >> .env + echo NEXT_PUBLIC_LC_KEY=${{ secrets.LC_KEY }} >> .env + echo NEXT_PUBLIC_LC_ID=${{ secrets.LC_ID }} >> .env - name: Run Cypress uses: cypress-io/github-action@v2 with: @@ -20,7 +30,7 @@ jobs: build: yarn run build start: yarn run start browser: chrome - - name: Next.js Cache + - name: Cache Next.js Build uses: actions/cache@v2 with: path: ${{ github.workspace }}/.next/cache diff --git a/.gitignore b/.gitignore index 30010736..76ee1fc0 100644 --- a/.gitignore +++ b/.gitignore @@ -44,4 +44,6 @@ yarn-error.log* !.yarn/plugins !.yarn/sdks !.yarn/versions -.pnp.* \ No newline at end of file +.pnp.* +# Sentry +.sentryclirc diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100755 index 00000000..fe4c17a2 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx --no-install commitlint --edit "" diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..1380c2e7 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +node_modules +.next \ No newline at end of file diff --git a/.prettierrc b/.prettierrc.json similarity index 50% rename from .prettierrc rename to .prettierrc.json index 66e7e941..b3d0615e 100644 --- a/.prettierrc +++ b/.prettierrc.json @@ -2,5 +2,7 @@ "trailingComma": "es5", "tabWidth": 2, "semi": false, - "singleQuote": true + "singleQuote": true, + "useTabs": true, + "endOfLine": "lf" } \ No newline at end of file diff --git a/commitlint.config.js b/commitlint.config.js new file mode 100644 index 00000000..144fcf93 --- /dev/null +++ b/commitlint.config.js @@ -0,0 +1,40 @@ +module.exports = { + extends: ['@commitlint/config-conventional'], + rules: { + 'body-leading-blank': [1, 'always'], + 'body-max-line-length': [2, 'always', 100], + 'footer-leading-blank': [1, 'always'], + 'footer-max-line-length': [2, 'always', 100], + 'header-max-length': [2, 'always', 100], + 'scope-case': [2, 'always', 'lower-case'], + 'subject-case': [ + 2, + 'never', + ['sentence-case', 'start-case', 'pascal-case', 'upper-case'], + ], + 'subject-empty': [2, 'never'], + 'subject-full-stop': [2, 'never', '.'], + 'type-case': [2, 'always', 'lower-case'], + 'type-empty': [2, 'never'], + 'type-enum': [ + 2, + 'always', + [ + 'build', + 'chore', + 'ci', + 'docs', + 'feat', + 'fix', + 'perf', + 'refactor', + 'revert', + 'style', + 'test', + 'translation', + 'security', + 'changeset', + ], + ], + }, +} diff --git a/next.config.js b/next.config.js index 91b10897..4b0558a4 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,7 @@ const Dotenv = require('dotenv-webpack') +const { withSentryConfig } = require('@sentry/nextjs') -module.exports = { +const NextConfigs = { webpack(config) { config.plugins.push(new Dotenv()) return config @@ -8,7 +9,16 @@ module.exports = { poweredByHeader: false, productionBrowserSourceMaps: false, compress: true, + swcMinify: true, + // FIXME: https://github.com/getsentry/sentry-javascript/issues/4103 + outputFileTracing: false, images: { domains: ['static.ouorz.com', 'storage.snapaper.com'], }, } + +const SentryWebpackPluginOptions = { + silent: true, +} + +module.exports = withSentryConfig(NextConfigs, SentryWebpackPluginOptions) diff --git a/package.json b/package.json index ab9b285d..1527c5d4 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,42 @@ { "name": "ouorz-next", - "version": "0.1.0", + "version": "0.2.0", "private": true, "license": "SEE LICENSE IN LICENSE", "scripts": { "dev": "next dev", "build": "next build", "start": "next start", - "lint": "eslint ./src -c .eslintrc.json --fix --ext ts,tsx", + "lint": "eslint ./src -c .eslintrc.json --fix --ext js,ts,tsx,json", "cypress:open": "cypress open", "cypress:run": "cypress run", "upgrade:dev": "ncu --upgrade && yarn install", "upgrade:prod": "ncu --upgrade && yarn install --ignore-optional" }, "dependencies": { - "crypto-js": "^4.1.1", + "@sentry/nextjs": "^6.14.1", "dotenv-webpack": "^7.0.3", - "next": "^11.1.2", + "next": "^12.0.3", "react": "^17.0.2", "react-dom": "^17.0.2", "sharp": "^0.29.2" }, "devDependencies": { - "@next/eslint-plugin-next": "^11.1.2", + "@commitlint/cli": "^14.1.0", + "@commitlint/config-conventional": "^14.1.0", + "@next/eslint-plugin-next": "^12.0.3", "@tailwindcss/typography": "^0.4.1", - "@types/crypto-js": "^4.0.2", "@types/node": "^16.11.6", - "@types/react": "^17.0.33", + "@types/react": "^17.0.34", "@types/react-highlight": "^0.12.5", "@types/react-timeago": "^4.1.3", "@types/smoothscroll-polyfill": "^0.3.1", - "@typescript-eslint/eslint-plugin": "^5.2.0", - "@typescript-eslint/parser": "^5.2.0", + "@typescript-eslint/eslint-plugin": "^5.3.0", + "@typescript-eslint/parser": "^5.3.0", "autoprefixer": "^10.4.0", "comma-number": "^2.1.0", - "eslint": "^8.1.0", - "eslint-config-next": "^11.1.2", + "eslint": "<8.0.0", + "eslint-config-next": "^12.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.26.1", @@ -50,7 +51,7 @@ "prettier": "^2.4.1", "prettier-eslint": "^13.0.0", "react-content-loader": "^6.0.3", - "react-h5-audio-player": "^3.7.2", + "react-h5-audio-player": "^3.7.4", "react-highlight": "^0.14.0", "react-infinite-scroll-component": "^6.1.0", "react-timeago": "^6.2.1", @@ -59,7 +60,7 @@ "tailwindcss": "^2.2.19", "ts-loader": "^9.2.6", "typescript": "^4.4.4", - "webpack": "^5.61.0" + "webpack": "^5.62.1" }, "optionalDependencies": { "@bahmutov/add-typescript-to-cypress": "^2.1.2", diff --git a/public/favicon.ico b/public/favicon.ico index dfc4f910..80fdc8c7 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/tony.jpg b/public/tony.jpg index f6b0e604..a9946049 100644 Binary files a/public/tony.jpg and b/public/tony.jpg differ diff --git a/sentry.client.config.js b/sentry.client.config.js new file mode 100644 index 00000000..7f7438c3 --- /dev/null +++ b/sentry.client.config.js @@ -0,0 +1,6 @@ +import * as Sentry from '@sentry/nextjs' + +Sentry.init({ + dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, + tracesSampleRate: 1.0, +}) diff --git a/sentry.properties b/sentry.properties new file mode 100644 index 00000000..55abfb93 --- /dev/null +++ b/sentry.properties @@ -0,0 +1,4 @@ +defaults.url=https://sentry.io/ +defaults.org=ouorz +defaults.project=personal-blog +cli.executable=../../../.npm/_npx/7072/lib/node_modules/@sentry/wizard/node_modules/@sentry/cli/bin/sentry-cli diff --git a/sentry.server.config.js b/sentry.server.config.js new file mode 100644 index 00000000..7f7438c3 --- /dev/null +++ b/sentry.server.config.js @@ -0,0 +1,6 @@ +import * as Sentry from '@sentry/nextjs' + +Sentry.init({ + dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, + tracesSampleRate: 1.0, +}) diff --git a/src/assets/scripts/vendors/cloudflare/index.js b/src/assets/scripts/vendors/cloudflare/index.js index 32be2563..c19230ad 100644 --- a/src/assets/scripts/vendors/cloudflare/index.js +++ b/src/assets/scripts/vendors/cloudflare/index.js @@ -4,17 +4,17 @@ const request = require('request') const schedule = require('node-schedule') const scheduleCron = () => { - schedule.scheduleJob('0 56 2 * * *', () => { - let dirPath = path.join(__dirname, '../public') - let fileName = 'beacon.min.js' - let url = 'https://static.cloudflareinsights.com/beacon.min.js' - let stream = fs.createWriteStream(path.join(dirPath, fileName)) - request(url) - .pipe(stream) - .on('close', function () { - console.log('File [' + fileName + '] Downloaded | ' + new Date()) - }) - }) + schedule.scheduleJob('0 56 2 * * *', () => { + let dirPath = path.join(__dirname, '../public') + let fileName = 'beacon.min.js' + let url = 'https://static.cloudflareinsights.com/beacon.min.js' + let stream = fs.createWriteStream(path.join(dirPath, fileName)) + request(url) + .pipe(stream) + .on('close', function () { + console.log('File [' + fileName + '] Downloaded | ' + new Date()) + }) + }) } scheduleCron() diff --git a/src/assets/scripts/vendors/cloudflare/package.json b/src/assets/scripts/vendors/cloudflare/package.json index 315be6db..3ae68d95 100644 --- a/src/assets/scripts/vendors/cloudflare/package.json +++ b/src/assets/scripts/vendors/cloudflare/package.json @@ -1,12 +1,12 @@ { - "name": "sync-cf-web-analytics", - "version": "1.0.0", - "description": "Donwload CloudFlare Web Analytics JS file to local machine once everyday", - "main": "index.js", - "author": "HelipengTony", - "license": "MIT", - "dependencies": { - "node-schedule": "^1.3.2", - "request": "^2.88.2" - } + "name": "sync-cf-web-analytics", + "version": "1.0.0", + "description": "Donwload CloudFlare Web Analytics JS file to local machine once everyday", + "main": "index.js", + "author": "HelipengTony", + "license": "MIT", + "dependencies": { + "node-schedule": "^1.3.2", + "request": "^2.88.2" + } } diff --git a/src/assets/scripts/vendors/wordpress/donors.json b/src/assets/scripts/vendors/wordpress/donors.json index 83edff62..92c63a9a 100644 --- a/src/assets/scripts/vendors/wordpress/donors.json +++ b/src/assets/scripts/vendors/wordpress/donors.json @@ -1,106 +1,107 @@ { - "name": "List of Supporters", - "donors": [{ - "name": "Leon", - "unit": "¥", - "amount": 1, - "date": "28/11/2018" - }, - { - "name": "Mr.McEleney", - "unit": "¥", - "amount": 10.01, - "date": "15/01/2019" - }, - { - "name": "my struggle", - "unit": "¥", - "amount": 40, - "date": "07/04/2019" - }, - { - "name": "Mr.Cowsill", - "unit": "¥", - "amount": 2.5, - "date": "29/05/2019" - }, - { - "name": "Harold", - "unit": "¥", - "amount": 2.5, - "date": "29/05/2019" - }, - { - "name": "钟合-", - "unit": "¥", - "amount": 300, - "date": "10/09/2019" - }, - { - "name": "Mocha", - "unit": "¥", - "amount": 5, - "date": "19/10/2019" - }, - { - "name": "Value", - "unit": "¥", - "amount": 6.6, - "date": "05/01/2020" - }, - { - "name": "空。", - "unit": "¥", - "amount": 6, - "date": "18/01/2020" - }, - { - "name": "设计元素", - "unit": "¥", - "amount": 50, - "date": "23/01/2020" - }, - { - "name": "Victor", - "unit": "¥", - "amount": 11.85, - "date": "23/01/2020" - }, - { - "name": "鸢", - "unit": "¥", - "amount": 28, - "date": "24/01/2020" - }, - { - "name": "Arya", - "unit": "¥", - "amount": 5, - "date": "06/02/2020" - }, - { - "name": "ASTRO", - "unit": "¥", - "amount": 66.66, - "date": "18/02/2020" - }, - { - "name": "Namebase", - "unit": "฿", - "amount": 0.04, - "date": "23/02/2020" - }, - { - "name": "寻街(已退款)", - "unit": "¥", - "amount": 30, - "date": "29/02/2020" - }, - { - "name": "资管君", - "unit": "¥", - "amount": 66.66, - "date": "07/03/2020" - } - ] -} \ No newline at end of file + "name": "List of Supporters", + "donors": [ + { + "name": "Leon", + "unit": "¥", + "amount": 1, + "date": "28/11/2018" + }, + { + "name": "Mr.McEleney", + "unit": "¥", + "amount": 10.01, + "date": "15/01/2019" + }, + { + "name": "my struggle", + "unit": "¥", + "amount": 40, + "date": "07/04/2019" + }, + { + "name": "Mr.Cowsill", + "unit": "¥", + "amount": 2.5, + "date": "29/05/2019" + }, + { + "name": "Harold", + "unit": "¥", + "amount": 2.5, + "date": "29/05/2019" + }, + { + "name": "钟合-", + "unit": "¥", + "amount": 300, + "date": "10/09/2019" + }, + { + "name": "Mocha", + "unit": "¥", + "amount": 5, + "date": "19/10/2019" + }, + { + "name": "Value", + "unit": "¥", + "amount": 6.6, + "date": "05/01/2020" + }, + { + "name": "空。", + "unit": "¥", + "amount": 6, + "date": "18/01/2020" + }, + { + "name": "设计元素", + "unit": "¥", + "amount": 50, + "date": "23/01/2020" + }, + { + "name": "Victor", + "unit": "¥", + "amount": 11.85, + "date": "23/01/2020" + }, + { + "name": "鸢", + "unit": "¥", + "amount": 28, + "date": "24/01/2020" + }, + { + "name": "Arya", + "unit": "¥", + "amount": 5, + "date": "06/02/2020" + }, + { + "name": "ASTRO", + "unit": "¥", + "amount": 66.66, + "date": "18/02/2020" + }, + { + "name": "Namebase", + "unit": "฿", + "amount": 0.04, + "date": "23/02/2020" + }, + { + "name": "寻街(已退款)", + "unit": "¥", + "amount": 30, + "date": "29/02/2020" + }, + { + "name": "资管君", + "unit": "¥", + "amount": 66.66, + "date": "07/03/2020" + } + ] +} diff --git a/src/assets/utilities/Api/index.ts b/src/assets/utilities/Api/index.ts index 54cfecc5..d3813868 100644 --- a/src/assets/utilities/Api/index.ts +++ b/src/assets/utilities/Api/index.ts @@ -1,71 +1,77 @@ interface Parameters { - sticky?: boolean - cate?: string - cateExclude?: string - perPage?: number - getCate?: boolean - mark?: number - page?: number - visit?: number - post?: number - search?: string - sponsor?: boolean - subs?: boolean - count?: boolean + sticky?: boolean + cate?: string + cateExclude?: string + perPage?: number + getCate?: boolean + mark?: number + page?: number + visit?: number + post?: number + search?: string + sponsor?: boolean + subs?: boolean + count?: boolean + postIDs?: boolean } export const getApi = ({ - sticky, - cate, - cateExclude, - perPage, - getCate, - mark, - page, - post, - visit, - search, - sponsor, - subs, - count, + sticky, + cate, + cateExclude, + perPage, + getCate, + mark, + page, + post, + visit, + search, + sponsor, + subs, + count, + postIDs, }: Parameters) => { - if (getCate) { - return `https://blog.ouorz.com/wp-json/wp/v2/categories/${cate}` - } + if (getCate) { + return `https://blog.ouorz.com/wp-json/wp/v2/categories/${cate}` + } - if (mark) { - return `https://blog.ouorz.com/wp-json/tony/v1/mark/${mark}` - } + if (mark) { + return `https://blog.ouorz.com/wp-json/tony/v1/mark/${mark}` + } - if (page) { - return `https://blog.ouorz.com/wp-json/wp/v2/pages/${page}` - } + if (postIDs) { + return 'https://blog.ouorz.com/wp-json/tony/v1/posts_ids' + } - if (post) { - return `https://blog.ouorz.com/wp-json/wp/v2/posts/${post}` - } + if (page) { + return `https://blog.ouorz.com/wp-json/wp/v2/pages/${page}` + } - if (visit) { - return `https://blog.ouorz.com/wp-json/tony/v1/visit/${visit}` - } + if (post) { + return `https://blog.ouorz.com/wp-json/wp/v2/posts/${post}` + } - if (sponsor) { - return 'https://blog.ouorz.com/wp-content/themes/peg/com/data/donors.php' - } + if (visit) { + return `https://blog.ouorz.com/wp-json/tony/v1/visit/${visit}` + } - if (subs) { - return 'https://api.buttondown.email/v1/subscribers' - } + if (sponsor) { + return 'https://blog.ouorz.com/wp-content/themes/peg/com/data/donors.php' + } - if (count) { - return 'https://blog.ouorz.com/wp-json/tony/v1/poststats' - } + if (subs) { + return 'https://api.buttondown.email/v1/subscribers' + } - const s = sticky ? 'sticky=1' : sticky === undefined ? '' : 'sticky=0' - const ce = cateExclude ? `&categories_exclude=${cateExclude}` : '' - const c = cate ? `&categories=${cate}` : '' - const p = perPage !== undefined ? `&per_page=${perPage}` : '' - const sc = search ? `&search=${search}` : '' + if (count) { + return 'https://blog.ouorz.com/wp-json/tony/v1/poststats' + } - return `https://blog.ouorz.com/wp-json/wp/v2/posts?${s}${p}${c}${ce}${sc}` + const s = sticky ? 'sticky=1' : sticky === undefined ? '' : 'sticky=0' + const ce = cateExclude ? `&categories_exclude=${cateExclude}` : '' + const c = cate ? `&categories=${cate}` : '' + const p = perPage !== undefined ? `&per_page=${perPage}` : '' + const sc = search ? `&search=${search}` : '' + + return `https://blog.ouorz.com/wp-json/wp/v2/posts?${s}${p}${c}${ce}${sc}` } diff --git a/src/assets/utilities/String/index.ts b/src/assets/utilities/String/index.ts index e00d8558..eeec22d4 100644 --- a/src/assets/utilities/String/index.ts +++ b/src/assets/utilities/String/index.ts @@ -1,26 +1,26 @@ interface Parameters { - str: string - n: number + str: string + n: number } export const DesSplit = ({ str, n }: Parameters) => { - if (str.replace(/[\u4e00-\u9fa5]/g, '**').length <= n) { - return str - } else { - let len = 0 - let tmpStr = '' - for (let i = 0; i < str.length; i++) { - if (/[\u4e00-\u9fa5]/.test(str[i])) { - len += 2 - } else { - len += 1 - } - if (len > n) { - break - } else { - tmpStr += str[i] - } - } - return tmpStr.replace(' ', '') + ' ...' - } + if (str.replace(/[\u4e00-\u9fa5]/g, '**').length <= n) { + return str + } else { + let len = 0 + let tmpStr = '' + for (let i = 0; i < str.length; i++) { + if (/[\u4e00-\u9fa5]/.test(str[i])) { + len += 2 + } else { + len += 1 + } + if (len > n) { + break + } else { + tmpStr += str[i] + } + } + return tmpStr.replace(' ', '') + ' ...' + } } diff --git a/src/components/Aside/index.tsx b/src/components/Aside/index.tsx index 803185eb..e035b7f2 100644 --- a/src/components/Aside/index.tsx +++ b/src/components/Aside/index.tsx @@ -1,249 +1,250 @@ -import { useState, useEffect } from 'react' +import { useState, useLayoutEffect } from 'react' import Icons from '~/components/Icons' import { useRouter } from 'next/router' import Link from 'next/link' import smoothScroll from 'smoothscroll-polyfill' export default function Aside({ preNext }: { preNext: any }) { - const router = useRouter() - const [headersResult, setHeadersResult] = useState([]) - const [headersEl, setHeadersEl] = useState([]) - - const getAllHeaders = () => { - const result: any = [[], []] - const headerElements: any = [] - - const toc: any = document.querySelector('#toc') - ? document.querySelector('#toc').getElementsByTagName('li') - : [] - - for (let i = 0, n = toc.length; i < n; i++) { - toc[i].classList.remove('toc-active') - } - - const headers: any = document - .querySelector('.prose') - .getElementsByTagName('*') - - let minLevel: number - - for (let i = 0, n: number = headers.length; i < n; i++) { - if ( - /^h\d{1}$/gi.test(headers[i].nodeName) && - headers[i].parentElement.className !== 'embed-content' - ) { - const headerLevel: number = parseInt(headers[i].tagName.substring(1, 2)) - const headerOffset: number = headers[i].offsetTop - const headerContent: string = headers[i].innerText - - if (!minLevel || headerLevel <= minLevel) { - minLevel = headerLevel - } - - result[0].push([result[0].length, headerLevel, headerContent]) - result[1].push(headerOffset) - headerElements.push(headers[i]) - } - } - - for (let i = 0, n: number = result[0].length; i < n; i++) { - result[0][i] = [ - result[0][i][0], - (result[0][i][1] - minLevel) * 10, - result[0][i][2], - ] - } - - let currentHeaderId = 1 - let currentHeaderOffset = result[1][1] - let lastHeaderOffset = result[1][0] - - const handleScroll = () => { - const scrollPosition = window.pageYOffset + 70 - - if (scrollPosition >= currentHeaderOffset) { - document - .getElementById(`header${currentHeaderId - 1}`) - .classList.remove('toc-active') - document - .getElementById(`header${currentHeaderId}`) - .classList.add('toc-active') - lastHeaderOffset = currentHeaderOffset - currentHeaderId += 1 - currentHeaderOffset = result[1][currentHeaderId] - } else if (scrollPosition < lastHeaderOffset) { - if (currentHeaderId - 2 >= 0) { - document - .getElementById(`header${currentHeaderId - 1}`) - .classList.remove('toc-active') - document - .getElementById(`header${currentHeaderId - 2}`) - .classList.add('toc-active') - currentHeaderId -= 1 - lastHeaderOffset = result[1][currentHeaderId - 1] - currentHeaderOffset = result[1][currentHeaderId] - } else { - document.getElementById(`header0`).classList.remove('toc-active') - currentHeaderId = 1 - currentHeaderOffset = result[1][1] - lastHeaderOffset = result[1][0] - } - } else if (scrollPosition > lastHeaderOffset && currentHeaderId === 1) { - document.getElementById(`header0`).classList.add('toc-active') - } - } - - return [result, handleScroll, headerElements] - } - - const Tour = () => { - const b = - preNext['next'][0] && [58, 5, 2, 74].indexOf(preNext['next'][2]) === -1 - const a = - preNext['prev'][0] && [58, 5, 2, 74].indexOf(preNext['prev'][2]) === -1 - if (a || b) { - return ( -
- {a && ( - -
- {Icons.leftPlain}Prev -
- - )} - {b && ( - -
- Next{Icons.right} -
- - )} -
- ) - } else { - return
- } - } - - const SubItem = ({ - item, - inner, - recursionTimes, - }: { - item: any - inner: boolean - recursionTimes: number - }) => { - if (inner) { - return ( -
- {recursionTimes > 0 ? ( - - ) : ( - item[2] - )} -
- ) - } else { - return ( -
  • { - headersEl[item[0]].scrollIntoView({ - behavior: 'smooth', - }) - }} - > - {recursionTimes > 0 ? ( - - ) : ( - item[2] - )} -
    • - ) - } - } - - useEffect(() => { - const result = getAllHeaders() - const handler = result[1] - setHeadersResult(result[0][0]) - setHeadersEl(result[2]) - if (result[2].length) { - window.addEventListener('scroll', handler) - } - smoothScroll.polyfill() - return () => { - window.removeEventListener('scroll', handler) - } - }, [router.asPath]) - - return ( - - ) + const router = useRouter() + const [headersResult, setHeadersResult] = useState([]) + const [headersEl, setHeadersEl] = useState([]) + + const getAllHeaders = () => { + const result: any = [[], []] + const headerElements: any = [] + + const toc: any = document.querySelector('#toc') + ? document.querySelector('#toc').getElementsByTagName('li') + : [] + + for (let i = 0, n = toc.length; i < n; i++) { + toc[i].classList.remove('toc-active') + } + + const headers: any = document + .querySelector('.prose') + .getElementsByTagName('*') + + let minLevel: number + + for (let i = 0, n: number = headers.length; i < n; i++) { + if ( + /^h\d{1}$/gi.test(headers[i].nodeName) && + headers[i].parentElement.className !== 'embed-content' + ) { + const headerLevel: number = parseInt(headers[i].tagName.substring(1, 2)) + const headerOffset: number = headers[i].offsetTop + const headerContent: string = headers[i].innerText + + if (!minLevel || headerLevel <= minLevel) { + minLevel = headerLevel + } + + result[0].push([result[0].length, headerLevel, headerContent]) + result[1].push(headerOffset) + headerElements.push(headers[i]) + } + } + + for (let i = 0, n: number = result[0].length; i < n; i++) { + result[0][i] = [ + result[0][i][0], + (result[0][i][1] - minLevel) * 10, + result[0][i][2], + ] + } + + let currentHeaderId = 1 + let currentHeaderOffset = result[1][1] + let lastHeaderOffset = result[1][0] + + const handleScroll = () => { + console.log('fuck') + const scrollPosition = window.pageYOffset + 70 + + if (scrollPosition >= currentHeaderOffset) { + document + .getElementById(`header${currentHeaderId - 1}`) + .classList.remove('toc-active') + document + .getElementById(`header${currentHeaderId}`) + .classList.add('toc-active') + lastHeaderOffset = currentHeaderOffset + currentHeaderId += 1 + currentHeaderOffset = result[1][currentHeaderId] + } else if (scrollPosition < lastHeaderOffset) { + if (currentHeaderId - 2 >= 0) { + document + .getElementById(`header${currentHeaderId - 1}`) + .classList.remove('toc-active') + document + .getElementById(`header${currentHeaderId - 2}`) + .classList.add('toc-active') + currentHeaderId -= 1 + lastHeaderOffset = result[1][currentHeaderId - 1] + currentHeaderOffset = result[1][currentHeaderId] + } else { + document.getElementById(`header0`).classList.remove('toc-active') + currentHeaderId = 1 + currentHeaderOffset = result[1][1] + lastHeaderOffset = result[1][0] + } + } else if (scrollPosition > lastHeaderOffset && currentHeaderId === 1) { + document.getElementById(`header0`).classList.add('toc-active') + } + } + + return [result, handleScroll, headerElements] + } + + const Tour = () => { + const b = + preNext['next'][0] && [58, 5, 2, 74].indexOf(preNext['next'][2]) === -1 + const a = + preNext['prev'][0] && [58, 5, 2, 74].indexOf(preNext['prev'][2]) === -1 + if (a || b) { + return ( +
    + {a && ( + +
    + {Icons.leftPlain}Prev +
    + + )} + {b && ( + +
    + Next{Icons.right} +
    + + )} +
    + ) + } else { + return
    + } + } + + const SubItem = ({ + item, + inner, + recursionTimes, + }: { + item: any + inner: boolean + recursionTimes: number + }) => { + if (inner) { + return ( +
    + {recursionTimes > 0 ? ( + + ) : ( + item[2] + )} +
    + ) + } else { + return ( +
  • { + headersEl[item[0]].scrollIntoView({ + behavior: 'smooth', + }) + }} + > + {recursionTimes > 0 ? ( + + ) : ( + item[2] + )} +
    • + ) + } + } + + useLayoutEffect(() => { + const result = getAllHeaders() + const handler = result[1] + setHeadersResult(result[0][0]) + setHeadersEl(result[2]) + if (result[2].length) { + window.addEventListener('scroll', handler) + } + smoothScroll.polyfill() + return () => { + window.removeEventListener('scroll', handler) + } + }, [router.asPath]) + + return ( + + ) } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 97cde499..808ec767 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -2,83 +2,83 @@ import React from 'react' import Icons from '~/components/Icons' interface Props { - bType: string - icon?: string - className?: string - children?: React.ReactNode - [prop: string]: any + bType: string + icon?: string + className?: string + children?: React.ReactNode + [prop: string]: any } export default function Button(props: Props) { - const { bType, icon, className, children, ...rest } = props - switch (bType) { - case 'default': - return ( - - ) - case 'menu-default': - return ( - - ) - case 'primary': - return ( - - ) - case 'menu-primary': - return ( - - ) - } + const { bType, icon, className, children, ...rest } = props + switch (bType) { + case 'default': + return ( + + ) + case 'menu-default': + return ( + + ) + case 'primary': + return ( + + ) + case 'menu-primary': + return ( + + ) + } } diff --git a/src/components/Card/Bottom.tsx b/src/components/Card/Bottom.tsx index eb9ff29e..30df5d43 100644 --- a/src/components/Card/Bottom.tsx +++ b/src/components/Card/Bottom.tsx @@ -1,20 +1,20 @@ import TimeAgo from 'react-timeago' export default function BottomCard({ item }: { item: any }) { - return ( -
    -

    - - Posted - - · - {item.post_metas.views} Views - · - - - ERT {item.post_metas.reading.time_required} min - - -

    -
    - ) + return ( +
    +

    + + Posted + + · + {item.post_metas.views} Views + · + + + ERT {item.post_metas.reading.time_required} min + + +

    +
    + ) } diff --git a/src/components/Card/Clickable/index.tsx b/src/components/Card/Clickable/index.tsx index 14cb783a..c490d70a 100644 --- a/src/components/Card/Clickable/index.tsx +++ b/src/components/Card/Clickable/index.tsx @@ -1,28 +1,28 @@ import Icons from '~/components/Icons' interface Props { - stopLoading: boolean - setStopLoading: any + stopLoading: boolean + setStopLoading: any } export default function CardClickable({ stopLoading, setStopLoading }: Props) { - return ( -
    { - setStopLoading(!stopLoading) - }} - > - {stopLoading ? ( -

    - {Icons.play}Resume - Loading -

    - ) : ( -

    - {Icons.pause}Stop Loading -

    - )} -
    - ) + return ( +
    { + setStopLoading(!stopLoading) + }} + > + {stopLoading ? ( +

    + {Icons.play}Resume + Loading +

    + ) : ( +

    + {Icons.pause}Stop Loading +

    + )} +
    + ) } diff --git a/src/components/Card/Empty/index.tsx b/src/components/Card/Empty/index.tsx index efe7c619..db36d02b 100644 --- a/src/components/Card/Empty/index.tsx +++ b/src/components/Card/Empty/index.tsx @@ -1,11 +1,11 @@ import Icons from '~/components/Icons' export default function CardEmpty() { - return ( -
    -

    - {Icons.empty}You Have Reached The - Bottom Line -

    -
    - ) + return ( +
    +

    + {Icons.empty}You Have Reached The + Bottom Line +

    +
    + ) } diff --git a/src/components/Card/Friend/index.tsx b/src/components/Card/Friend/index.tsx index 35bd0e37..a20c8706 100644 --- a/src/components/Card/Friend/index.tsx +++ b/src/components/Card/Friend/index.tsx @@ -3,35 +3,36 @@ import { DesSplit } from '~/assets/utilities/String' import Image from 'next/image' interface Props { - item: any + item: any } export default function CardFriend({ item }: Props) { - return ( -
    - -
    - ) + return ( +
    + +
    + ) } diff --git a/src/components/Card/PlainText/index.tsx b/src/components/Card/PlainText/index.tsx index ac904c66..a299f0b5 100644 --- a/src/components/Card/PlainText/index.tsx +++ b/src/components/Card/PlainText/index.tsx @@ -4,59 +4,58 @@ import { getApi } from '~/assets/utilities/Api' import React from 'react' interface Props { - item: any - sticky: boolean + item: any + sticky: boolean } export default function CardPlainText({ item }: Props) { - const [marking, setMarking] = React.useState(false) - const [marks, setMarks] = React.useState(item.post_metas.markCount) + const [marking, setMarking] = React.useState(false) + const [marks, setMarks] = React.useState(item.post_metas.markCount) + const markPost = async (id: number) => { + await fetch(getApi({ mark: id })).then(async (res: any) => { + const data = await res.json() + console.log(data) + setMarks(data.markCountNow) + setMarking(false) + }) + } - const markPost = async (id: number) => { - await fetch(getApi({ mark: id })).then(async (res: any) => { - const data = await res.json() - setMarks(data.markCountNow) - setMarking(false) - }) - } - - return ( -
    -
    -

    -

    -
    -

    - - · - - Posted - - · - -

    -
    -
    - ) + return ( +
    +
    +

    +

    +
    +

    + { + setMarking(true) + markPost(item.id) + }} + > + {marking ? ( + {Icons.loveFill} + ) : ( + {Icons.love} + )} + {marks} + + · + + Posted + + · + +

    +
    +
    + ) } diff --git a/src/components/Card/Skeleton/index.tsx b/src/components/Card/Skeleton/index.tsx index 4f7165ae..83a4be14 100644 --- a/src/components/Card/Skeleton/index.tsx +++ b/src/components/Card/Skeleton/index.tsx @@ -4,24 +4,24 @@ import dynamic from 'next/dynamic' const ContentLoader = dynamic(() => import('react-content-loader')) export default function CardSkeleton() { - const { resolvedTheme } = useTheme() - return ( -
    - {/* @ts-ignore */} - - - - - - - -
    - ) + const { resolvedTheme } = useTheme() + return ( +
    + {/* @ts-ignore */} + + + + + + + +
    + ) } diff --git a/src/components/Card/WithImage/index.tsx b/src/components/Card/WithImage/index.tsx index 6460190a..70db280b 100644 --- a/src/components/Card/WithImage/index.tsx +++ b/src/components/Card/WithImage/index.tsx @@ -7,86 +7,78 @@ import Image from 'next/image' import CardWithImagePodcast from '~/components/Card/WithImage/podcast' interface Props { - item: any - sticky: boolean - setReader: any + item: any + sticky: boolean + setReader: any } export default function CardWithImage({ item, sticky, setReader }: Props) { - if (typeof item.post_metas.fineTool === 'undefined') { - if (item.post_categories[0].term_id === 120) { - return ( - - ) - } else { - return ( -
    -
    -
    - {`featured-image-${item.post_title}`} -
    -
    -
    - -
    { - setReader({ status: true, post: item }) - }} - > - -
    -
    - -
    -
    - -
    - ) - } - } else { - return ( - - ) - } + if (typeof item.post_metas.fineTool === 'undefined') { + if (item.post_categories[0].term_id === 120) { + return + } else { + return ( +
    +
    +
    + {`featured-image-${item.post_title}`} +
    +
    +
    + +
    { + setReader({ status: true, post: item }) + }} + > + +
    +
    +
    + + +

    + + +

    +

    +
    +
    + +
    + ) + } + } else { + return ( + + ) + } } diff --git a/src/components/Card/WithImage/podcast.tsx b/src/components/Card/WithImage/podcast.tsx index b3fc09f8..975f07f9 100644 --- a/src/components/Card/WithImage/podcast.tsx +++ b/src/components/Card/WithImage/podcast.tsx @@ -6,60 +6,60 @@ import AudioPlayer from 'react-h5-audio-player' import 'react-h5-audio-player/lib/styles.css' interface Props { - item: any - sticky: boolean + item: any + sticky: boolean } const CardWithImagePodcast = ({ item, sticky }: Props) => { - return ( -
    - -
    - -
    -
    - ) + return ( +
    + +
    + +
    +
    + ) } export default CardWithImagePodcast diff --git a/src/components/Card/WithImage/tool.tsx b/src/components/Card/WithImage/tool.tsx index 4ca88e33..17d13c81 100644 --- a/src/components/Card/WithImage/tool.tsx +++ b/src/components/Card/WithImage/tool.tsx @@ -4,96 +4,96 @@ import { DesSplit } from '~/assets/utilities/String' import Link from 'next/link' interface Props { - item: any - sticky: boolean - setReader?: any + item: any + sticky: boolean + setReader?: any } export const CardTool = ({ - item, - preview, - setReader, + item, + preview, + setReader, }: { - item: any - preview: boolean - setReader?: any + item: any + preview: boolean + setReader?: any }) => { - return ( -
    -
    -
    -
    -

    - {item.post_metas.fineTool.itemName} -

    -

    - {item.post_metas.fineTool.itemDes} -

    -
    - -
    -
    - ) + return ( +
    +
    +
    +
    +

    + {item.post_metas.fineTool.itemName} +

    +

    + {item.post_metas.fineTool.itemDes} +

    +
    + +
    +
    + ) } export default function CardWithImageTool({ item, sticky, setReader }: Props) { - return ( -
    -
    - -
    - - -

    - - -

    -

    -
    - -
    - ) + return ( +
    +
    + +
    + + +

    + + +

    +

    +
    + +
    + ) } diff --git a/src/components/Card/WithOutImage/index.tsx b/src/components/Card/WithOutImage/index.tsx index 435f2043..03504f00 100644 --- a/src/components/Card/WithOutImage/index.tsx +++ b/src/components/Card/WithOutImage/index.tsx @@ -4,56 +4,56 @@ import { DesSplit } from '~/assets/utilities/String' import Link from 'next/link' interface Props { - item: any - sticky: boolean - setReader: any + item: any + sticky: boolean + setReader: any } export default function CardWithOutImage({ item, sticky, setReader }: Props) { - return ( -
    -
    -
    -
    - -
    { - setReader({ status: true, post: item }) - }} - > - -
    -
    - -
    -
    - -
    - ) + return ( +
    +
    +
    +
    + +
    { + setReader({ status: true, post: item }) + }} + > + +
    +
    + +
    +
    + +
    + ) } diff --git a/src/components/CommentBox/index.tsx b/src/components/CommentBox/index.tsx index 0df1b337..693c62a5 100644 --- a/src/components/CommentBox/index.tsx +++ b/src/components/CommentBox/index.tsx @@ -1,21 +1,21 @@ import dynamic from 'next/dynamic' import Icons from '~/components/Icons' const NexmentDiv = dynamic(() => import('~/components/Nexment'), { - ssr: false, + ssr: false, }) export default function CommentBox() { - return ( -
    -
    -

    - {Icons.comments}Comments -

    -

    - Leave a comment to join the discussion -

    -
    - -
    - ) + return ( +
    +
    +

    + {Icons.comments}Comments +

    +

    + Leave a comment to join the discussion +

    +
    + +
    + ) } diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx index 9fcdcf95..6c1227e3 100644 --- a/src/components/Content/index.tsx +++ b/src/components/Content/index.tsx @@ -3,18 +3,18 @@ import Footer from '../Footer' import React from 'react' interface Props { - children: React.ReactNode + children: React.ReactNode } export default function Content(props: Props) { - const { children } = props - return ( -
    -
    -
    - {children} -
    -
    -
    - ) + const { children } = props + return ( +
    +
    +
    + {children} +
    +
    +
    + ) } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index eb768fd2..bdd420e9 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -3,52 +3,52 @@ import { useEffect, useState } from 'react' import Icons from '~/components/Icons' export default function Footer() { - const [mounted, setMounted] = useState(false) - const { setTheme, resolvedTheme } = useTheme() + const [mounted, setMounted] = useState(false) + const { setTheme, resolvedTheme } = useTheme() - useEffect(() => setMounted(true), []) + useEffect(() => setMounted(true), []) - if (!mounted) return null - return ( -
    -
    - -
    -

    - - @ttttonyhe - {' '} - ·{' '} - - CC BY-NC-SA 4.0 - {' '} - ·{' '} - - OSS - -

    -
    - ) + if (!mounted) return null + return ( +
    +
    + +
    +

    + + @ttttonyhe + {' '} + ·{' '} + + CC BY-NC-SA 4.0 + {' '} + ·{' '} + + OSS + +

    +
    + ) } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b6ac83fd..77567790 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -6,136 +6,136 @@ import { useRouter } from 'next/router' import Search from '~/components/Search' export default function Header() { - const router = useRouter() + const router = useRouter() - const [startSearching, setStartSearching] = useState(false) - const [endSearching, setEndSearching] = useState(false) + const [startSearching, setStartSearching] = useState(false) + const [endSearching, setEndSearching] = useState(false) - const [scrollPosition, setScrollPosition] = useState(0) - const handleScroll = () => { - const position = window.pageYOffset - setScrollPosition(position) - } + const [scrollPosition, setScrollPosition] = useState(0) + const handleScroll = () => { + const position = window.pageYOffset + setScrollPosition(position) + } - useEffect(() => { - window.addEventListener('scroll', handleScroll, { passive: true }) + useEffect(() => { + window.addEventListener('scroll', handleScroll, { passive: true }) - return () => { - window.removeEventListener('scroll', handleScroll) - } - }, []) + return () => { + window.removeEventListener('scroll', handleScroll) + } + }, []) - return ( - - ) + return ( + + ) } diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index 91c85185..25550026 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -1,777 +1,777 @@ export default { - rss: ( - - - - ), - search: ( - - - - ), - love: ( - - - - ), - loveFill: ( - - - - ), - chat: ( - - - - ), - twitter: ( - - - - - ), - email: ( - - - - ), - github: ( - - - - - ), - right: ( - - - - ), - me: ( - - - - ), - sticky: ( - - - - ), - cate: ( - - - - ), - preview: ( - - - - ), - empty: ( - - - - ), - subscribe: ( - - - - ), - left: ( - - - - ), - count: ( - - - - ), - play: ( - - - - - ), - pause: ( - - - - - ), - pages: ( - - - - ), - comments: ( - - - - ), - home: ( - - - - ), - toc: ( - - - - ), - leftPlain: ( - - - - ), - mic: ( - - - - - ), - githubLine: ( - - - - - ), - alipay: ( - - - - - ), - wxpay: ( - - - - - ), - bitcoin: ( - - - - - ), - question: ( - - - - ), - people: ( - - - - ), - growth: ( - - - - ), - microphone: ( - - - - ), - sun: ( - - - - ), - moon: ( - - - - ), - lightBulb: ( - - - - ), - star: ( - - - - ), - eye: ( - - - - - ), - global: ( - - - - ), - users: ( - - - - ), - userAdd: ( - - - - ), - flag: ( - - - - ), - thumbDown: ( - - - - ), - plane: ( - - - - ), - ppt: ( - - - - ), - chatRounded: ( - - - - ), - money: ( - - - - ), - checkCircle: ( - - - - ), - warningCircle: ( - - - - ), - reply: ( - - - - ), + rss: ( + + + + ), + search: ( + + + + ), + love: ( + + + + ), + loveFill: ( + + + + ), + chat: ( + + + + ), + twitter: ( + + + + + ), + email: ( + + + + ), + github: ( + + + + + ), + right: ( + + + + ), + me: ( + + + + ), + sticky: ( + + + + ), + cate: ( + + + + ), + preview: ( + + + + ), + empty: ( + + + + ), + subscribe: ( + + + + ), + left: ( + + + + ), + count: ( + + + + ), + play: ( + + + + + ), + pause: ( + + + + + ), + pages: ( + + + + ), + comments: ( + + + + ), + home: ( + + + + ), + toc: ( + + + + ), + leftPlain: ( + + + + ), + mic: ( + + + + + ), + githubLine: ( + + + + + ), + alipay: ( + + + + + ), + wxpay: ( + + + + + ), + bitcoin: ( + + + + + ), + question: ( + + + + ), + people: ( + + + + ), + growth: ( + + + + ), + microphone: ( + + + + ), + sun: ( + + + + ), + moon: ( + + + + ), + lightBulb: ( + + + + ), + star: ( + + + + ), + eye: ( + + + + + ), + global: ( + + + + ), + users: ( + + + + ), + userAdd: ( + + + + ), + flag: ( + + + + ), + thumbDown: ( + + + + ), + plane: ( + + + + ), + ppt: ( + + + + ), + chatRounded: ( + + + + ), + money: ( + + + + ), + checkCircle: ( + + + + ), + warningCircle: ( + + + + ), + reply: ( + + + + ), } diff --git a/src/components/Label/index.tsx b/src/components/Label/index.tsx index 785b0561..77ab12bf 100644 --- a/src/components/Label/index.tsx +++ b/src/components/Label/index.tsx @@ -2,61 +2,61 @@ import Icons from '~/components/Icons' import React from 'react' interface Props { - name: string - icon?: string - children?: React.ReactNode - preview?: boolean + name: string + icon?: string + children?: React.ReactNode + preview?: boolean } export default function Label({ name, icon, children, preview }: Props) { - switch (name) { - case 'sticky': - return ( - - ) - case 'primary': - return ( - - ) - case 'secondary': - return ( - - ) - case 'green': - return ( - - ) - case 'gray': - return ( - - ) - } + switch (name) { + case 'sticky': + return ( + + ) + case 'primary': + return ( + + ) + case 'secondary': + return ( + + ) + case 'green': + return ( + + ) + case 'gray': + return ( + + ) + } } diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index f0bb3365..0c56f998 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -13,161 +13,157 @@ import useSWRInfinite from 'swr/infinite' import { getApi } from '~/assets/utilities/Api' interface Props { - posts?: any - sticky?: boolean - type?: string - cate?: number - target?: string + posts?: any + sticky?: boolean + type?: string + cate?: number + target?: string } type Post = { - code: any - // eslint-disable-next-line camelcase - post_img: { url: any } - // eslint-disable-next-line camelcase - post_categories: { term_id: number }[] - id: React.ReactText + code: any + // eslint-disable-next-line camelcase + post_img: { url: any } + // eslint-disable-next-line camelcase + post_categories: { term_id: number }[] + id: React.ReactText } export default function List({ posts, sticky, type, cate, target }: Props) { - if (posts) { - // Preview - const [reader, setReader] = useState({ status: false, post: [] }) + if (posts) { + // Preview + const [reader, setReader] = useState({ status: false, post: [] }) - return ( -
    -
    - {posts.map((item: Post) => { - if (typeof item.code === 'undefined') { - if (item.post_img.url) { - return ( - - ) - } else if (item.post_categories[0].term_id === 58) { - return ( - - ) - } else { - return ( - - ) - } - } - })} -
    -
    - -
    -
    - ) - } else { - switch (type) { - case 'index': - return - case 'cate': - return - case 'search': - return - default: - return
    - } - } + return ( +
    +
    + {posts.map((item: Post) => { + if (typeof item.code === 'undefined') { + if (item.post_img.url) { + return ( + + ) + } else if (item.post_categories[0].term_id === 58) { + return ( + + ) + } else { + return ( + + ) + } + } + })} +
    +
    + +
    +
    + ) + } else { + switch (type) { + case 'index': + return + case 'cate': + return + case 'search': + return + default: + return
    + } + } } const InfiniteList = ({ - type, - cate, - target, + type, + cate, + target, }: { - type: string - cate?: number - target?: string + type: string + cate?: number + target?: string }) => { - const [stopLoading, setStopLoading] = React.useState(false) - let url - switch (type) { - case 'index': - url = getApi({ - sticky: false, - perPage: 10, - cateExclude: '5,2,74', - }) - break - case 'cate': - url = getApi({ - perPage: 10, - cate: `${cate}`, - cateExclude: '5,2,74', - }) - break - case 'search': - url = getApi({ - cateExclude: '5,2,74', - search: target, - }) - break - default: - url = getApi({ - sticky: true, - perPage: 10, - cateExclude: '5,2,74', - }) - break - } + const [stopLoading, setStopLoading] = React.useState(false) + let url + switch (type) { + case 'index': + url = getApi({ + sticky: false, + perPage: 10, + cateExclude: '5,2,74', + }) + break + case 'cate': + url = getApi({ + perPage: 10, + cate: `${cate}`, + cateExclude: '5,2,74', + }) + break + case 'search': + url = getApi({ + cateExclude: '5,2,74', + search: target, + }) + break + default: + url = getApi({ + sticky: true, + perPage: 10, + cateExclude: '5,2,74', + }) + break + } - const { data, error, size, setSize } = useSWRInfinite( - (index) => `${url}&page=${index + 1}`, - (url) => fetch(url).then((res) => res.json()) - ) - const postsData = data ? [].concat(...data) : [] - const isEmpty = data?.[0]?.length === 0 - const isReachingEnd = - isEmpty || (data && data[data.length - 1]?.length < 10) || error + const { data, error, size, setSize } = useSWRInfinite( + (index) => `${url}&page=${index + 1}`, + (url) => fetch(url).then((res) => res.json()) + ) + const postsData = data ? [].concat(...data) : [] + const isEmpty = data?.[0]?.length === 0 + const isReachingEnd = + isEmpty || (data && data[data.length - 1]?.length < 10) || error - return ( - { - setSize(size + 1) - }} - hasMore={!isReachingEnd && !stopLoading} - loader={ -
    - - -
    - } - endMessage={ - !isReachingEnd && stopLoading ? ( - - ) : ( - - ) - } - scrollThreshold="50px" - scrollableTarget={type === 'search' ? 'searchResultsDiv' : ''} - > - -     - ) + return ( + { + setSize(size + 1) + }} + hasMore={!isReachingEnd && !stopLoading} + loader={ +
    + + +
    + } + endMessage={ + !isReachingEnd && stopLoading ? ( + + ) : ( + + ) + } + scrollThreshold="50px" + scrollableTarget={type === 'search' ? 'searchResultsDiv' : ''} + > + +     + ) } diff --git a/src/components/Metrics/Card.tsx b/src/components/Metrics/Card.tsx index a29c7abc..e2ae3e02 100644 --- a/src/components/Metrics/Card.tsx +++ b/src/components/Metrics/Card.tsx @@ -1,50 +1,50 @@ import Icons from '~/components/Icons' interface PropsType { - footer: string - value: string - link: string - icon: string - colorHex: string - subValue?: string + footer: string + value: string + link: string + icon: string + colorHex: string + subValue?: string } export default function MetricCard({ - footer, - value, - link, - icon, - colorHex, - subValue, + footer, + value, + link, + icon, + colorHex, + subValue, }: PropsType) { - return ( -
    navigateTo(link)} - className="flex items-center dark:bg-gray-800 dark:border-gray-800 rounded-md border shadow-sm hover:shadow-md py-4 px-5 bg-white cursor-pointer" - style={{ borderBottom: `5px solid ${colorHex}` }} - > -
    -

    - - {value && value !== 'NaN' ? value : '- - -'} - {subValue && subValue !== 'NaN' && '/' + subValue} - - {value && (!subValue || subValue !== 'NaN') && ( - {Icons[icon]} - )} -

    -

    - {footer} → -

    -
    -
    - ) + return ( +
    navigateTo(link)} + className="flex items-center dark:bg-gray-800 dark:border-gray-800 rounded-md border shadow-sm hover:shadow-md py-4 px-5 bg-white cursor-pointer" + style={{ borderBottom: `5px solid ${colorHex}` }} + > +
    +

    + + {value && value !== 'NaN' ? value : '- - -'} + {subValue && subValue !== 'NaN' && '/' + subValue} + + {value && (!subValue || subValue !== 'NaN') && ( + {Icons[icon]} + )} +

    +

    + {footer} → +

    +
    +
    + ) } const navigateTo = (link) => { - window.open(link) + window.open(link) } diff --git a/src/components/Metrics/GithubFollowers.tsx b/src/components/Metrics/GithubFollowers.tsx index 626cbb57..016f1a09 100644 --- a/src/components/Metrics/GithubFollowers.tsx +++ b/src/components/Metrics/GithubFollowers.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function GithubFollowerMetric() { - const { data } = useSWR('api/github', fetcher) + const { data } = useSWR('api/github', fetcher) - const followers = format(data?.followers) - const link = 'https://github.com/HelipengTony' + const followers = format(data?.followers) + const link = 'https://github.com/HelipengTony' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/GithubStars.tsx b/src/components/Metrics/GithubStars.tsx index 8503c721..4881338f 100644 --- a/src/components/Metrics/GithubStars.tsx +++ b/src/components/Metrics/GithubStars.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function GithubStarMetric() { - const { data } = useSWR('api/github', fetcher) + const { data } = useSWR('api/github', fetcher) - const stars = format(data?.stars) - const link = 'https://github.com/HelipengTony' + const stars = format(data?.stars) + const link = 'https://github.com/HelipengTony' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/JMS.tsx b/src/components/Metrics/JMS.tsx index c090e8fd..04b35670 100644 --- a/src/components/Metrics/JMS.tsx +++ b/src/components/Metrics/JMS.tsx @@ -3,20 +3,20 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function JMSMetric() { - const { data } = useSWR('api/jms', fetcher) + const { data } = useSWR('api/jms', fetcher) - const used = parseInt(data?.used).toString() - const total = parseInt(data?.total).toString() - const link = 'https://justmysocks2.net/members/clientarea.php' + const used = parseInt(data?.used).toString() + const total = parseInt(data?.total).toString() + const link = 'https://justmysocks2.net/members/clientarea.php' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/Nexment.tsx b/src/components/Metrics/Nexment.tsx index 5f045153..3c0d2f95 100644 --- a/src/components/Metrics/Nexment.tsx +++ b/src/components/Metrics/Nexment.tsx @@ -4,19 +4,19 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function NexmentMetric() { - const { data } = useSWR('api/nexment', fetcher) + const { data } = useSWR('api/nexment', fetcher) - const count = format(data?.count) - const link = - 'https://console.leancloud.cn/apps/NM8cdTVi8wqCmbeLPmiKCu79-gzGzoHsz/storage/data/nexment_comments' + const count = format(data?.count) + const link = + 'https://console.leancloud.cn/apps/NM8cdTVi8wqCmbeLPmiKCu79-gzGzoHsz/storage/data/nexment_comments' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/Nicehash.tsx b/src/components/Metrics/Nicehash.tsx index f913a035..488f17c8 100644 --- a/src/components/Metrics/Nicehash.tsx +++ b/src/components/Metrics/Nicehash.tsx @@ -3,79 +3,79 @@ import fetcher from '~/lib/fetcher' import Icons from '~/components/Icons' export default function NiceHashMetric() { - const { data } = useSWR('api/nicehash', fetcher) + const { data } = useSWR('api/nicehash', fetcher) - const profitability = data?.profitability.toFixed(4).toString() - const unpaidAmount = data?.unpaidAmount.toFixed(2).toString() - const temperature = parseInt(data?.temperature).toFixed(1).toString() - const load = parseInt(data?.load).toFixed(1).toString() - const status = data?.status - const link = 'https://www.nicehash.com/my/dashboard' + const profitability = data?.profitability.toFixed(4).toString() + const unpaidAmount = data?.unpaidAmount.toFixed(2).toString() + const temperature = parseInt(data?.temperature).toFixed(1).toString() + const load = parseInt(data?.load).toFixed(1).toString() + const status = data?.status + const link = 'https://www.nicehash.com/my/dashboard' - return ( -
    navigateTo(link)} - className="dark:bg-gray-800 dark:border-gray-800 rounded-md border shadow-sm hover:shadow-md py-4 px-5 bg-white cursor-pointer" - style={{ borderBottom: '5px solid #F59E0B' }} - > -

    - - {data ? ( - status ? ( - <> - {profitability} - - x10-5 - - - ) : ( - 'NaN' - ) - ) : ( - '- - -' - )}{' '} - {data && ( - - {data && ( - {Icons['money']} - )}{' '} - {unpaidAmount ? unpaidAmount : 0} - - x10-5 - - - )} - -

    - {data && ( -

    - - - {Icons[status ? 'checkCircle' : 'warningCircle']} - - {status ? 'Online' : 'Offline'} - - - {temperature ? temperature : 0} °C - - {load ? load : 0} % -

    - )} -

    - Bitcoin Mining → -

    -
    - ) + return ( +
    navigateTo(link)} + className="dark:bg-gray-800 dark:border-gray-800 rounded-md border shadow-sm hover:shadow-md py-4 px-5 bg-white cursor-pointer" + style={{ borderBottom: '5px solid #F59E0B' }} + > +

    + + {data ? ( + status ? ( + <> + {profitability} + + x10-5 + + + ) : ( + 'NaN' + ) + ) : ( + '- - -' + )}{' '} + {data && ( + + {data && ( + {Icons['money']} + )}{' '} + {unpaidAmount ? unpaidAmount : 0} + + x10-5 + + + )} + +

    + {data && ( +

    + + + {Icons[status ? 'checkCircle' : 'warningCircle']} + + {status ? 'Online' : 'Offline'} + + + {temperature ? temperature : 0} °C + + {load ? load : 0} % +

    + )} +

    + Bitcoin Mining → +

    +
    + ) } const navigateTo = (link) => { - window.open(link) + window.open(link) } diff --git a/src/components/Metrics/Posts.tsx b/src/components/Metrics/Posts.tsx index a99bb575..c4a52572 100644 --- a/src/components/Metrics/Posts.tsx +++ b/src/components/Metrics/Posts.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function PostsMetric() { - const { data } = useSWR('api/posts', fetcher) + const { data } = useSWR('api/posts', fetcher) - const views = format(data?.views) - const link = 'https://blog.ouorz.com/wp-admin' + const views = format(data?.views) + const link = 'https://blog.ouorz.com/wp-admin' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/Sspai.tsx b/src/components/Metrics/Sspai.tsx index 1cf07ab3..97ecbe7a 100644 --- a/src/components/Metrics/Sspai.tsx +++ b/src/components/Metrics/Sspai.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function SspaiMetric() { - const { data } = useSWR('api/substats', fetcher) + const { data } = useSWR('api/substats', fetcher) - const followers = format(data?.sspaiFollowers) - const link = 'https://sspai.com/u/tonyhe' + const followers = format(data?.sspaiFollowers) + const link = 'https://sspai.com/u/tonyhe' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/Twitter.tsx b/src/components/Metrics/Twitter.tsx index 0e203569..b1a38265 100644 --- a/src/components/Metrics/Twitter.tsx +++ b/src/components/Metrics/Twitter.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function TwitterMetric() { - const { data } = useSWR('api/substats', fetcher) + const { data } = useSWR('api/substats', fetcher) - const followers = format(data?.twitterFollowers) - const link = 'https://twitter.com/ttttonyhe' + const followers = format(data?.twitterFollowers) + const link = 'https://twitter.com/ttttonyhe' - return ( - - ) + return ( + + ) } diff --git a/src/components/Metrics/Zhihu.tsx b/src/components/Metrics/Zhihu.tsx index 8c6f1a83..4ed6a2b5 100644 --- a/src/components/Metrics/Zhihu.tsx +++ b/src/components/Metrics/Zhihu.tsx @@ -4,18 +4,18 @@ import fetcher from '~/lib/fetcher' import MetricCard from './Card' export default function ZhihuMetric() { - const { data } = useSWR('api/substats', fetcher) + const { data } = useSWR('api/substats', fetcher) - const followers = format(data?.zhihuFollowers) - const link = 'https://www.zhihu.com/people/helipengtony' + const followers = format(data?.zhihuFollowers) + const link = 'https://www.zhihu.com/people/helipengtony' - return ( - - ) + return ( + + ) } diff --git a/src/components/Nexment/index.tsx b/src/components/Nexment/index.tsx index adce5487..5da0f7c6 100644 --- a/src/components/Nexment/index.tsx +++ b/src/components/Nexment/index.tsx @@ -2,58 +2,58 @@ import { useRouter } from 'next/router' import { NexmentContainer } from 'nexment' const Nexment = () => { - const router = useRouter() - const config = { - pageKey: router.asPath.split('/')[2].toString(), - enableLinkInput: true, - enableReplyListModal: true, - descriptionTag: false, - leancloud: { - appId: process.env.NEXT_PUBLIC_LC_ID, - appKey: process.env.NEXT_PUBLIC_LC_KEY, - serverURL: 'https://ouorz-nexment.ouorz.com', - }, - admin: { - name: 'TonyHe', - email: 'tony.hlp@hotmail.com', - }, - blackList: [ - { - name: '快递', - keyword: '代发', - link: '88danhaowang.com', - email: '461646@qq.com', - }, - { - name: 'rthj', - keyword: '单号', - link: 'dh5u.com', - }, - { - keyword: '快递', - }, - { - keyword: '空包', - }, - { - keyword: '快递', - }, - { - keyword: '快发', - }, - { - keyword: '快单', - }, - { - keyword: '一毛钱', - }, - ], - } - if (process.env.NEXT_PUBLIC_LC_ID && process.env.NEXT_PUBLIC_LC_KEY) { - return - } else { - return <> - } + const router = useRouter() + const config = { + pageKey: router.asPath.split('/')[2].toString(), + enableLinkInput: true, + enableReplyListModal: true, + descriptionTag: false, + leancloud: { + appId: process.env.NEXT_PUBLIC_LC_ID, + appKey: process.env.NEXT_PUBLIC_LC_KEY, + serverURL: 'https://ouorz-nexment.ouorz.com', + }, + admin: { + name: 'TonyHe', + email: 'tony.hlp@hotmail.com', + }, + blackList: [ + { + name: '快递', + keyword: '代发', + link: '88danhaowang.com', + email: '461646@qq.com', + }, + { + name: 'rthj', + keyword: '单号', + link: 'dh5u.com', + }, + { + keyword: '快递', + }, + { + keyword: '空包', + }, + { + keyword: '快递', + }, + { + keyword: '快发', + }, + { + keyword: '快单', + }, + { + keyword: '一毛钱', + }, + ], + } + if (process.env.NEXT_PUBLIC_LC_ID && process.env.NEXT_PUBLIC_LC_KEY) { + return + } else { + return <> + } } export default Nexment diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx index 224175e9..d5231031 100644 --- a/src/components/Page/index.tsx +++ b/src/components/Page/index.tsx @@ -3,18 +3,18 @@ import Footer from '../Footer' import React from 'react' interface Props { - children: React.ReactNode + children: React.ReactNode } export default function Page(props: Props) { - const { children } = props - return ( -
    -
    -
    - {children} -
    -
    -
    - ) + const { children } = props + return ( +
    +
    +
    + {children} +
    +
    +
    + ) } diff --git a/src/components/PageCard/index.tsx b/src/components/PageCard/index.tsx index 27205a62..0909b668 100644 --- a/src/components/PageCard/index.tsx +++ b/src/components/PageCard/index.tsx @@ -2,67 +2,67 @@ import Icons from '~/components/Icons' import { useRouter } from 'next/router' interface Props { - title: string - des: string - icon?: string - iconSmall?: string - className?: string - href?: string + title: string + des: string + icon?: string + iconSmall?: string + className?: string + href?: string } export default function PageCard({ - title, - des, - icon, - iconSmall, - className, - href, + title, + des, + icon, + iconSmall, + className, + href, }: Props) { - const router = useRouter() - const handleClick = () => { - if (href) { - if (href.indexOf('http') === -1) { - router.push(href) - } else { - window.location.href = href - } - } - } - return ( -
    - {icon && ( - - )} -
    -

    - {iconSmall && ( - - )} - {title} -

    -

    - {des} -

    -
    -
    - ) + const router = useRouter() + const handleClick = () => { + if (href) { + if (href.indexOf('http') === -1) { + router.push(href) + } else { + window.location.href = href + } + } + } + return ( +
    + {icon && ( + + )} +
    +

    + {iconSmall && ( + + )} + {title} +

    +

    + {des} +

    +
    +
    + ) } diff --git a/src/components/PostContent/index.tsx b/src/components/PostContent/index.tsx index 664850c6..fc480b8f 100644 --- a/src/components/PostContent/index.tsx +++ b/src/components/PostContent/index.tsx @@ -2,9 +2,9 @@ import Highlight from 'react-highlight' import 'highlight.js/styles/atom-one-dark.css' export default function PostContent({ content }: { content: string }) { - return ( -
    - {content} -
    - ) + return ( +
    + {content} +
    + ) } diff --git a/src/components/Reader/index.tsx b/src/components/Reader/index.tsx index 7c1850b9..3d8de3f6 100644 --- a/src/components/Reader/index.tsx +++ b/src/components/Reader/index.tsx @@ -3,63 +3,63 @@ import { useEffect } from 'react' import TimeAgo from 'react-timeago' export default function Reader({ - data, - setReader, + data, + setReader, }: { - data: { status: boolean; post: any } - setReader: any + data: { status: boolean; post: any } + setReader: any }) { - if (data.status) { - useEffect(() => { - document.getElementsByTagName('body')[0].classList.add('stop-scrolling') - }, []) - } - return ( - data.post.length !== 0 && ( -
    -
    { - setReader({ status: false, post: data.post }) - setTimeout(() => { - setReader({ status: false, post: [] }) - }, 500) - document - .getElementsByTagName('body')[0] - .classList.remove('stop-scrolling') - }} - >
    -
    -

    - {data.post.title.rendered} -

    -

    - - Posted - - · - {data.post.post_metas.views} Views - · - - - {data.post.post_metas.reading.word_count} Words - - - - ERT {data.post.post_metas.reading.time_required} min - - - -

    - -
    -
    - ) - ) + if (data.status) { + useEffect(() => { + document.getElementsByTagName('body')[0].classList.add('stop-scrolling') + }, []) + } + return ( + data.post.length !== 0 && ( +
    +
    { + setReader({ status: false, post: data.post }) + setTimeout(() => { + setReader({ status: false, post: [] }) + }, 500) + document + .getElementsByTagName('body')[0] + .classList.remove('stop-scrolling') + }} + /> +
    +

    + {data.post.title.rendered} +

    +

    + + Posted + + · + {data.post.post_metas.views} Views + · + + + {data.post.post_metas.reading.word_count} Words + + + + ERT {data.post.post_metas.reading.time_required} min + + + +

    + +
    +
    + ) + ) } diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 50b09b4d..55aaa2f9 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -3,94 +3,94 @@ import Icons from '~/components/Icons' import List from '~/components/List' interface SearchProps { - startSearching: boolean - endSearching: boolean - setStartSearching: any - setEndSearching: any + startSearching: boolean + endSearching: boolean + setStartSearching: any + setEndSearching: any } export default function Search({ - startSearching, - setStartSearching, - endSearching, - setEndSearching, + startSearching, + setStartSearching, + endSearching, + setEndSearching, }: SearchProps) { - const [searchContent, setSearchContent] = useState('') - const [searchResultsDisplay, setSearchResultsDisplay] = - useState(false) + const [searchContent, setSearchContent] = useState('') + const [searchResultsDisplay, setSearchResultsDisplay] = + useState(false) - const terminateSearch = () => { - setEndSearching(true) - setStartSearching(false) - setTimeout(() => { - setEndSearching(false) - setSearchContent('') - setSearchResultsDisplay(false) - }, 250) - document.getElementsByTagName('body')[0].classList.remove('stop-scrolling') - } + const terminateSearch = () => { + setEndSearching(true) + setStartSearching(false) + setTimeout(() => { + setEndSearching(false) + setSearchContent('') + setSearchResultsDisplay(false) + }, 250) + document.getElementsByTagName('body')[0].classList.remove('stop-scrolling') + } - return ( - (startSearching || endSearching) && ( -
    -
    -
    -
    - - {Icons.search} - - { - setSearchResultsDisplay(false) - setSearchContent(e.target.value) - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - setSearchResultsDisplay(true) - } - }} - /> + return ( + (startSearching || endSearching) && ( +
    +
    +
    +
    + + {Icons.search} + + { + setSearchResultsDisplay(false) + setSearchContent(e.target.value) + }} + onKeyPress={(e) => { + if (e.key === 'Enter') { + setSearchResultsDisplay(true) + } + }} + /> - {!searchContent.length || ( - - {Icons.reply} - - )} -
    -
    - {searchResultsDisplay && ( - - )} -
    -
    -
    - ) - ) + {!searchContent.length || ( + + {Icons.reply} + + )} +
    +
    + {searchResultsDisplay && ( + + )} +
    +
    +
    + ) + ) } diff --git a/src/components/SubscriptionBox/index.tsx b/src/components/SubscriptionBox/index.tsx index 56aa355e..430f5257 100644 --- a/src/components/SubscriptionBox/index.tsx +++ b/src/components/SubscriptionBox/index.tsx @@ -3,122 +3,122 @@ import Icons from '~/components/Icons' import { getApi } from '~/assets/utilities/Api' const SubscriptionBox = ({ type }: { type: string }) => { - const [email, setEmail] = React.useState('') - const [subscribed, setSubscribed] = React.useState(false) - const [processing, setProcessing] = React.useState(false) + const [email, setEmail] = React.useState('') + const [subscribed, setSubscribed] = React.useState(false) + const [processing, setProcessing] = React.useState(false) - const doSubscribe = async () => { - setProcessing(true) + const doSubscribe = async () => { + setProcessing(true) - const data = await fetch(getApi({ subs: true }), { - method: 'post', - headers: { - 'Content-Type': 'application/json', - Authorization: process.env.NEXT_PUBLIC_BUTTONDOWN_TOKEN, - }, - body: JSON.stringify({ email: email, tags: ['Blog Newsletter'] }), - }) - .then((res) => res.json()) - .finally(() => setProcessing(false)) + const data = await fetch(getApi({ subs: true }), { + method: 'post', + headers: { + 'Content-Type': 'application/json', + Authorization: process.env.NEXT_PUBLIC_BUTTONDOWN_TOKEN, + }, + body: JSON.stringify({ email: email, tags: ['Blog Newsletter'] }), + }) + .then((res) => res.json()) + .finally(() => setProcessing(false)) - if (data.creation_date) { - setSubscribed(true) - } else { - alert('An error has occurred, please try again') - } - } + if (data.creation_date) { + setSubscribed(true) + } else { + alert('An error has occurred, please try again') + } + } - if (type === 'sm') { - return ( -
    -
    -

    - {Icons.subscribe}Get post - updates straight to your inbox -

    -
    -
    - {subscribed ? ( -
    - Succeed -
    - ) : ( - { - setEmail(e.target.value) - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - doSubscribe() - } - }} - > - )} -
    -
    - ) - } else { - return ( -
    -
    -

    - {Icons.subscribe}Subscribe -

    -

    - Get post updates straight to your inbox -

    -
    -
    -
    - { - setEmail(e.target.value) - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - doSubscribe() - } - }} - > - {subscribed ? ( -
    - Succeed -
    - ) : ( -
    { - doSubscribe() - }} - > - - {processing ? 'Processing...' : 'Subscribe'} - -
    - )} -
    - - {Icons.chatRounded} Discord Server - -
    -
    - ) - } + if (type === 'sm') { + return ( +
    +
    +

    + {Icons.subscribe}Get post + updates straight to your inbox +

    +
    +
    + {subscribed ? ( +
    + Succeed +
    + ) : ( + { + setEmail(e.target.value) + }} + onKeyPress={(e) => { + if (e.key === 'Enter') { + doSubscribe() + } + }} + /> + )} +
    +
    + ) + } else { + return ( +
    +
    +

    + {Icons.subscribe}Subscribe +

    +

    + Get post updates straight to your inbox +

    +
    +
    +
    + { + setEmail(e.target.value) + }} + onKeyPress={(e) => { + if (e.key === 'Enter') { + doSubscribe() + } + }} + /> + {subscribed ? ( +
    + Succeed +
    + ) : ( +
    { + doSubscribe() + }} + > + + {processing ? 'Processing...' : 'Subscribe'} + +
    + )} +
    + + {Icons.chatRounded} Discord Server + +
    +
    + ) + } } export default SubscriptionBox diff --git a/src/components/Top/index.tsx b/src/components/Top/index.tsx index a6c66ed9..d4e65c0d 100644 --- a/src/components/Top/index.tsx +++ b/src/components/Top/index.tsx @@ -2,56 +2,56 @@ import Button from '~/components/Button' import Link from 'next/link' export default function Top() { - return ( - - ) + return ( + + ) } diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts index 61b8a2ef..0b730902 100644 --- a/src/lib/fetcher.ts +++ b/src/lib/fetcher.ts @@ -1,4 +1,4 @@ export default async function Fetcher(route: string) { - const res = await fetch(route) - return res.json() + const res = await fetch(route) + return res.json() } diff --git a/src/lib/withSentry.ts b/src/lib/withSentry.ts new file mode 100644 index 00000000..b178ddcb --- /dev/null +++ b/src/lib/withSentry.ts @@ -0,0 +1,11 @@ +import * as Sentry from '@sentry/nextjs' +import type { NextApiRequest, NextApiResponse, NextApiHandler } from 'next' + +// FIXME: https://github.com/getsentry/sentry-javascript/issues/3852 +// API resolved without sending a response for *, this may result in stalled requests. +export default (fn: NextApiHandler) => { + return async (req: NextApiRequest, res: NextApiResponse) => { + await Sentry.withSentry(fn)(req, res) + await res.end() + } +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index dbff1a53..24d6eaae 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -5,36 +5,36 @@ import Button from '~/components/Button' import { useRouter } from 'next/router' export default function PageNotFound() { - const router = useRouter() - return ( -
    - - 404 - TonyHe - - - -
    -
    -

    - Oops -

    -

    - 404 Not Found -

    -
    - -
    -
    -
    -     -
    - ) + const router = useRouter() + return ( +
    + + 404 - TonyHe + + + +
    +
    +

    + Oops +

    +

    + 404 Not Found +

    +
    + +
    +
    +
    +     +
    + ) } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 38a12d84..4b017571 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,29 +6,29 @@ import { ThemeProvider } from 'next-themes' import Script from 'next/script' function App({ Component, pageProps }: AppProps) { - return ( -
    - - - -
    - -
    -     -
    - ) + return ( +
    +