@wot-ui/vitepress-theme 2.0.0-alpha.10

package/dist/theme/components/WwAds.vue

@@ -0,0 +1,74 @@
+<!-- eslint-disable quotes -->
+<script setup lang="ts">
+import { onMounted, ref, inject } from 'vue'
+import AsideSponsors from './AsideSponsors.vue'
+import { wotThemeOptionsKey } from '../options.js'
+
+const showTemp = ref(false)
+const options = inject(wotThemeOptionsKey)
+const wwadsId = options?.ads !== false ? options?.ads?.wwadsId : null
+
+// function called if wwads is blocked
+function ABDetected() {
+  const wwadsElement = document.getElementsByClassName('aside-temp')[0]
+  if (wwadsElement) {
+    wwadsElement.insertAdjacentHTML(
+      'beforeend',
+      "<style>.wwads-horizontal,.wwads-vertical{background-color:#f4f8fa;padding:5px;min-height:120px;margin-top:20px;box-sizing:border-box;border-radius:3px;font-family:sans-serif;display:flex;min-width:150px;position:relative;overflow:hidden;}.wwads-horizontal{flex-wrap:wrap;justify-content:center}.wwads-vertical{flex-direction:column;align-items:center;padding-bottom:32px}.wwads-horizontal a,.wwads-vertical a{text-decoration:none}.wwads-horizontal .wwads-img,.wwads-vertical .wwads-img{margin:5px}.wwads-horizontal .wwads-content,.wwads-vertical .wwads-content{margin:5px}.wwads-horizontal .wwads-content{flex:130px}.wwads-vertical .wwads-content{margin-top:10px}.wwads-horizontal .wwads-text,.wwads-content .wwads-text{font-size:14px;line-height:1.4;color:#0e1011;-webkit-font-smoothing:antialiased}.wwads-horizontal .wwads-poweredby,.wwads-vertical .wwads-poweredby{display:block;font-size:11px;color:#a6b7bf;margin-top:1em}.wwads-vertical .wwads-poweredby{position:absolute;left:10px;bottom:10px}.wwads-horizontal .wwads-poweredby span,.wwads-vertical .wwads-poweredby span{transition:all 0.2s ease-in-out;margin-left:-1em}.wwads-horizontal .wwads-poweredby span:first-child,.wwads-vertical .wwads-poweredby span:first-child{opacity:0}.wwads-horizontal:hover .wwads-poweredby span,.wwads-vertical:hover .wwads-poweredby span{opacity:1;margin-left:0}.wwads-horizontal .wwads-hide,.wwads-vertical .wwads-hide{position:absolute;right:-23px;bottom:-23px;width:46px;height:46px;border-radius:23px;transition:all 0.3s ease-in-out;cursor:pointer;}.wwads-horizontal .wwads-hide:hover,.wwads-vertical .wwads-hide:hover{background:rgb(0 0 0 /0.05)}.wwads-horizontal .wwads-hide svg,.wwads-vertical .wwads-hide svg{position:absolute;left:10px;top:10px;fill:#a6b7bf}.wwads-horizontal .wwads-hide:hover svg,.wwads-vertical .wwads-hide:hover svg{fill:#3E4546}</style><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-img' target='_blank' rel='nofollow'><img src='https://creatives-1301677708.file.myqcloud.com/images/placeholder/wwads-friendly-ads.png' width='130'></a><div class='wwads-content'><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-text' target='_blank' rel='nofollow'>为了本站的长期运营，请将我们的网站加入广告拦截器的白名单，感谢您的支持！</a><a href='https://wwads.cn/page/end-user-privacy' class='wwads-poweredby' title='万维广告 ～ 让广告更优雅，且有用' target='_blank'><span>万维</span><span>广告</span></a></div><a class='wwads-hide' onclick='parentNode.remove()' title='隐藏广告'><svg xmlns='http://www.w3.org/2000/svg' width='6' height='7'><path d='M.879.672L3 2.793 5.121.672a.5.5 0 11.707.707L3.708 3.5l2.12 2.121a.5.5 0 11-.707.707l-2.12-2.12-2.122 2.12a.5.5 0 11-.707-.707l2.121-2.12L.172 1.378A.5.5 0 01.879.672z'></path></svg></a>"
+    )
+  }
+}
+
+// check document ready
+function docReady(callback: () => void) {
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setTimeout(callback, 1)
+  } else {
+    document.addEventListener('DOMContentLoaded', callback)
+  }
+}
+
+onMounted(() => {
+  if (!wwadsId) return
+
+  const s = document.createElement('script')
+  s.type = 'text/javascript'
+  s.src = 'https://cdn.wwads.cn/js/makemoney.js'
+  document.querySelector('.wwads-container')!.appendChild(s)
+
+  // check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading)
+  docReady(() => {
+    setTimeout(() => {
+      if ((window as any)._AdBlockInit === undefined) {
+        showTemp.value = true
+        ABDetected()
+      }
+    }, 3000)
+  })
+})
+</script>
+
+<template>
+  <AsideSponsors></AsideSponsors>
+  <template v-if="wwadsId">
+    <div class="wwads-container" v-if="!showTemp">
+      <div class="wwads-cn wwads-vertical" :data-id="wwadsId"></div>
+    </div>
+    <div class="aside-temp wwads-vertical" v-if="showTemp"></div>
+  </template>
+</template>
+
+<style>
+.wwads-container,
+.aside-temp {
+  padding: 1px 15px 10px;
+  margin-top: 20px;
+  background-color: var(--vp-c-bg-soft);
+}
+.wwads-vertical {
+  background-color: transparent !important;
+}
+.wwads-text {
+  color: var(--vp-c-text-2) !important;
+}
+</style>

