@hefou/lum 0.0.0-stage → 1.0.0

package/components/Footer.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, onMounted, ref } from 'vue'
+import { getLocaleKey, isExternal } from '../composables'
+import type { FooterData } from '../types'
+import { Icon, Image, Link } from './common'
+
+const props = defineProps<{ Footer_Data: FooterData }>()
+
+const localeKey = getLocaleKey()
+
+const footer = computed<NonNullable<FooterData>>(() => {
+  const localized = props.Footer_Data?.i18n?.[localeKey.value]
+  return {
+    ...props.Footer_Data,
+    ...localized,
+    author: localized?.author ?? props.Footer_Data?.author ?? undefined,
+    beian: localized?.beian ?? props.Footer_Data?.beian ?? undefined,
+    group: localized?.group ?? props.Footer_Data?.group ?? [],
+    noIcon: localized?.noIcon ?? props.Footer_Data?.noIcon ?? false,
+  }
+})
+
+const footerAuthor = computed(() => footer.value.author ?? null)
+const beian = computed(() => footer.value.beian ?? {})
+const icp = computed(() => beian.value.icp)
+const police = computed(() => beian.value.police)
+
+const currentYear = ref('')
+onMounted(() => (currentYear.value = new Date().getFullYear().toString()))
+
+const { frontmatter } = useData()
+const isHome = computed(() => {
+  return !!(frontmatter.value.isHome ?? frontmatter.value.layout === 'home')
+})
+</script>
+
+<template>
+  <footer v-if="isHome" class="footer">
+    <div v-if="footer.group?.length" class="list-container">
+      <section v-for="(section, i) in footer.group" :key="section.title + i">
+        <h3 class="list-title">
+          <Icon v-if="section.icon" class="icon-space" :icon="section.icon" size="12" />
+          <Image v-else-if="section.image" class="image-inline" :image="section.image" size="12" />
+          {{ section.title }}
+        </h3>
+        <ul class="list-links">
+          <li v-for="(link, i) in section.links" :key="link.name + i">
+            <Icon v-if="link.icon" class="icon-space" :icon="link.icon" size="12" />
+            <Image v-else-if="link.image" class="image-inline" :image="link.image" size="12" />
+            <Link :href="link.link" :rel="link.rel" :target="link.target"
+              :no-icon="footer.noIcon || section.noIcon || link.noIcon || !isExternal(link.link ?? '')">
+              {{ link.name }}
+            </Link>
+          </li>
+        </ul>
+      </section>
+    </div>
+
+    <div v-if="footer.beian?.icp || footer.beian?.police || footer.author" class="footer-info">
+      <template v-if="footer.beian?.icp || footer.beian?.police">
+        <span v-if="footer.beian?.icp?.number" class="footer-infotext">
+          <template v-if="footer.beian?.showIcon">
+            <Icon v-if="footer.beian.icp.icon" class="icon-space" :icon="footer.beian.icp.icon" size="12" />
+            <Image v-else-if="footer.beian.icp.image" class="image-inline" :image="footer.beian.icp.image" size="12" />
+            <Image v-else class="image-inline" image="https://i.theojs.net/logo/miit.webp" size="12" loading="eager" />
+          </template>
+          <Link :href="icp?.link || 'https://beian.miit.gov.cn/'" :rel="icp?.rel || 'nofollow'" :target="icp?.target"
+            no-icon>
+            {{ icp?.number }}
+          </Link>
+        </span>
+
+        <span class="info-spacing"></span>
+
+        <span v-if="police?.number" class="footer-infotext">
+          <template v-if="footer.beian?.showIcon">
+            <Icon v-if="police?.icon" class="icon-space" :icon="police.icon" size="12" />
+            <Image v-else-if="police?.image" class="image-inline" :image="police.image" size="12" />
+            <Image v-else class="image-inline" image="https://i.theojs.net/logo/mps.webp" size="12" loading="eager" />
+          </template>
+          <Link :href="police?.link || 'https://beian.mps.gov.cn/'" :rel="police?.rel" :target="police?.target" no-icon>
+            {{ police?.number }}
+          </Link>
+        </span>
+      </template>
+
+      <span class="info-spacing-copyright"></span>
+
+      <span v-if="footer.author?.name" class="footer-infotext">
+        <Icon v-if="footer.author.icon" class="icon-space" :icon="footer.author.icon" size="12" />
+        <Image v-else-if="footer.author.image" class="image-inline" :image="footer.author.image" size="12" />
+        <Icon v-else class="icon-space" :icon="'ri:copyright-line'" size="12" />
+        <Link :href="footerAuthor?.link || `https://github.com/${footerAuthor?.name}`" :rel="footerAuthor?.rel"
+          :target="footerAuthor?.target" no-icon>
+          {{ footerAuthor?.startYear ? `${footerAuthor.startYear} - ` : '' }}{{ currentYear }}
+          {{ footerAuthor?.name }}
+          {{ footerAuthor?.text || 'All Rights Reserved.' }}
+        </Link>
+      </span>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  background: var(---Footer-bg);
+  width: 100%;
+}
+
+.footer a {
+  position: relative;
+  transition:
+    color 0.25s,
+    opacity 0.25s,
+    text-decoration-color 0.25s;
+}
+
+.footer a:hover {
+  color: var(---Footer-link-hover);
+  -webkit-text-decoration: underline solid;
+  text-decoration: underline solid;
+  text-underline-offset: 4px;
+}
+
+.list-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  row-gap: 1.25em;
+  justify-items: center;
+  margin: 1.25em auto;
+  max-width: 65%;
+}
+
+.list-title {
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  font-size: 0.75em;
+  line-height: 1.5;
+}
+
+.list-links {
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 2.4;
+}
+
+.list-links a {
+  opacity: 0.75;
+}
+
+.list-links a:hover {
+  opacity: 1;
+}
+
+.iconify {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.icon-space {
+  margin-right: 0.3em;
+}
+
+.footer-info {
+  margin: 0.875em 0;
+  text-align: center;
+}
+
+.footer-infotext {
+  display: inline-block;
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1.6;
+}
+
+.info-spacing,
+.info-spacing-copyright {
+  margin-left: 1em;
+}
+
+.image-inline {
+  display: inline-block;
+  vertical-align: -0.125em;
+  margin-right: 0.3em;
+}
+
+@media (max-width: 768px) {
+  .info-spacing-copyright {
+    margin-left: -1em;
+  }
+}
+</style>

package/components/Links.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { LinkItem } from '../types'
+import { Icon, Image, Link } from './common'
+
+const props = defineProps<{
+  items: LinkItem[]
+  grid?: number
+}>()
+</script>
+
+<template>
+  <div class="grid"
+    :style="typeof props.grid === 'number' ? { gridTemplateColumns: `repeat(${props.grid}, 1fr)` } : undefined">
+    <Link v-for="(link, i) in props.items" :key="link.name + i" class="link" :href="link.link" :rel="link.rel"
+      :target="link.target" no-icon>
+      <span class="row">
+        <Icon v-if="link.icon" :icon="link.icon" :size="link.size || '32'" />
+        <Image v-else-if="link.image" :image="link.image" :size="link.size || '32'" />
+        <span class="name" v-html="link.name"></span>
+      </span>
+      <p v-if="link.desc" class="desc" v-html="link.desc"></p>
+      <p v-if="link.linkText" class="link-text">
+        {{ link.linkText }} <span class="vpi-arrow-right" style="margin-left: 6px" />
+      </p>
+    </Link>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.5em;
+  margin: 0.5em 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+  width: 100%;
+  min-width: 0;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  transition:
+    color 0.25s,
+    transform 0.25s,
+    box-shadow 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  margin: 0;
+  border: 1px solid var(---Links-border);
+  border-radius: 0.75em;
+  background-color: var(---Links-bg);
+  padding: 1em;
+  min-width: 0;
+  text-decoration: none !important;
+}
+
+.link.-link {
+  color: var(---Links-name);
+}
+
+.link.-link:hover {
+  transform: var(---Links-transform-hover);
+  box-shadow: var(---Links-boxshadow-hover);
+  border-color: var(---Links-border-hover);
+  background-color: var(---Links-bg-hover);
+  color: var(---Links-name-hover);
+}
+
+.link.-link:active {
+  transform: var(---Links-transform-active);
+}
+
+.iconify {
+  flex-shrink: 0;
+  color: var(---iconify-defColor);
+}
+
+.name {
+  flex: 1 1 0%;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.desc {
+  margin: 0.875em 0 0 0;
+  color: var(---Links-desc);
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.link-text {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding-top: 8px;
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1.5;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)) !important;
+  }
+}
+</style>

