feat(slides): Project Setup Slides

src/components/slides/project-setup/docker.astro

@@ -0,0 +1,15 @@
+<section>
+  <section>
+    <h2>Bereitstellung mittels Docker</h2>
+  </section>
+
+  <section>
+    <ul>
+      <li>Mit Docker-Container ist man bereits sehr nah an "Produktion"</li>
+      <li>Alle Assets werden in einen NginX-Container platziert</li>
+      <li>Der Container kann dann "überall" deployed werden</li>
+    </ul>
+  </section>
+
+  <!-- Verlinkung zu einem "Basic" Dockerfile -->
+</section>

src/components/slides/project-setup/index.astro

@@ -0,0 +1,15 @@
+---
+import TitleSlide from './title.astro'
+import WebBased from './web-apps.astro'
+import PythonHttp from './using-python.astro'
+import Docker from './docker.astro'
+import Npm from './npm.astro'
+---
+
+<div class="slides">
+  <TitleSlide />
+  <WebBased />
+  <PythonHttp />
+  <Npm />
+  <Docker />
+</div>

src/components/slides/project-setup/npm.astro

@@ -0,0 +1,45 @@
+<section>
+  <section>
+    <h2>NodeJS + NPM</h2>
+  </section>
+
+  <section>
+    <p>
+      NodeJS ist eine JavaScript-Runtime die auf vielen verschiedenen Platform Anwendung findet.
+      <br><br>
+      Im späteren Verlauf werden wir NodeJS auf jeden Fall verwenden. Deshalb lohnt es sich, die Runtime auf jeden Fall zu installieren.
+      <br><br>
+      NodeJS kommt mit dem Package Manager "NPM". Wir werden NPM für verschiedene Sachen verwenden.
+    </p>
+  </section>
+
+  <section>
+    <h3>Installation</h3>
+    <p>
+      Besuche die <a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">NodeJS-Website</a> und lade dort das Program herunter.
+      <br><br>
+      Alternativ mit Choco, Brew, oder dem Linux-Package Manager eurer Wahl.
+    </p>
+  </section>
+
+  <section>
+    <h3>Setup von Web-Projekten mittels NPM</h3>
+    <pre class="bash"><code data-trim data-line-numbers>
+      User&gt; # Projektordner erstellen
+      User&gt; mkdir mein-html-project && cd mein-html-project
+      User&gt; # Im Projektordner ein NPM-Projekt initialisieren
+      User&gt; npm init 
+      User&gt; # Optional noch git initialisieren
+      User&gt; git init
+    </code></pre>
+  </section>
+
+  <section>
+    <ul>
+      <li>Für den Anfang wäre die Arbeit mit NodeJS "Overkill"</li>
+      <li>Im späteren Verlauf werden wir uns aber mit dem Thema bundling beschäftigen</li>
+      <li>Dafür werden wir einen Bundler Namens "Vite" verwenden</li>
+      <li>Die Installation wird dann über NPM erfolgen</li>
+    </ul>
+  </section>
+</section>

src/components/slides/project-setup/title.astro

@@ -0,0 +1,3 @@
+<section>
+  <h1>Web-Projekte aufsetzen</h1>
+</section>

src/components/slides/project-setup/using-python.astro

@@ -0,0 +1,20 @@
+<section>
+  <section>
+    <h2>Python Web-Server</h2>
+  </section>
+
+  <section>
+    <p>
+      Für diejenigen, die bereits Python auf dem Laptop installiert haben.
+      <br>
+      Bietet eine schnelle und einfache Lösung, lokale HTML-Dateien auszuspielen.
+    </p>
+  </section>
+
+  <section>
+    <pre class="bash"><code data-trim data-line-numbers>
+      User&gt; cd &lt;ordner-mit-html-dateien&gt;
+      User&gt; python3 -m http.server
+    </code></pre>
+  </section>
+</section>

src/components/slides/project-setup/web-apps.astro

@@ -0,0 +1,17 @@
+<section>
+  <section>
+    <h2>Webbasierte Lösungen</h2>
+  </section>
+
+  <section>
+    <p>Genug für den Anfang, sobald wir mit JavaScript arbeiten, sollten alternative Lösungen bevorzugt werden</p>
+  </section>
+
+  <section>
+    <ul style="list-style-type: none; margin: unset; padding: unset;">
+      <li><a href="https://glitch.com" target="_blank" rel="noopener noreferrer">Glitch</a></li>
+      <li><a href="https://codepen.io" target="_blank" rel="noopener noreferrer">Codepen</a></li>
+      <li><a href="https://stackblitz.com" target="_blank" rel="noopener noreferrer">Stackblitz</a></li>
+    </ul>
+  </section>
+</section>

src/pages/slides/setting-up-a-project.astro

@@ -0,0 +1,8 @@
+---
+import Reveal from "../../layouts/Reveal.astro"
+import Slides from '../../components/slides/project-setup/index.astro'
+---
+
+<Reveal title="How to set up a basic web project">
+  <Slides />
+</Reveal>