A comment from hacker news:
https://news.ycombinator.com/item?id=15648422

JorgeGT 1 hour ago [-]
Minor note, you should add the field DOI={10.23915/distill.00007} to the BibTeX citation. This is also missing from Google scholar, and is a particular pat peeve of mine now that DOIs are practically mandatory (copying the helpfully-formatted citation but then having to look around the page to find the DOI).

Can we use the same distill.js file to add citations, appendices, footnotes, layout and syntax highlighting to articles that are not for distill.pub?

I want to create some articles for distil, but wanted to mirror them at my website and also have them look consistent with other articles on other topics. (I think the same visual explanation style would be very cool for physics, for example).

I was in the middle of writing my own set of styles for this purpose, heavily inspired by https://www.gwern.net/Spaced%20repetition

but it looks like the distill.js library is much more complete than my pile of hacks and I'd like to replace it if that's ok.

I just found out about this project, got very excited, but then realized there has been very little activity. What is the status?

Hi, I really love the style and look of the distill framework, I was wondering if it was possible to use it without intending on publishing an article on Distill? If so, how would I go about this? Thanks so much.

For example:

https://github.com/distillpub/post--momentum/compare/tag%20FIRST_PUBLISHEDTagger:%20Christopher%20Olah%20%[email protected]%3Epublished%20article95506b079372cee3aa7fbc9bd29ee078aaff12e7...1eef98b33219317833891a08609312f6b790af60

Hello! Thanks for providing the template.
What all languages are supported by dt-code for syntax highlighting? I tried python, but it did not seem to work.

<dt-code block language="python">
    class BinaryNode:
    	def __init__(self,_id):
    		self.left = None
    		self.right = None
    		self.id = _id
    		self.num_phrases = [0](`url`)
  </dt-code>

Can you point me out to the place where I should make changes to add this functionality?

<d-footnote-list></d-footnote-list> should be added automatically if d-footnote is used in document and no footnote-list is present in the appendix.

Let's fix all those -- and straight quotes and apostrophes.

element.innerHTML = "<d-math>x</d-math"; renders empty.

I just copy/pasted the code from the guide (in the interest of reproduction, setting up a one-click cloneable template).

Upon viewing the page, I noticed a few places where some missing data produces NaN:

. NaN
NaN

And

Citation: 
Olah & Carter, NaN

, NaN.

@article{olahNaNarticle,

and

year = {NaN}

We're exploring some ideas around the layout of a dt-article.

Some motivations:

• Signal visually that these are not just blog posts. Often times the articles contain a huge amount of content and depth, which is somewhat hard to understand at first glance.

• Signal that we are archiving and indexing these articles with libraries and generally being a good academic citizen.

• Provide best practices for common conventions and guidance for overcoming common frustrations around making the first load experience visually compelling. Examples: hero interactives, summary illustration, collage/summary of elements to come?

• There are some general features we'd like to add as well, sharing prompt, TOC linking, etc...

Present Design

As a frame of reference, here are some representative examples of the current design:

[Click to enlarge images]

Text	Hero

Content stripes

Each stripe would be optional, except the headline. The abstract/TOC would only be included on especially long posts. Possible to do a "visual" TOC too maybe?

[Click to enlarge images]

Text	Hero	Headline and byline together

Dark Header

[Click to enlarge images]

Text only	With a Hero

Dark blue brought down to author bar

[Click to enlarge images]

Text	Hero	Hero full bleed

Total White Top

Text	Hero

What it would mean to take abstracts seriously -- what is the Distill version of an abstract?

If Distill really succeeds and there are lots of papers, most readers will only read a small number. In this context, it is very valuable to give people a 1-2 min way to engage with the paper.

Does the Distill template have any support for typesetting Latex? If not, is there a recommended best practice for doing so?

Sorry if this is the wrong place to ask, since this isn't a technical question but rather a more general question about the platform.

I appreciate this may still be something of an unknown, but I was wondering what sort of non-traditional content distill will be considering.

Broadly speaking I can think a number of different types of potentially valuable content (split into the following, slightly arbitrary, categories):

• Original research: Publishable research which benefits from the extra flexibility of the distill platform.
• Visualisations and artifacts: Tools which may be useful for other researchers, but aren't really suitable for publication via traditional academic media.
• In-depth analysis of a particular area: Theoretical and/or empirical analysis of a given area (perhaps supported by visualisations) where the novel contribution may not be directly publishable (eg suggesting a new paradigm or idea which may not be fully fleshed out yet, or have been tested in an experimental setting). This post by Chris might be an example of this.
• Exposition of a particular area: Similar to the previous case, but where the intention is raise awareness of, and educate on, an existing field/idea, rather than present a new idea of the author. For example, Karpathy's post on RNNs.
• Tutorial: A crash course on some new technique.
• Personal notes: Formatted notes, perhaps including detailed explanations of particular experiments (including failures).

I expect that not all of these would be suitable for distill (although personally I think they all deserve their own outlet somewhere), so it would be good to hear the editors' (and the wider community's) thoughts.

