[site] work on site templates

vinutv · Sep 18, 2016 · ad21cac · ad21cac
1 parent f11918a
commit ad21cac
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "build": "webpack --config webpack-dev.config.js",
     "dev": "webpack-dev-server --config webpack-dev.config.js",
     "dist": "webpack index.js dist/kframe.js && webpack -p index.js dist/kframe.min.js",
+    "generate": "node site/generate",
     "postinstall": "node lib/scripts/install.js",
     "postpublish": "npm run dist",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -38,8 +39,10 @@
   "homepage": "https://github.com/ngokevin/kframe#readme",
   "devDependencies": {
     "browser-sync": "^2.16.0",
+    "cheerio": "^0.22.0",
     "glob": "^7.0.6",
     "http-server": "^0.9.0",
+    "nunjucks": "^2.5.2",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.2"
   }

diff --git a/site/generate.js b/site/generate.js
@@ -0,0 +1,63 @@
+var cheerio = require('cheerio');
+var glob = require('glob');
+var fs = require('fs');
+var nunjucks = require('nunjucks');
+var path = require('path');
+
+var GITHUB = 'https://github.com/ngokevin/kframe/tree/master';
+
+nunjucks.configure('site/templates');
+
+// Get component data.
+var components = glob.sync('components/*').map(function (componentPath) {
+  // Get component metadata.
+  var json = require(path.join(componentPath, 'package.json'));
+
+  // Get examples.
+  var examples = glob.sync(path.join(componentPath, 'examples/*/index.html'));
+  examples = examples.map(function (examplePath) {
+    var html = fs.readFileSync(examplePath, 'utf-8');
+    var $ = cheerio.load(html);
+
+    // Preview image.
+    var image = null;
+    if (fs.existsSync(path.join(examplePath, 'preview.png'))) {
+      image = path.join(examplePath, 'preview.png');
+    } else if (fs.existsSync(path.join(examplePath, 'preview.gif'))) {
+      image = path.join(examplePath, 'preview.gif');
+    }
+
+    // Metadata.
+    return {
+      title: $('title').text(),
+      description: $('meta[name="description"]').attr('content'),
+      github: path.join(GITHUB, examplePath),
+      path: examplePath.replace('/index.html', '/'),
+      image: image
+    };
+  });
+
+  return {
+    description: json['description'],
+    github: path.join(GITHUB, componentPath, '/'),
+    name: componentPath.split('/')[1],
+    examples: examples
+  };
+});
+
+// Get bundled components.
+var indexJs = fs.readFileSync('index.js', 'utf-8');
+var regex = /components\/(.*)\//g;
+var bundled = [];
+while (match = regex.exec(indexJs)) {
+  bundled.push(match[1]);
+};
+
+// Final templating context.
+var ctx = {
+  bundled: bundled,
+  components: components
+};
+
+var readme = nunjucks.render('README.md', ctx);
+console.log(readme);
diff --git a/site/metadata.yml b/site/metadata.yml
@@ -0,0 +1,7 @@
+components:
+  - title: Animation
+    name: animation
+    examples:
+      - name: Basic
+        path: basic/
+        description: Basic animation example.
diff --git a/site/templates/README.md b/site/templates/README.md
@@ -0,0 +1,61 @@
+# kframe
+
+![kframe](https://cloud.githubusercontent.com/assets/674727/15790659/69860590-2987-11e6-9511-65c28e583c6f.png)
+
+Kevin's collection of A-Frame components and scenes.
+
+[VIEW DEMOS](https://ngokevin.github.io/kframe/)
+
+## Components
+
+{% for component in components -%}
+- [{{ component.name }}]({{ component.github }}) - {{ component.description }}
+{% endfor %}
+
+## Installation
+
+K-Frame bundles some components together to `kframe.js` for convenience:
+
+{% for component in bundled -%}
+- {{ component }}
+{% endfor %}
+
+### Browser
+
+Install and use by directly including the [browser files](dist):
+
+```html
+<head>
+  <title>My A-Frame Scene</title>
+  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
+  <script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
+</head>
+
+<body>
+  <a-scene>
+    <!-- Refer to individual component documentation for specific usage. -->
+  </a-scene>
+</body>
+```
+
+### npm
+
+Or install from npm. Requiring K-Frame will automatically register the
+components and systems.
+
+```js
+require('kframe');
+```
+
+### Installing Individual Components
+
+For documentation on installing individual components, see the [documentation
+pages](#components) for each component.
+
+## Local Installation
+
+```bash
+git clone [email protected]:ngokevin/kframe
+npm install  # Run npm install on all inner modules
+npm run dev  # Webpack dev server that watches all component files
+```
diff --git a/site/templates/component.html b/site/templates/component.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <title>A-Frame {{ longName }} Component</title>
+    <style>
+      html {
+        background: #38486F;
+        color: #FAFAFA;
+        font-family: monospace;
+        font-size: 20px;
+        padding: 10px 20px;
+      }
+      h1 {
+        font-weight: 300;
+      }
+      a {
+        color: #FAFAFA;
+        display: block;
+        padding: 15px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>A-Frame {{ longName }} Component</h1>
+
+    {% for example in examples %}
+      <a href="{{ example.path }}">{{ example.name }}</a>
+      <p>{{ example.description }}
+    {% endfor %}
+
+    <!-- GitHub Corner. -->
+    <a href="https://github.com/ngokevin/kframe" class="github-corner">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#2B4450; color:#DFEBED; position: absolute; top: 0; border: 0; right: 0;">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+  </body>
+</html>