feat(sidecar-annotations-comments): added sidecar-annotations

.vscode/settings.json

@@ -31,6 +31,7 @@
   "unocss.root": [
     "./docs",
     "./packages/vitepress-plugin-enhanced-readabilities",
-    "./packages/vitepress-plugin-inline-link-preview"
+    "./packages/vitepress-plugin-inline-link-preview",
+    "./packages/sidecar-annotations"
   ]
 }

docs/.vitepress/plugins/markdownTransform.ts

@@ -0,0 +1,21 @@
+import { relative, resolve } from 'node:path'
+import type { Plugin } from 'vite'
+
+const ROOT = resolve(__dirname, '../../')
+
+export function MarkdownTransform(): Plugin {
+  return {
+    name: 'docs-md-transform',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!id.endsWith('.md'))
+        return null
+
+      // 将 ID 转换为相对路径，便于进行正则匹配
+      id = relative(ROOT, id)
+      code = `${code}\n\n<CommentAnnotation />`
+
+      return code
+    },
+  }
+}

docs/.vitepress/theme/index.ts

@@ -14,10 +14,15 @@ import {
   NolebaseInlineLinkPreviewPlugin,
 } from '@nolebase/vitepress-plugin-inline-link-preview'
 
+import {
+  CommentAnnotation,
+} from '@nolebase/sidecar-annotations'
+
 import 'virtual:uno.css'
 
 import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
 import '@nolebase/vitepress-plugin-inline-link-preview/dist/style.css'
+import '@nolebase/sidecar-annotations/dist/style.css'
 
 import './styles/vars.css'
 import './styles/main.css'
