minearm-website 0.0.3-beta.2

package/src/components/animation/bubbles.astro

@@ -0,0 +1,82 @@
+---
+interface Props {
+  bubbles: number;
+}
+
+const { bubbles } = Astro.props;
+---
+
+<div class="area">
+  <ul class="circles">
+    {
+      () => {
+        let li = "";
+        for (let i = 0; i < bubbles; i++) {
+          li += "<li></li>";
+        }
+        return <Fragment set:html={li} />;
+      }
+    }
+  </ul>
+</div>
+
+<style lang="scss">
+  .area {
+    pointer-events: none;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 200;
+  }
+
+  .circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .circles :global(li) {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.5);
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+  }
+
+  @for $i from 1 through 50 {
+    .circles :global(li:nth-child(#{$i})) {
+      left: random(110) - 5vw;
+      $size: random(150) + 10px;
+      width: $size;
+      height: $size;
+      animation-delay: random(20) + s;
+      animation-duration: random(10) + 5s;
+    }
+  }
+
+  :global([data-theme="light"]) .circles :global(li) {
+    background-color: rgba(146, 172, 233, 0.1);
+  }
+
+  @keyframes animate {
+    0% {
+      transform: translateY(0) rotate(0deg);
+      opacity: 1;
+      border-radius: 10%;
+    }
+
+    100% {
+      transform: translateY(-120vh) rotate(720deg);
+      opacity: 0;
+      border-radius: 50%;
+    }
+  }
+</style>

package/src/components/animation/wave.astro

@@ -0,0 +1,81 @@
+---
+---
+
+<section class="hero-waves-area waves-area">
+  <svg
+    class="waves-svg"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 24 150 28"
+    preserveAspectRatio="none"
+    shape-rendering="auto"
+    ><defs
+      ><path
+        id="gentle-wave"
+        d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"
+      ></path></defs
+    ><g class="parallax"
+      ><use href="#gentle-wave" x="48" y="0"></use><use
+        href="#gentle-wave"
+        x="48"
+        y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use
+        href="#gentle-wave"
+        x="48"
+        y="7"></use></g
+    ></svg
+  >
+</section>
+
+<style>
+  .waves-area {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: -11px;
+    z-index: 5;
+  }
+
+  .waves-svg {
+    width: 100%;
+    height: 5rem;
+  }
+
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+    fill: var(--body-background-color);
+    opacity: 0.7;
+  }
+
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+    fill: var(--body-background-color);
+    opacity: 0.5;
+  }
+
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+    fill: var(--body-background-color);
+    opacity: 0.2;
+  }
+
+  .parallax > use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+    fill: var(--body-background-color);
+  }
+
+  .parallax > use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  }
+
+  @keyframes move-forever {
+    0% {
+      transform: translate3d(-90px, 0, 0);
+    }
+    100% {
+      transform: translate3d(85px, 0, 0);
+    }
+  }
+</style>

package/src/components/aside/announcement.astro

@@ -0,0 +1,25 @@
+---
+import { ThemeConfig } from "@src/theme_config";
+import { utils } from "@src/utils/utils";
+import GetIcon from "@comp/icons/getIcon.astro";
+const announcement: Announcement = ThemeConfig.aside.announcement;
+---
+
+<div class="announcement-card aside-card">
+  <div class="announcement-headline aside-card-headline">
+    <GetIcon
+      Icon="local:solid.bullhorn"
+      class="announcement-icon aside-card-icon"
+    />
+    <div class="announcement-title aside-card-title">
+      {announcement.headline}
+    </div>
+  </div>
+  <div
+    class="announcement-content aside-card-content"
+    set:html={utils.replaceLink(
+      utils.executeEmbeddedScripts(announcement.content),
+      "aside-card-link"
+    )}
+  />
+</div>

package/src/components/aside/aside.astro

@@ -0,0 +1,32 @@
+---
+import "@style/components/aside.scss";
+import AsideComps from "./asideComps.astro";
+import CustomCard from "./customCard.astro";
+import { ThemeConfig } from "@src/theme_config";
+interface Props {
+  class?: string;
+  comps?: AsideComponents[];
+  stickyComps?: AsideComponents[];
+  direct?: "left" | "right" | false;
+}
+
+const { class: className, comps, stickyComps, direct } = Astro.props;
+---
+
+{
+  direct !== false && (
+    <aside
+      class:list={["aside-content", className]}
+      style={`order: ${direct === "right" ? "2" : ""};`}
+    >
+      <AsideComps comps={comps} />
+      {ThemeConfig.aside.customCards.map((card) => (
+        <CustomCard card={card} />
+      ))}
+      <div class="sticky-container">
+        <AsideComps comps={stickyComps} />
+        <slot />
+      </div>
+    </aside>
+  )
+}

