Renaming and adding two configs

components.js

@@ -0,0 +1,3 @@
+import dtheader from "./components/dt-header";
+
+export {dtheader as dtheader};

components/dt-header.js

@@ -0,0 +1,91 @@
+import {Template} from './mixins/template';
+
+// import logo from "./distill-logo.svg";
+var logo = "";
+
+const T = Template('dt-header', `
+<style>
+:host {
+  display: block;
+  position: relative;
+  height: 60px;
+  background-color: hsl(200, 60%, 15%);
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  color: rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+.content {
+  height: 70px;
+}
+a {
+  font-size: 16px;
+  height: 60px;
+  line-height: 60px;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 22px 0;
+}
+a:hover {
+  color: rgba(255, 255, 255, 1);
+}
+svg {
+  width: 24px;
+  position: relative;
+  top: 4px;
+  margin-right: 2px;
+}
+@media(min-width: 1080px) {
+  :host {
+    height: 70px;
+  }
+  a {
+    height: 70px;
+    line-height: 70px;
+    padding: 28px 0;
+  }
+  .logo {
+  }
+}
+svg path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.8);
+  stroke-width: 3px;
+}
+.logo {
+  font-size: 17px;
+  font-weight: 200;
+}
+.nav {
+  float: right;
+  font-weight: 300;
+}
+.nav a {
+  font-size: 12px;
+  margin-left: 24px;
+  text-transform: uppercase;
+}
+</style>
+
+<div class="content l-page">
+  <a href="/" class="logo">
+    ${logo}
+    Distill
+  </a>
+  <div class="nav">
+    <a href="/faq">About</a>
+    <a href="https://github.com/distillpub">GitHub</a>
+    <!-- https://twitter.com/distillpub -->
+  </div>
+</div>
+`);
+
+export default class DTHeader extends T(HTMLElement) {
+  static get is() {
+    return 'dt-header';
+  }
+}
+
+customElements.define(DTHeader.is, DTHeader);

components/mixins/properties.js

@@ -0,0 +1,86 @@
+export function propName(attr) {
+  return attr.replace(/(\-[a-z])/g, (s) => s.toUpperCase().replace('-', ''));
+}
+
+export function attrName(prop) {
+  return prop.replace(/([A-Z])/g, (s) => '-' + s.toLowerCase());
+}
+
+export function deserializeAttribute(value, type) {
+  switch (type) {
+    case String:
+      break;
+    case Array:
+    case Object:
+      try {
+        value = JSON.parse(value);
+      } catch (e) {
+      }
+      break;
+    case Boolean:
+      value = value != 'false' && value != '0' && value;
+      break;
+    default:
+  }
+  return value;
+}
+
+const immediately = window.setImmediate || function(fn, args) {
+  window.setTimeout(function() {
+    fn.apply(this, args);
+  }, 0);
+};
+
+export const Properties = (properties) => {
+  const keys = Object.keys(properties);
+  const attrs = keys.map((k) => attrName(k));
+  return (superclass) => {
+    const cls = class extends superclass {
+      static get observedAttributes() {
+        return attrs;
+      }
+      attributeChangedCallback(attr, oldValue, newValue) {
+        const prop = propName(attr);
+        const value = deserializeAttribute(newValue, properties[prop].type);
+        this[prop] = value;
+      }
+      _propertiesChanged() {
+        if (!this.propertiesChangedCallback) {
+          return;
+        }
+        clearTimeout(this._propertiesChangedTimeout);
+        this._propertiesChangedTimeout = immediately(() => {
+          this.propertiesChangedCallback(this);
+        });
+      }
+    }
+    keys.forEach(function(k) {
+      const secret = `_${k}`;
+      const callback = `${k}Changed`;
+      const defaultValue = properties[k].value;
+      Object.defineProperty(cls.prototype, k, {
+        get: function() {
+          let value = this[secret];
+          if (value) {
+            return value;
+          }
+          if (defaultValue && typeof defaultValue == 'function') {
+            this[secret] = defaultValue();
+          } else {
+            this[secret] = defaultValue;
+          }
+          return this[secret];
+        },
+        set: function(value) {
+          const oldValue = this[secret];
+          this[secret] = value;
+          if (this[callback]) {
+            this[callback](value, oldValue);
+          }
+          this._propertiesChanged();
+        }
+      });
+    });
+    return cls;
+  };
+};

