vigor-moon 1.0.0

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "vigor-moon",
+  "version": "1.0.0",
+  "description": "SSG framework",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "vigor": "bin/vigor.js"
+  },
+  "keywords": [
+    "SSG",
+    "docs"
+  ],
+  "author": "sungMoon",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "bin",
+    "README.md",
+    "src/runtime",
+    "src/theme-default",
+    "src/types",
+    "src/core"
+  ],
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.16",
+    "@playwright/test": "1.26.1",
+    "@types/compression": "^1.7.2",
+    "@types/fs-extra": "^11.0.1",
+    "@types/hast": "^2.3.4",
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.13.0",
+    "@types/polka": "^0.5.4",
+    "@types/react-dom": "^18.0.11",
+    "chalk": "^5.2.0",
+    "conventional-changelog-cli": "^2.2.2",
+    "enquirer": "^2.3.6",
+    "execa": "5.1.1",
+    "minimist": "^1.2.8",
+    "rehype-stringify": "^9.0.3",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
+    "rollup": "^3.14.0",
+    "semver": "^7.5.0",
+    "tsup": "^6.6.2",
+    "tsx": "^3.12.3",
+    "typescript": "^4.9.5",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.2",
+    "vitest": "^0.28.4"
+  },
+  "dependencies": {
+    "@loadable/component": "^5.15.3",
+    "@mdx-js/rollup": "2.1.3",
+    "@types/react": "^18.0.27",
+    "@vitejs/plugin-react": "^3.1.0",
+    "acorn": "^8.8.2",
+    "cac": "^6.7.14",
+    "compression": "^1.7.4",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.0",
+    "github-slugger": "^2.0.0",
+    "hast-util-from-html": "^1.0.1",
+    "koa": "^2.14.1",
+    "mdast-util-mdxjs-esm": "^1.3.1",
+    "polka": "^0.5.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "1.3.0",
+    "react-router-dom": "6.4.3",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.1.0",
+    "remark-frontmatter": "^4.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-mdx": "^2.3.0",
+    "remark-mdx-frontmatter": "^2.1.1",
+    "remark-stringify": "^10.0.2",
+    "sass": "^1.60.0",
+    "serve": "^14.2.0",
+    "shiki": "^0.14.1",
+    "sirv": "^2.0.2",
+    "unocss": "^0.50.4",
+    "vite": "^4.1.1"
+  },
+  "scripts": {
+    "start": "tsup --watch",
+    "build": "tsup",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "prepare:e2e": "tsx scripts/e2e.ts",
+    "release": "tsx scripts/release.ts",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+  },
+  "readme": "# a static site automation framework\r\n\r\n# 毕业设计\r\n## 静态网站自动化构建框架\r\n将我的毕业设计取名为vigor.<br />\r\n特意选v字开头的单词，代表着使用vue、vite和nodejs开发。 <br />\r\n寓意青春活力，作为不知不觉已经过去20年青春的段落结尾，接下来要开启新的生活也是新的人生阶段，希望自己将来在对线生活的路上满腔热忱。\r\n\r\n![136498](https://user-images.githubusercontent.com/78594707/218473131-b31dbf53-a17b-410e-8280-d6f9cc7ccf65.jpg)\r\n"
+}

package/src/runtime/App.tsx

@@ -0,0 +1,38 @@
+import { matchRoutes } from "react-router-dom";
+import { routes } from "vigor:routes";
+import siteData from "vigor:site-data";
+import { Layout } from "../theme-default/Layout";
+import { Route } from '../node/plugin/plugin-routes/index';
+import { PageData } from "types";
+
+export async function initPageData(routePath: string): Promise<PageData> {
+  const matched = matchRoutes(routes, routePath);
+
+  if (matched) {
+    const route = matched[0].route as Route;
+    // 获取路由组件编译后的模块内容
+    const moduleInfo = await route.preload();
+    return {
+      title: moduleInfo.title,
+      pageType: moduleInfo?.frontmatter?.pageType ?? "doc",
+      siteData: siteData,
+      frontmatter: moduleInfo.frontmatter,
+      pagePath: routePath,
+      // 这边有一个类型错误，应该是上面的moduleInfo那边产生了类型不匹配的问题
+      toc: moduleInfo.toc as any
+    }
+  } else {
+    return {
+      title: "404",
+      pageType: "404",
+      siteData,
+      pagePath: routePath,
+      frontmatter: {}
+    }
+  }
+  
+}
+
+export function App() {
+  return <Layout />
+}

