From 1bab8c8c248493564356add8399800942b95dcd8 Mon Sep 17 00:00:00 2001 From: Bissbert <43237892+Bissbert@users.noreply.github.com> Date: Fri, 17 Jul 2026 10:16:46 +0200 Subject: [PATCH] chore(docs): remove internal UI component library page from public docs The /docs/components page was a live style guide for the site's own presentational components (Button/Card/Badge/etc.) - an internal contributor aid, not gemmology product/API documentation, and not a consumable package. Removed the page and its nav.ts entry (which drops it from the sidebar, hub cards, and prev/next ordering). Build 921 pages (was 922), 502 tests pass. --- src/lib/docs/nav.ts | 6 - src/pages/docs/components.astro | 445 -------------------------------- 2 files changed, 451 deletions(-) delete mode 100644 src/pages/docs/components.astro diff --git a/src/lib/docs/nav.ts b/src/lib/docs/nav.ts index d83fce7..2c06411 100644 --- a/src/lib/docs/nav.ts +++ b/src/lib/docs/nav.ts @@ -64,12 +64,6 @@ export const docsNav: DocsNavGroup[] = [ { href: '/docs/cli-options', label: 'CLI Options', description: 'Complete list of command-line flags' }, ], }, - { - title: 'Components', - items: [ - { href: '/docs/components', label: 'UI Components', description: 'Reference for the gemmology.dev UI component library' }, - ], - }, ]; export interface FlatDocsPage extends DocsNavItem { diff --git a/src/pages/docs/components.astro b/src/pages/docs/components.astro deleted file mode 100644 index b348fad..0000000 --- a/src/pages/docs/components.astro +++ /dev/null @@ -1,445 +0,0 @@ ---- -import { DocsLayout } from '../../components/docs'; -import { Button } from '../../components/ui/Button'; -import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../components/ui/Card'; -import { Badge } from '../../components/ui/Badge'; -import { IconBox } from '../../components/ui/IconBox'; -import { SectionHeader } from '../../components/ui/SectionHeader'; -import { Link } from '../../components/ui/Link'; -import { DifficultyBadge } from '../../components/ui/DifficultyBadge'; -import { Table, DataTable, PropertyTable } from '../../components/ui/Table'; - -// Example icon for demos -const exampleIcon = ``; ---- - - -
-
-

UI Component Library

-

- A unified set of React components for consistent styling across gemmology.dev. - All components are available from @/components/ui. -

-
- -
- -
-

Button

-

Primary interaction element with multiple variants and sizes.

- - -
-
-

Variants

-
- - - - -
-
- -
-

Sizes

-
- - - -
-
- -
-

States

-
- - -
-
-
- - -
- 
{`import { Button } from '@/components/ui';
-
-
-
-`}
-
-
- - -
-

Card

-

Container component with optional hover effects and subcomponents.

- -
- - - Basic Card - This is a basic card with header and content. - - -

Card content goes here.

- - - - - - Hover Card - This card has hover effects. - - -

Hover over me to see the effect.

- - - - - -
- -
- 
{`import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui';
-
-
-  
-    Title
-    Description
-  
-  Content
-  Footer
-
-
-// As a link
-Clickable card`}
-
-
- - -
-

Badge

-

Small labels for categorization, status, and metadata.

- - -
-
-

Basic Variants

-
- Default - Crystal - Ruby - Sapphire - Emerald - Amethyst - Outline -
-
- -
-

Crystal System Variants

-
- Cubic - Hexagonal - Trigonal - Tetragonal - Orthorhombic - Monoclinic - Triclinic -
-
- -
-

Sizes

-
- Small - Medium -
-
-
- -
- - -
-

IconBox

-

Styled container for icons with color variants.

- - -
-
-

Variants

-
- - - - - - -
-
- -
-

Sizes

-
- - - -
-
-
- - -
- 
{`import { IconBox } from '@/components/ui';
-
-
-  
-`}
-
-
- - -
-

DifficultyBadge

-

Specialized badge for indicating content difficulty levels.

- - -
- - - -
- - -
- 
{`import { DifficultyBadge } from '@/components/ui';
-
-
-
-`}
-
-
- - -
-

Container

-

Layout wrapper with consistent max-width and padding.

- - -
-
- size="sm" → max-w-3xl -
-
- size="md" → max-w-4xl -
-
- size="lg" → max-w-6xl -
-
- size="xl" → max-w-7xl (default) -
-
- - -
- 
{`import { Container } from '@/components/ui';
-
-
-  Content with max-w-7xl and medium padding
-
-
-
-  Section with max-w-3xl and large padding
-`}
-
-
- - -
-

SectionHeader

-

Consistent section title and description pattern.

- - - - - -
- 
{`import { SectionHeader } from '@/components/ui';
-
-`}
-
-
- - - - - -
-

Table

-

Unified table component with multiple variants.

- - -

DataTable

- - - - -

PropertyTable

- - - -
- 
{`import { Table, DataTable, PropertyTable } from '@/components/ui';
-
-// Simple data table
-
-
-// Key-value property table
-`}
-
-
- - -
-

Design Tokens

-

Core color palette and typography scale.

- - -

Crystal Palette

-
- {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((shade) => ( -
-
- {shade} -
- ))} -
- -

Gem Colors

-
-
-
- Ruby -
-
-
- Sapphire -
-
-
- Emerald -
-
-
- Amethyst -
-
-
- Topaz -
-
- -
- - -
-

Usage Guidelines

-

Best practices for using the component library.

- - -
-

Import from the barrel export

- 
import {'{'} Button, Card, Badge {'}'} from '@/components/ui';
- -

Use components instead of raw Tailwind

-
    -
  • Buttons: Use <Button variant="primary"> not .btn-primary
    • -
  • Cards: Use <Card> not raw border/shadow classes
    • -
  • Badges: Use <Badge variant="crystal"> with the variant prop
    • -
  • Icons: Use <IconBox> not manual flexbox containers
    • -
  • Sections: Use <SectionHeader> for centered titles
    • -
  • Layout: Use <Container> for max-width and padding
    • -
- -

Use the cn utility for custom classes

- 
import {'{'} cn {'}'} from '@/components/ui';
-className={'{'}cn('base-class', conditional && 'conditional-class', className){'}'}
-
- -
-
-
-