Added site content

.gitignore

@@ -0,0 +1,15 @@
+/src/client/shared.ts
+/src/node/shared.ts
+*.log
+*.tgz
+.DS_Store
+.idea
+.temp
+.vite_opt_cache
+.vscode
+dist
+cache
+temp
+examples-temp
+node_modules
+pnpm-global

docs/.vitepress/config.mts

@@ -0,0 +1,205 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Phantom Camera",
+  description: "A dynamic 2D & 3D camera addon for Godot 4",
+  head: [
+      ['link', {rel: 'icon', type: 'image/svg+xml', href: '/assets/icons/phantom-camera.svg'}],
+      ['link', {rel: 'icon', type: 'image/png', href: '/favicon.png'}],
+
+      ['meta', {property: 'og:type', content: 'website'}],
+      ['meta', {property: 'og:title', content: 'Phantom Camera'}],
+      ['meta', {property: 'og:description', content: 'A dynamic 2D & 3D camera addon for Godot 4'}],
+      ['meta', {property: 'og:url', content: 'https://phantom-camera.dev'}],
+      ['meta', {property: 'og:image', content: '/meta-image.png'}],
+
+      ['meta', {name: 'twitter:card', content: "summary"}],
+      ['meta', {name: 'twitter:title', content: 'Phantom Camera'}],
+      ['meta', {name: 'twitter:description', content: 'A dynamic 2D & 3D camera addon for Godot 4'}],
+      ['meta', {name: 'twitter:site', content: '@marcusskov'}],
+      ['meta', {name: 'twitter:image', content: '/meta-image.png'}],
+  ],
+  appearance: 'force-dark',
+  transformHead({ assets }) {
+    const fontFile = assets.find(file => /Nunito\.\w+\.ttf/)
+    const codeFontFile = assets.find(file => /JetBrainsMono\.\w+\.ttf/)
+    if (fontFile) {
+      return [
+          [
+            'link',
+            {
+              rel: 'preload',
+              href: fontFile,
+              as: 'font',
+              type: 'font/ttf',
+              crossorigin: '',
+            }
+          ]
+      ]
+    }
+    if (codeFontFile) {
+      return [
+        [
+          'link',
+          {
+            rel: 'preload',
+            href: codeFontFile,
+            as: 'font',
+            type: 'font/ttf',
+            crossorigin: '',
+          }
+        ]
+      ]
+    }
+  },
+  srcExclude: [
+    '**/parts/*.md'  
+  ],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/assets/icons/phantom-camera.svg',
+    editLink: {
+      pattern: 'https://github.com/ramokz/phantom-camera/edit/documentation/documentation/docs/:path',
+      text: 'Suggest changes to this page'
+    },
+
+    nav: [
+      {
+        text: 'Home', link: '/'
+      },
+      {
+        text: 'Docs', link: '/introduction/what-is-this'
+      },
+    ],
+
+    outline: {
+      label: "This page",
+      level: [1,4]
+    },
+
+    sidebar: [
+      {
+        text: 'Introduction',
+        items: [
+          {
+            text: 'What is this?', link: '/introduction/what-is-this'
+          },
+          {
+            text: 'Installation', link: '/introduction/installation'
+          },
+          {
+            text: 'Scene Requirements', link: '/introduction/scene-requirements'
+          },
+        ]
+      },
+      {
+        text: 'Core Nodes',
+        items: [
+          {
+            text: 'Overview', link: '/core-nodes/overview'
+          },
+          {
+            text: 'PhantomCamera2D', link: '/core-nodes/phantom-camera-2d'
+          },
+          {
+            text: 'PhantomCamera3D', link: '/core-nodes/phantom-camera-3d'
+          },
+          {
+            text: 'PhantomCameraHost', link: '/core-nodes/phantom-camera-host'
+          },
+          {
+            text: 'Multiple Phantom Cameras', link: '/core-nodes/multiple-phantom-cameras'
+          },
+        ]
+      },
+      {
+        text: 'Priority', link: "/priority",
+      },
+      {
+        text: 'Follow Modes',
+        items: [
+          {
+            text: 'Overview', link: "/follow-modes/overview"
+          },
+          {
+            text: 'Glued', link: '/follow-modes/glued'
+          },
+          {
+            text: 'Simple', link: '/follow-modes/simple'
+          },
+          {
+            text: 'Group', link: '/follow-modes/group'
+          },
+          {
+            text: 'Path', link: '/follow-modes/path'
+          },
+          {
+            text: 'Framed', link: '/follow-modes/framed'
+          },
+          {
+            text: 'Third Person (3D)', link: '/follow-modes/third-person'
+          },
+        ]
+      },
+      {
+        text: 'Look At Modes (3D)',
+        items: [
+          {
+            text: 'Overview', link: "/look-at-modes/overview"
+          },
+          {
+            text: 'Mimic', link: '/look-at-modes/mimic'
+          },
+          {
+            text: 'Simple', link: '/look-at-modes/simple'
+          },
+          {
+            text: 'Group', link: '/look-at-modes/group'
+          },
+        ]
+      },
+      {
+        text: 'Tween', link: "/tween",
+      },
+      {
+        text: 'Viewfinder', link: "/viewfinder",
+      },
+      {
+        text: 'Timeline Animation', link: "/timeline-animation",
+      },
+      {
+        text: 'Support',
+        items: [
+          {
+            text: 'How To Contribute', link: "/support/how-to-contribute"
+          },
+          {
+            text: 'FAQ', link: "/support/faq"
+          },
+          {
+            text: 'Questions & Help', link: "/support/questions-help"
+          },
+        ]
+      },
+      {
+        text: 'Roadmap', link: "/roadmap"
+      },
+    ],
+
+    search: {
+      provider: "algolia",
+      options: {
+        appId: 'FCA0M2RPZ7',
+        apiKey: 'e0bad5c9ed0efeb70f0e49066cd34705',
+        indexName: 'phantom-camera',
+      }
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/ramokz/phantom-camera' },
+      { icon: 'mastodon', link: 'https://mastodon.gamedev.place/@marcusskov' },
+      { icon: 'twitter', link: 'https://twitter.com/marcusskov' }
+    ],
+  }
+})

