start reordering header menu

no new pages for now, just structuring
needle-tools · Sep 3, 2024 · d1bb8a7 · d1bb8a7
1 parent 7c0fd38
commit d1bb8a7
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 83 deletions.
diff --git 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
@@ -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
@@ -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;
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,13 +1,13 @@
 ---
-title: Needle Engine Scripting
+title: Creating and using Components
 ---
 
 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
@@ -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