first chapter

README.md

@@ -46,7 +46,7 @@ Metadata can be applied to markdown files using FrontMatters YAML. The metadata
 
 ```MARKDOWN
 ---
-excerpt: tl;dr
+
 title: Capacitors
 type: Capacitor
 valueSymbol: unf

app.py

@@ -31,16 +31,25 @@ def showlist(param):
 
     return html
 
+def showGrid(param):
+    template = env.select_template(["snippets/show-grid.jinja"])
+    html = template.render(documents=documents, type=param.strip())
+
+    return html
+
 
 def slugify_filter(value):
     return slugify(value)
 
 
 def shortcode_filter(value):
+    
     shortcode_callbacks = {
-        "showlist": showlist
+        "showlist": showlist,
+        "showGrid": showGrid
     }
 
+
     def shortcode_replacer(match):
         shortcode_name = match.group(1).strip()
         param = match.group(2).strip()
@@ -122,7 +131,7 @@ def get_inventory():
 
     with open("src/content/component-inventory.csv") as f:
         documents['inventory'] = []
-        for line in csv.DictReader(f, fieldnames=('ID', 'Name', 'Value', 'type', 'Date', 'Where')):
+        for line in csv.DictReader(f, fieldnames=('ID', 'Name', 'Value', 'type', 'Date', 'Where', 'Mounting type')):
             documents['inventory'].append(line)
 
 

src/assets/style.css

@@ -1,182 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-
-:root {
-	--background: floralwhite;
-	--text: black;
-	--accent: orange;
-	font-size: 14px;
-}
-
-body,
-html {
-	margin: 0 0;
-	padding: 0 0;
-	width: 100%;
-	height: 100%;
-}
-
-header {
-	font-family: monospace;
-}
-
-body {
-	font-family: sans-serif;
-	background-color: var(--background);
-	
-	color: var(--text);
-}
-
-main {
-	display: grid;
-	grid-template-columns: 3fr 1fr;
-	grid-template-rows: 1fr min-content;
-	max-width: calc(1200px - 2rem);
-	margin: 0rem auto;
-	grid-gap: 1rem;
-	align-items: start;
-}
-
-aside {
-	position: sticky;
-	top: 0;
-	padding: 1rem 1rem 1rem 0;
-}
-
-article {
-	line-height: 150%;
-	max-width: 80ch;
-	margin: 0 auto;
-	display: flex;
-	flex-direction: column;
-}
-
-
-@media only screen and (max-width: 600px)  {
-	main {
-		grid-template-columns: 1fr;
-		margin: unset;
-		border: 2px solid red;
-	}
-}
-
-
-@media only print {
-	main {
-		grid-template-columns: 1fr;
-		margin: unset auto;
-		max-width: 80ch;
-	}
-}
-
-
-@media (prefers-color-scheme: dark) {
-	body {
-		--background: #1b1b1b;
-		--text: white;
-		--background-invert: teal;
-		--text-invert: black;
-	}
-}
-
-
-
-a,
-a[visited] {
-	color: var(--accent);
-}
-
-ul {
-	padding-left: 2ch;
-}
-
-
-article h1, article h2, article h3, article h4 {
-	margin-bottom: 0;
-}
-
-
-
-article img {
-	max-width: 90ch;
-	margin-left: -5ch;
-	margin-top: 2ch;
-	margin-bottom: 2ch;
-}
-
-article img::after {
-  display: block;
-  content: ' (source: ' attr(alt) ') ';
-  color: hotpink;
-}
-
-
-.footnote {
-	order: 99999999999;
-}
-
-.footnote ol {
-	line-height: 100%;
-	font-size: 80%;
-}
-
-hr {
-	width: 100%;
-}
-
-table {
-	width: 100%;
-	border-spacing: 0px;
-	table-layout: fixed;
-	text-align: left;
-}
-
-th,
-td {
-	border-bottom: var(--text)
-	padding: 8px 8px;
-}
-
-
-.list--events {
-	list-style: none;
-	padding: 0 0;
-	font-family: monospace;
-}
-
-.list--events li {
-	border: 2px solid var(--text);
-	padding: 12px;
-	margin-bottom: 12px;
-	display: flex;
-	gap: 1rem;
-	align-items: center;
-	
-}
-
-.list--events .host {
-	margin-left: auto;
-	background: var(--background);
-	padding: 4px;
-	border-radius: 8px;
-	color: var(--text);
-	font-size: 12px;
-}
-
-
-h1 {
-	font-size: 1.5em;
-}
-
-h2 {
-	font-size: 1.375em;
-}
-
-h3 {
-	font-size: 1.25em;
-}
-
-h4, h5, h6 {
-	font-size: 1.125em;
-}

src/assets/styles/layout.css

@@ -0,0 +1,140 @@
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	--footnote-w: 30ch;
+	--article-w: 70ch;
+	--main-w: calc(1200px - 2rem);
+	--img-offset: -5ch;
+}
+
+body,
+html {
+	margin: 0 0;
+	padding: 0 0;
+	width: 100%;
+	height: 100%;
+}
+
+main {
+	display: grid;
+	grid-template-rows: 1fr min-content;
+	max-width: var(--main-w);
+	margin: 0rem auto;
+	grid-gap: 1rem;
+	align-items: start;
+}
+
+main:has(> aside) {
+	grid-template-columns: 3fr 1fr;
+}
+
+aside {
+	padding: 1rem 1rem 1rem 0;
+}
+
+article {
+	max-width: var(--article-w);
+	margin: 0 auto;
+	flex-direction: column;
+}
+
+sup li:before,
+.footnote li[count]:before {
+	display: inline;
+	float: left;
+	margin-right: 1ch;
+	font-weight: bold;
+	content: attr("count");
+	content: " [" attr(count) "]";
+	color: var(--accent);
+}
+
+ul.grid {
+	display: grid;
+	list-style: none;
+	padding: 0 0;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	clear: both;
+}
+
+@media screen {
+	ul.grid {
+		width: 100vw;
+		margin-left: calc(-50vw + (var(--article-w) / 2));
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+img {
+	max-width: 100%;
+	width: 100%;
+}
+
+li.grid__item {
+	border: 2px solid #989177;
+	border-top-color: transparent;
+	border-right-color: transparent;
+	padding: 24px;
+}
+
+li.grid__item:nth-of-type(4n),
+li.grid__item:last-child {
+	border-right-color: #989177;
+}
+
+li.grid__item:nth-of-type(1),
+li.grid__item:nth-of-type(2),
+li.grid__item:nth-of-type(3),
+li.grid__item:nth-of-type(4) {
+	border-top-color: #989177;
+}
+
+article h1,
+article h2 {
+	clear: both;
+}
+
+@media (max-width: calc(1200px - 2rem)) {
+	body {
+		--main-w: calc(100vw - 2rem);
+	}
+}
+
+@media (max-width: 70ch) {
+	article {
+		--article-w: 60ch;
+	}
+}
+
+@media (min-width: 60ch) {
+	sup li {
+		float: right;
+		clear: right;
+		width: var(--footnote-w);
+		margin-right: calc((var(--footnote-w) * -1));
+		padding-left: 1rem;
+		margin-top: -1em;
+		margin-bottom: 1em;
+	}
+}
+
+@media (max-width: 600px) {
+	main {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media only print {
+	main {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 90ch) {
+	article img {
+		max-width: calc(100% - var(--img-offset) - var(--img-offset));
+	}
+}

src/assets/styles/style.css

@@ -0,0 +1,93 @@
+:root {
+	--background: floralwhite;
+	--text: black;
+	--accent: orange;
+	font-size: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		--background: #1b1b1b;
+		--text: white;
+		--background-invert: teal;
+		--text-invert: black;
+	}
+}
+
+body {
+	background-color: var(--background);
+	color: var(--text);
+}
+
+.list--events {
+	list-style: none;
+	padding: 0 0;
+	font-family: monospace;
+}
+
+.list--events li {
+	border: 2px solid var(--text);
+	padding: 12px;
+	margin-bottom: 12px;
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+}
+
+.list--events .host {
+	margin-left: auto;
+	background: var(--background);
+	padding: 4px;
+	border-radius: 8px;
+	color: var(--text);
+	font-size: 12px;
+}
+
+.m-0 {
+	margin: 0 0;
+}
+
+@media print {
+	.no-print {
+		display: none;
+	}
+
+	li,
+	.footnote {
+		break-inside: avoid;
+	}
+
+	main {
+		margin: 2rem 2rem;
+	}
+
+	body {
+	}
+
+	article {
+		--img-offset: -2rem;
+		max-width: calc(100% - var(--footnote-w));
+		margin: 0 0;
+	}
+}
+
+body:has(input#show-notes) .footnote li,
+body:has(input#show-notes) sup li,
+body:has(input#show-notes) sup {
+	opacity: 1;
+	transition:
+		opacity 0.2s linear,
+		transform 0.2s linear,
+		display 0.2s linear 0.3s;
+	transform: translate3d(0px, 0px, 0px);
+	display: inline;
+	transition-behavior: allow-discrete;
+}
+
+body:has(input#show-notes:not(:checked)) .footnote li,
+body:has(input#show-notes:not(:checked)) sup li,
+body:has(input#show-notes:not(:checked)) sup {
+	opacity: 0;
+	transform: translate3d(0px, 10px, 0px);
+	display: none;
+}

src/assets/styles/typography.css

@@ -0,0 +1,109 @@
+header {
+	font-family: monospace;
+}
+
+body {
+	font-family: sans-serif;
+}
+
+article {
+	line-height: 170%;
+}
+sup li,
+li[count] {
+	list-style: none;
+}
+
+sup:has(li),
+.footnote {
+	font-family: monospace;
+	font-size: 80%;
+	line-height: 1;
+}
+
+sup li {
+	line-height: 1.5;
+}
+
+sup li p {
+	margin-top: 0;
+}
+
+a,
+a[visited] {
+	color: var(--accent);
+}
+
+ul {
+	padding-left: 2ch;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+	margin-bottom: 0;
+	margin-top: 2rem;
+}
+
+article img {
+	max-width: 90ch;
+	margin-left: var(--img-offset);
+	margin-top: 2ch;
+	margin-bottom: 2ch;
+}
+
+article img::after {
+	display: block;
+	content: " (source: " attr(alt) ") ";
+	color: hotpink;
+}
+
+.footnote ol {
+	line-height: 100%;
+	font-size: 80%;
+}
+
+hr {
+	width: 100%;
+}
+
+table {
+	width: 100%;
+	border-spacing: 0px;
+	table-layout: fixed;
+	text-align: left;
+	margin-left: -8px;
+	margin-right: -8px;
+	width: calc(100% + 16px);
+}
+
+th,
+td {
+	border-bottom: var(--text);
+	padding: 8px 8px;
+	line-height: 1;
+}
+
+article sup img {
+	width: 100%;
+	margin: 1rem 0 0.5rem 0;
+}
+
+h1 {
+	font-size: 1.5em;
+}
+
+h2 {
+	font-size: 1.375em;
+}
+
+h3 {
+	font-size: 1.25em;
+}
+
+h4,
+h5,
+h6 {
+	font-size: 1.125em;
+}

src/assets/styles/wiki.html

@@ -0,0 +1,345 @@
+__NOTOC__
+
+<h1
+	style="
+		text-align: center;
+		margin: -2rem auto 2rem;
+		font-size: 150px;
+		line-height: 1;
+		border-bottom: none;
+	"
+>
+	<span style="text-decoration: line-through">''Pre''/Fake</span> Assessment
+</h1>
+<h2 style="text-align: center; margin: 2rem auto; font-size: 70px">
+	Salvaging Sound Devices
+</h2>
+
+<div
+	style="
+		font-size: 20px;
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+	"
+>
+	<h3>Planning for the next 20 mins</h3>
+	<ul
+		style="
+			margin: 2rem 0;
+			list-style: arabic-indic;
+			list-style-type: &quot;// &quot;;
+			font-size: 80px;
+		"
+	>
+		<li>Y1</li>
+		<li>Graduation Proposal</li>
+	</ul>
+</div>
+
+<div
+	style="
+		clear: both;
+		font-size: 24px;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		min-height: 100svh;
+		margin-left: -10svw;
+		margin-right: -10svw;
+		width: calc(100% + 20svw);
+		align-items: start;
+		grid-gap: 2rem;
+	"
+>
+	<div style="position: sticky; top: 12px">
+		<h3>// Year 1 (or pre now)</h3>
+		<p>
+			HTML’ing, Repair’ing (Or break’ing), Sound’ing, Radio’ing,
+			Solder’ing, Workshop’ing, developing the interest in
+			Permacomput’ing, Server’ing
+		</p>
+	</div>
+	<div
+		style="
+			display: grid;
+			grid-template-columns: 50% 50%;
+			grid-auto-columns: min-content;
+			grid-gap: 1rem;
+			font-size: 16px;
+		"
+	>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/5/59/THHGTAAA_visual_promo.jpg/600px-THHGTAAA_visual_promo.jpg"
+			/>
+			<p>The Hitchhiker's Guide to an Active Archive</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/4/4b/Screenshot_2024-04-02_at_09.20.12.png/751px-Screenshot_2024-04-02_at_09.20.12.png"
+			/>
+			<p>Finding new ways of programming</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/83/Android_postmarketos.jpeg/270px-Android_postmarketos.jpeg"
+			/>
+			<p>Failing to install postmarketOS</p>
+		</div>
+
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/4/4c/GarageCafe_1.jpeg/798px-GarageCafe_1.jpeg?20241217205603"
+			/>
+			<p>Presenting the web comic at Garage Cafe</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/0/02/Screenshot_2024-12-17_at_21.57.32.png/1600px-Screenshot_2024-12-17_at_21.57.32.png?20241217205746"
+			/>
+			<p>Printer Jam at GPN22</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/4/43/DIWO_workshop.jpg/441px-DIWO_workshop.jpg"
+				alt=""
+			/>
+			<p>Many!</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/13/Workshop_1.jpg?20240402074408"
+			/>
+			<p>Many !Workshops!</p>
+		</div>
+
+		<div>
+			{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/d/d2/Vitrinekast_proposal_workshop_1.mp3|style=width:200px}}
+			<p>Many</p>
+		</div>
+		<div>
+			{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/6/66/Vitrinekast_proposal_workshop_3.mp3|style=width:200px}}
+			<p>Many</p>
+		</div>
+		<div>
+			{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/5/51/Vitrinekast_proposal_workshop_2.mp3|style=width:200px}}
+			<p>Many</p>
+		</div>
+		<div>
+			{{video|mp4=https://pzwiki.wdka.nl/mw-mediadesign/images/e/ea/Vitrinekast_proposal_project_3.mp4|style=width:250px}}
+			<p>Many</p>
+		</div>
+		<div>
+			<h3 style="font-size: 24px">
+				''DIWO as a powerful method of sharing & exploring''
+			</h3>
+		</div>
+	</div>
+</div>
+
+<div
+	style="
+		clear: both;
+		font-size: 24px;
+		display: grid;
+		gap: 2rem;
+		grid-template-columns: 3fr 1fr;
+		min-height: 100svh;
+		margin-left: -10svw;
+		margin-right: -10svw;
+		align-items: center;
+		width: calc(100% + 20svw);
+	"
+>
+	<div>
+		<h3>// Graduation Proposal: Salvaging sound devices</h3>
+
+		<p>
+			In this project, I will research the various ways in which
+			<mark>abandoned media can be repurposed into sound devices</mark>. I
+			consider "abandoned media" to be discarded devices that no longer
+			serve their original intended purpose yet could still function as
+			something else. For instance, a printer that has an “Internal
+			Communication Problem” being repurposed into a percussive
+			instrument. I’ll explore the ideas of
+			<mark>speculative sound circuits</mark>, where playful and absurdist
+			methodologies are applied to create sound using various unlikely
+			technological devices (Richards, 2018)
+			<ref
+				>John Richards. Speculative Sound Circuits. 2018. DOI:
+				10.14236/ewic/EVAC18.33</ref
+			>
+			, and Salvage Computing<ref
+				>‘Salvage computing’ (no date) ''Salvage computing''.
+				https://damaged.bleu255.com/Salvage_Computing/ (Accessed:
+				November 22, 2024).</ref
+			>. This will happen in a
+			<mark>series of DIY/DIWO workshops/hangouts</mark>. The workshops
+			will be hosted at Klankschool
+			<ref
+				>Klankschool is a community operating a space (and a server) in
+				the south of Rotterdam. Its members share a common interest in
+				performances, sound art, improvisation, noise, … Each member is
+				a teacher, student, musician, janitor and more. The motivation
+				to have a community-run space is to share sounds, work on
+				projects, organise events, hang out, exhibit works, learn, teach
+				and listen. See https://klank.school/</ref
+			>, together with Riviera Taylor.</p
+		>
+	</div>
+
+	<div
+		style="
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-auto-rows: min-content;
+			grid-gap: 2rem;
+			font-size: 16px;
+		"
+	>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/f/f4/Applebiteme.jpg/360px-Applebiteme.jpg"
+			/>
+			<p>Apple certified Modifier</p>
+		</div>
+	</div>
+</div>
+
+<div
+	style="
+		clear: both;
+		font-size: 24px;
+		display: grid;
+		gap: 2rem;
+		grid-template-columns: 2fr 1fr;
+		min-height: 100svh;
+		margin-left: -10svw;
+		margin-right: -10svw;
+		align-items: center;
+		width: calc(100% + 20svw);
+		align-items: start;
+	"
+>
+	<div>
+		<h3>Workshops</h3>
+		<p>
+			During the hangouts, we will <mark>explore various methods around
+			salvaging components and dismantling devices </mark>, making our own
+			instruments using these materials, live coding hardware through
+			MQTT/OSC servers & applications, and everything in between.
+			Ultimately, they <i>could</i> lead up to a BYOP (Bring Your Own Printer)
+			Orchestra. <mark>The hangouts will be at the Klankschool and involve
+			the Klankschool community</mark>. The hangouts are hosted in collaboration
+			with Riviera Taylor, who’s writing a thesis about Community Server Maintenance, and creating her project
+			around the KlankServer.
+		</p>
+
+		<p>
+			We're already having an (un)repair night every thursday, so if
+			you're in the neighberhood, <mark>come by</mark>!
+		</p>
+		<p>
+			Link to https://unrepair.klank.school/ for a "schedule".
+		</p>
+	</div>
+	<div
+		style="
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-auto-rows: min-content;
+			grid-gap: 2rem;
+			font-size: 16px;
+		"
+	>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/1d/Omdooreenringlightjetehalen.jpg"
+			/>
+			<p>(Un)Repaired Salvaged Stuff</p>
+		</div>
+		<div>
+			<img
+				style="width: 100%; height: 100%; object-fit: contain"
+				src="https://pzwiki.wdka.nl/mw-mediadesign/images/0/0a/Repairnight_1.jpeg"
+			/>
+			<p>Modded Pokemon camera</p>
+		</div>
+	</div>
+</div>
+
+<div
+	style="
+		clear: both;
+		font-size: 24px;
+		display: grid;
+		gap: 2rem;
+		grid-template-columns: 2fr 1fr;
+		min-height: 100svh;
+		margin-left: -10svw;
+		margin-right: -10svw;
+		align-items: center;
+		width: calc(100% + 20svw);
+		align-items: start;
+	"
+>
+	<div>
+		<h3>// Field guide</h3>
+		<p>
+			The field guide is an open-ended, pocket sized, compact publication, so the
+			reader (and me) is invited to take the publication outside, further
+			investigate, annotate and experiment with the discarded materials.
+		</p>
+		<p>
+			I have set up a documentation tool on the klankserver, which has already been pretty helpful. 
+			It is built using markdown/CSV-with-Jinja-to-HTML-to-CTRL+P.
+		</p>
+		<p>
+			https://unrepair.klank.school/thesis.html
+		</p>
+	</div>
+	<div
+		style="
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+		"
+	>
+		<img
+			style="width: 100%; height: 100%; object-fit: contain"
+			src="https://pzwiki.wdka.nl/mw-mediadesign/images/5/55/Worm_hitch.jpg?20240402072728"
+		/>
+	</div>
+</div>
+
+<div style="clear: both; font-size: 24px">
+	<div>
+		<h3>BUT...</h3>
+		<ul
+			style="
+				margin: 2rem 0;
+				list-style: arabic-indic;
+				list-style-type: &quot;?_?&quot;;
+				font-size: 48px;
+			"
+		>
+			<li>Electronics is <b>hard</b>: <i>How to make the workshop accessible?</i></li>
+			<li>Salvaging causes a scarcity of materials: <i>Not very workshop friendly?</li>
+			<li><i>Fallback scenario: what if <b>nothing</b>works?</i></li>
+		</ul>
+	</div>
+</div>
+
+=== Footnotes ===
+<references />

src/content/chapters/1-dismantling.md

@@ -0,0 +1,68 @@
+---
+title: "Chapter 1: Dismantling"
+type: Chapter
+pdf: "/assets/chapters/chapter_1.pdf"
+---
+
+When salvaging components, we are looking for abandoned hardware. Hardware that is still fine on the inside, but no longer deemed as functional by its previous owner[^no-longer-functional] in our consumer culture. These devices can be a goldmine of working parts that could be repurposed, as their hardware probably exceeded their stylistic obsolescence[^stylistic-obsolescence]. 
+
+[^no-longer-functional]:The spectrum of "still fine" and "no longer deemed as functional" is very wide. Think about printers for which their specific cartridges are no longer produced, Blu-ray players, the E.T. game that was buried[^et-buried], that iPhone 8 with a bad battery, Spotify's "Car Thing", etc. 
+
+[^et-buried]: Atari video game burial
+
+[^stylistic-obsolescence]: **stylistic obsolescence** The idea that objects can go out of fashion the idea, and therefore needed to be replaced every season [^out-with-the-trash].
+
+[^out-with-the-trash]: Sterne, J. (2007). Out with the Trash: on the future of New Media. In C. R. Acland (Ed.), Residual media. U of Minnesota Press.
+
+When inspecting a device for salvage possibilities, I try to imagine what the inside of the device looks like. What kind of components might I find? Is it above my skill set (I don’t mess with power supplies) Are there any motors or moving parts? What kind of material is the device made off? What time period is it from?
+If I don’t expect much, I’ll leave it for the next person to salvage. 
+
+When you've found a device you'd like to salvage parts from, it's time for the dismantling process. In this dismantling process, we are going to take apart the device to gain access to all the smaller parts inside.
+
+### Recommended Tools
+
+![Illustration of the tools](https://placehold.co/600x400?text=Illustration+of+the+tools)
+
+For this, the following tools are recommended:
+
+- A set of screwdrivers
+- A plastic “thing” (e.g. a plectrum, or a dull plastic knife)
+
+Dependent on your device, additional specialty tools might be required, such as:
+
+- A hot air gun
+- A drill/dremmel/saw to cut away plastic
+- Apples 10k repair tools
+
+## Opening the device
+In some cases, product manufacturers provide service manuals[^repair-manual]. These service manuals contain valuable information that can help you understand the device and take it apart. Unfortunately, none of the devices I’ve taken apart came with service manuals, meaning we have to figure it out ourselves. There are online communities that[^lack] create their own dismantling guides.
+
+[^lack]: since the manufacturer refuses.
+
+[^repair-manual]: ![Preview of the manual](/assets/chapters/2/trouble-shoot.png) [This](https://elektrotanya.com/panasonic_rs-768us.pdf/download.html#dl) repair manual that passed the Repair Club contains a schematic, disassembly information, parts list and multiple trouble shouting guides.
+
+Let’s take a look at the device. Do you spot any screws? They might be hidden behind stickers noting you that you are now voiding your warranty[^warranty]. I found it helpful to follow the seams of the material of the device since, especially with plastics, it’s not just screws holding your device together.
+
+[^warranty]: These warranty stickers are not always legally binding. [^warranty-source]. Plus, do you have the receipt for something you found in the bin?
+
+[^warranty-source]: Aragon, N. (2024, December 17). Warranty Void Stickers: Are they legal outside the US? iFixit. https://www.ifixit.com/News/74736/warranty-void-stickers-are-illegal-in-the-us-what-about-elsewhere
+
+If you’ve managed to get a gap in a seam somewhere, stick a thin plastic “thing” in there and carefully push it along the seam. There might be tiny tabs holding the parts together. If the manufacturer really didn’t want you to get in there, they’ve glued it all up, and it is impossible to get in the device without causing permanent damage [^black-box]. A hot air gun could help to dissolve the glue (I’m afraid of melting plastic), or you could cut out the plastic using a knife or drill.
+
+This process really is about finding small gaps in the enclosures[^black-boxism], until you’ve dismantled the entire device. Did you manage? Amazing!
+
+[^black-box]: These glued up personal devices are clearly not made to be opened. They are black boxes by design, designed to become obsolete (Hertz & Parikka, 2012)[^hertz-parikka].
+
+[^hertz-parikka]: Hertz, G., & Parikka, J. (2012). Zombie Media: Circuit Bending Media Archaeology into an Art Method. Leonardo, 45(5), 424–430. https://doi.org/10.1162/leon_a_00438
+
+[^black-boxism]: slowly removing the outer layer of your black box, revealing the inner mechanisms.  
+
+
+# Overview of dismantled devices
+
+{{ showGrid devices}}
+
+## Hardware to look out for, or to avoid
+
+In retrospect, i'll write here something about what to look out for and what to avoid. 
+I'd like to discuss things like tiny tiny components vs. bigger vintage resistors, but this I think will be better to do within the "components" chapter.

src/content/chapters/2-component-salvaging.md

@@ -0,0 +1,18 @@
+---
+title: "Chapter 2: Components"
+type: Chapter
+---
+
+An overview of Resistors, transistors, LED's, capacitors, switches, knobs, speakers, coils, that can be found in the wild.
+Of each component, i'll include:
+
+- Visual representation
+- If and where I've found them
+- What they could be used for (reference to the recipes later)
+- Variants of this component
+- Empty space for notes
+
+Will include a subsection for "rare" components. I expect that chips (counters, 555 timers) will be way more difficult to salvage. What are ways to work around these components? Are there any devices to look out for where these components can be salvaged?
+
+_I have started to create an inventory of components based on the first found device. The pages in the sidebar are accessible._
+{{ showGrid components}}

src/content/chapters/3-recipes.md

@@ -0,0 +1,26 @@
+---
+title: "Chapter 3: Recipes for sound devices"
+type: Chapter
+---
+
+How to ism, waarbij zelfs in het circuit bend boek precies staat gvoorgekouwd wat hje moet doen.
+
+7(?) recipes on making sound devices. Each recipe has been "tested" trough the DIY/DIWO hangouts as part of the project. These are the ones defined now:
+
+- Creating oscillators using easily salvageable components
+- Building sequencers using relays
+- Building triggers/LFO's using encoders
+- Using motors to create oscillators
+
+Each recipe has
+
+- Title
+- image/visual representation
+- audio example(s)
+- description
+- schematic
+- When/how/with whom i've made them (reference to the DIWO hangouts)
+- Recommendations for further development
+- empty space for notes
+
+_I have started to map out the first recipes, and also to discover what recipes could be of interest. These are accessible in the sidebar_

src/content/component-inventory.csv

@@ -1,84 +1,113 @@
-ID,Name,Value,type,Date,Where
+ID,Name,Value,type,Date,Where,Mounting type
-1,Electrolytic capacitor,?,Capacitor,25/11/2024,Reel to Reel recorder
+1,Electrolytic capacitor,?,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-2,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder
+2,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-3,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder
+3,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-4,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder
+4,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-5,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder
+5,Electrolytic capacitor,??,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-6,Film Capacitor,0.033 160,Capacitor,25/11/2024,Reel to Reel recorder
+6,Film Capacitor,0.033 160,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-7,Film Capacitor,0.15 100 898,Capacitor,25/11/2024,Reel to Reel recorder
+7,Film Capacitor,0.15 100 898,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-8,Film Capacitor,0.33 63,Capacitor,25/11/2024,Reel to Reel recorder
+8,Film Capacitor,0.33 63,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-9,Film Capacitor,0.47 63,Capacitor,25/11/2024,Reel to Reel recorder
+9,Film Capacitor,0.47 63,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-10,Film Capacitor,0.47 63 598,Capacitor,25/11/2024,Reel to Reel recorder
+10,Film Capacitor,0.47 63 598,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-11,Film Capacitor,1000 160-89m,Capacitor,25/11/2024,Reel to Reel recorder
+11,Film Capacitor,1000 160-89m,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-12,Electrolytic capacitor,1000 uF,Capacitor,25/11/2024,Reel to Reel recorder
+12,Electrolytic capacitor,1000 uF,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-13,Electrolytic capacitor,2500 uF,Capacitor,25/11/2024,Reel to Reel recorder
+13,Electrolytic capacitor,2500 uF,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-14,Electrolytic capacitor,25uF,Capacitor,25/11/2024,Reel to Reel recorder
+14,Electrolytic capacitor,25uF,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-15,Film Capacitor,4700 100-79m,Capacitor,25/11/2024,Reel to Reel recorder
+15,Film Capacitor,4700 100-79m,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-16,Electrolytic capacitor,50uF,Capacitor,25/11/2024,Reel to Reel recorder
+16,Electrolytic capacitor,50uF,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-17,Film Capacitor,5600 100 79m,Capacitor,25/11/2024,Reel to Reel recorder
+17,Film Capacitor,5600 100 79m,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-18,Film Capacitor,6500-100 89M,Capacitor,25/11/2024,Reel to Reel recorder
+18,Film Capacitor,6500-100 89M,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-19,Film Capacitor,9,47 63 - 259,Capacitor,25/11/2024,Reel to Reel recorder
+19,Film Capacitor,9 47 63 - 259,Capacitor,25/11/2024,Reel to Reel recorder,Through-Hole
-20,Not sure which type,,Diode,25/11/2024,Reel to Reel recorder
+20,Not sure which type,-,Diode,25/11/2024,Reel to Reel recorder,Through-Hole
-21,3x 5 pin input,,Inputs,25/11/2024,Reel to Reel recorder
+21,3x 5 pin input,-,Inputs,25/11/2024,Reel to Reel recorder,Through-Hole
-22,1x 5 pin input,,Inputs,25/11/2024,Reel to Reel recorder
+22,1x 5 pin input,-,Inputs,25/11/2024,Reel to Reel recorder,Through-Hole
-23,Resistor,10Ω,Resistor,25/11/2024,Reel to Reel recorder
+23,Resistor,10Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-24,Resistor,75Ω,Resistor,25/11/2024,Reel to Reel recorder
+24,Resistor,75Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-25,Resistor,220Ω,Resistor,25/11/2024,Reel to Reel recorder
+25,Resistor,220Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-26,Resistor,220Ω,Resistor,25/11/2024,Reel to Reel recorder
+26,Resistor,220Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-27,Resistor,460Ω,Resistor,25/11/2024,Reel to Reel recorder
+27,Resistor,460Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-28,Resistor,750Ω,Resistor,25/11/2024,Reel to Reel recorder
+28,Resistor,750Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-29,Resistor,750Ω,Resistor,25/11/2024,Reel to Reel recorder
+29,Resistor,750Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-30,Resistor,1.5kΩ,Resistor,25/11/2024,Reel to Reel recorder
+30,Resistor,1.5kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-31,Resistor,10kΩ,Resistor,25/11/2024,Reel to Reel recorder
+31,Resistor,10kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-32,Resistor,10kΩ,Resistor,25/11/2024,Reel to Reel recorder
+32,Resistor,10kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-33,Resistor,14KΩ,Resistor,25/11/2024,Reel to Reel recorder
+33,Resistor,14KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-34,Resistor,17kΩ,Resistor,25/11/2024,Reel to Reel recorder
+34,Resistor,17kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-35,Resistor,220]Ω,Resistor,25/11/2024,Reel to Reel recorder
+35,Resistor,220]Ω,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-36,Resistor,3.2KΩ,Resistor,25/11/2024,Reel to Reel recorder
+36,Resistor,3.2KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-37,Resistor,4.7KΩ,Resistor,25/11/2024,Reel to Reel recorder
+37,Resistor,4.7KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-38,Resistor,40kΩ,Resistor,25/11/2024,Reel to Reel recorder
+38,Resistor,40kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-39,Resistor,50kΩ,Resistor,25/11/2024,Reel to Reel recorder
+39,Resistor,50kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-40,Resistor,70KΩ,Resistor,25/11/2024,Reel to Reel recorder
+40,Resistor,70KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-41,Resistor,7kΩ,Resistor,25/11/2024,Reel to Reel recorder
+41,Resistor,7kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-42,Resistor,7kΩ,Resistor,25/11/2024,Reel to Reel recorder
+42,Resistor,7kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-43,Resistor,80kΩ,Resistor,25/11/2024,Reel to Reel recorder
+43,Resistor,80kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-44,Resistor,80KΩ,Resistor,25/11/2024,Reel to Reel recorder
+44,Resistor,80KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-45,Resistor,8KΩ,Resistor,25/11/2024,Reel to Reel recorder
+45,Resistor,8KΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-46,Resistor,8kΩ,Resistor,25/11/2024,Reel to Reel recorder
+46,Resistor,8kΩ,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-47,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+47,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-48,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+48,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-49,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+49,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-50,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+50,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-51,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+51,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-52,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+52,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-53,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+53,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-54,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+54,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-55,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+55,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-56,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+56,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-57,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+57,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-58,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+58,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-59,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+59,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-60,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+60,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-61,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+61,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-62,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+62,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-63,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+63,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-64,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+64,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-65,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+65,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-66,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+66,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-67,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+67,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-68,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+68,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-69,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+69,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-70,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+70,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-71,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+71,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-72,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+72,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-73,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+73,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-74,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+74,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-75,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+75,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-76,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder
+76,Resistor,To measure,Resistor,25/11/2024,Reel to Reel recorder,Through-Hole
-77,BC109B NPN Transistor,,Transistor,25/11/2024,Reel to Reel recorder
+77,BC109B NPN Transistor,-,Transistor,25/11/2024,Reel to Reel recorder,Through-Hole
-78,BC107B NPN Transistor,,Transistor,25/11/2024,Reel to Reel recorder
+78,BC107B NPN Transistor,-,Transistor,25/11/2024,Reel to Reel recorder,Through-Hole
-79,BC107B NPN Transistor,,Transistor,25/11/2024,Reel to Reel recorder
+79,BC107B NPN Transistor,-,Transistor,25/11/2024,Reel to Reel recorder,Through-Hole
-80,BC183c NPN Transistor,,Transistor,25/11/2024,Reel to Reel recorder
+80,BC183c NPN Transistor,-,Transistor,25/11/2024,Reel to Reel recorder,Through-Hole
-81,S277B,,Transistor,25/11/2024,Reel to Reel recorder
+81,S277B,-,Transistor,25/11/2024,Reel to Reel recorder,Through-Hole
-82,BC183c NPN Transistor,,,25/11/2024,Reel to Reel recorder
+82,BC183c NPN Transistor,-,-,25/11/2024,Reel to Reel recorder,Through-Hole
-83,About 17 Unidentified parts, Unidentified, Unidentified, 25/11/2024,Reel to Reel recorder
+83,About 17 Unidentified parts, Unidentified, Unidentified,25/11/2024,Reel to Reel recorder,Through-Hole
+84,5807M,FM Tuner,Chip,12/12/2024,MP3 FM Radio,SMD
+85,-,7533-1,Chip,12/12/2024,MP3 FM Radio,SMD
+86,a digital audio processor,PT2314,Chip,12/12/2024,MP3 FM Radio,SMD
+87,-,A1shb,Transistor,12/12/2024,MP3 FM Radio,SMD
+88,motor driver for cds,CD5888,Chip,12/12/2024,MP3 FM Radio,SMD
+89,-,M5677,Chip,12/12/2024,MP3 FM Radio,SMD
+90,Flash Memory,F20 100GCP,Chip,12/12/2024,MP3 FM Radio,SMD
+91,-,ATMLH730,Chip,12/12/2024,MP3 FM Radio,SMD
+92,-,WT1V,Chip,12/12/2024,MP3 FM Radio,SMD
+93,-,J3Y,Transistor,12/12/2024,MP3 FM Radio,SMD
+94,8-stage shift-and-store bus register,74HC4094D,Chip,05/12/2024,Telephone,SMD
+95,8-stage shift-and-store bus register,74HC4094D,Chip,05/12/2024,Telephone,SMD
+96,8-stage shift-and-store bus register,74HC4094D,Chip,05/12/2024,Telephone,SMD
+97,-,S2A,Chip,05/12/2024,Telephone,SMD
+98,-,S2A,Chip,05/12/2024,Telephone,SMD
+99,-,S1A,Chip,05/12/2024,Telephone,SMD
+100,-,S1A,Chip,05/12/2024,Telephone,SMD
+101,-,S1A,Chip,05/12/2024,Telephone,SMD
+102,-,N187,Transistor,05/12/2024,Telephone,SMD
+103,photocoupler,Lv7 356T X8,Chip,05/12/2024,Telephone,SMD
+104, SCHOTTKY BARRIER RECTIFIER,PJ74 SX34,Chip,05/12/2024,Telephone,SMD
+105,MOSFET,FR220N 711P ,Chip,05/12/2024,Telephone,SMD
+106,-,2A,Chip,05/12/2024,Telephone,SMD
+107,-,572,Chip,05/12/2024,Telephone,SMD
+108,Bridge Rectifiers,62 HD04,Chip,05/12/2024,Telephone,SMD
+109,Bridge Rectifiers,62 HD04,Chip,05/12/2024,Telephone,SMD
+110,Flash memory,FLO82A 084,Chip,05/12/2024,Telephone,SMD
+111,An audio power IC with built-in two channels developed for portable radio cassette tape recorder with power ON / OFF switch,TA8227P,Chip,12/12/2024,MP3 FM Radio,Through-Hole
+112,PNP Transistor,58550 D 331,Transistor,12/12/2024,MP3 FM Radio,Through-Hole

src/content/components/capacitor.md

@@ -1,8 +1,9 @@
 ---
-excerpt: tl;dr
+
 title: Capacitors
 type: Capacitor
 description: This is the description
+image: https://placehold.co/600x400
 ---
 
 # A text about capacitors

src/content/components/chips.md

@@ -0,0 +1,9 @@
+---
+
+title: Chips
+type: Chip
+description: This is the description
+image: https://placehold.co/600x400
+---
+
+# A text about Chips

src/content/components/inputs.md

@@ -1,8 +1,9 @@
 ---
-excerpt: tl;dr
+
 title: Inputs
 type: Inputs
 description: This is the description
+image: https://placehold.co/600x400
 ---
 
 # A text about Inputs

src/content/components/resistor.md

@@ -1,11 +1,10 @@
 ---
-excerpt: tl;dr
+
 title: Resistors
 type: Resistor
 description: This is the description
+image: /assets/components/salvaged-resistors.webp
 ---
 
-![A scan of salvaged resistors from the [Reel to Reel recorder](/devices/reel-to-reel-recorder.html)](/assets/components/salvaged-resistors.webp)
-_A scan of salvaged resistors from the [Reel to Reel recorder](/devices/reel-to-reel-recorder.html)_
 
 # A text about resistors

src/content/components/transistor.md

@@ -1,8 +1,9 @@
 ---
-excerpt: tl;dr
+
 title: Transistors
 type: transistor
 description: This is the description
+image: https://placehold.co/600x400
 ---
 
 # A text about transistors

src/content/components/unidentified.md

@@ -1,9 +1,9 @@
 ---
-excerpt: tl;dr
+
 title: Unidentified
 type: Unidentified
 description: This is the description
-
+image: https://placehold.co/600x400
 ---
 
 Against all odds, I've been discovering a few components that I have no idea what they are! Ideally, I'll figure it out at some point.

src/content/devices/disk-drive.md

@@ -0,0 +1,10 @@
+---
+excerpt: I recently heard that Hard Drives contain magnets!
+title: Hard drive
+found: Years ago
+where: In my house
+description: This is a description
+image: https://placehold.co/600x400
+---
+
+recently heard that there are magnets in disk drives!

src/content/devices/mp3-fm-radio.md

@@ -0,0 +1,20 @@
+---
+
+title: MP3 / FM Radio
+type: Audio device
+found: Beginning of September 2024
+where: Interaction Station Trash
+description: This is a description
+image: "/assets/devices/mp3_front.jpeg"
+---
+
+The MP3/FM Radio player was found in the trash bin at the Interaction Station. This device seems more modern than the reel to reel recorder, and I suspect it will contain some SMD components. 
+
+During the dismantling process, I've discovered loads of design features discouraging repair. The pockets for the screws are so deep it’s nearly impossible to get a screwdriver in, and there are at least 4 messages mentioning shock hazards. 
+Surprisingly, it turned out to be pretty simple to open, as there were only 8 screws.
+
+The PCB has SMD components. Taking these off went much faster than expected, but I'm afraid I've melted a bunch in the process. Additionally, these components are so ridiculously [^collapse] tiny, they are probably impossible to solder on to. Most of the part names were only readable with a microscope.
+
+[^collapse]: I've read something in the collapse OS documentation that could be a reference here.
+
+On the back side of the PCB, there are some regular-sized components. I wonder why this was done this way.

src/content/devices/reel-to-reel-recorder.md

@@ -1,13 +1,14 @@
 ---
-excerpt: tl;dr
+excerpt: This device misses a few parts but hopefully the tape heads still function
 title: Reel to Reel recorder
 type: Audio device
 found: Beginning of November 2024
 where: Interaction Station Trash
 description: This is a description
+image: "/assets/reel-to-reel-recorder.jpeg"
 ---
 
-The Reel to Reel Recorder was found in the trash bin at the Interaction Station. At least half of the parts were already removed. I chose to salvage this device since i could see the components were massive, which makes them easier to desolder and hopefully easier to use.
+The Reel to Reel Recorder was found in the trash bin at the Interaction Station. At least half of the parts were already removed. I chose to salvage this device since I could see the components were massive, which makes them easier to resolder and hopefully easier to use.
 
 Since so many parts were already removed, I'm unable to see which brand the device is from. But some of the components have a "Germany" mark.
 

src/content/devices/telephone.md

@@ -0,0 +1,11 @@
+---
+excerpt: This phone has great buttons! I want to try to make the recipe around expressive touch pads with this!
+title: Telephone
+type: Audio device
+found: Beginning of December 2024
+where: Interaction Station Trash
+description: This is a description
+image: "/assets/devices/scan_phone.jpg"
+---
+
+This phone has great buttons! I want to try to make the recipe around expressive touchpads with this!

src/content/index.md

@@ -6,7 +6,7 @@ description: This is the description of the about us page
 
 Dear reader,
 
-This web page includes the WIP version of my thesis. Organisation wise, I'm still exploring out file structures, but hopefully it won't be too messy. Ideally, the sidebar wil act as a TOC, allowing you to navigate to the different sections of the thesis. I'm using this same repository to manage documentation for the unrepair page at [https://unrepair.klank.school](https://unrepair.klank.school) (hence the funky cursor), so it could be that these collide in some spaces.
+This web page includes the WIP version of my thesis. Organisation wise, I'm still exploring out file structures, but hopefully it won't be too messy. Ideally, the sidebar wil act as a TOC, allowing you to navigate to the different sections of the thesis. I'm using this same repository to manage documentation for the unrepair page at [https://unrepair.klank.school](https://unrepair.klank.school), so it could be that these collide in some spaces.
 
 The sidebar will also include functionality to export the entire thesis as a PDF, and mediawiki format.
 
@@ -17,72 +17,19 @@ The sidebar will also include functionality to export the entire thesis as a PDF
 - [Thesis Proposal (XPUB WIKI)](https://pzwiki.wdka.nl/mediadesign/User:Vitrinekast/Thesis_Proposal)
 - [Project Proposal (XPUB WIKI)](https://pzwiki.wdka.nl/mediadesign/User:Vitrinekast/Proposal)
 
-Not sure where to start the thesis, but better to start somewhere, then not at all. So, starting with the proposed outline, and structuring from there.
-
 ---
 
-# Outline
+# All chapters
 
-"A field guide to Salvaging Sound Devices"
+[Open page](/chapters/1-dismantling.html)
 
-## 1.0 Introduction
+{! chapters/1-dismantling.md !}
 
-- Setting the scene/context -> If it is indeed a field guide (or a time capsule?), this would be the place to describe that field.
+[Open page](/chapters/2-component-salvaging.html)
-- Here, I would like to mention planned obsolescence & zombie media/media archeology
-- Maybe pose the question - what is worth salvaging?
-- How salvaging for me is not a (this is what I expect) sustainable practices, in terms of time=money, since parts and products are mostly easily available and replacable. Which is a privileged perspective, compared to [AfroRack explaining the importance of service manuals](https://www.youtube.com/watch?v=qYyGhHUL6sU)
 
-## 2.0 Quick start guide
+{! chapters/2-component-salvaging.md !}
 
-- How to salvage components,
+[Open page](/chapters/3-recipes.html)
-- great places to find them ,
-- things to look out for.
-- The difficulty in salvaging components from modern hardware.
-- If it is helpful for the rest of the field guide, it could include a short glossary.
-    - I think it is.
-- What to do with the leftovers? The carcass of a printer?
 
-## 3.0 Components
+{! chapters/3-recipes.md !}
 
-An overview of Resistors, transistors, LED's, capacitors, switches, knobs, speakers, coils, that can be found in the wild.
-Of each component, i'll include:
-
-- Visual representation
-- If and where I've found them
-- What they could be used for (reference to the recipes later)
-- Variants of this component
-- Empty space for notes
-
-Will include a subsection for "rare" components. I expect that chips (counters, 555 timers) will be way more difficult to salvage. What are ways to work around these components? Are there any devices to look out for where these components can be salvaged?
-
-_I have started to create an inventory of components based on the first found device. The pages in the sidebar are accessible._
-
-## 4.0 Recipes for sound devices
-
-7(?) recipes on making sound devices. Each recipe has been "tested" trough the DIY/DIWO hangouts as part of the project. These are the ones defined now:
-
-- Creating oscillators using easily salvageable components
-- Building sequencers using relays
-- Building triggers/LFO's using encoders
-- Using motors to create oscillators
-
-Each recipe has
-
-- Title
-- image/visual representation
-- audio example(s)
-- description
-- schematic
-- When/how/with whom i've made them (reference to the DIWO hangouts)
-- Recommendations for further development
-- empty space for notes
-
-_I have started to map out the first recipes, and also to discover what recipes could be of interest. These are accessible in the sidebar_
-
-## 5.0 Conclusion
-
-Is salvaging for components a fruitful practice?
-
-<!-- #### Questions
-
-- For Michael - this python project is getting pretty big, how can i best structure the code? -->

src/content/recipes/motor-synth.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 title: Motor Synthesizer
 description: This is the description
 ---

src/content/recipes/rc-filters.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 title: Passive RC Filter
 ---
 

src/content/recipes/sequencers.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 title: Crank based sequencers
 description: This is the description
 ---

src/content/recipes/single-transistor-oscillator.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 title: A single transistor Oscillator
 description: This is the description
 ---
@@ -23,3 +23,25 @@ Since this schematic uses only a couple of components, I think this recipe could
 - A Capacitor
 
 The size of the capacitor and the resistor decide upon the frequency of the pitch.
+
+## Notes while making the circuit
+
+- First time i've tried building this circuit, it did not work. Since, I've found a book[^transistor-book] that might be of use when I would like to do more with transistors.
+
+I suspect that salvaging IC's will be slightly more difficult, which is why i've been focussing on transistors, but ye, if i cant get the simplest circuit to work, maybe I should step a way from the suspisions and see what i'll find.
+
+[^transistor-book]: Turner, R. P. (1957). Transistor circuits. GERNSBACK LIBRARY INC. https://tubes.mit.edu/6S917/_static/2024/resources/turner_transistor_circuits.pdf
+
+Additionally, i've learned from Ash that crystals and transistors could be used to make radios!
+
+Turns out, this circuit above is actually called the "Relaxation oscillator". The wikipedia description is actually pretty visual: "It consists of an energy-storing element (a capacitor or, more rarely, an inductor) and a nonlinear switching device (a latch, Schmitt trigger, or negative resistance element) connected in a feedback loop.[22][23] "
+
+There are various relaxation circuits:
+
+- Using the 555 timer IC
+- Using an op-amp! https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/OpAmpHystereticOscillator.svg/440px-OpAmpHystereticOscillator.svg.png
+
+Then there are also "RC Oscillators" https://en.wikipedia.org/wiki/RC_oscillator
+
+AGain no luck with this schematic....
+I'll try my luck with a 555 timer circuit now.

src/content/repair-logs/20241031.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 layout: post
 title: 31st October 2024
 description: This is the description

src/content/repair-logs/28112024.md

@@ -1,5 +1,5 @@
 ---
-excerpt: tl;dr
+
 layout: post
 title: 28th November 2024
 description: Repair Log

src/templates/base.jinja

@@ -4,7 +4,9 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	
-	<link rel="stylesheet" type="text/css" href="/assets/style.css">
+	<link rel="stylesheet" type="text/css" href="/assets/styles/layout.css">
+	<link rel="stylesheet" type="text/css" href="/assets/styles/typography.css">
+	<link rel="stylesheet" type="text/css" href="/assets/styles/style.css">
 	<meta name="format-detection" content="telephone=no">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
@@ -36,19 +38,16 @@
 	<main>
 		<section>
 			{% block content %}{% endblock %}
-			</section>
+		</section>
 
 			{% block aside %}
 
 				<aside>
 					<h1>WIP THESIS</h1>
 					<a href="/thesis.html">index</a>
+					<a href="/index.html">UnRepair</a>
 
-
+					<h2>Overview of pages</h2>
-					<h2>TOC</h2>
-
-					<h3>1.0 Introduction</h3>
-					<h3>2.0 Quick start guide</h3>
 
 					{% macro render_list(name, title) -%}
 						{% if documents[name]|length > 0 %}
@@ -65,12 +64,10 @@
 					{%- endmacro %}
 
 
-					<p>{{ render_list('components', '3.0 Components') }}</p>
+					<p>{{ render_list('chapters', 'Chapters') }}</p>
-					<p>{{ render_list('recipes', '4.0 Recipes for sound devices') }}</p>
+					<p>{{ render_list('components', 'Components') }}</p>
-					<h3>5.0 Conclusion?</h3>
+					<p>{{ render_list('devices', 'Devices') }}</p>
-
+					<p>{{ render_list('recipes', 'Recipes') }}</p>
-					<h1>Other pages</h1>
-
 					<p>{{ render_list('repair-logs', 'Repair Logs') }}</p>
 
 					{% block footer %}
@@ -82,4 +79,6 @@
 
 
 	</body>
+
+	
 	</html>

src/templates/components.jinja

@@ -11,6 +11,8 @@
 
 	<article>
 		<h1>{{page['title']}}</h1>
+		<img src="{{ page['image'] }}" alt="">
+
 		{{ page['body'] }}
 
 		<h2>Component inventory</h2>
@@ -18,3 +20,17 @@
 		{{inventory("type", (page.type.capitalize()  | slugify)) }}
 	</article>
 {% endblock %}
+
+
+{% block aside %}
+
+<script type="text/javascript">
+    document.querySelectorAll(".footnote ol li").forEach((li) => {
+        console.log(li.id);
+        const link = document.querySelector(`a[href="#${li.id}"]`);
+        li.setAttribute("count", link.textContent);
+
+        link.parentNode.insertBefore(li, link.nextSibling);
+    });
+</script>
+{% endblock %}

src/templates/devices.jinja

@@ -7,7 +7,7 @@
 
 
 {% block content %}
-	<header><p>template: post.jinja</p></header>
+	<header><p>template: device.jinja</p></header>
 
 
     <article>
@@ -16,7 +16,23 @@
 
         <h2>Parts salvaged from this device</h2>
 
-        {{ inventory("Where", ( page.title.capitalize() | slugify )) }}
+        {% if page.title %}
+            {{ inventory("Where", ( page.title.capitalize() | slugify )) }}
+        {%  endif %}
 
     </article>
 {% endblock %}
+
+
+{% block aside %}
+
+<script type="text/javascript">
+    document.querySelectorAll(".footnote ol li").forEach((li) => {
+        console.log(li.id);
+        const link = document.querySelector(`a[href="#${li.id}"]`);
+        li.setAttribute("count", link.textContent);
+
+        link.parentNode.insertBefore(li, link.nextSibling);
+    });
+</script>
+{% endblock %}

src/templates/index.jinja

@@ -4,6 +4,6 @@
 	<header><p>template: index.jinja</p></header>
 
     <article>
-    	{{ page['body'] }}
+    	{{ page['body'] | shortcode }}
     </article>
 {% endblock %}

src/templates/post.jinja

@@ -1,11 +1,37 @@
-{% extends "base.jinja" %}
+{% extends "base.jinja" %} {% block content %}
+<header><p>template: post.jinja</p>
+<input type="checkbox" checked id="show-notes"><label for="show-notes">Show notes</label></header>
 
-{% block content %}
+<article>
-	<header><p>template: post.jinja</p></header>
+    <h1>{{page['title']}}</h1>
 
-
+    {% if page.pdf %}
-    <article>
+    <p class='no-print'>
-        <h1>{{page['title']}}</h1>
+        <i>Download this chapter as a <a href="{{ page.pdf }}">PDF</a></i>
-    	{{ page['body'] }}
+    </p>
-    </article>
+    {% endif %} {{ page['body'] | shortcode }}
+</article>
+{% endblock %}
+    
+{% block aside %}
+
+
+<script type="text/javascript">
+    document.querySelectorAll(".footnote ol li").forEach((li) => {
+          const link = document.querySelector(`sup a:not(.footnote a):not(sup sup a)[href="#${li.id}"]`);
+          
+        if(link) {
+            console.log("moving around", link)
+            li.setAttribute("count", link.textContent);  
+           link.parentNode.insertBefore(li, link.nextSibling);
+        } else {
+
+            console.log("couldnt find it for ", li)
+            const nestedLink = document.querySelector(`a[href="#${li.id}"]`);
+            li.setAttribute("count", nestedLink.textContent);  
+
+        }
+        
+    });
+</script>
 {% endblock %}

src/templates/snippets/inventory.jinja

@@ -1,5 +1,5 @@
 {% macro inventory(compare, compareWith) -%}
-	<h2>doing a macro</h2>
+	
 	{% set ns = namespace(has_inventory=false) %}
 	{% for item in documents.inventory %}
 		{% if (item[compare].capitalize()  | slugify) == compareWith %}

src/templates/snippets/show-grid.jinja

@@ -0,0 +1,19 @@
+{% macro render_grid(name) -%} {% if documents[name]|length > 0 %}
+<ul class="grid">
+	{% for item in documents[name] %}
+	<li class="grid__item">
+		<a href="/{{ name }}/{{ item['slug'] }}.html">
+			{% if item['image'] %}
+			<img src="{{ item['image'] }}" class="m-0" alt="" />
+			{% endif %}
+			<h5 class="m-0" >{{ item['title'] }}</h5></a
+			{% if item['excerpt'] %}
+				<p>{{ item['excerpt'] }}</p>
+			{% endif %}
+		
+	</li>
+	{% endfor %}
+</ul>
+{% endif %} {%- endmacro %}
+
+<p>{{ render_grid(type) }}</p>

src/templates/snippets/show-list.jinja

@@ -12,6 +12,6 @@
 	{% endif %}
 {%- endmacro %}
 <p>{{ render_list(type) }}</p>
-
+<h2>{{type}}</h2>
 
 

system.sublime-build

@@ -0,0 +1,7 @@
+{
+    "selector": "text.html.markdown",
+    "cmd": ["python", "app.py"],
+    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
+    "working_dir": "$file_path",
+    "shell": true
+}