convert to typescript

package.json

@@ -5,11 +5,14 @@
   "author": "maltejur <48161361+maltejur@users.noreply.github.com>",
   "license": "MIT",
   "devDependencies": {
-    "parcel-bundler": "^1.12.4"
+    "gh-pages": "^3.1.0",
+    "parcel-bundler": "^1.12.4",
+    "typescript": "^4.0.5"
   },
   "scripts": {
     "dev": "parcel src/index.html",
-    "build": "parcel build src/index.html"
+    "build": "parcel build src/index.html",
+    "deploy": "yarn build && gh-pages -d dist"
   },
   "dependencies": {
     "nprogress": "^0.2.0"

src/index.html

@@ -32,6 +32,6 @@
         <a href="#" id="back"></a>
       </div>
     </div>
-    <script src="./script.js"></script>
+    <script src="./script.ts"></script>
   </body>
 </html>

src/models.ts

@@ -0,0 +1,17 @@
+export type Routes = {
+  [route: string]: (params: Params) => HTMLElement;
+};
+
+export type Params = { [name: string]: string };
+
+export interface HertzschlagAusgabe {
+  Ausgabe: string;
+  Thema: string;
+  Seitenzahl?: string | number;
+  Erscheinungsdatum?: string | Date;
+  "Chefredakteur(-e)"?: string;
+  "Umschlag/Innenteil"?: string;
+  Preis?: string;
+  Auflage?: number;
+  yumpu?: string;
+}

src/modules/ausgabeHertzschlag.ts

@@ -1,18 +1,14 @@
-import { checkFile } from "./utils.js";
+import { checkFile } from "./utils";
 import json from "../../assets/data.json";
+import Page from "./page";
 
 export default function Ausgabe(params) {
   const ret = document.createElement("div");
-  ret.classList.add("page");
 
   const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id);
 
-  ausg["Cover"] = ausg["Ausgabe"] + ".jpg";
   let pagehtml = `
-  <a class="back" onclick="window.history.back()">
-    <i class="fas fa-arrow-left"></i>
-  </a><br><br>
-  <img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Cover"]}"></img>
+  <img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img>
   <h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2>
   <h1>${ausg["Thema"]}</h1>
   `;
@@ -33,7 +29,7 @@ export default function Ausgabe(params) {
         ret.innerHTML +=
           // prettier-ignore
           `
-        <a class="button" href="#pdf/compressed/${ausg["Ausgabe"]}.pdf">
+        <a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
           <i class="fas fa-file-pdf"></i>PDF Anzeigen
         </a>
         <button>
@@ -53,5 +49,5 @@ export default function Ausgabe(params) {
   );
 
   ret.innerHTML = pagehtml;
-  return ret;
+  return Page(ret);
 }

src/modules/home.ts

@@ -7,7 +7,7 @@ export default function Home() {
 
   json.hertzschlag.forEach((i) => {
     html += `
-      <a class="module" href="#ausgabe/${i.Ausgabe}">
+      <a class="module" href="#hertzschlag/${i.Ausgabe}">
           <img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img>
           <div class="moduleLabel">
               <h3>HS ${i.Ausgabe}</h3>

src/modules/impressum.js

@@ -1,7 +0,0 @@
-export default function Impressum() {
-  const ret = document.createElement("div");
-  ret.classList.add("pagewrapper");
-  ret.innerHTML =
-    "<div class='page'><img class='banner' src='images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Bergmannstraße 70<br>10961 Berlin<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@web.de'>maltejur@web.de</a></div>";
-  return ret;
-}

src/modules/impressum.ts

@@ -0,0 +1,7 @@
+export default function Impressum() {
+  const ret = document.createElement("div");
+  ret.classList.add("pagewrapper");
+  ret.innerHTML =
+    "<div class='page'><img class='banner' src='https://files.hertzschlag.eu/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Bergmannstraße 70<br>10961 Berlin<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@web.de'>maltejur@web.de</a></div>";
+  return ret;
+}

src/modules/liste.ts

@@ -1,11 +1,11 @@
 import json from "../../assets/data.json";
+import Page from "./page";
 
-export default async function Liste() {
+export default function Liste() {
   const ret = document.createElement("div");
-  ret.classList.add("page");
 
   let listehtml =
-    "<a class='back' onclick='window.history.back()'><i class='fas fa-arrow-left'></i></a><h1>Artikelliste</h1><table><tr><th>Ausgabe</th><th>Thema</th></tr>";
+    "<h1>Artikelliste</h1><table><tr><th>Ausgabe</th><th>Thema</th></tr>";
   json.hertzschlag.forEach((i) => {
     listehtml =
       listehtml +
@@ -24,5 +24,5 @@ export default async function Liste() {
   listehtml = listehtml + "</table>";
 
   ret.innerHTML = listehtml;
-  return ret;
+  return Page(ret);
 }

src/modules/page.ts

@@ -0,0 +1,10 @@
+export default function Page(content: HTMLElement) {
+  const el = document.createElement("div");
+
+  el.classList.add("page");
+  el.innerHTML =
+    '<div class="back" onclick="window.history.back()"><i class="fas fa-arrow-left" aria-hidden="true"></i></div>';
+  el.appendChild(content);
+
+  return el;
+}

src/modules/pdf.ts

@@ -1,11 +1,13 @@
+import { from } from "core-js/fn/array";
 import json from "../../assets/data.json";
+import type { Params } from "../models";
 
-export default function Pdf(params) {
+export default function Pdf(params: Params) {
   const ret = document.createElement("div");
   ret.classList.add("iframe");
 
   const iframe = document.createElement("iframe");
-  iframe.src = `${json.baseUrl}hertzschlag/pdf/${params.src}`;
+  iframe.src = `${json.baseUrl}hertzschlag/pdf/compressed/${params.id}.pdf`;
 
   ret.appendChild(iframe);
   return ret;

src/modules/router.ts

@@ -1,7 +1,17 @@
+import type { Routes } from "../models";
+
 export default class Router {
-  constructor(element, routes, { onpagechange = () => {} }) {
+  routes: Routes;
+  el: HTMLElement;
+  onpagechange: (route: string) => void;
+
+  constructor(
+    element: HTMLElement,
+    routes: Routes,
+    onpagechange: (route: string) => void
+  ) {
     this.routes = routes;
-    this.el = document.querySelector(element);
+    this.el = element;
     this.onpagechange = onpagechange;
     window.addEventListener("hashchange", this.onhashchange.bind(this));
     this.onhashchange();
@@ -14,7 +24,7 @@ export default class Router {
       const routeSplit = route.split("/");
       let params = {};
       let rigthRoute = true;
-      for (let i = 0; i < hashSplit.length; i++) {
+      for (let i = 0; i < routeSplit.length; i++) {
         if (routeSplit[i] != undefined && routeSplit[i][0] == ":") {
           if (routeSplit[i][1] == ":") {
             params[routeSplit[i].substr(2)] = hashSplit.slice(i).join("/");

src/script.js

@@ -1,66 +0,0 @@
-import Home from "./modules/home.js";
-import Ausgabe from "./modules/ausgabe.js";
-import Router from "./modules/router.js";
-import Impressum from "./modules/impressum.js";
-import Liste from "./modules/liste.js";
-import Pdf from "./modules/pdf.js";
-import NProgress from "nprogress/nprogress";
-import "nprogress/nprogress.css";
-
-document.getElementById("home").appendChild(Home());
-
-new Router(
-  "#contentinner",
-  {
-    "": undefined,
-    "ausgabe/:id": Ausgabe,
-    impressum: Impressum,
-    liste: Liste,
-    "pdf/::src": Pdf,
-  },
-  {
-    onpagechange: (route) => {
-      if (route == "") {
-        document.body.classList.remove("open");
-      } else {
-        document.body.classList.add("open");
-      }
-    },
-  }
-);
-
-// Entfert Ladebalken
-document.addEventListener("readystatechange", (event) => {
-  if (document.readyState == "complete") {
-    NProgress.done();
-  }
-});
-
-// Startet Ladebalken
-NProgress.configure({ showSpinner: false });
-NProgress.start();
-NProgress.inc();
-
-window.stats = () => {
-  var script = document.createElement("script");
-  script.onload = function () {
-    var statL = [];
-    for (let i = 0; i < 3; i++) {
-      var stats = new Stats();
-      stats.showPanel(i);
-      stats.dom.style.marginLeft = 400 + i * 85 + "px";
-      statL.push(stats);
-    }
-    statL.forEach((stats) => {
-      document.body.appendChild(stats.dom);
-    });
-    requestAnimationFrame(function loop() {
-      statL.forEach((stats) => {
-        stats.update();
-      });
-      requestAnimationFrame(loop);
-    });
-  };
-  script.src = "//mrdoob.github.io/stats.js/build/stats.min.js";
-  document.head.appendChild(script);
-};

src/script.ts

@@ -0,0 +1,40 @@
+import Home from "./modules/home";
+import Ausgabe from "./modules/ausgabeHertzschlag";
+import Router from "./modules/router";
+import Impressum from "./modules/impressum";
+import Liste from "./modules/liste";
+import Pdf from "./modules/pdf";
+import NProgress from "nprogress/nprogress";
+import "nprogress/nprogress.css";
+
+document.getElementById("home").appendChild(Home());
+
+new Router(
+  document.querySelector("#contentinner"),
+  {
+    "": undefined,
+    "hertzschlag/:id": Ausgabe,
+    "hertzschlag/:id/pdf": Pdf,
+    "hertzschlag/liste": Liste,
+    impressum: Impressum,
+  },
+  (route) => {
+    if (route == "") {
+      document.body.classList.remove("open");
+    } else {
+      document.body.classList.add("open");
+    }
+  }
+);
+
+// Entfert Ladebalken
+document.addEventListener("readystatechange", (event) => {
+  if (document.readyState == "complete") {
+    NProgress.done();
+  }
+});
+
+// Startet Ladebalken
+NProgress.configure({ showSpinner: false });
+NProgress.start();
+NProgress.inc();

src/style.css

@@ -1,5 +1,3 @@
-@import url("https://use.typekit.net/iqo1nim.css");
-
 html {
   font-family: "Lato", sans-serif;
   height: 100%;
@@ -269,8 +267,8 @@ iframe {
     width: 100% !important;
     max-width: 25em !important;
     float: none !important;
-    margin-left: calc(auto - 2em) !important;
-    margin-right: calc(auto - 2em) !important;
+    margin-left: calc(100% - 2em) !important;
+    margin-right: calc(100% - 2em) !important;
     margin-bottom: 2em !important;
   }
 }
@@ -445,6 +443,8 @@ i {
 .page .back {
   cursor: pointer;
   color: #969696;
+  display: block;
+  margin-bottom: 0.5em;
 }
 
 .open #main #content #back {

yarn.lock

@@ -4945,6 +4945,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
+  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+
 uncss@^0.17.3:
   version "0.17.3"
   resolved "https://registry.yarnpkg.com/uncss/-/uncss-0.17.3.tgz#50fc1eb4ed573ffff763458d801cd86e4d69ea11"