From e5b10668cafa724cb24dd60c8f2d6ec6d440fc65 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sun, 21 Jul 2024 18:01:35 +0200
Subject: [PATCH] Setup structure

---
 apps/docs/.vitepress/config.ts   | 47 ++++++++++++++++++++++++++++----
 apps/docs/src/getting-started.md |  1 +
 apps/docs/src/index.md           | 47 ++++++++++++++++++++++----------
 3 files changed, 75 insertions(+), 20 deletions(-)
 create mode 100644 apps/docs/src/getting-started.md

diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
index df220d6ff..2f33343c0 100644
--- a/apps/docs/.vitepress/config.ts
+++ b/apps/docs/.vitepress/config.ts
@@ -10,21 +10,58 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' },
+      { text: 'Getting started', link: '/getting-started' },
+      {
+        text: 'Frameworks',
+        link: '/frameworks',
+      },
+      {
+        text: 'Build plugins',
+        link: '/build',
+      },
+      {
+        text: 'Image CDNs',
+        link: '/cdn',
+      },
     ],
 
     sidebar: [
       {
-        text: 'Examples',
+        text: 'Getting started',
+        link: '/getting-started',
+      },
+      {
+        text: 'Core concepts',
+        link: '/concepts',
+      },
+      {
+        text: 'Frameworks',
+        link: '/frameworks',
+        items: [{ text: 'Ember', link: '/frameworks/ember' }],
+      },
+      {
+        text: 'Build plugins',
+        link: '/build',
         items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' },
+          { text: 'Vite', link: '/build/vite' },
+          { text: 'Webpack', link: '/build/webpack' },
+        ],
+      },
+      {
+        text: 'Image CDNs',
+        link: '/cdn',
+        items: [
+          { text: 'Cloudinary', link: '/cdn/cloudinary' },
+          { text: 'Imgix', link: '/cdn/imgix' },
         ],
       },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+      {
+        icon: 'github',
+        link: 'https://github.com/simonihmig/responsive-image',
+      },
     ],
   },
 });
diff --git a/apps/docs/src/getting-started.md b/apps/docs/src/getting-started.md
new file mode 100644
index 000000000..69a5d543e
--- /dev/null
+++ b/apps/docs/src/getting-started.md
@@ -0,0 +1 @@
+# Getting started
diff --git a/apps/docs/src/index.md b/apps/docs/src/index.md
index 3636f84bb..afb5b225b 100644
--- a/apps/docs/src/index.md
+++ b/apps/docs/src/index.md
@@ -3,23 +3,40 @@
 layout: home
 
 hero:
-  name: "Responsive Image"
-  text: "Documentation for the Responsive Image project"
-  tagline: My great project tagline
+  name: 'Responsive Image'
+  text: 'The multi-framework JavaScript library for responsive images.'
+  tagline: Responsive images made easy.
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Getting started
+      link: /getting-started
+    # - theme: alt
+    #   text: API Examples
+    #   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: Next-gen image formats
+    icon: 🌇
+    details: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for best image quality at low file sizes.
+  - title: Fast image processing
+    icon: 🏎
+    details: Super fast image processing, thanks to the awesome sharp library.
+  - title: Layout modes
+    icon: 📱
+    details: Layout modes for fixed sizes (with 1x and 2x image variants) as well as responsive layouts (srcset with optimized image sizes across all devices).
+  - title: Image CDNs
+    icon: 🌍
+    details: Besides processing of local images, it also supports integrating remote images from <b>image CDNs</b> like Cloudinary or imgix using a versatile image provider abstraction
+  - title: Web Performance
+    icon: 💯
+    details: Lazy rendering by default, with optimized content-visibility and decoding settings and optimized markup, to prevent CLS (Cumulative Layout Shift), a core Web Vital and Lighthouse metric.
+  - title: Low Quality Image Placeholders
+    icon: ⏳
+    details: Supports advanced LQIP techniques to show a preview while loading, using different configurable strategies like a blurry low-res image, BlurHash or a simple dominant color.
+  - title: Multi Framework
+    icon: 🛠️
+    details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js and more in the future.'
+  - title: High Quality
+    icon: ✨
+    details: Engineered with quality in mind, all functionality is fully tested (unit and integration tests), packages ship with native TypeScript types.
 ---
-