allow inPlace template compilation using ejs

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

build/index.js

@@ -8,14 +8,15 @@ const collections = require('metalsmith-collections');
 const permalinks = require('metalsmith-permalinks');
 const linkcheck = require('metalsmith-linkcheck');
 const dates = require('metalsmith-jekyll-dates');
-const inPlace = require('metalsmith-in-place');
-const layouts = require('metalsmith-layouts');
+const assets = require('metalsmith-assets');
 const watch = require('metalsmith-watch');
 const when = require('metalsmith-if');
 
 // custom plugins
 const changeExt = require('./plugins/change-ext');
 const markdown = require('./plugins/markdown');
+const partials = require('./plugins/partials');
+const layouts = require('./plugins/layouts');
 const toc = require('./plugins/toc');
 
 const isDev = process.argv[2] === '--dev';
@@ -80,24 +81,24 @@ Metalsmith(cwd)
       }
     ]
   }))
-  // allow inPlace to process files
-  .use(changeExt({
-    pattern: `*.html`,
-    ext: '.ejs'
-  }))
-  // wrap content in handlebars layouts
+  // render all files in side a layout if specified
   .use(layouts({
-    engine: 'ejs',
     default: 'default.ejs',
-    partials: 'layouts/_partials',
-    partialExtension: '.ejs',
-    rename: false
+    pattern: '**/*',
   }))