package/src/runtime/Content.tsx

@@ -0,0 +1,27 @@
+// import A from "../../docs/guide/a";
+// import B from "../../docs/b";
+// import Index from "../../docs/guide/index";
+import { routes } from "vigor:routes";
+import { useRoutes } from 'react-router-dom';
+
+// 以下代码是展示路由结构，已经通过插件自动化生成了，所以不再需要手动添加。
+// 自动化添加路由的插件会根据目录结构创建路由，再转化为相应代码。
+// const routes = [
+//   {
+//     path: "/guide",
+//     element: <Index />
+//   },
+//   {
+//     path: "/guide/a",
+//     element: <A />
+//   },
+//   {
+//     path: "/b",
+//     element: <B />
+//   }
+// ]
+
+export const Content = () => {
+  const rootElement = useRoutes(routes);
+  return rootElement;
+}

package/src/runtime/client-entry.tsx

@@ -0,0 +1,30 @@
+import { createRoot } from "react-dom/client"
+import { App } from "./App";
+import siteData from "vigor:site-data";
+import { BrowserRouter } from "react-router-dom"
+import { initPageData } from "./App";
+import { contextData } from "./hooks";
+import { HelmetProvider} from "react-helmet-async";
+
+async function runderInBrowser() {
+  const containerEl = document.getElementById("root");
+  
+  if (!containerEl) {
+    throw new Error("#root element not found");
+  }
+  // 初始化页面数据
+  const pageData = await initPageData(location.pathname);
+  createRoot(containerEl).render(
+    // 自定义head
+    <HelmetProvider>
+      <contextData.Provider value={ pageData }>
+        <BrowserRouter>
+        <App />
+      </BrowserRouter>
+      </contextData.Provider>
+    </HelmetProvider>
+    
+  );
+}
+
+runderInBrowser();

package/src/runtime/hooks.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+import { PageData } from "types";
+
+export const contextData = createContext({} as PageData);
+
+export const useContextData = () => {
+  return useContext(contextData);
+};

package/src/runtime/index.ts

@@ -0,0 +1,2 @@
+export { Content } from "./Content";
+export { useContextData } from "./hooks";

package/src/runtime/ssr-entry.tsx

@@ -0,0 +1,24 @@
+import { App } from "./App";
+import { renderToString } from "react-dom/server"
+import { StaticRouter } from "react-router-dom/server"
+import { initPageData } from "./App";
+import { contextData } from "./hooks";
+import { HelmetProvider } from 'react-helmet-async';
+
+
+// SSR渲染器
+export async function render(pagePath: string, helmetContext: object) {
+  const pageData = await initPageData(pagePath);
+  return renderToString(
+    <HelmetProvider context={helmetContext}>
+      <contextData.Provider value={pageData}>
+        <StaticRouter location={pagePath}>
+          <App />
+        </StaticRouter>
+      </contextData.Provider>
+    </HelmetProvider>
+  );
+}
+
+// 从路由插件中导出路由信息，方便ssr生产环境多路由打包
+export { routes } from "vigor:routes";

package/src/theme-default/Layout/doc/doc.tsx

