Begin to hide examples and replace with explicit usage and docs

Author: techniq

docs/src/content/components/AnnotationLine.md

@@ -9,7 +9,7 @@ related: [AnnotationPoint, AnnotationRange]
   import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+<!-- ## Examples
 
 ### Vertical
 
@@ -41,4 +41,4 @@ related: [AnnotationPoint, AnnotationRange]
 
 ### Bar chart
 
-<Example name="bar-chart" />
+<Example name="bar-chart" /> -->

docs/src/content/components/AnnotationPoint.md

@@ -9,7 +9,7 @@ related: [AnnotationLine, AnnotationRange]
   import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+<!-- ## Examples
 
 ### On axis with tooltip
 
@@ -37,4 +37,4 @@ related: [AnnotationLine, AnnotationRange]
 
 ### Band scale on value
 
-<Example name="band-scale-on-value" />
+<Example name="band-scale-on-value" /> -->

docs/src/content/components/AnnotationRange.md

@@ -9,7 +9,7 @@ related: [AnnotationLine, AnnotationPoint]
   import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+<!-- ## Examples
 
 ### Horizontal with pattern, lower bound
 
@@ -61,4 +61,4 @@ related: [AnnotationLine, AnnotationPoint]
 
 ### Hide tooltip
 
-<Example name="hide-tooltip" />
+<Example name="hide-tooltip" /> -->

docs/src/content/components/Arc.md

@@ -11,12 +11,18 @@ related: [Pie, ArcChart, PieChart]
 
 > See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples
 
-## Examples
+## Usage
 
-### Playground
+<Example name="partial-arc" showCode />
 
-<Example name="playground" />
+## Text along path
+
+`Arc` can be used with the `children` snippet, `getArcTextProps`, and `Text` to write text along the `inner`, `outer`, or `middle` of the arc path.
 
-### Label direction
+The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc
 
 <Example name="label-direction" />
+
+## Playground
+
+<Example name="playground" />

docs/src/content/components/ArcChart.md

@@ -9,7 +9,11 @@ related: [Chart, Pie]
 	import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+## Usage
+
+<Example name="basic" showCode />
+
+<!-- ## Examples
 
 ### Basic
 
@@ -79,4 +83,4 @@ related: [Chart, Pie]
 
 ### Motion (spring)
 
-<Example name="series-motion-spring" />
+<Example name="series-motion-spring" /> -->

docs/src/content/components/Area.md

@@ -11,6 +11,10 @@ related: []
 
 > See also: [AreaChart](/docs/components/AreaChart) for simplified examples
 
+## Usage
+
+<Example name="basic" showCode />
+
 ## Playground
 
 <Example name="playground" />

docs/src/content/components/AreaChart.md

@@ -9,7 +9,11 @@ related: [Chart, Area]
 	import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+## Usage
+
+<Example name="basic" showCode />
+
+<!-- ## Examples
 
 ### Basic
 
@@ -173,4 +177,4 @@ related: [Chart, Area]
 
 ### Custom
 
-<Example name="custom" />
+<Example name="custom" /> -->

docs/src/content/components/Axis.md

@@ -9,7 +9,11 @@ related: [Grid, Rule]
 	import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+## Usage
+
+<Example name="placement-bottom-left" showCode />
+
+<!-- ## Examples
 
 ### Placement (bottom / left)
 
@@ -181,4 +185,4 @@ Specify explicit time intervals such as every day, every 6 months, etc with comp
 
 ### Time scale (brush) with multiline ticks
 
-<Example name="time-scale-brush-multiline" />
+<Example name="time-scale-brush-multiline" /> -->

docs/src/content/components/Bar.md

@@ -8,3 +8,9 @@ related: [Bars]
 <script lang="ts">
   import Example from '$lib/components/Example.svelte';
 </script>
+
+## Usage
+
+<Example component="Bars" name="vertical-customize-individual-styles" showCode />
+
+Typically the component is rendering within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis

docs/src/content/components/BarChart.md

@@ -9,7 +9,11 @@ related: [Chart, Bars]
   import Example from '$lib/components/Example.svelte';
 </script>
 
-## Examples
+## Usage
+
+<Example name="vertical-default" showCode />
+
+<!-- ## Examples
 
 ### Vertical (default)
 
@@ -261,4 +265,4 @@ related: [Chart, Bars]
 
 ### Custom chart
 
-<Example name="custom-chart" />
+<Example name="custom-chart" /> -->