update @ Fri 2 Jul 04:03:52 EEST 2021

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "wscats.eno"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": false
+}

content/js/commands/index.dev.js

@@ -0,0 +1,46 @@
+"use strict";
+
+function reload(cmd) {
+  document.location.reload();
+  return "ReLoad: reloading the page";
+}
+
+function _goto(cmd) {
+  cmd = cmd.split(' ');
+
+  try {
+    var loc = pages[cmd[1].toLocaleLowerCase()];
+  } catch (e) {
+    return "GOTO: cannot pass an empty location";
+  }
+
+  if (loc) {
+    document.location.assign(loc);
+    return "redirecting to ".concat(loc);
+  } else {
+    return "GOTO: ".concat(cmd[1], " does not exist");
+  }
+}
+
+function exit() {
+  var textbox = document.getElementById("mobileCmd");
+  textbox.value = '';
+  mobileMenu.classList.add("hiddenMobile");
+}
+
+function help(cmd) {
+  return "help - display help\n    goto [PAGE] - go to a specified page\n    reload - reload the page\n    exit - exit";
+}
+
+var pages = {
+  "random_things": "/page/random",
+  "javascript_apps": "/page/js",
+  "source_code": "/page/redirect?url=//github.com/TruncatedDinosour/website",
+  "home": "/"
+};
+var commands = {
+  "help": help,
+  "goto": _goto,
+  "reload": reload,
+  "exit": exit
+};

content/js/commands/index.js

@@ -0,0 +1,49 @@
+function reload(cmd) {
+    document.location.reload();
+    return "ReLoad: reloading the page"
+}
+
+function goto(cmd) {
+    cmd = cmd.split(' ');
+
+    try {
+        var loc = pages[cmd[1].toLocaleLowerCase()];
+    } catch (e) {
+        return "GOTO: cannot pass an empty location";
+    }
+
+    if (loc) {
+        document.location.assign(loc);
+        return `redirecting to ${loc}`;
+    } else {
+        return `GOTO: ${cmd[1]} does not exist`;
+    }
+}
+
+function exit() {
+    let textbox = document.getElementById("mobileCmd");
+    textbox.value = '';
+    mobileMenu.classList.add("hiddenMobile");
+}
+
+function help(cmd) {
+    return `help - display help
+    goto [PAGE] - go to a specified page
+    reload - reload the page
+    exit - exit`
+}
+
+
+const pages = {
+    "random_things": "/page/random",
+    "javascript_apps": "/page/js",
+    "source_code": "/page/redirect?url=//github.com/TruncatedDinosour/website",
+    "home": "/"
+}
+
+const commands = {
+    "help": help,
+    "goto": goto,
+    "reload": reload,
+    "exit": exit
+}

