Initial example commit

README.md

@@ -1,2 +1,12 @@
 # post--example-webpack-svelte-ejs-inline-svgs
-Example Distill article repo for Vincent Dumoulin
+An example project using webpack and svelte-loader and ejs to inline SVGs
+
+## Developing
+
+`npm run dev` to run a watching server.
+
+`npm run build` to build, transpile, babel-ify and minify files.
+
+Components are in `src`. The `.html` files are [svelte](https://svelte.technology/guide) components, the `.js` files are compilation endpoints that are also defined in `webpack.config.js`. These compiled endpoints are then consumed by hand authored `.ejs` files in `src`.
+
+Visit [localhost:8080/index.html](localhost:8080/index.html) for a hot-reloading preview opf the article.

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "differentiable-parameterizations",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "profile": "cross-env NODE_ENV=production webpack --profile --json > webpack-stats.json"
+  },
+  "dependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-es2015": "^6.24.1",
+    "copy-webpack-plugin": "^4.5.1",
+    "cross-env": "^5.1.5",
+    "css-loader": "^0.28.11",
+    "eases-jsnext": "^1.0.10",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^2.29.0",
+    "lucid-components": "0.0.6",
+    "npm": "^6.0.1",
+    "npx": "^10.2.0",
+    "raw-loader": "^0.5.1",
+    "svelte": "^2.6.1",
+    "svelte-extras": "^2.0.0",
+    "svelte-loader": "~2.8.1",
+    "svg-inline-loader": "^0.8.0",
+    "webpack": "^3.12.0",
+    "webpack-dev-server": "^2.11.2"
+  }
+}

src/diagrams/VisualTOC.html