-  // allow using template features inside the content directory
-  .use(inPlace({
-    engineOptions: {
-      partials: 'layouts/_partials',
-    }
+  // re-run the render for newly inserted template features
+  .use(layouts({
+    inPlace: true,
+    pattern: '**/*'
+  }))
+  // rename remaining .ejs files to html
+  .use(changeExt({
+    pattern: `**/*.ejs`,
+    ext: '.html'
+  }))
+  // include our static assets
+  .use(assets({
+    source: './static'
   }))
   // finally check if we have broken links
   .use(linkcheck({
@@ -106,6 +107,6 @@ Metalsmith(cwd)
   // build the site
   .build((err) => {
     if (err) {
-      console.log(err.toString())
+      throw err;
     }
   });

build/plugins/change-ext.js

@@ -7,7 +7,8 @@ function plugin(opts) {
     Object.keys(files).forEach((file) => {
       if (multimatch(file, opts.pattern).length) {
         const data = files[file];
-        const new_name = path.extname(file) + opts.ext;
+        const new_name = file.replace(path.extname(file), opts.ext);
+
         delete files[file];
         files[new_name] = data;
       }

build/plugins/layouts.js

@@ -0,0 +1,45 @@
+const multimatch = require('multimatch');
+const fs = require('fs');
+const ejs = require('ejs');
+
+function plugin(opts) {
+  const options = Object.assign({
+    directory: 'layouts',
+    default: 'layout.ejs',
+    inPlace: false,
+    pattern: '*.ejs',
+    options: {
+      views: ['layouts']
+    }
+  }, opts);
+
+  return function (files, metalsmith, done) {
+    Object.keys(files).forEach((file) => {
+      if (!multimatch(file, options.pattern).length) {
+        return;
+      }
+
+      const data = files[file];
+      data.contents = data.contents.toString();
+      const context = Object.assign({}, metalsmith.metadata(), data);
+
+      let rendered;
+      if (options.inPlace) {
+        rendered = ejs.render(data.contents, context, options.options);
+      } else {
+        const template = metalsmith.path(
+          options.directory,
+          data.layout || options.default
+        );
+        const str = fs.readFileSync(template).toString();
+        rendered = ejs.render(str, context, options.options);
+      }
+
+      data.contents = rendered;
+    });
+
+    done();
+  }
+}
+
+module.exports = plugin;

build/plugins/partials.js

@@ -0,0 +1,37 @@
+const multimatch = require('multimatch');
+const path = require('path');
+const fs = require('fs');
+
+function plugin(opts) {
+  const options = Object.assign({
+    path: 'partials',
+    base: '',
+    pattern: '*.*'
+  }, opts);
+
+  return function (files, metalsmith, done) {
+    const metadata = metalsmith.metadata();
+    metadata.partials = metadata.partials || {};
+
+    let partials = fs.readdirSync(metalsmith.path(options.path));
+    partials = partials.filter(file => multimatch(file, options.pattern).length);
+    partials = partials.map(file => file.replace(path.extname(file), ''));
+
+    partials.forEach((partial) => {
+      metadata.partials[partial] = (options.base ? options.base + path.sep : '') + partial;
+    });
+
+    Object.keys(files).forEach((file) => {
+      const relativePartials = {};
+      const rootPath = path.relative(file, metalsmith.path());
+      partials.forEach((partial) => {
+        relativePartials[partial] = `${rootPath}${path.sep}${options.path}${path.sep}${partial}`;
+      });
+      files[file].partials = relativePartials;
+    });
+
+    done();
+  }
+}
+
+module.exports = plugin;

build/plugins/toc.js

@@ -26,6 +26,7 @@ function plugin(opts) {
         }
       } else {
         data.toc = false;
+        data.layout = data.layout || 'no_sidebar.ejs'
       }
     });
     done();

content/index_en.ejs

@@ -1 +1,22 @@
-Index
+---
+layout: landing.ejs
+---
+
+<div class="bg-blue-dark">
+    <div class="container mx-auto p-8">
+        Index
+    </div>
+</div>
+
+<div class="container mx-auto p-8">
+    <div class="flex -mx-8">
+        <div class="w-1/2 px-8 bg-grey-light">
+            <h4>Docs</h4>
+            <%- include('_partials/links', { posts: collections.blog }) %>
+        </div>
+        <div class="w-1/2 px-8 bg-grey-light">
+            <h4>Posts</h4>
+            <%- include('_partials/links', { posts: collections.docs }) %>
+        </div>
+    </div>
+</div>

content/index_hu.ejs

@@ -1 +1,5 @@
+---
+layout: landing.ejs
+---
+
 HU HOME

layouts/_partials/header.ejs

@@ -0,0 +1,74 @@
+<div class="AppHeader">
+    <div class="bg-blue-dark border-t-8 border-green">
+        <div class="container flex items-center flex-wrap px-4 py-1 mx-auto">
+            <a href="/" class="w-1/4 flex-1">
+                <div class="relative w-16 h-16">
+                    <img class="w-16 h-16 absolute pin"
+                         src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.svg"
+                         alt="NativeScript-Vue Logo">
+                    <img class="w-16 h-16 absolute pin transition-all-ease hover:opacity-0"
+                         src="https://art.nativescript-vue.org/NativeScript-Vue-Green-White.svg"
+                         alt="NativeScript-Vue Logo">
+                </div>
+            </a>
+            <div class="w-auto text-center relative">
+                <input class="w-full md:w-48 px-4 py-2 text-blue-lightest bg-blue-light rounded-full"
+                       type="search"
+                       placeholder="Search coming soon."
+                       disabled
+                >
+
+                <div class="hidden absolute ml-2 mt-2">
+                    <div class="border bg-white rounded shadow w-48"></div>
+                </div>
+            </div>
+
+            <!-- Bars -->
+            <div class="ml-4 md:hidden text-right" @click="navOpen = !navOpen">
+                <div class="inline-block">
+                    <div class="w-6 h-2px bg-white mb-1"></div>
+                    <div class="w-6 h-2px bg-white mb-1"></div>
+                    <div class="w-6 h-2px bg-white"></div>
+                </div>
+            </div>
+
+            <!-- Nav -->
+            <div :class="{ hidden: isMobile && !navOpen, flex: isMobile && navOpen }"
+                 class="flex-col md:flex-row w-full md:w-auto">
+                <a href="#" class="no-underline text-blue-lightest md:ml-6 mr-4 py-4">Quick Start</a>
+                <a href="#" class="no-underline text-blue-lightest mr-4 py-4">Guides</a>
+                <a href="#" class="no-underline text-blue-lightest mr-4 py-4">API</a>
+                <div class="inline text-blue-lightest mr-4 py-4 relative group">
+                    Community
+
+                    <div class="pl-4 mt-3 md:pl-0 md:hidden group-hover:block hover:block md:absolute md:bg-white md:border md:shadow md:rounded md:pin-r">
+                        <div class="flex flex-col">
+                            <a href="#" class="no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2">GitHub</a>
+                            <a href="#" class="no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2">Slack</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="inline text-blue-lightest py-4 relative group">
+                    <svg class="w-4 h-4 fill-current -mb-px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M20,10c0,-5.532 -4.488,-10 -10,-10c-5.509,0 -10,4.465 -10,10c0,5.522 4.477,10 10,10c5.52,0 10,-4.475 10,-10Zm-1.678,2.581l-4.01,0c0.277,-1.73 0.266,-3.497 0.002,-5.162l4.008,0c0.517,1.67 0.517,3.492 0,5.162Zm-8.322,6.064c-1.239,-1.118 -2.183,-2.803 -2.72,-4.774l5.44,0c-0.537,1.971 -1.481,3.656 -2.72,4.774Zm-3.006,-6.064c-0.29,-1.669 -0.297,-3.449 0.001,-5.162l6.01,0c0.298,1.712 0.291,3.492 0.001,5.162l-6.012,0Zm3.006,-11.225c1.353,1.221 2.24,3.022 2.718,4.773l-5.436,0c0.48,-1.76 1.37,-3.556 2.718,-4.773Zm7.804,4.773l-3.75,0c-0.441,-1.78 -1.184,-3.375 -2.173,-4.635c2.588,0.569 4.762,2.295 5.923,4.635Zm-9.685,-4.635c-0.989,1.26 -1.732,2.855 -2.173,4.635l-3.75,0c1.161,-2.34 3.335,-4.066 5.923,-4.635Zm-6.441,5.925l4.008,0c-0.264,1.665 -0.275,3.432 0.002,5.162l-4.01,0c-0.517,-1.67 -0.517,-3.492 0,-5.162Zm0.518,6.452l3.755,0c0.443,1.781 1.188,3.38 2.17,4.636c-2.602,-0.572 -4.77,-2.308 -5.925,-4.636Zm9.683,4.636c0.982,-1.256 1.727,-2.855 2.17,-4.636l3.755,0c-1.157,2.332 -3.327,4.065 -5.925,4.636Z" style="fill-rule:nonzero;"/></svg>
+                    <span class="md:hidden">Language</span>
+
+                    <div class="pl-4 mt-3 md:pl-0 md:hidden group-hover:block hover:block md:absolute md:bg-white md:border md:shadow md:rounded md:pin-r">
+                        <div class="flex flex-col">
+                            <a href="#" class="no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" @click.prevent="switchLang('en')">en</a>
+                            <a href="#" class="no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" @click.prevent="switchLang('hu')">hu</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mobile Docs Nav -->
+    <!--<div class="bg-grey-lighter md:hidden">-->
+        <!--<div class="container mx-auto p-4">-->
+            <!--<select class="w-full p-2">-->
+                <!--&lt;!&ndash;<option v-for="item in flat_toc" :key="item.name" :value="item.path">{{ item.name }}</option>&ndash;&gt;-->
+            <!--</select>-->
+        <!--</div>-->
+    <!--</div>-->
+</div>

layouts/_partials/sidebar.ejs

@@ -0,0 +1,5 @@
+<div class="AppSidebar p-4 py-4 md:py-8">
+    <ul class="list-reset">
+        <!--<NavigationItem :children="toc"/>-->
+    </ul>
+</div>

layouts/default.ejs

@@ -6,17 +6,33 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title><%= sitename %></title>
+    <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
-<%- contents %>
 
-<div>
-    <%- include('_partials/links', { posts: collections.blog }) %>
-    <%- include('_partials/links', { posts: collections.docs }) %>
+<div id="app">
+    <div class="font-sans leading-normal" :class="{'max-h-screen': modalVisible, 'overflow-hidden': modalVisible}">
+        <!--<QuickStart />-->
+        <%- include('_partials/header') %>
+
+        <div class="md:bg-docs-gradient min-h-screen">
+            <div class="container mx-auto flex">
+                <div class="hidden md:w-1/4 md:block">
+                    <%- include('_partials/sidebar') %>
+                </div>
+                <div class="w-full md:w-3/4 bg-white min-h-screen">
+                    <div class="p-4 md:p-8">
+                        <div class="markdown-body">
+                            <%- contents %>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
-<% if(typeof contributors !== 'undefined') { %>
-<%- include('_partials/contributors', contributors) %>
-<% } %>
+<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+<script src="/main.js"></script>
 </body>
 </html>

layouts/landing.ejs

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title><%= sitename %></title>
+    <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+
+<div id="app">
+    <div class="font-sans leading-normal" :class="{'max-h-screen': modalVisible, 'overflow-hidden': modalVisible}">
+        <!--<QuickStart />-->
+        <%- include('_partials/header') %>
+
+        <div class="min-h-screen">
+            <%- contents %>
+        </div>
+    </div>
+</div>
+
+<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+<script src="/main.js"></script>
+</body>
+</html>

layouts/no_sidebar.ejs

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title><%= sitename %></title>
+    <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+
+<div id="app">
+    <div class="font-sans leading-normal" :class="{'max-h-screen': modalVisible, 'overflow-hidden': modalVisible}">
+        <!--<QuickStart />-->
+        <%- include('_partials/header') %>
+
+        <div class="min-h-screen">
+            <div class="container mx-auto flex">
+                <div class="w-full bg-white min-h-screen">
+                    <div class="p-4 md:p-8">
+                        <div class="markdown-body">
+                            <%- contents %>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+<script src="/main.js"></script>
+</body>
+</html>