content/js/generic/generic.dev.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var content = document.getElementById("content");
+var bar = document.getElementById("bar");
+var bar_list = document.getElementById("bar-list");
+var menus = document.getElementById("menus");
+var mobileMenu = document.getElementById("mobile-menu");
+var showMobileMenu = true;
+
+function addNewBarElement(innerElement, content, attrs) {
+  var appendElement = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : bar_list;
+  var item = document.createElement('li');
+  var itemContent = document.createElement(innerElement);
+  item.setAttribute("class", "nav-item");
+
+  for (var attr in attrs) {
+    itemContent.setAttribute(attr, attrs[attr]);
+  }
+
+  itemContent.innerHTML = content;
+  appendElement.appendChild(document.createTextNode("\n"));
+  item.appendChild(itemContent);
+  appendElement.appendChild(item);
+}
+
+function detectSmallScreen() {
+  var isSmall = window.matchMedia ? window.matchMedia("screen and (max-width: 699px)") : screen.width <= 699;
+  var bar_items = document.getElementsByClassName("doHide");
+
+  if (isSmall.matches) {
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = bar_items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var bar_item = _step.value;
+        bar_item.classList.add("smallHide");
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+          _iterator["return"]();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+
+    if (!document.getElementById("mobileMenu")) {
+      addNewBarElement('a', 'Menu', {
+        "href": "#!",
+        "class": "nav-item bigHide noMargin",
+        "onClick": "openMobileMenu();",
+        "id": "mobileMenu"
+      });
+    }
+  } else {
+    var _iteratorNormalCompletion2 = true;
+    var _didIteratorError2 = false;
+    var _iteratorError2 = undefined;
+
+    try {
+      for (var _iterator2 = bar_items[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        var _bar_item = _step2.value;
+
+        _bar_item.classList.remove("smallHide", "noMargin");
+      }
+    } catch (err) {
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
+          _iterator2["return"]();
+        }
+      } finally {
+        if (_didIteratorError2) {
+          throw _iteratorError2;
+        }
+      }
+    }
+  }
+}
+
+function mobileCmd(e) {
+  var textbox = document.getElementById("mobileCmd");
+  var output = document.getElementById("mobileCmdOutput");
+  if (!e) e = window.event;
+  var keyCode = e.code || e.key;
+
+  if (keyCode == 'Enter') {
+    if (textbox.value) {
+      try {
+        var out = commands[textbox.value.replace(/^\$ /, '').split(' ')[0]](textbox.value);
+      } catch (e) {
+        var out = e;
+      }
+    }
+
+    if (out) {
+      output.innerText = out;
+      textbox.value = '';
+    }
+  }
+}
+
+function addNewMobileMenuItem(innerElement, content, attrs) {
+  if (!document.getElementById("mobileList")) {
+    var _list = document.createElement("ul");
+
+    _list.setAttribute("id", "mobileList");
+
+    mobileMenu.appendChild(_list);
+  }
+
+  var list = document.getElementById("mobileList");
+  var item = document.createElement("li");
+  var itemContent = document.createElement(innerElement);
+
+  for (var attr in attrs) {
+    itemContent.setAttribute(attr, attrs[attr]);
+  }
+
+  itemContent.innerHTML = content;
+  list.appendChild(document.createTextNode("\n"));
+  item.appendChild(itemContent);
+  list.appendChild(item);
+}
+
+function openMobileMenu() {
+  if (!showMobileMenu) {
+    return;
+  }
+
+  var list = document.getElementById("mobileList");
+
+  if (!list) {
+    alert("No menu found :)");
+    showMobileMenu = false;
+    return;
+  }
+
+  var output = document.getElementById("mobileCmdOutput");
+  output.innerHTML = '';
+
+  if (mobileMenu.classList.contains("hiddenMobile")) {
+    mobileMenu.classList.remove("hiddenMobile");
+  } else {
+    mobileMenu.classList.add("hiddenMobile");
+  }
+
+  var textbox = document.getElementById("mobileCmd");
+  textbox.focus();
+}
+
+addNewBarElement('a', 'Random_things', {
+  "href": "/page/random",
+  "class": "nav-item doHide"
+});
+addNewBarElement('a', 'JavaScript_apps', {
+  "href": "/page/js",
+  "class": "nav-item doHide"
+});
+addNewBarElement('a', 'Source_code', {
+  "href": "//github.com/TruncatedDinosour/website",
+  "class": "nav-item doHide"
+});
+addNewBarElement('a', 'Ari\'s_Web', {
+  "href": "/",
+  "class": "nav-logo"
+});
+addNewMobileMenuItem('b', 'Pages:', {});
+addNewMobileMenuItem('p', ' * Random_things', {
+  "class": "keep-whitespace"
+});
+addNewMobileMenuItem('p', ' * JavaScript_apps', {
+  "class": "keep-whitespace"
+});
+addNewMobileMenuItem('p', ' * Source_code', {
+  "class": "keep-whitespace"
+});
+addNewMobileMenuItem('p', ' * Home', {
+  "class": "keep-whitespace"
+});
+addNewMobileMenuItem('br', '', {});
+addNewMobileMenuItem('b', 'type "help" for help', {});
+addNewMobileMenuItem('input', '', {
+  "type": "text",
+  "class": "cmd",
+  "onkeypress": "mobileCmd();",
+  "id": "mobileCmd"
+});
+addNewMobileMenuItem('div', '', {
+  "id": "mobileCmdOutput",
+  "class": "cmd-output"
+});
+detectSmallScreen();
+setInterval(detectSmallScreen, 100);

