Update site dependencies & small fixes (#1699)

* update styling

* Update vitepress

docs/.vitepress/lib/createCodeExamples.ts

@@ -1,41 +1,29 @@
 import {
-  BUNDLED_LANGUAGES,
-  type IThemeRegistration
-} from 'shiki'
+  bundledLanguages,
+  type ThemeRegistration
+} from 'shikiji'
 import {
   getHighlighter,
-} from 'shiki-processor'
+} from 'shikiji'
+
 
 type CodeExampleType = {
   title: string,
-  lang: string,
-  codes: {
-    language?: string,
-    code: string,
-    metastring?: string,
-  }[],
+  language: string,
+  code: string,
 }[]
 
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      lang: 'html',
+      language: 'html',
       title: 'HTML',
-      codes: [
-        {
-          language: 'html',
-          code: `<i data-lucide="Name"></i>
-`,
-        },
-      ],
+      code: `<i data-lucide="Name"></i>`
     },
     {
-      lang: 'tsx',
+      language: 'tsx',
       title: 'React',
-      codes: [
-        {
-          language: 'tsx',
-          code: `import { PascalCase } from 'lucide-react';
+      code: `import { PascalCase } from 'lucide-react';
 
 const App = () => {
   return (
@@ -45,17 +33,11 @@ const App = () => {
 
 export default App;
 `,
-
-        },
-      ],
     },
     {
-      lang: 'vue',
-      title: 'Vue 3',
-      codes: [
-        {
-          language: 'vue',
-          code: `<script setup>
+      language: 'vue',
+      title: 'Vue',
+      code: `<script setup>
   import { PascalCase } from 'lucide-vue-next';
 </script>
 
@@ -63,33 +45,21 @@ export default App;
   <PascalCase />
 </template>
 `,
-
-        },
-      ],
     },
     {
-      lang: 'svelte',
+      language: 'svelte',
       title: 'Svelte',
-      codes: [
-        {
-          language: 'svelte',
-          code: `<script>
+      code: `<script>
 import { PascalCase } from 'lucide-svelte';
 </script>
 
 <PascalCase />
 `,
-
-        },
-      ],
     },
     {
-      lang: 'preact',
+      language: 'tsx',
       title: 'Preact',
-      codes: [
-        {
-          language: 'tsx',
-          code: `import { PascalCase } from 'lucide-preact';
+      code: `import { PascalCase } from 'lucide-preact';
 
 const App = () => {
   return (
@@ -99,17 +69,11 @@ const App = () => {
 
 export default App;
 `,
-
-        },
-      ],
     },
     {
-      lang: 'solid',
+      language: 'tsx',
       title: 'Solid',
-      codes: [
-        {
-          language: 'tsx',
-          code: `import { PascalCase } from 'lucide-solid';
+      code: `import { PascalCase } from 'lucide-solid';
 
 const App = () => {
   return (
@@ -119,17 +83,11 @@ const App = () => {
 
 export default App;
 `,
-
-        },
-      ],
     },
     {
-      lang: 'angular',
+      language: 'tsx',
       title: 'Angular',
-      codes: [
-        {
-          language: 'tsx',
-          code: `// app.module.ts
+      code: `// app.module.ts
 import { LucideAngularModule, PascalCase } from 'lucide-angular';
 
 @NgModule({
@@ -141,54 +99,38 @@ import { LucideAngularModule, PascalCase } from 'lucide-angular';
 // app.component.html
 <lucide-icon name="Name"></lucide-icon>
 `,
-        },
-      ],
     },
     {
-      lang: 'html',
+      language: 'html',
       title: 'Icon Font',
-      codes: [
-        {
-          language: 'html',
-          code: `<style>
+      code: `<style>
 @import ('~lucide-static/font/Lucide.css');
 </style>
 
 <div class="icon-Name"></div>
 `,
-        },
-      ],
-    },
-    {
-      lang: 'dart',
-      title: 'Flutter',
-      codes: [
-        {
-          language: 'dart',
-          code: `Icon(LucideIcons.Name);
-`,
-        },
-      ],
-    },
+    }
   ]
 }
 
 export type ThemeOptions =
-  | IThemeRegistration
-  | { light: IThemeRegistration; dark: IThemeRegistration }
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration }
 
 const highLightCode = async (code: string, lang: string, active?: boolean) => {
   const highlighter = await getHighlighter({
-    themes: ['material-theme-palenight'],
-    langs: [...BUNDLED_LANGUAGES],
-    processors: []
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages)
   })
 
   const highlightedCode = highlighter.codeToHtml(code, {
     lang,
-    // lineOptions,
-    theme: 'material-theme-palenight'
-  }).replace('background-color: #292D3E', '')
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark'
+    },
+    defaultColor: false
+  }).replace('shiki-themes', 'shiki-themes vp-code')
 
   return `<div class="language-${lang} ${active ? 'active' : ''}">
   <button title="Copy Code" class="copy"></button>
@@ -201,16 +143,15 @@ const highLightCode = async (code: string, lang: string, active?: boolean) => {
 export default async function createCodeExamples() {
   const codes = getIconCodes();
 
-  const codeExamplePromises = codes.map(async (codeTemplate, index) => {
-    const { title, lang, codes } = codeTemplate;
+  const codeExamplePromises = codes.map(async ({ title, language, code }, index) => {
     const isFirst = index === 0;
 
-    const code = await highLightCode(codes[0].code, codes[0].language || lang, isFirst);
+    const codeString = await highLightCode(code, language, isFirst);
 
     return {
       title,
-      language: codes[0].language || lang,
-      code,
+      language: language,
+      code: codeString,
     };
   })
 

docs/.vitepress/theme/components/PageContainer.vue

@@ -7,6 +7,6 @@
 <style scoped>
 .container {
   padding: 32px;
-  padding-top: 48px;
+  padding-top: 33px;
 }
 </style>

docs/.vitepress/theme/components/base/ColorPicker.vue

@@ -54,7 +54,7 @@ const value = computed({
   flex-shrink: 0;
 }
 .color-picker {
-  background: var(--color-picker-bg, var(--vp-c-bg-soft));
+  background: var(--color-picker-bg, var(--vp-c-bg-alt));
   border-radius: 8px;
   color: var(--vp-c-text-2);
   padding: 4px 8px;
@@ -71,10 +71,10 @@ const value = computed({
 .color-input-text {
   width: 100%;
   height: 100%;
-  padding: 0 8px;
+  padding: 0 0 0 8px;
   border: none;
   background: transparent;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
   font-size: 14px;
   text-align: left;
   border-radius: 8px;

docs/.vitepress/theme/components/base/RangeSlider.vue

@@ -49,7 +49,7 @@ const percentage = computed<string>(() => `${((Number(props.modelValue) - props.
     width: 100%;
     line-height: 10px;
     height: 20px;
-    --bar-color: var(--slider-bar-color, var(--vp-c-bg-soft));
+    --bar-color: var(--slider-bar-color, var(--vp-input-switch-bg-color));
 }
 
 .slider:hover input{

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -67,7 +67,10 @@ watch(absoluteStrokeWidth, (enabled) => {
           Lucide has a lot of customization options to match the icons with your UI.
         </p>
 
-        <div class="customizer">
+        <div
+          class="customizer"
+          style="--color-picker-bg: var(--vp-input-switch-bg-color)"
+        >
           <InputField
             id="icon-color"
             label="Color"

docs/package.json

@@ -30,7 +30,7 @@
     "nitropack": "npm:nitropack-edge@latest",
     "node-fetch": "2",
     "rollup-plugin-copy": "^3.4.0",
-    "vitepress": "1.0.0-rc.10"
+    "vitepress": "1.0.0-rc.30"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
@@ -50,8 +50,7 @@
     "react-dom": "^18.2.0",
     "sandpack-vue3": "^3.1.6",
     "semver": "^7.5.2",
-    "shiki": "^0.14.2",
-    "shiki-processor": "^0.1.3",
+    "shikiji": "^0.7.4",
     "simple-git": "^3.18.0",
     "sitemap": "^7.1.1",
     "svg-pathdata": "^6.0.3",