@@ -38,6 +43,7 @@ export const Theme: ThemeConfig = {
   },
   enhanceApp({ app }) {
     app.component('IntegrationCard', IntegrationCard)
+    app.component('CommentAnnotation', CommentAnnotation)
     app.use(NolebaseInlineLinkPreviewPlugin)
     app.provide(NolebaseEnhancedReadabilitiesInjectionKey, {
       layoutSwitch: {

docs/package.json

@@ -14,6 +14,7 @@
     "@iconify-json/octicon": "^1.1.49",
     "@nolebase/markdown-it-bi-directional-links": "workspace:^",
     "@nolebase/markdown-it-element-transform": "workspace:^",
+    "@nolebase/sidecar-annotations": "workspace:^",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-inline-link-preview": "workspace:^",
     "unocss": "^0.55.7",

docs/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
+import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
 
 export default defineConfig(async () => {
   return {
@@ -9,6 +10,7 @@ export default defineConfig(async () => {
     },
     plugins: [
       UnoCSS(),
+      MarkdownTransform(),
     ],
   }
 })

packages/sidecar-annotations/README.md

@@ -0,0 +1,27 @@
+# `@nolebase/vitepress-plugin-inline-link-preview`
+
+A VitePress plugin that adds a inline popup to help you preview links while reading.
+
+## Install
+
+### Npm
+
+```shell
+npm i @nolebase/vitepress-plugin-inline-link-preview
+```
+
+### Yarn
+
+```shell
+yarn add @nolebase/vitepress-plugin-inline-link-preview
+```
+
+### Pnpm
+
+```shell
+pnpm add @nolebase/vitepress-plugin-inline-link-preview
+```
+
+## Documentation
+
+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

@@ -0,0 +1,63 @@
+{
+  "name": "@nolebase/sidecar-annotations",
+  "type": "module",
+  "version": "1.1.1",
+  "description": "A VitePress plugin that adds a inline popup to help you preview links while reading.",
+  "author": {
+    "name": "Nólëbase",
+    "email": "[email protected]",
+    "url": "https://github.com/nolebase"
+  },
+  "license": "MIT",
+  "homepage": "https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-inline-link-preview/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nolebase/integrations.git",
+    "directory": "packages/vitepress-plugin-inline-link-preview"
+  },
+  "keywords": [
+    "vitepress",
+    "nolebase",
+    "a11y",
+    "readabilities",
+    "markdown",
+    "vitepress-plugin",
+    "nolebase-integration"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "stub": "concurrently \"nr dev\" \"nr emit-types\"",
+    "dev": "vite build --mode development --watch",
+    "emit-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2.0"
+  },
+  "devDependencies": {
+    "@iconify-json/tabler": "^1.1.92",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vueuse/core": "^10.4.1",
+    "less": "^4.2.0",
+    "unocss": "^0.55.7",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.11"
+  }
+}

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FloatingUserAvatar from './FloatingUserAvatar.vue'
+
+const props = defineProps<{
+  element: HTMLElement
+}>()
+
+const commentUsers = ref<{
+  id: number
+  avatarUrl: string
+}[]>([
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+])
+
+</script>
+
+<template>
+  <Teleport :to="props.element">
+    <button
+      class="sidecar-annotations-comments sidecar-annotations-comments-show-comment-btn"
+      :style="{
+        width: `${(commentUsers.length - 1) * 1 + 1.5}rem`,
+      }"
+      aria-hidden="true"
+      focusable="false"
+      absolute
+      rounded-full flex
+      h-5
+    >
+      <FloatingUserAvatar
+        v-for="(user, index) of commentUsers"
+        :key="index"
+        :src="user.avatarUrl"
+        :style="{
+          order: `${index + 1}`,
+          'margin-left': `${index === 0 ? 0 : -0.5}rem`,
+        }"
+      />
+    </button>
+    <!-- <button
+      :style="boxStyles"
+      aria-hidden="true"
+      focusable="false"
+      fixed z-50
+      class="sidecar-annotations-controls"
+      p-1.5
+      rounded-full
+      shadow="md hover:lg active:sm"
+      bg="white"
+      border="1 solid zinc-100"
+      items-center justify-center
+    >
+      <div class="sidecar-annotations-control-comment i-tabler:message-circle-plus" w-5 h-5 />
+    </button> -->
+  </Teleport>
+</template>
+
+<style>
+.VPDoc .container .content .content-container main .vp-doc > div > * {
+  position: relative;
+}
+
+.VPDoc .container .content .content-container main .vp-doc div[class*='language-'], .vp-block {
+  overflow-x: unset;
+}
+
+.VPDoc .container .content .content-container main .vp-doc > div .sidecar-annotations-comments-show-comment-btn {
+  top: 0;
+  left: -60px;
+}
+
+.VPDoc .container .content .content-container main .vp-doc > div > h2 .sidecar-annotations-comments-show-comment-btn {
+  top: 24px;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, Teleport, onMounted, computed, watchEffect } from 'vue'
+
+import CommentAnnotationItem from './CommentAnnotationItem.vue'
+
+const vpDocElement = ref<HTMLDivElement>()
+
+onMounted(() => {
+  vpDocElement.value = document.querySelector('.VPDoc .container .content .content-container main .vp-doc > div') as HTMLDivElement
+})
+
+const elements = computed<HTMLElement[]>(() => {
+  if (vpDocElement.value?.children) {
+    return Array.
+      from(vpDocElement.value?.children).
+      filter(element => ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].indexOf(element.tagName) === -1).
+      map((element) => element as HTMLElement)
+  }
+
+  return [] as HTMLElement[]
+})
+
+watchEffect(() => {
+  console.log(elements.value)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="sidecar-annotations-comments-teleport-container">
+      <CommentAnnotationItem v-for="(element, index) of elements || []" :key="index" :element="element" />
+    </div>
+  </Teleport>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  src: string
+}>()
+</script>
+
+<template>
+  <img
+    class="sidecar-annotations-comments user-avatar"
+    :src="props.src"
+    w-5 h-5 rounded-full max-w-none p-0.5
+    bg="white dark:zinc-600"
+  shadow-md
+  />
+</template>

packages/sidecar-annotations/src/index.ts

@@ -0,0 +1,7 @@
+import CommentAnnotation from './components/CommentAnnotations.vue'
+
+import 'virtual:uno.css'
+
+export {
+  CommentAnnotation,
+}

packages/sidecar-annotations/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": [
+    "**/dist/**",
+    "./uno.config.ts",
+    "./vite.config.ts"
+  ],
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.vue",
+    "**/*.tsx"
+  ],
+  "compilerOptions": {
+    "declaration": false,
+    "composite": false,
+    "outDir": "./dist",
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

packages/sidecar-annotations/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

packages/sidecar-annotations/uno.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
+
+export default defineConfig({
+  shortcuts: [],
+  presets: [
+    presetUno({
+      dark: 'class',
+    }),
+    presetAttributify(),
+    presetIcons({
+      prefix: 'i-',
+      scale: 1.2, // size: 1.2 rem
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+        'min-width': '1.2rem',
+      },
+      warn: true,
+    }),
+  ],
+})