add menti qrcode

Makefile

@@ -1,2 +1,10 @@
-build:
-	pandoc slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
+build: slides website
+
+slides:
+	pandoc slides/slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
+
+website:
+	pandoc website/site.md -o dist/website/index.html
+
+qrcode:
+	qrencode -t PNG -s 5 -o imgs/menti.png https://www.menti.com/9w1aj8bb8o

dist/website/index.html

@@ -0,0 +1,26 @@
+<p>–</p>
+<hr />
+<h1 id="links">Links</h1>
+<ul>
+<li>Einstieg</li>
+<li>p5-Editor</li>
+<li>Code-Beispiele
+<ul>
+<li>Beispiel 1 (Shapes)</li>
+<li>Beispiel 2 (Color)</li>
+<li>Beispiel 3 (Interaktion)</li>
+</ul></li>
+</ul>
+<h2 id="weiterführende-links">Weiterführende Links</h2>
+<ul>
+<li>p5 Bibliotheksreferenz</li>
+<li>Interaktive Paramterübersicht</li>
+<li>Daniel Shiffman</li>
+<li>OpenProcessing</li>
+</ul>
+<h1 id="editor">Editor</h1>
+<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="800" height="600" src="https://editor.p5js.org/">
+</iframe>
+<footer>
+<a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
+</footer>

slides.md

@@ -1,7 +0,0 @@
-% Coding Art
-% AG-Link: AG für kritische Informatik
-% DATUM
-
-# Slide 1
-
-- Lorem Ipsum

slides/slides.md

@@ -0,0 +1,36 @@
+---
+title: Coding Art!
+subtitle: Workshop für die kritischen Einführungswochen 2022
+author: AG Link für kritische Informatik
+date: "11. Oktober 2022"
+classoption: "aspectratio=169"
+header-includes:
+    - \usepackage[labelformat=empty]{caption}
+---
+
+# Hallo Welt!
+
+## Wer sind wir?
+
+- Marie und Lukas 
+- AG Link für kritische Informatik
+
+## Was haben wir heute vor?
+
+- KUNST!
+- Erste Erfahrungen mit **p5.js** machen
+- Nicht: Programmierprofis werden
+
+## Und wer seid ihr? 
+
+![Menti](imgs/menti.png)
+
+## Wie wir heute vorgehen
+
+- Javascript
+- p5.js
+- Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz**
+
+## P5.JS
+
+- **Livedemo!*

website/site.md

@@ -0,0 +1,32 @@
+--
+
+---
+
+# Links
+
+ - Einstieg
+ - p5-Editor 
+ - Code-Beispiele
+   - Beispiel 1 (Shapes)
+   - Beispiel 2 (Color)
+   - Beispiel 3 (Interaktion)
+
+## Weiterführende Links
+
+ - p5 Bibliotheksreferenz
+ - Interaktive Paramterübersicht
+ - Daniel Shiffman
+ - OpenProcessing
+
+# Editor
+
+<iframe id="p5.js web editor embed"
+    title="p5.js web editor embed"
+    width="800"
+    height="600"
+    src="https://editor.p5js.org/">
+</iframe>
+
+<footer>
+    <a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
+</footer>

website/style.css

@@ -0,0 +1,8 @@
+html {
+    background-color: #fdf6e3 !important;
+}
+
+footer {
+    text-align: center;
+    margin-top: 3em;
+}