Skip to content

Commit 4ad14da

Browse files
nekomeowwwnekomeowww
committed
feat(sidecar-annotations-comments): added sidecar-annotations
1 parent 3bb694b commit 4ad14da

18 files changed

Lines changed: 394 additions & 3 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"unocss.root": [
3232
"./docs",
3333
"./packages/vitepress-plugin-enhanced-readabilities",
34-
"./packages/vitepress-plugin-inline-link-preview"
34+
"./packages/vitepress-plugin-inline-link-preview",
35+
"./packages/sidecar-annotations"
3536
]
3637
}

‎docs/.vitepress/plugins/markdownTransform.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { relative, resolve } from 'node:path'
2+
import type { Plugin } from 'vite'
3+
4+
const ROOT = resolve(__dirname, '../../')
5+
6+
export function MarkdownTransform(): Plugin {
7+
return {
8+
name: 'docs-md-transform',
9+
enforce: 'pre',
10+
async transform(code, id) {
11+
if (!id.endsWith('.md'))
12+
return null
13+
14+
// 将 ID 转换为相对路径，便于进行正则匹配
15+
id = relative(ROOT, id)
16+
code = `${code}\n\n<CommentAnnotation />`
17+
18+
return code
19+
},
20+
}
21+
}

‎docs/.vitepress/theme/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@ import {
1414
NolebaseInlineLinkPreviewPlugin,
1515
} from '@nolebase/vitepress-plugin-inline-link-preview'
1616

17+
import {
18+
CommentAnnotation,
19+
} from '@nolebase/sidecar-annotations'
20+
1721
import 'virtual:uno.css'
1822

1923
import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
2024
import '@nolebase/vitepress-plugin-inline-link-preview/dist/style.css'
25+
import '@nolebase/sidecar-annotations/dist/style.css'
2126

2227
import './styles/vars.css'
2328
import './styles/main.css'
@@ -38,6 +43,7 @@ export const Theme: ThemeConfig = {
3843
},
3944
enhanceApp({ app }) {
4045
app.component('IntegrationCard', IntegrationCard)
46+
app.component('CommentAnnotation', CommentAnnotation)
4147
app.use(NolebaseInlineLinkPreviewPlugin)
4248
app.provide(NolebaseEnhancedReadabilitiesInjectionKey, {
4349
layoutSwitch: {

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@iconify-json/octicon": "^1.1.49",
1515
"@nolebase/markdown-it-bi-directional-links": "workspace:^",
1616
"@nolebase/markdown-it-element-transform": "workspace:^",
17+
"@nolebase/sidecar-annotations": "workspace:^",
1718
"@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
1819
"@nolebase/vitepress-plugin-inline-link-preview": "workspace:^",
1920
"unocss": "^0.55.7",

‎docs/vite.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineConfig } from 'vite'
22
import UnoCSS from 'unocss/vite'
3+
import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
34

45
export default defineConfig(async () => {
56
return {
@@ -9,6 +10,7 @@ export default defineConfig(async () => {
910
},
1011
plugins: [
1112
UnoCSS(),
13+
MarkdownTransform(),
1214
],
1315
}
1416
})

‎packages/sidecar-annotations/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# `@nolebase/vitepress-plugin-inline-link-preview`
2+
3+
A VitePress plugin that adds a inline popup to help you preview links while reading.
4+
5+
## Install
6+
7+
### Npm
8+
9+
```shell
10+
npm i @nolebase/vitepress-plugin-inline-link-preview
11+
```
12+
13+
### Yarn
14+
15+
```shell
16+
yarn add @nolebase/vitepress-plugin-inline-link-preview
17+
```
18+
19+
### Pnpm
20+
21+
```shell
22+
pnpm add @nolebase/vitepress-plugin-inline-link-preview
23+
```
24+
25+
## Documentation
26+
27+
Please refer to [Inline Links Previewing](https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-inline-link-preview/) for more information.

‎packages/sidecar-annotations/package.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "@nolebase/sidecar-annotations",
3+
"type": "module",
4+
"version": "1.1.1",
5+
"description": "A VitePress plugin that adds a inline popup to help you preview links while reading.",
6+
"author": {
7+
"name": "Nólëbase",
8+
"email": "nolebase@ayaka.moe",
9+
"url": "https://github.com/nolebase"
10+
},
11+
"license": "MIT",
12+
"homepage": "https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-inline-link-preview/",
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/nolebase/integrations.git",
16+
"directory": "packages/vitepress-plugin-inline-link-preview"
17+
},
18+
"keywords": [
19+
"vitepress",
20+
"nolebase",
21+
"a11y",
22+
"readabilities",
23+
"markdown",
24+
"vitepress-plugin",
25+
"nolebase-integration"
26+
],
27+
"sideEffects": false,
28+
"exports": {
29+
".": {
30+
"types": "./dist/index.d.ts",
31+
"import": "./dist/index.js",
32+
"require": "./dist/index.umd.cjs"
33+
},
34+
"./dist/style.css": "./dist/style.css"
35+
},
36+
"main": "./dist/index.umd.cjs",
37+
"module": "./dist/index.js",
38+
"types": "./dist/index.d.ts",
39+
"files": [
40+
"dist",
41+
"package.json",
42+
"README.md"
43+
],
44+
"scripts": {
45+
"stub": "concurrently \"nr dev\" \"nr emit-types\"",
46+
"dev": "vite build --mode development --watch",
47+
"emit-types": "vue-tsc --declaration --emitDeclarationOnly",
48+
"build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
49+
},
50+
"peerDependencies": {
51+
"vue": ">=3.2.0"
52+
},
53+
"devDependencies": {
54+
"@iconify-json/tabler": "^1.1.92",
55+
"@vitejs/plugin-vue": "^4.3.4",
56+
"@vueuse/core": "^10.4.1",
57+
"less": "^4.2.0",
58+
"unocss": "^0.55.7",
59+
"vite": "^4.4.9",
60+
"vue": "^3.3.4",
61+
"vue-tsc": "^1.8.11"
62+
}
63+
}

‎packages/sidecar-annotations/src/components/CommentAnnotationItem.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import FloatingUserAvatar from './FloatingUserAvatar.vue'
4+
5+
const props = defineProps<{
6+
element: HTMLElement
7+
}>()
8+
9+
const commentUsers = ref<{
10+
id: number
11+
avatarUrl: string
12+
}[]>([
13+
{
14+
id: 1,
15+
avatarUrl: 'https://source.unsplash.com/random',
16+
},
17+
{
18+
id: 1,
19+
avatarUrl: 'https://source.unsplash.com/random',
20+
},
21+
{
22+
id: 1,
23+
avatarUrl: 'https://source.unsplash.com/random',
24+
},
25+
])
26+
27+
</script>
28+
29+
<template>
30+
<Teleport :to="props.element">
31+
<button
32+
class="sidecar-annotations-comments sidecar-annotations-comments-show-comment-btn"
33+
:style="{
34+
width: `${(commentUsers.length - 1) * 1 + 1.5}rem`,
35+
}"
36+
aria-hidden="true"
37+
focusable="false"
38+
absolute
39+
rounded-full flex
40+
h-5
41+
>
42+
<FloatingUserAvatar
43+
v-for="(user, index) of commentUsers"
44+
:key="index"
45+
:src="user.avatarUrl"
46+
:style="{
47+
order: `${index + 1}`,
48+
'margin-left': `${index === 0 ? 0 : -0.5}rem`,
49+
}"
50+
/>
51+
</button>
52+
<!-- <button
53+
:style="boxStyles"
54+
aria-hidden="true"
55+
focusable="false"
56+
fixed z-50
57+
class="sidecar-annotations-controls"
58+
p-1.5
59+
rounded-full
60+
shadow="md hover:lg active:sm"
61+
bg="white"
62+
border="1 solid zinc-100"
63+
items-center justify-center
64+
>
65+
<div class="sidecar-annotations-control-comment i-tabler:message-circle-plus" w-5 h-5 />
66+
</button> -->
67+
</Teleport>
68+
</template>
69+
70+
<style>
71+
.VPDoc .container .content .content-container main .vp-doc > div > * {
72+
position: relative;
73+
}
74+
75+
.VPDoc .container .content .content-container main .vp-doc div[class*='language-'], .vp-block {
76+
overflow-x: unset;
77+
}
78+
79+
.VPDoc .container .content .content-container main .vp-doc > div .sidecar-annotations-comments-show-comment-btn {
80+
top: 0;
81+
left: -60px;
82+
}
83+
84+
.VPDoc .container .content .content-container main .vp-doc > div > h2 .sidecar-annotations-comments-show-comment-btn {
85+
top: 24px;
86+
}
87+
</style>

‎packages/sidecar-annotations/src/components/CommentAnnotations.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { ref, Teleport, onMounted, computed, watchEffect } from 'vue'
3+
4+
import CommentAnnotationItem from './CommentAnnotationItem.vue'
5+
6+
const vpDocElement = ref<HTMLDivElement>()
7+
8+
onMounted(() => {
9+
vpDocElement.value = document.querySelector('.VPDoc .container .content .content-container main .vp-doc > div') as HTMLDivElement
10+
})
11+
12+
const elements = computed<HTMLElement[]>(() => {
13+
if (vpDocElement.value?.children) {
14+
return Array.
15+
from(vpDocElement.value?.children).
16+
filter(element => ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].indexOf(element.tagName) === -1).
17+
map((element) => element as HTMLElement)
18+
}
19+
20+
return [] as HTMLElement[]
21+
})
22+
23+
watchEffect(() => {
24+
console.log(elements.value)
25+
})
26+
</script>
27+
28+
<template>
29+
<Teleport to="body">
30+
<div class="sidecar-annotations-comments-teleport-container">
31+
<CommentAnnotationItem v-for="(element, index) of elements || []" :key="index" :element="element" />
32+
</div>
33+
</Teleport>
34+
</template>

‎packages/sidecar-annotations/src/components/FloatingUserAvatar.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
src: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<img
9+
class="sidecar-annotations-comments user-avatar"
10+
:src="props.src"
11+
w-5 h-5 rounded-full max-w-none p-0.5
12+
bg="white dark:zinc-600"
13+
shadow-md
14+
/>
15+
</template>

0 commit comments

Comments
 (0)