amending previous commit: committing all files, fixing link urls

build/Collection.ts

@@ -75,12 +75,21 @@ class Collection {
   /** available languages */
   languages: Array<string>;
 
-  constructor(srcUrl: string, srcBaseDir: string, distBaseDir: string) {
+  /** parent collection */
+  parent?: Collection;
+
+  constructor(
+    srcUrl: string,
+    srcBaseDir: string,
+    distBaseDir: string,
+    parent?: Collection
+  ) {
     srcUrl = upath.normalize(srcUrl);
     this.srcBaseDir = srcBaseDir;
     this.distBaseDir = distBaseDir;
     this.relSrcUrl = srcUrl.slice(this.srcBaseDir.length + 1);
     this.relId = getRelIdFromRelSrcUrl(this.relSrcUrl);
+    this.parent = parent;
   }
 
   load() {

build/Topic.ts

@@ -93,7 +93,6 @@ class Topic {
         (fn) =>
           fn.endsWith(".md") && !new RegExp(`${PAGE_MARKER}-..\.md`).test(fn)
       );
-    const childUrls_ = fs.readdirSync(srcDir).filter((fn) => fn.endsWith(".md"));
     childUrls.sort();
     this.childUrls = childUrls;
     this.children = this.childUrls.map((url) => {
@@ -134,10 +133,12 @@ class Topic {
         this.srcBaseDir
       );
 
-      fs.writeFileSync(
-        `${this.distBaseDir}/${this.relId}-${lang}.html`,
-        presentation.htmlPresentationString
-      );
+      const url = `${this.distBaseDir}/${this.relId}-${lang}.html`;
+      var dirname = path.dirname(url);
+      if (!fs.existsSync(dirname)) {
+        fs.mkdirSync(dirname);
+      }
+      fs.writeFileSync(url, presentation.htmlPresentationString);
     }
   }
 }

build/buildCollectionPages.tsx

@@ -5,7 +5,11 @@ import ReactMarkdown from "react-markdown";
 import { Collection } from "./Collection";
 import { Topic } from "./Topic";
 import { HtmlPage } from "./HtmlPage";
-import { COLLECTION_POSTFIX, COLLECTION_TOPICS_POSTFIX } from "./constants";
+import {
+  BASE_URL,
+  COLLECTION_POSTFIX,
+  COLLECTION_TOPICS_POSTFIX,
+} from "./constants";
 
 function buildCollectionPages(collection: Collection | Topic) {
   for (let lang of collection.languages) {
@@ -44,6 +48,9 @@ function buildCollectionPages(collection: Collection | Topic) {
   }
 }
 
+/**
+ * full collection page linking to subtopics
+ */
 function CollectionOverviewPage(props: {
   collection: Collection;
   lang: string;
@@ -66,6 +73,16 @@ function CollectionOverviewPage(props: {
           ) : null}
         </nav>
         <h1>{props.collection.titles[props.lang]}</h1>
+        {props.collection.parent ? (
+          <p>
+            parent topic:{" "}
+            <a
+              href={`${BASE_URL}/${props.collection.parent.relId}-${props.lang}.html`}
+            >
+              {props.collection.parent.titles[props.lang]}
+            </a>
+          </p>
+        ) : null}
         <ReactMarkdown>{extraContentAbove}</ReactMarkdown>
         <ul>
           {props.collection.children.map((child) => {
@@ -91,6 +108,10 @@ function CollectionOverviewPage(props: {
   );
 }
 
+/**
+ * collection page with a sidebar
+ * and presentation contents
+ */
 function CollectionPage(props: {
   collection: Collection | Topic;
   lang: string;
@@ -135,7 +156,9 @@ function CollectionPage(props: {
             <>
               <div>
                 parent topic:{" "}
-                <a href={`${props.collection.parent.relId}-${props.lang}.html`}>
+                <a
+                  href={`${BASE_URL}/${props.collection.parent.relId}-${props.lang}.html`}
+                >
                   {props.collection.parent.titles[props.lang]}
                 </a>
               </div>
@@ -193,7 +216,7 @@ function getNavEntryForTopicPage(element: Topic, lang: string) {
           .filter((child) => child.language === lang)
           .map((child, index) => {
             const title = child.getTitle();
-            const url = `${element.relId}-${lang}.html#/${index}`;
+            const url = `${BASE_URL}/${element.relId}-${lang}.html#/${index}`;
             return (
               <li key={child.relSrcUrl}>
                 <a href={url} target="content">

build/constants.ts

@@ -16,4 +16,11 @@ const COLLECTION_TOPICS_POSTFIX = "collection-topics";
 
 const PAGE_MARKER = "page";
 
-export { COLLECTION_POSTFIX, COLLECTION_TOPICS_POSTFIX, PAGE_MARKER };
+/**
+ * url where the deployment will be hosted
+ * - "docs" for local testing
+ * - "slides" for deployment on marko-knoebl.github.io/slides
+ */
+const BASE_URL = "/slides";
+
+export { BASE_URL, COLLECTION_POSTFIX, COLLECTION_TOPICS_POSTFIX, PAGE_MARKER };

build/loadUrlContent.ts

@@ -20,7 +20,7 @@ function loadUrlContent(
     | TopicJsonfileConfig
     | CollectionJsonfileConfig;
   if (config.type === "collection") {
-    const collection = new Collection(url, srcBaseDir, distBaseDir);
+    const collection = new Collection(url, srcBaseDir, distBaseDir, parent);
     collection.load();
     return collection;
   } else if (config.type === "topic") {

docs/angular-collection-de.html

@@ -1,4 +1,4 @@
-<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/others-de.html">Andere</a></div><div><a href="angular-de.html">show presentation individually</a></div><section><h1>Angular Grundlagen</h1><ul><li><a href="/angular-de.html#/0" target="content">Angular</a></li><li><a href="/angular-de.html#/1" target="content">Präsentationen</a></li><li><a href="/angular-de.html#/2" target="content">Agenda</a></li><li><a href="/angular-de.html#/3" target="content">Angular</a></li><li><a href="/angular-de.html#/4" target="content">Angular - Grundlagen</a></li><li><a href="/angular-de.html#/5" target="content">Grundlagen für die Schulung</a></li><li><a href="/angular-de.html#/6" target="content">TypeScript für Angular</a></li><li><a href="/angular-de.html#/7" target="content">Angular - Grundlagen II</a></li><li><a href="/angular-de.html#/8" target="content">Eigene Komponenten: Properties &amp; Events</a></li><li><a href="/angular-de.html#/9" target="content">Inputs &amp; Forms</a></li><li><a href="/angular-de.html#/10" target="content">Services</a></li><li><a href="/angular-de.html#/11" target="content">HTTP</a></li><li><a href="/angular-de.html#/12" target="content">Routing</a></li><li><a href="/angular-de.html#/13" target="content">Material Design - Komponenten</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/others-de.html">Andere</a></div><div><a href="angular-de.html">show presentation individually</a></div><section><h1>Angular Grundlagen</h1><ul><li><a href="/slides/angular-de.html#/0" target="content">Angular</a></li><li><a href="/slides/angular-de.html#/1" target="content">Präsentationen</a></li><li><a href="/slides/angular-de.html#/2" target="content">Agenda</a></li><li><a href="/slides/angular-de.html#/3" target="content">Angular</a></li><li><a href="/slides/angular-de.html#/4" target="content">Angular - Grundlagen</a></li><li><a href="/slides/angular-de.html#/5" target="content">Grundlagen für die Schulung</a></li><li><a href="/slides/angular-de.html#/6" target="content">TypeScript für Angular</a></li><li><a href="/slides/angular-de.html#/7" target="content">Angular - Grundlagen II</a></li><li><a href="/slides/angular-de.html#/8" target="content">Eigene Komponenten: Properties &amp; Events</a></li><li><a href="/slides/angular-de.html#/9" target="content">Inputs &amp; Forms</a></li><li><a href="/slides/angular-de.html#/10" target="content">Services</a></li><li><a href="/slides/angular-de.html#/11" target="content">HTTP</a></li><li><a href="/slides/angular-de.html#/12" target="content">Routing</a></li><li><a href="/slides/angular-de.html#/13" target="content">Material Design - Komponenten</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }

docs/data-types-and-data-formats-collection-de.html

@@ -1,4 +1,4 @@
-<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/index-de.html">Materialien für Programmierkurse</a></div><div><a href="data-types-and-data-formats-de.html">show presentation individually</a></div><section><h1>Datentypen und Datenformate</h1><ul><li><a href="/data-types-and-data-formats-de.html#/0" target="content">Datentypen und Datenformate</a></li><li><a href="/data-types-and-data-formats-de.html#/1" target="content">Datentypen</a></li><li><a href="/data-types-and-data-formats-de.html#/2" target="content">Zahlen</a></li><li><a href="/data-types-and-data-formats-de.html#/3" target="content">Boolesche Werte</a></li><li><a href="/data-types-and-data-formats-de.html#/4" target="content">Strings</a></li><li><a href="/data-types-and-data-formats-de.html#/5" target="content">null</a></li><li><a href="/data-types-and-data-formats-de.html#/6" target="content">JSON</a></li><li><a href="/data-types-and-data-formats-de.html#/7" target="content">CSV</a></li><li><a href="/data-types-and-data-formats-de.html#/8" target="content">XML</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/index-de.html">Materialien für Programmierkurse</a></div><div><a href="data-types-and-data-formats-de.html">show presentation individually</a></div><section><h1>Datentypen und Datenformate</h1><ul><li><a href="/slides/data-types-and-data-formats-de.html#/0" target="content">Datentypen und Datenformate</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/1" target="content">Datentypen</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/2" target="content">Zahlen</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/3" target="content">Boolesche Werte</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/4" target="content">Strings</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/5" target="content">null</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/6" target="content">JSON</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/7" target="content">CSV</a></li><li><a href="/slides/data-types-and-data-formats-de.html#/8" target="content">XML</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }

docs/data-types-and-data-formats-collection-en.html

@@ -1,4 +1,4 @@
-<html lang="en" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/index-en.html">Materials for Programming Courses</a></div><div><a href="data-types-and-data-formats-en.html">show presentation individually</a></div><section><h1>Data Types and Data Formats</h1><ul><li><a href="/data-types-and-data-formats-en.html#/0" target="content">Data types and data formats</a></li><li><a href="/data-types-and-data-formats-en.html#/1" target="content">Data types</a></li><li><a href="/data-types-and-data-formats-en.html#/2" target="content">Numbers</a></li><li><a href="/data-types-and-data-formats-en.html#/3" target="content">Booleans</a></li><li><a href="/data-types-and-data-formats-en.html#/4" target="content">null</a></li><li><a href="/data-types-and-data-formats-en.html#/5" target="content">Data formats</a></li><li><a href="/data-types-and-data-formats-en.html#/6" target="content">JSON</a></li><li><a href="/data-types-and-data-formats-en.html#/7" target="content">CSV</a></li><li><a href="/data-types-and-data-formats-en.html#/8" target="content">XML</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="en" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/index-en.html">Materials for Programming Courses</a></div><div><a href="data-types-and-data-formats-en.html">show presentation individually</a></div><section><h1>Data Types and Data Formats</h1><ul><li><a href="/slides/data-types-and-data-formats-en.html#/0" target="content">Data types and data formats</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/1" target="content">Data types</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/2" target="content">Numbers</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/3" target="content">Booleans</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/4" target="content">null</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/5" target="content">Data formats</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/6" target="content">JSON</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/7" target="content">CSV</a></li><li><a href="/slides/data-types-and-data-formats-en.html#/8" target="content">XML</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }