docs(themes): add documents for deploying themes (#7)

Author: wibus-wee

components/Icons/GitHub.tsx

@@ -0,0 +1,7 @@
+import { SVGProps } from "react";
+
+export function UilGithub(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247Z"></path></svg>
+  )
+}

components/ToGitHub/index.tsx

@@ -0,0 +1,18 @@
+import { UilGithub } from "@components/Icons/GitHub";
+import { Cards, Card } from "nextra/components";
+
+export function ToGitHub({ repo }) {
+  return (
+    <Cards num={1}>
+      <Card
+        arrow
+        href={`https://github.com/${repo}`}
+        title={`${repo} - GitHub`}
+        icon={<UilGithub />}
+        children
+        // @ts-ignore
+        target="_blank"
+      />
+    </Cards>
+  );
+}

components/Video/index.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+export default function Video({ src }) {
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null, 
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    const handleIntersection = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, options);
+    observer.observe(videoRef.current);
+
+    return () => {
+      videoRef.current && observer.unobserve(videoRef.current);
+    };
+  }, [src]);
+
+  return (
+    <video
+      ref={videoRef}
+      muted
+      autoPlay
+      playsInline
+      loop
+      controls
+      className="mt-6 rounded-xl border dark:border-zinc-800"
+    >
+      <source src={src} type="video/mp4" />
+    </video>
+  );
+}

package.json

@@ -21,6 +21,7 @@
     "@vercel/og": "^0.5.8",
     "autoprefixer": "^10.4.14",
     "clsx": "^1.2.1",
+    "copy-to-clipboard": "^3.3.3",
     "framer-motion": "^10.12.18",
     "next": "^13.4.9",
     "nextra": "latest",

pages/_meta.json

@@ -17,7 +17,11 @@
   },
   "themes": {
     "type": "page",
-    "title": "前端主题"
+    "title": "前端主题",
+    "href": "/themes",
+    "theme": {
+      "layout": "raw"
+    }
   },
   "development": {
     "title": "系统开发",

pages/themes/_meta.json

@@ -0,0 +1,23 @@
+{
+  "index": {
+    "title": "主题目录"
+  },
+  "shiro": {
+    "title": "部署 Shiro 主题",
+    "theme": {
+      "layout": "default"
+    }
+  },
+  "kami": {
+    "title": "部署 Kami 主题",
+    "theme": {
+      "layout": "default"
+    }
+  },
+  "yun": {
+    "title": "部署 Yun 主题",
+    "theme": {
+      "layout": "default"
+    }
+  }
+}

pages/themes/index.mdx

@@ -0,0 +1,50 @@
+---
+title: 前端主题
+---
+
+import { Card, Cards } from "nextra/components";
+
+{<h1 className="mt-10 mb-4 text-center text-[2.5rem] font-bold tracking-tight">前端主题</h1>}
+
+{<p className="mb-16 text-center text-lg text-gray-500 dark:text-gray-400">基于 Mix Space 后端 API 开发的前端主题 <br/> 点击查看主题部署指南</p>}
+
+<div className="m-8 mt-0">
+  <Cards>
+  <ThemeCard title="Shiro - @Innei" href="/themes/shiro">
+      <>
+        ![Shiro Preview](./shiro_preview.png)
+      </>
+    </ThemeCard>
+    <ThemeCard title="Kami - @Innei" href="/themes/kami">
+      <>
+        ![Kami Preview](./kami_preview.png)
+      </>
+    </ThemeCard>
+    <ThemeCard title="Yun - @Innei" href="/themes/yun">
+      <>
+        ![Yun Preview](./yun_preview.png)
+      </>
+    </ThemeCard>
+  </Cards>
+</div>
+
+
+export const ThemeCard = Object.assign(
+  // Copy card component and add default props
+  Card.bind(),
+  {
+    displayName: "ThemeCard",
+      defaultProps: {
+       image: true,
+       arrow: true,
+       target: "_self",
+     },
+   }
+);
+
+<style global jsx>{`
+ .nextra-cards img {
+   aspect-ratio: 12/6.3;
+     object-fit: cover;
+   }
+ `}</style>

pages/themes/kami.mdx

@@ -0,0 +1,58 @@
+# Kami 主题
+
+import { ToGitHub } from '@components/ToGitHub';
+
+<ToGitHub repo="mx-space/kami" />
+
+import { Callout, Steps } from "nextra/components";
+
+<Callout type="warning">
+下一个代替项目将会是 Shiro，当它完成之时，我便不再投入任何精力到 Kami 中。迎接未来总需要舍弃一些东西，非常感谢大家三年来使用 Kami，不管你是谁，都需要对你说声谢谢。**—— Innei**
+</Callout>
+
+由于 Kami 主题将不再维护，此文档将不再更新，但是你仍然可以使用它。
+
+<Steps>
+### 克隆项目
+
+```bash
+git clone https://github.com/mx-space/kami.git --depth=1
+cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)
+```
+
+### 安装依赖
+
+```bash
+git lfs fetch --all
+git lfs pull
+pnpm i
+```
+
+### 配置 ENV
+
+1. 复制 .env.example 为 .env
+2. 编辑 .env 文件，它看起来应该是这个样子的
+
+```env
+# API 地址
+NEXT_PUBLIC_API_URL=https://server.test.cn/api/v2
+# GATEWAY 地址
+NEXT_PUBLIC_GATEWAY_URL=https://server.test.cn
+#前端使用的配置项名字
+NEXT_PUBLIC_SNIPPET_NAME=kami
+# 如果使用 CDN, 修改产物前缀；一般留空
+ASSETPREFIX=
+```
+
+### 开始构建
+
+```bash
+pnpm build
+```
+
+### 启动前端
+
+```bash
+pnpm prod:pm2
+```
+</Steps>