vitepress-theme-element-plus 0.0.1 → 0.0.3

package/client/hooks/useSize.ts

@@ -0,0 +1,69 @@
+import type { MaybeRef } from '@vueuse/core'
+import type { Ref, ShallowRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed, isRef, onMounted, ref, shallowRef, unref, watch } from 'vue'
+import { isString } from '../utils/common'
+
+function getValue(value: string | number): string {
+  return isString(value) ? value : `${value}px`
+}
+
+export interface SizeOptions {
+  width: string | number | undefined
+  height: string | number | undefined
+  ratio: string | number | undefined
+}
+
+export interface SizeInfo<E extends HTMLElement> {
+  el: ShallowRef<E | undefined>
+  width: Ref<string>
+  height: Ref<string>
+  resize: () => void
+}
+
+export function useSize<E extends HTMLElement>(options: SizeOptions, extraHeight: MaybeRef<number> = 0): SizeInfo<E> {
+  const el = shallowRef<E>()
+  const width = computed(() => getValue(unref(options.width) ?? '100%'))
+  const height = ref('auto')
+
+  const getRadio = (ratio: number | string | undefined): number => {
+    if (isString(ratio)) {
+      const [width, height] = ratio.split(':')
+      const parsedRadio = Number(width) / Number(height)
+
+      if (!Number.isNaN(parsedRadio))
+        return parsedRadio
+    }
+
+    return typeof ratio === 'number' ? ratio : 16 / 9
+  }
+
+  const getHeight = (width: number): string => {
+    const height = unref(options.height)
+    const ratio = getRadio(unref(options.ratio))
+
+    return height
+      ? getValue(height)
+      : `${Number(width) / ratio + unref(extraHeight)}px`
+  }
+
+  const updateHeight = (): void => {
+    if (el.value)
+      height.value = getHeight(el.value.clientWidth)
+  }
+
+  onMounted(() => {
+    updateHeight()
+    if (isRef(extraHeight))
+      watch(extraHeight, updateHeight)
+    useEventListener('orientationchange', updateHeight)
+    useEventListener('resize', updateHeight)
+  })
+
+  return {
+    el,
+    width,
+    height,
+    resize: updateHeight,
+  }
+}

package/client/utils/client/common.ts

@@ -0,0 +1,49 @@
+import type { DefaultTheme } from 'vitepress'
+import { isActive } from '../common'
+
+export interface SidebarLink {
+  text: string
+  link: string
+  docFooterText?: string
+}
+export function getFlatSideBarLinks(sidebar: DefaultTheme.SidebarItem[]): SidebarLink[] {
+  const links: SidebarLink[] = []
+
+  function recursivelyExtractLinks(items: DefaultTheme.SidebarItem[]) {
+    for (const item of items) {
+      if (item.text && item.link) {
+        links.push({
+          text: item.text,
+          link: item.link,
+          docFooterText: item.docFooterText,
+        })
+      }
+
+      if (item.items) {
+        recursivelyExtractLinks(item.items)
+      }
+    }
+  }
+
+  recursivelyExtractLinks(sidebar)
+
+  return links
+}
+
+/**
+ * Check if the given sidebar item contains any active link.
+ */
+export function hasActiveLink(
+  path: string,
+  items: DefaultTheme.SidebarItem | DefaultTheme.SidebarItem[],
+): boolean {
+  if (Array.isArray(items)) {
+    return items.some(item => hasActiveLink(path, item))
+  }
+
+  return isActive(path, items.link)
+    ? true
+    : items.items
+      ? hasActiveLink(path, items.items)
+      : false
+}

package/client/utils/client/outline.ts

@@ -0,0 +1,113 @@
+import type { Header } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+
+const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
+
+// cached list of anchor elements from resolveHeaders
+const resolvedHeaders: { element: HTMLHeadElement, link: string }[] = []
+
+export type MenuItem = Omit<Header, 'slug' | 'children'> & {
+  element: HTMLHeadElement
+  children?: MenuItem[]
+}
+
+export function resolveTitle(theme: DefaultTheme.Config): string {
+  return (
+    (typeof theme.outline === 'object'
+      && !Array.isArray(theme.outline)
+      && theme.outline.label)
+    || theme.outlineTitle
+    || 'On this page'
+  )
+}
+
+export function getHeaders(range: DefaultTheme.Config['outline']): MenuItem[] {
+  const headers = Array.from(document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)'))
+    .filter(el => el.id && el.hasChildNodes())
+    .map((el) => {
+      const level = Number(el.tagName[1])
+      return {
+        element: el as HTMLHeadElement,
+        title: serializeHeader(el),
+        link: `#${el.id}`,
+        level,
+      }
+    })
+
+  return resolveHeaders(headers, range)
+}
+
+function serializeHeader(h: Element): string {
+  let ret = ''
+  for (const node of Array.from(h.childNodes)) {
+    if (node.nodeType === 1) {
+      if (ignoreRE.test((node as Element).className))
+        continue
+      ret += node.textContent
+    }
+    else if (node.nodeType === 3) {
+      ret += node.textContent
+    }
+  }
+  return ret.trim()
+}
+
+export function resolveHeaders(
+  headers: MenuItem[],
+  range?: DefaultTheme.Config['outline'],
+): MenuItem[] {
+  if (range === false) {
+    return []
+  }
+
+  const levelsRange
+    = (typeof range === 'object' && !Array.isArray(range)
+      ? range.level
+      : range) || 2
+
+  const [high, low]: [number, number]
+    = typeof levelsRange === 'number'
+      ? [levelsRange, levelsRange]
+      : levelsRange === 'deep'
+        ? [2, 6]
+        : levelsRange
+
+  return buildTree(headers, high, low)
+}
+
+function buildTree(data: MenuItem[], min: number, max: number): MenuItem[] {
+  resolvedHeaders.length = 0
+
+  const result: MenuItem[] = []
+  const stack: (MenuItem | { level: number, shouldIgnore: true })[] = []
+
+  data.forEach((item) => {
+    const node = { ...item, children: [] }
+    let parent = stack[stack.length - 1]
+
+    while (parent && parent.level >= node.level) {
+      stack.pop()
+      parent = stack[stack.length - 1]
+    }
+
+    if (
+      node.element.classList.contains('ignore-header')
+      || (parent && 'shouldIgnore' in parent)
+    ) {
+      stack.push({ level: node.level, shouldIgnore: true })
+      return
+    }
+
+    if (node.level > max || node.level < min)
+      return
+    resolvedHeaders.push({ element: node.element, link: node.link })
+
+    if (parent)
+      (parent as MenuItem).children.push(node)
+    else result.push(node)
+
+    stack.push(node)
+  })
+
+  return result
+}

package/client/utils/common.ts

@@ -0,0 +1,90 @@
+const HASH_RE = /#.*$/
+const HASH_OR_QUERY_RE = /[?#].*$/
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
+
+export const inBrowser = typeof document !== 'undefined'
+
+export function isActive(
+  currentPath: string,
+  matchPath?: string,
+  asRegex: boolean = false,
+): boolean {
+  if (matchPath === undefined) {
+    return false
+  }
+
+  currentPath = normalize(`/${currentPath}`)
+
+  if (asRegex) {
+    return new RegExp(matchPath).test(currentPath)
+  }
+
+  if (normalize(matchPath) !== currentPath) {
+    return false
+  }
+
+  const hashMatch = matchPath.match(HASH_RE)
+
+  if (hashMatch) {
+    return (inBrowser ? location.hash : '') === hashMatch[0]
+  }
+
+  return true
+}
+
+function normalize(path: string): string {
+  return decodeURI(path)
+    .replace(HASH_OR_QUERY_RE, '')
+    .replace(INDEX_OR_EXT_RE, '$1')
+}
+
+export function ensureStartingSlash(path: string): string {
+  return /^\//.test(path) ? path : `/${path}`
+}
+
+export function isPlainObject(obj: any) {
+  // 首先排除 null 和非对象类型
+  if (obj === null || typeof obj !== 'object') {
+    return false
+  }
+
+  // 检查对象的构造函数是否是 Object
+  if (obj.constructor !== Object) {
+    return false
+  }
+
+  // 检查对象的原型是否是 Object.prototype
+  if (Object.getPrototypeOf(obj) !== Object.prototype) {
+    return false
+  }
+
+  return true
+}
+
+export function isString(value) {
+  return typeof value === 'string'
+}
+
+export function capitalizeFirstLetter(string: string) {
+  if (!string)
+    return '' // 如果字符串为空，返回空字符串
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeoutId: NodeJS.Timeout
+  let called = false
+
+  return () => {
+    if (timeoutId)
+      clearTimeout(timeoutId)
+
+    if (!called) {
+      fn()
+      ;(called = true) && setTimeout(() => (called = false), delay)
+    }
+    else {
+      timeoutId = setTimeout(fn, delay)
+    }
+  }
+}

package/client/utils/throttle.ts

@@ -0,0 +1,46 @@
+type AnyFn = (...args: any[]) => unknown
+
+export interface Throttled<T extends AnyFn> {
+  (...args: Parameters<T>): void
+  cancel: () => void
+}
+
+export function throttle<T extends AnyFn>(fn: T, delay = 200): Throttled<T> {
+  let lastCall = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const invoke = (context: unknown, args: Parameters<T>) => {
+    lastCall = Date.now()
+    fn.apply(context, args)
+  }
+
+  const throttled = function (this: unknown, ...args: Parameters<T>) {
+    const now = Date.now()
+    const remaining = delay - (now - lastCall)
+
+    if (remaining <= 0) {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      invoke(this, args)
+      return
+    }
+
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null
+        invoke(this, args)
+      }, remaining)
+    }
+  } as Throttled<T>
+
+  throttled.cancel = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return throttled
+}

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import { mdExternalLinkIcon } from "./markdown/plugins/external-link-icon.mjs";
+import { mdTableWrapper } from "./markdown/plugins/table-wrapper.mjs";
+import { mdTag } from "./markdown/plugins/tag.mjs";
+import { mdTooltip } from "./markdown/plugins/tooltip.mjs";
+export { mdExternalLinkIcon, mdTableWrapper, mdTag, mdTooltip };

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import mdExternalLinkIcon from "./markdown/plugins/external-link-icon.mjs";
+import mdTableWrapper from "./markdown/plugins/table-wrapper.mjs";
+import mdTag from "./markdown/plugins/tag.mjs";
+import mdTooltip from "./markdown/plugins/tooltip.mjs";
+
+export { mdExternalLinkIcon, mdTableWrapper, mdTag, mdTooltip };

package/dist/markdown/plugins/external-link-icon.d.mts

@@ -0,0 +1,6 @@
+import MarkdownIt from "markdown-it";
+
+//#region node/markdown/plugins/external-link-icon.d.ts
+declare function mdExternalLinkIcon(md: MarkdownIt): void;
+//#endregion
+export { mdExternalLinkIcon };

package/dist/markdown/plugins/external-link-icon.mjs

@@ -0,0 +1,26 @@
+//#region node/markdown/plugins/external-link-icon.ts
+const renderToken = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options);
+function mdExternalLinkIcon(md) {
+	const defaultLinkOpenRenderer = md.renderer.rules.link_open || renderToken;
+	const defaultLinkCloseRenderer = md.renderer.rules.link_close || renderToken;
+	let isExternalLink = false;
+	md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+		const token = tokens[idx];
+		const href = token.attrGet("href");
+		if (href) {
+			token.attrJoin("class", "vp-link");
+			if (/^(?:ht|f)tps?:\/\/?/.test(href)) isExternalLink = true;
+		}
+		return defaultLinkOpenRenderer(tokens, idx, options, env, self);
+	};
+	md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
+		if (isExternalLink) {
+			isExternalLink = false;
+			return `<svg viewBox="0 0 24 24" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z"/></svg>${self.renderToken(tokens, idx, options)}`;
+		}
+		return defaultLinkCloseRenderer(tokens, idx, options, env, self);
+	};
+}
+
+//#endregion
+export { mdExternalLinkIcon as default };

package/dist/markdown/plugins/table-wrapper.d.mts

@@ -0,0 +1,6 @@
+import MarkdownIt from "markdown-it";
+
+//#region node/markdown/plugins/table-wrapper.d.ts
+declare function mdTableWrapper(md: MarkdownIt): void;
+//#endregion
+export { mdTableWrapper };

package/dist/markdown/plugins/table-wrapper.mjs

@@ -0,0 +1,8 @@
+//#region node/markdown/plugins/table-wrapper.ts
+function mdTableWrapper(md) {
+	md.renderer.rules.table_open = () => "<div class=\"vp-table\"><table>";
+	md.renderer.rules.table_close = () => "</table></div>";
+}
+
+//#endregion
+export { mdTableWrapper as default };

package/dist/markdown/plugins/tag.d.mts

