vuepress-theme-plume 1.0.0-beta.89

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2021 - PRESENT by pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# `vuepress-theme-plume`
+
+一款基于 VuePress@2 的博客皮肤。
+
+[查看使用文档](https://pengzhanbo.cn/note/vuepress-theme-plume)
+
+## Install
+``` sh
+# use yarn
+yarn add vuepress-theme-plume
+# or npm
+npm i vuepress-theme-plume
+```
+
+## Usage
+
+``` js
+// .vuepress/config.ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    // theme config
+  })
+})
+```

package/lib/client/components/AutoLink.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { EXTERNAL_URL_RE, normalizeLink } from '../utils/index.js'
+import IconExternalLink from './icons/IconExternalLink.vue'
+
+const props = defineProps<{
+  tag?: string
+  href?: string
+  noIcon?: boolean
+  target?: string
+  rel?: string
+}>()
+
+const router = useRouter()
+
+const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
+const isExternal = computed(
+  () => props.href && EXTERNAL_URL_RE.test(props.href)
+)
+
+const linkTo = (e: Event) => {
+  if (!isExternal.value) {
+    e.preventDefault()
+    if (props.href) {
+      router.push({ path: props.href })
+    }
+  }
+}
+</script>
+
+<template>
+  <Component
+    :is="tag"
+    class="auto-link"
+    :class="{ link: href }"
+    :href="href ? normalizeLink(href) : undefined"
+    :target="target ?? (isExternal ? '_blank' : undefined)"
+    :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
+    @click="linkTo($event)"
+  >
+    <slot />
+    <IconExternalLink v-if="isExternal && !noIcon" class="icon" />
+  </Component>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 4px;
+  width: 11px;
+  height: 11px;
+  fill: var(--vp-c-text-3);
+  transition: fill 0.25s;
+}
+
+.auto-link :deep(i) {
+  font-style: normal;
+  font-weight: inherit;
+  line-height: normal;
+}
+</style>

package/lib/client/components/Backdrop.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="backdrop" />
+  </Transition>
+</template>
+
+<style scoped>
+.backdrop {
+  position: fixed;
+  top: 0;
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-backdrop);
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.backdrop.fade-enter-from,
+.backdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.backdrop.fade-leave-active {
+  transition-duration: 0.25s;
+}
+
+@media (min-width: 1280px) {
+  .backdrop {
+    display: none;
+  }
+}
+</style>

package/lib/client/components/Blog.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import BlogAvatar from './BlogAvatar.vue'
+import PostList from './PostList.vue'
+</script>
+<template>
+  <div class="blog-wrapper">
+    <PostList />
+    <BlogAvatar />
+  </div>
+</template>
+
+<style scoped>
+.blog-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: var(--vp-nav-height);
+}
+
+@media (min-width: 960px) {
+  .blog-wrapper {
+    max-width: 784px;
+    padding-top: 0;
+  }
+}
+
+@media (min-width: 1440px) {
+  .blog-wrapper {
+    max-width: 1104px;
+  }
+}
+</style>

