Real CSS, inline SVG

components/distill-logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="-607 419 64 64">
+  <path style="fill: none; stroke: black;stroke-width: 2px;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
+</svg>

components/footer.js

@@ -1,3 +1,5 @@
+import logo from "./distill-logo.svg";
+
 const html = `
 <style>
 dt-footer {
@@ -15,8 +17,8 @@ dt-footer .logo svg {
   margin-right: -2px;
 }
 dt-footer .logo svg path {
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
+  stroke: rgba(255, 255, 255, 0.8)!important;
+  stroke-width: 3px!important;
 }
 dt-footer .logo {
   font-size: 16px;
@@ -29,9 +31,7 @@ dt-footer .logo {
 
 <div class="l-body">
   <a href="/" class="logo">
-    <svg viewBox="-607 419 64 64">
-      <path style="fill: none;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
-    </svg>
+    ${logo}
     Distill
   </a> is dedicated to clear explanations of machine learning
 </div>

components/header.js

@@ -1,3 +1,5 @@
+import logo from "./distill-logo.svg";
+
 const html = `
 <style>
 dt-header {
@@ -47,9 +49,7 @@ dt-header .nav a {
 
 <div class="content l-page">
   <a href="/" class="logo">
-    <svg viewBox="-607 419 64 64">
-    <path style="fill: none; stroke: black;stroke-width: 2px;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
-    </svg>
+    ${logo}
     Distill
   </a>
   <div class="nav">

components/native-shim.js

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
- */
-
-/**
- * This shim allows elements written in, or compiled to, ES5 to work on native
- * implementations of Custom Elements v1. It sets new.target to the value of
- * this.constructor so that the native HTMLElement constructor can access the
- * current under-construction element's definition.
- *
- * Because `new.target` is a syntax error in VMs that don't support it, this
- * shim must only be loaded in browsers that do.
- */
-(() => {
-  let origHTMLElement = HTMLElement;
-  // TODO(justinfagnani): Tests!!
-  window.HTMLElement = function() {
-    // prefer new.target for elements that call super() constructors or
-    // Reflect.construct directly
-    let newTarget = new.target || this.constructor;
-    return Reflect.construct(origHTMLElement, [], newTarget);
-  }
-  HTMLElement.prototype = Object.create(origHTMLElement.prototype, {
-    constructor: {value: HTMLElement, configurable: true, writable: true},
-  });
-})();

components/styles-article.css

@@ -1,4 +1,3 @@
-export default `
 dt-article {
   color: rgba(0, 0, 0, 0.8);
   font: 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
@@ -177,5 +176,3 @@ dt-article figure figcaption b {
   font-weight: 600;
   color: rgba(0, 0, 0, 1.0);
 }
-
-`

components/styles-base.css

@@ -1,4 +1,3 @@
-export default `
 html {
   font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
 }
@@ -55,5 +54,3 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }*/
-
-`;

components/styles-code.css

@@ -1,4 +1,3 @@
-export default `
 /**
  * prism.js default theme for JavaScript, CSS and HTML
  * Based on dabblet (http://dabblet.com)
@@ -148,4 +147,3 @@ pre[class*="language-"] {
 .token.entity {
 	cursor: help;
 }
-`;

components/styles-layout.css

@@ -1,4 +1,3 @@
-export default `
 .l-body,
 .l-page,
 dt-article > * {
@@ -94,4 +93,3 @@ dt-article > * {
     width: calc(960px / 2 - 48px);
   }
 }
-`

components/styles.js

@@ -1,7 +1,7 @@
-import base from './styles-base';
-import layout from './styles-layout';
-import article from './styles-article';
-import code from './styles-code';
+import base from './styles-base.css';
+import layout from './styles-layout.css';
+import article from './styles-article.css';
+import code from './styles-code.css';
 
 export default function(dom, data) {
   let s = dom.createElement("style");

examples/tutorial.html

@@ -18,8 +18,8 @@
 </style>
 <dt-header></dt-header>
 <dt-article>
-  <h1 class="l">How to Create a Distill Article</h1>
-  <h2 class="l">A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
+  <h1>How to Create a Distill Article</h1>
+  <h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
   <!-- <dt-byline></dt-byline> -->
   <p>Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks. Both are also available on Github with a permissive license, so feel free to use them independent of http://distill.pub as well.</p>
   <hr>
@@ -52,7 +52,7 @@
   </div>
   <hr>
   <h2>Code Blocks</h2>
-  <p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-javascript">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
+  <p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-html">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
   <pre><code class="language-html">
     &lt;pre&gt;&lt;code class="language-javascript"&gt;
       var x = 25;

package.json

@@ -17,6 +17,7 @@
     "rollup-plugin-livereload": "^0.3.1",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-serve": "^0.1.0",
+    "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-watch": "^2.5.0"
   }

rollup.config.js

@@ -4,6 +4,7 @@ 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}/`);
@@ -23,11 +24,14 @@ export default {
       jsnext: true,
       browser: true,
     }),
+    string({
+      include: ["**/*.svg", "**/*.html", "**/*.css"]
+    }),
     buble({
       exclude: 'node_modules',
       target: { chrome: 52, safari: 8, edge: 13, firefox: 48, }
     }),
-    commonjs({}),
+    commonjs(),
     uglify(),
     liveReload(),
     serve({port: PORT}),

yarn.lock

@@ -1019,6 +1019,12 @@ rollup-plugin-serve@^0.1.0:
     mime "^1.3.4"
     opener "^1.4.2"
 
+rollup-plugin-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-string/-/rollup-plugin-string-2.0.2.tgz#f5323a22cfd738b450cbea62ab6593705eac744b"
+  dependencies:
+    rollup-pluginutils "^1.5.0"
+
 rollup-plugin-uglify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.1.tgz#11d0b0c8bcd2d07e6908f74fd16b0152390b922a"