Distill Example Jekyll Integration TEST

An example project using Webpack, Babel, and Svelte.

Welcome to a Distill example article: meant to get you writing up your research quickly. Let's demo some features:

Hot reloading

Your browser can automatically refresh when your editor saves. This should work by default, and you can disable it in index.js. Sometimes hot reloading isn't fully compatible with all types of code, so you may need to try manually reloading if you're seeing inconsistent behavior.

Inlined SVGs

SVGs are so small that it can be nice to save an extra request and simply inline them intop your HTML:

Let's use some CSS to style an inlined SVG. Here's an arrow that we can make inline. If you'd like to change the color in CSS, we can do so. Let's put the second arrow () in a tag with an ID, so we can target it in CSS. #arrow-2 #arrow-head { fill: steelblue; } #arrow-2 #arrow-line { stroke: steelblue; }

Formulas

Here's a test of an inline equation c = a^2 + b^2. Can also be used with configurable katex settings, for example by using inline $ signs: x^2. There are also block equations:

c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}

Math can also be quite involved:

\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

We've also been experimenting with annotated formulas:

C ~~~=~~~~

H^E_D(X, Z)

~~~-~~~

H^E_E(X, Z)

~~~~~~~=~~~~

H^E_D(X, Z)

~~~-~~~

H^E_E(Z | X)

~~~-~~~

H^E_E(X)

Bits to represent z
if you already know x.

Bits to represent
x by itself.

Citations

We can also cite external publications. . We should also be testing footnotes This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. . There are multiple footnotes, and they appear in the appendixGiven I have coded them right. Also, here's math in a footnote: c = \sum_0^i{x}. Also, a citation. Box-ception! as well.

Displaying code

Some inline javascript:var x = 25;. And here's a javascript code block.

var x = 25; function(x){ return x * x; }

We also support some highlighting.

# Python 3: Fibonacci series up to n def fib(n): a, b = 0, 1 while a < n: print(a, end=' ' ) a, b=b, a+b

Tables

We have simple tables that try to stay readable at most screen sizes:

	Parallel	Efficient	Reversible
GANs	Yes	Yes	No
Flow Models	Yes	No	Yes
Autoregressive Models	No	Yes	Yes

Interactive Figures

Here's a dynamically instantiated "figure". We use Intersection Observers to allow loading resource-heavy figures only when readers scroll close to them. The code for this is in src/index.js.

And a static figcaption. You can use citations in this figcaption, but not in text added by javascript.

You can't use citation tags (d-cite) in figures that are dynamically loaded using Javascript. Distill statically analyzes your submission for its citations, because they need to be uploaded to indexers and organizations like CrossRef and Google Scholar.

That's it for the example article! Feel free to look at implementations of existing Distill articles, or ask for help in the Distill Slack Community.