lume: update to v2

* Update lume to v2 * Update deno to v1.41.3 * Use vento instead of nunjucks for templating * Use markdown for page data * Fix english translation of homepage * Fix asset build * Make images responsive
2024-04-14 14:54:42 +02:00 · 2024-04-14 14:54:42 +02:00 · 8341c079f8
parent 826463a651
commit 8341c079f8
57 changed files with 1656 additions and 684 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -10,7 +10,7 @@ steps:
        - pull_request
    image: denoland/deno:alpine-1.40.2
    commands:
-      - ./build.sh  
+      - deno task build

  - name: publish
    when: 
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-FROM denoland/deno:alpine-1.34.3 as build-stage
+FROM denoland/deno:alpine-1.41.3 as build-stage

 WORKDIR /app

--- a/README.md
+++ b/README.md
@ -26,7 +26,7 @@ direnv allow
 Just build the static site, results are in `_site`:

 ```
-./build.sh
+deno task build
 ```

 To get a live development server, run:
--- a/_config.ts
+++ b/_config.ts
@ -22,47 +22,33 @@ const languages = [
 ]
 site.data('languages', languages);

-site.preprocess([ '.yml' ], (page) => {
-  const urlParts = (page.data.url || '').replace(/^\/|\/$/g, '').split('/');
-  const langPrefix = urlParts[0];
-  const currentLang = (() => {
-    if (langPrefix.length === 2) {
-      return languages.find(lang => lang.urlPrefix === langPrefix);
-    }
+site.preprocess([ '.md' ], (pages) => {
+  for (const page of pages) {
+    const urlParts = (page.data.url || '').replace(/^\/|\/$/g, '').split('/');
+    const langPrefix = urlParts[0];
+    const currentLang = (() => {
+      if (langPrefix.length === 2) {
+        return languages.find(lang => lang.urlPrefix === langPrefix);
+      }

-    return languages.find(lang => lang.urlPrefix.length === 0);
-  })() || languages[0];
+      return languages.find(lang => lang.urlPrefix.length === 0);
+    })() || languages[0];

-  page.data.language = currentLang;
-  page.data.otherLang = languages.find(l => l.slug !== currentLang.slug);
-  page.data.baseURL = page.data.url.replace(new RegExp(`^\\/${currentLang.slug}`), '');
-
-  return page
+    page.data.language = currentLang;
+    page.data.otherLang = languages.find(l => l.slug !== currentLang.slug);
+    page.data.baseURL = page.data.url.replace(new RegExp(`^\\/${currentLang.slug}`), '');
+  }
 });

 site.use(postcss());

-site.loadAssets([
-  ".png",
-  ".jpg",
-  ".svg",
-  ".pdf",
-  ".woff2",
-  ".woff",
-  ".ttf",
-  ".otf",
-  ".js",
-  ".txt",
-]);
+site.loadAssets([ ".js" ]);
+
+site.copy("fonts");
+site.copy("img");

 site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");

-site.filter("objectToArray", (value = {}) => Object.keys(value)
-  .sort()
-  .map(key => value[key])
-  .filter(val => !!val)
-);
-
 site.ignore(
  ".direnv",
  "README.md",
--- a/_includes/border.vto
+++ b/_includes/border.vto
--- a/_includes/layouts/default.njk
+++ b/_includes/layouts/default.njk
@ -2,7 +2,7 @@
 <html lang="{{ language.slug }}">
  <head>
    <meta charset="utf-8" />
-    <title>{{ title | title | safe }}</title>
+    <title>{{ title |> title |> safe }}</title>

    <link rel="shortcut icon" href="/favicon.png" />

@ -14,27 +14,19 @@
    <link rel="stylesheet" type="text/css" href="/styles.css{{ cssCacheBust }}" media="all" />
    <link rel="stylesheet" type="text/css" href="/raleway.css{{ cssCacheBust }}" media="all" />

-    <link rel="alternate" hreflang="{{ otherLang.slug }}" href="{% if otherLang.urlPrefix %}/{{otherLang.urlPrefix}}{% endif %}{{ baseURL }}" />
+    <link rel="alternate" hreflang="{{ otherLang.slug }}" href="{{ if otherLang.urlPrefix }}/{{otherLang.urlPrefix}}{{ /if }}{{ baseURL }}" />

-    {% if extraStylesheets %}
-      {% for extraStylesheet in extraStylesheets %}
+    {{ if extraStylesheets }}
+      {{ for extraStylesheet of extraStylesheets }}
        <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}{{ cssCacheBust }}" media="all" />
-      {% endfor %}
-    {% endif %}
+      {{ /for }}
+    {{ /if }}
  </head>
  <body class="mi-page">
-    {% include "border.njk" %}
+    {{ include "border.vto" }}

-    {% block navigation %}
-      {% include "navigation.njk" %}
-    {% endblock %}
+    {{ include "navigation.vto" }}

-    {% block main %}
-      <main class="mi-main mi-main_content">
-        <h1>{{ title }}</h1>
-
-        {{ text | md | safe }}
-      </main>
-    {% endblock %}
+    {{ content }}
  </body>
 </html>
--- a/_includes/homepage.vto
+++ b/_includes/homepage.vto
@ -0,0 +1,37 @@
+{{ layout 'default.vto' }}
+  <main class="mi-main mi-cards">
+    <div class="mi-logo">
+      <picture>
+        <source media="(max-width: 500px)" srcset="/img/logo-500.jpg" />
+        <source media="(min-width: 501px) and (max-width: 700px)" srcset="/img/logo-700.jpg" />
+        <source media="(min-width: 701px) and (max-width: 799px)" srcset="/img/logo-1000.jpg" />
+        <source media="(min-width: 800px) and (max-width: 1400)" srcset="/img/logo-500.jpg" />
+        <source media="(min-width: 1401px) and (max-width: 1899px)" srcset="/img/logo-700.jpg" />
+        <source media="(min-width: 1900px)" srcset="/img/logo-1000.jpg" />
+        <img class="mi-logo--img" src="/img/logo-1000.jpg" alt="MiOM Logo" />
+      </picture>
+    </div>
+
+    <div class="mi-tagline">
+      {{ tagline |> md |> safe }}
+    </div>
+
+    {{ for card of cards }}
+      <a
+        class="mi-card"
+        href="{{ card.link }}"
+      >
+        <picture>
+          <source media="(max-width: 500px)" srcset="/img/home-{{ card.image.url }}-500.jpg" />
+          <source media="(min-width: 501px)" srcset="/img/home-{{ card.image.url }}-700.jpg" />
+          <img
+            class="mi-card--background"
+            src="/img/home-{{ card.image.url }}-700.jpg"
+            alt="{{ card.image.alt }}"
+          />
+        </picture>
+        <div class="mi-card--text">{{ card.text }}</div>
+      </a>
+    {{ /for }}
+  </main>
+{{ /layout }}
--- a/_includes/layouts/homepage.njk
+++ b/_includes/layouts/homepage.njk
@ -1,27 +0,0 @@
-{% extends 'layouts/default.njk' %}
-
-{% block main %}
-  <main class="mi-main mi-cards">
-    <div class="mi-logo">
-      <img src="/img/logo.jpg" class="mi-logo--img" />
-    </div>
-
-    <div class="mi-tagline">
-      {{ tagline | md | safe }}
-    </div>
-
-    {% for card in cards %}
-      <a
-        class="mi-card"
-        href="{{ card.link }}"
-      >
-        <img
-          class="mi-card--background"
-          src="{{ card.image.url }}"
-          alt="{{ card.image.alt }}"
-        />
-        <div class="mi-card--text">{{ card.text }}</div>
-      </a>
-    {% endfor %}
-  </main>
-{% endblock %}
--- a/_includes/navigation.vto
+++ b/_includes/navigation.vto
@ -6,27 +6,27 @@
  >_menu</button>

  <ul class="mi-nav--list">
-    {% for item in navigationItems %}
-      {% if item.divider %}
+    {{ for item of navigationItems }}
+      {{ if item.divider }}
        <li class="mi-nav--divider" aria-hidden="true"></li>
-      {% else %}
+      {{ else }}
        <li class="mi-nav--item">
          <a
            class="mi-nav--link"
-            href="{% if language.urlPrefix %}/{{ language.urlPrefix }}{% endif %}{{ item.link }}"
+            href="{{ if language.urlPrefix }}/{{ language.urlPrefix }}{{ /if }}{{ item.link }}"
          >{{ item.text[language.slug] }}</a>
        </li>
-      {% endif %}
-    {% endfor %}
+      {{ /if }}
+    {{ /for }}
  </ul>

  <ul class="mi-nav--top">
-    {% for item in socialLinks %}
+    {{ for item of socialLinks }}
      <li class="mi-nav--top-item">
        <a
          class="mi-nav--top-item-link mi-nav--top-item-link_icon-only"
          href="{{ item.link }}"
-          {% if item.me %}rel="me"{% endif %}
+          {{ if item.me }}rel="me"{{ /if }}
        >
          <img
            src="{{ item.icon }}"
@ -36,10 +36,10 @@
          />
        </a>
      </li>
-    {% endfor %}
+    {{ /for }}
    <li class="mi-nav--top-item">
      <a
-        href="{% if otherLang.urlPrefix %}/{{ otherLang.urlPrefix }}{% endif %}{{ baseURL }}"
+        href="{{ if otherLang.urlPrefix }}/{{ otherLang.urlPrefix }}{{ /if }}{{ baseURL }}"
        class="mi-nav--top-item-link"
      >{{ otherLang.slug }}</a>
    </li>
--- a/_includes/text.vto
+++ b/_includes/text.vto
@ -0,0 +1,7 @@
+{{ layout 'default.vto' }}
+  <main class="mi-main mi-main_content">
+    <h1>{{ title }}</h1>
+
+    {{ content |> safe }}
+  </main>
+{{ /layout }}
--- a/build.sh
+++ b/build.sh
@ -1,11 +0,0 @@
-#!/usr/bin/env sh
-
-# Remove previous build leftovers
-rm -rf ./_site
-
-# Build, results are in ./_site
-deno task build
-
-# Put binary assets in place
-cp -r ./fonts ./_site/
-cp -r ./img ./_site/
--- a/collaborate.md
+++ b/collaborate.md
@ -0,0 +1,16 @@
+---
+layout: text.vto
+title: Collaborate
+---
+
+Es gibt verschiedene Möglichkeiten mit uns aktiv zu werden! 
+
+Suchst du einen Raum, um eigene Projekte wie Workshops, Veranstaltungen oder Releasepartys zu realisieren?
+
+Vielleicht hast du auch Interesse daran, gemeinsam mit uns ein Projekt oder eine Veranstaltung zu organisieren. 
+
+Du hast auch die Option, einen Platz in unserer Werkstatt, im Büro oder im Atelier für 180,- im Monat zu mieten und Teil unseres Kollektivs werden. Wir möchten unseren Kreis erweitern und suchen nach weiteren Gleichgesinnten, die Lust haben, sich mit ihren eigenen Projekten einzubringen. Unser solidarisches Finanzierungskonzept sorgt dafür, dass die Kosten fair aufgeteilt werden. 
+
+Außerdem stehen bei uns Workshops und Unterricht im Bereich Malerei, Stickerei, Näherei, Holzarbeit, ein Repaircafé und Cryptopartys zur Verfügung.
+
+Welcher Punkt es auch ist, der dich anspricht- wir freuen uns darauf, mit dir gemeinsame Sache zu machen und neue kreative Projekte zu verwirklichen. [Kontaktiere uns gerne](/contact), um mehr über die Möglichkeiten einer Zusammenarbeit zu erfahren. Wir sind offen für neue Ideen und freuen uns darauf, von dir zu hören!
--- a/collaborate.yml
+++ b/collaborate.yml
@ -1,16 +0,0 @@
-layout: layouts/default.njk
-
-title: Collaborate
-
-text: |
-  Es gibt verschiedene Möglichkeiten mit uns aktiv zu werden! 
-
-  Suchst du einen Raum, um eigene Projekte wie Workshops, Veranstaltungen oder Releasepartys zu realisieren?
-
-  Vielleicht hast du auch Interesse daran, gemeinsam mit uns ein Projekt oder eine Veranstaltung zu organisieren. 
-
-  Du hast auch die Option, einen Platz in unserer Werkstatt, im Büro oder im Atelier für 180,- im Monat zu mieten und Teil unseres Kollektivs werden. Wir möchten unseren Kreis erweitern und suchen nach weiteren Gleichgesinnten, die Lust haben, sich mit ihren eigenen Projekten einzubringen. Unser solidarisches Finanzierungskonzept sorgt dafür, dass die Kosten fair aufgeteilt werden. 
-
-  Außerdem stehen bei uns Workshops und Unterricht im Bereich Malerei, Stickerei, Näherei, Holzarbeit, ein Repaircafé und Cryptopartys zur Verfügung.
-
-  Welcher Punkt es auch ist, der dich anspricht- wir freuen uns darauf, mit dir gemeinsame Sache zu machen und neue kreative Projekte zu verwirklichen. [Kontaktiere uns gerne](/contact), um mehr über die Möglichkeiten einer Zusammenarbeit zu erfahren. Wir sind offen für neue Ideen und freuen uns darauf, von dir zu hören!
--- a/collective.md
+++ b/collective.md
@ -0,0 +1,14 @@
+---
+layout: text.vto
+title: Das Kollektiv
+---
+
+Wer sind wir? 
+
+Wir sind das MiOM. Ein kreatives Kollektiv und eine Gruppe mit der Vision, bezahlbaren Raum für kreative Synergien zu schaffen. 
+
+Entstanden sind wir 2020, im damaligen Wandelwerk. Nachdem wir dort ausziehen mussten sind wir an unseren jetzigen Standort - [das Gewächshaus](https://www.instagram.com/gewaechshauskoeln/) - umgezogen. Im September 2022 haben wir den MiOM Kreativraum e.V. gegründet, um die finanziellen und organisatorischen Aufgaben in einer basisdemokratischen Struktur zu organisieren.
+
+Als Kollektiv arbeiten wir an kreativen Projekten aus Kunst und Kultur, um Potenziale zu entfalten und künstlerische Synergien zu schaffen. Derzeit bestehen wir aus Produktdesignern, Entwickler:innen, Fotograf:innen, Künstler:innen, Tättoowiererinnen, Modedesignerinnen und Maskenbildnerinnen. Unser Ziel ist es, Raum zum Experimentieren, Austauschen und Arbeiten zu gestalten. Wir streben nach einer nachhaltigen Gemeinschaft verschiedener Individuen, die ihre Schaffenskraft entfalten können.
+
+Each one, teach one! 
--- a/collective.yml
+++ b/collective.yml
@ -1,14 +0,0 @@
-layout: layouts/default.njk
-
-title: Das Kollektiv
-
-text: |
-  Wer sind wir? 
-
-  Wir sind das MiOM. Ein kreatives Kollektiv und eine Gruppe mit der Vision, bezahlbaren Raum für kreative Synergien zu schaffen. 
-
-  Entstanden sind wir 2020, im damaligen Wandelwerk. Nachdem wir dort ausziehen mussten sind wir an unseren jetzigen Standort - [das Gewächshaus](https://www.instagram.com/gewaechshauskoeln/) - umgezogen. Im September 2022 haben wir den MiOM Kreativraum e.V. gegründet, um die finanziellen und organisatorischen Aufgaben in einer basisdemokratischen Struktur zu organisieren.
-
-  Als Kollektiv arbeiten wir an kreativen Projekten aus Kunst und Kultur, um Potenziale zu entfalten und künstlerische Synergien zu schaffen. Derzeit bestehen wir aus Produktdesignern, Entwickler:innen, Fotograf:innen, Künstler:innen, Tättoowiererinnen, Modedesignerinnen und Maskenbildnerinnen. Unser Ziel ist es, Raum zum Experimentieren, Austauschen und Arbeiten zu gestalten. Wir streben nach einer nachhaltigen Gemeinschaft verschiedener Individuen, die ihre Schaffenskraft entfalten können.
-
-  Each one, teach one! 
--- a/contact.md
+++ b/contact.md
@ -0,0 +1,10 @@
+---
+layout: text.vto
+title: Kontakt
+---
+
+Du willst mal vorbei schauen? Lust was mit uns zu machen? Ideen für den Raum?
+
+Du erreichst uns unter [contact@miom.space](mailto:contact@miom.space).
+
+Komm vorbei! Unser Raum ist in der [Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359). Kontaktiere uns vorher damit wir sicherstellen können, dass jemand da ist um dich zu begrüßen.
--- a/contact.yml
+++ b/contact.yml
@ -1,10 +0,0 @@
-layout: layouts/default.njk
-
-title: Kontakt
-
-text: |
-  Du willst mal vorbei schauen? Lust was mit uns zu machen? Ideen für den Raum?
-
-  Du erreichst uns unter [contact@miom.space](mailto:contact@miom.space).
-
-  Komm vorbei! Unser Raum ist in der [Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359). Kontaktiere uns vorher damit wir sicherstellen können, dass jemand da ist um dich zu begrüßen.
--- a/deno.json
+++ b/deno.json
@ -1,14 +1,15 @@
 {
-  "importMap": "import_map.json",
+  "imports": {
+    "lume/": "https://deno.land/x/lume@v2.1.3/"
+  },
  "tasks": {
-    "lume:fresh": "echo \"import 'lume/cli.ts'\" | deno run --lock-write --lock=deno.lock --unstable -A -",
-    "lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
+    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "build": "deno task lume",
-    "build:fresh": "deno task lume:fresh",
    "serve": "deno task lume -s"
  },
  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "npm:react"
+    "types": [
+      "lume/types.ts"
+    ]
  }
-}
+}
--- a/deno.lock
+++ b/deno.lock
--- a/en/collaborate.md
+++ b/en/collaborate.md
@ -0,0 +1,16 @@
+---
+layout: text.vto
+title: Collaborate
+---
+
+There are many ways to get involved with us! 
+
+Are you looking for a space to realize your own projects such as workshops, events, or release parties? 
+
+Perhaps you are interested in a project/event collaboration with us?
+
+You also have the option to rent a work space in our wood and metal shop, office, or studio for 180 per month and become part of our collective. We aim to expand our circle and are seeking like-minded people who are eager to contribute with their own creative projects. Our solidarity- based finance concept ensures that costs are fairly distributed. 
+
+Additionally, we offer workshops and classes in painting, embroidery, sewing, woodwork, a repair café and cryptoparties. 
+
+Whatever aspect appeals most to you - we look forward to collaborating with you and bringing new creative projects to life. [Feel free to contact us](/en/contact) to learn more about collaboration opportunities. We are open to new ideas and excited to hear from you!
--- a/en/collaborate.yml
+++ b/en/collaborate.yml
@ -1,16 +0,0 @@
-layout: layouts/default.njk
-
-title: Collaborate
-
-text: |
-  There are many ways to get involved with us! 
-
-  Are you looking for a space to realize your own projects such as workshops, events, or release parties? 
-
-  Perhaps you are interested in a project/event collaboration with us?
-
-  You also have the option to rent a work space in our wood and metal shop, office, or studio for 180 per month and become part of our collective. We aim to expand our circle and are seeking like-minded people who are eager to contribute with their own creative projects. Our solidarity- based finance concept ensures that costs are fairly distributed. 
-
-  Additionally, we offer workshops and classes in painting, embroidery, sewing, woodwork, a repair café and cryptoparties. 
-
-  Whatever aspect appeals most to you - we look forward to collaborating with you and bringing new creative projects to life. [Feel free to contact us](/en/contact) to learn more about collaboration opportunities. We are open to new ideas and excited to hear from you!
--- a/en/collective.md
+++ b/en/collective.md
@ -0,0 +1,14 @@
+---
+layout: text.vto
+title: The collective
+---
+
+Who are we? 
+
+We are MiOM. A creative collective and a group with the vision of creating affordable space for creative synergies. 
+
+We were founded in 2020, in the former Wandelwerk. After having to move out, we relocated to our current location - [the Gewächshaus](https://www.instagram.com/gewaechshauskoeln/). In September 2022, we founded the MiOM Kreativraum e.V. to organize the financial and organizational tasks in a grassroots democratic structure. 
+
+As a collective, we work on creative projects in art and culture to unfold potentials and create artistic synergies. Currently, we consist of product designers, techies, photographers, artists, tattoo artists, fashion designers, and makeup artists. Our goal is to create space for experimenting, exchanging ideas, and working together. We aim for a sustainable community of diverse individuals who can unleash their creative power. 
+
+Each one, teach one!
--- a/en/collective.yml
+++ b/en/collective.yml
@ -1,14 +0,0 @@
-layout: layouts/default.njk
-
-title: The collective
-
-text: |
-  Who are we? 
-
-  We are MiOM. A creative collective and a group with the vision of creating affordable space for creative synergies. 
-
-  We were founded in 2020, in the former Wandelwerk. After having to move out, we relocated to our current location - [the Gewächshaus](https://www.instagram.com/gewaechshauskoeln/). In September 2022, we founded the MiOM Kreativraum e.V. to organize the financial and organizational tasks in a grassroots democratic structure. 
-
-  As a collective, we work on creative projects in art and culture to unfold potentials and create artistic synergies. Currently, we consist of product designers, techies, photographers, artists, tattoo artists, fashion designers, and makeup artists. Our goal is to create space for experimenting, exchanging ideas, and working together. We aim for a sustainable community of diverse individuals who can unleash their creative power. 
-
-  Each one, teach one!
--- a/en/contact.md
+++ b/en/contact.md
@ -0,0 +1,10 @@
+---
+layout: text.vto
+title: Contact
+---
+
+Do you want to come around? Want to collaborate with us? Ideas for the space? 
+
+You can reach us at [contact@miom.space](mailto:contact@miom.space).
+
+Come by! Our space is located at [Wilhelm-Mauser-Straße 47, Hall 5 in 50827 Cologne](https://www.openstreetmap.org/node/9627028359). Contact us beforehand so we can ensure that someone is there to welcome you.
--- a/en/contact.yml
+++ b/en/contact.yml
@ -1,10 +0,0 @@
-layout: layouts/default.njk
-
-title: Contact
-
-text: |
-  Do you want to come around? Want to collaborate with us? Ideas for the space? 
-
-  You can reach us at [contact@miom.space](mailto:contact@miom.space).
-
-  Come by! Our space is located at [Wilhelm-Mauser-Straße 47, Hall 5 in 50827 Cologne](https://www.openstreetmap.org/node/9627028359). Contact us beforehand so we can ensure that someone is there to welcome you.
--- a/en/imprint.yml
+++ b/en/imprint.yml
@ -1,8 +1,8 @@
-layout: layouts/default.njk
-
+---
+layout: text.vto
 title: Imprint
+---

-text: '
 Responsible for contents:


@ -21,4 +21,3 @@ Halle 5


 The [source code for this website](https://git.pub.solar/MiOM/miom.space) is licensed under the AGPLv3.
-'
--- a/en/index.md
+++ b/en/index.md
@ -0,0 +1,32 @@
+---
+
+layout: homepage.vto
+
+tagline: |
+  MiOM is a collective from Cologne with the vision of creating affordable space for creative synergies.
+
+cards:
+  - text: the collective
+    link: ./collective
+    image:
+      alt: "Dancing and celebrating people"
+      url: crowd
+
+  - text: the space
+    link: ./space
+    image:
+      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum"
+      url: werkstatt
+
+  - text: collaborate
+    link: ./collaborate
+    image:
+      alt: "A group of people is sitting at a table together working"
+      url: hakken
+
+  - text: projects and events
+    link: ./projects
+    image:
+      alt: "The outside area at night. There's a camp fire with a crowd. In the background a tall building is visible."
+      url: aussenchill
+---
--- a/en/index.yml
+++ b/en/index.yml
@ -1,29 +0,0 @@
-layout: layouts/homepage.njk
-
-tagline: |
-  MiOM is a collective from Cologne with the vision of creating affordable space for creative synergies.
-
-cards:
-  - text: Mit uns machen
-    link: ./collaborate
-    image:
-      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/hakken.jpeg
-
-  - text: Projekte und Veranstaltungen
-    link: ./projects
-    image:
-      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/aussenchill.jpg
-
-  - text: der Raum
-    link: ./space
-    image:
-      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum."
-      url: /img/werkstatt.jpg
-
-  - text: das Kollektiv
-    link: ./collective
-    image:
-      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/crowd.jpg
--- a/en/privacy-policy.yml
+++ b/en/privacy-policy.yml
@ -1,9 +1,8 @@
-layout: layouts/default.njk
-
+---
+layout: text.vto
 title: Privacy policy
+---

-text: '
 This website runs on a no-logging policy. We do not track or keep any personal data when viewing this site.

 See [our imprint](/en/imprint) for contact information.
-'
--- a/en/projects.md
+++ b/en/projects.md
@ -0,0 +1,33 @@
+---
+layout: text.vto
+title: Projects and Events
+---
+
+## Kunstroute 2024
+
+Currently, we are organizing our next exhibition of interdisciplinary arts for May, which will take place as part of [Kunstroute](https://ehrenfeldroute.wordpress.com) Ehrenfeld 2024.
+
+### The following forms of art will be exhibited
+
+* Graffiti
+* Painting
+* Embroidery
+* Illustration
+* Installations
+* Performance
+* Art
+* Tattoo ink.
+* Design
+* Graphics
+* Prints
+
+More information about the exhibiting artists and the exhibition itself will be available in the coming weeks on our instagram and mastodon page 
+
+## hakken.irl
+
+pub.solar, a collective that provides digital infrastructures in a solidary and grassroots democratic way, regularly organizes a hackathon at MiOM, the [pub.solar hakken.irl](https://pub.solar/hakken/).
+
+## Bisherige Projekte und Veranstaltungen
+
+* **Dimensioniii** as part of Passagen Interior Design Week Cologne (January 2020)
+* Art/- Design Exhibition **Gemischte Tüte** (June 2019)
--- a/en/projects.yml
+++ b/en/projects.yml
@ -1,33 +0,0 @@
-layout: layouts/default.njk
-
-title: Projects and Events
-
-text: |
-  ## Kunstroute 2024
-  
-  Currently, we are organizing our next exhibition of interdisciplinary arts for May, which will take place as part of [Kunstroute](https://ehrenfeldroute.wordpress.com) Ehrenfeld 2024.
-
-  ### The following forms of art will be exhibited
-
-  * Graffiti
-  * Painting
-  * Embroidery
-  * Illustration
-  * Installations
-  * Performance
-  * Art
-  * Tattoo ink.
-  * Design
-  * Graphics
-  * Prints
-
-   More information about the exhibiting artists and the exhibition itself will be available in the coming weeks on our instagram and mastodon page 
-
-  ## hakken.irl
-
-  pub.solar, a collective that provides digital infrastructures in a solidary and grassroots democratic way, regularly organizes a hackathon at MiOM, the [pub.solar hakken.irl](https://pub.solar/hakken/).
-
-  ## Bisherige Projekte und Veranstaltungen
-
-  * **Dimensioniii** as part of Passagen Interior Design Week Cologne (January 2020)
-  * Art/- Design Exhibition **Gemischte Tüte** (June 2019)
--- a/en/space.md
+++ b/en/space.md
@ -0,0 +1,31 @@
+---
+layout: text.vto
+title: The space
+---
+
+Our space is located at Wilhelm-Mauser Straße 47 (Halle 5) in Cologne Bickendorf, close to Cologne Ehrenfeld, and is part of the [Gewächshaus community](https://www.instagram.com/gewaechshauskoeln/). 
+
+With a total of 175 square meters, our space offers diverse opportunities for creative use. The wood- and metal working shop is located in the heart of the hall. Above we have created several studio spaces on a platform. On the second floor of the premises there are two lockable office rooms for co-working and further exchange available. 
+
+Through collaboration with the Gewächshaus Community, we can provide a first-class infrastructure, including:
+- internet access
+- printer
+- sanitary facilities
+- large shared kitchen with a barista coffee machine
+- drinks shop
+- electronic pallet truck
+- chill area
+- meeting room
+- 24/7 access
+
+On weekdays, we serve a daily communal lunch with regional organic products. 
+
+Due to our usage concept, members have the opportunity to rent fixed spaces that are full-time available. At the same time, all collective members can use the space as long as it is not occupied by renters. This combination of individual and communal use is based on open communication and mutual consideration.
+
+## How to find us
+
+[Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359)
+
+**By bus:** Take line 141/143 to the stop Bickendorf Wilhelm-Mauser-Str., Köln
+
+**By foot:** 10 minutes from the subway stop Rochusplatz (line 3/4) at house number 47 (green gate), go straight through, then all the way to the right to Hall 5.
--- a/en/space.yml
+++ b/en/space.yml
@ -1,31 +0,0 @@
-layout: layouts/default.njk
-
-title: The space
-
-text: |
-  Our space is located at Wilhelm-Mauser Straße 47 (Halle 5) in Cologne Bickendorf, close to Cologne Ehrenfeld, and is part of the [Gewächshaus community](https://www.instagram.com/gewaechshauskoeln/). 
-
-  With a total of 175 square meters, our space offers diverse opportunities for creative use. The wood- and metal working shop is located in the heart of the hall. Above we have created several studio spaces on a platform. On the second floor of the premises there are two lockable office rooms for co-working and further exchange available. 
-
-  Through collaboration with the Gewächshaus Community, we can provide a first-class infrastructure, including:
-  - internet access
-  - printer
-  - sanitary facilities
-  - large shared kitchen with a barista coffee machine
-  - drinks shop
-  - electronic pallet truck
-  - chill area
-  - meeting room
-  - 24/7 access
-
-  On weekdays, we serve a daily communal lunch with regional organic products. 
-
-  Due to our usage concept, members have the opportunity to rent fixed spaces that are full-time available. At the same time, all collective members can use the space as long as it is not occupied by renters. This combination of individual and communal use is based on open communication and mutual consideration.
-
-  ## How to find us
-
-  [Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359)
-
-  **By bus:** Take line 141/143 to the stop Bickendorf Wilhelm-Mauser-Str., Köln
-
-  **By foot:** 10 minutes from the subway stop Rochusplatz (line 3/4) at house number 47 (green gate), go straight through, then all the way to the right to Hall 5.
--- a/flake.lock
+++ b/flake.lock
@ -8,11 +8,11 @@
        ]
      },
      "locked": {
-        "lastModified": 1705332421,
-        "narHash": "sha256-USpGLPme1IuqG78JNqSaRabilwkCyHmVWY0M9vYyqEA=",
+        "lastModified": 1711099426,
+        "narHash": "sha256-HzpgM/wc3aqpnHJJ2oDqPBkNsqWbW0WfWUO8lKu8nGk=",
        "owner": "numtide",
        "repo": "devshell",
-        "rev": "83cb93d6d063ad290beee669f4badf9914cc16ec",
+        "rev": "2d45b54ca4a183f2fdcf4b19c895b64fbf620ee8",
        "type": "github"
      },
      "original": {
@ -44,11 +44,11 @@
        "systems": "systems_2"
      },
      "locked": {
-        "lastModified": 1705309234,
-        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
        "owner": "numtide",
        "repo": "flake-utils",
-        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
        "type": "github"
      },
      "original": {
@ -59,11 +59,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1707956935,
-        "narHash": "sha256-ZL2TrjVsiFNKOYwYQozpbvQSwvtV/3Me7Zwhmdsfyu4=",
+        "lastModified": 1712791164,
+        "narHash": "sha256-3sbWO1mbpWsLepZGbWaMovSO7ndZeFqDSdX0hZ9nVyw=",
        "owner": "nixos",
        "repo": "nixpkgs",
-        "rev": "a4d4fe8c5002202493e87ec8dbc91335ff55552c",
+        "rev": "1042fd8b148a9105f3c0aca3a6177fd1d9360ba5",
        "type": "github"
      },
      "original": {
--- a/img/home-aussenchill-500.jpg
+++ b/img/home-aussenchill-500.jpg
--- a/img/home-aussenchill-700.jpg
+++ b/img/home-aussenchill-700.jpg
--- a/img/home-aussenchill.jpg
+++ b/img/home-aussenchill.jpg
--- a/img/home-crowd-500.jpg
+++ b/img/home-crowd-500.jpg
--- a/img/home-crowd-700.jpg
+++ b/img/home-crowd-700.jpg
--- a/img/home-crowd.jpg
+++ b/img/home-crowd.jpg
--- a/img/home-hakken-500.jpg
+++ b/img/home-hakken-500.jpg
--- a/img/home-hakken-700.jpg
+++ b/img/home-hakken-700.jpg
--- a/img/home-hakken.jpg
+++ b/img/home-hakken.jpg
--- a/img/home-werkstatt-500.jpg
+++ b/img/home-werkstatt-500.jpg
--- a/img/home-werkstatt-700.jpg
+++ b/img/home-werkstatt-700.jpg
--- a/img/home-werkstatt.jpg
+++ b/img/home-werkstatt.jpg
--- a/img/logo-1000.jpg
+++ b/img/logo-1000.jpg
--- a/img/logo-500.jpg
+++ b/img/logo-500.jpg
--- a/img/logo-700.jpg
+++ b/img/logo-700.jpg
--- a/img/signal-2023-03-02-144400_020.jpeg
+++ b/img/signal-2023-03-02-144400_020.jpeg
--- a/imprint.yml
+++ b/imprint.yml
@ -1,8 +1,8 @@
-layout: layouts/default.njk
-
+---
+layout: text.vto
 title: Impressum
+---

-text: '
 Verantwortlich für die Inhalte:


@ -21,4 +21,3 @@ Halle 5


 Der [Quellcode dieser Website](https://git.pub.solar/MiOM/miom.space) ist lizenziert unter AGPLv3.
-'
--- a/index.yml
+++ b/index.yml
@ -1,4 +1,5 @@
-layout: layouts/homepage.njk
+---
+layout: homepage.vto

 tagline: |
  Das MiOM ist ein Kollektiv mit der Vision, bezahlbaren Raum für kreative Synergien zu schaffen.
@ -7,23 +8,24 @@ cards:
  - text: das Kollektiv
    link: ./collective
    image:
-      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/crowd.jpg
+      alt: "Feierne Menschen Tanzen"
+      url: crowd

  - text: der Raum
    link: ./space
    image:
-      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum."
-      url: /img/werkstatt.jpg
+      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum"
+      url: werkstatt

  - text: Collaborate
    link: ./collaborate
    image:
      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/hakken.jpeg
+      url: hakken

  - text: Projekte und Veranstaltungen
    link: ./projects
    image:
-      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
-      url: /img/aussenchill.jpg
+      alt: "Innenhof mit lagerfeuer bei Abend. Im Hintergrund ist ein Hochhaus zu sehen"
+      url: aussenchill
+---
--- a/privacy-policy.yml
+++ b/privacy-policy.yml
@ -1,9 +1,8 @@
-layout: layouts/default.njk
-
+---
+layout: text.vto
 title: Datenschutz
+---

-text: '
 Auf dieser Website wird nicht protokolliert. Wir verfolgen oder speichern keine persönlichen Daten beim Besuch dieser Website.

 Siehe unser [Impressum](/imprint) für Verantwortlichkeiten und Kontaktinformationen.
-'
--- a/projects.md
+++ b/projects.md
@ -0,0 +1,32 @@
+---
+layout: text.vto
+title: Projekte und Veranstaltungen
+---
+
+## Kunstroute 2024
+
+Aktuell organisieren wir unsere nächste Ausstellung der interdisziplinären Künste für den kommenden Mai, die im Rahmen der [Kunstroute](https://ehrenfeldroute.wordpress.com) Ehrenfeld 2024 stattfinden wird.
+
+### Folgende Formen der Kunst werden ausgestellt
+
+* Graffiti
+* Malerei
+* Stickerei
+* Illustration
+* Installationen
+* Performance
+* Tattoo ink. 
+* Gestaltung
+* Grafiken
+* Drucke
+
+Nähere Informationen zu den ausstellenden Künstler:innen und der Ausstellung selbst findet ihr in den folgenden Wochen auf unserer Instagram & Mastodon Seite
+
+## hakken.irl
+
+pub.solar, ein Kollektiv was auf solidarische und basisdemokratische Weise digitale Infrastrukturen bereitstellt, organisiert regelmäßig im MiOM ein Hackathon, das [pub.solar hakken.irl](https://pub.solar/hakken/).
+
+## Bisherige Projekte und Veranstaltungen
+
+* **Dimensioniii** als Teil der Passagen Interior Design Week Köln (Januar 2020)
+* Art/- Design Exhibition **Gemischte Tüte** (Juni 2019) 
--- a/projects.yml
+++ b/projects.yml
@ -1,32 +0,0 @@
-layout: layouts/default.njk
-
-title: Projekte und Veranstaltungen
-
-text: |
-  ## Kunstroute 2024
-
-  Aktuell organisieren wir unsere nächste Ausstellung der interdisziplinären Künste für den kommenden Mai, die im Rahmen der [Kunstroute](https://ehrenfeldroute.wordpress.com) Ehrenfeld 2024 stattfinden wird.
-
-  ### Folgende Formen der Kunst werden ausgestellt
-
-  * Graffiti
-  * Malerei
-  * Stickerei
-  * Illustration
-  * Installationen
-  * Performance
-  * Tattoo ink. 
-  * Gestaltung
-  * Grafiken
-  * Drucke
-
-  Nähere Informationen zu den ausstellenden Künstler:innen und der Ausstellung selbst findet ihr in den folgenden Wochen auf unserer Instagram & Mastodon Seite
-
-  ## hakken.irl
-
-  pub.solar, ein Kollektiv was auf solidarische und basisdemokratische Weise digitale Infrastrukturen bereitstellt, organisiert regelmäßig im MiOM ein Hackathon, das [pub.solar hakken.irl](https://pub.solar/hakken/).
-
-  ## Bisherige Projekte und Veranstaltungen
-
-  * **Dimensioniii** als Teil der Passagen Interior Design Week Köln (Januar 2020)
-  * Art/- Design Exhibition **Gemischte Tüte** (Juni 2019) 
--- a/space.md
+++ b/space.md
@ -0,0 +1,23 @@
+---
+layout: text.vto
+title: Der Raum
+---
+
+Unser Raum befindet sich in der Wilhelm-Mauser Straße 47 (Halle 5) in Köln Bickendorf, nahe der Grenze zu Köln Ehrenfeld und ist Teil der [Gewächshaus Community](https://www.instagram.com/gewaechshauskoeln/).
+
+Mit insgesamt 175qm bietet unser Space vielfältige Möglichkeiten zur kreativen Nutzung. Die Werkstatt befindet sich im Herzen der Halle, darüber haben wir mit einer Plattform verschiedenste Atelierplätze geschaffen und in der zweiten Etage der Räumlichkeiten stehen zwei abschließbare Büroräume für Co-Working und weiteren Austausch zur Verfügung.
+
+Durch die Zusammenarbeit mit der Gewächshaus Community können wir eine erstklassige Infrastruktur bieten, die unter anderem Internetzugang, Drucker, sanitäre Einrichtungen, eine große gemeinsame Küche mit Barista Kaffeemaschine, einen Getränkeshop, einen elektronischen Hubwagen, eine Chill Area, einen Besprechungsraum und 24/7 Zugang umfasst. An Wochentagen zaubern wir täglich ein gemeinsames Mittagessen mit regionalen Bioprodukten auf den Tisch.
+
+Durch unser Nutzungskonzept haben Mitglieder die Möglichkeit, feste Plätze im Space zu mieten, die ihnen rund um die Uhr zur Verfügung stehen. Gleichzeitig können alle Kollektivmitglieder den Raum nutzen, solange er nicht von den Mieter:innen belegt ist. Diese Kombination aus individueller Nutzung und gemeinschaftlicher Nutzung basiert auf einer offenen Kommunikation und gegenseitiger Rücksichtnahme.
+
+## So findest du zu uns
+
+[Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359)
+
+**Mit dem Bus:**
+Mit der Linie 141/143 bis zur Haltestelle Bickendorf Wilhelm-Mauser-Str., Köln
+
+**Zu Fuß:**
+10 min von der U-Bahn Haltestelle Rochusplatz (Linie 3/4)
+Bei Hausnummer 47 (grünes Tor) geradeaus durch dann ganz rechts Halle 5
--- a/space.yml
+++ b/space.yml
@ -1,23 +0,0 @@
-layout: layouts/default.njk
-
-title: Der Raum
-
-text: |
-  Unser Raum befindet sich in der Wilhelm-Mauser Straße 47 (Halle 5) in Köln Bickendorf, nahe der Grenze zu Köln Ehrenfeld und ist Teil der [Gewächshaus Community](https://www.instagram.com/gewaechshauskoeln/).
-
-  Mit insgesamt 175qm bietet unser Space vielfältige Möglichkeiten zur kreativen Nutzung. Die Werkstatt befindet sich im Herzen der Halle, darüber haben wir mit einer Plattform verschiedenste Atelierplätze geschaffen und in der zweiten Etage der Räumlichkeiten stehen zwei abschließbare Büroräume für Co-Working und weiteren Austausch zur Verfügung.
-
-  Durch die Zusammenarbeit mit der Gewächshaus Community können wir eine erstklassige Infrastruktur bieten, die unter anderem Internetzugang, Drucker, sanitäre Einrichtungen, eine große gemeinsame Küche mit Barista Kaffeemaschine, einen Getränkeshop, einen elektronischen Hubwagen, eine Chill Area, einen Besprechungsraum und 24/7 Zugang umfasst. An Wochentagen zaubern wir täglich ein gemeinsames Mittagessen mit regionalen Bioprodukten auf den Tisch.
-
-  Durch unser Nutzungskonzept haben Mitglieder die Möglichkeit, feste Plätze im Space zu mieten, die ihnen rund um die Uhr zur Verfügung stehen. Gleichzeitig können alle Kollektivmitglieder den Raum nutzen, solange er nicht von den Mieter:innen belegt ist. Diese Kombination aus individueller Nutzung und gemeinschaftlicher Nutzung basiert auf einer offenen Kommunikation und gegenseitiger Rücksichtnahme.
-
-  ## So findest du zu uns
-  
-  [Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359)
-
-  **Mit dem Bus:**
-  Mit der Linie 141/143 bis zur Haltestelle Bickendorf Wilhelm-Mauser-Str., Köln
-
-  **Zu Fuß:**
-  10 min von der U-Bahn Haltestelle Rochusplatz (Linie 3/4)
-  Bei Hausnummer 47 (grünes Tor) geradeaus durch dann ganz rechts Halle 5