components/mixins/template.js

@@ -0,0 +1,35 @@
+// import '@webcomponents/shadycss/scoping-shim';
+
+export const Template = (name, templateString, useShadow = true) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+  // ShadyCSS.prepareTemplate(template, name);
+
+  return (superclass) => {
+    return class extends superclass {
+      constructor() {
+        super();
+        const clone = document.importNode(template.content, true);
+        if (useShadow) {
+          // ShadyCSS.applyStyle(this);
+          this.shadow_ = this.attachShadow({mode: 'open'});
+          this.shadow_.appendChild(clone);
+        } else {
+          this.appendChild(clone);
+        }
+      }
+      get root() {
+        if (useShadow) {
+          return this.shadow_;
+        }
+        return this;
+      }
+      $(query) {
+        return this.root.querySelector(query);
+      }
+      $$(query) {
+        return this.root.querySelectorAll(query);
+      }
+    }
+  }
+};

examples/article.html

@@ -11,7 +11,7 @@
   - Google Brain:
   - Google Brain: http://g.co/brain
 </script>
-
+<dt-header></dt-header>
 <dt-article>
   <script type="text/article"></script>
   <h1>Hello World</h1>

package.json

@@ -5,9 +5,8 @@
   "main": "dist/template.js",
   "scripts": {
     "serve": "python3 -m http.server",
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "test": "mocha"
+    "test": "mocha",
+    "build": "rollup -c rollup.config.components.js && rollup -c rollup.config.transforms.js"
   },
   "author": "Shan Carter",
   "repository": {
@@ -19,6 +18,9 @@
   },
   "homepage": "https://github.com/distillpub/distill-template#readme",
   "devDependencies": {
+    "@webcomponents/custom-elements": "https://github.com/webcomponents/custom-elements",
+    "@webcomponents/shadycss": "https://github.com/webcomponents/shadycss",
+    "@webcomponents/shadydom": "https://github.com/webcomponents/shadydom",
     "bibtex-parse-js": "^0.0.23",
     "chai": "^3.5.0",
     "js-yaml": "^3.7.0",
@@ -39,6 +41,7 @@
   "dependencies": {
     "commander": "^2.9.0",
     "d3-time-format": "^2.0.3",
-    "mustache": "^2.3.0"
+    "mustache": "^2.3.0",
+    "webpack": "^2.2.1"
   }
 }

rollup.config.components.js

@@ -0,0 +1,39 @@
+// import buble from 'rollup-plugin-buble';
+// import resolve from 'rollup-plugin-node-resolve';
+// import commonjs from 'rollup-plugin-commonjs';
+// import liveReload from 'rollup-plugin-livereload';
+// import serve from 'rollup-plugin-serve';
+// import uglify from 'rollup-plugin-uglify';
+// import string from 'rollup-plugin-string';
+
+// const PORT = 8080;
+// // console.log(`open http://localhost:${PORT}/`);
+
+// export default {
+//   entry: 'index.js',
+//   sourceMap: true,
+//   targets: [
+//     {
+//       format: 'umd',
+//       moduleName: 'dl',
+//       dest: `dist/template.js`,
+//     }
+//   ],
+//   plugins: [
+//     resolve({
+//       jsnext: true,
+//       browser: true,
+//     }),
+//     string({
+//       include: ["**/*.txt", "**/*.svg", "**/*.html", "**/*.css", "**/*.base64"]
+//     }),
+//     buble({
+//       exclude: 'node_modules',
+//       target: { chrome: 52, safari: 9, edge: 13, firefox: 48, }
+//     }),
+//     commonjs(),
+//     // uglify(),
+//     // liveReload(),
+//     // serve({port: PORT}),
+//   ]
+// };

rollup.config.transforms.js

@@ -29,7 +29,7 @@ export default {
     }),
     buble({
       exclude: 'node_modules',
-      target: { chrome: 52, safari: 8, edge: 13, firefox: 48, }
+      target: { chrome: 52, safari: 9, edge: 13, firefox: 48, }
     }),
     commonjs(),
     // uglify(),