Abschnittsübersicht

    • Skript: Wird jedes Mal erweitert Datei
    • Zusätzliches Skript (aus Cloud Computing): Astro SSR, SSG, Islands Datei

    • Vorbereitung für Astro

      • BItte installieren Sie die letzte Stable Version von Node - https://nodejs.org/en
      • Setzen Sie die Pfad Variable.

    • Vorlesung 1: Überblick über Astro - erste Seiten

      • Installation
      • Übersicht über den Projektaufbau
      • Erste statische Seite mit CSS Einbindung
      • Generieren von Inhalten mit map
      • Markdown
    • ### VIDEO: Package.json (Neu SoSe24) Datei
      • Was ist npm
      • Pakete für das Projekt laden
      • Inhalte der package.json
    • *** 1_Astro: Erstes Projekt Datei

      Astro Basisprojekt

      • Entpacken 
      • Das Projekt in Visual Studio Code öffnen. 
      • Terminal öffnen. Prüfen, ob sie sich in dem Verzeichnis befinden in dem package.json enthalten ist. Geben sie dir <Enter> ein. 
      • Geben sie ein: npm i
      • Nun können sie mit npm run dev die Seite starten 
      • Nach dem Bau wird eine IP-Adresse beginnend mit localhost:xxxx angezeigt. Öffnen sie diese im Browser.

      Inhalt: 

      • Tailwind, Daisy UI
      • Statische Seiten
      • Server Side Rendering mit Map-Funktion 
      • Artikel mit Markdown 

      Hinweis für Windows 11 Nutzer

      •Falls sie ihre Skript-Policy auf restricted gesetzt haben, könnte folgender Fehler kommen:
      Error von Win11
      •Geben sie dann in die Powershell folgenden Befehl ein – das gilt so lange das Terminal offen ist:

      Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
      •Sie können auch die Regel dauerhaft setzen: Dies kann zu Sicherheitsproblematiken auf ihrem Rechner führen!

      Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

    • Vorlesung 3-5: Astro und Server Side Rendering

    • *** 2_Astro_Blog_Markdown_DaisyUI_SSR Datei

      Dieser Seed basiert nicht mehr wie im SoSe23 auf Astroship. Hier ist eine neue Vorlage enthalten, die auf DaisyUI aufbaut und intuitiver zu verstehen ist. 

      • DaisyUI 
      • SSR Redaktions-/Blogsystem
      • SSR Seiten
      • Navbar, die in Mobile zum Burgermenu wirs (collapse)
    • ### Video: Übersicht über Astro (SoSe24) Datei
      • Übersicht über Astro
      • Contentdriven
      • Ordnerbasierte Struktur
    • ### Video: Astro, Layouts, Footer, Responsive Navbars (SoSe24) Datei
      • Nutzung von Layouts
      • Footer
      • Responsive Navbars (die sich zu einem Burgen Menu zusammenfalten bei kleineren Screens)
    • ### Video: Server Side Rendering (SoSe24) Datei
      • Server Side Rendering am Beispiel der Seite "Person"
      • Die Seiten werden statisch gebaut und sind im Frontend dann nicht mehr änderbar. --> für reinen Content ohne Interaktion sehr gut geeignet.
    • ### Video: Blogübersicht (SoSe24) Datei
      • Automatische Darstellung der Blogkomponten abhängig vom Datum der Veröffentlichung und publish Flag
    • ### Video: Blogbeiträge aus Markdown rendern (SoSe24) Datei
      • Markdown Files in Seite einbetten.
      • Dynamische Routen am Beispiel [article].astro
    • ### Video: Theming mit DaisyUI (SoSe24) Datei
      • Theme in tailwind.config.cjs eintragen
      • Theme in Layout aktivieren
      • Eigene Themes erstellen

    • Vorlesung 6: Daten serverseitig abholen.

      • Download Postman POSTMAN
      • SSR mit Daten von einem Server holen 
      • Diese Daten darstellen. 
      • Beispiel Personen API