Merge branch 'main' of https://github.com/rzx007/nav

rzx007 · Jan 20, 2024 · 0326e9e · 0326e9e
2 parents 916fa15 + 07c5466
commit 0326e9e
Show file tree

Hide file tree

Showing 11 changed files with 538 additions and 238 deletions.
diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts
@@ -48,6 +48,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: '已同步方式实现事件监听', link: '/html-dom/async-addEventListener'},
         { text: '使用 vue 指令实现一个元素平滑上升的效果', link: '/html-dom/vue-slide-smooth' },
         { text: '创建一个简易的http-server', link: '/html-dom/create-http-server' },
+        { text: '简单的svg转png', link: '/html-dom/convert-svg-to-png' },
       ]
     }
   ]

diff --git a/docs/code/demo/AsyncAddlistener.vue b/docs/code/demo/AsyncAddlistener.vue
@@ -25,7 +25,7 @@ onMounted(() => {
     const btn = getElement('#btn')
     while (1) {
       await btn.waitClick;
-      console.log('click')
+      alert('click')
     }
   })()
 })

diff --git a/docs/code/demo/SvgToPNG.ts b/docs/code/demo/SvgToPNG.ts
@@ -0,0 +1,26 @@
+function svgToPng(svg: string, callback?: (imgData: string) => void) {
+  const url = getSvgUrl(svg)
+  svgUrlToPng(url, (imgData: string) => {
+    callback && callback(imgData)
+    URL.revokeObjectURL(url)
+  })
+}
+
+function getSvgUrl(svg: BlobPart) {
+  return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }))
+}
+
+function svgUrlToPng(svgUrl: string, callback: (imgData: string) => void) {
+  const svgImage = document.createElement('img')
+  document.body.appendChild(svgImage)
+  svgImage.onload = function () {
+    const canvas = document.createElement('canvas')
+    canvas.width = svgImage.clientWidth
+    canvas.height = svgImage.clientHeight
+    const canvasCtx = canvas.getContext('2d')
+    canvasCtx!.drawImage(svgImage, 0, 0)
+    const imgData = canvas.toDataURL('image/png')
+    callback(imgData)
+  }
+  svgImage.src = svgUrl
+}
diff --git a/docs/html-dom/convert-svg-to-png.md b/docs/html-dom/convert-svg-to-png.md
@@ -0,0 +1,13 @@
+# svg 转 png
+
+主要思路:
+
+- 将 svg 转为`Blob`，
+- 然后使用`URL.createObjectURL`创建一个临时的 URL，
+- 然后使用`<img>`标签加载这个 URL，
+- 最后使用`<canvas>`标签将图片绘制到画布上，
+- 最后使用`canvas.toDataURL`将画布上的内容转为 base64 格式的图片。
+
+<<< @/code/demo/SvgToPNG.ts{ts}
+<!-- 添加一张图片 -->
+<img src="/huggingface_logo-noborder.svg" alt="svg 转 png" height="200px" />
diff --git a/docs/navs/data.ts b/docs/navs/data.ts
@@ -38,6 +38,11 @@ export const NAV_DATA: NavData[] = [
         icon: 'https://acd-assets.alicdn.com/acd_work/tongyi/favicon.ico',
         title: '阿里通义',
         link: 'https://tongyi.aliyun.com/'
+      },
+      {
+        icon: 'https://chat-preview.lobehub.com/_next/image?url=https%3A%2F%2Fregistry.npmmirror.com%2F%40lobehub%2Fassets-logo%2F1.1.0%2Ffiles%2Fassets%2Flogo-3d.webp&w=48&q=75',
+        title: 'LobeChat',
+        link: 'https://chat-preview.lobehub.com/welcome'
       }
     ]
   },
