commit 82683861f67e38c76074d565029509e9aa5feaf7 Author: Ari Archer Date: Fri Jul 2 04:03:52 2021 +0300 update @ Fri 2 Jul 04:03:52 EEST 2021 diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..3cd0f7c --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "wscats.eno" + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..28a51d5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/content/js/commands/index.dev.js b/content/js/commands/index.dev.js new file mode 100644 index 0000000..b4f2721 --- /dev/null +++ b/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 +}; \ No newline at end of file diff --git a/content/js/commands/index.js b/content/js/commands/index.js new file mode 100644 index 0000000..940133d --- /dev/null +++ b/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 +} diff --git a/content/js/generic/generic.dev.js b/content/js/generic/generic.dev.js new file mode 100644 index 0000000..014abb0 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/content/js/generic/generic.js b/content/js/generic/generic.js new file mode 100644 index 0000000..c0bcf05 --- /dev/null +++ b/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); diff --git a/content/styles/generic/generic.css b/content/styles/generic/generic.css new file mode 100644 index 0000000..586477b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/content/styles/generic/generic.scss b/content/styles/generic/generic.scss new file mode 100644 index 0000000..f2b3159 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/git.sh b/git.sh new file mode 100755 index 0000000..47da93b --- /dev/null +++ b/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 + diff --git a/index.html b/index.html new file mode 100644 index 0000000..5337477 --- /dev/null +++ b/index.html @@ -0,0 +1,148 @@ + + + + + + + Home + + + + + + + + + + + + +
+ +
+ + diff --git a/page/js/index.html b/page/js/index.html new file mode 100644 index 0000000..e69de29 diff --git a/page/random/index.html b/page/random/index.html new file mode 100644 index 0000000..e69de29 diff --git a/page/redirect/index.dev.js b/page/redirect/index.dev.js new file mode 100644 index 0000000..79a45bd --- /dev/null +++ b/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 ").concat(url, ""); +document.body.appendChild(head); +document.location.assign(url); \ No newline at end of file diff --git a/page/redirect/index.html b/page/redirect/index.html new file mode 100644 index 0000000..381dd04 --- /dev/null +++ b/page/redirect/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/page/redirect/index.js b/page/redirect/index.js new file mode 100644 index 0000000..59f6fea --- /dev/null +++ b/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 ${url}` +document.body.appendChild(head); + +document.location.assign(url);