Update usage api, add an [read more]

- Update usage api
- Add an import/export data page
- Improve css
- Add more noscript tags
- Fix a JS lincense issue
- Fix an html issue with a tags having no target="_blank"
- Add generic styling for noscript tags
- Add css for a switch/toggle (future use, didn't use it this time)

Signed-off-by: Ari Archer <ari.web.xyz@gmail.com>

api/usage.json

@@ -14,5 +14,13 @@
             "www.ari-web.xyz": 8.6,
             "blog.ari-web.xyz": 7.3
         }
+    },
+    "2022-09-23": {
+        "total": 11.0,
+        "top": {
+            "www.ari-web.xyz": 3.4,
+            "blog.ari-web.xyz": 2.4,
+            "legacy.blog.ari-web.xyz": 2.2
+        }
     }
 }

content/js/config/index.js

@@ -96,6 +96,12 @@ const locations = {
         desc: "90s page",
         aliases: ["90s", "90", "vintage", "old"],
     },
+
+    14: {
+        url: "/page/export",
+        desc: "Export and/or import your ari-web data",
+        aliases: ["export", "import", "data"],
+    },
 };
 const escape_HTML = (str) =>
     str.replace(

content/js/export/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+function main() {
+    document.getElementById("export-button").addEventListener("click", () => {
+        if (!window.localStorage.length) {
+            alert("No data to export");
+            return;
+        }
+
+        document.getElementById("export").value = btoa(
+            JSON.stringify(window.localStorage)
+        );
+    });
+
+    document.getElementById("import-button").addEventListener("click", () => {
+        let import_data = document.getElementById("import").value;
+
+        if (!import_data) {
+            alert("No import data provided");
+            return;
+        }
+
+        try {
+            let data = JSON.parse(atob(import_data));
+
+            if (!Object.keys(data).length) {
+                alert("Cannot import no data");
+                return;
+            }
+
+            if (!confirm("Are you sure you want to import this data?")) return;
+
+            if (
+                confirm(
+                    "Do you want to overwrite your data fully (OK) or overwrite the parts that are in the data (CANCEL)"
+                )
+            )
+                window.localStorage.clear();
+
+            Object.keys(data).forEach((k) =>
+                localStorage.setItem(k, JSON.stringify(data[k]))
+            );
+
+            alert("Data imported");
+        } catch (e) {
+            alert(`Invalid data provided: ${e}`);
+            return;
+        }
+
+        window.location.href = "/";
+    });
+}
+
+document.addEventListener("DOMContentLoaded", main);

content/styles/clean/index.css

@@ -43,6 +43,10 @@ textarea {
     font: inherit;
 }
 
+label {
+    cursor: pointer;
+}
+
 @media (prefers-reduced-motion: reduce) {
     *,
     ::after,

content/styles/export/'

@@ -0,0 +1,56 @@
+:root {
+    --switch-fg: #f9f6e8;
+    --switch-bg-inactive: #666c7f;
+    --switch-bg-active: #87afaf;
+}
+
+*,
+*::before,
+*::after {
+    background-color: #2b2e36;
+    color: #f9f6e8;
+    font-family: sans-serif;
+}
+
+label:not(label[for]) {
+    float: right;
+    padding: 1em;
+}
+
+body {
+    padding: 1em;
+    margin: auto;
+    max-width: 1000px;
+    min-height: 100vh;
+}
+
+.switch {
+    padding: 1em;
+}
+
+.content *, .content {
+    display: block
+}
+
+#pages {
+    display: grid;
+    height: 100%;
+
+    grid-template-rows: auto auto;
+    grid-gap: 1em;
+    align-items: center;
+}
+
+#pages div {
+    height: 100%;
+    padding: 4em;
+}
+
+#pages div h2 {
+    text-align: center;
+}
+
+div .disabled {
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+}

content/styles/export/index.css

@@ -0,0 +1,72 @@
+/* :root {
+    --switch-fg: #f9f6e8;
+    --switch-bg-inactive: #666c7f;
+    --switch-bg-active: #87afaf;
+} */
+
+*,
+*::before,
+*::after {
+    background-color: #2b2e36;
+    color: #f9f6e8;
+    font-family: sans-serif;
+}
+
+label:not(label[for]) {
+    float: right;
+    padding: 1em;
+}
+
+body {
+    padding: 1em;
+    margin: auto;
+    max-width: 1000px;
+    height: 100vh;
+}
+
+/* .switch {
+    padding: 1em;
+} */
+
+.content *,
+.content {
+    display: block;
+}
+
+#pages {
+    display: grid;
+    height: 100%;
+
+    grid-template-rows: auto auto;
+    grid-gap: 1em;
+    align-items: center;
+}
+
+#pages > div {
+    height: 100%;
+    padding: 4em;
+}
+
+#pages * h2 {
+    text-align: center;
+}
+
+textarea {
+    width: 100%;
+    height: 50%;
+    margin: 1em;
+    padding: 1em;
+    resize: none;
+}
+
+button {
+    padding: 0.5em;
+    background-color: #666c7f;
+    border-color: transparent;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+}
+
+button:hover, button:focus {
+    background-color: #87afaf;
+}