content/js/generic/generic.js

@@ -0,0 +1,178 @@
+const content = document.getElementById("content");
+const bar = document.getElementById("bar");
+const bar_list = document.getElementById("bar-list");
+const menus = document.getElementById("menus");
+const mobileMenu = document.getElementById("mobile-menu");
+
+var showMobileMenu = true;
+
+
+function addNewBarElement(innerElement, content, attrs, appendElement = bar_list) {
+    let item = document.createElement('li');
+    let itemContent = document.createElement(innerElement);
+
+    item.setAttribute("class", "nav-item");
+    for (const attr in attrs) {
+        itemContent.setAttribute(attr, attrs[attr]);
+    }
+
+    itemContent.innerHTML = content;
+    appendElement.appendChild(document.createTextNode("\n"));
+
+    item.appendChild(itemContent);
+    appendElement.appendChild(item);
+}
+
+function detectSmallScreen() {
+    var isSmall = window.matchMedia ? 
+              window.matchMedia("screen and (max-width: 699px)") : 
+              screen.width<=699;
+    let bar_items = document.getElementsByClassName("doHide");
+    
+    if (isSmall.matches) {
+        for (const bar_item of bar_items) {
+            bar_item.classList.add("smallHide");
+        }
+
+        if (!document.getElementById("mobileMenu")) {
+            addNewBarElement(
+                'a', 'Menu', {
+                    "href": "#!",
+                    "class": "nav-item bigHide noMargin",
+                    "onClick": "openMobileMenu();",
+                    "id": "mobileMenu"
+                }
+            );
+        }
+    } else {
+        for (const bar_item of bar_items) {
+            bar_item.classList.remove("smallHide", "noMargin");
+        }
+    }
+}
+
+function mobileCmd(e) {
+    let textbox = document.getElementById("mobileCmd");
+    let output = document.getElementById("mobileCmdOutput");
+
+    if (!e) e = window.event;
+    const keyCode = e.code || e.key;
+
+    if (keyCode == 'Enter'){
+        if (textbox.value) {
+            try {
+                var out = commands[textbox.value.replace(/^\$ /, '').split(' ')[0]](textbox.value);
+            } catch (e) {
+                var out = e;
+            }
+        }
+
+        if (out) {
+            output.innerText = out;
+            textbox.value = '';
+        }
+    }
+}
+
+function addNewMobileMenuItem(innerElement, content, attrs) {
+    if (!document.getElementById("mobileList")) {
+        let list = document.createElement("ul");
+        list.setAttribute("id", "mobileList")
+        mobileMenu.appendChild(list);
+    }
+    let list = document.getElementById("mobileList");
+
+    let item = document.createElement("li");
+    let itemContent = document.createElement(innerElement);
+
+    for (const attr in attrs) {
+        itemContent.setAttribute(attr, attrs[attr]);
+    }
+
+    itemContent.innerHTML = content;
+    list.appendChild(document.createTextNode("\n"));
+
+    item.appendChild(itemContent);
+    list.appendChild(item);
+}
+
+function openMobileMenu() {
+    if (!showMobileMenu) {
+        return;
+    }
+
+
+    let list = document.getElementById("mobileList");
+    if (!list) {
+        alert("No menu found :)");
+        showMobileMenu = false;
+        return;
+    }
+
+    let output = document.getElementById("mobileCmdOutput");
+    output.innerHTML = '';
+
+    if (mobileMenu.classList.contains("hiddenMobile")) {
+        mobileMenu.classList.remove("hiddenMobile");
+    } else {
+        mobileMenu.classList.add("hiddenMobile");
+    }
+
+    let textbox = document.getElementById("mobileCmd");
+    textbox.focus();
+}
+
+
+addNewBarElement(
+    'a', 'Random_things', {
+        "href": "/page/random",
+        "class": "nav-item doHide",
+    }
+);
+
+addNewBarElement(
+    'a', 'JavaScript_apps', {
+        "href": "/page/js",
+        "class": "nav-item doHide",
+    }
+);
+
+addNewBarElement(
+    'a', 'Source_code', {
+        "href": "//github.com/TruncatedDinosour/website",
+        "class": "nav-item doHide",
+    }
+);
+
+addNewBarElement(
+    'a', 'Ari\'s_Web', {
+        "href": "/",
+        "class": "nav-logo"
+    }
+);
+
+addNewMobileMenuItem('b', 'Pages:', {});
+addNewMobileMenuItem('p', ' * Random_things', { "class": "keep-whitespace" });
+addNewMobileMenuItem('p', ' * JavaScript_apps', { "class": "keep-whitespace" });
+addNewMobileMenuItem('p', ' * Source_code', { "class": "keep-whitespace" });
+addNewMobileMenuItem('p', ' * Home', { "class": "keep-whitespace" });
+
+
+addNewMobileMenuItem('br', '', {});
+addNewMobileMenuItem('b', 'type "help" for help', {});
+
+addNewMobileMenuItem(
+    'input', '', 
+    {
+        "type": "text",
+        "class": "cmd",
+        "onkeypress": "mobileCmd();",
+        "id": "mobileCmd"
+    }
+);
+
+addNewMobileMenuItem('div', '', { "id": "mobileCmdOutput", "class": "cmd-output" });
+
+
+detectSmallScreen();
+setInterval(detectSmallScreen, 100);

