create download tiles, add section and sample about web component usa…

…ge, add after-download forward URLs

documentation/.vuepress/components/NoDownloadYet.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+
+export default {
+    methods: {
+        checkQueryParams,
+    }
+}
+
+function checkQueryParams() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has('dl');
+}
+</script>
+
+<template>
+    <slot v-if="!checkQueryParams()"></slot>
+</template>

documentation/.vuepress/components/needle-button.vue

@@ -19,6 +19,11 @@ export default {
 // declare method that returns the next_url relative to where we're at
 // this is used to pass the next_url to the button component
 function get_next_url() {
+    if (typeof window === 'undefined') {
+        return this.href;
+    }
+    if (!this.next_url) return this.href;
+    
     let nextUrl = window.location.origin + window.location.pathname;
     let target = new URL(this.href);
     // get propUrl relative to nextUrl

documentation/.vuepress/components/tool-tile.vue

@@ -0,0 +1,96 @@
+<script lang="ts">
+
+export default {
+    props: {
+        image: String,
+        docs_url: String,
+    },
+    methods: {
+        getClass,
+    }
+}
+
+function getClass() {
+    if (!this.$slots['video-tutorial']) {
+        return "small";
+    } else {
+        return "";
+    }
+}
+
+</script>
+
+<template>
+    <div :class='getClass()'>
+        <img :src="image" alt="Tool Image" :class='image ? "": "hidden"'/>
+        <h3><slot name="tool-name"></slot></h3>
+        <p class="description"><slot name="tool-description"></slot></p>
+        <slot name="download-button"></slot>
+        <p><slot name="video-tutorial"></slot></p>
+        <a v-if="docs_url":href="docs_url">Next Steps</a>
+    </div>
+</template>
+
+
+<style scoped>
+    img {
+        max-height: 70px;
+    }
+
+    img.hidden {
+        visibility: hidden;
+    }
+
+    div {
+        /* adapted from Pricing cards */
+        --b811b9c2: linear-gradient(180deg, #fff 50%, #ddd 350%);
+        --7e5aa0ea: white;
+        --e2940f36: 1px;
+        background: var(--b811b9c2);
+        border: var(--e2940f36) solid var(--7e5aa0ea);
+        border-radius: 1em;
+        box-shadow: 0 -.5px 3px 1px #0000001a;
+        display: flex;
+        flex-direction: column;
+        max-width: 230px;
+        min-width: 200px;
+        padding: 1em;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        margin-right: 1em;
+        margin-top: 1em;
+        flex-wrap: nowrap;
+    }
+
+    div.small {
+        height: 220px;
+    }
+
+    div.small .description {
+        height: initial;
+        margin-bottom: 0.5em;
+    }
+
+    div:last-child:not(.small) {
+        margin-right: 0;
+    }
+
+    h3 {
+        font-weight: bold;
+        margin-top: 0.5em;
+        padding-top: 0;
+    }
+
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    p.description {
+        font-size: 0.8em;
+        height: 75px;
+        margin-top: 0.5em;
+        text-align: center;
+    }
+</style>

documentation/.vuepress/components/tool-tiles.vue

@@ -0,0 +1,126 @@
+
+
+<template>
+    <div>
+        <tool-tile image="/docs/imgs/unity-logo.webp" docs_url="/docs/unity/">
+            <template v-slot:tool-name>
+                Needle × Unity
+            </template>
+            <template v-slot:tool-description>
+                Unity 2021.3 LTS<br/>
+                Unity 2022.3 LTS<br/>
+                Unity 6
+            </template>
+            <template v-slot:download-button>
+                <needle-button 
+                    event_goal="download_unity" 
+                    event_position="getting_started" 
+                    large 
+                    href="https://engine.needle.tools/downloads/unity?utm_source=needle_docs&utm_content=getting_started" 
+                    next_url="./../unity/">
+                    <strong>Download</strong>
+                </needle-button>
+            </template>
+            <template v-slot:video-tutorial>
+                <video-embed src="https://www.youtube.com/watch?v=gfslrxhkH3E" limit_height max_height="70xp"/>
+            </template>
+        </tool-tile>
+
+        <tool-tile image="/docs/blender/logo.png" docs_url="/docs/blender/">
+            <template v-slot:tool-name>
+                Needle × Blender
+            </template>
+            <template v-slot:tool-description>
+                Blender 4.0<br/>
+                Blender 4.1<br/>
+                Blender 4.2+
+            </template>
+            <template v-slot:download-button>
+                <needle-button 
+                    event_goal="download_blender" 
+                    event_position="getting_started" 
+                    large 
+                    href="https://engine.needle.tools/downloads/blender?utm_source=needle_docs&utm_content=getting_started">
+                    <strong>Download</strong>
+                </needle-button>
+            </template>
+            <template v-slot:video-tutorial>
+                <video-embed src="https://www.youtube.com/watch?v=TXEHR4Cq7iU" limit_height max_height="70xp"/>
+            </template>
+        </tool-tile>
+    </div>
+    <div>
+        <tool-tile image="/docs/imgs/logo-webcomponents.png">
+            <template v-slot:tool-name>
+                &lt;needle-engine&gt;<br/>Web Component
+            </template>
+            <template v-slot:tool-description>
+                Rich, interactive 3D content made easy
+            </template>
+            <template v-slot:download-button>
+                <needle-button 
+                    event_goal="download_webcomponent" 
+                    event_position="getting_started" 
+                    large same_tab
+                    href="/docs/three/">
+                    <strong>Get Started</strong>
+                </needle-button>
+            </template>
+        </tool-tile>
+
+        <tool-tile image="/docs/imgs/threejs-logo.webp">
+            <template v-slot:tool-name>
+                Needle × three.js
+            </template>
+            <template v-slot:tool-description>
+                three.js r162+
+            </template>
+            <template v-slot:download-button>
+                <needle-button 
+                    event_goal="download_threejs" 
+                    event_position="getting_started" 
+                    large same_tab
+                    href="/docs/three/">
+                    <strong>Get Started</strong>
+                </needle-button>
+            </template>
+        </tool-tile>
+
+
+        <tool-tile>
+            <template v-slot:tool-name>
+                Other Workflows
+            </template>
+            <template v-slot:tool-description>
+                Learn how to integrate Needle Engine into your tool or workflow
+            </template>
+            <template v-slot:download-button>
+                <needle-button 
+                    event_goal="download_custom" 
+                    event_position="getting_started" 
+                    large same_tab
+                    href="/docs/custom-integrations/">
+                    <strong>Learn More</strong>
+                </needle-button>
+            </template>
+        </tool-tile>
+    </div>
+</template>
+
+<style scoped>
+
+div {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+div.vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>

documentation/.vuepress/components/video-embed.vue

@@ -17,8 +17,12 @@ export default props;
 <style scoped>
 .container {
   max-width: 100%;
+  /*
   height: v-bind('limit_height ? "400px" : "initial"');
   max-height: v-bind('limit_height ? max_height : "initial"');
+  */
+  aspect-ratio: 16/9;
+  max-height: 300px;
 }
 
 video,
@@ -31,6 +35,7 @@ video,
   max-height: 100%;
   margin: .75em 0;
   max-height: v-bind('limit_height ? max_height : "100%"');
+  aspect-ratio: 16/9;
 }
 
 #ytplayer {

documentation/.vuepress/config.ts

@@ -442,20 +442,24 @@ export default defineUserConfig({
                             link: "/getting-started/",
                         },
                         {
-                            text: 'Getting started with Unity',
+                            text: 'Needle Engine for Unity',
                             link: '/unity/',
                         },
                         {
-                            text: 'Getting started with Blender',
+                            text: 'Needle Engine for Blender',
                             link: '/blender/',
                         },
                         {
-                            text: 'Getting started with three.js',
+                            text: 'Needle Engine as Web Component',
                             link: '/three/',
                         },
                         {
                             text: 'Custom integrations',
                             link: '/custom-integrations/',
+                        },
+                        {
+                            text: 'Support and Community',
+                            link: '/support',
                         }
                     ]
                 },

documentation/.vuepress/public/code-samples/basic-webcomponent.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Import the Needle Engine module -->
+    <script 
+        type="module" 
+        src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.min.js">
+    </script>
+</head>
+<body style="margin:0; padding:0;">
+    <!-- 
+    Add the <needle-engine> HTML component to your page, and specify a source file.
+    This .glb file contains interactions, sounds, a skybox, and animations,
+    because it was exported from our Unity integration.
+    -->
+    <needle-engine src="https://cloud.needle.tools/api/v1/public/873a48a/10801b111/MusicalInstrument.glb"></needle-engine>
+</body>
+</html>

documentation/.vuepress/styles/index.scss

@@ -525,4 +525,21 @@ div[class*=language-] > pre code {
 
 .vp-page ol li > p {
   display: inline;
+}
+
+.vp-sidebar-items ul {
+  line-height: 1.85em;
+}
+
+.vp-sidebar-children .vp-sidebar-children .vp-sidebar-item:not(.vp-sidebar-heading) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.vp-sidebar-item:not(.vp-sidebar-heading) + .vp-sidebar-children {
+  line-height: 1.65em;
+}
+
+div.code-group-item.active:has(iframe) {
+  margin-top: 30px;
 }