Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/index.html

Last active December 5, 2024 04:23
Show Gist options
  • Save tonyfast/71d50e470b64caf15bf35efb267ed737 to your computer and use it in GitHub Desktop.
Save tonyfast/71d50e470b64caf15bf35efb267ed737 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html lang="en" itemscope itemtype="https://schema.org/Article">
<!-- # accessible notebook reference template
an accessible reference for computational notebooks based on semantic html
-->
<head>
<!-- ## document properties -->
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" itemprop="description" content="">
<meta name="color-scheme" content="light">
<!-- ### document semantic properties -->
<meta property="og:title" itemprop="name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" itemprop="image" content="">
<meta property="og:type" content="article">
<link rel="canonical" href="">
<meta property="article:published_time" content="">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
</head>
<body data-layout="column" data-slide="false" data-present="true" data-wide="false" data-reverse="false" data-highlight="a11y" data-literate="true" onkeyup="keyboardEvents(event)">
<!-- ## generic landmark structure
the notebook is a single page application, and we begin by establishing the conventional landmark
structure for an article with `contentinfo`, `main`, and `footer` roles.
-->
<header aria-label="site navigation and settings">
<ul role="toolbar">
<!-- ### skip links
the first tab stop is a skip link that goes directly to the first cell allowing the audience to skip directly
to pertinent content.
-->
<li aria-current="true">
<a class="skip-link" href="#cells" aria-describedby="metadata:title summary:total cells__ summary:code metadata:language code__ cells__ summary:md markdown__ cells__ summary:execution_state">skip
to content</a>
</li>
<li>
<a class="skip-link" id="TOP" href="#BOTTOM" accesskey=".">skip to end</a>
</li>
</ul>
<details class="site nav">
<!-- ### site navigation
notebooks are typically found in a collection with other notebooks, content, or media.
the site navigation is a canonical feature that allows the audience to navigate to new content
or application developers may define other actions.
-->
<summary class="site nav" id="site:nav__">site navigation</summary>
<table class="site toc" id="site:toc" role="group" aria-labelledby="site:nav__">
<thead>
<th class="id">id</th>
<th class="updated">updated</th>
<th class="created">created</th>
<th class="title">title</th>
<th class="description">description</th>
<th class="actions">actions</th>
</thead>
<tbody role="group"></tbody>
<template>
<tr role="none">
<th class="id"><a></a></th>
<th class="updated"><time></time></th>
<th class="created"><time></time></th>
<td class="title"><a></a></td>
<td class="description">
<p></p>
</td>
<td class="actions">
<form></form>
</td>
</tr>
</template>
</table>
</details>
<!-- the toolbar is repetitive and goes in the header -->
<form name="nb" id="nb:toolbar">
<!-- ## notebook toolbar -->
<a id="SETTINGS" href="#nb:settings:summary" accesskey="," tabindex="-1"></a>
<details id="nb:settings">
<summary id="nb:settings:summary">settings</summary>
<details open>
<summary>modes</summary>
<p>change the exerience, appearance, and accessibility of the notebook content.</p>
<details>
<summary>runtime</summary>
<fieldset>
<legend>default kernel</legend>
<select>
<option value="none">none</option>
<option value="html">html</option>
</select>
</fieldset>
<table role="group">
<thead>
<tr>
<th>name</th>
<th>input</th>
<th>description</th>
<th>controls</th>
<th>spec</th>
</tr>
</thead>
</table>
</details>
<table role="group" class="inputs">
<tbody>
<tr>
<th class="title"><label for="modes:reverse">reverse cells</label></th>
<td class="input"><input id="modes:reverse" aria-describedby="modes:reverse__" name="reverse" type="checkbox" onchange="reverseNotebookRows(this)">
</td>
<td class="desc" id="modes:reverse__">reverse the direction of cells showing the last cell
first.</td>
</tr>
<tr>
<th class="title"><label for="modes:slides">slide mode</label></th>
<td class="input"><input id="modes:slides" aria-describedby="modes:slides__" name="slide" type="checkbox" onchange="toggleSlideMode(this)"></td>
<td class="desc" id="modes:slides__">a desktop and mobile friendly slide show view.</td>
</tr>
<tr>
<th class="title"><label for="modes:pres">presentation mode</label></th>
<td class="input"><input id="modes:pres" aria-describedby="modes:pres__" name="presentation" type="checkbox" onchange="togglePresentationMode(this)"></td>
<td class="desc" id="modes:pres">increase text readability</td>
</tr>
<tr>
<th class="title"><label for="modes:wide">wide mode</label></th>
<td class="input"><input id="modes:wide" aria-describedby="modes:wide__" name="wide" type="checkbox" aria-controls="main" onchange="toggleWideMode(this)">
</td>
<td class="desc" id="modes:wide__">activates horizontal scrolling for maximum content. this
mode is useful
for high
zoom
and
magnification users.</td>
</tr>
<tr>
<th class="title"></th>
<td class="input">
<table role="group" class="inputs">
<caption>empty cells</caption>
<tr>
<th class="title"><label for="empty:all">hide all empty cells</label></th>
<td class="input"><input id="empty:all" aria-describedby="empty:all__" name="trivial" type="checkbox" aria-controls="main"></td>
<td class="desc" id="empty:all__"></td>
</tr>
<tr>
<th class="title"><label for="empty:trail">hide trailing empty cells</label>
</th>
<td class="input"><input id="empty:trail" aria-describedby="empty:trail__" name="trivial" type="checkbox" aria-controls="main" checked>
</td>
<td class="desc" id="empty:trail__">empty cells after the last significant cell
are suppressed
</td>
</tr>
</table>
</td>
<td class="desc"></td>
</tr>
</tbody>
</table>
</details>
<details id="nb:visibility">
<summary>show/hide components</summary>
<table class="visibility" role="group">
<thead>
<tr>
<th>column</th>
<th id="visible__">visible</th>
<th id="none__">hidden</th>
<th id="nv__">non-visual</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
<td>
<input name="visibility:cell" value="visible" aria-labelledby="visible__ cell__" type="radio" checked>
</td>
<td>
<input name="visibility:cell" value="none" aria-labelledby="cell__ none__" type="radio">
</td>
<td>
<input name="visibility:cell" value="nv" aria-labelledby="cell__ nv__" type="radio">
</td>
</tr>
<tr>
<th>id</th>
<td>
<input name="visibility:id" value="visible" aria-labelledby="cell:id visible__" type="radio">
</td>
<td>
<input name="visibility:id" value="none" aria-labelledby="cell:id none__" type="radio" checked>
</td>
<td>
<input name="visibility:id" value="nv" aria-labelledby="cell:id nv__" type="radio">
</td>
</tr>
<tr>
<th>selected</th>
<td>
<input name="visibility:selected" value="visible" aria-labelledby="cell:exection_count visible__" type="radio">
</td>
<td>
<input name="visibility:selected" value="none" aria-labelledby="cell:exection_count none__" type="radio" checked>
</td>
<td>
<input name="visibility:selected" value="nv" aria-labelledby="cell:exection_count nv__" type="radio">
</td>
</tr>
<tr>
<th>execution count</th>
<td>
<input name="visibility:execution" value="visible" aria-labelledby="cell:execution_count visible__" type="radio" checked>
</td>
<td>
<input name="visibility:execution" value="none" aria-labelledby="cell:execution_count none__" type="radio">
</td>
<td>
<input name="visibility:execution" value="nv" aria-labelledby="cell:execution_count nv__" type="radio">
</td>
</tr>
<tr>
<th>lines of code</th>
<td>
<input name="visibility:lines" value="visible" aria-labelledby="cell:loc visible__" type="radio">
</td>
<td>
<input name="visibility:lines" value="none" aria-labelledby="cell:loc none__" type="radio" checked>
</td>
<td>
<input name="visibility:lines" value="nv" aria-labelledby="cell:loc nv__" type="radio">
</td>
</tr>
<tr>
<th>cell type</th>
<td>
<input name="visibility:cell_type" value="visible" aria-labelledby="cell:cell_type visible__" type="radio">
</td>
<td>
<input name="visibility:cell_type" value="none" aria-labelledby="cell:cell_type none__" type="radio" checked>
</td>
<td>
<input name="visibility:cell_type" value="nv" aria-labelledby="cell:cell_type nv__" type="radio">
</td>
</tr>
<tr>
<th>toolbar</th>
<td>
<input name="visibility:toolbar" value="visible" aria-labelledby="toolbar__ visible__" type="radio">
</td>
<td>
<input name="visibility:toolbar" value="none" aria-labelledby="toolbar__ none__" type="radio" checked>
</td>
<td>
<input name="visibility:toolbar" value="nv" aria-labelledby="toolbar__ nv__" type="radio">
</td>
</tr>
<tr>
<th>started at</th>
<td>
<input name="visibility:started" value="visible" aria-labelledby="cell:started_at visible__" type="radio">
</td>
<td>
<input name="visibility:started" value="none" aria-labelledby="cell:started_at none__" type="radio" checked>
</td>
<td>
<input name="visibility:started" value="nv" aria-labelledby="cell:started_at nv__" type="radio">
</td>
</tr>
<tr>
<th>completed at</th>
<td>
<input name="visibility:completed" value="visible" aria-labelledby="cell:completed_at visible__" type="radio">
</td>
<td>
<input name="visibility:completed" value="none" aria-labelledby="cell:completed_at none__" type="radio" checked>
</td>
<td>
<input name="visibility:completed" value="nv" aria-labelledby="cell:completed_at nv__" type="radio">
</td>
</tr>
<tr>
<th>elapsed</th>
<td>
<input name="visibility:elapsed" value="visible" aria-labelledby="cell:elapsed visible__" type="radio">
</td>
<td>
<input name="visibility:elapsed" value="none" aria-labelledby="cell:elapsed none__" type="radio" checked>
</td>
<td>
<input name="visibility:elapsed" value="nv" aria-labelledby="cell:elapsed nv__" type="radio">
</td>
</tr>
<tr>
<th>source</th>
<td>
<input name="visibility:source" value="visible" aria-labelledby="cell:source visible__" type="radio" checked>
</td>
<td>
<input name="visibility:source" value="none" aria-labelledby="cell:source none__" type="radio">
</td>
<td>
<input name="visibility:source" value="nv" aria-labelledby="cell:source nv__" type="radio">
</td>
</tr>
<tr>
<th>metadata</th>
<td>
<input name="visibility:metadata" value="visible" aria-labelledby="cell:metadata visible__" type="radio">
</td>
<td>
<input name="visibility:metadata" value="none" aria-labelledby="cell:metadata none__" type="radio" checked>
</td>
<td>
<input name="visibility:metadata" value="nv" aria-labelledby="cell:metadata nv__" type="radio">
</td>
</tr>
<tr>
<th>outputs</th>
<td>
<input name="visibility:outputs" value="visible" aria-labelledby="cell:outputs visible__" type="radio" checked>
</td>
<td>
<input name="visibility:outputs" value="none" aria-labelledby="cell:outputs none__" type="radio">
</td>
<td>
<input name="visibility:outputs" value="nv" aria-labelledby="cell:outputs nv__" type="radio">
</td>
</tr>
</tbody>
</table>
</details>
<details open>
<summary>text settings</summary>
</details>
<details open>
<summary>image &amp; video settings</summary>
<table class="inputs" role="group">
<tbody>
<tr>
<th class="title"><label for="text:only">text only</label></th>
<td class="input"><input id="text:only" type="checkbox" onclick="toggleAlt(event)"></td>
<td class="desc">replace images, videos, iframes, audio with titles and alt text</td>
</tr>
</tbody>
</table>
</details>
<button name="submit" type="submit" onsubmit="event.preventDefault()" disabled>run notebook</button>
<details class="style">
<summary>custom style</summary>
<textarea class="style"></textarea>
<button onclick="updateCustomStyle(event)">update</button>
</details>
<style></style>
</details>
</form>
</header>
<!-- prefer section because it roles are more malleable than main -->
<!-- h1 id is computed -->
<section role="main" id="main" class="nb" aria-labelledby="h1" aria-roledescription="notebook">
<style>@property --nb-focus-width {
syntax: "<length>";
inherits: true;
initial-value: 3px;
}
@property --nb-accent-color {
syntax: "<color>";
inherits: true;
initial-value: auto;
}
@property --nb-margin {
syntax: "<length>";
inherits: true;
initial-value: 5em;
}
@property --nb-font-size {
syntax: "<length>";
inherits: true;
initial-value: 16px;
}
@property --nb-font-family {
syntax: "serif | sans-serif";
inherits: true;
initial-value: serif;
}
@property --nb-line-height {
syntax: "<length>";
inherits: true;
initial-value: 1.5;
}
@property --nb-scrolled-height {
syntax: "<length>";
inherits: true;
initial-value: 600px;
}
@property --color-light {
syntax: "<color>";
inherits: true;
initial-value: #fff;
}
@property --color-dark {
syntax: "<color>";
inherits: true;
initial-value: #2b2a33;
}
@property --nb-pilcrow {
syntax: "<string>";
inherits: true;
initial-value: "🔗";
}
@property --fg-color {
syntax: "<color>";
inherits: true;
initial-value: var(--color-dark);
}
@property --bg-color {
syntax: "<color>";
inherits: true;
initial-value: var(--color-light);
}
@property --nb-invert {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --nb-grayscale {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --scrollbar {
syntax: "<length>";
inherits: true;
initial-value: 16px;
}
:root {
--nb-focus-width: 3px;
--nb-accent-color: auto;
--nb-margin: 5em;
--nb-font-size: 16px;
--nb-font-family: serif;
--nb-line-height: 1.5;
--nb-scrolled-height: 600px;
--color-light: #fff;
--color-dark: #2b2a33;
--nb-pilcrow: "🔗";
--fg-color: var(--color-dark);
--bg-color: var(--color-light);
--nb-invert: 0;
--nb-grayscale: 0;
--scrollbar: 16px;
}
html {
/* when we put this at the html level we replace the color of the margins */
filter: invert(var(--nb-invert)) grayscale(var(--nb-grayscale));
}
/* layout for table with interactived inputs */
table.inputs {
&>thead {
display: none;
}
&>tbody {
display: flex;
flex-direction: column;
&>tr {
display: flex;
gap: 2ch;
&>.title {
order: 2;
}
&>.input {
order: 1;
}
&>.desc {
order: 3;
}
}
}
}
.highlight {
color: unset;
}
&.light {
--fg-color: var(--color-dark);
--bg-color: var(--color-light);
}
&.dark {
--fg-color: var(--color-light);
--bg-color: var(--color-dark);
}
body {
font-size: var(--nb-font-size);
font-family: var(--nb-font-family);
accent-color: var(--nb-accent-color);
line-height: var(--nb-line-height);
color: var(--fg-color);
background-color: var(--bg-color);
margin: 0;
&>* {
margin-left: var(--nb-margin);
margin-right: var(--nb-margin);
width: fit-content;
}
/* line height cant change pre elements based on browser presets */
pre,
.highlight>pre,
textarea {
line-height: var(--nb-line-height);
white-space: pre-wrap;
}
&:not([data-highlight=none]) textarea[name=source] {
display: none;
}
&[data-highlight=none] textarea[name=source]+section {
display: none;
}
}
/* there nothing to be said about this topic that [sara soueidan](https://www.sarasoueidan.com/blog/focus-indicators/) hasn't said.
we start with her [universal focus recommendation](https://www.sarasoueidan.com/blog/focus-indicators/#a-%E2%80%98universal%E2%80%99-focus-indicator). */
.cell:focus-within,
header details:focus-within,
:focus-visible {
outline: max(var(--nb-focus-width), 1px) solid;
box-shadow: 0 0 0 calc(2 * max(var(--nb-focus-width), 1px));
}
table.toc,
table.inputs {
thead {
display: none;
}
}
body[data-literate=true] table[role=list].cells>tbody>tr.cell.literate>.source {
display: none;
}
/* cell visibility */
table[role=list].cells>tbody>tr.cell {
&.markdown {
&>.source,
&>.outputs>.collapse {
display: none;
}
}
&>:not(.source, .pos, .outputs) {
display: none;
}
}
table[role="list"].cells table.outputs>tbody>tr.output {
&>:not(.data) {
display: none;
}
}
/* cell layouts */
table[role=list].cells,
table[role=list].cells table.outputs {
display: block;
thead {
display: none;
}
&>tbody {
&,
&>tr {
display: flex;
flex-direction: column;
>:not(script, style, template) {
display: block;
width: calc(100% - var(--scrollbar));
}
}
}
}
table {
border-spacing: unset;
}
select,
button {
font-family: inherit;
font-size: inherit;
}
textarea {
font-family: monospace;
font-size: inherit;
overflow: auto;
}
/* align checkboxes with buttons */
input[type="checkbox"] {
vertical-align: middle;
}
textarea[name=source] {
box-sizing: border-box;
width: 100%;
/* on firefox, the input and output become interactive when there is overflow. chrome fixed this recently find reference.*/
min-width: 0;
resize: vertical;
}
/* visually hidden */
body[data-slide=true]>footer,
section.log>details:not([open])+table,
.nv:not(:focus-within):not(:active),
.visually-hidden:not(:focus-within):not(:active),
.visually-hide {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Extra Small Devices, Phones. and zoom */
@media screen and (max-width : 768px) {
header,
section[role=main],
footer {
--nb-margin: 0%;
}
}
@layer wide, defaults, layout;
@layer layout {
html {
/* when we put this at the html level we replace the color of the margins */
filter: invert(var(--nb-invert)) grayscale(var(--nb-grayscale));
width: 100vw;
}
a.perma,
a.perma+h1,
a.perma+h2,
a.perma+h3,
a.perma+h4,
a.perma+h5,
a.perma+h6
a.perma+[role=heading] {
display: inline;
}
td>[aria-expanded] {
display: none;
}
table.inputs {
&>thead {
display: none;
}
&>tbody {
display: flex;
flex-direction: column;
&>tr {
display: flex;
gap: 2ch;
&>.title {
order: 2;
}
&>.input {
order: 1;
}
&>.desc {
order: 3;
}
}
}
}
body {
font-size: var(--nb-font-size);
font-family: var(--nb-font-family);
accent-color: var(--nb-accent-color);
line-height: var(--nb-line-height);
color: var(--fg-color);
background-color: var(--bg-color);
.highlight {
color: unset;
}
&.light {
--fg-color: var(--color-dark);
--bg-color: var(--color-light);
}
&.dark {
--fg-color: var(--color-light);
--bg-color: var(--color-dark);
}
margin: 0;
&>header,
&>section,
&>main,
&>footer {
margin-left: var(--nb-margin);
margin-right: var(--nb-margin);
width: fit-content;
}
/* line height cant change pre elements based on browser presets */
pre,
.highlight>pre,
textarea {
line-height: var(--nb-line-height);
white-space: pre-wrap;
}
&:not([data-highlight=none]) textarea[name=source] {
display: none;
}
&[data-highlight=none] textarea[name=source]+section {
display: none;
}
}
/* there nothing to be said about this topic that [sara soueidan](https://www.sarasoueidan.com/blog/focus-indicators/) hasn't said.
we start with her [universal focus recommendation](https://www.sarasoueidan.com/blog/focus-indicators/#a-%E2%80%98universal%E2%80%99-focus-indicator). */
.cell:focus-within,
header details:focus-within,
:focus-visible {
outline: max(var(--nb-focus-width), 1px) solid;
box-shadow: 0 0 0 calc(2 * max(var(--nb-focus-width), 1px));
}
table.toc,
table.inputs {
thead {
display: none;
}
}
body[data-literate=true] table[role=list].cells>tbody>tr.cell.literate>.source {
display: none;
}
/* cell visibility */
table[role=list].cells>tbody>tr.cell {
&.markdown {
&>.source,
&>.outputs {
display: none;
}
}
&.code[data-outputs=0]>tr>td.outputs {
display: none;
}
&>:not(.source, .pos, .outputs) {
display: none;
}
}
table[role="list"].cells table.outputs>tbody>tr.output {
&>:not(.data) {
display: none;
}
}
/* cell layouts */
table[role=list].cells,
table[role=list].cells table.outputs {
display: block;
thead {
display: none;
}
&>tbody {
display: flex;
flex-direction: column;
&>tr {
display: flex;
flex-direction: column;
>:not(script, style, template) {
display: block;
width: 100%;
}
}
}
}
[data-reverse=true]>section>table>tbody {
flex-direction: column-reverse;
/* this needs to be a higher priority selector */
}
}
/* add grid area names */
@layer defaults {
table {
border-spacing: unset;
}
select,
button {
font-family: inherit;
font-size: inherit;
}
textarea {
font-family: monospace;
font-size: inherit;
overflow: auto;
}
/* align checkboxes with buttons */
input[type="checkbox"] {
vertical-align: middle;
}
}
textarea[name=source] {
box-sizing: border-box;
width: 100%;
/* on firefox, the input and output become interactive when there is overflow. chrome fixed this recently find reference.*/
min-width: 0;
resize: vertical;
}
body[data-slide=true]>footer,
section.log>details:not([open])+table,
.nv:not(:focus-within):not(:active),
.visually-hidden:not(:focus-within):not(:active),
.visually-hide {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
body[data-slide=true] {
width: max-content;
overflow: auto;
display: flex;
flex-direction: column;
&[data-reverse]>section>table>tbody {
flex-direction: row-reverse;
}
&>header {
position: sticky;
left: 0;
background: var(--bg-color);
width: 100vw;
>:not(script, style, template) {
width: fit-content;
}
}
&>section {
display: flex;
flex-direction: column;
&>:not(table) {
position: sticky;
left: 0;
width: fit-content;
max-width: 100vw;
}
&>table[role=list].cells {
&>tbody {
height: 100vh;
flex-direction: row;
width: max-content;
background: var(--bg-color);
gap: 30vw;
&>tr {
overflow: auto;
width: 100vw;
height: 100vh;
background: var(--bg-color);
position: sticky;
left: 0;
border: 1px dotted;
&>.pos {
background: var(--bg-color);
position: sticky;
left: 0;
top: 0;
}
&>:not(template, script, style, .pos) {
width: 100%;
width: calc(100% - var(--scrollbar));
}
}
}
}
}
}
@layer wide {
/* the wide mode provides support for low vision, large print and magnification */
img,
video,
iframe {
max-height: 100vh;
max-width: 100%;
}
[data-wide=true] {
header,
&>section[role=main],
footer {
overflow: auto;
}
[role=list].nb.cells {
overflow: hidden;
&>tbody {
overflow: hidden;
&>tr {
overflow: auto;
th,
td {
text-align: left;
}
}
}
}
.nb-source {
overflow-x: visible;
}
.nb-outputs {
min-width: 100%;
}
img,
image {
height: unset;
width: unset;
}
.notebook-cells,
.cells,
.cells>.cell,
.cells>.cell>[role="none"] {
width: max-content;
}
pre,
textarea {
white-space: pre;
}
}
}
@layer empty {
[data-empty=trailing] table.nb.cells>tbody>tr {
&.trivial th.pos a {
text-decoration: line-through;
}
&:not(.trivial):last-child+tr.trivial {
&,
&+tr.trivial {
td,
th:not(.pos) {
display: none;
}
}
}
}
}
[data-empty=all] table.nb.cells tr.trivial {
display: none;
}
select[aria-expanded] {
appearance: textfield;
}
/* Extra Small Devices, Phones. and zoom */
@media screen and (max-width : 768px) {
header,
section[role=main],
footer {
--nb-margin: 1ch;
}
[data-slide=true] table[role=list].cells>tbody>tr.cell>.pos {
position: relative;
}
}
p.alt {
font-style: italic;
border: 1px solid;
&::before {
font-weight: bold;
content: "alt text: "
}
}
</style>
<script src="refnb.js" type="module"></script>
<script type="application/x-ipynb+json" class="nb"></script>
<details open class="nb toc" aria-labelledby="nb:toc__">
<summary id="nb:toc__">contents</summary>
<!-- table of contents is often presented as a side panel and a dialog element gives those affordances -->
<table id="nb:toc" aria-labelledby="nb:toc__" class="nb toc" role="group">
<thead role="none">
<tr role="none">
<th class="nb toc level">level</th>
<th class="nb toc cell">cell</th>
<th class="nb toc heading">heading</th>
<th class="nb toc description">description</th>
</tr>
</thead>
<tbody role="none"></tbody>
<template id="tpl:toc">
<tr role="none">
<th class="nb toc level"></th>
<th class="nb toc cell"><a></a></th>
<td class="nb toc heading"><a></a></td>
<td class="nb toc description">
<p></p>
</td>
</tr>
</template>
</table>
</details>
<details aria-labelledby="nb:summary__">
<!--during execution the summary will continually need to be updated.
it holds a lot of information in the status bar footer in jupyter products.-->
<summary id="nb:summary__">summary</summary>
<dl role="none">
<!-- don't assume folx are in a place to do math accurately -->
<dt id="cells__">cells</dt>
<dd>
<dl role="none">
<dt>total</dt>
<dd id="cells:total"></dd>
<dt id="markdown__">markdown</dt>
<dd id="cells:md"></dd>
<dt id="code__">code</dt>
<dd id="cells:code"></dd>
</dl>
</dd>
<dt>execution state</dt>
<dd id="cells:state">
</dd>
<dt>lines of code</dt>
<dd id="cells:loc"></dd>
<dt id="outputs__">outputs</dt>
<dd id="cells:outputs"></dd>
</dl>
<details>
<summary>metadata</summary>
<dl itemscope itemtype="nb:metadata" role="none" id="nb:metadata">
<dt itemprop="title">title</dt>
<dd id="metadata:title"></dd>
<dt itemprop="description">description</dt>
<dd id="metadata:description"></dd>
<dt itemprop="authors">authors</dt>
<dt>language info</dt>
<dd>
<dl role="none" itemscope itemtype="nb:metadata/language_info">
<dt itemprop="name" id="metadata:language"></dt>
<dt itemprop="mimetype"></dt>
</dl>
</dd>
<dt id="kernel__">kernel</dt>
<dd>
<dl role="none" itemtype="nb:metadata/kernelspec">
<dt itemprop="display_name"></dt>
<dt itemprop="language"></dt>
<dd id="nb:language"></dd>
<dt itemprop="name"></dt>
</dl>
</dd>
</dl>
</details>
</details>
<table role="list" class="nb cells">
<thead>
<tr>
<th scope="col" id="cell__" aria-describedby="schema:pos" class="cell pos">
cell</th>
<th scope="col" id="cell:id" aria-describedby="schema:id" class="cell id">id</th>
<th scope="col" id="cell:selected" aria-describedby="schema:selected" class="cell selected">
selected</th>
<th scope="col" id="cell:execution_count" aria-describedby="schema:execution_count" class="cell execution_count">execution
count
</th>
<th scope="col" id="loc__" aria-describedby="schema:loc" class="cell loc">lines of code
</th>
<th scope="col" id="cell:cell_type" aria-describedby="schema:cell_type" class="cell cell_type">
cell type</th>
<th scope="col" id="cell:toolbar" aria-describedby="schema:toolbar" class="cell toolbar">toolbar
</th>
<th scope="col" id="cell:started_at" aria-describedby="schema:started_at" class="cell started_at">
started at</th>
<th scope="col" id="cell:completed_at" aria-describedby="schema:completed_at" class="cell completed_at">
completed at</th>
<th scope="col" id="cell:elapsed" aria-describedby="schema:elapsed" class="cell elapsed">elapsed
</th>
<th scope="col" id="cell:source" aria-describedby="schema:source" class="cell source">source</th>
<th scope="col" id="cell:metadata" aria-describedby="schema:metadata" class="cell metadata">
metadata</th>
<th scope="col" id="cell:outputs" aria-describedby="schema:outputs" class="cell outputs">outputs
</th>
</tr>
</thead>
<tbody itemprop="cells" id="cells" role="group" class="cells">
<template id="tpl:cell-row">
<!-- the ids are written to be prepended with a namespace
assume cell 3 with id `c3`, then `<a id=:xxx></a>` with `<a id=c3:xxx></a>`
-->
<tr role="listitem" class="cell" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="#">
<!-- -->
<a href="" class="pos" aria-labelledby="cell__ #"></a>
</th>
<th class="id">
<a href="" id=":id" class="id"></a>
</th>
<td class="selected">
<input type="checkbox" id=":selected" class="selected" aria-labelledby="" form=":form">
</td>
<td class="execution_count">
<label for=":source" id=":execution_count">
<output role="none" class="execution_count" name="execution_count" form=":form"></output>
</label>
</td>
<td class="loc">
<output role="none" id=":loc" class="loc" form=":form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type"></label>
</td>
<td class="form">
<form name="" id=":form" aria-labelledby="" class="form">
<select id=":cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id=":started" class="started_at"></time>
</td>
<td class="completed_at">
<time id=":completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id=":elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns=":source :highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id=":source" name="source" class="source" readonly aria-labelledby="# cell:source" form=":form"></textarea>
<section id=":highlighted" role="group" class="source highlight" aria-labelledby=":source" aria-roledescription="highlighted">
</section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
</td>
</tr>
</template>
<template id="tpl:output">
<select class="collapse" aria-expanded="true" aria-owns=":outputs">
<option value="collapse" name="output_expand" form=":form">▶</option>
<option value="scroll" name="output_expand" form=":form">⮃</option>
<option value="expand" name="output_expand" form=":form" selected>▼</option>
</select>
<table role="group" id=":outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
</tbody>
</table>
</template>
<template id="tpl:output-row">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label></label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr>
</template>
<tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c0">
<!-- -->
<a href="#c0" class="pos" aria-labelledby="cell__ c0">1</a>
</th>
<th class="id">
<a href="#457ec280-cc5b-4e33-898a-4a6cc3ddcb5d" id="c0:id" class="id">457ec280-cc5b-4e33-898a-4a6cc3ddcb5d</a>
</th>
<td class="selected">
<input type="checkbox" id="c0:selected" class="selected" aria-labelledby="" form="c0:form">
</td>
<td class="execution_count">
<label for=":source" id="c0:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c0:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c0:loc" class="loc" form="c0:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c0:form" aria-labelledby="" class="form">
<select id="c0:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c0:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c0:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c0:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c0:source c0:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c0:source" name="source" class="source" readonly aria-labelledby="c0 cell:source" form="c0:form"># hypertext, hypermedia and intertextuality in literate programs
we're going to learn how history is manifested in our writing tools.</textarea>
<section id="c0:highlighted" role="group" class="source highlight" aria-labelledby="c0:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section"># hypertext, hypermedia and intertextuality in literate programs</span>
we're going to learn how history is manifested in our writing tools.</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c0:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="hypertext-hypermedia-and-intertextuality-in-literate-programs" href="#hypertext-hypermedia-and-intertextuality-in-literate-programs">🔗</a><h1 id="hypertext-hypermedia-and-intertextuality-in-literate-programs">hypertext, hypermedia and intertextuality in literate programs</h1>
<p>we're going to learn how history is manifested in our writing tools.</p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c1">
<!-- -->
<a href="#c1" class="pos" aria-labelledby="cell__ c1">2</a>
</th>
<th class="id">
<a href="#b4eb01c6-79eb-4a90-aefb-422484b66b66" id="c1:id" class="id">b4eb01c6-79eb-4a90-aefb-422484b66b66</a>
</th>
<td class="selected">
<input type="checkbox" id="c1:selected" class="selected" aria-labelledby="" form="c1:form">
</td>
<td class="execution_count">
<label for=":source" id="c1:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c1:form">5</output>
</label>
</td>
<td class="loc">
<output role="none" id="c1:loc" class="loc" form="c1:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c1:form" aria-labelledby="" class="form">
<select id="c1:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c1:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c1:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c1:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c1:source c1:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c1:source" name="source" class="source" readonly aria-labelledby="c1 cell:source" form="c1:form"> %run init.ipynb</textarea>
<section id="c1:highlighted" role="group" class="source highlight" aria-labelledby="c1:source" aria-roledescription="highlighted"><pre><code> %run init.ipynb</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c1:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c2">
<!-- -->
<a href="#c2" class="pos" aria-labelledby="cell__ c2">3</a>
</th>
<th class="id">
<a href="#c80f1e54-f0e4-462b-b4a3-f72ac8da666b" id="c2:id" class="id">c80f1e54-f0e4-462b-b4a3-f72ac8da666b</a>
</th>
<td class="selected">
<input type="checkbox" id="c2:selected" class="selected" aria-labelledby="" form="c2:form">
</td>
<td class="execution_count">
<label for=":source" id="c2:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c2:form">14</output>
</label>
</td>
<td class="loc">
<output role="none" id="c2:loc" class="loc" form="c2:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c2:form" aria-labelledby="" class="form">
<select id="c2:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c2:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c2:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c2:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c2:source c2:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c2:source" name="source" class="source" readonly aria-labelledby="c2 cell:source" form="c2:form">%%
{{iframe(
"the history of printing before 1400",
"https://www.prepressure.com/printing/history/bc-1399"
)}}</textarea>
<section id="c2:highlighted" role="group" class="source highlight" aria-labelledby="c2:source" aria-roledescription="highlighted"><pre><code>%%
{{iframe(
<span class="hljs-string">"the history of printing before 1400"</span>,
<span class="hljs-string">"https://www.prepressure.com/printing/history/bc-1399"</span>
)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c2:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><details>
<summary>the history of printing before 1400</summary>
<iframe width="100%" height="600" loading="lazy" src="https://www.prepressure.com/printing/history/bc-1399"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c3">
<!-- -->
<a href="#c3" class="pos" aria-labelledby="cell__ c3">4</a>
</th>
<th class="id">
<a href="#940d03f9-15d3-488d-a1a6-db6c22b25ca5" id="c3:id" class="id">940d03f9-15d3-488d-a1a6-db6c22b25ca5</a>
</th>
<td class="selected">
<input type="checkbox" id="c3:selected" class="selected" aria-labelledby="" form="c3:form">
</td>
<td class="execution_count">
<label for=":source" id="c3:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c3:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c3:loc" class="loc" form="c3:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c3:form" aria-labelledby="" class="form">
<select id="c3:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c3:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c3:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c3:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c3:source c3:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c3:source" name="source" class="source" readonly aria-labelledby="c3 cell:source" form="c3:form">https://www.historyofinformation.com/detail.php?id=19
https://afe.easia.columbia.edu/songdynasty-module/tech-printing.html
https://www.prepressure.com/printing/history
https://www.prepressure.com/printing/history/bc-1399</textarea>
<section id="c3:highlighted" role="group" class="source highlight" aria-labelledby="c3:source" aria-roledescription="highlighted"><pre><code>https://www.historyofinformation.com/detail.php?id=19
https://afe.easia.columbia.edu/songdynasty-module/tech-printing.html
https://www.prepressure.com/printing/history
https://www.prepressure.com/printing/history/bc-1399</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c3:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><p><a href="https://www.historyofinformation.com/detail.php?id=19">https://www.historyofinformation.com/detail.php?id=19</a>
<a href="https://afe.easia.columbia.edu/songdynasty-module/tech-printing.html">https://afe.easia.columbia.edu/songdynasty-module/tech-printing.html</a>
<a href="https://www.prepressure.com/printing/history">https://www.prepressure.com/printing/history</a>
<a href="https://www.prepressure.com/printing/history/bc-1399">https://www.prepressure.com/printing/history/bc-1399</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c4">
<!-- -->
<a href="#c4" class="pos" aria-labelledby="cell__ c4">5</a>
</th>
<th class="id">
<a href="#a1ada32b-f421-4ad8-a4c0-2b682e941487" id="c4:id" class="id">a1ada32b-f421-4ad8-a4c0-2b682e941487</a>
</th>
<td class="selected">
<input type="checkbox" id="c4:selected" class="selected" aria-labelledby="" form="c4:form">
</td>
<td class="execution_count">
<label for=":source" id="c4:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c4:form">15</output>
</label>
</td>
<td class="loc">
<output role="none" id="c4:loc" class="loc" form="c4:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c4:form" aria-labelledby="" class="form">
<select id="c4:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c4:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c4:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c4:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c4:source c4:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c4:source" name="source" class="source" readonly aria-labelledby="c4 cell:source" form="c4:form">%%
## ted nelson: hypermedia and hypermedia
<figure>
<figcaption>
[Ted Nelson] <time>1965</time> [A File Structure for The Complex, The Changing and the Indeterminate](https://monoskop.org/images/7/73/Nelson_Ted_1965_A_File_Structure_for_the_Complex_the_Changing_and_the_Indeterminate.pdf#page=13)
</figcaption>
> __Let me introduce the word "<dfn>hypertext</dfn>"\*\*\*\~ to mean a body of written or pic-
torial material interconnected in such a complex way that it could not conveniently
be presented or represented on paper.__ It may contain sunmmries, or maps of its
contents and their interrelations; it may contain annotations, additions and foot-
notes from scholars who have examined it. Let me suggest that such an object and
system, properly designed and administered, could have great potential for educa-
tion, increasing the student's range of choices, his sense of freedom, his motiva-
tion, and his intellectual grasp\*\*\*~*. Such a system could grow indefinitely,
gradually including more and more of the ~ r l d ' s written knowledge. However, its
internal file structure would have to be built to accept growth, change and complex
informational arrangements. The ELF is such a file structure.
> Films, sound recordings, and video recordings are also linear strings, bas-
ically for mechanical reasons. But theses, too, can now be arranged as non-linear
systems-- for instance, lattices-- for editing purposes, or for display with dif-
ferent emphasis. (This would naturally require computer control, using the ELF or
a related system, and various cartridge or re-recording devices.) __The hyperfilm--
a browsable or vari-sequenced movie-- is only one of the possible hypermedia that
require our attention.__
</figure></textarea>
<section id="c4:highlighted" role="group" class="source highlight" aria-labelledby="c4:source" aria-roledescription="highlighted"><pre><code>%%
<span class="hljs-comment">## ted nelson: hypermedia and hypermedia</span>
&lt;figure&gt;
&lt;figcaption&gt;
[Ted Nelson] &lt;time&gt;<span class="hljs-number">1965</span>&lt;/time&gt; [A File Structure <span class="hljs-keyword">for</span> The Complex, The Changing <span class="hljs-keyword">and</span> the Indeterminate](https://monoskop.org/images/<span class="hljs-number">7</span>/<span class="hljs-number">73</span>/Nelson_Ted_1965_A_File_Structure_for_the_Complex_the_Changing_and_the_Indeterminate.pdf<span class="hljs-comment">#page=13)</span>
&lt;/figcaption&gt;
&gt; __Let me introduce the word <span class="hljs-string">"&lt;dfn&gt;hypertext&lt;/dfn&gt;"</span>\*\*\*\~ to mean a body of written <span class="hljs-keyword">or</span> pic-
torial material interconnected <span class="hljs-keyword">in</span> such a <span class="hljs-built_in">complex</span> way that it could <span class="hljs-keyword">not</span> conveniently
be presented <span class="hljs-keyword">or</span> represented on paper.__ It may contain sunmmries, <span class="hljs-keyword">or</span> maps of its
contents <span class="hljs-keyword">and</span> their interrelations; it may contain annotations, additions <span class="hljs-keyword">and</span> foot-
notes <span class="hljs-keyword">from</span> scholars who have examined it. Let me suggest that such an <span class="hljs-built_in">object</span> <span class="hljs-keyword">and</span>
system, properly designed <span class="hljs-keyword">and</span> administered, could have great potential <span class="hljs-keyword">for</span> educa-
tion, increasing the student<span class="hljs-string">'s range of choices, his sense of freedom, his motiva-
tion, and his intellectual grasp\*\*\*~*. Such a system could grow indefinitely,
gradually including more and more of the ~ r l d '</span> s written knowledge. However, its
internal file structure would have to be built to accept growth, change <span class="hljs-keyword">and</span> <span class="hljs-built_in">complex</span>
informational arrangements. The ELF <span class="hljs-keyword">is</span> such a file structure.
&gt; Films, sound recordings, <span class="hljs-keyword">and</span> video recordings are also linear strings, bas-
ically <span class="hljs-keyword">for</span> mechanical reasons. But theses, too, can now be arranged <span class="hljs-keyword">as</span> non-linear
systems-- <span class="hljs-keyword">for</span> instance, lattices-- <span class="hljs-keyword">for</span> editing purposes, <span class="hljs-keyword">or</span> <span class="hljs-keyword">for</span> display <span class="hljs-keyword">with</span> dif-
ferent emphasis. (This would naturally require computer control, using the ELF <span class="hljs-keyword">or</span>
a related system, <span class="hljs-keyword">and</span> various cartridge <span class="hljs-keyword">or</span> re-recording devices.) __The hyperfilm--
a browsable <span class="hljs-keyword">or</span> vari-sequenced movie-- <span class="hljs-keyword">is</span> only one of the possible hypermedia that
require our attention.__
&lt;/figure&gt;</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c4:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="ted-nelson:-hypermedia-and-hypermedia" href="#ted-nelson:-hypermedia-and-hypermedia">🔗</a><h2 id="ted-nelson:-hypermedia-and-hypermedia">ted nelson: hypermedia and hypermedia</h2>
<figure>
<figcaption>
<p>[Ted Nelson] <time>1965</time> <a href="https://monoskop.org/images/7/73/Nelson_Ted_1965_A_File_Structure_for_the_Complex_the_Changing_and_the_Indeterminate.pdf#page=13">A File Structure for The Complex, The Changing and the Indeterminate</a></p>
</figcaption>
<blockquote>
<p><strong>Let me introduce the word "<dfn>hypertext</dfn>"***~ to mean a body of written or pic-
torial material interconnected in such a complex way that it could not conveniently
be presented or represented on paper.</strong> It may contain sunmmries, or maps of its
contents and their interrelations; it may contain annotations, additions and foot-
notes from scholars who have examined it. Let me suggest that such an object and
system, properly designed and administered, could have great potential for educa-
tion, increasing the student's range of choices, his sense of freedom, his motiva-
tion, and his intellectual grasp***~*. Such a system could grow indefinitely,
gradually including more and more of the ~ r l d ' s written knowledge. However, its
internal file structure would have to be built to accept growth, change and complex
informational arrangements. The ELF is such a file structure.</p>
</blockquote>
<blockquote>
<p>Films, sound recordings, and video recordings are also linear strings, bas-
ically for mechanical reasons. But theses, too, can now be arranged as non-linear
systems-- for instance, lattices-- for editing purposes, or for display with dif-
ferent emphasis. (This would naturally require computer control, using the ELF or
a related system, and various cartridge or re-recording devices.) <strong>The hyperfilm--
a browsable or vari-sequenced movie-- is only one of the possible hypermedia that
require our attention.</strong></p>
</blockquote>
</figure></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c5">
<!-- -->
<a href="#c5" class="pos" aria-labelledby="cell__ c5">6</a>
</th>
<th class="id">
<a href="#0e9dd133-07ff-4abb-afb8-38d1f972674e" id="c5:id" class="id">0e9dd133-07ff-4abb-afb8-38d1f972674e</a>
</th>
<td class="selected">
<input type="checkbox" id="c5:selected" class="selected" aria-labelledby="" form="c5:form">
</td>
<td class="execution_count">
<label for=":source" id="c5:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c5:form">16</output>
</label>
</td>
<td class="loc">
<output role="none" id="c5:loc" class="loc" form="c5:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c5:form" aria-labelledby="" class="form">
<select id="c5:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c5:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c5:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c5:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c5:source c5:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c5:source" name="source" class="source" readonly aria-labelledby="c5 cell:source" form="c5:form">%%
### project xanadu <time>1960</time>
{{iframe(
"project xanadu",
"https://en.wikipedia.org/wiki/Project_Xanadu",
True
)}}</textarea>
<section id="c5:highlighted" role="group" class="source highlight" aria-labelledby="c5:source" aria-roledescription="highlighted"><pre><code>%%
<span class="hljs-comment">### project xanadu &lt;time&gt;1960&lt;/time&gt;</span>
{{iframe(
<span class="hljs-string">"project xanadu"</span>,
<span class="hljs-string">"https://en.wikipedia.org/wiki/Project_Xanadu"</span>,
<span class="hljs-literal">True</span>
)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c5:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="project-xanadu-1960" href="#project-xanadu-1960">🔗</a><h3 id="project-xanadu-1960">project xanadu <time>1960</time></h3>
<details open>
<summary>project xanadu</summary>
<iframe width="100%" height="600" loading="lazy" src="https://en.wikipedia.org/wiki/Project_Xanadu"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c6">
<!-- -->
<a href="#c6" class="pos" aria-labelledby="cell__ c6">7</a>
</th>
<th class="id">
<a href="#c7eb3cfc-cf90-4723-916e-9cd345d34c6d" id="c6:id" class="id">c7eb3cfc-cf90-4723-916e-9cd345d34c6d</a>
</th>
<td class="selected">
<input type="checkbox" id="c6:selected" class="selected" aria-labelledby="" form="c6:form">
</td>
<td class="execution_count">
<label for=":source" id="c6:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c6:form">12</output>
</label>
</td>
<td class="loc">
<output role="none" id="c6:loc" class="loc" form="c6:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c6:form" aria-labelledby="" class="form">
<select id="c6:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c6:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c6:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c6:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c6:source c6:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c6:source" name="source" class="source" readonly aria-labelledby="c6 cell:source" form="c6:form">%%
{{iframe("literary machines <time>1981</time>", "https://en.wikipedia.org/wiki/Literary_Machines", True)}}</textarea>
<section id="c6:highlighted" role="group" class="source highlight" aria-labelledby="c6:source" aria-roledescription="highlighted"><pre><code>%%
{{iframe(<span class="hljs-string">"literary machines &lt;time&gt;1981&lt;/time&gt;"</span>, <span class="hljs-string">"https://en.wikipedia.org/wiki/Literary_Machines"</span>, <span class="hljs-literal">True</span>)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c6:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><details open>
<summary>literary machines <time>1981</time></summary>
<iframe width="100%" height="600" loading="lazy" src="https://en.wikipedia.org/wiki/Literary_Machines"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c7">
<!-- -->
<a href="#c7" class="pos" aria-labelledby="cell__ c7">8</a>
</th>
<th class="id">
<a href="#03d07e98-ddc8-466b-9eb2-ce2b624b43fb" id="c7:id" class="id">03d07e98-ddc8-466b-9eb2-ce2b624b43fb</a>
</th>
<td class="selected">
<input type="checkbox" id="c7:selected" class="selected" aria-labelledby="" form="c7:form">
</td>
<td class="execution_count">
<label for=":source" id="c7:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c7:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c7:loc" class="loc" form="c7:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c7:form" aria-labelledby="" class="form">
<select id="c7:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c7:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c7:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c7:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c7:source c7:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c7:source" name="source" class="source" readonly aria-labelledby="c7 cell:source" form="c7:form">## julia kristeva: intertextuality
kristeva "coordinates of dialogue" maps words on a 3d axis
1. the writer's word
2. the readers word
3. the word in exterior texts
> The word's status is thus defined horizontally (the word in the text belongs to both writing subject and addressee) as well as vertically (the word in the text is oriented towards an anterior or synchronic literary corpus) . . . each word (text) is an intersection of words (texts) where at least one other word (text) can be read . . . any text is constructed as a mosaic of quotations; any text is the absorption and transformation of another.
https://www.technorhetoric.net/1.2/features/eyman/julia.html</textarea>
<section id="c7:highlighted" role="group" class="source highlight" aria-labelledby="c7:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">## julia kristeva: intertextuality</span>
kristeva "coordinates of dialogue" maps words on a 3d axis
<span class="hljs-bullet">1.</span> the writer's word
<span class="hljs-bullet">2.</span> the readers word
<span class="hljs-bullet">3.</span> the word in exterior texts
<span class="hljs-quote">&gt; The word's status is thus defined horizontally (the word in the text belongs to both writing subject and addressee) as well as vertically (the word in the text is oriented towards an anterior or synchronic literary corpus) . . . each word (text) is an intersection of words (texts) where at least one other word (text) can be read . . . any text is constructed as a mosaic of quotations; any text is the absorption and transformation of another.</span>
https://www.technorhetoric.net/1.2/features/eyman/julia.html</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c7:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="julia-kristeva:-intertextuality" href="#julia-kristeva:-intertextuality">🔗</a><h2 id="julia-kristeva:-intertextuality">julia kristeva: intertextuality</h2>
<p>kristeva "coordinates of dialogue" maps words on a 3d axis</p>
<ol>
<li>the writer's word</li>
<li>the readers word</li>
<li>the word in exterior texts</li>
</ol>
<blockquote>
<p>The word's status is thus defined horizontally (the word in the text belongs to both writing subject and addressee) as well as vertically (the word in the text is oriented towards an anterior or synchronic literary corpus) . . . each word (text) is an intersection of words (texts) where at least one other word (text) can be read . . . any text is constructed as a mosaic of quotations; any text is the absorption and transformation of another.</p>
</blockquote>
<p><a href="https://www.technorhetoric.net/1.2/features/eyman/julia.html">https://www.technorhetoric.net/1.2/features/eyman/julia.html</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c8">
<!-- -->
<a href="#c8" class="pos" aria-labelledby="cell__ c8">9</a>
</th>
<th class="id">
<a href="#a9fc4d3a-fd25-4ae2-ab77-ab0090d8ea75" id="c8:id" class="id">a9fc4d3a-fd25-4ae2-ab77-ab0090d8ea75</a>
</th>
<td class="selected">
<input type="checkbox" id="c8:selected" class="selected" aria-labelledby="" form="c8:form">
</td>
<td class="execution_count">
<label for=":source" id="c8:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c8:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c8:loc" class="loc" form="c8:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c8:form" aria-labelledby="" class="form">
<select id="c8:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c8:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c8:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c8:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c8:source c8:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c8:source" name="source" class="source" readonly aria-labelledby="c8 cell:source" form="c8:form">### intertextuality in technical material
> <strong>In scientific and other scholarly writing intertextuality is core to the collaborative nature of knowledge building and thus citation practices are important to the social organization of fields, the codification of knowledge, and the reward system for professional contribution.[36]</strong> Scientists can be skillfully intentional in the use of references to prior work in order to position the contribution of their work.[37][38] Modern practices of scientific citation, however, have only developed since the late eighteenth century[39] and vary across fields, in part influenced by disciplines’ epistemologies.[40]
> Scientific discourse believes itself to be a superior code; writing
aims at being a total code, including its own forces of destruction.
It follows that writing alone can smash the theological idol set up
by a paternalistic science, refuse to be terror-stricken by what is
wrongly thought of as the 'truth' ofthe content and of reasoning,
and open up all three dimensions of language to research, with its
subversions of logic, its mixing of codes, its shifts of meaning,
dialogues and parodies
https://en.wikipedia.org/wiki/Intertextuality
</textarea>
<section id="c8:highlighted" role="group" class="source highlight" aria-labelledby="c8:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">### intertextuality in technical material</span>
<span class="hljs-quote">&gt; <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span></span>In scientific and other scholarly writing intertextuality is core to the collaborative nature of knowledge building and thus citation practices are important to the social organization of fields, the codification of knowledge, and the reward system for professional contribution.[<span class="hljs-string">36</span>]<span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span></span> Scientists can be skillfully intentional in the use of references to prior work in order to position the contribution of their work.[<span class="hljs-string">37</span>][<span class="hljs-symbol">38</span>] Modern practices of scientific citation, however, have only developed since the late eighteenth century[39] and vary across fields, in part influenced by disciplines’ epistemologies.[40]</span>
<span class="hljs-quote">&gt; Scientific discourse believes itself to be a superior code; writing</span>
aims at being a total code, including its own forces of destruction.
It follows that writing alone can smash the theological idol set up
by a paternalistic science, refuse to be terror-stricken by what is
wrongly thought of as the 'truth' ofthe content and of reasoning,
and open up all three dimensions of language to research, with its
subversions of logic, its mixing of codes, its shifts of meaning,
dialogues and parodies
https://en.wikipedia.org/wiki/Intertextuality
</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c8:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="intertextuality-in-technical-material" href="#intertextuality-in-technical-material">🔗</a><h3 id="intertextuality-in-technical-material">intertextuality in technical material</h3>
<blockquote>
<p><strong>In scientific and other scholarly writing intertextuality is core to the collaborative nature of knowledge building and thus citation practices are important to the social organization of fields, the codification of knowledge, and the reward system for professional contribution.[36]</strong> Scientists can be skillfully intentional in the use of references to prior work in order to position the contribution of their work.[37][38] Modern practices of scientific citation, however, have only developed since the late eighteenth century[39] and vary across fields, in part influenced by disciplines’ epistemologies.[40]</p>
</blockquote>
<blockquote>
<p>Scientific discourse believes itself to be a superior code; writing
aims at being a total code, including its own forces of destruction.
It follows that writing alone can smash the theological idol set up
by a paternalistic science, refuse to be terror-stricken by what is
wrongly thought of as the 'truth' ofthe content and of reasoning,
and open up all three dimensions of language to research, with its
subversions of logic, its mixing of codes, its shifts of meaning,
dialogues and parodies</p>
</blockquote>
<p><a href="https://en.wikipedia.org/wiki/Intertextuality">https://en.wikipedia.org/wiki/Intertextuality</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c9">
<!-- -->
<a href="#c9" class="pos" aria-labelledby="cell__ c9">10</a>
</th>
<th class="id">
<a href="#1bd5d2db-f99e-4cba-96cf-c1c7178b7657" id="c9:id" class="id">1bd5d2db-f99e-4cba-96cf-c1c7178b7657</a>
</th>
<td class="selected">
<input type="checkbox" id="c9:selected" class="selected" aria-labelledby="" form="c9:form">
</td>
<td class="execution_count">
<label for=":source" id="c9:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c9:form">17</output>
</label>
</td>
<td class="loc">
<output role="none" id="c9:loc" class="loc" form="c9:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c9:form" aria-labelledby="" class="form">
<select id="c9:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c9:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c9:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c9:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c9:source c9:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c9:source" name="source" class="source" readonly aria-labelledby="c9 cell:source" form="c9:form">%%
### intertextuality and hypertextuality
{{iframe(
"ted nelson and werner herzog",
"https://www.youtube.com/embed/Bqx6li5dbEY"
)}}</textarea>
<section id="c9:highlighted" role="group" class="source highlight" aria-labelledby="c9:source" aria-roledescription="highlighted"><pre><code>%%
<span class="hljs-comment">### intertextuality and hypertextuality</span>
{{iframe(
<span class="hljs-string">"ted nelson and werner herzog"</span>,
<span class="hljs-string">"https://www.youtube.com/embed/Bqx6li5dbEY"</span>
)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c9:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="intertextuality-and-hypertextuality" href="#intertextuality-and-hypertextuality">🔗</a><h3 id="intertextuality-and-hypertextuality">intertextuality and hypertextuality</h3>
<details>
<summary>ted nelson and werner herzog</summary>
<iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/Bqx6li5dbEY"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c10">
<!-- -->
<a href="#c10" class="pos" aria-labelledby="cell__ c10">11</a>
</th>
<th class="id">
<a href="#066dbcfb-8a0a-4c27-a892-ef374b11da3d" id="c10:id" class="id">066dbcfb-8a0a-4c27-a892-ef374b11da3d</a>
</th>
<td class="selected">
<input type="checkbox" id="c10:selected" class="selected" aria-labelledby="" form="c10:form">
</td>
<td class="execution_count">
<label for=":source" id="c10:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c10:form">13</output>
</label>
</td>
<td class="loc">
<output role="none" id="c10:loc" class="loc" form="c10:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c10:form" aria-labelledby="" class="form">
<select id="c10:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c10:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c10:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c10:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c10:source c10:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c10:source" name="source" class="source" readonly aria-labelledby="c10 cell:source" form="c10:form">%%
{{iframe(
"douglass adams - hyperland <time>1990</time>",
"https://www.youtube.com/embed/cyAQgK7BkA8?si=seBroq19fvHyYBUf"
)}}</textarea>
<section id="c10:highlighted" role="group" class="source highlight" aria-labelledby="c10:source" aria-roledescription="highlighted"><pre><code>%%
{{iframe(
<span class="hljs-string">"douglass adams - hyperland &lt;time&gt;1990&lt;/time&gt;"</span>,
<span class="hljs-string">"https://www.youtube.com/embed/cyAQgK7BkA8?si=seBroq19fvHyYBUf"</span>
)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c10:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><details>
<summary>douglass adams - hyperland <time>1990</time></summary>
<iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/cyAQgK7BkA8?si=seBroq19fvHyYBUf"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c11">
<!-- -->
<a href="#c11" class="pos" aria-labelledby="cell__ c11">12</a>
</th>
<th class="id">
<a href="#1522a09b-7ec4-4a6b-8a97-8ba6efa60e16" id="c11:id" class="id">1522a09b-7ec4-4a6b-8a97-8ba6efa60e16</a>
</th>
<td class="selected">
<input type="checkbox" id="c11:selected" class="selected" aria-labelledby="" form="c11:form">
</td>
<td class="execution_count">
<label for=":source" id="c11:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c11:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c11:loc" class="loc" form="c11:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c11:form" aria-labelledby="" class="form">
<select id="c11:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c11:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c11:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c11:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c11:source c11:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c11:source" name="source" class="source" readonly aria-labelledby="c11 cell:source" form="c11:form">https://era.library.ualberta.ca/items/bd201794-2cfc-434d-ac53-b6f060b60fa4/view/0e67e5d2-933e-4d43-860d-9a1a8f431a26/AHHHHHHHHHHHHH%20(3).pdf</textarea>
<section id="c11:highlighted" role="group" class="source highlight" aria-labelledby="c11:source" aria-roledescription="highlighted"><pre><code>https://era.library.ualberta.ca/items/bd201794-2cfc-434d-ac53-b6f060b60fa4/view/0e67e5d2-933e-4d43-860d-9a1a8f431a26/AHHHHHHHHHHHHH%20(3).pdf</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c11:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><p><a href="https://era.library.ualberta.ca/items/bd201794-2cfc-434d-ac53-b6f060b60fa4/view/0e67e5d2-933e-4d43-860d-9a1a8f431a26/AHHHHHHHHHHHHH%20(3).pdf">https://era.library.ualberta.ca/items/bd201794-2cfc-434d-ac53-b6f060b60fa4/view/0e67e5d2-933e-4d43-860d-9a1a8f431a26/AHHHHHHHHHHHHH (3).pdf</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c12">
<!-- -->
<a href="#c12" class="pos" aria-labelledby="cell__ c12">13</a>
</th>
<th class="id">
<a href="#35e84d12-7fbe-4dd7-8cf6-07035d1c66c5" id="c12:id" class="id">35e84d12-7fbe-4dd7-8cf6-07035d1c66c5</a>
</th>
<td class="selected">
<input type="checkbox" id="c12:selected" class="selected" aria-labelledby="" form="c12:form">
</td>
<td class="execution_count">
<label for=":source" id="c12:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c12:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c12:loc" class="loc" form="c12:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c12:form" aria-labelledby="" class="form">
<select id="c12:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c12:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c12:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c12:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c12:source c12:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c12:source" name="source" class="source" readonly aria-labelledby="c12 cell:source" form="c12:form">we have a lot of ideas and they boil down to text. specifically capturing nonlinear in text.
successful <a href=#>software developers</a> can paid to rearrange text all day.</textarea>
<section id="c12:highlighted" role="group" class="source highlight" aria-labelledby="c12:source" aria-roledescription="highlighted"><pre><code>we have a lot of ideas and they boil down to text. specifically capturing nonlinear in text.
successful <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span></span>software developers<span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span> can paid to rearrange text all day.</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c12:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><p>we have a lot of ideas and they boil down to text. specifically capturing nonlinear in text.
successful <a href="#">software developers</a> can paid to rearrange text all day.</p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c13">
<!-- -->
<a href="#c13" class="pos" aria-labelledby="cell__ c13">14</a>
</th>
<th class="id">
<a href="#67c6fa66-2d01-4220-9f6e-729efb657373" id="c13:id" class="id">67c6fa66-2d01-4220-9f6e-729efb657373</a>
</th>
<td class="selected">
<input type="checkbox" id="c13:selected" class="selected" aria-labelledby="" form="c13:form">
</td>
<td class="execution_count">
<label for=":source" id="c13:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c13:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c13:loc" class="loc" form="c13:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c13:form" aria-labelledby="" class="form">
<select id="c13:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c13:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c13:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c13:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c13:source c13:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c13:source" name="source" class="source" readonly aria-labelledby="c13 cell:source" form="c13:form">## hypertext is a natural material</textarea>
<section id="c13:highlighted" role="group" class="source highlight" aria-labelledby="c13:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">## hypertext is a natural material</span></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c13:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="hypertext-is-a-natural-material" href="#hypertext-is-a-natural-material">🔗</a><h2 id="hypertext-is-a-natural-material">hypertext is a natural material</h2>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c14">
<!-- -->
<a href="#c14" class="pos" aria-labelledby="cell__ c14">15</a>
</th>
<th class="id">
<a href="#a4586410-c4db-496e-9be5-7892963c7ea3" id="c14:id" class="id">a4586410-c4db-496e-9be5-7892963c7ea3</a>
</th>
<td class="selected">
<input type="checkbox" id="c14:selected" class="selected" aria-labelledby="" form="c14:form">
</td>
<td class="execution_count">
<label for=":source" id="c14:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c14:form">18</output>
</label>
</td>
<td class="loc">
<output role="none" id="c14:loc" class="loc" form="c14:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c14:form" aria-labelledby="" class="form">
<select id="c14:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c14:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c14:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c14:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c14:source c14:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c14:source" name="source" class="source" readonly aria-labelledby="c14 cell:source" form="c14:form">%%
### paul otlet mundaneum
[paul otlet's mundaneum](https://www.pinterest.com/pin/176344141631566059/)
{{iframe(
"paul otlet was experimenting with substitutes for a book all rooted in finding means of knowledge management.",
"https://mundaneum.org/en/the-mundaneum/history/"
)}}</textarea>
<section id="c14:highlighted" role="group" class="source highlight" aria-labelledby="c14:source" aria-roledescription="highlighted"><pre><code>%%
<span class="hljs-comment">### paul otlet mundaneum</span>
[paul otlet<span class="hljs-string">'s mundaneum](https://www.pinterest.com/pin/176344141631566059/)
{{iframe(
"paul otlet was experimenting with substitutes for a book all rooted in finding means of knowledge management.",
"https://mundaneum.org/en/the-mundaneum/history/"
)}}</span></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c14:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="paul-otlet-mundaneum" href="#paul-otlet-mundaneum">🔗</a><h3 id="paul-otlet-mundaneum">paul otlet mundaneum</h3>
<p><a href="https://www.pinterest.com/pin/176344141631566059/">paul otlet's mundaneum</a></p>
<details>
<summary>paul otlet was experimenting with substitutes for a book all rooted in finding means of knowledge management.</summary>
<iframe width="100%" height="600" loading="lazy" src="https://mundaneum.org/en/the-mundaneum/history/"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c15">
<!-- -->
<a href="#c15" class="pos" aria-labelledby="cell__ c15">16</a>
</th>
<th class="id">
<a href="#692a9a2c-3000-4ac2-9203-0b4334919953" id="c15:id" class="id">692a9a2c-3000-4ac2-9203-0b4334919953</a>
</th>
<td class="selected">
<input type="checkbox" id="c15:selected" class="selected" aria-labelledby="" form="c15:form">
</td>
<td class="execution_count">
<label for=":source" id="c15:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c15:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c15:loc" class="loc" form="c15:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c15:form" aria-labelledby="" class="form">
<select id="c15:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c15:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c15:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c15:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c15:source c15:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c15:source" name="source" class="source" readonly aria-labelledby="c15 cell:source" form="c15:form">### doug englebart - mother of all demos - <time>1968</time>
the mother of all demos was a monumental acheivement demonstrating connected work in the first recorded demo.
the computer and the act of computing are now part of the performance.</textarea>
<section id="c15:highlighted" role="group" class="source highlight" aria-labelledby="c15:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">### doug englebart - mother of all demos - <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">time</span>&gt;</span></span>1968<span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span></span></span>
the mother of all demos was a monumental acheivement demonstrating connected work in the first recorded demo.
the computer and the act of computing are now part of the performance.</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c15:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="doug-englebart-mother-of-all-demos-1968" href="#doug-englebart-mother-of-all-demos-1968">🔗</a><h3 id="doug-englebart-mother-of-all-demos-1968">doug englebart - mother of all demos - <time>1968</time></h3>
<p>the mother of all demos was a monumental acheivement demonstrating connected work in the first recorded demo.
the computer and the act of computing are now part of the performance.</p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c16">
<!-- -->
<a href="#c16" class="pos" aria-labelledby="cell__ c16">17</a>
</th>
<th class="id">
<a href="#72e41cdd-a6ff-4329-ac1b-57cc151048d9" id="c16:id" class="id">72e41cdd-a6ff-4329-ac1b-57cc151048d9</a>
</th>
<td class="selected">
<input type="checkbox" id="c16:selected" class="selected" aria-labelledby="" form="c16:form">
</td>
<td class="execution_count">
<label for=":source" id="c16:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c16:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c16:loc" class="loc" form="c16:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c16:form" aria-labelledby="" class="form">
<select id="c16:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c16:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c16:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c16:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c16:source c16:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c16:source" name="source" class="source" readonly aria-labelledby="c16 cell:source" form="c16:form">### hypercard <time>1987</time>
![image.png](attachment:192149be-82e9-447f-9030-066770c89ebd.png)
https://www.youtube.com/watch?v=tx_WCIAM4bA</textarea>
<section id="c16:highlighted" role="group" class="source highlight" aria-labelledby="c16:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">### hypercard <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">time</span>&gt;</span></span>1987<span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span></span></span>
![<span class="hljs-string">image.png</span>](<span class="hljs-link">attachment:192149be-82e9-447f-9030-066770c89ebd.png</span>)
https://www.youtube.com/watch?v=tx<span class="hljs-emphasis">_WCIAM4bA</span></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c16:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="hypercard-1987" href="#hypercard-1987">🔗</a><h3 id="hypercard-1987">hypercard <time>1987</time></h3>
<p><img src="attachment:192149be-82e9-447f-9030-066770c89ebd.png" alt="image.png"></p>
<p><a href="https://www.youtube.com/watch?v=tx_WCIAM4bA">https://www.youtube.com/watch?v=tx_WCIAM4bA</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c17">
<!-- -->
<a href="#c17" class="pos" aria-labelledby="cell__ c17">18</a>
</th>
<th class="id">
<a href="#63d8f2ae-2212-45d5-a359-9f33e49ab19f" id="c17:id" class="id">63d8f2ae-2212-45d5-a359-9f33e49ab19f</a>
</th>
<td class="selected">
<input type="checkbox" id="c17:selected" class="selected" aria-labelledby="" form="c17:form">
</td>
<td class="execution_count">
<label for=":source" id="c17:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c17:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c17:loc" class="loc" form="c17:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c17:form" aria-labelledby="" class="form">
<select id="c17:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c17:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c17:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c17:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c17:source c17:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c17:source" name="source" class="source" readonly aria-labelledby="c17 cell:source" form="c17:form">### hypermedia in semantic html5 <time>2008</time>
![](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/content_categories_venn.png)
https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/</textarea>
<section id="c17:highlighted" role="group" class="source highlight" aria-labelledby="c17:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">### hypermedia in semantic html5 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">time</span>&gt;</span></span>2008<span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span></span> </span>
![](<span class="hljs-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/content_categories_venn.png</span>)
https://developer.mozilla.org/en-US/docs/Web/HTML/Content<span class="hljs-emphasis">_categories/</span></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c17:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="hypermedia-in-semantic-html5-2008" href="#hypermedia-in-semantic-html5-2008">🔗</a><h3 id="hypermedia-in-semantic-html5-2008">hypermedia in semantic html5 <time>2008</time></h3>
<p><img src="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/content_categories_venn.png" alt=""></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/">https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/</a></p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c18">
<!-- -->
<a href="#c18" class="pos" aria-labelledby="cell__ c18">19</a>
</th>
<th class="id">
<a href="#8ab4624b-8e55-4a64-8a95-bc37f2062b04" id="c18:id" class="id">8ab4624b-8e55-4a64-8a95-bc37f2062b04</a>
</th>
<td class="selected">
<input type="checkbox" id="c18:selected" class="selected" aria-labelledby="" form="c18:form">
</td>
<td class="execution_count">
<label for=":source" id="c18:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c18:form">2</output>
</label>
</td>
<td class="loc">
<output role="none" id="c18:loc" class="loc" form="c18:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c18:form" aria-labelledby="" class="form">
<select id="c18:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c18:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c18:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c18:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c18:source c18:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c18:source" name="source" class="source" readonly aria-labelledby="c18 cell:source" form="c18:form">### captioning
</textarea>
<section id="c18:highlighted" role="group" class="source highlight" aria-labelledby="c18:source" aria-roledescription="highlighted"><pre><code><span class="hljs-comment">### captioning</span>
</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
</td>
</tr><tr role="listitem" class="cell code markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c19">
<!-- -->
<a href="#c19" class="pos" aria-labelledby="cell__ c19">20</a>
</th>
<th class="id">
<a href="#b5d8e3bc-9fcb-426a-bf8c-3ca5afb86d7e" id="c19:id" class="id">b5d8e3bc-9fcb-426a-bf8c-3ca5afb86d7e</a>
</th>
<td class="selected">
<input type="checkbox" id="c19:selected" class="selected" aria-labelledby="" form="c19:form">
</td>
<td class="execution_count">
<label for=":source" id="c19:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c19:form">19</output>
</label>
</td>
<td class="loc">
<output role="none" id="c19:loc" class="loc" form="c19:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c19:form" aria-labelledby="" class="form">
<select id="c19:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c19:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c19:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c19:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c19:source c19:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c19:source" name="source" class="source" readonly aria-labelledby="c19 cell:source" form="c19:form">%%
## additive color : subtractive color :: hypertext : print
there is a physical conflict with hot/cool media,
{{iframe(
"computational color theory by rune madsen",
"http://printingcode.runemadsen.com/lecture-color/"
)}}</textarea>
<section id="c19:highlighted" role="group" class="source highlight" aria-labelledby="c19:source" aria-roledescription="highlighted"><pre><code>%%
<span class="hljs-comment">## additive color : subtractive color :: hypertext : print</span>
there <span class="hljs-keyword">is</span> a physical conflict <span class="hljs-keyword">with</span> hot/cool media,
{{iframe(
<span class="hljs-string">"computational color theory by rune madsen"</span>,
<span class="hljs-string">"http://printingcode.runemadsen.com/lecture-color/"</span>
)}}</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c19:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/html</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="additive-color-:-subtractive-color-::-hypertext-:-print" href="#additive-color-:-subtractive-color-::-hypertext-:-print">🔗</a><h2 id="additive-color-:-subtractive-color-::-hypertext-:-print">additive color : subtractive color :: hypertext : print</h2>
<p>there is a physical conflict with hot/cool media,</p>
<details>
<summary>computational color theory by rune madsen</summary>
<iframe width="100%" height="600" loading="lazy" src="http://printingcode.runemadsen.com/lecture-color/"></iframe>
</details></td>
</tr><tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/x-python</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"></td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c20">
<!-- -->
<a href="#c20" class="pos" aria-labelledby="cell__ c20">21</a>
</th>
<th class="id">
<a href="#dc8b868b-b176-41d4-bc37-cd5b07b9fa9b" id="c20:id" class="id">dc8b868b-b176-41d4-bc37-cd5b07b9fa9b</a>
</th>
<td class="selected">
<input type="checkbox" id="c20:selected" class="selected" aria-labelledby="" form="c20:form">
</td>
<td class="execution_count">
<label for=":source" id="c20:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c20:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c20:loc" class="loc" form="c20:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c20:form" aria-labelledby="" class="form">
<select id="c20:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c20:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c20:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c20:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c20:source c20:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c20:source" name="source" class="source" readonly aria-labelledby="c20 cell:source" form="c20:form">## La mort de l'auteur - the death of the author
hypertext accelerates intertextuality. it is too complicated for the author to own the narrative. how does our writing empower to the reader to keep reading or writing.
https://en.wikipedia.org/wiki/The_Death_of_the_Author
intertextuality makes the reader an author. with all the distractions we need to give up control.
"To give a text an author" and assign a single, corresponding interpretation to it "is to impose a limit on that text." </textarea>
<section id="c20:highlighted" role="group" class="source highlight" aria-labelledby="c20:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">## La mort de l'auteur - the death of the author</span>
hypertext accelerates intertextuality. it is too complicated for the author to own the narrative. how does our writing empower to the reader to keep reading or writing.
https://en.wikipedia.org/wiki/The<span class="hljs-emphasis">_Death_</span>of<span class="hljs-emphasis">_the_</span>Author
intertextuality makes the reader an author. with all the distractions we need to give up control.
"To give a text an author" and assign a single, corresponding interpretation to it "is to impose a limit on that text." </code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c20:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="La-mort-de-l'auteur-the-death-of-the-author" href="#La-mort-de-l'auteur-the-death-of-the-author">🔗</a><h2 id="La-mort-de-l'auteur-the-death-of-the-author">La mort de l'auteur - the death of the author</h2>
<p>hypertext accelerates intertextuality. it is too complicated for the author to own the narrative. how does our writing empower to the reader to keep reading or writing.</p>
<p><a href="https://en.wikipedia.org/wiki/The_Death_of_the_Author">https://en.wikipedia.org/wiki/The_Death_of_the_Author</a></p>
<p>intertextuality makes the reader an author. with all the distractions we need to give up control.</p>
<p>"To give a text an author" and assign a single, corresponding interpretation to it "is to impose a limit on that text."</p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c21">
<!-- -->
<a href="#c21" class="pos" aria-labelledby="cell__ c21">22</a>
</th>
<th class="id">
<a href="#5ab000f3-4a36-4a94-a2e5-544ab7d8422d" id="c21:id" class="id">5ab000f3-4a36-4a94-a2e5-544ab7d8422d</a>
</th>
<td class="selected">
<input type="checkbox" id="c21:selected" class="selected" aria-labelledby="" form="c21:form">
</td>
<td class="execution_count">
<label for=":source" id="c21:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c21:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c21:loc" class="loc" form="c21:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c21:form" aria-labelledby="" class="form">
<select id="c21:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c21:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c21:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c21:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c21:source c21:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c21:source" name="source" class="source" readonly aria-labelledby="c21 cell:source" form="c21:form">accessible data visualization</textarea>
<section id="c21:highlighted" role="group" class="source highlight" aria-labelledby="c21:source" aria-roledescription="highlighted"><pre><code>accessible data visualization</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c21:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><p>accessible data visualization</p>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c22">
<!-- -->
<a href="#c22" class="pos" aria-labelledby="cell__ c22">23</a>
</th>
<th class="id">
<a href="#3fd85039-8aa3-4c5c-a763-80dbd07adeac" id="c22:id" class="id">3fd85039-8aa3-4c5c-a763-80dbd07adeac</a>
</th>
<td class="selected">
<input type="checkbox" id="c22:selected" class="selected" aria-labelledby="" form="c22:form">
</td>
<td class="execution_count">
<label for=":source" id="c22:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c22:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c22:loc" class="loc" form="c22:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c22:form" aria-labelledby="" class="form">
<select id="c22:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c22:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c22:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c22:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c22:source c22:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c22:source" name="source" class="source" readonly aria-labelledby="c22 cell:source" form="c22:form">## camera obscura and on ward
## industrial revolution
## modernism - reeling from world war 1
### bauhaus school
### bauhaus diaspora
#### silence
## mother of all demos
## apollo 11
## powers of ten</textarea>
<section id="c22:highlighted" role="group" class="source highlight" aria-labelledby="c22:source" aria-roledescription="highlighted"><pre><code><span class="hljs-section">## camera obscura and on ward</span>
<span class="hljs-section">## industrial revolution</span>
<span class="hljs-section">## modernism - reeling from world war 1</span>
<span class="hljs-section">### bauhaus school</span>
<span class="hljs-section">### bauhaus diaspora</span>
<span class="hljs-section">#### silence</span>
<span class="hljs-section">## mother of all demos</span>
<span class="hljs-section">## apollo 11</span>
<span class="hljs-section">## powers of ten</span></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c22:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><a class="perma" aria-labelledby="camera-obscura-and-on-ward" href="#camera-obscura-and-on-ward">🔗</a><h2 id="camera-obscura-and-on-ward">camera obscura and on ward</h2>
<a class="perma" aria-labelledby="industrial-revolution" href="#industrial-revolution">🔗</a><h2 id="industrial-revolution">industrial revolution</h2>
<a class="perma" aria-labelledby="modernism-reeling-from-world-war-1" href="#modernism-reeling-from-world-war-1">🔗</a><h2 id="modernism-reeling-from-world-war-1">modernism - reeling from world war 1</h2>
<a class="perma" aria-labelledby="bauhaus-school" href="#bauhaus-school">🔗</a><h3 id="bauhaus-school">bauhaus school</h3>
<a class="perma" aria-labelledby="bauhaus-diaspora" href="#bauhaus-diaspora">🔗</a><h3 id="bauhaus-diaspora">bauhaus diaspora</h3>
<a class="perma" aria-labelledby="silence" href="#silence">🔗</a><h4 id="silence">silence</h4>
<a class="perma" aria-labelledby="mother-of-all-demos" href="#mother-of-all-demos">🔗</a><h2 id="mother-of-all-demos">mother of all demos</h2>
<a class="perma" aria-labelledby="apollo-11" href="#apollo-11">🔗</a><h2 id="apollo-11">apollo 11</h2>
<a class="perma" aria-labelledby="powers-of-ten" href="#powers-of-ten">🔗</a><h2 id="powers-of-ten">powers of ten</h2>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell markdown" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c23">
<!-- -->
<a href="#c23" class="pos" aria-labelledby="cell__ c23">24</a>
</th>
<th class="id">
<a href="#8d6cd63e-6b99-4fdc-81f1-2e530cdb2a5d" id="c23:id" class="id">8d6cd63e-6b99-4fdc-81f1-2e530cdb2a5d</a>
</th>
<td class="selected">
<input type="checkbox" id="c23:selected" class="selected" aria-labelledby="" form="c23:form">
</td>
<td class="execution_count">
<label for=":source" id="c23:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c23:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c23:loc" class="loc" form="c23:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">markdown</label>
</td>
<td class="form">
<form name="" id="c23:form" aria-labelledby="" class="form">
<select id="c23:cell_type" name="cell_type">
<option selected value="markdown">markdown</option>
<option value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c23:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c23:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c23:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c23:source c23:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c23:source" name="source" class="source" readonly aria-labelledby="c23 cell:source" form="c23:form">* write a work with at least two different kinds of media with narrative.
### examples
* [all the displays]
* write a work using magics
</textarea>
<section id="c23:highlighted" role="group" class="source highlight" aria-labelledby="c23:source" aria-roledescription="highlighted"><pre><code><span class="hljs-bullet">*</span> write a work with at least two different kinds of media with narrative.
### examples
<span class="hljs-bullet"> *</span> [all the displays]
<span class="hljs-bullet">*</span> write a work using magics
</code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
<table role="group" id="c23:outputs" class="outputs">
<thead>
<tr class="output">
<th class="bundle">bundle</th>
<th class="id">id</th>
<th class="exection_count">execution count</th>
<th class="output_type">type</th>
<th class="name">name</th>
<th class="text">text</th>
<th class="ename">ename</th>
<th class="evalue">evalue</th>
<th class="traceback">traceback</th>
<th class="data">data</th>
</tr>
</thead>
<tbody role="group">
<tr class="output" role="none">
<th class="bundle"><a></a></th>
<th class="id"><a></a></th>
<td class="exection_count"><output role="none"></output></td>
<td class="output_type"><label>text/markdown</label></td>
<td class="name"><samp></samp></td>
<td class="text"><samp></samp></td>
<td class="ename"><var></var></td>
<td class="evalue"><samp></samp></td>
<td class="traceback"><samp></samp></td>
<td class="data"><ul>
<li>
<p>write a work with at least two different kinds of media with narrative.</p>
<a class="perma" aria-labelledby="examples" href="#examples">🔗</a><h3 id="examples">examples</h3>
<ul>
<li>[all the displays]</li>
</ul>
</li>
<li>
<p>write a work using magics</p>
</li>
</ul>
</td>
</tr></tbody>
</table></td>
</tr><tr role="listitem" class="cell code" onfocusin="setCurrentFocus(this)" aria-labelledby="#">
<th class="pos" id="c24">
<!-- -->
<a href="#c24" class="pos" aria-labelledby="cell__ c24">25</a>
</th>
<th class="id">
<a href="#ac05774f-18c7-4f79-b137-bbd639f15067" id="c24:id" class="id">ac05774f-18c7-4f79-b137-bbd639f15067</a>
</th>
<td class="selected">
<input type="checkbox" id="c24:selected" class="selected" aria-labelledby="" form="c24:form">
</td>
<td class="execution_count">
<label for=":source" id="c24:execution_count">
<output role="none" class="execution_count" name="execution_count" form="c24:form"></output>
</label>
</td>
<td class="loc">
<output role="none" id="c24:loc" class="loc" form="c24:form"></output>
</td>
<td class="cell_type">
<label class="cell_type" for=":cell_type">code</label>
</td>
<td class="form">
<form name="" id="c24:form" aria-labelledby="" class="form">
<select id="c24:cell_type" name="cell_type">
<option value="markdown">markdown</option>
<option selected value="code">code</option>
<option value="raw">raw</option>
</select>
<button type="submit" disabled>run cell</button>
</form>
</td>
<td class="started_at">
<time id="c24:started" class="started_at"></time>
</td>
<td class="completed_at">
<time id="c24:completed" class="completed_at"></time>
</td>
<td class="elapsed">
<time id="c24:elapsed" class="elapsed"></time>
</td>
<td class="source">
<!-- hash refers to the current parent cell id -->
<select class="collapse" aria-expanded="true" aria-owns="c24:source c24:highlighted">
<option value="collapse">▶</option>
<option value="expand" selected>▼</option>
</select>
<textarea id="c24:source" name="source" class="source" readonly aria-labelledby="c24 cell:source" form="c24:form"></textarea>
<section id="c24:highlighted" role="group" class="source highlight" aria-labelledby="c24:source" aria-roledescription="highlighted"><pre><code></code></pre></section>
<!-- code mirror would go in this cell -->
</td>
<td class="metadata">
<dialog class="metadata">
<dl class="metadata"></dl>
</dialog>
</td>
<td class="outputs">
</td>
</tr></tbody>
</table>
</section>
<footer>
<!-- preview and next post -->
<section class="log" role="group">
<details>
<summary>activity log</summary>
</details>
<table id="log">
<thead>
<th>id</th>
<th>time</th>
<th>level</th>
<th>message</th>
<th>actions</th>
</thead>
<template>
<tr>
<th><a></a></th>
<th><time></time></th>
<th><label></label></th>
<th><samp></samp></th>
<th></th>
</tr>
</template>
</table>
</section>
<dl role="none" id="nbformat">
<dt></dt>
<dd itemprop="nbformat"></dd>
<dt></dt>
<dd itemprop="nbformat_minor"></dd>
</dl>
<!--copyright-->
<a id="BOTTOM" href="#TOP" accesskey="0">skip to top</a>
</footer>
</body>
<template id="tpl-thebe-body">
<div class="thebe-status">
<div class="thebe-activate">Activate</div>
</div></template>
<template id="tpl-thebe-head">
<script type="text/x-thebe-config">
{
requestKernel: true,
selector: ".code textarea[name=source]",
outputSelector: "fieldset.nb-outputs > div",
stripOutputPrompts: true,
binderOptions: {
repo: "binder-examples/requirements",
},
codeMirrorConfig: {
matchBrackets: true,
},
mountActivateWidget: true,
mountStatusWidget: true,
mountRunAllButton: false,
mountRestartButton: false,
mountRestartAllButton: false,
}
</script>
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
</template>
<template id="tpl-mermaid">
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</template>
</html>
Raw
main.js
import { program } from "commander";
import * as fs from 'fs';
import path from "path";
import markdownit from "markdown-it";
import * as d3 from 'd3';
import hljs from 'highlight.js';
// folx warned me about jsdom
import slugify from "slugify";
import { DOMParser, parseHTML } from 'linkedom';
program.version("2024-11-30").arguments("<file>").parse(process.argv)
const print = console.log;
const idrefs = ["id", "aria-labelledby", "aria-describedby", "aria-controls", "aria-owns", "form"];
const idrefsSelector = idrefs.map(x => `[${x}]`).join(",");
const default_css = fs.readFileSync(path.resolve(process.cwd(), "./refnb/refnb.css"));
const tpl_doc = fs.readFileSync(path.resolve(process.cwd(), "./refnb/refnb.html"));
const tpl_dom = newDocument();
const tpl_cell_row = tpl_dom.select("#tpl\\:cell-row").node().content.querySelector("tr");
const tpl_output_table = tpl_dom.select("#tpl\\:output").node().content.querySelector("table");
const tpl_output_row = tpl_dom.select("#tpl\\:output-row").node().content.querySelector("tr");
const cell_types = ["code", "markdown", "raw"]
const output_types = ["display_data", "execute_result"]
const literate = /^\s*%{2}\s+/m;
function newDocument() {
const {
// note, these are *not* globals
window, document, customElements,
HTMLElement,
Event, CustomEvent
// other exports ..
} = parseHTML(String(tpl_doc));
return d3.select(document);
}
program.args.forEach(
(file, i, args) => {
var nb = JSON.parse(fs.readFileSync(file));
var document = newDocument();
let cells = document.select("section").select("table.cells > tbody").selectAll(
"tr.cell"
).data(nb.cells).join(
(enter) => {
enter.append(
(cell, i) => {
let cell_row = tpl_cell_row.cloneNode(true);
if (cell.cell_type == "markdown") {
cell.outputs = [{ output_type: "display_data", data: { "text/markdown": cell.source } }]
}
if (cell.outputs?.length > 0) {
let outputs = d3.select(cell_row).select("td.outputs").append(
_ => tpl_output_table.cloneNode(true)
).selectAll("tbody").data(
cell.outputs
).join("tbody").selectAll("tr").data(d => d.data ? Object.entries(d.data).map(
x => x.concat([d.metadata])
) : [d]).join(
(enter) => {
enter.append((output, i) => {
let output_id = "";
let output_row = tpl_output_row.cloneNode(true);
enterOutput(output_id, d3.select(output_row), output, cell);
return output_row
})
}
)
}
let id = `c${i}`;
// enter building the cell AFTER we've built the output form.
enterCell(id, d3.select(cell_row), cell, i, nb)
return cell_row
}
);
}
)
// inject css for this specific template
document.select("style[src='refnb.css']").attr("src", null).text(
default_css
)
document.node().querySelectorAll("h1,h2,h3,h4,h5,h6,[role=heading]").forEach(
node => headingToId(d3.select(node), document.node())
)
for (let line of document.select("html").node().outerHTML.split("\n")) {
process.stdout.write(`${line}\n`)
}
}
)
function enterCell(cell_id, cell_row, cell, i, nb) {
cell_types.forEach((t) => {
cell_row.classed(t, cell.cell_type == t)
});
cell_row.select("td.cell_type>label").text(cell.cell_type)
cell_row.select(`option[value="${cell.cell_type}"]`).attr("selected", "")
enterCellCode(cell_id, cell_row, cell, i, nb)
enterCellIds(cell_id, cell_row)
}
function enterCellIds(cell_id, cell_row) {
cell_row.selectAll(idrefsSelector).each((data, i, nodes) => {
let node = d3.select(nodes[i]);
for (let ref of idrefs) {
let refs = node.attr(ref);
if (!refs) { continue }
refs = refs.split(" ");
let idref = ""
for (let [j, label] of refs.entries()) {
idref += idref ? " " : "";
if (label.startsWith(":")) {
idref += cell_id
} else if (label == "#") {
label = cell_id;
}
idref += label;
}
node.attr(ref, idref)
}
})
}
function enterCellMarkdown(cell_row, cell, i, nb) {
}
function enterCellCode(cell_id, cell_row, cell, i, nb) {
cell_row.select("th.pos>a").text(i + 1).attr("href", `#${cell_id}`);
cell_row.select("th.id>a").text(cell.id).attr("href", `#${cell.id}`);
cell.execution_count && cell_row.select("td.execution_count>label>output").text(cell.execution_count);
let source = cell.source.join("")
cell_row.select("td.source>textarea").text(source)
cell_row.classed("markdown", cell.cell_type == "markdown" || Boolean(source.match(literate)))
let highlighted = hljs.highlight(source, {
language:
cell.cell_type == "code" ? "python" : "markdown"
});
cell_row.select("td.source>section.highlight").html(
`<pre><code>${highlighted.value}</code></pre>`
)
}
function enterOutput(output_id, output_row, output, cell) {
if (output.output_type) {
} else {
let [type, bundle, metadata] = output;
output_row.select("td.output_type>label").text(type);
if (type == "text/html") {
output_row.select("td.data").html(bundle.join(""))
} else if (type == "text/markdown") {
let output = output_row.select("td.data").html(
markdownit({
html: true,
linkify: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) { }
}
return ''; // use external default escaping
}
}).render(bundle.join(""))
)
output.selectAll("img").each(
(_, j, nodes) => {
let img = d3.select(nodes[j]);
if (img.attr("src").startsWith("attachment:")) {
let [_, attachment] = img.attr("src").split(":", 1);
let bundle = cell.metadata[attachment]
if (bundle) {
for ([type, bundle] of Object.entries(bundle)) {
bundle = [bundle]
break
}
}
}
}
)
} else if (type == "text/plain") {
output_row.select("td.data").append("samp").text(bundle.join(""))
} else if (type.startsWith("image")) {
// we need the fucking cell metadata to attachments in for markdown cells
// svgs need different treatment
let img = output_row.select("td.data").append("img");
// alt text?
img.attr("src", `data:${type};base64,${bundle.join("")}`);
}
}
}
function headingToId(heading, document) {
let id = heading.attr("id") || slugify(heading.text());
heading.attr("id", id)
let a = document.createElement("a")
d3.select(a).attr("href", `#${id}`).attr("aria-labelledby", id).text("🔗").classed("perma", true)
let h = heading.node();
// it makes sense for the link to be before the header.
// mvoing forward int eh document confirms the location.
h.insertBefore(a, h)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment