From c620b3e7538477b78d50b2c163a713b903939716 Mon Sep 17 00:00:00 2001
From: Vanilagy <1696106+Vanilagy@users.noreply.github.com>
Date: Fri, 23 May 2025 17:07:32 +0200
Subject: [PATCH] Add examples overview page

---
 docs/.vitepress/config.mts |  2 +-
 docs/examples.md           | 22 ++++++++++++++++++++++
 docs/index.md              | 32 ++++++++++++++++----------------
 3 files changed, 39 insertions(+), 17 deletions(-)
 create mode 100644 docs/examples.md

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index fea2e07..6be4dba 100644
--- a/docs/.vitepress/config.mts
+++ b/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: [
diff --git a/docs/examples.md b/docs/examples.md
new file mode 100644
index 0000000..4d51bb2
--- /dev/null
+++ b/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
+---
diff --git a/docs/index.md b/docs/index.md
index ca9b963..7663b35 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,10 +3,10 @@
 layout: home
 
 hero:
-  name: "My Awesome Project"
-  text: "A VitePress Site"
-  tagline: My great project tagline
-  actions:
+    name: "My Awesome Project"
+    text: "A VitePress Site"
+    tagline: My great project tagline
+    actions:
     - theme: brand
       text: Markdown Examples
       link: /markdown-examples
@@ -15,23 +15,23 @@ hero:
       link: /api-examples
 
 features:
-  - 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
+    - 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
 ---
 
 things the guide needs to cover:
 - writing files ✅
-	- output usage ✅
-	- all output formats ✅
-	- all media sources ✅
+    - output usage ✅
+    - all output formats ✅
+    - all media sources ✅
 - reading files ✅
-	- input usage ✅
-	- all input formats ✅
-	- all media sinks ✅
+    - input usage ✅
+    - all input formats ✅
+    - all media sinks ✅
 - utility functions ✅
 - supported containers / codecs ✅
 - samples & packets ✅