yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

chore: 更新依赖，优化功能

Browse Source
This commit is contained in:
pengzhanbo 2022-04-18 16:59:35 +08:00
parent 17e118b845
commit 4771d32c23
15 changed files with 751 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -28,15 +28,15 @@
"concurrently": "^7.0.0",
"cpx2": "^4.2.0",
"cross-env": "^7.0.3",
"eslint": "^8.12.0",
"eslint": "^8.13.0",
"eslint-config-vuepress": "^3.5.0",
"eslint-config-vuepress-typescript": "^2.5.0",
"eslint-config-vuepress-typescript": "^2.6.0",
"lerna": "^4.0.0",
"prettier": "^2.6.1",
"prettier-config-vuepress": "^1.3.0",
"prettier-config-vuepress": "^1.4.0",
"rimraf": "^3.0.2",
"typescript": "^4.6.3",
"vuepress-vite": "^2.0.0-beta.38",
"vuepress-vite": "^2.0.0-beta.39",
"vuepress-webpack": "^2.0.0-beta.38",
"webpack-env": "^0.8.0"
},

34
packages/plugin-caniuse/README.md
View File

@ -1,11 +1,33 @@
# `plugin-caniuse`
> TODO: description
# `@vuepress-plume/vuepress-plugin-caniuse`
为 markdown 添加 can-i-use 容器支持
## Install
```
yarn add @vuepress-plume/vuepress-plugin-caniuse
```
## Usage
``` js
// .vuepress/config.js
module.exports = {
//...
plugins: [
['@vuepress-plume/vuepress-plugin-caniuse', { mode: 'embed' }]
]
// ...
}
```
const pluginCaniuse = require('plugin-caniuse');
// TODO: DEMONSTRATE API
### options
- mode: 渲染模式，默认值 `embed`
- embed: 交互式嵌入，通过 iframe 嵌入可交互的 can-i-use
- image: 仅添加 图片
``` md
::: caniuse css-matches-pseudo
:::
```
## 效果
![css-dir-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp)

12
packages/theme/README.md
View File

@ -1,11 +1,5 @@
# `theme`
# `@vuepress-plume/vuepress-theme-plume`
> TODO: description
一款基于 VuePress@2 的博客皮肤。
## Usage
```
const theme = require('theme');
// TODO: DEMONSTRATE API
```
[查看使用文档](https://pengzhanbo.cn/note/vuepress-theme-plume)

10
packages/theme/package.json
View File

@ -53,12 +53,12 @@
"nanoid": "^3.3.2",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"vue": "^3.2.31",
"vue": "^3.2.33",
"vue-router": "^4.0.14",
"vuepress-plugin-comment2": "^2.0.0-beta.36",
"vuepress-plugin-copy-code2": "^2.0.0-beta.36",
"vuepress-plugin-md-enhance": "^2.0.0-beta.36",
"vuepress-plugin-reading-time2": "^2.0.0-beta.36",
"vuepress-plugin-comment2": "^2.0.0-beta.45",
"vuepress-plugin-copy-code2": "^2.0.0-beta.45",
"vuepress-plugin-md-enhance": "^2.0.0-beta.45",
"vuepress-plugin-reading-time2": "^2.0.0-beta.45",
"vuepress-plugin-seo2": "^2.0.0-beta.36",
"vuepress-plugin-sitemap2": "^2.0.0-beta.36"
},

3
packages/theme/src/client/clientAppEnhance.ts
View File

@ -1,5 +1,4 @@
import { defineClientAppEnhance } from '@vuepress/client'
import { h } from 'vue'
import './styles/index.scss'
@ -8,7 +7,7 @@ export default defineClientAppEnhance(({ app }) => {
const SearchComponent =
app.component('Docsearch') || app.component('SearchBox')
if (SearchComponent) {
return h(SearchComponent)
return SearchComponent
}
return null
})

2
packages/theme/src/client/components/Page.vue
View File

