docs: initial component examples (#123)

Co-authored-by: Claude <[email protected]>
Co-authored-by: Darius Cepulis <[email protected]>

Author: 3 people

pnpm-lock.yaml

@@ -94,22 +94,22 @@ See [content.config.ts](src/content.config.ts) for the blog collection definitio
 The most sophisticated part of the website is the documentation system, which adapts content based on:
 
 - **Framework** (HTML, React)
-- **Styling approach** (CSS, Tailwind)
+- **Styling approach** (CSS, more coming soon)
 
 ##### URL Structure
 
 ```text
 /docs/framework/{framework}/style/{style}/{slug}/
 ```
 
-Example: `/docs/framework/react/style/tailwind/concepts/state-management/`
+Example: `/docs/framework/react/style/css/concepts/state-management/`
 
 ##### Framework/Style Matrix
 
 | Framework | Available Styles |
 | --------- | ---------------- |
-| HTML      | css, tailwind    |
-| React     | css, tailwind    |
+| HTML      | css              |
+| React     | css              |
 
 ##### Content Filtering
 

website/README.md

@@ -21,6 +21,7 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@nanostores/react": "^1.0.0",
     "@tailwindcss/vite": "^4.1.14",
+    "@videojs/html": "workspace:*",
     "@videojs/react": "workspace:*",
     "astro": "^5.14.4",
     "clsx": "^2.1.1",

website/package.json

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps } from 'astro/types';
+import { Code } from 'astro:components';
+import Pre from './typography/Pre.astro';
+import { twMerge } from 'tailwind-merge';
+
+interface Props extends Omit<ComponentProps<typeof Code>, 'class'> {
+  maxWidth?: ComponentProps<typeof Pre>['maxWidth'];
+  wrapperClass?: ComponentProps<typeof Pre>['class'];
+  codeClass?: ComponentProps<typeof Code>['class'];
+}
+
+const { code, lang, maxWidth = true, themes, wrapperClass, codeClass, style, ...codeProps } = Astro.props;
+---
+
+<Pre as="div" maxWidth={maxWidth} class={wrapperClass}>
+  <Code
+    code={code}
+    lang={lang}
+    themes={themes ?? {
+      light: 'gruvbox-light-hard',
+      dark: 'gruvbox-dark-medium',
+    }}
+    class={twMerge('font-mono text-code', codeClass)}
+    style={style ? `${style};` : '' + 'overflow-x:visible!important;background:none!important'}
+    {...codeProps}
+  />
+</Pre>

website/src/components/ServerCode.astro

@@ -0,0 +1,7 @@
+---
+// Simple container component for constraining content width in documentation
+---
+
+<div class="w-full max-w-3xl mx-auto">
+  <slot />
+</div>

website/src/components/docs/Container.astro

@@ -1,5 +1,3 @@
 // video.js 8
 export const PLAYBACK_ID = 'UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA';
 export const THUMB_TIME = 0;
-// player.style
-// export const PLAYBACK_ID = 'fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ';

website/src/components/home/config.ts

@@ -14,11 +14,10 @@ const { as: Tag = 'pre', maxWidth = true, class: className, style: _style, ...pr
 <div class={twMerge(clsx('relative my-6 group', maxWidth && 'max-w-3xl mx-auto'))}>
   <Tag
     class={twMerge(
-      'rounded-lg p-6 overflow-x-auto overflow-y-scroll max-h-96 border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110',
+      'rounded-lg p-6 overflow-scroll max-h-96 border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110',
       className,
     )}
-    {...props}
+    {/* weird formatting to prevent leading whitespace */}
+    {...props}><slot /></Tag
   >
-    <slot />
-  </Tag>
 </div>

website/src/components/typography/Pre.astro

@@ -2,7 +2,17 @@ import type { Sidebar } from '@/types/docs';
 
 export const sidebar: Sidebar = [
   { sidebarLabel: 'Writing guides', slug: 'how-to/write-guides', devOnly: true },
-  { slug: 'concepts/coming-soon' },
+  { sidebarLabel: 'Getting started', contents: [{ slug: 'concepts/under-construction' }] },
+  {
+    sidebarLabel: 'Components',
+    contents: [
+      { slug: 'resources/play-button' },
+      { slug: 'resources/mute-button' },
+      { slug: 'resources/fullscreen-button' },
+      { slug: 'resources/time-slider' },
+      { slug: 'resources/volume-slider' },
+    ],
+  },
   // {
   //   sidebarLabel: 'Getting started',
   //   contents: [

website/src/config/docs/sidebar.ts

@@ -1,5 +1,6 @@
 import { file } from 'astro/loaders';
 import { defineCollection, reference, z } from 'astro:content';
+import { SUPPORTED_FRAMEWORKS } from './types/docs';
 import { defaultGitService } from './utils/gitService';
 import { globWithParser } from './utils/globWithParser';
 
@@ -80,6 +81,7 @@ const docs = defineCollection({
     title: z.string(),
     description: z.string(),
     updatedDate: z.coerce.date().optional(),
+    frameworkTitle: z.record(z.enum(SUPPORTED_FRAMEWORKS as [string, ...string[]]), z.string()).optional(),
   }),
 });