wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-06-27 20:54:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

More tutorials

Browse Source
This commit is contained in:
Shan Carter
2017-01-05 10:32:26 -08:00
parent b9a1b85fc4
commit c9c883801a
7 changed files with 96 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/tutorial.html
+68 -32
View File
@@ -1,21 +1,21 @@
<!doctype html>
<meta charset="utf-8">
<script src="../dist/template.min.js"></script>
<style>
.fake-img {
background: #bbb;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
}
.fake-img p {
font-family: monospace;
color: white;
text-align: center;
margin: 12px 0;
font-size: 16px;
}
.fake-img {
background: #bbb;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
}
.fake-img p {
font-family: monospace;
color: white;
text-align: center;
margin: 12px 0;
font-size: 16px;
}
</style>
<dt-header></dt-header>
<dt-article>
<h1>How to Create a Distill Article</h1>
@@ -23,6 +23,55 @@
<!-- <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>
<h2>Setting up a Document</h2>
<p>If you’re using Chrome as your development browser, here is the smallest distill post.</p>
<dt-code block language="html">
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;dt-article&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/dt-article&gt;
</dt-code>
<p>However, this omits some required html tags that might cause rendering problems during development if you’re using a browser other than Chrome. These missing tags will be added during publishing, so if the above works for you, feel free to use it. If you are having issues with weird characters showing up, try adding <dt-code>doctype</dt-code> and <dt-code>meta</dt-code> tags explicitly.</p>
<dt-code block language="html">
&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;dt-article&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/dt-article&gt;
</dt-code>
<p>A typical distill post will be quite a bit longer than this though. Below is a more complete example. Don’t worry if some of the tags don’t make sense, they’re all documented further in this post.</p>
<dt-code block language="html">
&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;dt-article&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;h2&gt;A description of the post&lt;/h2&gt;
&lt;dt-byline&gt;&lt;/dt-byline&gt;
&lt;/dt-article&gt;
&lt;dt-bibliography&gt;&lt;/dt-bibliography&gt;
</dt-code>
<hr>
<h2>Markdown</h2>
<p>Markdown is supported as an alternative to html for the <dt-code language="html">&lt;dt-article&gt;</dt-code> element. </p>
<dt-code block language="html">
&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;dt-article markdown&gt;
###Hello World
##A description of the post
First paragraph of the article.
&lt;/dt-article&gt;
&lt;dt-bibliography&gt;&lt;/dt-bibliography&gt;
</dt-code>
<p>We use <a href="https://github.com/chjj/marked">marked</a> as the rendering engine, with <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/">github flavored markdown</a> and <a href="https://daringfireball.net/projects/smartypants/">smartypants</a> enabled. In development mode the markdown is translated in the client after the dom content has loaded, but when published the translation is precompiled.</p>
<hr>
<h2>Data</h2>
<hr>
<h2>Layouts</h2>
<p>The main text column is referred to as the body. It is the assumed layout of any direct descendents of the <code>dt-article</code> element.</p>
<div class="fake-img l-body"><p>.l-body</p></div>
@@ -37,19 +86,7 @@
<p>They are all floated to the right and anchored to the right-hand edge of the position you specify. By default, each will take up approximately half of the width of the standard layout position, but you can override the width with a more specific selector. </p>
<div class="fake-img l-gutter"><p>.l-gutter</p></div>
<p>The final layout is for marginalia, asides, and footnotes. It does not interrupt the normal flow of <code>.l-body</code> sized text except on mobile screen sizes.</p>
<hr>
<h2>Markdown</h2>
<div>
<div dt-markdown>Any element with a `dt-markdown` attribute will be rendered with its contents replaced with a markdown processed version. We use [marked](https://github.com/chjj/marked), with [github flavored markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) and [smartypants](https://daringfireball.net/projects/smartypants/).</div>
<dt-code block language="html">
&lt;div dt-markdown&gt;
###This markdown will be rendered as HTML
For more about markdown, read this [tutorial](https://help.github.com/articles/basic-writing-and-formatting-syntax/).
&lt;/div&gt;
</dt-code>
</div>
<hr>
<h2>Code Blocks</h2>
<p>Syntax highlighting is provided within <dt-code language="html">&lt;dt-code&gt;</dt-code> tags. An example of inline code snippets: <dt-code language="html">&lt;dt-code language="html"&gt;let x = 10;&lt;/dt-code&gt;</dt-code>. For larger blocks of code, add a <dt-code>block</dt-code> attribute:</p>
@@ -64,7 +101,7 @@
<hr>
<h2>Citation</h2>
<p>Bibtex is the supported way of making academic citations. You first need have a global definition of all your possible citations. This can either be inlined in the document, or it can reference an external bibtex file.</p>
<pre><code class="language-html">
<dt-code block language="html">
&lt;dt-bibliography&gt;
@article{gregor2015draw,
title={DRAW: A recurrent neural network for image generation},
@@ -83,11 +120,11 @@
publisher={Cambridge Univ Press}
}
&lt;/dt-bibliography&gt;
</code></pre>
</dt-code>
<p>Citations are then used with the <dt-code language="html">&lt;dt-cite&gt;</dt-code> tag.</p>
<pre><code class="language-html">
<dt-code block language="html">
&lt;dt-cite&gt;gregor2015draw&lt;/dt-cite&gt;
</code></pre>
</dt-code>
<p>Take a look at this paper <dt-cite>gregor2015draw</dt-cite>.</p>
<hr>
@@ -100,8 +137,7 @@
<h2>HTML Includes</h2>
<hr>
<h2>Authors</h2>
<hr>
<h2>Metadata</h2>
</dt-article>
<dt-appendix>
<h3>Contributions</h3>