vigor-moon 1.0.0

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

@@ -0,0 +1,28 @@
+import { Feature } from "../../../types";
+import styles from "./index.module.scss";
+
+export function FeatureComponent(props: {features: Feature[]}) { 
+  
+  return (
+    <div flex="~ wrap" justify="between" pt="20" className="divider-bottom pb-10">
+      {
+        props.features.map((feature) => {
+          const {
+            title,
+            details,
+            icon = ""
+          } = feature;
+          return (
+            <div key={title} border="rounded-md" pb="1.3%" w="32.4%">
+              <article p="6" className={styles.bg} h-full="true" >
+                <div className={`flex-center text-3xl w-13 h-11 ${styles.iconBg}`} border="rounded-xl solid">{ icon }</div>
+                <h2 className="font-semibold py-4">{ title }</h2>
+                <p className="text-3.5 font-medium opacity-90">{ details }</p>
+              </article>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}

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

@@ -0,0 +1,4 @@
+.footer {
+  font-size: 0.9rem;
+  opacity: 80%;
+}

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

@@ -0,0 +1,13 @@
+import { FooterConfig } from "types";
+import styles from "./index.module.scss";
+
+export function FooterComponent(props: { footer: FooterConfig }) {
+  const { footer } = props;
+  
+  return (
+    <div className={`py-5 ${styles.footer}`}>
+      <p className="flex-center">{footer.message}</p>
+      <span className="flex-center">Copyright © 2023-present {footer.copyright}</span>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+.title {
+  background: var(--vigor-c-title);
+  -webkit-background-clip: text;
+  color: transparent;
+}

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

@@ -0,0 +1,48 @@
+import { Hero } from "types";
+import { Button } from "../Button";
+
+import styles from "./index.module.scss";
+
+// hero组件
+// hero组件是主页的标题介绍和图片展示。
+
+// Hero Image通常指的是一种大尺寸横幅图片展示在网页上，
+// 通常放在靠前并居中的位置。它囊括了网站中最重要的内容。 
+// Hero image通常由图像和文本组成
+export function HeroComponent(props: { hero: Hero }) {
+  const { hero } = props;
+  return (
+    <div flex="~">
+      <div className="w-1/2">
+        <div>
+          <h1 className="text-5xl font-semibold pb-5">
+            <span className={styles.title}> {hero.name} </span>
+          </h1>
+          <p className="text-6xl font-semibold"> { hero.text } </p>
+          <p className="text-2xl pt-3 pb-6 opacity-65"> { hero.tagline } </p>
+        </div>
+        <div flex="~">
+          {hero.actions.map((action) => (
+            <div key={action.link} className="pr-3">
+              <Button
+                type="a"
+                text={action.text}
+                href={action.link}
+                theme={action.theme}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div w="1/2" flex="center" >
+        {
+          hero.image && (
+            <div>
+              <img h="85" src={ hero.image.src } alt={ hero.image.alt } />
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+.link:hover {
+  color: var(--vigor-link-onfocus);
+  transition: color 0.2s;
+}
+
+.link {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.social-link-icon {
+  display: flex;
+  fill: currentColor;
+  transition: color 0.2s;
+  color: var(--vigor-c-light-black);
+  &:hover {
+    color: var(--vigor-c-black);
+  }
+}
+
+.bg-color {
+  background-color: var(--vigor-c-bg-main);
+}

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

@@ -0,0 +1,43 @@
+import { useContextData } from "@runtime";
+import { NavItemsConfig } from "types";
+import styles from "./index.module.scss";
+
+// github链接地址
+export const GITHUB_LINK_HREF = "https://github.com/Flandre3569/vigor.js";
+
+function MenuItem(item: NavItemsConfig) {
+  return (
+    <div className="text-sm font-medium mx-3">
+      <a href={item.link} className={styles.link}> {item.text} </a>
+    </div>
+  )
+}
+
+export function Nav() {
+  const { siteData } = useContextData();
+  const nav = siteData?.themeConfig?.nav || [];
+  return (
+    <header fixed="~" w="full" z="10" className={styles.bgColor}>
+      <div flex="~" justify="between" items="center" className="px-8 h-14 divider-bottom">
+        <div>
+          <a href="/" className="w-full h-full text-1rem flex items-center" hover="opacity-60">vigor.js</a>
+        </div>
+      <div flex="~">
+          <div flex="~">
+            {
+              nav.map(item => (
+                <MenuItem {...item} key={item.text} />
+              ))
+            }
+          </div>
+          <div>{ /*主题切换按钮*/ }</div>
+          <div className={styles.socialLinkIcon}>
+            <a href = { GITHUB_LINK_HREF } >
+              <div className="i-carbon-logo-github w-5 h-5 fill-current"></div>
+            </a> 
+        </div>
+      </div>
+      </div>
+    </header>
+  )
+}

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

@@ -0,0 +1,43 @@
+.prev-page {
+  float: left;
+  border: 1px solid;
+  border-radius: 5px;
+  &:hover {
+    border-color: var(--vigor-c-nextPage-border);
+  }
+  transform: border-color 0.2s;
+  padding: 1vh 19vw 1vh 1vw; 
+}
+
+.next-page {
+  float: right;
+  border: 1px solid;
+  border-radius: 5px;
+  &:hover {
+    border-color: var(--vigor-c-nextPage-border);
+  }
+  transform: border-color 0.2s;
+  padding: 1vh 1vw 1vh 19vw;
+}
+
+.prev-page-title {
+  display: flex;
+  opacity: 70%;
+  font-size: 0.8rem;
+}
+
+.next-page-title {
+  display: flex;
+  opacity: 70%;
+  font-size: 0.8rem;
+}
+
+.prev-page-content {
+  font-size: 0.9rem;
+  color: var(--vigor-c-nextPage-content);
+}
+
+.next-page-content {
+  color: var(--vigor-c-nextPage-content);
+  font-size: 0.9rem;
+}

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

@@ -0,0 +1,64 @@
+import { useContextData } from "@runtime";
+import { useLocation } from "react-router-dom";
+
+import styles from "./index.module.scss";
+
+export function getNextPageData() {
+  // 拿到当前页面的路由
+  const { pathname } = useLocation();
+  const { siteData } = useContextData();
+
+  const sidebar = siteData.themeConfig?.sidebar || {};
+  const itemArray = [];
+
+  // 把sidebar中的数据拍平并放到一个数组中
+  Object.keys(sidebar).forEach((key) => {
+    const itemGroup = sidebar[key] || [];
+    itemGroup.forEach(group => {
+      group.items.forEach(item => {
+        itemArray.push(item);
+      })
+    })
+  })  
+
+  // 从sidebar数据的数组中拿到当前页面的索引号
+  const pageIndex = itemArray.findIndex((item) => item.link === pathname);
+  // 上一页就是索引号的上一个
+  const prevPage = itemArray[pageIndex - 1] || null;
+  // 下一页就是索引号的下一个
+  const nextPage = itemArray[pageIndex + 1] || null;
+  return {
+    prevPage,
+    nextPage
+  }
+}
+
+
+export function NextPage() {
+  const { prevPage, nextPage } = getNextPageData();
+
+  return (
+    <footer>
+      <div flex="~" justify="between" className="py-5">
+        <div>
+          {
+            prevPage && 
+            <a href={prevPage.link} className={styles.prevPage} >
+                <span mr="5" className={styles.prevPageTitle}>上一页</span>
+                <span className={ styles.prevPageContent }>{ prevPage.text }</span>
+            </a>
+          }
+        </div>
+        <div>
+          {
+            nextPage && 
+            <a href={nextPage.link} className={styles.nextPage} >
+                <span mr="5" className={styles.nextPageTitle}>下一页</span>
+                <span className={ styles.nextPageContent }>{ nextPage.text } </span>
+            </a>
+          }
+        </div>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,22 @@
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 80px 32px 96px;
+  width: var(--vigor-sidebar-width);
+  max-width: 320px;
+  background-color: var(--vigor-c-bg-soft);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: transform 0.25s ease;
+}
+
+.item-onfocus {
+  color: var(--vigor-link-onfocus);
+}
+
+.item {
+  opacity: 70%;
+  color: var(--vigor-c-text-main);
+}

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

@@ -0,0 +1,52 @@
+import { SidebarItem } from "types";
+import { SidebarGroup } from "types";
+import { Link } from '../Link/index';
+import styles from "./index.module.scss";
+interface SidebarType {
+  sidebarData: SidebarGroup[];
+  pathname: string;
+}
+
+export function Sidebar(props: SidebarType) {
+  const { sidebarData, pathname } = props;
+  
+  // 渲染每个sidebar的item
+  const renderItem = (item: SidebarItem) => {
+    // 判断当前的路由是不是正在访问的页面路由
+    const onFocus = item.link === pathname;
+    return (
+      <div pl="2" pt="2">
+        <div className={`${onFocus ? styles.itemOnfocus : styles.item}`}>
+          <Link href={item.link}>{ item.text }</Link>
+        </div>
+      </div>
+    )
+  }
+
+  // 渲染一个sidebar组
+  const renderItems = (item: SidebarGroup) => {
+    return (
+      <section key={item.text} className="divider-bottom pb-3">
+        <div>
+          <h2 className="font-semibold">{ item.text }</h2>
+        </div>
+        <div>
+          {
+            item.items?.map((item) => (
+              <div key={item.link}>
+                {renderItem(item)}
+              </div>
+            ))
+          }
+        </div>
+      </section>
+    )
+  }
+
+  // 渲染整个sidebar
+  return (
+    <aside className={styles.sidebar}>
+      <nav>{sidebarData.map(renderItems)}</nav>
+    </aside>
+  )
+}

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

@@ -0,0 +1,9 @@
+import styles from "./index.module.scss";
+
+export function Switch(props) {
+  return (
+    <button className="">
+      
+    </button>
+  )
+}

package/src/theme-default/component/toc/activeScroll.ts

@@ -0,0 +1,37 @@
+const NAV_HEIGHT = 60;
+
+export function activeScroll() {
+  const container = document.querySelector("#toc-container");
+  const marker = document.querySelector("#toc-marker");
+
+  if (!container) {
+    return;
+  }
+
+  const setHeaderLink = () => {};
+  window.addEventListener("scroll", setHeaderLink);
+
+  // 最后的时候解除事件绑定，防止内存泄露
+  return () => {
+    window.removeEventListener("scroll", setHeaderLink);
+  };
+}
+
+export function scrollToTarget(target: HTMLElement, isSmooth: boolean) {
+  // getComputedStyle是拿到指定元素的计算属性，也就是拿到css样式里的数据，然后.paddingTop就获取到元素的上padding值。
+  const targetPadding = parseInt(window.getComputedStyle(target).paddingTop, 10);
+  // scrollY是返回文档在垂直方向已滚动的像素值。
+  // getBoundingClientRect().top是返回元素距离可视窗口上方的距离。
+  // NAV_HEIGHT本意是定义一个变量让其和nav的height值相同，nav是3.5rem，无法直接进行相减，因此我稍作了修改，改为了60像素。
+  // scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。
+
+  // 其实scrollY+getBoundingClientRect().top+targetpadding计算的就是一开始target元素距离顶端的height值。
+  // 而需要移动的距离就是用这个值减去nav的height值。
+  const targetTop =
+    window.scrollY + target.getBoundingClientRect().top + targetPadding - NAV_HEIGHT;
+  window.scrollTo({
+    left: 0,
+    top: targetTop,
+    behavior: isSmooth ? "smooth" : "auto",
+  });
+}

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

@@ -0,0 +1,7 @@
+.toc-link {
+  color: var(--vigor-c-text-main);
+  &:hover {
+    color: var(--vigor-toc-hover);
+    font-weight: 650;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { useContextData } from "@runtime"
+import { useRef } from "react";
+import { TocTree } from "types";
+import styles from "./index.module.scss";
+
+import { scrollToTarget } from "./activeScroll";
+
+export interface TocType {
+  headers: TocTree[]
+}
+
+export function TocComponent(props: TocType) {
+  const { headers = [] } = props;
+  // 大纲的长度
+  const tocLength = headers.length > 0;
+
+  const markRef = useRef<HTMLDivElement>(null);
+
+  const renderToc = (tocTree: TocTree) => {
+    return (
+      <li key={tocTree.id}>
+        <a
+          href={`#${tocTree.id}`}
+          className={`block leading-7 ${styles.tocLink} opacity-70`}
+          transition="color duration-300"
+          style={{
+            paddingLeft: (tocTree.depth - 2) * 12
+          }}
+          onClick={(e) => {
+            e.preventDefault();
+            const target = document.getElementById(tocTree.id);
+            target && scrollToTarget(target, false);
+          }}
+        >
+          {tocTree.text}
+        </a>
+      </li>
+    )
+  }
+  return (
+    <div>
+      <div>
+        {
+          tocLength && (
+            <div id="toc-container" className="relative divider-left pl-4 text-13px font-medium">
+              <div
+                ref={markRef}
+                id="toc-maker" >
+              </div>
+              <div leading-7="~" text="13px" font="semibold">On this Page</div>
+              <nav>
+                <ul relative="~">{ headers.map(renderToc) }</ul>
+              </nav>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}

package/src/theme-default/styles/base.css

@@ -0,0 +1,92 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+/* 样式 */
+body {
+  margin: 0;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: 24px;
+  font-family: var(--vigor-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--vigor-c-text-main);
+  background-color: var(--vigor-c-bg-main);
+  direction: ltr;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  transition: 0.2s;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+p {
+  margin: 0;
+}
+
+strong,
+b {
+  font-weight: 600;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  border: 0;
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+button {
+  padding: 0;
+  font-family: inherit;
+  background-color: transparent;
+  background-image: none;
+}
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/* 把列表前面的小符号消除 */
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/src/theme-default/styles/vars.css

@@ -0,0 +1,111 @@
+
+:root {
+  /* 基础颜色 */
+  --vigor-c-white: #ffffff;
+  --vigor-c-lynx-white: #f5f6fa;
+  --vigor-c-soft-white: #fffffe;
+  --vigor-c-soft-pink: #f3d2c1;
+  --vigor-c-swan-white: #f7f1e3;
+
+  --vigor-c-flower-red: #e84118;
+  --vigor-c-flower-deep-red: #c23616;
+
+  --vigor-c-light-blue: #00a8ff;
+  --vigor-c-blue: #0097e6;
+
+  --vigor-c-light-purple: #9c88ff;
+  --vigor-c-purple: #8c7ae6;
+
+  --vigor-c-light-yellow: #fbc531;
+  --vigor-c-deep-yellow: #e1b12c;
+
+  --vigor-c-azure: #5FFBF1;
+  --vigor-c-deep-azure: #19CFC4;
+  --vigor-c-azure-light: #35CFC6;
+  --vigor-c-light-green: #4cd137;
+  --vigor-c-deep-green: #44bd32;
+  --vigor-c-deep-mo-green: #008080;
+
+  --vigor-c-grey-blue: #487eb0;
+  --vigor-c-grey-deep-blue: #40739e;
+
+  --vigor-c-light-grey: #dcdde1;
+  --vigor-c-grey: #7f8fa6;
+  --vigor-c-deep-grey: #718093;
+
+  --vigor-c-mazaline-blue: #273c75;
+  --vigor-c-pico-void-blue: #192a56;
+  --vigor-c-headling-blue: #001858;
+
+  --vigor-c-light-black: #353b48;
+  --vigor-c-grey-black: #2f3640;
+  --vigor-c-moon-black: #1e272e;
+  --vigor-c-black: #0a0a0a;
+
+  --vigor-c-divider-light-1: rgba(60, 60, 60, 0.12);
+
+  --vigor-c-progress-pink-blue: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
+  --vigor-c-progress-black-white: linear-gradient(to right top, #070707, #100e19, #131326, #141833, #131c42, #1b2f57, #23436c, #2c5881, #55819d, #87aab9, #bed3d7, #f9fcfc);
+}
+:root {
+  --vigor-font-family: Arial, sans-serif;
+}
+
+/* 主题配色 */
+:root {
+  /* 下划线 */
+  --vigor-c-divider-light: var(--vigor-c-divider-light-1);
+
+  /* 背景颜色 */
+  --vigor-c-bg-main: var(--vigor-c-soft-white);
+  --vigor-c-bg-soft: var(--vigor-c-lynx-white);
+  /* 主页icon背景颜色 */
+  --vigor-c-icon-bg: var(--vigor-c-swan-white);
+
+   /* 按钮brand主题配色 */
+   --vigor-bg-brand: var(--vigor-c-purple);
+   --vigor-bg-alt: var(--vigor-c-deep-grey);
+   --vigor-bg-brand-light: var(--vigor-c-azure-light);
+   --vigor-text-brand: var(--vigor-c-azure);
+   /* 按钮alt主题配色 */
+   --vigor-c-alt: var(--vigor-c-deep-grey);
+ 
+   /* 标题配色 */
+   --vigor-c-title: var(--vigor-c-progress-pink-blue);
+
+}
+
+/* 主题长度 */
+:root {
+  /* 侧边栏宽度 */
+  --vigor-sidebar-width: 13vw;
+}
+
+/* 文本配色 */
+:root {
+  --vigor-c-text-main: var(--vigor-c-moon-black);
+  /* nav hover配色 */
+  --vigor-link-onfocus: var(--vigor-c-deep-green);
+
+  /* toc文件hover配色 */
+  --vigor-toc-hover: var(--vigor-c-black);
+
+  /* 404 - h1 */
+  --vigor-c-404-h1: var(--vigor-c-grey-blue);
+}
+
+/* markdown doc配色 */
+:root {
+  --main-color: #008080; /* 主色调 */
+  --light-color: #f2f2f2; /* 浅色背景 */
+  --dark-color: #262626; /* 深色背景 */
+  --text-color: #333; /* 正文文本颜色 */
+  --link-color: #008080; /* 链接文本颜色 */
+
+  --vigor-c-lang: var(--vigor-c-soft-pink);
+
+  --vigor-c-h1-text: var(--vigor-c-headling-blue);
+
+  --vigor-c-nextPage-content: var(--vigor-c-deep-mo-green);
+  --vigor-c-nextPage-border: var(--vigor-c-deep-mo-green);
+}

package/src/types/attributify-shims.d.ts

@@ -0,0 +1,5 @@
+import type { AttributifyAttributes } from "unocss/preset-attributify";
+
+declare module "react" {
+  interface HTMLAttributes<T> extends AttributifyAttributes {}
+}