content/styles/generic/generic.css

@@ -0,0 +1,159 @@
+/*
+    * https://colorhunt.co/palette/4a3933f0a500e45826e6d5b8
+*/
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  color: #382e2b;
+}
+
+body, html {
+  background-color: #E6D5B8;
+}
+
+:root {
+  color-scheme: dark;
+  scrollbar-color: #e9b648 #4A3933;
+}
+
+::selection {
+  background-color: rgba(56, 46, 43, 0.55);
+}
+
+::-moz-selection {
+  background-color: rgba(56, 46, 43, 0.55);
+}
+
+body::-webkit-scrollbar {
+  width: 12px;
+}
+
+body::-webkit-scrollbar-track {
+  background: #4A3933;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #e9b648;
+  border-radius: 6px;
+  border: 3px solid #4A3933;
+}
+
+.nav-main {
+  display: block;
+  position: sticky;
+  top: 0;
+  background-color: #4A3933;
+}
+
+.nav-list {
+  display: block;
+  list-style: none;
+  padding: 0.7em;
+}
+
+.nav-item {
+  display: inline;
+  margin-right: 0.6em;
+  font-family: Hack, monospace;
+  font-size: 1.05em;
+  color: #F0A500;
+  text-decoration: none;
+  transition: color 0.5s;
+}
+
+.nav-item:hover a,
+.nav-item:focus {
+  color: #e9b648;
+}
+
+.nav-logo {
+  margin: 0;
+  float: right;
+  font-weight: 700;
+  font-size: 1.1em;
+  letter-spacing: 0.195ch;
+  text-decoration: none;
+  color: #e9b648;
+  transition: color 0.5s;
+}
+
+.nav-logo:hover,
+.nav-logo:focus {
+  color: #e5a724;
+}
+
+.nav-item:focus,
+.nav-logo:focus {
+  outline: none;
+  border-bottom: 2px solid #F0A500;
+}
+
+@media (min-width: 700px) {
+  .bigHide {
+    display: none;
+  }
+}
+@media (max-width: 700px) {
+  .nav-item {
+    margin: 0;
+  }
+}
+.smallHide {
+  display: none;
+}
+
+.error {
+  padding: 0.4em;
+}
+.error *, .error {
+  background-color: #E45826;
+  color: #E6D5B8;
+  font-weight: 700;
+  font-family: Hack, monospace;
+}
+
+.mobile-menu {
+  display: block;
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  padding: 0.7em;
+  width: 100%;
+  height: 46%;
+}
+.mobile-menu *, .mobile-menu {
+  list-style: none;
+  color: #e7dbc5;
+  background-color: #4A3933;
+  font-family: Hack, monospace;
+}
+
+.hiddenMobile {
+  display: none;
+}
+
+.keep-whitespace {
+  white-space: pre;
+}
+
+.cmd-output {
+  overflow: scroll;
+  padding: 0.8em;
+}
+
+.cmd {
+  display: inline;
+  border: none;
+  outline: none;
+  padding: 0.2em;
+  padding-left: 0.4em;
+  margin: 0.5em;
+  margin-top: 0.8em;
+  font-family: Hack, monospace;
+  border-left: 2px solid #E6D5B8;
+}
+
+.cmd:focus {
+  border-left: 2px solid #e9b648;
+}

