content nudges

Author: argyleink

docs/src/content/docs/examples/animate.md

@@ -1,4 +1,4 @@
 ---
-title: Animation Examples
-description: A reference page in my new Starlight docs site.
+title: Animations
+description: Todo
 ---

docs/src/content/docs/examples/buttons.md

@@ -1,10 +1,4 @@
 ---
-title: Button Example
-description: A reference page in my new Starlight docs site.
-sidebar:
-  label: Custom button example label
-  order: 1
-  badge:
-    text: New
-    variant: tip
+title: Buttons
+description: Todo
 ---

docs/src/content/docs/examples/cards.md

@@ -1,4 +1,4 @@
 ---
-title: Cards Example
-description: A reference page in my new Starlight docs site.
+title: Cards
+description: Todo
 ---

docs/src/content/docs/examples/frameworks.md

@@ -1,6 +1,6 @@
 ---
 title: Frameworks
-description: A reference page in my new Starlight docs site.
+description: Todo
 ---
 
 https://stackblitz.com/@argyleink/collections/open-props

docs/src/content/docs/examples/hero.md

@@ -1,4 +1,4 @@
 ---
-title: Hero Example
+title: Hero
 description: A reference page in my new Starlight docs site.
 ---

docs/src/content/docs/index.mdx

@@ -32,10 +32,19 @@ import { Card, CardGrid } from '@astrojs/starlight/components'
 ## Next steps
 
 <CardGrid stagger>
-	<Card title="Update content" icon="pencil">
+	<Card title="Principles" icon="pencil">
+		What's the vision?
+	</Card>
+	<Card title="Good Practices" icon="pencil">
+		lorem ...
+	</Card>
+	<Card title="Why?" icon="pencil">
 		Edit `src/content/docs/index.mdx` to see this page change.
 	</Card>
-	<Card title="Add new content" icon="add-document">
+	<Card title="Less tech debt" icon="pencil">
+		It's my debt
+	</Card>
+	<Card title="Continuity" icon="add-document">
 		Add Markdown or MDX files to `src/content/docs` to create new pages.
 	</Card>
 	<Card title="Configure your site" icon="setting">

docs/src/content/docs/playground.mdx

@@ -0,0 +1,18 @@
+---
+title: Playground
+tableOfContents: false
+prev: false
+next: false
+---
+
+<iframe
+	height="500"
+	style="block-size: 75dvh; inline-size: 100%;"
+	scrolling="no"
+	title="Open Props - oklch colors v2 config"
+	src="https://codepen.io/argyleink/embed/xxMWoOz?default-tab=css%2Cresult&editable=true"
+	frameborder="no"
+	loading="lazy"
+	allowtransparency="true"
+	allowfullscreen="true"
+></iframe>

docs/src/sidebar.ts

@@ -1,5 +1,5 @@
 export default [
-	{ label: 'Playground', link: '#' },
+	{ label: 'Playground', link: '/playground/' },
 	{
 		label: 'Examples',
 		collapsed: true,
@@ -12,8 +12,9 @@ export default [
 				label: 'Get Started',
 				link: '/guides/get-started/',
 			},
+			{ label: 'Customizing', link: '/guides/customizing/' },
 			{
-				label: 'Setup',
+				label: 'Tooling',
 				collapsed: true,
 				items: [
 					{ label: 'Editor', link: '/guides/editor/' },
@@ -22,12 +23,12 @@ export default [
 					{ label: 'CDN', link: '/guides/cdn/' },
 				],
 			},
-			{ label: 'Customizing', link: '/guides/customizing/' },
 		],
 	},
 	{
 		label: 'Shop Props',
-		autogenerate: { directory: 'props', collapsed: true },
+		collapsed: true,
+		autogenerate: { directory: 'props' },
 	},
 	{
 		label: 'Prop Packs',