@@ -87,7 +92,7 @@ export const NAV_DATA: NavData[] = [
         link: 'https://element-plus.org'
       },
       {
-        icon: 'https://www.naiveui.com/assets/naivelogo-93278402.svg',
+        icon: '/icons/naivelogo-XQ1U1Js8.svg',
         title: 'Naive UI',
         desc: '一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，快有点意思',
         link: 'https://www.naiveui.com/zh-CN/os-theme'
@@ -157,6 +162,12 @@ export const NAV_DATA: NavData[] = [
         desc: 'Focused on web standards and modern web app UX, you’re simply going to build better websites',
         link: 'https://remix.run/'
       },
+      {
+        icon: 'https://docs.pmnd.rs/apple-touch-icon.png',
+        title: 'Pmndrs.docs',
+        desc: '一个包含集合react库的的导航站, 包括Zustand, Valtio, Jotai等',
+        link: 'https://docs.pmnd.rs/'
+      },
       {
         icon: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
         title: 'UmiJS',
@@ -175,6 +186,24 @@ export const NAV_DATA: NavData[] = [
         desc: '构建移动 WEB 应用程序的 React 组件库',
         link: 'https://mobile.ant.design'
       },
+      {
+        icon: '/icons/mui.svg',
+        title: 'Material UI',
+        desc: '基于 Google Material Design 设计语言的 React 组件库',
+        link: 'https://mui.com/'
+      },
+      {
+        icon: '/icons/mantine.svg',
+        title: 'Mantine UI',
+        desc: '一套功能齐全的 React 组件库',
+        link: 'https://mantine.dev/'
+      },
+      {
+        icon: 'https://ui.shadcn.com/apple-touch-icon.png',
+        title: 'shadcn/ui',
+        desc: '设计精美的组件,你可以直接复制和粘贴到你的应用中',
+        link: 'https://ui.shadcn.com/'
+      },
       {
         icon: 'https://docs.pmnd.rs/apple-touch-icon.png',
         title: 'Zustand',
@@ -213,7 +242,23 @@ export const NAV_DATA: NavData[] = [
       }
     ]
   },
-
+  {
+    title: '有意思的库',
+    items: [
+      {
+        icon: 'https://swiperjs.com/images/swiper-logo.svg',
+        title: 'Swiper',
+        desc: '最现代的移动触摸Swiper',
+        link: 'https://swiperjs.com/'
+      },
+      {
+        icon: 'https://auto-animate.formkit.com/assets/favicon.6d15a86f.ico',
+        title: 'AutoAnimate',
+        desc: 'AutoAnimate 是一个零配置的插入式动画实用程序， React、Solid、Vue、Svelte 或任何其他框架。',
+        link: 'https://auto-animate.formkit.com/'
+      }
+    ]
+  },
   {
     title: 'JavaScript 框架类库',
     items: [
@@ -479,6 +524,12 @@ export const NAV_DATA: NavData[] = [
         desc: 'Babel 是一个 JavaScript 编译器',
         link: 'https://www.babeljs.cn'
       },
+      {
+        icon: '',
+        title: 'tsup',
+        desc: 'Bundle your TypeScript library with no config, powered by esbuild.',
+        link: 'https://tsup.egoist.dev/'
+      },
       {
         icon: 'https://esbuild.github.io/favicon.svg',
         title: 'esbuild',
@@ -543,11 +594,47 @@ export const NAV_DATA: NavData[] = [
         desc: 'IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一 SVG 源文件变换出多种主题， 具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数人都能够选择适合自己的风格图标',
         link: 'https://iconpark.oceanengine.com/official'
       },
+      {
+        icon: '/icons/iconify.png',
+        title: 'Iconify',
+        desc: '一个开源的图标集合和图标工具',
+        link: 'https://iconify.design/'
+      },
+      {
+        icon: 'https://icones.js.org/favicon.svg',
+        title: 'Icônes',
+        desc: '基于 Iconify 的图标浏览器',
+        link: 'https://icones.js.org/'
+      },
+      {
+        icon: 'https://heroicons.com/_next/static/media/favicon-32x32.2a23e45f.png',
+        title: 'heroicons',
+        desc: 'Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.',
+        link: 'https://heroicons.com/'
+      },
+      {
+        icon: 'https://lucide.dev/logo.light.svg',
+        title: 'lucide',
+        desc: 'Beautiful & consistent icons',
+        link: 'https://lucide.dev/'
+      },
+      {
+        icon: 'https://svgl.app/images/logo.svg',
+        title: 'svgl',
+        desc: 'A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS',
+        link: 'https://svgl.app/'
+      },
       {
         icon: 'https://emoji.muan.co/appicon.png',
         title: 'Emoji searcher',
         desc: 'Emoji 表情大全',
-        link: ''
+        link: 'https://emoji.muan.co/'
+      },
+      {
+        icon: 'https://gitmoji.dev/static/apple-icon-144x144.png',
+        title: 'gitmoji',
+        desc: '可以在 git 中使用的 emoji 表情',
+        link: 'https://gitmoji.dev/'
       }
     ]
   },

diff --git a/docs/public/huggingface_logo-noborder.svg b/docs/public/huggingface_logo-noborder.svg
diff --git a/docs/public/icons/iconify.png b/docs/public/icons/iconify.png
diff --git a/docs/public/icons/mantine.svg b/docs/public/icons/mantine.svg
diff --git a/docs/public/icons/mui.svg b/docs/public/icons/mui.svg
diff --git a/docs/public/icons/naivelogo-XQ1U1Js8.svg b/docs/public/icons/naivelogo-XQ1U1Js8.svg