package/components/Notice.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useNotice } from '../composables'
+import { Icon, Image, Link } from './common'
+
+const notice = useNotice()
+</script>
+
+<template>
+  <Link v-if="notice" :key="(notice.link ?? '') + (notice.rel ?? '') + (notice.target ?? '') || notice.title || notice.desc || notice.date
+    " class="notice" :tag="notice.link ? 'a' : 'div'" :href="notice.link" :rel="notice.rel" :target="notice.target"
+    no-icon>
+    <div class="content">
+      <span class="title" v-html="notice.title"></span>
+      <p v-if="notice.desc" class="desc" v-html="notice.desc"></p>
+      <div v-if="notice.date" class="time-info">
+        <Icon v-if="notice.dateIcon" :icon="notice.dateIcon" size="14" />
+        <Image v-else-if="notice.dateImage" :image="notice.dateImage" size="14" />
+        <Icon v-else icon="heroicons:calendar-days" size="14" style="transform: translateY(-0.5px)" />
+        <time v-html="notice.dateText || '活动时间: 即日至'"></time>
+        <time class="date">{{ notice.date }}</time>
+      </div>
+    </div>
+  </Link>
+</template>
+
+<style scoped>
+.notice {
+  display: inline-flex;
+  flex-direction: column;
+  transition:
+    transform 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  margin-bottom: 1em;
+  border: 1px solid var(---Notice-border);
+  border-radius: 0.5em;
+  background-color: var(---Notice-bg);
+  padding: 0.15em 1em;
+}
+
+.notice.-link:hover {
+  transform: var(---Notice-transform-hover);
+  border-color: var(---Notice-border-hover);
+  background-color: var(---Notice-bg-hover);
+}
+
+.notice.-link:active {
+  transform: var(---Notice-transform-active);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 0.75em;
+}
+
+.desc {
+  font-weight: 500;
+  font-size: 0.75em;
+  white-space: pre-wrap;
+}
+
+.time-info {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-weight: 500;
+  font-size: 0.75em;
+}
+
+.date {
+  color: var(---Notice-data);
+  font-weight: bold;
+}
+
+@media (max-width: 768px) {
+  .time-info {
+    justify-content: center;
+  }
+}
+</style>