package/src/components/aside/asideComps.astro

@@ -0,0 +1,26 @@
+---
+import Announcement from "./announcement.astro";
+import AuthorInfo from "./authorInfo.astro";
+import BlogToc from "./blogToc.astro";
+import SiteInfo from "./siteInfo.astro";
+
+interface Props {
+  comps?: AsideComponents[];
+}
+
+const { comps } = Astro.props;
+
+const compMap = new Map<AsideComponents, any>([
+  ["Announcement", Announcement],
+  ["AuthorInfo", AuthorInfo],
+  ["BlogToc", BlogToc],
+  ["SiteInfo", SiteInfo],
+]);
+---
+
+{
+  comps?.map((comp) => {
+    const Item: any = compMap.get(comp as AsideComponents);
+    return <Item />;
+  })
+}

package/src/components/aside/authorInfo.astro

@@ -0,0 +1,54 @@
+---
+import { ThemeConfig as TC } from "@src/theme_config";
+import GetIcon from "@comp/icons/getIcon.astro";
+import { utils } from "@src/utils/utils";
+const authorInfo: AuthorInfo = TC.aside.authorInfo;
+---
+
+<div class="author-info-card aside-card">
+  <div class="author-info">
+    <img class="author-avatar" src={authorInfo.avatar} alt="author-avatar" />
+    <div class="author-name">{TC.site.author}</div>
+    <div
+      class="author-desc"
+      set:html={utils.replaceLink(
+        utils.executeEmbeddedScripts(authorInfo.description),
+        "aside-card-link"
+      )}
+    />
+  </div>
+  <div class="blog-counts">
+    <div class="blog-count">
+      <div class="count">87</div>
+      <div class="tag">文章</div>
+    </div>
+    <a class="blog-count" href="/categories">
+      <div class="count">9</div>
+      <div class="tag">分类</div>
+    </a>
+    <a class="blog-count" href="/tags">
+      <div class="count">10</div>
+      <div class="tag">标签</div>
+    </a>
+  </div>
+  <div class="social-medias">
+    {
+      authorInfo.socialMedias.map((media) => (
+        <div
+          title={media.customClass}
+          class:list={["social-media", media.customClass]}
+        >
+          {media.link ? (
+            <a href={media.link} class="social-link" title={media.title || ""}>
+              <GetIcon class="social-icon" Icon={media.icon} />
+            </a>
+          ) : (
+            <div class="social-link" title={media.title || ""}>
+              <GetIcon class="social-icon" Icon={media.icon} />
+            </div>
+          )}
+        </div>
+      ))
+    }
+  </div>
+</div>

package/src/components/aside/blogToc.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  toc: Array<{
+    level: string;
+    id: string;
+    value: string;
+  }>;
+}
+
+const { toc } = Astro.props;
+---
+
+<div class="card-toc aside-card">
+  <header class="card-toc-header">文章内容</header>
+  <ol class="toc">
+    {
+      toc.map((item) => (
+        <li class:list={["toc-item", `toc-level-${item.level}`]}>
+          <a href={`#${item.id}`} class="toc-link">
+            <span class="toc-text">{item.value}</span>
+          </a>
+        </li>
+      ))
+    }
+  </ol>
+</div>

package/src/components/aside/countScript.astro