@@ -0,0 +1,147 @@
+<nav class="visual-toc">
+  {#each sections as section, i}
+  <div class="visual-toc-item">
+    <a href="{section.anchor}" class="visual-toc-top">
+      <Sprite url='images/vtoc.jpg' width=320 columns=3 index={section.sprite_index}/>
+      <span class="visual-toc-heading">{section.title}</span>
+      {#if section.subtitle}
+        <span class="visual-toc-subheading">{section.subtitle}</span>
+      {/if}
+    </a>
+    <a href="{section.colab_url}" class="visual-toc-colab">
+      try in a <img src="images/colab.svg"> notebook
+    </a>
+  </div>
+  {/each}
+</nav>
+
+
+<style>
+.visual-toc {
+  counter-reset: toc-heading;
+  display: grid;
+  grid-auto-flow: dense;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 16px;
+}
+@media (min-width: 1000px) {
+  .visual-toc {
+    grid-gap: 8px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+@media (min-width: 1180px) {
+  .visual-toc {
+    grid-gap: 20px;
+  }
+}
+.visual-toc-item {
+  display: flex;
+  flex-flow: column;
+}
+.visual-toc-top {
+  flex-grow: 1;
+  border: 1px solid #E5E5E5;
+  border-radius: 5px;
+  overflow: hidden;
+  text-decoration: none;
+  /* box-shadow: 0px 1px 4px rgba(0,0,0,0.05); */
+  transition: box-shadow 0.35s, transform 0.35s;
+  transform: scale(1.0);
+  display: flex;
+  flex-flow: column;
+}
+.visual-toc-top:hover {
+  box-shadow: 0px 1px 4px rgba(0,0,0,0.05);
+  transform: scale(1.02);
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+.visual-toc-heading,
+.visual-toc-subheading {
+  display: block;
+  line-height: 1.3em;
+  font-size: 85%;
+  padding: 0.5em 1em 1em 1em;
+}
+.visual-toc-heading {
+  counter-increment: toc-heading;
+  color: #333;
+  font-weight: 600;
+}
+.visual-toc-heading::before{
+  display: block;
+  content: "Section " counter(toc-heading);
+  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 0.6rem;
+  color: #666;
+}
+.visual-toc-subheading {
+  display: none;
+  color: #666;
+  font-size: 75%;
+}
+.visual-toc-colab {
+  border-radius: 5px;
+  border: dashed 1px rgba(0,0,0,0.1);
+  margin-top: 1em;
+  padding-left: 1.2em;
+  padding-right: 1.2em;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  text-transform: uppercase;
+  color: #aaa;
+  font-size: 10.5px;
+  line-height: 24px;
+
+}
+.visual-toc-colab > img {
+  position: relative;
+  top: 4px;
+  /* filter: grayscale(); */
+}
+.visual-toc-item:hover .visual-toc-colab > img {
+  filter: unset;
+}
+
+/* .visual-toc-top:hover,  */
+.visual-toc-colab:hover {
+  background-color: hsl(0, 0%, 97%);
+  border-color: rgba(0,0,0,0.2);
+  color: #888;
+}
+
+a {
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a :global(canvas) {
+  width: 100%;
+}
+</style>
+
+
+<script>
+import { range } from "../util";
+import { Sprite } from "lucid-components";
+
+export default {
+  data() {
+    return {
+      sections: [
+        { title: "Example Section with image", colab_url: "", anchor: "#experiment-aligned", sprite_index: 0  },
+        { title: "Example Section with image-VGG", colab_url: "", anchor: "#experiment-styletransfer", sprite_index: 1 },
+        { title: "Example Section with image", colab_url: "", anchor: "#experiment-xy2rgb", sprite_index: 3 },
+        { title: "Example Section with image", colab_url: "", anchor: "#experiment-featureviz-rgba", sprite_index: 2 },
+        { title: "Example Section with image", colab_url: "", anchor: "#experiment-featureviz-3d", sprite_index: 4 },
+        { title: "Example Section with image", colab_url: "", anchor: "#experiment-styletransfer-3d", sprite_index: 5 },
+      ]
+    }
+  },
+  components: { Sprite },
+  helpers: { range },
+}
+</script>
+

src/index.ejs

@@ -0,0 +1,106 @@
+<!doctype html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://distill.pub/template.v2.js"></script>
+  <style><%= require("raw-loader!../static/style.css") %></style>
+</head>
+
+<body>
+
+<d-front-matter>
+  <script type="text/json">{
+  "title": "Example for Vincent",
+  "description": "An example project using webpack and svelte-loader and ejs to inline SVGs",
+  "password": "svgs",
+  "authors": [
+    {
+      "author": "Ludwig Schubert",
+      "authorURL": "https://schubert.io/",
+      "affiliation": "Google Brain Team",
+      "affiliationURL": "https://g.co/brain"
+    }
+  ],
+  "katex": {
+    "delimiters": [
+      {
+        "left": "$",
+        "right": "$",
+        "display": false
+      },
+      {
+        "left": "$$",
+        "right": "$$",
+        "display": true
+      }
+    ]
+  }
+  }</script>
+</d-front-matter>
+
+<d-title>
+  <h1>Example for Vincent</h1>
+  <p>An example project using webpack and svelte-loader and ejs to inline SVGs</p>
+  <div class="l-page" id="vtoc"></div>
+</d-title>
+
+<d-article>
+
+  <p>
+    Typically, we parameterize the input image as the RGB values of each pixel.
+    But that isn’t the only way to parameterize images.
+    And, as long as the mapping from parameters to images is differentiable, we can still optimize alternative parameterizations with gradient descent.
+  </p>
+
+  <figure class="subgrid">
+    <figcaption style="grid-column: kicker">
+      <!-- <span class="figure-number">Figure 1:</span> -->
+      <span style="hyphens: manual;">As long as an </span>
+      <span style="background-color: #FFF1E7; padding-left: 2px; padding-right: 2px;">image para&shy;meter&shy;ization</span>
+      <span>is differ&shy;entiable, we can back&shy;propagate</span>
+      <span style="white-space: nowrap;">( <img src="diagrams/backprop-arrow.svg" style="width: unset;"/> )</span>
+      <span>through it.</span>
+    </figcaption>
+    <!-- <img class="l-body" src="images/diagrams/general.png"/> -->
+    <div class="l-body">
+      <%= require("../static/images/diagrams/general.svg") %>
+    </div>
+  </figure>
+
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p> 
+
+</d-article>
+
+
+
+<d-appendix>
+  <h3>Acknowledgments</h3>
+  <p>
+    We are deeply grateful to...
+  </p>
+
+  <p>
+    Many of our diagrams are based on...
+  </p>
+
+  <h3>Author Contributions</h3>
+  <p>
+    <b>Research:</b> Alex developed ...
+  </p>
+
+  <p>
+    <b>Writing & Diagrams:</b> The text was initially drafted by...
+  </p>
+
+
+  <d-footnote-list></d-footnote-list>
+  <d-citation-list></d-citation-list>
+</d-appendix>
+
+<!-- bibliography will be inlined during Distill pipeline's pre-rendering -->
+<d-bibliography src="bibliography.bib"></d-bibliography>
+
+</body>

src/index.js

@@ -0,0 +1,13 @@
+import VisualTOC                      from './diagrams/VisualTOC.html';
+
+// eagerly initialize vtoc  as it's above the fold
+const tocNav = document.getElementById('vtoc');
+const visualTOC = new VisualTOC({target: tocNav});
+
+// lazily initialize any diagram below the fold. E.G:
+// {
+//   const figure = document.getElementById('StyleTransferExamples');
+//   figure.addEventListener("ready", function() {
+//     const styleTransferExamples = new StyleTransferExamples({target: figure});
+//   });
+// }

src/util.js

@@ -0,0 +1,3 @@
+export function range(n){
+  return Array(n).fill().map((_, i) => i);
+}