content/styles/noscript/index.css

@@ -0,0 +1,25 @@
+:root {
+    --ns-bg: #af5f5f;
+    --ns-fg: #262220;
+}
+
+*[ns],
+*[nsb],
+*[nsb] *,
+*[ns] * {
+    background-color: var(--ns-bg);
+    color: var(--ns-fg);
+    font-weight: bold;
+    line-height: 1.5;
+}
+
+*[ns] {
+    padding: 0.2em;
+    display: inline;
+}
+
+*[nsb] {
+    display: block;
+    text-align: center;
+    padding: 2em;
+}

content/styles/toggle/index.css

@@ -0,0 +1,84 @@
+:root {
+    --switch-fg: #ffffff;
+
+    --switch-bg-active: #2196f3;
+    --switch-bg-inactive: #cccccc;
+
+    --switch-transision-time: 0.2s;
+
+    --switch-width: 60px;
+    --switch-height: 34px;
+
+    --switch-slider-width: 26px;
+    --switch-slider-height: var(--switch-slider-width);
+    --switch-slider-left: 4px;
+    --switch-slider-bottom: var(--switch-slider-left);
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: var(--switch-width);
+    height: var(--switch-height);
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background-color: var(--switch-bg-inactive);
+    -webkit-transition: var(--switch-transision-time);
+    -o-transition: var(--switch-transision-time);
+    transition: var(--switch-transision-time);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+
+    width: var(--switch-slider-width);
+    height: var(--switch-slider-height);
+
+    left: var(--switch-slider-left);
+    bottom: var(--switch-slider-bottom);
+
+    background-color: var(--switch-fg);
+
+    -webkit-transition: var(--switch-transision-time);
+    -o-transition: var(--switch-transision-time);
+    transition: var(--switch-transision-time);
+}
+
+input:checked + .slider {
+    background-color: var(--switch-bg-active);
+}
+
+input:focus + .slider {
+    -webkit-box-shadow: 0 0 1px var(--switch-bg-active);
+    box-shadow: 0 0 1px var(--switch-bg-active);
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}

page/404/index.html

@@ -9,7 +9,7 @@
         <meta name="description" content="My personal website" />
         <meta
             name="keywords"
-            content="website, webdev, linux, programming, ari, terminal, dark"
+            content="website, webdev, linux, programming, ari, terminal, dark, 404, not found, http 404"
         />
         <meta
             name="robots"

page/amiunique/index.html

@@ -84,7 +84,7 @@
                         This test requires
                         <a href="https://www.enable-javascript.com/"
                             >JavaScript to be enabled</a
-                        >
+                        >, if you just don't trust me, see the paragraph above
                     </h1>
 
                     <style>

page/be/index.html

@@ -24,6 +24,7 @@
 
         <link rel="stylesheet" href="/content/styles/clean/index.css" />
         <link rel="stylesheet" href="/content/styles/be/index.css" />
+        <link rel="stylesheet" href="/content/styles/noscript/index.css" />
 
         <script type="text/javascript">
             <!--//--><![CDATA[//><!--
@@ -58,7 +59,17 @@
     </head>
 
     <body>
-        <h1>Please stand by while I'm fetching the required data...</h1>
+        <h1>
+            Please stand by while I'm fetching the required data...
+            <noscript>
+                <span ns>Failed, no JavaScript enabled</span>
+            </noscript>
+        </h1>
+
+        <noscript>
+            <div nsb ns>Don't trust me? <a href="/git">The code is FOSS</a></div>
+        </noscript>
+
         <h2>
             If this takes too long please check the dev tools using CTRL + SHIFT
             + I and opening the console

page/export/index.html

