@voidzero-dev/vitepress-theme 4.0.0 → 4.0.2

package/README.md

@@ -1,16 +1,44 @@
 # @voidzero-dev/vitepress-theme
 
-Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and OXC.
+Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and Oxc.
 
-## Installation
+## Publishing package
+
+Make to sure to in latest commit
+
+1. Update version in `package.json`
+2. Add tag locally `git tag vx.y.z` (matching version in package.json)
+3. Push changes `git push origin`
+4. Push to remote `git push origin vx.y.z`
+5. Go to GitHub UI > "Releases" > "Tags" > Click the latest tag > "Create release from tag"
+6. Click "Publish release"
+
+## Developing locally
+
+For local development, linking is required between this theme directory and the downstream VoidZero project directories.
+
+1. Link theme into docs repos
+
+```bash
+# In theme
+pnpm install
+# Make @voidzero-dev/vitepress-theme available for global linking
+pnpm link --global
+
+# In project docs
+pnpm install
+# Link to theme
+pnpm link @voidzero-dev/vitepress-theme
+```
+
+2. Start VitePress server:
 
 ```bash
-npm install @voidzero-dev/vitepress-theme
-# or
-pnpm add @voidzero-dev/vitepress-theme
+# In project docs
+pnpm dev
 ```
 
-If developing locally, run `pnpm link` between the two directories instead.
+The downstream project will automatically reflect theme changes via HMR.
 
 ## Usage
 
@@ -19,21 +47,21 @@ If developing locally, run `pnpm link` between the two directories instead.
 In your `.vitepress/config.ts`:
 
 ```ts
-import { defineConfig } from 'vitepress'
-import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
+import { defineConfig } from "vitepress";
+import { extendConfig } from "@voidzero-dev/vitepress-theme/config";
 
 const config = defineConfig({
   themeConfig: {
-    variant: 'viteplus',  // or 'vite', 'vitest', etc.
+    variant: "viteplus", // or 'vite', 'vitest', etc.
     nav: [
-      { text: 'Home', link: '/' },
+      { text: "Home", link: "/" },
       // ... your navigation
-    ]
-  }
-})
+    ],
+  },
+});
 
 // inject theme specific config
-export default extendConfig(config)
+export default extendConfig(config);
 ```
 
 Note the theme config injects the Tailwind plugin so the downstream project doesn't have to. If the downstream project
@@ -43,14 +71,14 @@ Note the theme config injects the Tailwind plugin so the downstream project does
 In your `.vitepress/theme/index.ts`:
 
 ```ts
-import type { Theme } from 'vitepress'
-import Theme from '@voidzero-dev/vitepress-theme'
-import './styles.css'
+import type { Theme } from "vitepress";
+import Theme from "@voidzero-dev/vitepress-theme";
+import "./styles.css";
 
 export default {
-    extends: BaseTheme as unknown as Theme,
-    Layout
-} satisfies Theme
+  extends: BaseTheme as unknown as Theme,
+  Layout,
+} satisfies Theme;
 ```
 
 In the CSS, import the CSS from theme (which imports tailwind):
@@ -63,7 +91,7 @@ In the CSS, import the CSS from theme (which imports tailwind):
 
 /* Project specific branding colors */
 :root[data-variant="vite"] {
-  --color-brand: #6B1EB9;
+  --color-brand: #6b1eb9;
 }
 
 :root.dark:not([data-theme])[data-variant="vite"],