@@ -0,0 +1,46 @@
+import { useContextData } from "@runtime";
+import { useLocation } from "react-router-dom";
+import { Sidebar } from "../../component/sidebar";
+import { Content } from "@runtime";
+import { NextPage } from "../../component/nextPage";
+import { TocComponent } from "../../component/toc";
+import styles from "./index.module.scss";
+import "./index.module.scss"
+
+export function DocPage() {
+  const { siteData, toc } = useContextData();
+  const sidebarData = siteData.themeConfig?.sidebar || {};
+  // 拿到当前具体处于哪个侧边栏的item中
+  // 目的是获取到具体路径,然后对当前路径的导航栏保持高亮
+  const { pathname } = useLocation();
+
+
+  const matchedSidebarKey = Object.keys(sidebarData).find((key) => {
+    if (pathname.startsWith(key)) {
+      return true;
+    }
+  });
+
+  const matchedSidebar = sidebarData[matchedSidebarKey] || [];
+
+  return (
+    <div flex="~" >
+      <div w="1/4">
+        <Sidebar sidebarData={matchedSidebar} pathname={pathname} />
+      </div>
+      <div pt="22" w="3/4" className={styles.vigorDoc} flex="~">
+        <div w="2/3" className="vigor-doc">
+          <div className="divider-bottom">
+            <Content />
+          </div>
+          <div>
+            <NextPage />
+          </div>
+        </div>
+        <div className={styles.tocContainer} w="1/4" h="100vw" pl="20" >
+          <TocComponent headers={toc}></TocComponent>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/theme-default/Layout/doc/index.module.scss

@@ -0,0 +1,154 @@
+.vigor-doc h1,
+.vigor-doc h2,
+.vigor-doc h3,
+.vigor-doc h4,
+.vigor-doc h5,
+.vigor-doc h6 {
+  position: relative;
+  font-weight: 600;
+  outline: none;
+}
+
+.vigor-doc h1 {
+  letter-spacing: -0.02em;
+  line-height: 40px;
+  font-size: 30px;
+  margin-bottom: 40px;
+  color: var(--vigor-c-h1-text);
+}
+
+.vigor-doc h2 {
+  margin: 48px 0 16px;
+  /* padding-top: 24px; */
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 24px;
+}
+
+.vigor-doc h3 {
+  margin: 32px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+
+.toc-container {
+  position: sticky;
+  top: 10vh;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.vigor-doc .header-anchor {
+  float: left;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  font-weight: 500;
+  opacity: 1;
+  transition: color 0.25s, opacity 0.25s;
+}
+
+.vigor-doc h1 a,
+.vigor-doc h2 a,
+.vigor-doc h3 a,
+.vigor-doc h4 a,
+.vigor-doc h5 a,
+.vigor-doc h6 a
+{
+  text-indent: -9999em;  
+  overflow: hidden;
+  float: left;
+}
+
+// /* 设置段落样式 */
+.vigor-doc p {
+  margin: 0 0 16px;
+  padding: 0;
+}
+
+
+/* 设置代码块样式 */
+.vigor-doc pre {
+  margin: 0 0 16px;
+  padding: 16px;
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+  overflow: auto;
+}
+
+.vigor-doc p code {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 0.9em;
+  color: var(--main-color);
+  background-color: var(--light-color);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+}
+
+.vigor-doc pre code {
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  font-size: 14px;
+}
+
+
+/* 设置块引用样式 */
+.vigor-doc blockquote {
+  margin: 0 0 16px;
+  padding: 16px;
+  background-color: #f8f8f8;
+  border-left: 4px solid #007bff;
+  color: #666;
+  font-style: italic;
+}
+
+/* 设置强调样式 */
+.vigor-doc em, strong {
+  font-style: italic;
+}
+
+.vigor-doc strong {
+  font-weight: 600;
+}
+
+/* 设置表格样式 */
+.vigor-doc table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.vigor-doc th, td {
+  border: 1px solid #ccc;
+  padding: 8px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.vigor-doc th {
+  font-weight: 600;
+  background-color: #f8f8f8;
+}
+
+
+/* 代码块 */
+// pre {
+//   background-color: var(--light-color);
+//   border: 1px solid var(--main-color);
+//   padding: 1em;
+//   margin: 1em 0;
+//   overflow: auto;
+// }
+
+
+// .vigor-doc p code:hover {
+//   background-color: var(--main-color);
+//   color: var(--light-color);
+//   cursor: pointer
+// }
+
+

package/src/theme-default/Layout/home/home.tsx

@@ -0,0 +1,16 @@
+import { useContextData } from "@runtime"
+import { HeroComponent } from "../../component/hero";
+import { FeatureComponent } from "../../component/feature";
+import { FooterComponent } from "../../component/footer";
+
+export function HomePage() {
+  const { frontmatter } = useContextData();
+  
+  return (
+    <div className = "px-24 pt-30">
+      <HeroComponent hero={frontmatter.hero} />
+      <FeatureComponent features={frontmatter.features} />
+      <FooterComponent footer={ frontmatter.footer } />
+    </div>
+  )
+}

package/src/theme-default/Layout/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react"
+import { useContextData } from "@runtime";
+
+// 引入样式基础配置
+import "../styles/base.css";
+import "../styles/vars.css";
+import "uno.css"
+
+// 页面
+import { Nav } from "../component/nav";
+import { HomePage } from "./home/home";
+import { DocPage } from "./doc/doc";
+import { NotFoundPage } from "./notFound/index";
+import { Helmet } from "react-helmet-async";
+
+export function Layout() {
+  const pageData = useContextData();
+  const { pageType, title } = pageData;
+  const Content = () => {
+    if (pageType === "home") {
+      return <HomePage />
+    } else if (pageType === "doc") {
+      return <DocPage />
+    } else {
+      return <NotFoundPage />
+    }
+  }
+
+  return <div>
+    <Helmet>
+      <title>{ title }</title>
+    </Helmet>
+    <Nav />
+    <section>
+      { Content() }
+    </section>
+  </div>
+}

package/src/theme-default/Layout/notFound/index.module.scss

@@ -0,0 +1,7 @@
+.h1{
+  font-size: 100px;
+  font-weight: bold;
+  padding-top: 30vh;
+  padding-left: 15vw;
+  color: var(--vigor-c-404-h1);
+}

package/src/theme-default/Layout/notFound/index.tsx

@@ -0,0 +1,30 @@
+import styles from "./index.module.scss";
+
+const imgOssPath = "http://mingxuan3569.oss-cn-beijing.aliyuncs.com/image/404.png";
+
+export function NotFoundPage() {
+  return (
+    <div flex="~" h="full">
+      <div w="1/2" h="full">
+        <h1 className={styles.h1}>404</h1>
+        <a
+          inline-block=""
+          border="1px solid brand"
+          rounded="2xl"
+          p="y-2 x-4"
+          text="sm brand"
+          font-medium=""
+          href={'/'}
+          aria-label="go to home"
+          relative="~"
+          className="left-58 top-20"
+        >
+          Take me home
+        </a>
+      </div>
+      <div relative="~" className="top-10" >
+        <img className="w-250 left-0" src={imgOssPath} alt="404" />
+      </div>
+    </div>
+  )
+}

package/src/theme-default/component/Button/index.module.scss

@@ -0,0 +1,36 @@
+.button {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.button:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.button.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.button.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.button.brand {
+  background-color: var(--vigor-bg-brand);
+}
+
+.button.alt {
+  background-color: var(--vigor-bg-alt);
+  opacity: 70%
+}
+

package/src/theme-default/component/Button/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Link } from "../Link";
+import styles from "./index.module.scss";
+
+interface ButtonTypes {
+  type?: string;
+  size?: "small" | "medium" | "big";
+  text: string;
+  theme: "brand" | "alt";
+  href: string;
+  external?: boolean;
+  className?: string;
+}
+
+// 按钮组件
+// 按钮组件主要有设定大小、主题和内外链接的自定义
+export function Button(props: ButtonTypes) {
+  const {
+    theme = "brand",
+    href = "/",
+    size = "big",
+    external = false,
+    className = ""
+  } = props;
+
+  // 如果是外部链接
+  let type: string | typeof Link | null = null;
+  if (props.type === "button") {
+    type = "button"
+  } else if (props.type === "a") {
+    type = external ? "a" : Link;
+  }
+ 
+  return React.createElement(
+    type ?? "a",
+    {
+      href,
+      className: `${styles.button} ${styles[size]} ${styles[theme]} ${className}`
+    },
+    props.text
+  )
+}

package/src/theme-default/component/Link/index.module.scss

@@ -0,0 +1,10 @@
+.link:hover {
+  color: var(--vigor-link-onfocus);
+  transition: color 0.2s;
+}
+
+.link {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+}

package/src/theme-default/component/Link/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from "./index.module.scss"
+interface LinkType {
+  href?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+// Link组件
+// Link组件是用来区分外部链接和内部链接的，
+// 如果是外部链接，那么会直接转到响应的超链接位置。
+// 如果是内部链接,则转到响应路由位置
+
+// 用正则来判断是否是以http或https作为开头的，如果是这两者作为开头，则是外部链接
+const EXTERNAL_URL = /^https?/
+
+export function Link(props: LinkType) {
+  const { href = "/", children, className = "" } = props;
+  const isExternal = EXTERNAL_URL.test(href);
+
+  // target和rel是a标签的两个属性
+  // target的值为_blank时，会另外打开一个网页展示超链接
+  // 在使用target时如果没有设置rel为noopener noreferrer会有安全风险，用来防止钓鱼网站
+  const target = isExternal ? '_blank' : '';
+  const rel = isExternal ? "noopener noreferrer" : undefined;
+
+  return <a href={href} rel={rel} target={target} className={`${className} ${styles.link}`}>{ children } </a>
+}

package/src/theme-default/component/feature/index.module.scss

@@ -0,0 +1,10 @@
+.bg {
+  background-color: var(--vigor-c-bg-soft);
+  border: solid var(--vigor-c-bg-soft);
+  border-radius: 10px;
+}
+
+.icon-bg {
+  background-color: var(--vigor-c-icon-bg);
+  border: solid var(--vigor-c-icon-bg);
+}