content/styles/generic/generic.scss

@@ -0,0 +1,194 @@
+/*
+    * https://colorhunt.co/palette/4a3933f0a500e45826e6d5b8
+*/
+
+$brown: #4A3933;
+$dbrown: #382e2b;
+
+$yellow: #F0A500;
+$lyellow: #e9b648;
+
+$orange: #E45826;
+
+$white: #E6D5B8;
+$lwhite: #e7dbc5;
+
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    color: $dbrown;         // default text colour
+}
+body, html {
+    background-color: $white;
+}
+
+
+:root {
+    color-scheme: dark; // tell the browser that this website uses dark colour scheme
+    scrollbar-color: $lyellow $brown; // filefox's scrollbar
+}
+
+::selection {
+    background-color: transparentize($dbrown, 0.45);
+}
+::-moz-selection {
+    background-color: transparentize($dbrown, 0.45);
+}
+
+
+// Chrome's, Edge's, and Safari's scrollbars
+body::-webkit-scrollbar {
+    width: 12px;
+}
+body::-webkit-scrollbar-track {
+    background: $brown;
+}
+body::-webkit-scrollbar-thumb {
+    background-color: $lyellow;
+    border-radius: 6px;
+    border: 3px solid $brown;
+}
+
+
+.nav-main {
+    display: block;
+    position: sticky;
+    top: 0;
+
+    background-color: $brown;
+}
+
+.nav-list {
+    display: block;
+    list-style: none;
+    padding: 0.7em;
+}
+
+.nav-item {
+    display: inline;
+    margin-right: 0.6em;
+    
+    font-family: Hack, monospace;
+    font-size: 1.05em;
+
+    color: $yellow;
+    text-decoration: none;
+
+    transition: color 0.5s;
+}
+.nav-item:hover a,
+.nav-item:focus {
+    color: $lyellow;
+}
+
+
+.nav-logo {
+    margin: 0;
+
+    float: right;
+    font-weight: 700;
+    font-size: 1.1em;
+
+    letter-spacing: 0.195ch;
+    text-decoration: none;
+
+    color: $lyellow;
+
+    transition: color 0.5s;
+}
+.nav-logo:hover,
+.nav-logo:focus {
+    color: darken($lyellow, 8%);
+}
+
+
+.nav-item:focus,
+.nav-logo:focus {
+    outline: none;
+    border-bottom: 2px solid $yellow;
+}
+
+
+@media (min-width: 700px) {
+    .bigHide {
+        display: none;
+    }
+}
+@media (max-width: 700px) {
+    .nav-item {
+        margin: 0;
+    }
+}
+
+.smallHide {
+    display: none;
+}
+
+
+.error {
+    padding: 0.4em;
+
+    & *, & {
+        background-color: $orange;
+        color: $white;
+        
+        font-weight: 700;
+        font-family: Hack, monospace;
+    }
+}
+
+
+.mobile-menu {
+    display: block;
+    margin: 0;
+
+    position: fixed;
+    bottom: 0;
+    padding: 0.7em;
+
+    width: 100%;
+    height: 46%;
+
+    & *, & {
+        list-style: none;
+    
+        color: $lwhite;
+        background-color: $brown;
+
+        font-family: Hack, monospace;
+    }
+}
+
+
+.hiddenMobile {
+    display: none;
+}
+
+.keep-whitespace {
+    white-space: pre;
+}
+
+
+.cmd-output {
+    overflow: scroll;
+    padding: 0.8em;
+}
+
+.cmd {
+    display: inline;
+    border: none;
+    outline: none;
+
+    padding: 0.2em;
+    padding-left: 0.4em;
+    margin: 0.5em;
+    margin-top: 0.8em;
+
+    font-family: Hack, monospace;
+    border-left: 2px solid $white;
+}
+.cmd:focus {
+    border-left: 2px solid $lyellow;
+}