@@ -72,6 +100,6 @@ In the CSS, import the CSS from theme (which imports tailwind):
 }
 
 :root[data-theme="light"][data-variant="vite"] {
-  --color-brand: #6B1EB9;
+  --color-brand: #6b1eb9;
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -15,7 +15,7 @@
     "*.css"
   ],
   "peerDependencies": {
-    "vitepress": "^2.0.0-alpha.12",
+    "vitepress": "^2.0.0-alpha.15",
     "vue": "^3.5.0"
   },
   "dependencies": {

package/src/components/oss/Header.vue

@@ -4,6 +4,7 @@ import { normalizeLink } from '@vp-support/utils'
 import { ref, computed, onMounted, onUnmounted, watch, nextTick, inject } from 'vue'
 import { getSearchProvider } from '@vp-support/search-config'
 import { themeContextKey } from '../../types/theme-context'
+import { EXTERNAL_URL_RE } from '../../support/vitepress-default/shared-utils'
 
 // Import VitePress header components
 import VPNavBarSearch from '@vp-default/VPNavBarSearch.vue'
@@ -49,6 +50,9 @@ const languageMenuOpen = ref(false)
 // Check if nav item is a dropdown (has children)
 const isDropdown = (item: any) => 'items' in item && Array.isArray(item.items)
 
+// Check if a link is external
+const isExternalLink = (link: string) => EXTERNAL_URL_RE.test(link)
+
 // Toggle accordion for dropdown items
 const toggleAccordion = (index: number) => {
   if (expandedAccordions.value.has(index)) {
@@ -314,7 +318,12 @@ onUnmounted(() => {
                       <!-- Direct link item -->
                       <li v-if="'link' in childItem">
                         <a :href="normalizeLink(childItem.link)" @click="closeMobileMenu"
-                          :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(childItem.link) }"
+                          :target="isExternalLink(childItem.link) ? '_blank' : undefined"
+                          :rel="isExternalLink(childItem.link) ? 'noreferrer' : undefined"
+                          :class="[
+                            { 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(childItem.link) },
+                            { 'vp-external-link-icon': isExternalLink(childItem.link) }
+                          ]"
                           class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white">
                           {{ childItem.text }}
                         </a>
@@ -328,7 +337,12 @@ onUnmounted(() => {
                         <ul class="space-y-1">
                           <li v-for="nestedItem in childItem.items" :key="nestedItem.link || nestedItem.text">
                             <a v-if="nestedItem.link" :href="normalizeLink(nestedItem.link)" @click="closeMobileMenu"
-                              :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(nestedItem.link) }"
+                              :target="isExternalLink(nestedItem.link) ? '_blank' : undefined"
+                              :rel="isExternalLink(nestedItem.link) ? 'noreferrer' : undefined"
+                              :class="[
+                                { 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(nestedItem.link) },
+                                { 'vp-external-link-icon': isExternalLink(nestedItem.link) }
+                              ]"
                               class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white">
                               {{ nestedItem.text }}
                             </a>
@@ -340,7 +354,12 @@ onUnmounted(() => {
                 </template>
                 <!-- Regular link item -->
                 <a v-else-if="navItem.link" :href="normalizeLink(navItem.link)" @click="closeMobileMenu"
-                  :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(navItem.link) }"
+                  :target="isExternalLink(navItem.link) ? '_blank' : undefined"
+                  :rel="isExternalLink(navItem.link) ? 'noreferrer' : undefined"
+                  :class="[
+                    { 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(navItem.link) },
+                    { 'vp-external-link-icon': isExternalLink(navItem.link) }
+                  ]"
                   class="block py-3 px-4 text-lg font-sans text-primary dark:text-white">
                   {{ navItem.text }}
                 </a>

package/src/components/vitepress-default/VPLocalNavOutlineDropdown.vue

@@ -174,6 +174,7 @@ function scrollToTop() {
 .outline {
   padding: 8px 0;
   background-color: var(--vp-c-bg-soft);
+  outline: 1px solid var(--vp-c-border);
 }
 
 .flyout-enter-active {

package/src/oxc.ts

@@ -13,7 +13,7 @@ export default {
     ctx.app.provide(themeContextKey, {
       logoDark,
       logoLight,
-      logoAlt: "Vite",
+      logoAlt: "Oxc",
       footerBg,
       monoIcon,
     });

package/src/rolldown.ts

@@ -13,7 +13,7 @@ export default {
     ctx.app.provide(themeContextKey, {
       logoDark,
       logoLight,
-      logoAlt: "Vite",
+      logoAlt: "Rolldown",
       footerBg,
       monoIcon,
     });

package/src/styles/index.css

@@ -48,17 +48,3 @@
 :root[data-theme="light"] {
   --color-brand: var(--color-electric);
 }
-
-/* Rolldown */
-:root[data-variant="rolldown"] {
-  --color-brand: #D44803;
-}
-
-:root.dark:not([data-theme])[data-variant="rolldown"],
-:root[data-theme="dark"][data-variant="rolldown"] {
-  --color-brand: var(--color-fire);
-}
-
-:root[data-theme="light"][data-variant="rolldown"] {
-  --color-brand: #D44803;
-}

package/src/styles/marketing.css

@@ -82,11 +82,11 @@
         border-left: 5px solid transparent;
     }
 
-    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
+    .dark .wrapper--ticks::before, .dark .tick-left::before {
         border-left-color: var(--color-nickel);
     }
 
-    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
+    .dark .wrapper--ticks::after, .dark .tick-right::after {
         border-right-color: var(--color-nickel);
     }
 

package/src/styles/vitepress-default/components/vp-doc.css

@@ -542,12 +542,12 @@
   display: inline-block;
   margin-top: -1px;
   margin-left: 4px;
-  width: 11px;
-  height: 11px;
+  width: 12px;
+  height: 12px;
   background: currentColor;
   color: var(--vp-c-text-3);
   flex-shrink: 0;
-  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.81802 2.81803L9.18198 2.81803L9.18198 9.18199' stroke='black' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M9.18213 2.81802L2.81817 9.18198' stroke='black' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
   -webkit-mask-image: var(--icon);
   mask-image: var(--icon);
   /*rtl:raw:transform: scaleX(-1);*/

package/src/vitest.ts

@@ -13,7 +13,7 @@ export default {
     ctx.app.provide(themeContextKey, {
       logoDark,
       logoLight,
-      logoAlt: "Vite",
+      logoAlt: "Vitest",
       footerBg,
       monoIcon,
     });