package/components/Pill.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { IconType, ImageType, LinkType, RelType, SizeType, TargetType } from '../types'
+import { Icon, Image, Link } from './common'
+
+const pill = defineProps<{
+  name: string
+  link?: LinkType
+  rel?: RelType
+  target?: TargetType
+  icon?: IconType
+  image?: ImageType
+  size?: SizeType
+}>()
+</script>
+
+<template>
+  <Link :class="['link', 'ignore-header', { 'no-icon-img': !pill.icon && !pill.image }]" :href="pill.link"
+    :rel="pill.rel" :target="pill.target" no-icon>
+    <Icon v-if="pill.icon" :icon="pill.icon" :size="pill.size || '14'" />
+    <Image v-else-if="pill.image" :image="pill.image" :size="pill.size || '14'" />
+    <span class="name" v-html="pill.name"></span>
+  </Link>
+</template>
+
+<style scoped>
+.link {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: -1px;
+  gap: 0.25em;
+  transition:
+    color 0.25s,
+    transform 0.25s,
+    box-shadow 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  margin: 0 0.125em;
+  border: 1px solid var(---Pill-border);
+  border-radius: 0.5em;
+  background-color: var(---Pill-bg);
+  padding: 0 0.25em;
+  height: 1.375em;
+  font-size: 1rem;
+  text-decoration: none !important;
+  white-space: nowrap;
+}
+
+.link.no-icon-img {
+  vertical-align: 1.5px;
+}
+
+.link.-link {
+  color: var(---Pill-name);
+}
+
+.link.-link:hover {
+  transform: var(---Pill-transform-hover);
+  box-shadow: var(---Pill-boxshadow-hover);
+  border-color: var(---Pill-border-hover);
+  background-color: var(---Pill-bg-hover);
+  color: var(---Pill-name-hover);
+}
+
+.link.-link:active {
+  transform: var(---Pill-transform-active);
+}
+
+.vp-doc h1>.link {
+  vertical-align: top;
+  margin-top: 2px;
+}
+
+.vp-doc h2>.link {
+  vertical-align: top;
+  margin-top: 1px;
+}
+
+.vp-doc h3>.link {
+  vertical-align: top;
+  margin-top: 1px;
+}
+
+.vp-doc h4>.link,
+.vp-doc h5>.link,
+.vp-doc h6>.link {
+  vertical-align: top;
+  line-height: 18px;
+}
+
+.vp-doc td>.link {
+  vertical-align: -1px;
+  font-size: 1em;
+}
+
+.vp-doc td>.link.no-icon-img {
+  vertical-align: 1.5px;
+}
+
+.iconify {
+  flex-shrink: 0;
+  color: var(---iconify-defColor);
+}
+
+.name {
+  font-weight: 500;
+  font-size: 0.875em;
+}
+</style>