docs/.vitepress/theme/components/Tabs2D3D.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { store } from "../../../store.ts";
+import { computed } from "vue";
+
+const props = defineProps({
+  propertyName: {
+    type: String,
+    required: true
+  }
+})
+
+const propertyNameID = computed(() => {
+  return props.propertyName.replace(/ /g, '')
+})
+</script>
+
+<template>
+  <div class="toggle-tabs">
+    <input type="radio" :id="propertyNameID + '2D'" :name="propertyNameID" :value="store.is2D" v-model="store.is2D" :checked="store.is2D" @change="store.toggle2D(true)">
+    <label :for="propertyNameID + '2D'" @mouseenter="$emit('tabHover', true)" @mouseleave="$emit('tabHover', false)">
+      <img alt="Phantom Camera 2D" src="/assets/icons/phantom-camera-2D.svg" width="32"/>
+      2D
+    </label>
+    <input type="radio" :id="propertyNameID + '3D'" :name="propertyNameID" :value="!store.is2D" v-model="store.is2D" :checked="!store.is2D" @change="store.toggle2D(false)">
+    <label :for="propertyNameID + '3D'">
+      <img alt="Phantom Camera 3D" src="/assets/icons/phantom-camera-3D.svg" width="32"/>
+      3D
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.toggle-tabs {
+  display: flex;
+  input {
+    margin: 20px;
+    appearance: none;
+    display: none;
+    & + label {
+      cursor: pointer;
+      font-size: 18px;
+      font-weight: 800;
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      padding: 6px 12px 6px 12px;
+      border-radius: 12px 12px 0 0;
+      opacity: 0.8;
+      border: 2px solid transparent;
+      margin-bottom: -2px;
+      &:hover {
+        box-shadow: 0 0 30px var(--vp-c-bg-alt) inset;
+        border-color: var(--vp-c-brand-1);
+      }
+    }
+    &:checked + label {
+      opacity: 1;
+      background: var(--vp-c-bg-alt);
+      box-shadow: 0px 0px 10px var(--vp-c-bg) inset;
+      border: 2px solid var(--vp-c-gray-3);
+      z-index: -10;
+    }
+  }
+}
+</style>

docs/.vitepress/theme/components/VideoTabs.vue

@@ -0,0 +1,37 @@
+<script setup>
+import {withBase} from "vitepress";
+import {store} from "../../../store.ts";
+import Tabs2D3D from "./Tabs2D3D.vue";
+
+const props = defineProps({
+  propertyName: {
+    type: String,
+    required: true
+  },
+  video2d: {
+    type: String,
+    required: true
+  },
+  video3d: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <Tabs2D3D :property-name="propertyName"/>
+  <div class="property-method-container">
+    <video controls v-show="store.is2D">
+      <source :src="withBase(`/assets/${video2d}`)">
+    </video>
+    <video controls v-show="!store.is2D">
+      <source :src="withBase(`/assets/${video3d}`)">
+    </video>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

docs/.vitepress/theme/components/methods/MethodComponent.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  methodType: {
+    type: String,
+    required: true,
+  },
+  methodName: {
+    type: String,
+    required: true,
+  },
+  disableOutlineEntry: {
+    bool: Boolean,
+    required: false
+  }
+})
+
+const id = computed<string>(() => {
+  if (props.disableOutlineEntry) return null
+  if (props.methodName) {
+    return props.methodName.replace(/ /g, '-').toLowerCase() + "-" + props.methodType.replace(/ /g, '-').toLowerCase()
+  }
+})
+</script>
+
+
+<template>
+  <div>
+    <h4 :id="id" tabindex="-1">{{ methodType }}
+      <a class="header-anchor" :href="`#${id}`" :aria-label="`Permalink to ${id}`">&#8203;</a>
+    </h4>
+
+    <div class="method">
+      <slot name="method">
+        <p class="missing-text">MISSING METHOD</p>
+      </slot>
+    </div>
+
+    <div>
+      <slot name="example"/>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.method {
+  --font-size: 16px;
+  font-size: var(--font-size);
+  color: var(--vp-c-white);
+  font-weight: 700;
+  &:deep(p) {
+    font-family: var(--vp-font-family-mono);
+  }
+}
+
+.method :deep(code) {
+  font-size: var(--font-size);
+}
+</style>