Started incorporating the docs into the repo

.vscode/settings.json

@@ -11,7 +11,8 @@
     "**/node_modules": true,
     "**/bower_components": true,
     "**/*.code-search": true,
-    "**/dist": true
+    "**/dist": true,
+    "docs/api": true
   },
   "eslint.workingDirectories": ["./"],
   "eslint.options": {

docs/.vuepress/components/KeyboardShortcut.vue

@@ -0,0 +1,39 @@
+<template>
+  <span class="wrapper">
+    <span class="chosen-platform">{{isMac ? 'mac' : 'pc'}}</span>
+    {{textForChosenPlatform}}
+  </span>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: {
+    mac: String,
+    pc: String
+  },
+  beforeMount() {},
+  computed: {
+    textForChosenPlatform() {
+      return this.isMac ? this.mac : this.pc;
+    }
+  },
+  data(opts) {
+    const isMac = true;
+    return { isMac };
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  background: #f3f3f3;
+  padding: 0 5px;
+  position: relative;
+}
+
+.chosen-platform {
+  font-size: 0.7em;
+  font-variant: small-caps;
+}
+</style>

docs/.vuepress/components/VideoWithDescription.vue

@@ -0,0 +1,29 @@
+<!-- Creates a <video /> with an aria-described-by attribute for better a11y.
+Example: 
+<VideoWtihDescription src="/path/from/.vuepress/plublic/file.mp4">Description (this must be in one line, otherwise parser will reak) </VideoWithDescription>
+ -->
+<template>
+  <div>
+    <video width="100%" controls v-bind:src="src" v-bind:aria-describedby="descriptorId"/>
+    <div v-bind:id="descriptorId" style="display: none;" aria-hidden="true">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: {
+    src: String
+  },
+  computed: {
+    descriptorId() {
+      return (
+        "aria-description-video--" +
+        this.src.replace(/[^a-zA-Z0-9]{1}/g, "-").toLowerCase()
+      );
+    }
+  }
+});
+</script>

docs/.vuepress/config.js

@@ -0,0 +1,111 @@
+const path = require('path')
+
+const pathToMonorepo = path.join(__dirname, '../..')
+
+module.exports = {
+  title: 'Theatre.js',
+  description: 'Motion graphics for the web',
+  head: [['link', {rel: 'icon', href: '/public/theatrejs-logo-2x.png'}]],
+  themeConfig: {
+    logo: '/public/theatrejs-logo-black.svg',
+    nav: [
+      {
+        text: 'Guide',
+        link: '/',
+      },
+      {
+        text: 'API',
+        link: '/api',
+      },
+      {
+        text: 'Older versions',
+        items: [
+          {
+            text: '0.4 (Current)',
+            link: 'https://docs.theatrejs.com',
+          },
+          {
+            text: '0.3',
+            link: 'https://github.com/ariaminaei/theatre/tree/0.3',
+          },
+          {
+            text: '0.2',
+            link: 'https://v02.docs.theatrejs.com/',
+          },
+          {
+            text: '0.1',
+            link: 'https://github.com/ariaminaei/theatre/tree/0.1',
+          },
+        ],
+      },
+      {
+        text: 'Get in touch',
+        items: [
+          {
+            text: 'Discord community',
+            link: 'https://discord.gg/bm9f8F9Y9N',
+          },
+          {
+            text: 'Twitter',
+            link: 'https://twitter.com/theatre_js',
+          },
+          {
+            text: 'Email',
+            link: 'mailto:hello@theatrejs.com',
+          },
+        ],
+      },
+    ],
+    // sidebarDepth: 4,
+    sidebar: [
+      {
+        title: 'API',
+        path: '/api/',
+      },
+    ],
+    lastUpdated: 'Last Updated',
+
+    repo: 'ariaminaei/theatre',
+    docsRepo: 'ariaminaei/theatre-docs',
+    docsDir: 'docs',
+    docsBranch: 'main',
+    editLinks: true,
+    editLinkText: 'Edit this page on Github',
+  },
+  plugins: [
+    [
+      'vuepress-plugin-typedoc',
+      {
+        entryPoints: [
+          path.join(pathToMonorepo, './theatre/core/dist/index.d.ts'),
+        ],
+        tsconfig: path.join(pathToMonorepo, './theatre/tsconfig.json'),
+        out: 'api/core',
+        // sidebar: {
+        //   fullNames: true,
+        //   parentCategory: 'api',
+        // },
+        readme: 'none',
+        hideInPageTOC: true,
+        categorizeByGroup: false,
+      },
+    ],
+    // [
+    //   'vuepress-plugin-typedoc',
+    //   {
+    //     entryPoints: [
+    //       path.join(pathToMonorepo, './theatre/studio/src/index.ts'),
+    //     ],
+    //     tsconfig: path.join(pathToMonorepo, './theatre/tsconfig.json'),
+    //     out: 'api/studio',
+    //     // sidebar: {
+    //     //   fullNames: true,
+    //     //   parentCategory: 'api',
+    //     // },
+    //     readme: 'none',
+    //     hideInPageTOC: true,
+    //     categorizeByGroup: false,
+    //   },
+    // ],
+  ],
+}

docs/.vuepress/styles/index.styl

@@ -0,0 +1,22 @@
+.content 
+  font-size 15px !important
+
+.site-name
+  display: none !important
+
+.logo 
+  height: 1.8rem !important
+  vertical-align: middle !important
+
+.content a > code 
+  background-color rgba(86, 155, 45, 0.13)
+
+.sidebar a.sidebar-link
+  font-size 15px !important
+  font-weight normal !important
+
+.sidebar a.sidebar-link.active
+  font-weight bold !important
+
+.sidebar > .sidebar-links > li:not(:first-child) 
+  margin-top 0.25rem !important

docs/README.md

@@ -0,0 +1,15 @@
+---
+title: Theatre.js
+next: ./getting-started.md
+---
+
+# Theatre.js
+
+Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.
+
+Theatre can be used both programmatically and visually:
+
+TODO (a simple gif)
+
+Theatre supports all frontend stacks. You can use it to animate DOM elements, THREE.js objects, or any JavaScript variable.
+

docs/api.md

@@ -0,0 +1,8 @@
+---
+title: API
+---
+
+# API
+
+* [`@theatre/core`](./api/core)
+* [`@theatre/studio`](./api/studio)

docs/faq.md

@@ -0,0 +1,3 @@
+# F.A.Q
+
+TODO

docs/getting-started.md

@@ -0,0 +1,37 @@
+---
+title: Getting Started
+---
+
+# Getting started
+
+
+## Install Theatre
+
+Add `@theatre/core` as a dependency via npm or yarn.
+
+```bash
+$ npm install --save @theatre/core
+```
+
+Then add `@theatre/studio` as a dev dependency since we only need it during development.
+
+```bash
+$ npm install --save-dev @theatre/studio
+```
+
+## Import Theatre
+
+```javascript
+// import both core and studio (we can remove studio from the production bundle later)
+import {getProject} from '@theatre/core'
+import studio from '@theatre/studio'
+
+// initialize the studio so the editing tools will show up on the screen
+studio.initialize()
+
+// create our first project
+const myProject = getProject('My first project')
+```
+
+## Next steps
+

docs/privacy.md

@@ -0,0 +1,3 @@
+Under construction
+
+TODO

docs/support.md

@@ -0,0 +1,3 @@
+# Community and Support
+
+Join us on [Discord](https://discord.gg/bm9f8F9Y9N) or write us an [email](mailto:hello@theatrejs.com).

package.json

@@ -13,7 +13,9 @@
     "test": "jest",
     "postinstall": "husky install",
     "deploy": "zx devEnv/deploy.mjs",
-    "lint:all": "eslint . --ext ts,tsx --ignore-path=.gitignore --rulesdir ./devEnv/eslint/rules"
+    "lint:all": "eslint . --ext ts,tsx --ignore-path=.gitignore --rulesdir ./devEnv/eslint/rules",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "lint-staged": {
     "**/*.(t|j)s?(x)": [
@@ -47,6 +49,10 @@
     "zx": "^2.0.0"
   },
   "dependencies": {
-    "node-gyp": "^8.1.0"
+    "node-gyp": "^8.1.0",
+    "typedoc": "^0.21.9",
+    "typedoc-plugin-markdown": "^3.10.4",
+    "vuepress": "^1.8.2",
+    "vuepress-plugin-typedoc": "^0.8.2"
   }
 }

tsconfig.base.json

@@ -14,7 +14,7 @@
     "skipDefaultLibCheck": true,
     "declarationMap": true,
     "stripInternal": true,
-    "emitDeclarationOnly": true,
+    // "emitDeclarationOnly": true,
     "declaration": true,
     "paths": {
       "@theatre/core": ["./theatre/core/src/index.ts"],