If you have tangle-style scrubbable values, have some standard visual indicator and possibly a way to reset the value to the original given state.

I would like to actually use the custom elements v1 spec instead of just aping it as we do currently. Unfortunately the polyfills are not totally ready yet. Also there isn't a great answer for offline rendering of computationally complex transformations.

i.e. is the template open source?

Might be useful to have a dt-figure element that handles a few things:

• Loading of large datasets with a loading indicator.

• Defer computation for down-page figures so we don't pummel the browser with computation and loading on pageload. As you scroll, get updates when you're about to be onscreen, when you're onscreen and when you're offscreen.

Two things on touch devices:

• Should dismiss when you touch anything in the background, not just the small citation itself.

• Bug when trying to reopen one after you have dismissed it. Seems intermittently responsive.

Is there a way to have section numbers or relative links to parts of a paper?

For example, I wanted to link to the "Attentional Interfaces" bit of the Augmented RNNs paper but I couldn't find an easy way to do this.

Perhaps we should add a little hyperlink chain that appears next to section headings on hover allowing one to copy paste links to sections in a paper.

Is it possible to include selected lines from a file or link in a code block? It would also be nice to be able to highlight parts of the included code.

We should simplify these events.

ready -> onscreen -> offscreen

are probably all we need. Ready will only ever fire once, for use when the figure is first close to or is in view, for loading resources and initializing code.

In PR #35, we found that the build process is producing different whitespace for different people. This leads to extra stuff in the diffs like:

It would be nice to figure out what's going on and fix it.

<!doctype html>
<meta charset="utf-8">
<script src="http://distill.pub/template.v1.js"></script>

<dt-article>
  <p>
    This paragraph displays the correct alignment, which the unordered list follows appropriately.
    The ordered list doesn't follow the article rules.
  </p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <!-- Here comes -->
  <ol>
    <li>First list item</li>
    <li>Second list item</li>
  </ol>
</dt-article>

Output:

Have a general solution for converting bibtex style {\'e} accented characters to a unicode é in https://github.com/distillpub/distill-template/blob/master/components/bibliography.js.

d-math doesn't render inside of a d-footnote-list. It works fine in the hover card, but not the list in the appendix.

https://github.com/distillpub/template/blob/master/components/citation.js#L117
If someone leaves the author field off of a bibtex entry in the bibliography, the js throws an error.

All these issues are the same underlying technical problem which should be fixed.

Having two separate markup languages (bibtex and yaml) and two separate fake script tags to encode what is in the end one big data object still doesn't quite sit right with me.

I had another idea, to just use a JavaScript global object in a single script tag.

• The JavaScript object syntax is also a little nicer than JSON (multiline strings, comments and no quoted keys) and the browser would automatically give you an error if it encountered any syntax problems.
• You could use an external file with the standard src attribute if it gets too big (this would also work without a local server, unlike our current external file solutions).
• JSDOM allows you to inspect JavaScript globals so offline rendering would be able to see it as well.

<script>
distill = {
  title: "Title of the Article",
  description: "Description of the article goes here, could be long",
  authors: [...],
  bibliography: {
    key: {
      title: "etc.."
    }
  }
}
</script>

If you wanted to use bibtex, that would be supported like so:

<script>
distill = {
  ...
  bibliography: `
    @article{gregor2015draw,
      title={DRAW: A recurrent neural network for image generation},
      author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
      journal={arXivreprint arXiv:1502.04623},
      year={2015}
    }`
}
</script>

And if you wanted to reference an external file for your bibliography:

<script>
distill = {
  ...
  bibliography: "bibliography.bib"
}

And if it was annoying you inside your document, you could reference an external file like normal.

<script src="distill.js"></script>

The footnotes are a bit too eager to disappear when I move the mouse around. If I am trying to grab a link from the footnote hovercard, I need to be careful about the trajectory and maybe try a few times.

Consider the "pi is wrong" link in http://distill.pub/2017/research-debt/
If I want to grab the link, I need to move the cursuor from "pi is wrong" to the "[link]" box on the right. If I try to move right, then down, the footnote will disappear and I need to try again. It only works if I move down, then right.

Dart language for web programming is ideal when dealing with numerical expressions.
So I think Dart will be rock in the context of Explanatory Machine Learning.
Best Regards!

id has been deleted from destination element.

In template/examples/tutorial.html you didn't specify how you should use Markdown in conjunction with KATEX, is possible to do that? I tried it but with no success.
It would be a great add on to the project for example using markdown-it! and adding $f(x)$ to render inline and $$f(x)$$ to render as a block.

Consider adding a <span> with an auto generated figure number to a figure's figcaption.

Extensions

• Warn if a <figure> has no <figcaption>.
• List of figures in appendix?
• Reference a figure by its id? Add a <d-ref> tag?

Prompted by radarsat1 (https://news.ycombinator.com/item?id=15649456)

Could you please extend the Diagrams section on the How to page?

To be a bit more specific, I would like to know for example how interactive diagrams were not just coded, but designed in previous articles.

Via @mpd37
Bibtex entries are not case sensitive with respect to the fields in the bibtex entry. For example, there is no difference in latex between using:

% Capitalised field names
@Article{rasmussen2006gaussian,
Title={Gaussian processes for machine learning},
Author={Rasmussen, Carl Edward},
Year={2006},
Publisher={Citeseer}
}

% Lowercase field names
@Article{rasmussen2006gaussian,
title={Gaussian processes for machine learning},
author={Rasmussen, Carl Edward},
year={2006},
publisher={Citeseer}
}

The current distill template ignores bibtex entries formatted in the first way (with capitalised fields, as might be generated when using a referencing tool like Jabref), and includes them for the second way. Could we make a note of this or make it non-case sensitive.

Officially support mathjax or katex. With possible "server" side rendering.

I hadn't realized there was a Github repo for Distill until I got an email response after asking a question. Could there be a link to this repo from /about?

Footnote superscripts are sort of indistinguishable from inline equations with exponents.

Exponent or footnote?

Hey there! I've had some fun today reading through the code for most of your articles and template components. I was wondering how you guys are defining the custom DOM elements I see in the template examples (which also on the DOM of the distill website!), such as dt-article.

I use react a lot and so I am familiar with the benefit of components, but I was just so surprised to see them in the DOM inspector.

What is the pattern used to build out the components in this template?

Edit: I found how basic articles are built. I'm still curious about the pattern encouraged for adding visualizations. Is it anything goes at this point?

<!doctype html>
<meta charset="utf-8">
<script src="http://distill.pub/template.v1.js"></script>

<dt-article>
  <p>
    This paragraph displays the correct alignment.
    The table element should follow layout rules and have styling.
  </p>
  <table>
    <tr>
      <th>Column</th>
    <tr>
    <tr>
      <td>Entry</td>
    </tr>
  </table>
</dt-article>

Output:

Using a colon in the title field (or other fields) of the frontmatter breaks page rendering: the citations do not appear, and the yellow bar indicating draft mode does not appear. This can be fixed, by including frontmatter fields within quotations. Might be useful to point this out somewhere.