diff --git a/app.py b/app.py index 8acc830..2bc0e70 100644 --- a/app.py +++ b/app.py @@ -25,15 +25,11 @@ OUTPUT_D = "dist" documents = {} -def showlist(param): - template = env.select_template(["snippets/show-list.jinja"]) - html = template.render(documents=documents, type=param.strip()) +def showSnippet(params): + param = params.split(" ") - return html - -def showGrid(param): - template = env.select_template(["snippets/show-grid.jinja"]) - html = template.render(documents=documents, type=param.strip()) + template = env.select_template([f"snippets/list-documents.jinja"]) + html = template.render(documents=documents, layout=param[0], type=param[1]) return html @@ -43,28 +39,28 @@ def slugify_filter(value): def shortcode_filter(value): - - shortcode_callbacks = { - "showlist": showlist, - "showGrid": showGrid - } + shortcode_callbacks = { + "show": showSnippet + } def shortcode_replacer(match): shortcode_name = match.group(1).strip() param = match.group(2).strip() - + if shortcode_name in shortcode_callbacks: return shortcode_callbacks[shortcode_name](param) - + return match.group(0) pattern = re.compile(r"{{\s*(\w+)\s+([^{}]+?)\s*}}") return pattern.sub(shortcode_replacer, value) + env.filters["shortcode"] = shortcode_filter env.filters["slugify"] = slugify_filter + def render_single_file(template, page, path, dist): html = template.render(documents=documents, page=page) name = Path(path).stem @@ -82,9 +78,15 @@ def get_page_data(path): page = frontmatter.load(path) page['slug'] = slugify(filename) page.filename = filename + page.folder = os.path.basename(os.path.dirname(path)) + + page.body = markdown.markdown( + page.content, + extensions=[ + 'def_list', + 'footnotes', + markdown_include]) - page.body = markdown.markdown(page.content, extensions=['def_list', 'footnotes', markdown_include]) - return page @@ -131,7 +133,16 @@ 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', 'Mounting type')): + for line in csv.DictReader( + f, + fieldnames=( + 'ID', + 'Name', + 'Value', + 'type', + 'Date', + 'Where', + 'Mounting type')): documents['inventory'].append(line) @@ -155,4 +166,5 @@ def main(): copy_assets() + main() diff --git a/src/assets/app.js b/src/assets/app.js new file mode 100644 index 0000000..d5ba50d --- /dev/null +++ b/src/assets/app.js @@ -0,0 +1,42 @@ +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); + } +}); + + +const dialog = document.querySelector("dialog"); +const closeDialog = (e) => { + e.stopPropagation(); + console.log("close") + dialog.close(); + document.body.removeEventListener("click", closeDialog); +} + +const showLightbox = (e) => { + e.preventDefault(); + e.stopPropagation(); + const img = dialog.querySelector("img"); + + img.src = e.currentTarget.src; + img.alt = e.currentTarget.alt; + dialog.querySelector("p").textContent = e.currentTarget.alt; + dialog.showModal(); + document.body.addEventListener("click", closeDialog, false); + +} + +document.querySelectorAll("article img").forEach((img) => { + console.log(img); + img.addEventListener("click", showLightbox); +}) \ No newline at end of file diff --git a/src/assets/styles/layout.css b/src/assets/styles/layout.css index a1a4c55..75c4b5b 100644 --- a/src/assets/styles/layout.css +++ b/src/assets/styles/layout.css @@ -34,7 +34,7 @@ aside { padding: 1rem 1rem 1rem 0; } -article { +article, header { max-width: var(--article-w); margin: 0 auto; flex-direction: column; @@ -51,7 +51,7 @@ sup li:before, color: var(--accent); } -ul.grid { +.list--grid { display: grid; list-style: none; padding: 0 0; @@ -60,7 +60,7 @@ ul.grid { } @media screen { - ul.grid { + .list--grid { width: 100vw; margin-left: calc(-50vw + (var(--article-w) / 2)); padding-left: 2rem; @@ -71,29 +71,30 @@ ul.grid { img { max-width: 100%; width: 100%; + cursor: hover; } -li.grid__item { +.list--grid .list__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 { +.list--grid .list__item:nth-of-type(4n), +.list--grid .list__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) { +.list--grid .list__item:nth-of-type(1), +.list--grid .list__item:nth-of-type(2), +.list--grid .list__item:nth-of-type(3), +.list--grid .list__item:nth-of-type(4) { border-top-color: #989177; } article h1, -article h2 { +article h2, article img { clear: both; } @@ -138,3 +139,32 @@ article h2 { max-width: calc(100% - var(--img-offset) - var(--img-offset)); } } + +dialog { + max-width: var(--main-w); + height: 100%; + max-height: 100%; + border: none; + overflow: hidden; + outline: none; + background-color: transparent; + margin: 0 auto; + padding: 0 0; +} + +dialog img { + width: 100%; + height: 100%; + object-fit: contain; + max-height: calc(100svh - 2rem); +} + +dialog::backdrop { + background-color: transparent; + transition: .2s linear; +} + +dialog[open]::backdrop { + background-color: black; + opacity: .5; +} \ No newline at end of file diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css index 8779147..eea3a40 100644 --- a/src/assets/styles/style.css +++ b/src/assets/styles/style.css @@ -19,13 +19,13 @@ body { color: var(--text); } -.list--events { +.list--list { list-style: none; padding: 0 0; font-family: monospace; } -.list--events li { +.list--list .list__item { border: 2px solid var(--text); padding: 12px; margin-bottom: 12px; @@ -34,7 +34,7 @@ body { align-items: center; } -.list--events .host { +.list--list .host { margin-left: auto; background: var(--background); padding: 4px; diff --git a/src/assets/styles/typography.css b/src/assets/styles/typography.css index 9dedef0..42397f9 100644 --- a/src/assets/styles/typography.css +++ b/src/assets/styles/typography.css @@ -49,8 +49,14 @@ article h4 { article img { max-width: 90ch; margin-left: var(--img-offset); + margin-right: var(--img-offset); margin-top: 2ch; margin-bottom: 2ch; + width: calc(100% + (var(--img-offset) * -2)); +} + +ul img { + --img-offset: 0px; } article img::after { diff --git a/src/assets/styles/wiki.html b/src/assets/styles/wiki.html deleted file mode 100644 index 527e6da..0000000 --- a/src/assets/styles/wiki.html +++ /dev/null @@ -1,345 +0,0 @@ -__NOTOC__ - -