@@ -0,0 +1,6 @@
+import MarkdownIt from "markdown-it";
+
+//#region node/markdown/plugins/tag.d.ts
+declare function mdTag(md: MarkdownIt): void;
+//#endregion
+export { mdTag };

package/dist/markdown/plugins/tag.mjs

@@ -0,0 +1,25 @@
+//#region node/markdown/plugins/tag.ts
+function mdTag(md) {
+	md.inline.ruler.before("emphasis", "tag", (state, silent) => {
+		const tagRegExp = /^\^\(([^)]*)\)/;
+		const str = state.src.slice(state.pos, state.posMax);
+		if (!tagRegExp.test(str)) return false;
+		if (silent) return true;
+		const result = str.match(tagRegExp);
+		if (!result) return false;
+		const token = state.push("html_inline", "", 0);
+		const value = result[1].trim();
+		token.content = `<span class="vp-tag ${[
+			"beta",
+			"deprecated",
+			"a11y",
+			"required"
+		].includes(value) ? value : ""}">${value}</span>`;
+		token.level = state.level;
+		state.pos += result[0].length;
+		return true;
+	});
+}
+
+//#endregion
+export { mdTag as default };

package/dist/markdown/plugins/tooltip.d.mts

@@ -0,0 +1,6 @@
+import MarkdownIt from "markdown-it";
+
+//#region node/markdown/plugins/tooltip.d.ts
+declare function mdTooltip(md: MarkdownIt): void;
+//#endregion
+export { mdTooltip };

package/dist/markdown/plugins/tooltip.mjs

@@ -0,0 +1,24 @@
+//#region node/markdown/plugins/tooltip.ts
+function mdTooltip(md) {
+	md.renderer.rules.tooltip = (tokens, idx) => {
+		const token = tokens[idx];
+		return `<api-typing type="${token.content}" details="${token.info}" />`;
+	};
+	md.inline.ruler.before("emphasis", "tooltip", (state, silent) => {
+		const tooltipRegExp = /^\^\[([^\]]*)\](`[^`]*`)?/;
+		const str = state.src.slice(state.pos, state.posMax);
+		if (!tooltipRegExp.test(str)) return false;
+		if (silent) return true;
+		const result = str.match(tooltipRegExp);
+		if (!result) return false;
+		const token = state.push("tooltip", "tooltip", 0);
+		token.content = result[1].replaceAll(String.raw`\|`, "|");
+		token.info = (result[2] || "").replace(/^`(.*)`$/, "$1");
+		token.level = state.level;
+		state.pos += result[0].length;
+		return true;
+	});
+}
+
+//#endregion
+export { mdTooltip as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-theme-element-plus",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A VitePress theme for Element Plus",
   "author": "Hezhengxu",
   "license": "MIT",
@@ -17,7 +17,6 @@
   ],
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
       "default": "./index.ts"
     },
     "./node": {
@@ -29,10 +28,11 @@
   "types": "./types/index.d.ts",
   "style": "./index.scss",
   "files": [
-    "config",
+    "client",
+    "dist",
     "index.ts",
-    "src",
-    "types"
+    "shared",
+    "styles"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -45,8 +45,10 @@
   "peerDependencies": {
     "vitepress": "2.0.0-alpha.12"
   },
+  "dependencies": {
+    "@iconify/vue": "^4"
+  },
   "devDependencies": {
-    "@iconify/vue": "^4.2.1",
     "@release-it/conventional-changelog": "^10",
     "@types/glob": "^9.0.0",
     "@types/markdown-it": "^14.1.0",
@@ -54,7 +56,6 @@
     "@vitejs/plugin-vue": "^5.2.4",
     "@vueuse/core": "^11.3.0",
     "element-plus": "^2.11.7",
-    "es-toolkit": "^1.14.0",
     "release-it": "^19",
     "rimraf": "^6.0.1",
     "sass-embedded": "^1.80.3",

package/shared/constants.ts

@@ -0,0 +1,3 @@
+export const NOT_ARTICLE_LAYOUTS = ['blog', 'tags', 'categorys', 'projects', 'home', 'page']
+
+export const DEFAULT_PAGE_SIZE = 5

package/styles/base.scss

@@ -0,0 +1,37 @@
+
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.4;
+  font-size: 16px;
+  text-size-adjust: 100%;
+  font-family: var(--font-family);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: 1.4;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  direction: ltr;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background-color var(--el-transition-duration-fast);
+}
+
+main {
+  display: block;
+}