Add examples overview page

docs/.vitepress/config.mts

@@ -9,8 +9,8 @@ export default withMermaid({
 	themeConfig: {
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
-			{ text: 'Home', link: '/' },
 			{ text: 'Guide', link: '/guide/introduction', activeMatch: '/guide' },
+			{ text: 'Examples', link: '/examples', activeMatch: '/examples' },
 		],
 
 		sidebar: [

docs/examples.md

@@ -0,0 +1,22 @@
+---
+layout: home
+
+hero:
+    text: Examples
+    tagline: Various demos showcasing the usage of the features of Mediakit
+
+features:
+    - title: Metadata extraction
+      details: See how you can extract various metadata from an input media file.
+      link: /examples/metadata-extraction
+    - title: Feature B
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    - title: Feature C
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    - title: Feature A
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    - title: Feature B
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    - title: Feature C
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---

docs/index.md

@@ -3,10 +3,10 @@
 layout: home
 
 hero:
-  name: "My Awesome Project"
+    name: "My Awesome Project"
-  text: "A VitePress Site"
+    text: "A VitePress Site"
-  tagline: My great project tagline
+    tagline: My great project tagline
-  actions:
+    actions:
     - theme: brand
       text: Markdown Examples
       link: /markdown-examples
@@ -15,23 +15,23 @@ hero:
       link: /api-examples
 
 features:
-  - title: Feature A
+    - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
+    - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
+    - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
 
 things the guide needs to cover:
 - writing files ✅
-	- output usage ✅
+    - output usage ✅
-	- all output formats ✅
+    - all output formats ✅
-	- all media sources ✅
+    - all media sources ✅
 - reading files ✅
-	- input usage ✅
+    - input usage ✅
-	- all input formats ✅
+    - all input formats ✅
-	- all media sinks ✅
+    - all media sinks ✅
 - utility functions ✅
 - supported containers / codecs ✅
 - samples & packets ✅