Merge pull request #61 from DefectingCat/dev

Upgrade to next.js 13
2025-07-16 09:11:38 +00:00 · 2022-11-21 15:38:31 +08:00
parent 112dcc73b4 6527bcbe36
commit 9b5c444ebf
21 changed files with 1217 additions and 1043 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -1,3 +1,4 @@
 node_modules
 out
 .next
+public
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@ -81,9 +81,8 @@ const HeadBar = () => {
          'items-center relative'
        )}
      >
-        <Link href="/" passHref>
-          <a
-            href=""
+        <Link href="/">
+          <span
            className={cn(
              'font-semibold font-Aref-Ruqaa',
              'text-3xl tracking-widest',
@ -91,7 +90,7 @@ const HeadBar = () => {
            )}
          >
            RUA!
-          </a>
+          </span>
        </Link>

        <FiMenu
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@ -10,7 +10,6 @@ const PostCard = ({ post }: Props) => {
  return (
    <>
      <Link href={`/p/${post.slug}`} passHref>
-        <a>
        <article
          className={cn(
            'rounded-xl py-4 px-5 md:p-7 ',
@ -46,7 +45,6 @@ const PostCard = ({ post }: Props) => {
            <div className="lg:hidden">{post.date}</div>
          </div>
        </article>
-        </a>
      </Link>
    </>
  );
--- a/components/RUA/RUAPagination.tsx
+++ b/components/RUA/RUAPagination.tsx
@ -28,10 +28,8 @@ const RUAPagination = ({
        <ul className="flex items-center justify-between -space-x-px">
          <li>
            {hasPrev ? (
-              <Link href={prevLink} passHref>
-                <a>
+              <Link href={prevLink}>
                <Button>Prev</Button>
-                </a>
              </Link>
            ) : (
              <Button disabled>Prev</Button>
@ -48,10 +46,8 @@ const RUAPagination = ({

          <li>
            {hasNext ? (
-              <Link href={nextLink} passHref>
-                <a>
+              <Link href={nextLink}>
                <Button>Next</Button>
-                </a>
              </Link>
            ) : (
              <Button disabled>Next</Button>
--- a/components/gists/FileContent.tsx
+++ b/components/gists/FileContent.tsx
@ -1,4 +1,5 @@
 import Anchor from 'components/mdx/Anchor';
+import LinkAnchor from 'components/mdx/LinkAnchor';
 import Loading from 'components/RUA/loading/RUALoading';
 import dayjs from 'dayjs';
 import { GistData } from 'lib/fetcher';
@ -24,8 +25,10 @@ const FileContent = ({ gists }: Props) => {
                {/* Username and file name */}
                <h1 className="md:text-lg">
                  {g.login} /
-                  <Link href={`/g/${g.id}`} passHref>
-                    <Anchor external={false}>{g.files[f].filename}</Anchor>
+                  <Link href={`/g/${g.id}`}>
+                    <LinkAnchor external={false}>
+                      {g.files[f].filename}
+                    </LinkAnchor>
                  </Link>
                </h1>
                {/* Time */}
--- a/components/mdx/Image.tsx
+++ b/components/mdx/Image.tsx
@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import NextImage, { ImageProps } from 'next/future/image';
+import NextImage, { ImageProps } from 'next/image';

 interface Props extends ImageProps {}

--- a/components/mdx/LinkAnchor.tsx
+++ b/components/mdx/LinkAnchor.tsx
@ -0,0 +1,29 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+import { FiExternalLink } from 'react-icons/fi';
+
+interface Props {
+  children: ReactNode;
+  external?: boolean;
+}
+
+const Anchor = ({ children, external = true }: Props) => {
+  return (
+    <>
+      <span
+        className={cn(
+          'mx-[2px] text-teal-500 relative',
+          'before:left-0 before:top-[1px] before:block before:absolute',
+          'before:w-full before:h-full before:transition-all before:shadow-underline',
+          'hover:before:shadow-throughline',
+          'dark:text-teal-600'
+        )}
+      >
+        {children}
+        {external && <FiExternalLink className="inline ml-1 mb-[0.2rem]" />}
+      </span>
+    </>
+  );
+};
+
+export default Anchor;
--- a/components/pages/ProjectCard.tsx
+++ b/components/pages/ProjectCard.tsx
@ -24,7 +24,8 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
          'hover:bg-slate-200',
          'transition-all duration-300',
          'flex items-center cursor-pointer',
-          'justify-between'
+          'justify-between dark:bg-rua-gray-800',
+          'hover:dark:bg-rua-gray-700'
        )}
      >
        {Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
@ -35,7 +36,14 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
          target="_blank"
          rel="noreferrer"
        >
-          <h2 className="text-xl">{project.name}</h2>
+          <h2
+            className={classNames(
+              'text-xl overflow-hidden',
+              'text-ellipsis whitespace-nowrap'
+            )}
+          >
+            {project.name}
+          </h2>
          <span
            className={classNames(
              'overflow-hidden break-keep text-ellipsis',
--- a/next.config.mjs
+++ b/next.config.mjs
@ -10,7 +10,7 @@ const nextConfig = {
  output: 'standalone',
  images: isExport ? { unoptimized: true } : {},
  experimental: {
-    // runtime: 'nodejs',
+    // runtime: 'experimental-edge',
    largePageDataBytes: 512 * 1000,
  },
  compiler: {
--- a/package.json
+++ b/package.json
@ -14,49 +14,49 @@
    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""
  },
  "dependencies": {
-    "@codesandbox/sandpack-react": "^1.15.2",
+    "@codesandbox/sandpack-react": "^1.17.0",
    "@docsearch/react": "3",
-    "@giscus/react": "^2.2.0",
+    "@giscus/react": "^2.2.4",
    "@mapbox/rehype-prism": "^0.8.0",
    "@tweenjs/tween.js": "^18.6.4",
    "algoliasearch": "^4.14.2",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.6",
-    "next": "12.3.1",
-    "next-mdx-remote": "^4.1.0",
+    "next": "13.0.4",
+    "next-mdx-remote": "^4.2.0",
    "next-themes": "^0.2.1",
-    "octokit": "^2.0.9",
+    "octokit": "^2.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "rehype-react": "^7.1.1",
-    "rehype-slug": "^5.0.1",
+    "rehype-slug": "^5.1.0",
    "remark-frontmatter": "^4.0.1",
    "remark-gfm": "^3.0.1",
    "rua-three": "^1.1.1",
-    "sharp": "^0.31.1",
+    "sharp": "^0.31.2",
    "stats.js": "^0.17.0",
-    "three": "^0.145.0"
+    "three": "^0.146.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.0",
-    "@types/node": "18.11.4",
-    "@types/react": "18.0.21",
+    "@types/jest": "^29.2.3",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
    "@types/stats.js": "^0.17.0",
-    "@types/three": "^0.144.0",
-    "autoprefixer": "^10.4.12",
+    "@types/three": "^0.146.0",
+    "autoprefixer": "^10.4.13",
    "cross-env": "^7.0.3",
    "dotenv": "^16.0.3",
-    "eslint": "8.26.0",
-    "eslint-config-next": "12.3.1",
+    "eslint": "8.28.0",
+    "eslint-config-next": "13.0.4",
    "gray-matter": "^4.0.3",
-    "jest": "^29.2.1",
-    "jest-environment-jsdom": "^29.2.1",
-    "postcss": "^8.4.18",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "postcss": "^8.4.19",
    "prettier": "^2.7.1",
-    "tailwindcss": "^3.2.1",
-    "typescript": "4.8.4"
+    "tailwindcss": "^3.2.4",
+    "typescript": "4.9.3"
  }
 }
--- a/pages/about.tsx
+++ b/pages/about.tsx
@ -189,26 +189,6 @@ const About: NextPageWithLayout = () => {
            'px-10 py-4 mx-auto lg:px-0 lg:py-10'
          )}
        >
-          {/* <div className="w-16 h-16 lg:w-[72px] lg:h-[72px]">
-            <Image
-              src={avatar}
-              alt="Avatar"
-              priority
-              width={72}
-              height={72}
-              className="rounded-full"
-            />
-          </div>
-
-          <div className="pl-4 text-xl lg:text-2xl lg:pl-10">
-            <h1 className="font-semibold font-Barlow">
-              Arthur / Defectink / xfy
-            </h1>
-            <div className="h-[1px] rounded-lg bg-gray-400"></div>
-            <div className="text-base lg:text-lg">
-              Long may the sun shine ☀️
-            </div>
-          </div> */}
          <h1 className="text-5xl font-semibold font-Barlow">About</h1>
        </div>
      </main>
--- a/pages/g/[id].tsx
+++ b/pages/g/[id].tsx
@ -1,4 +1,4 @@
-import Anchor from 'components/mdx/Anchor';
+import LinkAnchor from 'components/mdx/LinkAnchor';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { getGists, getSignalGist, SingalGist } from 'lib/fetcher';
@ -30,8 +30,8 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
              className="rounded-full "
            />
            <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
-              <Link href="/gists" passHref>
-                <Anchor external={false}>{gist.login}</Anchor>
+              <Link href="/gists">
+                <LinkAnchor external={false}>{gist.login}</LinkAnchor>
              </Link>
              /{Object.keys(gist.files)[0]}
            </h1>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -2,8 +2,8 @@ import cn from 'classnames';
 import { gltfLoader, manager } from 'lib/gltfLoader';
 import { getMousePosition } from 'lib/utils';
 import dynamic from 'next/dynamic';
-import Image from 'next/future/image';
 import Head from 'next/head';
+import Image from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
 import styles from 'styles/index/index.module.css';
@ -137,7 +137,6 @@ const Home: NextPageWithLayout = () => {

      <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
        <div className="z-0 flex flex-col w-full h-full max-w-4xl px-4 py-32 text-2xl">
-          {/* <h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1> */}
          <h1 className="flex pb-4 text-5xl">
            <span className={cn('font-Aleo font-semibold', styles.gradient)}>
              Hi there
@ -171,38 +170,6 @@ const Home: NextPageWithLayout = () => {
              </div>
            )}
          </div>
-          {/* <p>I&apos;m a Front-end developer. Yes, that&apos;s mean</p>
-            <p
-              onMouseOver={() => setShowLang(true)}
-              onMouseLeave={() => setShowLang(false)}
-            >
-              <span className={cn('font-Aleo font-semibold', style.gradient)}>
-                I make websites{' '}
-              </span>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                (and web apps)
-              </span>
-              <span className="text-sky-500 dark:text-sky-600 font-Aleo">
-                .{' '}
-              </span>
-              The{' '}
-              <span className={cn('font-Aleo', showLang && 'hidden')}>
-                JavaScript
-              </span>
-              <span
-                className={cn('hidden font-Aleo', showLang && '!inline-block')}
-              >
-                TypeScript
-              </span>{' '}
-              is my favorite language.
-            </p>
-            <p>
-              I&apos;m not a creator. Just a little guy standing on the
-              shoulders of giants with a little imagination.
-            </p>
-            <p>
-              Open source is my passion. It&apos;s making everything be great.{' '}
-            </p> */}
        </div>
      </main>
    </>
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@ -2,11 +2,27 @@ import classNames from 'classnames';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
-import { SiGitea } from 'react-icons/si';
+import {
+  SiGitea,
+  SiNextdotjs,
+  SiThreedotjs,
+  SiTsnode,
+  SiVim,
+} from 'react-icons/si';
+import { VscGithubInverted } from 'react-icons/vsc';

 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 const ProjectCard = dynamic(() => import('components/pages/ProjectCard'));

+const iconMap = {
+  gitea: <SiGitea />,
+  nextjs: <SiNextdotjs />,
+  github: <VscGithubInverted />,
+  vim: <SiVim />,
+  tsnode: <SiTsnode />,
+  three: <SiThreedotjs />,
+};
+
 const Projects = ({
  projects,
  selfHosts,
@ -26,7 +42,11 @@ const Projects = ({
            )}
          >
            {projects.map((item) => (
-              <ProjectCard key={item.id} project={item} />
+              <ProjectCard
+                icon={iconMap[item.icon ?? 'github']}
+                key={item.id}
+                project={item}
+              />
            ))}
          </div>
        </div>
@ -42,7 +62,11 @@ const Projects = ({
            )}
          >
            {selfHosts.map((item) => (
-              <ProjectCard icon={<SiGitea />} key={item.id} project={item} />
+              <ProjectCard
+                icon={iconMap[item.icon ?? 'github']}
+                key={item.id}
+                project={item}
+              />
            ))}
          </div>
        </div>
@ -53,6 +77,7 @@ const Projects = ({

 export type Project = {
  id: number;
+  icon?: keyof typeof iconMap;
  name: string;
  description: string;
  url: string;
@ -62,17 +87,47 @@ export const getStaticProps: GetStaticProps<{
  projects: Project[];
  selfHosts: Project[];
 }> = async () => {
-  const projects = [
+  const projects: Project[] = [
    {
      id: 0,
+      icon: 'three',
      name: '3d-globe',
      description: 'A 3d globe made by three.js.',
      url: 'https://github.com/DefectingCat/3d-globe',
    },
+    {
+      id: 1,
+      icon: 'nextjs',
+      name: 'Blog',
+      description: 'This site.',
+      url: 'https://github.com/DefectingCat/DefectingCat.github.io',
+    },
+    {
+      id: 2,
+      icon: 'tsnode',
+      name: 'boring-avatars-services',
+      description: 'Random avatars.',
+      url: 'https://github.com/DefectingCat/boring-avatars-services',
+    },
+    {
+      id: 3,
+      icon: 'tsnode',
+      name: 'RUA DDNS',
+      description: 'DDNS Script for DNSPod',
+      url: 'https://github.com/DefectingCat/rua-ddns',
+    },
+    {
+      id: 4,
+      icon: 'vim',
+      name: 'Dotfiles',
+      description: 'Some dotfiles.',
+      url: 'https://github.com/DefectingCat/dotfiles',
+    },
  ];
-  const selfHosts = [
+  const selfHosts: Project[] = [
    {
      id: 0,
+      icon: 'gitea',
      name: 'Gitea',
      description: 'Selfhost git.',
      url: 'https://git.rua.plus/',
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,11 +2,7 @@
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@ -19,14 +15,8 @@
    "isolatedModules": true,
    "jsx": "preserve",
    // "typeRoots": ["./types", "./node_modules/@types"],
-    "incremental": true,
+    "incremental": true
  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }
--- a/yarn.lock
+++ b/yarn.lock