From d1bb8a7520be74bd36c9a6e315b344597dbd07ea Mon Sep 17 00:00:00 2001
From: hybridherbst <felix.herbst@gmail.com>
Date: Tue, 3 Sep 2024 23:36:19 +0200
Subject: [PATCH] start reordering header menu

no new pages for now, just structuring
---
 .../.vuepress/components/stackblitz.vue       |   2 +-
 documentation/.vuepress/config.ts             | 106 +++++++++---------
 documentation/.vuepress/styles/index.scss     |  43 ++++++-
 documentation/component-compiler.md           |   2 +-
 documentation/component-reference.md          |   6 +-
 documentation/deployment.md                   |   2 +-
 documentation/features-overview.md            |   2 +
 documentation/for-unity-developers.md         |   2 +-
 .../getting-started/for-unity-developers.md   |   2 +-
 .../getting-started/typescript-essentials.md  |   3 +-
 documentation/html.md                         |   4 +-
 documentation/modules.md                      |   2 +-
 documentation/reference/needle-config-json.md |   2 +-
 .../reference/needle-engine-attributes.md     |   2 +-
 .../reference/typescript-decorators.md        |   2 +-
 documentation/scripting-examples.md           |   9 +-
 documentation/scripting.md                    |   4 +-
 documentation/technical-overview.md           |   3 +-
 documentation/testimonials.md                 |   2 +-
 documentation/vanilla-js.md                   |  16 +--
 20 files changed, 133 insertions(+), 83 deletions(-)