git.sh

@@ -0,0 +1,24 @@
+#!/bin/sh
+
+url="https://github.com/TruncatedDinosour/website.git"
+msg="update @ $(date)"
+if [[ "$1" ]];
+then
+    msg="$1"
+fi
+
+echo "committing with message \"$msg\""
+if [[ ! -d ".git" ]];
+then
+    git init
+    git add .
+    git commit -m "$msg"
+    git remote add origin "$url"
+    git push -u origin master
+    exit $?
+else
+    git add .
+    git commit -m "$msg"
+    git push -u origin master
+fi
+

index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+
+    <link rel="stylesheet" href="/content/styles/generic/generic.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css">
+
+    <script src="/content/js/commands/index.dev.js" defer></script>
+    <script src="/content/js/generic/generic.dev.js" defer></script>
+</head>
+<body>
+    <nav class="nav-main" id="bar">
+        <ul class="nav-list" id="bar-list">
+        </ul>
+
+        <noscript>
+            <style>
+                .nav-list {
+                    display: none;
+                }
+            </style>
+
+            <div class="error">
+                For full functionality of this site it is necessary to enable JavaScript.<br/>
+                Here are the <a href="https://www.enable-javascript.com/" target="_blank">
+                instructions how to enable JavaScript in your web browser</a>.
+            </div>
+        </noscript>
+    </nav>
+
+    <div id="menus">
+        <div class="mobile-menu hiddenMobile" id="mobile-menu">
+        </div>
+    </div>
+
+    <div class="content" id="content" name="content">
+        <ul>
+            <li>
+                <a href="#!">h</a>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+                <h1>[lorem]</h1>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>

page/redirect/index.dev.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var params = new URL(document.location).searchParams;
+var url = params.get("url");
+
+if (!url) {
+  var url = '/';
+}
+
+var url = url.toString();
+document.title = "redirect to ".concat(url);
+var head = document.createElement("h1");
+head.innerHTML = "Rederect to <a href=\"".concat(url, "\">").concat(url, "</a>");
+document.body.appendChild(head);
+document.location.assign(url);

page/redirect/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="/page/redirect/index.dev.js" defer></script>
+</head>
+<body>
+</body>
+</html>

page/redirect/index.js

@@ -0,0 +1,17 @@
+let params = (new URL(document.location)).searchParams;
+
+
+var url = params.get("url");
+if (!url) {
+    var url = '/';
+}
+var url = url.toString();
+
+
+document.title = `redirect to ${url}`;
+
+let head = document.createElement("h1");
+head.innerHTML = `Rederect to <a href="${url}">${url}</a>`
+document.body.appendChild(head);
+
+document.location.assign(url);