package/components/Underline.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { moveDomElements } from '../composables'
+import { Svg } from './common'
+
+const { frontmatter: fm } = useData()
+moveDomElements('heroText')
+</script>
+
+<template>
+  <span ref="heroText">
+    <span class="hero-text">{{ fm.hero?.text }}<Svg /></span>
+    {{ fm.hero?.textsuffix }}
+  </span>
+</template>
+
+<style scoped>
+.hero-text {
+  display: inline-block;
+  position: relative;
+}
+</style>

package/components/common/Icon.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useData } from 'vitepress'
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import type { IconMode, IconType, SizeType } from '../../types'
+
+const props = defineProps<{
+  icon: IconType
+  color?: IconMode
+  size?: SizeType
+}>()
+
+const { isDark } = useData()
+
+const resolvedIcon = computed(() => {
+  if (typeof props.icon === 'string') return props.icon
+  if ('icon' in props.icon) return props.icon.icon
+  if ('light' in props.icon && 'dark' in props.icon) return isDark.value ? props.icon.dark : props.icon.light
+  if ('svg' in props.icon) {
+    if (typeof props.icon.svg === 'object') return isDark.value ? props.icon.svg.dark : props.icon.svg.light
+    return props.icon.svg
+  }
+})
+
+const resolvedColor = computed(() => {
+  if (!props.icon || typeof props.icon === 'string') return undefined
+  if ('color' in props.icon) {
+    if (typeof props.icon.color === 'object') return isDark.value ? props.icon.color.dark : props.icon.color.light
+    return props.icon.color
+  }
+})
+
+const resizeSvg = (svgString: string, size: string) => {
+  if (typeof window !== 'undefined') {
+    const svgElement = new DOMParser().parseFromString(svgString, 'image/svg+xml').querySelector('svg')
+    svgElement?.setAttribute('width', size)
+    svgElement?.setAttribute('height', size)
+    return svgElement?.outerHTML ?? svgString
+  }
+  return svgString
+}
+
+const resolvedSvg = computed(() =>
+  resolvedIcon.value?.includes('<svg') && props.size ? resizeSvg(resolvedIcon.value, String(props.size)) : null
+)
+
+const svgRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  watchEffect(() => {
+    if (svgRef.value && resolvedSvg.value) svgRef.value.innerHTML = resolvedSvg.value
+  })
+})
+</script>
+
+<template>
+  <span v-if="resolvedSvg" ref="svgRef" class="iconify" aria-hidden="true" />
+  <Icon
+    v-else
+    :icon="resolvedIcon ?? ''"
+    :color="resolvedColor"
+    :inline="true"
+    :ssr="true"
+    :width="size"
+    :height="size"
+  />
+</template>