diff --git a/documentation/.vuepress/components/stackblitz.vue b/documentation/.vuepress/components/stackblitz.vue
index ae45ce09b..618a940d1 100644
--- a/documentation/.vuepress/components/stackblitz.vue
+++ b/documentation/.vuepress/components/stackblitz.vue
@@ -142,7 +142,7 @@ export default {
 <template>
     <div>
         <button @click="openProject" class="plausible-event-name=Click+Create+Stackblitz+Project">
-            Open in StackBlitz (Experimental)
+            Open in StackBlitz
         </button>
         <div class="code">
             <slot></slot>
diff --git a/documentation/.vuepress/config.ts b/documentation/.vuepress/config.ts
index 58b85e7c3..e25284e15 100644
--- a/documentation/.vuepress/config.ts
+++ b/documentation/.vuepress/config.ts
@@ -43,7 +43,8 @@ export default defineUserConfig({
         docsearchPlugin({
             appId: "2LT25GG3KX",
             apiKey: "389be16f732f82c611e1b0f22c031dff",
-            indexName: "engine-needle"
+            indexName: "engine-needle",
+            injectStyles: true,
         }),
         //@ts-ignore
         // pwaPlugin(),
@@ -109,32 +110,47 @@ export default defineUserConfig({
         ],
         navbar: [
             {
-                text: 'Needle Engine',
+                text: 'Overview',
                 link: '/',
                 children: [
                     {
-                        text: 'Needle Engine',
+                        text: 'What is Needle Engine?',
                         link: '/',
                     },
-                    "/vision",
-                    "/features-overview",
-                    "/technical-overview",
+                    '/testimonials',
                     {
-                        text: 'Testimonials 💬',
-                        link: '/testimonials',
-                    },
-                    {
-                        text: 'Pricing & Plans',
-                        link: "https://needle.tools/pricing?utm_source=needle_docs&utm_content=headersubnav"
+                        text: "Get an overview",
+                        children: [
+                            {
+                                text: "Samples and Showcase",
+                                link: "https://engine.needle.tools/samples?utm_source=needle_docs&utm_content=headernav"
+                            },
+                            "/vision",
+                            "/features-overview",
+                            "/technical-overview",
+                        ],
                     },
                     {
-                        text: "Releases and Changelog",
-                        link: "https://github.com/needle-tools/needle-engine-support/releases"
+                        text: "Resources",
+                        children: [
+                            {
+                                text: 'Pricing and Plans',
+                                link: "https://needle.tools/pricing/?utm_source=needle_docs&utm_content=headersubnav"
+                            },
+                            {
+                                text: "Changelog",
+                                link: "https://github.com/needle-tools/needle-engine-support/releases"
+                            },
+                            {
+                                text: "API Documentation",
+                                link: "https://engine.needle.tools/docs/api/latest",
+                            },
+                        ],
                     },
                 ]
             },
             {
-                text: 'Getting Started',
+                text: 'Downloads',
                 link: '/getting-started',
             },
             {
@@ -146,29 +162,12 @@ export default defineUserConfig({
                     "/html",
                     "/testing",
                     "/deployment",
-                    {
-                        text: "Scripting",
-                        children: [
-                            "/getting-started/typescript-essentials",
-                            "/getting-started/for-unity-developers",
-                            "/scripting",
-                            "/component-compiler",
-                            "/scripting-examples",
-                            {
-                                text: "Community Contributions",
-                                link: "/community/contributions"
-                            },
-                            {
-                                text: "Needle Engine API",
-                                link: "https://engine.needle.tools/docs/api",
-                            },
-                        ]
-                    },
                     {
                         text: "Advanced",
                         children: [
                             "/networking",
                             "/xr",
+                            "/vanilla-js",
                         ]
                     },
                     {
@@ -199,35 +198,40 @@ export default defineUserConfig({
                 text: 'Reference',
                 children: [
                     {
-                        text: "Scripting",
+                        text: "Scripting Overview",
                         children: [
+                            "/getting-started/typescript-essentials",
+                            "/getting-started/for-unity-developers",
                             "/component-reference",
-                            "/reference/needle-engine-attributes",
-                            "/reference/needle-config-json",
+                            "/everywhere-actions",
+                        ]
+                    },
+                    {
+                        text: "Components and Lifecycle",
+                        children: [
+                            "/scripting",
                             "/reference/typescript-decorators",
+                            "/component-compiler",
                             "/scripting-examples",
-                            {
-                                text: "Needle Engine API",
-                                link: "https://engine.needle.tools/docs/api",
-                            },
-                            "/vanilla-js",
                             {
                                 text: "Community Contributions",
                                 link: "/community/contributions"
                             },
+                            "/modules", 
                         ]
                     },
                     {
-                        text: "Download and Learn",
+                        text: "Settings and APIs",
                         children: [
+                            "/reference/needle-engine-attributes",
+                            "/reference/needle-config-json",
                             {
-                                text: "Samples for Download",
-                                link: "https://engine.needle.tools/samples?utm_source=needle_docs&utm_content=headernav",
+                                text: "Needle Engine API",
+                                link: "https://engine.needle.tools/docs/api/latest",
                             },
-                            "/modules",
                             {
-                                text: "Tutorials on Youtube",
-                                link: "https://www.youtube.com/playlist?list=PLJ4BaFFEGP1GVTmPhKDC6QzL8Am9700Wo"
+                                text: "three.js API",
+                                link: "https://threejs.org/docs/index.html",
                             },
                         ]
                     },
@@ -239,7 +243,7 @@ export default defineUserConfig({
             },
             {
                 text: 'Pricing',
-                link: "https://needle.tools/pricing?utm_source=needle_docs&utm_content=headernav"
+                link: "https://needle.tools/pricing/?utm_source=needle_docs&utm_content=headernav"
             },
             {
                 text: 'Contact',
@@ -323,6 +327,7 @@ export default defineUserConfig({
                     children: [
                         "/xr",
                         "/networking",
+                        "/vanilla-js",
                     ]
                 },
                 {
@@ -339,10 +344,7 @@ export default defineUserConfig({
                 {
                     text: "Blender",
                     children: [
-                        {
-                            text: "Needle Engine for Blender",
-                            link: "/blender"
-                        }
+                        "/blender",
                     ]
                 },
             ]
diff --git a/documentation/.vuepress/styles/index.scss b/documentation/.vuepress/styles/index.scss
index 89d8c3cd6..6463ecc04 100644
--- a/documentation/.vuepress/styles/index.scss
+++ b/documentation/.vuepress/styles/index.scss
@@ -239,8 +239,8 @@ td {
   width: fit-content;
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 3rem;
-  outline: 1px solid rgba(255, 255, 255, 1);
-  box-shadow: 0 0 5px rgba(0, 0, 0, .05);
+  outline: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 15px #02022b33;
   margin: 5px auto;
 }
 
@@ -294,3 +294,42 @@ td {
   font-size: 1rem;
 }
 
+span.DocSearch-Button-Keys {
+  display: none;
+}
+
+kbd.DocSearch-Button-Key {
+  display: none;
+}
+
+span.DocSearch-Button-Placeholder {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 0.9rem;
+}
+
+div.DocSearch-Modal {
+  border-radius: 20px; 
+}
+
+footer.DocSearch-Footer {
+  border-radius: 0 0 20px 20px;
+}
+
+form.DocSearch-Form {
+  border-radius: 9px;
+}
+
+@media (min-width: 751px) {
+  div#docsearch-container {
+    min-width: initial;
+  }
+}
+
+footer.page-meta {
+  font-size: 0.9em;
+  opacity: 0.5;
+}
+
+.navbar-item > a.external-link .external-link-icon {
+  display: none;
+}
\ No newline at end of file
diff --git a/documentation/component-compiler.md b/documentation/component-compiler.md
index 417677c85..f01344aff 100644
--- a/documentation/component-compiler.md
+++ b/documentation/component-compiler.md
@@ -1,5 +1,5 @@
 ---
-title: Editor Component Generator
+title: Automatic Component Generation
 ---
 
 ### Automatically generating Editor components :tags codegen
diff --git a/documentation/component-reference.md b/documentation/component-reference.md
index 88698c167..12a1d3426 100644
--- a/documentation/component-reference.md
+++ b/documentation/component-reference.md
@@ -1,10 +1,10 @@
 ---
-title: Core Components
+title: Built-in Components
 ---
 
-Here is a overview of some of the components that we provide. Some of them map directly to Unity components, while others are core components from Needle Engine.   
+Here is a overview of some of the components that we provide. Many of them map to components and functionality in Unity, Blender or other integrations.
 
-For a complete list please have a look at the components inside the folders ``node_modules/@needle-tools/engine/engine-components`` and ``engine-components-experimental``.  
+For a complete list please have a look at our [API docs](https://engine.needle.tools/docs/api/latest).
 
 You can always add your own components or add wrappers for Unity components we haven't provided yet.  
 
diff --git a/documentation/deployment.md b/documentation/deployment.md
index afa51230b..e8e80e7dc 100644
--- a/documentation/deployment.md
+++ b/documentation/deployment.md
@@ -1,5 +1,5 @@
 ---
-title: Deployment & Compression
+title: Deployment and Optimization
 ---
 
 ## What does deployment mean?
diff --git a/documentation/features-overview.md b/documentation/features-overview.md
index 4c81b4971..ca1a4b2c4 100644
--- a/documentation/features-overview.md
+++ b/documentation/features-overview.md
@@ -1,5 +1,7 @@
 # Feature Overview
 
+Needle Engine is a fully fledged 3D engine that runs in the browser. It comes with all the features you'd expect from a modern 3D engine, and more.  If you haven't yet, take a look at our [Homepage](https://needle.tools) and our [Samples and Showcase](https://engine.needle.tools/samples).
+
 [[toc]]
 
 ## Shaders and Materials
diff --git a/documentation/for-unity-developers.md b/documentation/for-unity-developers.md
index e1a668705..eb288a513 100644
--- a/documentation/for-unity-developers.md
+++ b/documentation/for-unity-developers.md
@@ -1,5 +1,5 @@
 ---
-title: Needle Engine for Unity Developers
+title: Scripting basics For Unity Developers
 editLinks: false
 sidebar: false
 ---
diff --git a/documentation/getting-started/for-unity-developers.md b/documentation/getting-started/for-unity-developers.md
index d8052db52..fa715dca7 100644
--- a/documentation/getting-started/for-unity-developers.md
+++ b/documentation/getting-started/for-unity-developers.md
@@ -1,5 +1,5 @@
 ---
-title: Scripting Introduction
+title: Scripting Introduction for Unity Developers
 ---
 
 Needle Engine provides a tight integration into the Unity Editor. This allows developers and designers alike to work together in a familiar environment and deliver fast, performant and lightweight web-experiences.  
diff --git a/documentation/getting-started/typescript-essentials.md b/documentation/getting-started/typescript-essentials.md
index d5b858a4e..a635ddc55 100644
--- a/documentation/getting-started/typescript-essentials.md
+++ b/documentation/getting-started/typescript-essentials.md
@@ -1,5 +1,6 @@
 ---
-title: Typescript Essentials
+title: Scripting in Needle Engine
+description: Differences, similarities and key concepts of Typescript, Javascript and C#.
 sidebarDepth: 2
 ---
 
diff --git a/documentation/html.md b/documentation/html.md
index 2534f40c3..8ad9be238 100644
--- a/documentation/html.md
+++ b/documentation/html.md
@@ -16,11 +16,11 @@ Vite (our default bundler) has a good explanation why web apps should be bundled
 
 ### Vite, Vue, React, Svelte, React Three Fiber...
 
-Needle Engine is unoponiated about the choice of framework. The default template only uses vite as bundler. Adding vue to that is easy (see the [vite docs](https://vitejs.dev)), we also provide an (experimental) react-three-fiber template and there should be nothing stopping your from using simpler or more complex frameworks.
+Needle Engine is unoponiated about the choice of framework. Our default template uses the popular [vite](https://vitejs.dev) as bundler. From there, you can add vue, svelte, nuxt, react, react-three-fiber or other frameworks, and we have samples for a lot of them. You can also integrate other bundlers, or use none at all – just plain HTML and Javascript.  
 
 Here's some example tech stacks that are possible and that we use Needle Engine with:  
 
-- **Vite + HTML** — It is what our default template uses
+- **Vite + HTML** — This is what our default template uses!
     
 - **Vite + Vue** — This is what the [Needle Tools](https://needle.tools) website uses!. Find a sample to download [here](https://github.com/needle-tools/needle-engine-samples). 
 - **Vite + Svelte** 
diff --git a/documentation/modules.md b/documentation/modules.md
index b6c759c34..f63ae0c6b 100644
--- a/documentation/modules.md
+++ b/documentation/modules.md
@@ -1,5 +1,5 @@
 ---
-title: Modules and Packages
+title: Additional Modules
 ---
 
 Projects can be composed of re-usable pieces that we call [**NpmDef**](./project-structure.md#npm-definition-files) (which stands for Npm Defintion File). 
diff --git a/documentation/reference/needle-config-json.md b/documentation/reference/needle-config-json.md
index 31ddc31e9..b7988e6f5 100644
--- a/documentation/reference/needle-config-json.md
+++ b/documentation/reference/needle-config-json.md
@@ -1,5 +1,5 @@
 ---
-title: Needle Config
+title: needle.config.json
 ---
 
 The `needle.config.json` is used to provide configuration for the Needle Editor integrations and for the Needle Engine build pipeline plugins.
diff --git a/documentation/reference/needle-engine-attributes.md b/documentation/reference/needle-engine-attributes.md
index 85a8eee7e..a3d1bd378 100644
--- a/documentation/reference/needle-engine-attributes.md
+++ b/documentation/reference/needle-engine-attributes.md
@@ -1,5 +1,5 @@
 ---
-title: Needle Engine Attributes
+title: <needle-engine> Configuration
 ---
 
 The `<needle-engine>` web-component comes with a nice collection of built-in attributes that can be used to modify the look and feel of the loaded scene without the need to add or edit the three.js scene directly.   
diff --git a/documentation/reference/typescript-decorators.md b/documentation/reference/typescript-decorators.md
index d8c5c0871..cdc0a6896 100644
--- a/documentation/reference/typescript-decorators.md
+++ b/documentation/reference/typescript-decorators.md
@@ -1,5 +1,5 @@
 ---
-title: Typescript Decorators
+title: "@serializable and other decorators"
 ---
 
 The following table contains available Typescript decorators that Needle Engine provides.  
diff --git a/documentation/scripting-examples.md b/documentation/scripting-examples.md
index 6a62fd59d..ef52d857a 100644
--- a/documentation/scripting-examples.md
+++ b/documentation/scripting-examples.md
@@ -1,6 +1,11 @@
-# Script Examples
+---
+title: Scripting Examples
+description: A collection of useful script snippets and examples.
+---
 
-[Here is a video for writing custom components](https://youtu.be/uf5UK0bLHlY?si=82U_2L4n2V7XL7RJ)
+# Scripting Examples
+
+[Video tutorial: How to write custom components](https://youtu.be/uf5UK0bLHlY?si=82U_2L4n2V7XL7RJ)
 
 Below you will find a few basic scripts as a quick reference. 
 
diff --git a/documentation/scripting.md b/documentation/scripting.md
index b66ee4f7d..d74210496 100644
--- a/documentation/scripting.md
+++ b/documentation/scripting.md
@@ -1,5 +1,5 @@
 ---
-title: Needle Engine Scripting
+title: Creating and using Components
 ---
 
 If you are new to scripting we recommend reading the following guides first:
@@ -7,7 +7,7 @@ If you are new to scripting we recommend reading the following guides first:
 - [Typescript Essentials](./getting-started/typescript-essentials.md)
 - [Needle Engine for Unity Developers](./getting-started/for-unity-developers.md)
 
-Sometimes it can also be helpful to dive into the [Needle Engine Api documentation](https://engine.needle.tools/docs/api).
+If you know what you're doing, feel free to jump right into the [Needle Engine API documentation](https://engine.needle.tools/docs/api/latest).
 
 ---
 
diff --git a/documentation/technical-overview.md b/documentation/technical-overview.md
index b7b378bc0..37b8fa5c0 100644
--- a/documentation/technical-overview.md
+++ b/documentation/technical-overview.md
@@ -7,10 +7,9 @@ Needle Engine roughly consists of three parts:
 - an **exporter** that turns scene and component data into glTF.
 - a **web runtime** that loads and runs the produced glTF files and their extensions.
 
-The editor extensions currently support the Unity Editor, with some promising experiments for Blender on the horizon (but no ETA).  
 The web runtime uses three.js for rendering, adds a component system on top of the three scene graph and hooks up extension loaders for our custom glTF extensions.  
 
-Effectively, this turns the Unity Editor into a full member of a regular web development toolchain – "just" one more piece that gets added to the regular HTML, JavaScript, CSS and bundling workflow.  
+Effectively, this turns tools like Unity or Blender into spatial web development powerhouses – adding glTF assets to the typical HTML, CSS, JavaScript and bundling workflow.  
 
 
 ## glTF Assets
diff --git a/documentation/testimonials.md b/documentation/testimonials.md
index cef640e3a..f40f275ee 100644
--- a/documentation/testimonials.md
+++ b/documentation/testimonials.md
@@ -2,7 +2,7 @@
 next: getting-started
 ---
 
-# Testimonials 💬 
+# Testimonials
 
 <p></p>
 
diff --git a/documentation/vanilla-js.md b/documentation/vanilla-js.md
index 7ebe31e5d..d0d3488b2 100644
--- a/documentation/vanilla-js.md
+++ b/documentation/vanilla-js.md
@@ -1,18 +1,20 @@
 ---
-title: Vanilla Javascript
+title: Using Needle Engine directly from HTML
 ---
 
-# Basic html
+# Using Needle Engine directly from HTML
 
-The following is an example for how to use Needle Engine with vanilla javascript / without using a bundler.  
-See it [live here](https://engine.needle.tools/samples/vanillajs/).
+While our default template uses [vite](https://vitejs.dev) as powerful bundler, Needle Engine can also be used directly with vanilla Javascript – without using any bundler.  
+
+A basic sample can be [found here](https://engine.needle.tools/samples/vanillajs/).  
+Many examples can be found on [StackBlitz](https://stackblitz.com/@marwie/collections/needle-engine).  
 
 ### How to run locally
-Install [vscode live-server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).   
-Then open this index.html with the live-server and navigate to ``http://localhost:5500/index.html`` in your web browser.
+- Install the [VSCode LiveServer extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).  
+- Then open this index.html with the live-server and navigate to ``http://localhost:5500/index.html`` in your web browser.
 
 ::: tip
-Make sure to update the ``<needle-engine src="myScene.glb">`` path to an existing glb file   
+Make sure to update the ``<needle-engine src="myScene.glb">`` path to an existing glb file 
 or [download this sample glb](https://github.com/needle-tools/needle-engine-samples/raw/main/vanilla/myScene.glb) and put it in the same folder as the index.html, name it ``myScene.glb`` or update the src path.
 :::