- ''Pre''/Fake Assessment -

-

- Salvaging Sound Devices -

- -
-

Planning for the next 20 mins

- -
- -
-
-

// Year 1 (or pre now)

-

- HTML’ing, Repair’ing (Or break’ing), Sound’ing, Radio’ing, - Solder’ing, Workshop’ing, developing the interest in - Permacomput’ing, Server’ing -

-
-
-
- -

The Hitchhiker's Guide to an Active Archive

-
-
- -

Finding new ways of programming

-
-
- -

Failing to install postmarketOS

-
- -
- -

Presenting the web comic at Garage Cafe

-
-
- -

Printer Jam at GPN22

-
-
- -

Many!

-
-
- -

Many !Workshops!

-
- -
- {{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/d/d2/Vitrinekast_proposal_workshop_1.mp3|style=width:200px}} -

Many

-
-
- {{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/6/66/Vitrinekast_proposal_workshop_3.mp3|style=width:200px}} -

Many

-
-
- {{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/5/51/Vitrinekast_proposal_workshop_2.mp3|style=width:200px}} -

Many

-
-
- {{video|mp4=https://pzwiki.wdka.nl/mw-mediadesign/images/e/ea/Vitrinekast_proposal_project_3.mp4|style=width:250px}} -

Many

-
-
-

- ''DIWO as a powerful method of sharing & exploring'' -

-
-
-
- -
-
-

// Graduation Proposal: Salvaging sound devices

- -

- In this project, I will research the various ways in which - abandoned media can be repurposed into sound devices. 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 - speculative sound circuits, where playful and absurdist - methodologies are applied to create sound using various unlikely - technological devices (Richards, 2018) - John Richards. Speculative Sound Circuits. 2018. DOI: - 10.14236/ewic/EVAC18.33 - , and Salvage Computing‘Salvage computing’ (no date) ''Salvage computing''. - https://damaged.bleu255.com/Salvage_Computing/ (Accessed: - November 22, 2024).. This will happen in a - series of DIY/DIWO workshops/hangouts. The workshops - will be hosted at Klankschool - 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/, together with Riviera Taylor.

-
- -
-
- -

Apple certified Modifier

-
-
-
- -
-
-

Workshops

-

- During the hangouts, we will explore various methods around - salvaging components and dismantling devices , making our own - instruments using these materials, live coding hardware through - MQTT/OSC servers & applications, and everything in between. - Ultimately, they could lead up to a BYOP (Bring Your Own Printer) - Orchestra. The hangouts will be at the Klankschool and involve - the Klankschool community. 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. -

- -

- We're already having an (un)repair night every thursday, so if - you're in the neighberhood, come by! -

-

- Link to https://unrepair.klank.school/ for a "schedule". -

-
-
-
- -

(Un)Repaired Salvaged Stuff

-
-
- -

Modded Pokemon camera

-
-
-
- -
-
-

// Field guide

-

- 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. -

-

- 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. -

-

- https://unrepair.klank.school/thesis.html -

-
-
- -
-
- -
-
-

BUT...

- -
-
- -=== Footnotes === - diff --git a/src/content/chapters/1-dismantling.md b/src/content/chapters/1-dismantling.md index 913af06..fbfb6b4 100644 --- a/src/content/chapters/1-dismantling.md +++ b/src/content/chapters/1-dismantling.md @@ -1,6 +1,7 @@ --- title: "Chapter 1: Dismantling" type: Chapter +slug: true pdf: "/assets/chapters/chapter_1.pdf" --- @@ -60,7 +61,7 @@ This process really is about finding small gaps in the enclosures[^black-boxism] # Overview of dismantled devices -{{ showGrid devices}} +{{ show grid devices}} ## Hardware to look out for, or to avoid diff --git a/src/content/chapters/2-component-salvaging.md b/src/content/chapters/2-component-salvaging.md index de73d5e..d91a95e 100644 --- a/src/content/chapters/2-component-salvaging.md +++ b/src/content/chapters/2-component-salvaging.md @@ -1,6 +1,7 @@ --- title: "Chapter 2: Components" type: Chapter +slug: true --- An overview of Resistors, transistors, LED's, capacitors, switches, knobs, speakers, coils, that can be found in the wild. @@ -15,4 +16,4 @@ Of each component, i'll include: 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}} +{{ show grid components}} diff --git a/src/content/chapters/3-recipes.md b/src/content/chapters/3-recipes.md index 888c232..9b86db1 100644 --- a/src/content/chapters/3-recipes.md +++ b/src/content/chapters/3-recipes.md @@ -1,6 +1,7 @@ --- title: "Chapter 3: Recipes for sound devices" type: Chapter +slug: true --- How to ism, waarbij zelfs in het circuit bend boek precies staat gvoorgekouwd wat hje moet doen. diff --git a/src/content/devices/reel-to-reel-recorder.md b/src/content/devices/reel-to-reel-recorder.md index 336e273..de606c3 100644 --- a/src/content/devices/reel-to-reel-recorder.md +++ b/src/content/devices/reel-to-reel-recorder.md @@ -12,4 +12,3 @@ The Reel to Reel Recorder was found in the trash bin at the Interaction Station. 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. -![Reel to Reel Recorder](/assets/reel-to-reel-recorder.jpeg) diff --git a/src/content/index.md b/src/content/index.md index 3c8f534..08f7e7f 100644 --- a/src/content/index.md +++ b/src/content/index.md @@ -1,35 +1,11 @@ --- -excerpt: A documentation page -title: Index -description: This is the description of the about us page +title: "Let's unrepair together" --- -Dear reader, +# Let's unrepair together -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. +Hello! Every thursday we're hanging out at Cato, to unrepair together. In januari 2025 we're kickstarting a series of hangouts where we'll dive into topics like server maintainance, salvaging electronic components and making sound devices. -The sidebar will also include functionality to export the entire thesis as a PDF, and mediawiki format. - -### links - -- [The Klankschool Calendar](https://calendar.klank.school/) -- [The documentation pages for the unrepair nights](https://unrepair.klank.school) -- [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) - ---- - -# All chapters - -[Open page](/chapters/1-dismantling.html) - -{! chapters/1-dismantling.md !} - -[Open page](/chapters/2-component-salvaging.html) - -{! chapters/2-component-salvaging.md !} - -[Open page](/chapters/3-recipes.html) - -{! chapters/3-recipes.md !} +Come hang out! +{{ show list events }} \ No newline at end of file diff --git a/src/content/thesis.md b/src/content/thesis.md new file mode 100644 index 0000000..3c8f534 --- /dev/null +++ b/src/content/thesis.md @@ -0,0 +1,35 @@ +--- +excerpt: A documentation page +title: Index +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), 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. + +### links + +- [The Klankschool Calendar](https://calendar.klank.school/) +- [The documentation pages for the unrepair nights](https://unrepair.klank.school) +- [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) + +--- + +# All chapters + +[Open page](/chapters/1-dismantling.html) + +{! chapters/1-dismantling.md !} + +[Open page](/chapters/2-component-salvaging.html) + +{! chapters/2-component-salvaging.md !} + +[Open page](/chapters/3-recipes.html) + +{! chapters/3-recipes.md !} + diff --git a/src/content/unrepair.md b/src/content/unrepair.md deleted file mode 100644 index 865f9d5..0000000 --- a/src/content/unrepair.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "Let's unrepair together" ---- - -# Let's unrepair together - -Hello! Every thursday we're hanging out at Cato, to unrepair together. In januari 2025 we're kickstarting a series of hangouts where we'll dive into topics like server maintainance, salvaging electronic components and making sound devices. - -Come hang out! diff --git a/src/templates/base.jinja b/src/templates/base.jinja index 4003266..881dd17 100644 --- a/src/templates/base.jinja +++ b/src/templates/base.jinja @@ -77,8 +77,12 @@ {% endblock %} + + +

+ - + \ No newline at end of file diff --git a/src/templates/components.jinja b/src/templates/components.jinja deleted file mode 100644 index c42c526..0000000 --- a/src/templates/components.jinja +++ /dev/null @@ -1,36 +0,0 @@ -{% extends "base.jinja" %} -{% from 'snippets/inventory.jinja' import inventory with context %} - -{% block title %} - Components | {{ page['title'] }} -{% endblock %} - - -{% block content %} -

template: components.jinja

- -
-

{{page['title']}}

- - - {{ page['body'] }} - -

Component inventory

- - {{inventory("type", (page.type.capitalize() | slugify)) }} -
-{% endblock %} - - -{% block aside %} - - -{% endblock %} diff --git a/src/templates/devices.jinja b/src/templates/devices.jinja deleted file mode 100644 index e9b5d14..0000000 --- a/src/templates/devices.jinja +++ /dev/null @@ -1,38 +0,0 @@ -{% extends "base.jinja" %} -{% from 'snippets/inventory.jinja' import inventory with context %} - -{% block title %} - Devices | {{ page['title'] }} -{% endblock %} - - -{% block content %} -

template: device.jinja

- - -
-

{{page['title']}}

- {{ page['body'] }} - -

Parts salvaged from this device

- - {% if page.title %} - {{ inventory("Where", ( page.title.capitalize() | slugify )) }} - {% endif %} - -
-{% endblock %} - - -{% block aside %} - - -{% endblock %} diff --git a/src/templates/post.jinja b/src/templates/post.jinja index 5c975b7..33655e4 100644 --- a/src/templates/post.jinja +++ b/src/templates/post.jinja @@ -1,37 +1,36 @@ -{% extends "base.jinja" %} {% block content %} -

template: post.jinja

-
+{% extends "base.jinja" %} +{% from 'snippets/inventory.jinja' import inventory with context %} + +{% block content %} + + +
+

template: post.jinja

+ +
{{page.folder}}
+

{{page['title']}}

+
-

{{page['title']}}

+ + {% if page['image'] %} + + {% endif %} {% if page.pdf %} -

+

Download this chapter as a PDF

- {% endif %} {{ page['body'] | shortcode }} + {% endif %} + + {{ page['body'] | shortcode }} + + {% if page.folder == "devices" %} + {{ inventory("Where", ( page.title.capitalize() | slugify )) }} + {% endif %} + + {% if page.folder == "components" %} + {{inventory("type", (page.type.capitalize() | slugify)) }} + {% endif %}
-{% endblock %} - -{% block aside %} - - - -{% endblock %} +{% endblock %} {% block aside %} {% endblock %} diff --git a/src/templates/snippets/list-documents.jinja b/src/templates/snippets/list-documents.jinja new file mode 100644 index 0000000..cdb19d4 --- /dev/null +++ b/src/templates/snippets/list-documents.jinja @@ -0,0 +1,37 @@ +

Layout is {{layout}}

+

Name is {{type}}

+ +{% if documents[type]|length > 0 %} + +{% endif %} \ No newline at end of file diff --git a/src/templates/snippets/show-grid.jinja b/src/templates/snippets/show-grid.jinja deleted file mode 100644 index 105e146..0000000 --- a/src/templates/snippets/show-grid.jinja +++ /dev/null @@ -1,19 +0,0 @@ -{% macro render_grid(name) -%} {% if documents[name]|length > 0 %} - -{% endif %} {%- endmacro %} - -

{{ render_grid(type) }}

diff --git a/src/templates/snippets/show-list.jinja b/src/templates/snippets/show-list.jinja deleted file mode 100644 index ceca0b4..0000000 --- a/src/templates/snippets/show-list.jinja +++ /dev/null @@ -1,17 +0,0 @@ -{% macro render_list(name) -%} - {% if documents[name]|length > 0 %} -

{{ name }}

- - {% endif %} -{%- endmacro %} -

{{ render_list(type) }}

-

{{type}}

- - diff --git a/src/templates/unrepair.jinja b/src/templates/unrepair.jinja deleted file mode 100644 index 28496ce..0000000 --- a/src/templates/unrepair.jinja +++ /dev/null @@ -1,63 +0,0 @@ -{% extends "base.jinja" %} - -{% block title %} - Let's unrepair together -{% endblock %} - - - -{% block content %} -

template: unrepair.jinja

- -
-

{{page['title']}}

- {{ page['body'] | shortcode}} - - {% if documents['events']|length > 0 %} -

{{ name }}

-
    - {% for item in documents['events']|sort(attribute="filename") %} -
  • - {{ item['date'] }} - - {{ item['title'] }} - {% if item.host != "Cafe" %} - {{item.host}} - {% endif %} -
    • - {% endfor %} - -
- {% endif %} -
-{% endblock %} - -{% block aside %} - - -{% endblock %} \ No newline at end of file