10_md_prototype

https://github.com/theaterpedia/management/issues/10 | Docs: |

• nicht mehr gültige Planung in veraltet-Datei auslagern, einzelne interessante Punkte neu verlinken
• noch meine erste Runde Components + Planung DAS Ei finden und hier einbinden
• Zeitschätzung, Zeitsteuerung einrichten
• Absprache mit Rosalin konkretisieren
• wie

• direkt auskommentieren
• zunächst alles nur rendered
• zunächst 2-gliedrig
• dann 3 + 4-gliedrig
• dann editing
• h1 mit Subline > Subline bricht über den Seitenrand und hat gelbes Band (mit und ohne Shortcode)
• dann h1, h2 sauber integrieren
• dann tiles-list

• nuxt-studio-deployment

• theaterpedia-Layouts einbinden

  • finales Konzept
    - TOP-Menu > sichtbar wenn eingeloggt
    - Breadcrumbs sind sehr hilfreich insbesondere auf mobile, erzeugen Overline-Effekt
    - linkes Menu > Modus 'Customer'
    - links oben: Logo (home) oder Main-Caption (wie in Agenda-App)
    - entweder: Breadcrumbs + Top-Bar: DASEi (Home) | Agenda | Curriculum | Themen | Profil
    - oder: Breadcrumbs nur auf mobile / ansonsten Top-Left-Hamburger
    - Captions expand-collapse only
    - linkes Menu > Modus 'Home' = Simple
    - Breadcrumbs nur auf mobile
    - mobile > Captions haben kein Hide-Drawer
    - Captions expand-collapse + load index-page (routing-basiert), erzeugt ebenfalls Overline-Effekt, z.B.
    - Ausbildung Theaterpädagogik
    Einstiege ins Theaterspiel
    Grundlagenbildung Theaterpädagogik (BuT)
    - Ausbildung default expanded
    -> Ziele:
  • verschiedene Layouts sollen möglichst fließend ineinander übergehen
    • admin-layout (cards-basiert)
    • gardening-layout
    • landing-layout + mega-menu
    • docs-layout
  • container und components sollen möglichst wiederverwendet werden
    -- Lösungsansätze --
  • flexbox
    • probleme: doppelter Sidebar-Container, scroll-Verhalten ist 'im Container'
  • absolute Positionierung
    • problem: mehr Checks und Berechnungen wegen
  • irgendwie kombiniert
    -- Ablauf --
  • layouts vergleichen
    • tp-core
    • shad-cn
    • shad-cn-docs-theme
    • shad-cn-admin-theme
  • Hauptlayout von shadcn-vue übernehmen
  • direkt den vsf-ansatz übernehmen > UiNavbarTop mit Slot, so dass im layout der content definiert wird und in der UiNavbar lediglich das Verhalten
  • sidebar
  • nuxt-studio-config-settings verstehen
  • config "main-navigation" via json festlegen, direkt nuxt-studio-kompatibel
    • über mehrere Pages und Subpages
    • soll später mit Obsidian-Export-Funktionen interagieren
• Config-Logik sinnvoll starten

  • Theme-Colors DAS Ei mit Codesandbox-Theme integrieren (Start)
  • Obsidian-Export soll später Teile der App-Config exportieren, insbesondere das Theme > dieses kann dann in der Nuxt-Config weiter
  • siehe hier: app.config und nuxt.schema entspricht pruvious-singleEntry-collection und ist die Basis für alle Konfigurationen des Projekts, von Logo, Title über Basis-Theme, Navigation, Theme-Overrides ... > wird von Pruvious direkt übernommen und überschreibt ähnlich wie in Nuxt-Studio die default-config via Queries (können hier auch Sachen wie Schrift geändert werden?)

• Shortcode-Overline-Headline, 3-Spalten-Layout und Pricing-Boxes in Obsidian skizzieren
  • Leadtext vorläufig via obsidian-classes festlegen
  • wie entsteht in ShimmeringFocus das geänderte Coloring?
  • 5 Zeilen 3-Spalten-Design anlegen
  • 2 Beispiele Pricing-Boxes anlegen, auch via CSS lösen
    • soll responsive sein
• pre-transform-hook übernehmen, ein paar Anwendungsfälle anlegen > see here
• Obsidian-Events-Component von Automd her spezifizieren (Umsetzung in Obsidian mit DataviewJS!!)
• Teasertext mit und ohne Nuxt-Content-Components lösen
  • taucht einerseits inline auf (Prose-ähnlich)
  • andererseits als Subline

• dieselbe Component macht alle Variationen (hat ggf. Wrapper), sie kann via Nuxt-Content direkt aber auch in anderen Components als Subcomponent eingebunden werden
• vorläufige Umsetzung der MD-Konvention für H1-H3 + 3 Textsizes (Pagelevel, Subpage = Card, Listing) festlegen
  • mit Utilities? (voll inline > halb inline > saubere tw-extension)
• PageHero skizzieren
• Card skizzieren
• Übersetzung der GRT-Werte in Tailwind-Lineheights standardisieren

• Page-Hero
• Event-Card dasei

• Media mit Nuxt.studio und Cloudinary aufsetzen, soll Obsidian-kompatibel sein
• Codesandbox-Theme DAS Ei > alt-rosa durch das CS-violett ersetzen > geht gut mit dem Nano-Grau zusammen > eher peppig-farbiger Auftritt

• Tabelle aus Curriculum S. 37 mit 3-Spalten-Layout umsetzen (S. raus + ECTS als Fußnoten o.ä.)
• ?4h?: Kursverlaufs-Seite programmieren mit Auswahl Kurs-ID (Filterung Dataview) + Generierung Anmeldekonditionen von JSON, das ich per Hand erstelle
• 2h: Standardseiten: Content anlegen (Impressum et al)
• 2h: Erweiterung der Konfiguration via eigene JSON (Plugin-Option): Footer, Sidemenu, Hamburger von JSON laden falls vorhanden
• Odoo-Interaktion via iFrames
  • mit dieser SPEC responsive machen, testen

• 1h: Access-2-md-yaml-Export-Ablauf vorläufig halbautomatisch: eine Textdatei oder ein Bericht wird exportiert zum direkten Einkopieren des YAML inkl. Cloudinary-Link, Odoo-Iframe-URL, Kursvarianten, dauert in der Umsetzung dann ca. 15 Min. gewissenhaftes Arbeiten (und auch noch einmal bei Odoo)

• Theming mit RenderStep und ohne Non-GoogleFont-Fonts (in theaterpedia-core schon gelöst) > Geist-Implementierung verstehen (NextJS)

• Canvas, Canvas-Candy ... Obsidian-CSS
• Markdown-Image-Grid-Logik (Regelung von cols und wrap via MD-Leerzeilen)
  • über YAML-PageProps wird dann voreingestellt, wie das detailliert gerendert wird, ob als Caroussel, Masonry ...
• wie entsteht eine 3-Spalten-Logik?
  • Variante A mit CSS Textsatz basierend auf span:
    -> Vorteil: WYSIWYG in Nur-Text-Ansicht + vollständige MD-Formatierung und Zeilenwechsel verfügbar im Content-Bereich der Tabelle
    • Hauptzeile via CSS-Class
    • ohne CSS-Class hängender Einzug
  • Variante B: mit Grid
    • basierend auf Obsidian-Image-Grid
  • Variante C: mit Tabelle

• https://sli.dev/
• Excalidraw in slidev
• Einbindung über diese Integration mit App-Branch knapp konzipieren
• vor allem jedoch Einbindung von Excalidraw-Output auf dasei.eu

• Unplugin-Projekte rund um Vite und Unjs-Projekte rund um nuxt durcharbeiten und prüfen, welche wir direkt verwenden
  z.B. replace-in-file-in-Buildstep und solche Sachen
• prism-theming (für Code-Syntax-Highlighting via Obsidian z.B. InBrowser)
• https://github.com/antfu/rehype-vue-sfc > für md-2-vuesfc-kompilierung ohne nuxt-content z.B. in Pruvious - mit Script-Setup und allem!!