@ -4,13 +4,11 @@ import PostMeta from '@theme-plume/PostMeta.vue'
import Sidebar from '@theme-plume/Sidebar.vue'
import { usePageData } from '@vuepress/client'
import { computed, nextTick, onUnmounted, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import type { PlumeThemePageData } from '../../shared'
import { useDarkMode, useThemeLocaleData } from '../composables'
import { getCssValue } from '../utils'
import Toc from './Toc'
const page = usePageData<PlumeThemePageData>()
const route = useRoute()
const themeLocale = useThemeLocaleData()
const isDarkMode = useDarkMode()

12
packages/theme/src/client/components/Pagination.vue
View File

@ -20,7 +20,7 @@ function handlePage({ currentPage }): void {
}
const { currentPage, pageCount, isFirstPage, isLastPage, prev, next } =
useOffsetPagination({
total,
total: total.value,
page: page.value,
pageSize: 10,
onPageChange: handlePage,
@ -58,8 +58,10 @@ function handleJump(): void {
if (
inputPage.value &&
inputPage.value >= 1 &&
inputPage.value <= pageCount.value
inputPage.value <= pageCount.value &&
currentPage.value !== Number(inputPage.value)
) {
currentPage.value = Number(inputPage.value)
emit('togglePage', inputPage.value)
}
}
@ -128,7 +130,9 @@ function handleJump(): void {
background-color: var(--c-bg-container);
cursor: pointer;
font-size: inherit;
padding: 0.5rem 0.8rem;
padding: 0 0.8rem;
height: 34px;
line-height: 34px;
border: solid 1px transparent;
color: var(--c-text);
box-shadow: var(--shadow-sm);
@ -154,6 +158,8 @@ function handleJump(): void {
font-size: inherit;
padding: 0.5rem;
width: 3.25rem;
height: 34px;
line-height: 34px;
border: solid 1px transparent;
color: var(--c-text);
box-shadow: var(--shadow-sm);

101
packages/theme/src/client/components/SidebarItems.vue
View File

@ -1,24 +1,78 @@
<script lang="ts" setup>
import AutoLink from '@theme-plume/AutoLink.vue'
import { computed, ref, watchEffect } from 'vue'
import type { PropType } from 'vue'
import type { SidebarOptions } from '../../shared'
import type { SidebarItem, SidebarOptions } from '../../shared'
import { useThemeLocaleData } from '../composables'
import { hasOwn } from '../utils'
import { ArrowRightIcon } from './icons'
defineProps({
type SidebarListComputed = SidebarItem & { open: boolean }
const props = defineProps({
sidebarList: {
type: Array as PropType<SidebarOptions>,
required: true,
},
deep: {
type: Number,
required: false,
default: 1,
},
})
const themeLocale = useThemeLocaleData()
const collapsible = computed(() => {
if (
!themeLocale.value.notes ||
!hasOwn(themeLocale.value.notes, 'collapsible')
) {
return true
} else {
return themeLocale.value.notes.collapsible
}
})
const sidebarList = ref<SidebarListComputed[]>([])
watchEffect(() => {
sidebarList.value = props.sidebarList.map((sidebar) => {
return { ...sidebar, open: !!collapsible.value }
})
})
const sidebarClick = (sidebar: SidebarListComputed): void => {
if (props.deep === 1) {
sidebar.open = !sidebar.open
}
}
</script>
<template>
<ul class="sidebar-items">
<li v-for="sidebar in sidebarList" :key="sidebar.text">
<AutoLink
v-if="sidebar.link"
:item="{ text: sidebar.text, link: sidebar.link }"
<li
v-for="sidebar in sidebarList"
:key="sidebar.text"
:class="{ line: deep === 1 }"
>
<p @click.self="sidebarClick(sidebar)">
<ArrowRightIcon
v-if="deep === 1 && sidebar.children.length"
:class="{ open: sidebar.open }"
@click.self="sidebarClick(sidebar)"
>
>
</ArrowRightIcon>
<AutoLink
v-if="sidebar.link"
:item="{ text: sidebar.text, link: sidebar.link }"
/>
<span v-else @click.self="sidebarClick(sidebar)">
{{ sidebar.text }}
</span>
</p>
<SidebarItems
v-show="sidebar.open"
:sidebar-list="sidebar.children"
:deep="deep + 1"
/>
<p v-else>{{ sidebar.text }}</p>
<SidebarItems :sidebar-list="sidebar.children" />
</li>
</ul>
</template>
@ -32,6 +86,7 @@ defineProps({
a {
color: var(--c-text);
margin: 0.25rem 0;
font-weight: bold;
&:hover {
color: var(--c-text-accent);
@ -41,10 +96,38 @@ defineProps({
color: var(--c-text-accent);
}
}
p {
span {
font-weight: 600;
margin: 0.25rem 0;
}
p {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
height: 40px;
.arrow-right-icon {
width: 14px;
height: 14px;
margin-right: 0.25rem;
transform: rotate(0);
transition: transform var(--t-color);
&.open {
transform: rotate(90deg);
}
}
}
&.line {
border-bottom: solid 1px var(--c-border);
&:last-child {
border-bottom: none;
}
}
}
.sidebar-items {
font-size: 16px;

8
packages/theme/src/client/components/icons/icon.ts
View File

@ -56,3 +56,11 @@ export const TopIcon: FunctionalComponent = () =>
}),
])
TopIcon.displayName = 'TopIcon'
export const ArrowRightIcon: FunctionalComponent = () =>
h(IconBase, { name: 'arrow-right', viewBox: '0 0 1024 1024' }, () =>
h('path', {
d: 'M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z',
})
)
ArrowRightIcon.displayName = 'ArrowRightIcon'

9
packages/theme/src/client/styles/code.scss
View File

@ -133,16 +133,17 @@ pre[class*='language-'] {
scrollbar-color: var(--c-brand) var(--c-border);
&::-webkit-scrollbar {
width: 0;
height: 0;
width: 7px;
height: 7px;
}
&::-webkit-scrollbar-track {
opacity: 0;
background-color: var(--code-bg-color);
}
&::-webkit-scrollbar-thumb {
opacity: 0;
background-color: var(--code-hl-bg-color);
border-radius: 3px;
}
code {

3
packages/theme/src/client/utils/check.ts Normal file
View File

@ -0,0 +1,3 @@
export const hasOwn = (val: object, key: string): key is never => {
return Object.prototype.hasOwnProperty.call(val, key)
}

1
packages/theme/src/client/utils/index.ts
View File

@ -2,3 +2,4 @@ export * from './dom'
export * from './resolveRepoType'
export * from './path'
export * from './color'
export * from './check'

7
packages/theme/src/shared/options/notes.ts
View File

@ -17,6 +17,13 @@ export interface PlumeThemeNotesOptions {
* 默认值： _notes
*/
dir?: string
/**
* 是否可折叠
*
* 默认不折叠， 仅对一级有效
*/
collapsible?: boolean
/**
* 笔记集合配置
*

4
tsconfig.json
View File

@ -3,6 +3,7 @@
"compilerOptions": {
"baseUrl": "./",
"module": "ES2020",
// "jsx": "preserve",
"paths": {
"@theme-plume/*": [
"./packages/theme/src/client/components/*"
@ -13,6 +14,9 @@
},
"types": ["webpack-env", "vite/client", "@vuepress/client/types"]
},
"vueCompilerOptions": {
"experimentalDisableTemplateSupport": true
},
"include": [
"packages/**/*",
"docs/.vuepress/**/*"

730
yarn.lock
View File

File diff suppressed because it is too large Load Diff