@@ -0,0 +1,66 @@
+<!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>Ari::web -&gt; Export</title>
+
+        <meta name="description" content="Export or import your ari-web data" />
+        <meta name="keywords" content="export, import, ari-web, ari, Ari Archer, dark, data, javascript" />
+        <meta
+            name="robots"
+            content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
+        />
+        <meta property="og:type" content="website" />
+
+        <meta name="color-scheme" content="dark" />
+
+        <link rel="manifest" href="/manifest.json" />
+
+        <link rel="stylesheet" href="/content/styles/clean/index.css" />
+        <!-- <link rel="stylesheet" href="/content/styles/toggle/index.css" /> -->
+        <link rel="stylesheet" href="/content/styles/export/index.css" />
+        <link rel="stylesheet" href="/content/styles/noscript/index.css" />
+
+        <script src="/content/js/export/index.js" defer></script>
+    </head>
+
+    <body>
+        <div class="content">
+            <!-- <label id="x" class="switch">
+                <input type="checkbox" id="page-selector" />
+                <span class="slider"></span>
+            </label> -->
+
+            <h1>
+                Import/export
+                <noscript>
+                    <span ns
+                        >(No JS enabled, will not work, although
+                        <a href="/git">you can take a peet at the source code</a
+                        >)</span
+                    >
+                </noscript>
+            </h1>
+
+            <hr />
+        </div>
+
+        <div id="pages">
+            <div>
+                <h2>Export ari-web data</h2>
+
+                <textarea readonly aria-readonly="true" id="export"></textarea>
+                <button id="export-button">Export my data</button>
+            </div>
+
+            <div>
+                <h2>Import ari-web data</h2>
+
+                <textarea id="import"></textarea>
+                <button id="import-button">Import my data</button>
+            </div>
+        </div>
+    </body>
+</html>

page/novpn/index.html

@@ -22,6 +22,8 @@
         <link rel="stylesheet" href="/content/styles/clean/index.min.css" />
         <link rel="stylesheet" href="/content/styles/novpn/index.min.css" />
 
+        <link rel="stylesheet" href="/content/styles/noscript/index.css" />
+
         <script type="text/javascript">
             <!--//--><![CDATA[//><!--
             /**
@@ -60,7 +62,15 @@
 
         <div class="content">
             <div class="page-intro">
-                <h1>NoVPN - fast, private, secure and free</h1>
+                <h1>
+                    NoVPN - fast, private, secure and free
+                    <noscript>
+                        <span ns
+                            >(No JS version (go to <a href="/git">/git</a> for
+                            the source code if you want))</span
+                        >
+                    </noscript>
+                </h1>
                 <br />
                 <p>
                     Tired of companies spying on you? NoVPN might be the "VPN"

page/reset/index.html

@@ -20,9 +20,8 @@
         />
 
         <link rel="stylesheet" href="/content/styles/generic/main.min.css" />
-    </head>
+        <link rel="stylesheet" href="/content/styles/noscript/index.css" />
 
-    <body>
         <style>
             .title {
                 text-align: center;
@@ -40,6 +39,34 @@
             }
         </style>
 
+        <script type="text/javascript">
+            <!--//--><![CDATA[//><!--
+            /**
+             * @licstart The following is the entire license notice for the JavaScript
+             * code in this page.
+             *
+             * Copyright (C) 2022 Ari Archer
+             *
+             * The JavaScript code in this page is free software: you can redistribute
+             * it and/or modify it under the terms of the GNU General Public License
+             * (GNU GPL) as published by the Free Software Foundation, either version 3
+             * of the License, or (at your option) any later version.  The code is
+             * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
+             * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
+             * for more details.
+             *
+             * As additional permission under GNU GPL version 3 section 7, you may
+             * distribute non-source (e.g., minimized or compacted) forms of that code
+             * without the copy of the GNU GPL normally required by section 4, provided
+             * you include this license notice and a URL through which recipients can
+             * access the Corresponding Source.
+             *
+             * @licend The above is the entire license notice for the JavaScript code
+             * in this page.
+             */
+
+            //--><!]]>
+        </script>
         <script>
             function reset() {
                 if (
@@ -51,8 +78,18 @@
                 }
             }
         </script>
+    </head>
 
-        <h1 class="title">Do you want to reset your account?</h1>
+    <body>
+        <h1 class="title">
+            Do you want to reset your account?
+            <noscript>
+                <span ns
+                    >(No JS enabled, will not work, although if this is just a
+                    trust thing, <a href="/git">see the source code</a>)</span
+                >
+            </noscript>
+        </h1>
         <div class="buttons">
             <button onclick="reset();">Yes</button>
             <button onclick="window.location = '/';">No</button>

page/ttytheme/index.html

@@ -79,8 +79,7 @@
                     If you don't trust me, check the JavaScript yourself
                     <a
                         href="https://github.com/TruncatedDinosour/website/tree/terminal/content/js/ttytheme"
-                        target=""
+                        target="_blank"
-                        _blank
                         >on GitHub</a
                     >
                 </h1>

page/ttytheme/settings/index.html

@@ -74,8 +74,7 @@
                     If you don't trust me, check the JavaScript yourself
                     <a
                         href="https://github.com/TruncatedDinosour/website/tree/terminal/content/js/ttytheme"
-                        target=""
+                        target="_blank"
-                        _blank
                         >on GitHub</a
                     >
                 </h1>