refactor(site): move to single file component structure

Beg-in · Sep 14, 2018 · 7032a72 · 7032a72
1 parent 80614c5
commit 7032a72
Show file tree

Hide file tree

Showing 120 changed files with 2,414 additions and 603 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,6 @@
 {
   "comments": false,
   "presets": ["stage-3", ["env", {
-    "modules": false,
     "useBuiltIns": true
   }]],
   "env": {

diff --git a/docs/3310acafdeb4809e1629.js b/docs/3310acafdeb4809e1629.js
diff --git a/docs/3310acafdeb4809e1629.js.map b/docs/3310acafdeb4809e1629.js.map
diff --git a/docs/676d4acaaca6831ac8fa.min.css b/docs/676d4acaaca6831ac8fa.min.css
diff --git a/docs/676d4acaaca6831ac8fa.min.js b/docs/676d4acaaca6831ac8fa.min.js
diff --git a/docs/cf6dbfd718f7347496b3.css b/docs/cf6dbfd718f7347496b3.css
diff --git a/docs/cf6dbfd718f7347496b3.css.map b/docs/cf6dbfd718f7347496b3.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><title>Vue-BabylonJS Documentation site</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="HandheldFriendly" content="true"><meta name="theme-color" content="#42b883"><meta name="description" content="Create 3D / VR graphics as simply as writing HTML and CSS"><link rel="alternate" type="application/rss+xml" href="https://github.com/Beg-in/vue-babylonjs/releases.atom"><link href="https://fonts.googleapis.com/css?family=Tajawal:300,400,700" rel="stylesheet"><link rel="shortcut icon" href="https://beg-in.github.io/vue-babylonjs/favicon.png"><link href="https://beg-in.github.io/vue-babylonjs/676d4acaaca6831ac8fa.min.css" rel="stylesheet"></head><body><div id="app"></div><script type="text/javascript" src="https://beg-in.github.io/vue-babylonjs/676d4acaaca6831ac8fa.min.js"></script></body></html>
+<!DOCTYPE html><html><head><title>Vue-BabylonJS Documentation site</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="HandheldFriendly" content="true"><meta name="theme-color" content="#42b883"><meta name="description" content="A ready-to-go 3d environment for Vue.js using Babylon.js"><meta name="description" content="Create 3D / VR graphics as simply as writing HTML and CSS"><link rel="alternate" type="application/rss+xml" href="https://github.com/Beg-in/vue-babylonjs/releases.atom"><link href="https://fonts.googleapis.com/css?family=Tajawal:300,400,700" rel="stylesheet"><link rel="shortcut icon" href="https://beg-in.github.io/vue-babylonjs/favicon.png"><link href="https://beg-in.github.io/vue-babylonjs/cf6dbfd718f7347496b3.css" rel="stylesheet"></head><body><noscript>Sorry, vue-babylonjs requires that you have JavaScript enabled.<a target="_blank" rel="noopener" href="https://www.enable-javascript.com/">See here for instructions.</a></noscript><div id="app"></div><script type="text/javascript" src="https://beg-in.github.io/vue-babylonjs/3310acafdeb4809e1629.js"></script></body></html>
diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('../site/.eslintrc');
diff --git a/examples/animation.js b/examples/animation.js
@@ -0,0 +1,37 @@
+const BOXES = [
+  [0, 0, 0],
+  [0, 0, 4],
+  [0, 0, -4],
+  [0, 4, 0],
+  [0, -4, 0],
+  [0, 4, 4],
+  [0, 4, -4],
+  [0, -4, 4],
+  [0, -4, -4],
+  [4, 0, 0],
+  [-4, 0, 0],
+  [4, 0, 4],
+  [4, 0, -4],
+  [-4, 0, 4],
+  [-4, 0, -4],
+  [4, 4, 0],
+  [4, -4, 0],
+  [-4, 4, 0],
+  [-4, -4, 0],
+  [4, 4, 4],
+  [4, 4, -4],
+  [4, -4, 4],
+  [4, -4, -4],
+  [-4, 4, 4],
+  [-4, 4, -4],
+  [-4, -4, 4],
+  [-4, -4, -4],
+];
+
+export default {
+  computed: {
+    boxes() {
+      return BOXES;
+    },
+  },
+};
diff --git a/examples/animation.pug b/examples/animation.pug
@@ -0,0 +1,11 @@
+Scene
+  Camera
+  HemisphericLight(diffuse="#0000FF")
+  Entity(:position="[0, 0, 5]")
+    Animation(property="rotation.x" :duration="5")
+      Key(frame="0%" :value="0")
+      Key(frame="100%" :value="Math.PI * 2")
+    Animation(property="rotation.y" :duration="5" :end="Math.PI * 2")
+    Animation(property="rotation.z" :duration="5" :end="Math.PI * 2")
+    PointLight(diffuse="#FF0000")
+    Box(v-for="(position, key) in boxes" :key="key" :position="position")
diff --git a/examples/animation.vue b/examples/animation.vue
@@ -0,0 +1,2 @@
+<script src="./animation.js"></script>
+<template lang="pug" src="./animation.pug"></template>
diff --git a/examples/shader/fragment.glsl → examples/fragment.glsl b/examples/shader/fragment.glsl → examples/fragment.glsl
diff --git a/examples/logo.js b/examples/logo.js
@@ -0,0 +1,7 @@
+import Side from './side.vue';
+
+export default {
+  components: {
+    Side,
+  },
+};
diff --git a/examples/logo/template.pug → examples/logo.pug b/examples/logo/template.pug → examples/logo.pug
diff --git a/examples/logo.vue b/examples/logo.vue
@@ -0,0 +1,2 @@
+<script src="./logo.js"></script>
+<template lang="pug" src="./logo.pug"></template>
diff --git a/examples/logo/index.js b/examples/logo/index.js
diff --git a/examples/logo/side/vue.pug b/examples/logo/side/vue.pug
diff --git a/examples/logo/vue.pug b/examples/logo/vue.pug
diff --git a/examples/material/template.pug → examples/material.pug b/examples/material/template.pug → examples/material.pug
diff --git a/examples/material.vue b/examples/material.vue
@@ -0,0 +1 @@
+<template lang="pug" src="./material.pug"></template>
diff --git a/examples/material/vue.pug b/examples/material/vue.pug
diff --git a/examples/observable/index.js → examples/observable.js b/examples/observable/index.js → examples/observable.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   data() {
     return {
       tick: 1,

diff --git a/examples/observable/template.pug → examples/observable.pug b/examples/observable/template.pug → examples/observable.pug
diff --git a/examples/observable.vue b/examples/observable.vue
@@ -0,0 +1,2 @@
+<script src="./observable.js"></script>
+<template lang="pug" src="./observable.pug"></template>
diff --git a/examples/observable/vue.pug b/examples/observable/vue.pug
diff --git a/examples/physics.js b/examples/physics.js
@@ -0,0 +1,7 @@
+import LogoSide from './side.vue';
+
+export default {
+  components: {
+    LogoSide,
+  },
+};
diff --git a/examples/physics/template.pug → examples/physics.pug b/examples/physics/template.pug → examples/physics.pug
diff --git a/examples/physics.vue b/examples/physics.vue
@@ -0,0 +1,2 @@
+<script src="./physics.js"></script>
+<template lang="pug" src="./physics.pug"></template>
diff --git a/examples/physics/index.js b/examples/physics/index.js
diff --git a/examples/physics/vue.pug b/examples/physics/vue.pug
diff --git a/examples/property/template.pug → examples/property.pug b/examples/property/template.pug → examples/property.pug
diff --git a/examples/property.vue b/examples/property.vue
@@ -0,0 +1 @@
+<template lang="pug" src="./property.pug"></template>
diff --git a/examples/property/vue.pug b/examples/property/vue.pug
diff --git a/examples/scene/template.pug → examples/scene.pug b/examples/scene/template.pug → examples/scene.pug
diff --git a/examples/scene.vue b/examples/scene.vue
@@ -0,0 +1 @@
+<template lang="pug" src="./scene.pug"></template>
diff --git a/examples/scene/vue.pug b/examples/scene/vue.pug
diff --git a/examples/shader.js b/examples/shader.js
@@ -0,0 +1,25 @@
+import { BABYLON } from 'vue-babylonjs';
+
+import VERTEX from './vertex.glsl';
+import FRAGMENT from './fragment.glsl';
+
+const NAME = 'demo';
+
+BABYLON.Effect.ShadersStore[`${NAME}VertexShader`] = VERTEX;
+BABYLON.Effect.ShadersStore[`${NAME}FragmentShader`] = FRAGMENT;
+
+export default {
+  computed: {
+    vertexShader() {
+      return VERTEX;
+    },
+
+    fragmentShader() {
+      return FRAGMENT;
+    },
+
+    shader() {
+      return NAME;
+    },
+  },
+};
diff --git a/examples/shader/template.pug → examples/shader.pug b/examples/shader/template.pug → examples/shader.pug
diff --git a/examples/shader.vue b/examples/shader.vue
@@ -0,0 +1,2 @@
+<script src="./shader.js"></script>
+<template lang="pug" src="./shader.pug"></template>
diff --git a/examples/shader/index.js b/examples/shader/index.js
diff --git a/examples/shader/vue.pug b/examples/shader/vue.pug
diff --git a/examples/logo/side/template.pug → examples/side.pug b/examples/logo/side/template.pug → examples/side.pug
diff --git a/examples/side.vue b/examples/side.vue
@@ -0,0 +1 @@
+<template lang="pug" src="./side.pug"></template>
diff --git a/examples/shader/vertex.glsl → examples/vertex.glsl b/examples/shader/vertex.glsl → examples/vertex.glsl
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "scripts": {
     "b": "CONTEXT=$(pwd) npm explore begin-build -- npm run",
     "start": "npm run b start:client",
-    "build": "rm -rf docs && npm run b build:prd",
+    "build": "rm -rf docs && npm run b build",
     "dist:rollup": "rollup --config",
     "dist:uglify": "uglifyjs dist/umd.js -c -m -o dist/umd.min.js",
     "dist": "rm -rf lib dist && npm run dist:rollup && npm run dist:uglify",
@@ -50,10 +50,11 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-3": "^6.24.1",
-    "begin-build": "^0.15.0-beta.2",
-    "begin-project": "0.3.1",
+    "begin-build": "^0.16.0",
+    "begin-project": "^0.4.0",
     "cannon": "^0.6.2",
     "earcut": "^2.1.3",
+    "eslint-plugin-vue": "^5.0.0-beta.3",
     "find": "^0.2.9",
     "frow": "^3.0.4",
     "glslify-loader": "1.0.2",
@@ -75,7 +76,5 @@
     "require": [
       "babel-register"
     ]
-  },
-  "// HACK: postcss-loader must have config": "",
-  "postcss": {}
+  }
 }
diff --git a/properties.js b/properties.js
@@ -0,0 +1,74 @@
+'use strict';
+
+module.exports = {
+  production: {
+    build: {
+      domain: 'beg-in.github.io',
+      main: './site/index.js',
+      cdn: 'https://beg-in.github.io/vue-babylonjs/',
+      root: 'https://beg-in.github.io/vue-babylonjs/',
+      title: 'Vue-BabylonJS Documentation site',
+      color: '#42b883',
+      dist: 'docs',
+      config() {
+        let prism = require('prismjs');
+        let loadLanguages = require('prismjs/components/index');
+        let basic = require('begin-build/config/basic');
+        let vue = require('begin-build/config/vue');
+        let path = require('path');
+
+        return Object.assign({}, basic, {
+          local() {
+            loadLanguages(['pug', 'bash']);
+            let hl = (text, { lang = 'markup' } = {}) => {
+              if (text[0] === '\n') {
+                text = text.substring(1);
+              }
+              return `<code lang="${lang}">${prism.highlight(text, prism.languages[lang], lang)}</code>`;
+            };
+
+            return {
+              module: {
+                rules: {
+                  $build: Array,
+                  scripts: {
+                    exclude: /node_modules\/(?!(begin-|babylonjs))/,
+                  },
+                  markup: {
+                    use: {
+                      $build: Array,
+                      pug: {
+                        options: {
+                          filters: {
+                            hl,
+                          },
+                          data: {
+                            hl,
+                          },
+                        },
+                      },
+                    },
+                  },
+                  shaders: {
+                    test: /\.(glsl|frag|vert)$/,
+                    use: {
+                      $build: Array,
+                      raw: 'raw-loader',
+                      glsl: 'glslify-loader',
+                    },
+                  },
+                },
+              },
+              resolve: {
+                alias: {
+                  'vue-babylonjs$': path.join(__dirname, 'src/index.js'),
+                },
+              },
+            };
+          },
+          vue,
+        });
+      },
+    },
+  },
+};
diff --git a/properties.json b/properties.json
diff --git a/site/.eslintrc.js b/site/.eslintrc.js
@@ -1,4 +1,5 @@
 'use strict';
 
 module.exports = require('begin-project/lint/client');
-
+module.exports.extends = ['plugin:vue/strongly-recommended'];
+module.exports.overrides = [{ files: ['*.vue'], rules: { indent: 'off' } }]
diff --git a/site/animation.vue b/site/animation.vue
@@ -0,0 +1,30 @@
+<script>
+import Example from '../examples/animation/vue.pug';
+import Controls from './controls.vue';
+
+export default {
+  components: {
+    Example,
+    Controls,
+  },
+};
+</script>
+
+<template lang="pug">
+article
+  h2 Animations
+
+  h4 Example
+
+  Controls(:inline="true" route="/animations/fullscreen")
+    Example
+    h5(slot="filename") animation.vue
+    pre(slot="pug")
+      include:hl(lang="pug") ../examples/animation.pug
+    pre(slot="html")
+      include:hl:pug(pretty=true) ../examples/animation.pug
+    pre(slot="script")
+      include:hl(lang="javascript") ../examples/animation.js
+
+  include:markdown-it(plugins=['markdown-it-prism']) ../src/animation/docs.md
+</template>
diff --git a/site/animation/index.js b/site/animation/index.js
diff --git a/site/animation/template.pug b/site/animation/template.pug
diff --git a/site/animation/vue.pug b/site/animation/vue.pug