@voidzero-dev/vitepress-theme 3.3.1 → 4.0.1

package/README.md

@@ -45,9 +45,33 @@ In your `.vitepress/theme/index.ts`:
 ```ts
 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
 ```
+
+In the CSS, import the CSS from theme (which imports tailwind):
+
+```css
+/* styles.css */
+@import "@voidzero-dev/vitepress-theme/src/styles/index.css";
+
+@source "./**/*.vue";
+
+/* Project specific branding colors */
+:root[data-variant="vite"] {
+  --color-brand: #6B1EB9;
+}
+
+:root.dark:not([data-theme])[data-variant="vite"],
+:root[data-theme="dark"][data-variant="vite"] {
+  --color-brand: var(--color-vite);
+}
+
+:root[data-theme="light"][data-variant="vite"] {
+  --color-brand: #6B1EB9;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.3.1",
+  "version": "4.0.1",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",

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/index.ts

@@ -15,8 +15,6 @@
 
 // Unified design system - single import
 // Contains: tokens → base → docs → marketing (in that order)
-import "./styles/index.css";
-
 import type { Theme } from "vitepress";
 import { watch } from "vue";
 

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,60 +48,3 @@
 :root[data-theme="light"] {
   --color-brand: var(--color-electric);
 }
-
-/* Vite */
-:root[data-variant="vite"] {
-  --color-brand: #6B1EB9;
-}
-
-:root.dark:not([data-theme])[data-variant="vite"],
-:root[data-theme="dark"][data-variant="vite"] {
-  --color-brand: var(--color-vite);
-}
-
-/* Forced light mode brand for Vite */
-:root[data-theme="light"][data-variant="vite"] {
-  --color-brand: #6B1EB9;
-}
-
-/* Vitest */
-:root[data-variant="vitest"] {
-  --color-brand: #008039;
-}
-
-:root.dark:not([data-theme])[data-variant="vitest"],
-:root[data-theme="dark"][data-variant="vitest"] {
-  --color-brand: var(--color-zest);
-}
-
-:root[data-theme="light"][data-variant="vitest"] {
-  --color-brand: #008039;
-}
-
-/* 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;
-}
-
-/* OXC */
-:root[data-variant="oxc"] {
-  --color-brand: #0D6A73;
-}
-
-:root.dark:not([data-theme])[data-variant="oxc"],
-:root[data-theme="dark"][data-variant="oxc"] {
-  --color-brand: var(--color-aqua);
-}
-
-:root[data-theme="light"][data-variant="oxc"] {
-  --color-brand: #0D6A73;
-}

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,
     });