diff --git a/.gitignore b/.gitignore index 7f5c4d66..b1171dc8 100644 --- a/.gitignore +++ b/.gitignore @@ -60,4 +60,6 @@ Temporary Items .apdisk test/fixtures/basic/.data -playground/.data \ No newline at end of file +playground/.data +.vercel +.env*.local diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 00000000..880ed04b --- /dev/null +++ b/.vercelignore @@ -0,0 +1,7 @@ +.nuxt +.output +.vercel/output +docs/.nuxt +docs/.output +docs/.vercel +node_modules/.cache/nuxt diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css index b34ba01f..76ae10f7 100644 --- a/docs/app/assets/css/main.css +++ b/docs/app/assets/css/main.css @@ -55,11 +55,19 @@ pre, code { /* Code preview styling */ .code-preview { - background: linear-gradient(to top right, var(--color-stone-100), var(--color-stone-200)); + background: #1b1917; + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 16px 36px rgba(28, 25, 23, 0.18); } .dark .code-preview { - background: linear-gradient(to top right, rgba(28, 25, 23, 0.9), rgba(0, 0, 0, 0.9)); + background: #181716; + border-color: rgba(255, 255, 255, 0.14); + box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36); +} + +.editor-toolbar { + background: rgba(255, 255, 255, 0.035); } /* Traffic lights for code preview */ @@ -91,9 +99,13 @@ pre, code { border: none !important; padding: 0 !important; margin: 0 !important; + color: #f7f2ec; font-size: 0.75rem; border-radius: 0 !important; line-height: 1.5rem !important; + min-width: max-content; + padding-right: 1rem !important; + text-align: left; } @media (min-width: 640px) { @@ -106,7 +118,8 @@ pre, code { background: transparent !important; } -.hero-code .shiki { +.hero-code .shiki, +.hero-code .shiki span { background: transparent !important; } diff --git a/docs/app/components/app/AppHeader.vue b/docs/app/components/app/AppHeader.vue index 29a6c81f..34ae68ed 100644 --- a/docs/app/components/app/AppHeader.vue +++ b/docs/app/components/app/AppHeader.vue @@ -3,6 +3,7 @@ const appConfig = useAppConfig() const site = useSiteConfig() const route = useRoute() const { sidebarOpen, toggle: toggleSidebar } = useDocusSidebar() +const { open: searchOpen } = useContentSearch() const isDocsPage = computed(() => route.path.startsWith('/getting-started') || route.path.startsWith('/core-concepts') @@ -19,7 +20,7 @@ const navLinks = [ @@ -93,7 +102,8 @@ const navLinks = [ color="neutral" variant="ghost" :icon="open ? 'i-lucide-x' : 'i-lucide-menu'" - class="lg:hidden" + class="mobile-header-action lg:hidden" + :ui="{ leadingIcon: 'mobile-header-icon' }" @click="toggle" /> @@ -119,17 +129,63 @@ const navLinks = [ .header-logo { display: flex; align-items: center; - gap: 0.75rem; - width: var(--fd-sidebar-width, 268px); + gap: 0.625rem; + width: 8.25rem; height: 100%; - padding-inline: 1.25rem; + padding-inline: 1rem; border-right: 1px solid var(--ui-border); box-sizing: border-box; } +@media (min-width: 640px) { + .header-logo { + gap: 0.75rem; + width: var(--fd-sidebar-width, 268px); + padding-inline: 1.25rem; + } +} + @media (min-width: 1280px) { .header-logo { width: 286px; } } + +:deep(.mobile-header-action) { + display: grid !important; + place-items: center !important; + flex: 0 0 3.5rem; + width: 3.5rem !important; + min-width: 3.5rem !important; + height: 3.5rem !important; + padding: 0 !important; + border-radius: 0 !important; + gap: 0 !important; + color: var(--ui-text-muted); + transition: background-color 0.15s ease, color 0.15s ease; +} + +:deep(.mobile-header-action .mobile-header-icon), +:deep(.mobile-header-action > span), +:deep(.mobile-header-action > svg) { + display: block; + width: 1.375rem; + height: 1.375rem; + margin: 0; + flex: none; +} + +:deep(.mobile-header-action:hover) { + color: var(--ui-text); + background: color-mix(in srgb, var(--ui-bg-elevated) 70%, transparent); +} + +:deep(.mobile-header-action:focus-visible) { + outline: 2px solid var(--ui-primary); + outline-offset: -2px; +} + +:deep(.mobile-header-action + .mobile-header-action) { + border-left: 1px solid var(--ui-border); +} diff --git a/docs/app/components/content/landing/LandingFeatures.vue b/docs/app/components/content/landing/LandingFeatures.vue index f1ffeaa5..f5712994 100644 --- a/docs/app/components/content/landing/LandingFeatures.vue +++ b/docs/app/components/content/landing/LandingFeatures.vue @@ -6,13 +6,13 @@ const items = features.items as { title: string, description: string, icon: stri