package/lib/client/components/BlogAvatar.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useThemeLocaleData } from '../composables/index.js'
+
+const theme = useThemeLocaleData()
+
+const avatar = computed(() => theme.value.avatar)
+</script>
+
+<template>
+  <div v-if="avatar" class="blog-avatar-wrapper">
+    <div class="avatar-profile">
+      <p v-if="avatar.url">
+        <img :src="avatar.url" :alt="avatar.name" />
+      </p>
+      <div>
+        <h3>{{ avatar.name }}</h3>
+        <p>{{ avatar.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.blog-avatar-wrapper {
+  position: sticky;
+  top: calc(var(--vp-nav-height) + 2rem);
+  width: 270px;
+  margin-left: 2rem;
+  margin-top: 2rem;
+  border-left: solid 1px var(--vp-c-divider);
+  text-align: center;
+  padding: 1rem 0;
+
+  img {
+    width: 50%;
+    margin: auto;
+  }
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .blog-avatar-wrapper {
+    display: none;
+  }
+}
+</style>

package/lib/client/components/DocOutlineItem.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { PageHeader } from '@vuepress/client'
+
+defineProps<{
+  headers: PageHeader[]
+  root?: boolean
+}>()
+
+function onClick({ target: el }: Event) {
+  const id = (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.getElementById(decodeURIComponent(id))
+  heading?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title } in headers" :key="link">
+      <a class="outline-link" :href="link" :title="title" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <DocOutlineItem :headers="children" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.nested {
+  padding-left: 16px;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+  font-weight: 400;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+</style>

package/lib/client/components/Flyout/MenuGroup.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import MenuLink from './MenuLink.vue'
+
+defineProps<{
+  text?: string
+  icon?: string
+  items: any[]
+}>()
+</script>
+
+<template>
+  <div class="menu-group">
+    <p v-if="text" class="title">
+      <Icon v-if="icon" :name="icon" />
+      <span v-text="text"></span>
+    </p>
+
+    <template v-for="item in items">
+      <MenuLink v-if="'link' in item" :key="item?.link" :item="item" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.menu-group {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 12px 12px 0;
+}
+
+.menu-group:first-child {
+  margin-top: 0;
+  border-top: 0;
+  padding-top: 0;
+}
+
+.menu-group + .menu-group {
+  margin-top: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.title {
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+</style>

package/lib/client/components/Flyout/MenuLink.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { usePageData } from '@vuepress/client'
+import { isActive } from '../../utils/index.js'
+import AutoLink from '../AutoLink.vue'
+
+defineProps<{
+  item: any
+}>()
+
+const page = usePageData()
+</script>
+
+<template>
+  <div class="menu-link">
+    <AutoLink
+      :class="{
+        active: isActive(
+          page.path,
+          item.activeMatch || item.link,
+          !!item.activeMatch
+        ),
+      }"
+      :href="item.link"
+    >
+      <Icon v-if="item.icon" :name="item.icon" />
+      <i v-text="item.text"></i>
+    </AutoLink>
+  </div>
+</template>
+
+<style scoped>
+.menu-group + .menu-link {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 12px 12px 0;
+}
+
+.link {
+  display: block;
+  border-radius: 6px;
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  transition: background-color 0.25s, color 0.25s;
+}
+
+.link:hover {
+  color: var(--vp-c-brand);
+  background-color: var(--vp-c-bg-elv-mute);
+}
+
+.link.active {
+  color: var(--vp-c-brand);
+}
+</style>

package/lib/client/components/Flyout/VMenu.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import MenuGroup from './MenuGroup.vue'
+import MenuLink from './MenuLink.vue'
+
+defineProps<{
+  items?: any[]
+}>()
+</script>
+
+<template>
+  <div class="menu-wrapper">
+    <div v-if="items" class="items">
+      <template v-for="item in items" :key="item.text">
+        <MenuLink v-if="'link' in item" :item="item" />
+        <MenuGroup
+          v-else
+          :text="item.text"
+          :items="item.items"
+          :icon="item.icon"
+        />
+      </template>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.menu-wrapper {
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 128px;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-3);
+  transition: background-color 0.5s;
+  max-height: calc(100vh - var(--vp-nav-height));
+  overflow-y: auto;
+}
+
+.menu-wrapper :deep(.group) {
+  margin: 0 -12px;
+  padding: 0 12px 12px;
+}
+
+.menu-wrapper :deep(.group + .group) {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 11px 12px 12px;
+}
+
+.menu-wrapper :deep(.group:last-child) {
+  padding-bottom: 0;
+}
+
+.menu-wrapper :deep(.group + .item) {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 11px 16px 0;
+}
+
+.menu-wrapper :deep(.item) {
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.menu-wrapper :deep(.label) {
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu-wrapper :deep(.action) {
+  padding-left: 24px;
+}
+</style>

package/lib/client/components/Flyout/index.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useFlyout } from '../../composables/flyout.js'
+import IconChevronDown from '../icons/IconChevronDown.vue'
+import IconMoreHorizontal from '../icons/IconMoreHorizontal.vue'
+import VMenu from './VMenu.vue'
+
+defineProps<{
+  prefixIcon?: string
+  icon?: any
+  button?: string
+  label?: string
+  items?: any[]
+}>()
+
+const open = ref(false)
+const el = ref<HTMLElement>()
+
+useFlyout({ el, onBlur })
+
+function onBlur() {
+  open.value = false
+}
+</script>
+
+<script lang="ts">
+export default {
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'Flyout',
+}
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="flyout-wrapper"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      :aria-label="label"
+      @click="open = !open"
+    >
+      <span v-if="button || icon" class="text">
+        <Icon v-if="prefixIcon" :name="prefixIcon" />
+        <Component :is="icon" v-if="icon" class="option-icon" />
+        {{ button }}
+        <IconChevronDown class="text-icon" />
+      </span>
+
+      <IconMoreHorizontal v-else class="icon" />
+    </button>
+
+    <div class="menu">
+      <VMenu :items="items">
+        <slot />
+      </VMenu>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flyout-wrapper {
+  position: relative;
+}
+
+.flyout-wrapper:hover {
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+.flyout-wrapper:hover .text {
+  color: var(--vp-c-text-2);
+}
+
+.flyout-wrapper:hover .icon {
+  fill: var(--vp-c-text-2);
+}
+
+.flyout-wrapper.active .text {
+  color: var(--vp-c-brand);
+}
+
+.flyout-wrapper.active:hover .text {
+  color: var(--vp-c-brand-dark);
+}
+
+.flyout-wrapper:hover .menu,
+.button[aria-expanded='true'] + .menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: var(--vp-nav-height);
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  /* line-height: var(--vp-nav-height); */
+  line-height: normal;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.option-icon {
+  margin-right: 0px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.text-icon {
+  margin-left: 4px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+  transition: fill 0.25s;
+}
+
+.menu {
+  position: absolute;
+  top: calc(var(--vp-nav-height) / 2 + 20px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+</style>