Alle sagen es sei einfach, aber es ist einfach nur (unnötig) kompliziert. Aber es macht Spaß, man kann wenigstens sehen, was man erschafft.
HTWR-aachen.de nutzt React und Nextjs als Bibliothek und Framework.
Ich werde hier keine so gute Einführung in die beiden Sachen geben können wie sie selber, deswegen schaut da mal vorbei.
HTWR ist in verschiedene Lehrstühle/Institute (institutes) aufgegliedert, ähnlich wie es die Informatik auch ist.
Tatsächlich sind Institute ein oder mehrere Lehrstühle, die sich zusammengetan haben. Ein Lehrstuhl ist einfach nur die Stelle eines Professors.
Die Institute unterrichten dann mehrere Fächer (subjects), die dann bei HTWR aufgearbeitet werden.
Jedoch können Fächer auch von mehreren Instituten zusammen gemacht sein.
Also ergibt sich so ein Modell
// src/models/institute.ts
export type Institute = {
name: Institutes;
professor: string;
fullName: string;
href: string;
// {... etc.}
};
// src/models/subjects.ts
export type Subject = {
name: string;
institutes: Institutes[];
displayName: string;
fullName?: string;
articlesURL: string;
articlesPath: string;
};HTWR benutzt den halbwegs neuen App Router von Nextjs, das bedeutet, in /src/app werden alle URL-Pfade als Ordner definiert.
In jedem Ordner befindet sich dann eine page.tsx Datei, die die Seite rendert.
Die Seite ist im Normalfall eine Server-Component, kann aber, falls
Interaktion gewünscht ist (z.B. durch useState) in eine Client-Component
verwandelt werden. Lest euch die Next
Dokumentation
durch.
Die Seite wird dann an der Stelle von {children} in einem Layout eingefügt, das dann wiederum im {children} eines höheren Layouts eingefügt wird bis zum root /src/app/layout.tsx.
[subject], [...slug] sind dynamische Pfade, die (alle) pattern matching (mit ... rekursiv) nutzen und den erkannten Wert als Parameter an die darunterliegenden Seiten weitergeben.
So können dynamisch die Zusammenfassungen aus dem Dateiordner gezogen werden und dann mit nur einem page.tsx alle gerendert werden.
Viele weitere Informationen lassen sich sehr gut bei Bedarf in der Next Dokumentation (Achtet darauf App Router links oben ausgewählt zu haben).
Das root layout ist absichtlich sehr schlicht. Es beinhaltet nur die Schriftarten und Metadaten-Header der Webseite, sowie eine Grundlegende (simplifizierte)
<html>
<head></head>
<body>
{children}
</body>
</html>Denn jedes Institut hat sein eigenes Layout /src/layouts.
Viele benutzen aber das RWTH-CMS-System, welches als Component src/layouts/rwth zur Verfügung steht.
Hier lässt sich das Logo und die Navigationsleiste (und die mobile Navigation) konfigurieren.
Embedded/Deddebme, SE/ES, Logic/Cigol und ComSys/SysCom haben eigene Layouts.