@@ -0,0 +1,18 @@
+---
+---
+
+<script is:inline>
+hsu
+  .getJson("/scripts/mdata.json")
+  .then((mdata) => {
+    const wordCounts = document.querySelector("#word-counts");
+    const postCounts = document.querySelector("#post-counts");
+    if (wordCounts)
+      wordCounts.innerText = hsu.formatNumber(mdata.totalWordCounts);
+    if (postCounts)
+      postCounts.innerText = hsu.formatNumber(mdata.totalPostCounts);
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+</script>

package/src/components/aside/customCard.astro

@@ -0,0 +1,23 @@
+---
+import GetIcon from "@comp/icons/getIcon.astro";
+import { utils } from "@src/utils/utils";
+
+interface Props {
+  card: CustomCard;
+}
+const { card } = Astro.props;
+---
+
+<div class={`aside-card ${card.customClass}`}>
+  <div class={`aside-card-headline ${card.customClass}`}>
+    <GetIcon Icon={card.icon} class={`aside-card-icon ${card.customClass}`} />
+    <div class={`aside-card-title ${card.customClass}`}>{card.title}</div>
+  </div>
+  <div
+    class={`aside-card-content ${card.customClass}`}
+    set:html={utils.replaceLink(
+      utils.executeEmbeddedScripts(card.content),
+      ` ${card.customClass} aside-card-link`
+    )}
+  />
+</div>

package/src/components/aside/siteInfo.astro

@@ -0,0 +1,51 @@
+---
+import GetIcon from "@comp/icons/getIcon.astro";
+import { ThemeConfig } from "@src/theme_config";
+import CountScript from "./countScript.astro";
+---
+
+<div class="siteinfo-card aside-card">
+  <div class="siteinfo-headline aside-card-headline">
+    <GetIcon
+      Icon="local:solid.circle-info"
+      class="siteinfo-icon aside-card-icon"
+    />
+    <div class="siteinfo-title aside-card-title">网站信息</div>
+  </div>
+  <div class="siteinfo-content aside-card-content">
+    {
+      ThemeConfig.aside.siteInfo.busuanzi && (
+        <Fragment>
+          <div class="siteinfo-item">
+            <span class="item-name">本站访客数:</span>
+            <span class="item-count" id="busuanzi_value_site_uv" />
+          </div>
+          <div class="siteinfo-item">
+            <span class="item-name">本站访问量</span>
+            <span class="item-count" id="busuanzi_value_site_pv" />
+          </div>
+        </Fragment>
+      )
+    }
+    {
+      ThemeConfig.aside.siteInfo.totalPostCounts && (
+        <div class="siteinfo-item">
+          <span class="item-name">本站文章数</span>
+          <span class="item-count" id="post-counts" />
+        </div>
+      )
+    }
+    {
+      ThemeConfig.aside.siteInfo.totalWordCounts && (
+        <div class="siteinfo-item">
+          <span class="item-name">本站总字数</span>
+          <span class="item-count" id="word-counts" />
+        </div>
+      )
+    }
+  </div>
+  {
+    (ThemeConfig.aside.siteInfo.totalPostCounts ||
+      ThemeConfig.aside.siteInfo.totalWordCounts) && <CountScript />
+  }
+</div>

package/src/components/client/searchCore.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, Ref } from "vue";
+import Fuse from "fuse.js";
+
+interface Result {
+  content: string;
+  title: string;
+  url: string;
+}
+
+const fuseOptions = {
+  isCaseSensitive: false,
+  includeScore: true,
+  includeMatches: true,
+  minMatchCharLength: 1,
+  shouldSort: true,
+  findAllMatches: false,
+  // location: 0,
+  // distance: 100,
+  // ignoreLocation: false,
+  threshold: 0.6,
+  useExtendedSearch: false,
+  ignoreFieldNorm: false,
+  fieldNormWeight: 1,
+  keys: ["title", "content"],
+};
+
+const keywords = ref("");
+const result: Ref<Fuse.FuseResult<Result>[][]> = ref([]);
+const pageNumber: Ref<number> = ref(1);
+const pageSize: Ref<number> = ref(0);
+
+const list = await hsu.getJson("/scripts/searchData.json");
+const fuse = new Fuse(list, fuseOptions);
+const search = () => {
+  let tmp: Fuse.FuseResult<Result>[] = fuse.search(keywords.value);
+  result.value = [];
+
+  for (let i = 0; i < tmp.length; i += 10) {
+    result.value.push(tmp.slice(i, i + 10));
+  }
+
+  pageNumber.value = 1;
+
+  pageSize.value = result.value.length;
+};
+</script>
+
+<template>
+  <input
+    class="search-input"
+    type="text"
+    placeholder=""
+    v-model="keywords"
+    @keydown.enter="search"
+  />
+  <div class="search-results">
+    <a
+      v-if="result.length"
+      v-for="i in 10"
+      class="search-result"
+      :href="result[pageNumber - 1][i - 1]?.item.url"
+      >{{ result[pageNumber - 1][i - 1]?.item.title }}</a
+    >
+  </div>
+  <div class="search-pagination">
+    <span
+      v-for="num in pageSize"
+      :class="{ 'search-pagenumber': true, active: pageNumber == num }"
+      @click="pageNumber = num"
+    >
+      <span>{{ num }}</span>
+    </span>
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/client/themeControl.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+
+const THEME_KEY = "theme"; // 用于localStorage的key
+
+const isLight = ref(localStorage.getItem(THEME_KEY) !== "dark"); // 从localStorage读取主题
+
+const root = document.documentElement;
+
+// 初始设置根元素的data-theme属性
+onMounted(() => {
+  root.setAttribute("data-theme", isLight.value ? "light" : "dark");
+});
+
+const svgClass = computed(() => {
+  return isLight.value ? "light" : "dark";
+});
+
+const toggleSvg = () => {
+  isLight.value = !isLight.value;
+
+  // 存储新的主题设置到localStorage
+  localStorage.setItem(THEME_KEY, svgClass.value);
+
+  // 更新根元素的data-theme属性
+  root.setAttribute("data-theme", svgClass.value);
+};
+</script>
+
+<template>
+  <div class="menu-button theme-control">
+    <div @click="toggleSvg" class="menu-button-link" title="changeMode">
+      <div class="menu-button-icon">
+        <svg
+          class="light"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <path
+            fill="currentColor"
+            d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
+          />
+        </svg>
+        <svg
+          class="dark"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"
+        >
+          <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <path
+            fill="currentColor"
+            d="M495.8 0c5.5 0 10.9 .2 16.3 .7c7 .6 12.8 5.7 14.3 12.5s-1.6 13.9-7.7 17.3c-44.4 25.2-74.4 73-74.4 127.8c0 81 65.5 146.6 146.2 146.6c8.6 0 17-.7 25.1-2.1c6.9-1.2 13.8 2.2 17 8.5s1.9 13.8-3.1 18.7c-34.5 33.6-81.7 54.4-133.6 54.4c-9.3 0-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304 86.1 389.8 0 495.8 0zM447.9 431.9c0 44.2-35.8 80-80 80H96c-53 0-96-43-96-96c0-47.6 34.6-87 80-94.6l0-1.3c0-53 43-96 96-96c34.9 0 65.4 18.6 82.2 46.4c13-9.1 28.8-14.4 45.8-14.4c44.2 0 80 35.8 80 80c0 5.9-.6 11.7-1.9 17.2c37.4 6.7 65.8 39.4 65.8 78.7z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+[data-theme="light"] .dark {
+  display: none;
+}
+
+[data-theme="light"] .light {
+  animation: var(--appear-animation);
+}
+
+[data-theme="dark"] .light {
+  display: none;
+}
+
+[data-theme="dark"] .dark {
+  animation: var(--appear-animation);
+}
+</style>

