diff --git a/sandworm/app/components/content/page.tsx b/sandworm/app/components/content/page.tsx new file mode 100644 index 0000000..8d7e725 --- /dev/null +++ b/sandworm/app/components/content/page.tsx @@ -0,0 +1,581 @@ +'use client'; + +import { useState } from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { CodePreview } from "@/components/code-preview"; +import { StatusBadge } from "@/components/ui/status-badge"; +import { usePageStatus } from '@/hooks/use-page-status'; +import { Button } from "@/components/ui/button"; +import { Code2, Info, AlertTriangle, Lightbulb, CheckCircle, Terminal as TerminalIcon, ExternalLink } from "lucide-react"; + +export default function ContentPage() { + const [showCalloutCode, setShowCalloutCode] = useState(false); + const [showKeyTakeawaysCode, setShowKeyTakeawaysCode] = useState(false); + const [showTimelineCode, setShowTimelineCode] = useState(false); + const [showFigureCode, setShowFigureCode] = useState(false); + const [showVideoCode, setShowVideoCode] = useState(false); + const [showLinkCardCode, setShowLinkCardCode] = useState(false); + const [showTerminalCode, setShowTerminalCode] = useState(false); + + return ( +
+
+
+

Content Components

+ +
+

+ MDX blog components for rich content presentation. These components follow an editorial design approach with typography-focused styling and subtle left-border accents. +

+
+ +
+ {/* Callout Section */} +
+
+

Callout

+ +
+ + + {/* Info Callout */} +
+
+ + Note +
+
+ SpiceDB requires at least one relationship to be written before permissions can be checked. +
+
+ + {/* Warning Callout */} +
+
+ + Warning +
+
+ Breaking changes in v1.30.0 - please review the migration guide. +
+
+ + {/* Tip Callout */} +
+
+ + Tip +
+
+ Use the playground to test your schema before deploying to production. +
+
+ + {/* Success Callout */} +
+
+ + Success +
+
+ Your schema has been validated and is ready for deployment. +
+
+ + {showCalloutCode && ( + + SpiceDB requires at least one relationship + to be written before permissions can be checked. + + + + Breaking changes in v1.30.0 - please review + the migration guide. + + + + Use the playground to test your schema + before deploying to production. + + + + Your schema has been validated and is + ready for deployment. +`} + imports={`// Auto-imported in MDX files +// Available types: info, warning, tip, success`} + component={`src/components/mdx/custom/Callout.tsx`} + /> + )} + + +
+ + {/* Key Takeaways Section */} +
+
+

Key Takeaways

+ +
+ + + {/* Key Takeaways Example */} +
+

+ Key Takeaways +

+
    +
  • SpiceDB implements Google's Zanzibar paper
    • +
  • Use relationships for fine-grained access control
    • +
  • Schema validation catches errors early
    • +
  • The Watch API enables real-time updates
    • +
+
+ + {/* TL;DR Variant */} +
+
+ + TL;DR + +
+
+ SpiceDB is a database system for managing application permissions that implements Google's Zanzibar paper. +
+
+ + {showKeyTakeawaysCode && ( + + - SpiceDB implements Google's Zanzibar paper + - Use relationships for fine-grained access control + - Schema validation catches errors early + - The Watch API enables real-time updates + + + + - How to install SpiceDB + - Writing your first schema + - Testing permissions locally + + + + SpiceDB is a database system for managing + application permissions that implements + Google's Zanzibar paper. +`} + imports={`// Auto-imported in MDX files`} + component={`src/components/mdx/custom/KeyTakeaways.tsx`} + /> + )} + + +
+ + {/* Timeline Section */} +
+
+

Timeline

+ +
+ + + {/* Timeline Example */} +
+ {/* Complete Item */} +
+
+
+
+
+

Install SpiceDB

+
+
Download and install the SpiceDB binary
+
+
+ + {/* Current Item */} +
+
+
+
+
+

Define Schema

+
+
Create your permission schema
+
+
+ + {/* Upcoming Item */} +
+
+
+
+

Write Relationships

+
+
Add your data relationships
+
+
+
+ + {showTimelineCode && ( + + + Download and install the SpiceDB binary + + + Create your permission schema + + + Add your data relationships + + + +// For release timelines: + + + Added caching improvements + + + New bulk import API + +`} + imports={`// Auto-imported in MDX files +// status: 'complete' | 'current' | 'upcoming'`} + component={`src/components/mdx/custom/Timeline.tsx`} + /> + )} + + +
+ + {/* Figure Section */} +
+
+

Figure

+ +
+ + + {/* Figure Example */} +
+
+
+ [Image placeholder] +
+
+
+ Figure 1: High-level SpiceDB architecture showing the relationship between clients, SpiceDB, and the datastore +
+
+ + {showFigureCode && ( + + +// Size options: small, medium, large, full +// Optional: bordered, shadow`} + imports={`// Auto-imported in MDX files`} + component={`src/components/mdx/custom/Figure.tsx`} + /> + )} + + +
+ + {/* Video Embed Section */} +
+
+

Video Embed

+ +
+ + + {/* Video Example */} +
+
+
[YouTube embed placeholder]
+
+
+ Watch: Getting started with SpiceDB in 10 minutes +
+
+ + {/* Spotify Example */} +
+
+
[Spotify embed placeholder]
+
+
+ Listen: The Open Source Startup Podcast +
+
+ + {showVideoCode && ( + + +// Vimeo + + +// Spotify (episode, track, or playlist) +`} + imports={`// Auto-imported in MDX files +// Supports: youtube, vimeo, spotify +// aspectRatio: '16/9' | '4/3' | '1/1'`} + component={`src/components/mdx/custom/VideoEmbed.tsx`} + /> + )} + + +
+ + {/* Link Card Section */} +
+
+

Link Card

+ +
+ + + {/* Link Card Examples */} + + + {showLinkCardCode && ( + + + + +// Grid layout for multiple cards + + + +`} + imports={`// Auto-imported in MDX files +// type: 'default' | 'github' | 'docs' | 'external'`} + component={`src/components/mdx/custom/LinkCard.tsx`} + /> + )} + + +
+ + {/* Terminal Section */} +
+
+

Terminal

+ +
+ + + {/* Terminal Example */} +
+
+
+
+
+
+
+ Terminal +
+
+
+ $ + brew install authzed/tap/spicedb +
+
+ => Installing spicedb from authzed/tap
+ => Downloading...
+ 🍺 spicedb was successfully installed! +
+
+
+ + {showTerminalCode && ( + + + brew install authzed/tap/spicedb + + + => Installing spicedb from authzed/tap + => Downloading... + 🍺 spicedb was successfully installed! + + + +// Copyable command + + + spicedb serve --grpc-preshared-key "secret" + +`} + imports={`// Auto-imported in MDX files`} + component={`src/components/mdx/custom/Terminal.tsx`} + /> + )} + + +
+
+ + {/* Design Principles Section */} +
+

Design Principles

+ +
+
+

Editorial Approach

+

+ Content components use typography-focused styling with subtle left-border accents rather than heavy backgrounds or decorations. +

+
+
+

Consistent Patterns

+

+ All components use border-l-2 border-stone-300 for accent borders, with magenta highlights for emphasis states. +

+
+
+

Sandworm Colors

+

+ Components use the proper Sandworm color scale (025, 050, 100) for backgrounds instead of generic Tailwind values. +

+
+
+ +
+
+ ); +} diff --git a/sandworm/app/components/page.tsx b/sandworm/app/components/page.tsx index 6c4fa72..4210e4e 100644 --- a/sandworm/app/components/page.tsx +++ b/sandworm/app/components/page.tsx @@ -1,8 +1,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import Link from "next/link"; -import { Square, Type, FileText, Layout, Menu, Bell, Calendar, Sliders, FileInput, ToggleLeft } from "lucide-react"; +import { Square, Type, FileText, Layout, Menu, Bell, Calendar, Sliders, FileInput, ToggleLeft, Newspaper } from "lucide-react"; const components = [ + { + title: "Content", + description: "MDX blog components for rich content: callouts, timelines, figures, and more.", + href: "/components/content", + icon: Newspaper, + }, { title: "Buttons", description: "Button components with different variants, sizes, and states.",