package/components/common/Image.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { computed } from 'vue'
+import type { ImageType, SizeType } from '../../types'
+
+const props = defineProps<{
+  image: ImageType
+  size?: SizeType
+}>()
+
+defineOptions({ inheritAttrs: false })
+
+const isThemedImage = (image: ImageType): image is { light: string; dark: string } =>
+  typeof image === 'object' && 'light' in image && 'dark' in image
+
+const shouldCrop = computed(() => Boolean(typeof props.image === 'object' && 'crop' in props.image && props.image.crop))
+
+const imageAttrs = computed(() => {
+  if (typeof props.image === 'string') return {}
+  const { light, dark, crop, ...restAttrs } = props.image
+  return restAttrs
+})
+
+const IMAGE_ERROR_FALLBACK =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%238cbcd6' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4'/%3E%3Ccircle cx='35' cy='16' r='3' fill='%23b3ddf5'/%3E%3Cpath fill='%239ac9e3' d='M20 16L9 32h22z'/%3E%3Cpath fill='%23b3ddf5' d='m31 22l-8 10h16z'/%3E%3Ccircle cx='38' cy='38' r='10' fill='%23f44336'/%3E%3Cg fill='%23fff'%3E%3Cpath d='m43.31 41.181l-2.12 2.122l-8.485-8.484l2.121-2.122z'/%3E%3Cpath d='m34.819 43.31l-2.122-2.12l8.484-8.485l2.122 2.121z'/%3E%3C/g%3E%3C/svg%3E"
+
+const handleImageError = (event: Event): void => {
+  if (event.target instanceof HTMLImageElement) {
+    event.target.onerror = null
+    event.target.src = IMAGE_ERROR_FALLBACK
+  }
+}
+</script>
+
+<template>
+  <template v-if="isThemedImage(props.image)">
+    <img
+      :class="['lm-img', 'dark-img', shouldCrop && 'crop']"
+      :src="withBase(props.image.dark)"
+      :width="size ?? undefined"
+      :height="size ?? undefined"
+      loading="lazy"
+      aria-hidden="true"
+      alt=""
+      data-no-viewer
+      v-bind="{ ...imageAttrs, ...$attrs }"
+      @error="handleImageError"
+    />
+    <img
+      :class="['lm-img', 'light-img', shouldCrop && 'crop']"
+      :src="withBase(props.image.light)"
+      :width="size ?? undefined"
+      :height="size ?? undefined"
+      loading="lazy"
+      aria-hidden="true"
+      alt=""
+      data-no-viewer
+      v-bind="{ ...imageAttrs, ...$attrs }"
+      @error="handleImageError"
+    />
+  </template>
+  <template v-else>
+    <img
+      :class="['lm-img', shouldCrop && 'crop']"
+      :src="typeof props.image === 'string' ? withBase(props.image) : withBase(props.image.src)"
+      :width="size ?? undefined"
+      :height="size ?? undefined"
+      loading="lazy"
+      aria-hidden="true"
+      alt=""
+      data-no-viewer
+      v-bind="typeof props.image === 'string' ? $attrs : { ...imageAttrs, ...$attrs }"
+      @error="handleImageError"
+    />
+  </template>
+</template>
+
+<style scoped>
+:root:not(.dark) .dark-img,
+:root:is(.dark) .light-img {
+  display: none;
+}
+
+.lm-img {
+  margin: 0;
+  border-radius: 0.25em;
+  pointer-events: none;
+}
+
+.lm-img.crop {
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}
+</style>