package/src/components/footer/Footer.astro

@@ -0,0 +1,32 @@
+---
+import "@style/components/footer.scss";
+import { ThemeConfig } from "@src/theme_config";
+import { utils } from "@utils/utils";
+
+const copyright = utils.replaceLink(
+  utils.executeEmbeddedScripts(ThemeConfig.footer.copyright),
+  "footer-link"
+);
+const footerText = utils.replaceLink(
+  utils.executeEmbeddedScripts(ThemeConfig.footer.text),
+  "footer-link"
+);
+---
+
+<footer id="site-footer">
+  <div class="footer-container">
+    <div class="copyright">
+      <Fragment set:html={copyright} />
+    </div>
+    <div class="astro-build">
+      由 <a class="footer-link" href="https://minearm.org">minearm-1.1.4.5</a>
+      构建<a
+        class="footer-link"
+        href="https://github.com/Minearm-RPM/minearm">Minearm-RPM</a
+      >
+    </div>
+    <div class="footer-info">
+      <Fragment set:html={footerText} />
+    </div>
+  </div>
+</footer>

package/src/components/header/Header.astro

@@ -0,0 +1,40 @@
+---
+import "@style/components/header.scss";
+import { ThemeConfig } from "@src/theme_config";
+import HeaderItem from "./HeaderItem.astro";
+import HeaderButton from "./HeaderButton.astro";
+import GetIcon from "@comp/icons/getIcon.astro";
+import SearchBar from "@comp/header/searchBar.astro";
+import { SiteConfig } from "@src/site_config";
+---
+
+<header id="site-header">
+  <nav class="header-menu">
+    <div class="nav-left header-nav">
+      {
+        ThemeConfig.header.functions.headerLogo && (
+          <GetIcon class="site-logo" Icon={ThemeConfig.site.logo} />
+        )
+      }
+      <h1
+        class="site-name"
+        style={`order: ${
+          ThemeConfig.header.functions.headerLogo === "left" ? 2 : 0
+        };`}
+      >
+        {ThemeConfig.site.title}
+      </h1>
+    </div>
+    <div class="nav-center header-nav">
+      <div class="menu-items">
+        <HeaderItem />
+      </div>
+    </div>
+    <div class="nav-right header-nav">
+      <div class="menu-buttons">
+        {SiteConfig.localSearch && <SearchBar />}
+        <HeaderButton />
+      </div>
+    </div>
+  </nav>
+</header>