From a629f91616b120974845e9713a023bd8ab413bb4 Mon Sep 17 00:00:00 2001 From: Austin McShan Date: Sun, 1 Feb 2026 12:44:44 -0600 Subject: [PATCH 1/5] feat(docs): add showcase pages --- .../components/navigation/MobileMenu.astro | 10 + .../components/navigation/SidebarGroup.astro | 10 + apps/docs/src/data/navigation.ts | 8 + apps/docs/src/pages/showcase/article.astro | 485 +++++++++++++ apps/docs/src/pages/showcase/dashboard.astro | 644 ++++++++++++++++++ apps/docs/src/pages/showcase/landing.astro | 636 +++++++++++++++++ apps/docs/src/styles/theme.css | 12 +- 7 files changed, 1799 insertions(+), 6 deletions(-) create mode 100644 apps/docs/src/pages/showcase/article.astro create mode 100644 apps/docs/src/pages/showcase/dashboard.astro create mode 100644 apps/docs/src/pages/showcase/landing.astro diff --git a/apps/docs/src/components/navigation/MobileMenu.astro b/apps/docs/src/components/navigation/MobileMenu.astro index 1843f7f..6650abc 100644 --- a/apps/docs/src/components/navigation/MobileMenu.astro +++ b/apps/docs/src/components/navigation/MobileMenu.astro @@ -51,15 +51,19 @@ const navigation = getNavigation(base); const isActive = item.href === currentPath || item.href === currentPath.replace(/\/$/, ''); + const isShowcase = item.href.includes('/showcase/'); return ( {item.label} + {isShowcase && } ); })} @@ -93,6 +97,12 @@ const navigation = getNavigation(base); flex-direction: column; gap: var(--s-space-1); } + + .external-icon { + font-size: 0.75em; + opacity: 0.6; + margin-left: var(--s-space-1); + } + + + + {siteTitle} + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + diff --git a/apps/docs/src/pages/showcase/article.astro b/apps/docs/src/pages/showcase/article.astro index 7be575f..9a54fa8 100644 --- a/apps/docs/src/pages/showcase/article.astro +++ b/apps/docs/src/pages/showcase/article.astro @@ -1,5 +1,5 @@ --- -import BaseLayout from '../../components/layout/BaseLayout.astro'; +import ShowcaseLayout from '../../components/layout/ShowcaseLayout.astro'; const currentYear = new Date().getFullYear(); @@ -32,8 +32,8 @@ color: oklch( );`; --- - @@ -79,7 +79,7 @@ color: oklch( Author
Alexandra Chen - January 15, 2025 + January 15, 2025
@@ -278,7 +278,7 @@ color: oklch( -

OKLCH: Perceptually Uniform Color

+

OKLCH: Perceptually Uniform Color

Traditional color models like RGB and HSL have a fundamental problem: they don't match human @@ -158,7 +158,7 @@ color: oklch( programmatically adapted without manual adjustment.

-

Native CSS Functions

+

Native CSS Functions

Perhaps the most exciting development is the emergence of native CSS functions through the @@ -190,7 +190,7 @@ color: oklch( adapts to any background you throw at it.

-

The Zero-Runtime Future

+

The Zero-Runtime Future

These advancements point toward a future where CSS handles much of what currently requires @@ -215,7 +215,7 @@ color: oklch( interactivity and state management.

-

Practical Implications

+

Practical Implications

For teams adopting these features today, the transition requires some adjustment. Traditional @@ -236,7 +236,7 @@ color: oklch( manipulation and beyond. -

Looking Ahead

+

Looking Ahead

The CSS Working Group continues to push boundaries. Proposals for scroll-driven animations, @@ -279,13 +279,13 @@ color: oklch(