refactor!: use nextra for document generator (#100)

.github/workflows/ci.yml

@@ -0,0 +1,41 @@
+on:
+  push:
+  pull_request:
+
+
+name: Build CI
+
+jobs:
+  build:
+    name: Build
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - uses: pnpm/action-setup@v2.2.2
+        with:
+          version: latest
+          run_install: false
+
+      - name: Build project
+        run: |
+          pnpm i
+          pnpm run build
+          npx next export

.github/workflows/deploy.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Deploy
 
 on:
@@ -32,17 +29,20 @@ jobs:
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v2.2.2
         with:
           version: latest
-          run_install: |
-            - recursive: true
-              args: [--no-frozen-lockfile]
-      - run: sh scripts/build.sh
+          run_install: false
+
+      - name: Build project
+        run: |
+          pnpm i
+          pnpm run build
+          npx next export
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: dist
+          publish_dir: out
     env:
-      CI: true
+      CI: true

.gitignore

@@ -1,22 +1,3 @@
-# Ignore all files in the dist directory
-dist
-
-**/.vitepress/dist
-
-# Ignore all files in the modules directory
-
+.next
 node_modules
-
-# Ignore all files in the .idea directory
-
-.idea
-
-# Ignore all files in the .vscode directory
-
-.vscode
-
-
-# Vitepress cache
-
-src/.vitepress/dist
-src/.vitepress/cache
+out

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "yaml.schemas": {
-    "https://json.schemastore.org/github-workflow.json": "file:///Users/wibus/wibus/Develop/nx-docs-next/.github/workflows/deploy.yml"
+    "https://json.schemastore.org/github-workflow.json": "file:///Users/wibus/Developer/mog-docs/.github/workflows/deploy.yml"
   }
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 wibus-wee
+Copyright (c) 2022 Shu Ding
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,26 +2,26 @@
 
 ## Contributing 贡献
 
-这个站点使用的是 Vitepress. 站点内容使用 Markdown 编写，文件都在根目录中. 如果只有一些简单的修改，你可以直接在 GitHub 网页端进行修改并新建一个 Pull Request.
+这个站点使用的是 Nextra. 站点内容使用 MDX 编写，文件都在根目录中. 如果只有一些简单的修改，你可以直接在 GitHub 网页端进行修改并新建一个 Pull Request.
 
-在本地开发中，[pnpm](https://pnpm.io/) 被选用为项目的包管理器，你需要使用pnpm安装依赖：
+在本地开发中，[pnpm](https://pnpm.io/) 被选用为项目的包管理器，你需要使用 pnpm 安装依赖：
 
 ```bash
 pnpm i
 pnpm run dev
 pnpm run build
-pnpm run serve
+pnpm run start
 ```
 
-**请注意！请务必在修改后使用 `build` 和 `serve` 查看构建产物是否正常输出！**
+**请注意！请务必在修改后使用 `build` 和 `start` 查看构建产物是否正常输出！**
 
 ## Working on the content 修改文字
 
-- 关于支持的 Markdown 扩展和在 Markdown 内部使用 Vue 语法的能力，请参阅 Vitepress 文档
+- 关于支持的 Markdown 扩展和在 Markdown 内部使用 React 语法的能力，请参阅 Nextra 文档
 - 有关编写和维护文档内容的规则和建议，请参阅编写指南。
 
 ## Guide 编写指南
 
 **<u>编写内容的时候需要注意的事情</u>**：
 
-1. 中文与英文之间请保留一个空格，如`测试 test 测试`
+1. 中文与英文之间请保留一个空格，如`测试 test 测试`

components/blog-index.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import { getPagesUnderRoute } from "nextra/context";
+import Link from "next/link";
+
+export default function BlogIndex({ more = "Read more" }) {
+  return getPagesUnderRoute("/blog").map((page) => {
+    return (
+      <div key={page.route} className="mb-10">
+        <h3>
+          <Link
+            href={page.route}
+            style={{ color: "inherit", textDecoration: "none" }}
+            className="block font-semibold mt-8 text-2xl "
+          >
+            {page.meta?.title || page.frontMatter?.title || page.name}
+          </Link>
+        </h3>
+        <p className="opacity-80 mt-6 leading-7">
+          {page.frontMatter?.description}{" "}
+          <span className="inline-block">
+            <Link
+              href={page.route}
+              className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
+            >
+              {more + " →"}
+            </Link>
+          </span>
+        </p>
+        {page.frontMatter?.date ? (
+          <p className="opacity-50 text-sm mt-6 leading-7">
+            {/* December 9th, 2022 */}
+            {new Date(page.frontMatter.date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
+          </p>
+        ) : null}
+      </div>
+    );
+  });
+}

components/features/index.module.css

@@ -0,0 +1,127 @@
+.feature {
+  position: relative;
+  padding: 1.5rem 1.75rem;
+  color: #000;
+  background-color: white;
+  overflow: hidden;
+  border-radius: 1.78em;
+}
+.feature.large {
+  grid-column: span 2;
+}
+.feature.centered {
+  text-align: center;
+}
+.feature h3 {
+  position: relative;
+  font-size: 34px;
+  font-size: min(34px, max(4vw, 24px));
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02rem;
+  z-index: 2;
+}
+:global(.dark) .feature:not(.light-only) {
+  color: #fff;
+  background-color: #202020;
+}
+.feature {
+  box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%),
+    0 0 0 1px rgb(0 0 0 / 3%);
+  transition: box-shadow 0.3s ease;
+}
+:global(.dark) .feature {
+  box-shadow: 0 0 0 1px rgb(82 82 82 / 60%);
+}
+.feature .link {
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+  z-index: 2;
+  width: 2.5em;
+  height: 2.5em;
+  background-color: rgb(0 0 0 / 39%);
+  backdrop-filter: blur(10px);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 2px rgb(154 154 154 / 56%), 0 0 30px rgb(0 0 0 / 10%);
+  transition: all 0.2s ease;
+  -webkit-user-drag: none;
+}
+@media (hover: hover) {
+  .feature .link {
+    opacity: 0;
+  }
+  .feature:hover .link {
+    opacity: 1;
+  }
+  .feature .link:hover {
+    transform: scale(1.05);
+    color: rgba(255, 255, 255, 1);
+    background-color: rgba(64, 64, 64, 0.39);
+    box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+  }
+  .feature .link:active {
+    transform: scale(1);
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(22, 22, 22, 0.39);
+    box-shadow: 0 0 0 2px rgba(178, 178, 178, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+  }
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 2em;
+  font-feature-settings: initial;
+}
+
+.feature :global(.show-on-mobile) {
+  display: none;
+}
+
+@media screen and (max-width: 1024px) {
+  .feature {
+    max-width: 80vw;
+    width: 100%;
+  }
+  .feature.large {
+    grid-column: span 1;
+  }
+  .features {
+    grid-template-columns: 1fr;
+    grid-gap: 3em;
+    justify-items: center;
+  }
+  .feature h3 {
+    font-size: 28px;
+    font-size: min(28px, max(4vw, 22px));
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .feature {
+    max-width: 460px;
+    width: 100%;
+  }
+  .feature.large {
+    grid-column: span 1;
+  }
+  .features {
+    grid-template-columns: 1fr;
+    grid-gap: 3em;
+    justify-items: center;
+  }
+  .feature h3 {
+    font-size: 34px;
+    font-size: min(34px, max(4vw, 22px));
+    text-align: center;
+  }
+  .feature :global(.show-on-mobile) {
+    display: block;
+  }
+}

components/features/index.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import cn from 'clsx'
+import { motion } from 'framer-motion'
+
+import styles from './index.module.css'
+
+export function Feature({
+  large,
+  centered,
+  children,
+  lightOnly,
+  className,
+  href,
+  index,
+  ...props
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: '-20px' }}
+      transition={{ duration: Math.min(0.25 + index * 0.2, 0.8) }}
+      className={cn(
+        styles.feature,
+        large && styles.large,
+        centered && styles.centered,
+        lightOnly && styles['light-only'],
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {href ? (
+        <Link className={styles.link} href={href} target="_blank">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Link>
+      ) : null}
+    </motion.div>
+  )
+}
+
+export function Features({ children }: { children: ReactNode }) {
+  return <div className={styles.features}>{children}</div>
+}