Here defines what will happens in the import-notion-docs script. The output HTMLs will then become source for both print and web edition.
Everything in a page will be injected to a section element with a h1 title at the top.
<section data-type="chapter">
<h1>Introduction</h1>
...
</section>headings are transformed with styles
<h2>I.1 Random <code>Walks</code></h2>Paragraphs are transformed separately whether or not they are nested.
Here we are: the beginning. Well, almost the beginning. If it’s been a while since you’ve done any programming in JavaScript (or any math, for that matter), this introduction will get your mind back into computational thinking before I approach some of the more difficult and complex material.
In Chapter 1, I’m going to talk about the concept of a vector and how it will serve as the building block for simulating motion throughout this book. But before I take that step, let’s think about what it means for something to simply move around the screen. Let’s begin with one of the best-known and simplest simulations of motion—the random walk.
<p>Here we are: the beginning. Well, almost the beginning. If it’s been a while since you’ve done any programming in JavaScript (or any math, for that matter), this introduction will get your mind back into computational thinking before I approach some of the more difficult and complex material.</p>
<p>In Chapter 1, I’m going to talk about the concept of a vector and how it will serve as the building block for simulating motion throughout this book. But before I take that step, let’s think about what it means for something to simply move around the screen. Let’s begin with one of the best-known and simplest simulations of motion—the random walk.</p>All quotes will be added an attribute: data-type="epigraph", and every line inside are transformed to paragraphs
“Reading about nature is fine, but if a person walks in the woods and listens carefully, they can learn more than what is in books.” — George Washington Carver
<blockquote data-type="epigraph">
<p>“Reading about nature is fine, but if a person walks in the woods and listens carefully, they can learn more than what is in books.”</p>
<p>— George Washington Carver</p>
</blockquote>Nested list with styles
- Death. If a cell is alive (state = 1) it will die (state becomes 0) under the following circumstances.
- Overpopulation: If the cell has four or more alive neighbors, it dies.
- Loneliness: If the cell has one or fewer alive neighbors, it dies.
- Birth. If a cell is dead (state = 0) it will come to life (state becomes 1) if it has exactly three alive neighbors (no more, no less).
- Stasis. In all other cases, the cell state does not change. To be thorough, let’s describe those scenarios.
- Staying Alive: If a cell is alive and has exactly two or three live neighbors, it stays alive.
- Staying Dead: If a cell is dead and has anything other than three live neighbors, it stays dead.
<ol>
<li><strong><em>Death.</em></strong> If a cell is alive (state = 1) it will die (state becomes 0) under the following circumstances.
<ul>
<li><strong><em>Overpopulation:</em></strong> If the cell has four or more alive neighbors, it dies.</li>
<li><strong><em>Loneliness:</em></strong> If the cell has one or fewer alive neighbors, it dies.</li>
</ul>
</li>
<li><strong><em>Birth.</em></strong> If a cell is dead (state = 0) it will come to life (state becomes 1) if it has exactly three alive neighbors (no more, no less).</li>
<li><strong><em>Stasis.</em></strong> In all other cases, the cell state does not change. To be thorough, let’s describe those scenarios.
<ul>
<li><strong><em>Staying Alive:</em></strong> If a cell is alive and has exactly two or three live neighbors, it stays alive.</li>
<li><strong><em>Staying Dead:</em></strong> If a cell is dead and has anything other than three live neighbors, it stays dead.</li>
</ul>
</li>
</ol>Images are downloaded and referenced relatively with path as images/{chapter}/{chapter}_{index}.{extension}. The caption part will be the content of figcaption and images’ alternative text.
Figure I.1
<figure class="half-width-right another-class">
<img src="images/00_7_introduction/00_7_introduction_1.png" alt="Figure I.1">
<figcaption>Figure I.1</figcaption>
</figure>If Header row is active, the first line will become table head.
| Flip 1 | Flip 2 | Result |
|---|---|---|
| Heads | Heads | Step forward. |
| Heads | Tails | Step right. |
| Tails | Heads | Step left. |
| Tails | Tails | Step backward. |
<table>
<thead>
<tr>
<th>Flip 1</th>
<th>Flip 2</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heads</td>
<td>Heads</td>
<td>Step forward.</td>
</tr>
<tr>
<td>Heads</td>
<td>Tails</td>
<td>Step right.</td>
</tr>
<tr>
<td>Tails</td>
<td>Heads</td>
<td>Step left.</td>
</tr>
<tr>
<td>Tails</td>
<td>Tails</td>
<td>Step backward.</td>
</tr>
</tbody>
</table>codesplit class is added to every block as well as the language
let position = createVector(100, 100);
let velocity = createVector(1, 3.3);<pre class="codesplit" data-code-language="javascript">let position = createVector(100, 100);
let velocity = createVector(1, 3.3);</pre>consider use \textrm{} for freeform text - Discussion
<div data-type="equation">\textrm{number of aces} / \textrm{number of cards} = 4 / 52 = 0.077 \approx 8\%</div>Bookmark links that pointed to p5 web editor (with hostname of editor.p5js.org) will be transformed to an div later handled by gatsby.js
Sketches will be downloaded and referenced relatively with path as examples/{chapter}/{sketch_name}/
If an screenshot.png file exist in the sketch, it will be inserted as an image under that div and appear in the pdf build.
Link Bookmark looks like this in Notion
<figure>
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/5C69XyrlsR" data-example-path="examples/00_7_introduction/example_i_01_random_walk_traditional"><img src="examples/00_7_introduction/example_i_01_random_walk_traditional/screenshot.png"></div>
<figcaption></figcaption>
</figure>
<div class="col-list">
<div>
<p>Demo Text</p>
</div>
<div>
<p>Demo Text</p>
</div>
</div>Callout block with emoji icon 🔗 is considered as indexterm. Up to three terms will be transformed as data-primary, data-secondary, and data-tertiary separated by /. Noted color won't affect its behavior
Noted that whitespaces are omitted at both ends of a term, e.g. a / b equals to a/b
<a data-type="indexterm" data-primary="natural phenomena" data-secondary="modeling with random walks"></a>Callout block with emoji icon 💡 is considered as highlight.
<p><span class="highlight">An object at rest stays at rest and an object in motion stays in motion at a constant speed and direction unless acted upon by an unbalanced force.</span></p>These four kinds of callout blocks will be transformed to different type of div based on their emoji icon. The first line of text will became a <h3> title and the rest will be injected as children
- 📒 → Note
- ✏️ → Exercise
- 🦎 → Project
- 💻 → Example
<div data-type="exercise">
<h3>Exercise I.9</h3>
<p>Add a third argument to noise that increments once per cycle through <code>draw()</code> to animate the two-dimensional noise.</p>
</div>A callout block featuring the 🏷️ icon will wrap its content within a <div> element, the class name of which is derived from the block's title.
Noted the title will be transformed only as plain text. The code style in the following image is just for identifying them and won't affect the result.
<div class="half-width-right">
...
</div>Anywhere in a paragraph, a link can be added whether to an external URL or an internal Notion block. Noted that now it only support linking to a heading or a callout (Note:📒, Exercise:✏️, Project:🦎, Example:💻) block.
Way to create a link to a content block
<a href="#example-12-bouncing-ball-with-vectors">Example 1.2</a>