link to example code

sites/docs/content/examples/collapsible-panes.md

@@ -5,6 +5,7 @@ description: An example of how to create collapsible panes.
 
 <script>
 	import { CollapsibleDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 You can use the `collapsedSize` and `collapsible` props to create collapsible panes. The `collapsedSize` prop sets the size of the pane when it is in a collapsed state, and the `collapsible` prop determines whether the pane can be collapsed.
@@ -15,6 +16,8 @@ You can also use the `onCollapse` and `onExpand` callbacks to perform actions wh
 	<CollapsibleDemo />
 </div>
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/collapsible-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/conditional-panes.md

@@ -5,6 +5,7 @@ description: An example of how to handle conditional panes.
 
 <script>
 	import { ConditionalDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 When conditionally rendering panes, you need to use the `order` prop to ensure the panes are rendered in the correct order when they are displayed.
@@ -13,6 +14,8 @@ When conditionally rendering panes, you need to use the `order` prop to ensure t
 	<ConditionalDemo />
 </div>
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/conditional-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/horizontal-groups.md

@@ -5,10 +5,13 @@ description: An example of a horizontal group of panes.
 
 <script>
 	import { HorizontalDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 <HorizontalDemo />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/horizontal-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/nested-groups.md

@@ -5,10 +5,13 @@ description: An example of nesting groups of panes for more complex layouts.
 
 <script>
 	import { NestedGroupsDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 <NestedGroupsDemo />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/nested-groups-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/overflowing-panes.md

@@ -5,10 +5,13 @@ description: An example of how panes with overflowing content are handled.
 
 <script>
 	import { OverflowDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 <OverflowDemo />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/overflow-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/persistent-layouts.md

@@ -5,6 +5,7 @@ description: Examples of persisting layouts across page loads.
 
 <script>
 	import { StorageDemo, CookieDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 	export let data;
 </script>
 
@@ -14,6 +15,8 @@ The `PaneGroup` component has an `autoSaveId` prop that can be used to uniquely
 
 <StorageDemo />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/storage-demo.svelte" />
+
 ### Anatomy
 
 Here's the high-level structure of the example above:
@@ -36,6 +39,8 @@ Local storage is not available on the server, so you can use cookies to persist
 
 <CookieDemo layout={data.layout} />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/cookie-demo.svelte" />
+
 ### Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/content/examples/vertical-groups.md

@@ -5,10 +5,13 @@ description: An example of a vertical group of panes.
 
 <script>
 	import { VerticalDemo } from '$lib/components/demos'
+	import { ViewExampleCode } from '$lib/components'
 </script>
 
 <VerticalDemo />
 
+<ViewExampleCode href="https://github.com/svecosystem/paneforge/blob/main/sites/docs/src/lib/components/demos/vertical-demo.svelte" />
+
 ## Anatomy
 
 Here's the high-level structure of the example above:

sites/docs/src/lib/components/demos/storage-demo.svelte

@@ -4,17 +4,17 @@
 </script>
 
 <PaneGroup direction="horizontal" class="w-full rounded-lg" autoSaveId="someGroupId">
-	<Pane defaultSize={50} class="rounded-lg bg-muted">
+	<Pane defaultSize={50} class="bg-muted rounded-lg">
 		<div class="flex h-[400px] items-center justify-center p-6">
 			<span class="font-semibold">Left</span>
 		</div>
 	</Pane>
-	<PaneResizer class="relative flex w-2 items-center justify-center bg-background">
-		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
+	<PaneResizer class="bg-background relative flex w-2 items-center justify-center">
+		<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizer>
-	<Pane defaultSize={50} class="rounded-lg bg-muted">
+	<Pane defaultSize={50} class="bg-muted rounded-lg">
 		<div class="flex h-full items-center justify-center p-6">
 			<span class="font-semibold">Right</span>
 		</div>

sites/docs/src/lib/components/index.ts

@@ -6,3 +6,4 @@ export { default as Step } from "./step.svelte";
 export { default as Steps } from "./steps.svelte";
 export { default as IconGrid } from "./icon-grid.svelte";
 export { default as LoadingCard } from "./loading-card.svelte";
+export { default as ViewExampleCode } from "./view-example-code.svelte";

sites/docs/src/lib/components/view-example-code.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import A from "$lib/components/markdown/a.svelte";
+	export let href: string;
+</script>
+
+<div class="mt-4 flex w-full items-center justify-center">
+	<A {href}>View Example Code</A>
+</div>