package/dist/theme/composables/adSponsor.js

@@ -0,0 +1,29 @@
+import { ref, onMounted } from "vue";
+import axios from "axios";
+const data = ref([]);
+function useAdSponsor() {
+  onMounted(async () => {
+    const urls = ["https://sponsor.wot-ui.cn/sponsor.json", "https://wot-sponsors.pages.dev/sponsor.json"];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          return response?.data?.data;
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return [];
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useAdSponsor
+};

package/dist/theme/composables/adsData.js

@@ -0,0 +1,35 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref([]);
+function useAds() {
+  const options = inject(wotThemeOptionsKey);
+  const adsOptions = options?.ads;
+  onMounted(async () => {
+    if (!adsOptions || data.value.length) {
+      return;
+    }
+    const urls = adsOptions.urls || [];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          return response.data && response.data.ads ? response.data.ads : [];
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return [];
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useAds
+};

package/dist/theme/composables/banner.js

@@ -0,0 +1,35 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref([]);
+function useBanner() {
+  const options = inject(wotThemeOptionsKey);
+  const bannerOptions = options?.banner;
+  onMounted(async () => {
+    if (!bannerOptions || data.value.length) {
+      return;
+    }
+    const urls = bannerOptions.urls || [];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          return response.data && response.data.data ? response.data.data : [];
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return [];
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useBanner
+};

package/dist/theme/composables/cases.js

@@ -0,0 +1,43 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref([]);
+function useCaseData() {
+  const options = inject(wotThemeOptionsKey);
+  const casesOptions = options?.cases;
+  onMounted(async () => {
+    if (!casesOptions || data.value.length) {
+      return;
+    }
+    const urls = casesOptions.urls || [];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const path = "/cases.json";
+          const response = await axios.get(url + path + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          const data2 = response.data && response.data.data ? response.data.data : [];
+          return data2.map((item) => {
+            return {
+              name: item.name,
+              image: item.image ? url + item.image : "",
+              description: item.description
+            };
+          });
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return [];
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useCaseData
+};

package/dist/theme/composables/friendly.js

@@ -0,0 +1,35 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref([]);
+function useFriendly() {
+  const options = inject(wotThemeOptionsKey);
+  const friendlyOptions = options?.friendly;
+  onMounted(async () => {
+    if (!friendlyOptions || data.value.length) {
+      return;
+    }
+    const urls = friendlyOptions.urls || [];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          return response.data && response.data.links ? response.data.links : [];
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return [];
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useFriendly
+};

package/dist/theme/composables/sponsor.js

@@ -0,0 +1,35 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref();
+function useSponsor() {
+  const options = inject(wotThemeOptionsKey);
+  const sponsorOptions = options?.sponsors;
+  onMounted(async () => {
+    if (!sponsorOptions || data.value) {
+      return;
+    }
+    const urls = sponsorOptions.urls || [];
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "?t=" + Date.now(), {
+            timeout: 5e3
+            // 设置5秒超时
+          });
+          return response.data;
+        } catch (error) {
+          console.warn(`Failed to fetch from ${url}`);
+        }
+      }
+      return null;
+    };
+    data.value = await fetchData();
+  });
+  return {
+    data
+  };
+}
+export {
+  useSponsor
+};

package/dist/theme/composables/team.js

@@ -0,0 +1,48 @@
+import { ref, onMounted, inject } from "vue";
+import axios from "axios";
+import { wotThemeOptionsKey } from "../options.js";
+const data = ref([]);
+function useTeam() {
+  const options = inject(wotThemeOptionsKey);
+  const teamOptions = options?.team;
+  onMounted(async () => {
+    if (!teamOptions || data.value.length) {
+      return;
+    }
+    const urls = teamOptions.urls || [];
+    const MOCK_MEMBERS = [];
+    const normalizeMembers = (members) => {
+      return members.map((member) => {
+        const tags = Array.isArray(member.tags) ? member.tags : member.status ? [member.status] : [];
+        return {
+          avatar: member.avatar,
+          name: member.name,
+          title: member.title,
+          tags,
+          desc: member.desc,
+          github: member.github,
+          twitter: member.twitter
+        };
+      });
+    };
+    const fetchData = async () => {
+      for (const url of urls) {
+        try {
+          const response = await axios.get(url + "/team.json?t=" + Date.now(), {
+            timeout: 5e3
+          });
+          const members = response.data && response.data.members ? response.data.members : [];
+          return normalizeMembers(members);
+        } catch (error) {
+          console.warn(`Failed to fetch team from ${url}`);
+        }
+      }
+      return normalizeMembers(MOCK_MEMBERS);
+    };
+    data.value = await fetchData();
+  });
+  return { data };
+}
+export {
+  useTeam
+};

package/dist/theme/options.js

@@ -0,0 +1,4 @@
+const wotThemeOptionsKey = Symbol("wot-vitepress-theme-options");
+export {
+  wotThemeOptionsKey
+};

package/dist/theme/styles/custom.css

@@ -0,0 +1,206 @@
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a,
+a:active {
+  color: var(--vp-c-text-2);
+}
+
+
+.style-block {
+  display: inline-block;
+  width: 180px;
+  padding: 15px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  color: var(--vp-c-white);
+}
+
+.style-block p {
+  margin: 0;
+  color: var(--vp-c-white);
+}
+
+.a-dot,
+.b-dot {
+  position: absolute;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background: var(--vp-c-brand-1);
+  z-index: 10;
+  border: 2px solid var(--vp-c-white);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+
+.a-dot {
+  left: -6px;
+  top: -6px;
+}
+
+.a-dot:before {
+  content: "A";
+  display: inline-block;
+  color: var(--vp-c-text-1);
+  font-size: 17px;
+  -webkit-transform: translate(14px, -22px);
+  transform: translate(14px, -22px);
+}
+
+.b-dot {
+  right: -6px;
+  bottom: -6px;
+}
+
+.b-dot:before {
+  content: "B";
+  display: inline-block;
+  color: var(--vp-c-text-1);
+  font-size: 17px;
+  -webkit-transform: translate(14px, -22px);
+  transform: translate(14px, -22px);
+}
+
+.liner-color {
+  width: 160px;
+  height: 160px;
+  position: relative;
+}
+
+.liner-color:after {
+  position: absolute;
+  content: "";
+  width: 2px;
+  height: 250px;
+  right: 79px;
+  top: 50%;
+  background-color: var(--vp-c-white);
+  -webkit-transform: translateY(-50%) rotate(-45deg);
+  transform: translateY(-50%) rotate(-45deg);
+}
+
+.color-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.color-block {
+  width: 65px;
+  vertical-align: middle;
+  display: inline-block;
+  text-align: center;
+  height: 20px;
+  color: var(--vp-c-white);
+  font-size: 14px;
+  margin-left: 5px;
+}
+
+.liner-color1:after {
+  -webkit-transform: translateY(-50%) rotate(45deg);
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.liner-color1 .a-dot {
+  right: -6px;
+  top: -6px;
+  left: inherit;
+}
+
+.liner-color1 .b-dot {
+  left: -6px;
+  bottom: -6px;
+}
+
+.liner-color1 .b-dot:before {
+  -webkit-transform: translate(25px, -15px);
+  transform: translate(25px, -15px);
+}
+
+.demo-right {
+  position: absolute;
+  left: 250px;
+}
+
+.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0 !important;
+  box-sizing: border-box;
+}
+
+.color-group.dark {
+  background: var(--vp-c-bg-alt);
+  border: 3px solid var(--vp-c-bg-alt);
+  border-radius: 4px;
+}
+
+.color-group li {
+  width: 120px;
+  height: 120px;
+  list-style: none;
+  display: inline-block;
+  padding: 8px 0 0 8px;
+}
+.color-group-line{
+  margin-top:0 !important;
+  margin-bottom: 8px;
+}
+
+.color-group li div {
+  font-weight: 500;
+}
+
+.VPSidebar {
+  overflow: hidden !important;
+}
+
+.VPSidebar:hover {
+  overflow-y: auto !important;
+}
+
+* {
+  scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  transition: all 0.2s ease-in-out;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.22);
+}
+
+html.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.38);
+}

package/dist/theme/styles/vars.css

@@ -0,0 +1,136 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-c-brand-1: #1c64fd;
+  --vt-c-brand-2: #4480ff;
+  --vt-c-brand-3: #7ca4ff;
+  --vt-c-brand-4: #b8cfff;
+  --vt-c-brand-dark-1: #164ed1;
+  --vt-c-brand-dark-2: #1341ad;
+  --vt-c-brand-soft: #1c64fd14;
+  --vt-c-accent-purple: #8059f3;
+  --vt-c-accent-cyan: #6ed8ff;
+  --vt-c-accent-mint: #64cddd;
+}
+
+.dark {
+  --vt-c-brand-1: #4480ff;
+  --vt-c-brand-2: #7ca4ff;
+  --vt-c-brand-3: #b8cfff;
+  --vt-c-brand-4: #e5edff;
+  --vt-c-brand-dark-1: #1c64fd;
+  --vt-c-brand-dark-2: #164ed1;
+  --vt-c-brand-soft: #1c64fd14;
+  --vt-c-accent-purple: #9775fa;
+  --vt-c-accent-cyan: #45c7ff;
+  --vt-c-accent-mint: #90dbe7;
+}
+
+:root {
+  --vp-c-brand-1: var(--vt-c-brand-1);
+  --vp-c-brand-2: var(--vt-c-brand-2);
+  --vp-c-brand-3: var(--vt-c-brand-3);
+  --vp-c-brand-soft: var(--vt-c-brand-soft);
+
+  --vp-c-brand: var(--vp-c-brand-1);
+  --vp-c-brand-light: var(--vp-c-brand-2);
+  --vp-c-brand-lighter: var(--vt-c-brand-3);
+  --vp-c-brand-lightest: var(--vt-c-brand-4);
+  --vp-c-brand-dark: var(--vt-c-brand-dark-1);
+  --vp-c-brand-darker: var(--vt-c-brand-dark-2);
+  --vp-c-brand-dimm: var(--vt-c-brand-soft);
+
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: var(--vp-c-brand-3);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-dark);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+      var(--vt-c-brand-1) 30%,
+      var(--vt-c-accent-purple));
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+/**
+ * VitePress: Custom fix
+ * -------------------------------------------------------------------------- */
+
+/*
+  Use lighter colors for links in dark mode for a11y.
+  Also specify some classes twice to have higher specificity
+  over scoped class data attribute.
+*/
+.dark .vp-doc a,
+.dark .vp-doc a>code,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
+.dark .link.link:hover,
+.dark .link.link.active,
+.dark .edit-link-button.edit-link-button,
+.dark .pager-link .title {
+  color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover,
+.dark .vp-doc a>code:hover {
+  color: var(--vp-c-brand-lightest);
+  opacity: 1;
+}
+
+/* Transition by color instead of opacity */
+.dark .vp-doc .custom-block a {
+  transition: color 0.25s;
+}
+
+.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
+  max-width: 124px;
+}
+/* side bar */
+
+:root {
+  --vp-sidebar-width: 338px;
+  --vp-sidebar-bg-color: var(--vp-c-bg);
+}
+
+.dark {
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+}