add 3rs-orbit

make footer a shared component
fix markdown css
2024-11-24 02:03:06 +01:00 · 2024-11-24 01:53:55 +01:00 · 2024-11-23 22:58:11 +01:00 · 2024-11-23 22:58:05 +01:00 · 2024-11-23 22:48:01 +01:00 · 2024-11-23 22:47:36 +01:00
21 changed files with 363 additions and 23 deletions
--- a/components/footer.html
+++ b/components/footer.html
@@ -0,0 +1,11 @@
+<footer class="flex row space-between">
+  <div></div>
+  <div>
+    <p>
+      I hate web-dev, but ig it's cool to have a website
+      <br />
+      and no, no <i>light</i> mode, I have enough with this
+    </p>
+  </div>
+  <div><a href="https://git.javalsai.dynv6.net/javalsai/website">source</a></div>
+</footer>
--- a/components/md-post.html
+++ b/components/md-post.html
@@ -1,4 +1,5 @@
  </main>
 </body>
+<!--# include virtual="/components/footer.html" -->

 </html>
--- a/components/md-pre.html
+++ b/components/md-pre.html
@@ -15,5 +15,6 @@
 </head>

 <body class="flex column">
+  <!--TODO: add a file nav on the left, likely just iframe upper dir, should be autoinex-->
  <!--# include virtual="/components/header.html" -->
  <main>
--- a/index.html
+++ b/index.html
@@ -104,17 +104,7 @@
      </div>
    </div>
  </main>
-  <footer class="flex row space-between">
-    <div></div>
-    <div>
-      <p>
-        I hate web-dev, but ig it's cool to have a website
-        <br />
-        and no, no <i>light</i> mode, I have enough with this
-      </p>
-    </div>
-    <div><a href="https://git.javalsai.dynv6.net/javalsai/website">source</a></div>
-  </footer>
-</body>
+  <!--# include virtual="/components/footer.html" -->
+  </body>

 </html>
--- a/notes/index.html
+++ b/notes/index.html
@@ -14,7 +14,6 @@
        <h1><a class="reference" id="notes" href="#notes">Notes</a></h1>
        <p>This will just contain markdown notes about academic stuff. Will try to use nice web stuff as much as
            possible, like idk, integrate qalc graphs and that into formulas or smth.</p>
-        <p>FLASHBANG ALERT!</p>
        <ul class="row-ul">
            <li><a href="math">math</a></li>
            <li><a href="physics">physics</a></li>
@@ -24,6 +23,7 @@
            <code>U&lt;unit&gt;_&lt;name&gt;.&lt;md/html&gt;</code></p>
        <p>Also, example of the markdown to html thing right now, from <a href="example.md">this</a> to <a href="example.html">this</a></p>
    </main>
+    <!--# include virtual="/components/footer.html" -->
 </body>

 </html>
--- a/srv/autoindex-script.js
+++ b/srv/autoindex-script.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    function calculateSize(size) {
+        var sufixes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'EiB'];
+        var q = 0;
+
+        while (size / 1024 > 1) {
+            size = size / 1024;
+            q++;
+        }
+
+        return (Math.round(size * 100) / 100) + ' ' + sufixes[q];
+    }
+
+    if (window.location.pathname == '/') {
+        document.querySelector('.directory.go-up').style.display = 'none';
+    }
+
+    var path = window.location.pathname.split('/');
+    var nav = document.querySelector("nav#breadcrumbs ul");
+    var pathSoFar = '';
+
+    for (var i = 1; i < path.length - 1; i++) {
+        pathSoFar += '/' + decodeURI(path[i]);
+        nav.innerHTML += '<li><a href="' + encodeURI(pathSoFar) + '">' + decodeURI(path[i]) + '</a></li>';
+    }
+
+    var mtimes = document.querySelectorAll("table#contents td.mtime a");
+
+    for (var i = 0; i < mtimes.length; i++) {
+        var mtime = mtimes[i].textContent;
+        if (mtime) {
+            var d = new Date(mtime);
+            mtimes[i].textContent = d.toLocaleString(navigator.language);
+        }
+    }
+
+    var sizes = document.querySelectorAll("table#contents td.size a");
+
+    for (var i = 1; i < sizes.length; i++) {
+        var size = sizes[i].textContent.slice(0, -2);
+        if (size) {
+            sizes[i].textContent = calculateSize(parseInt(size));
+        }
+    }
+
+}, false);
+
--- a/srv/autoindex-style.css
+++ b/srv/autoindex-style.css
@@ -0,0 +1,191 @@
+/* soo much SHIT css */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0px;
+  padding: 0px;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background: var(--background);
+}
+
+table#contents td a {
+  text-decoration: none;
+  display: block;
+  padding: 10px 30px 10px 30px;
+}
+
+table#contents {
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+  border-collapse: collapse;
+  border-width: 0px;
+}
+
+table#contents td {
+  padding: 0px;
+  word-wrap: none;
+  white-space: nowrap;
+}
+
+table#contents td.icon,
+table td.size,
+table td.mtime {
+  width: 1px;
+  white-space: nowrap;
+}
+
+table#contents td.icon a {
+  padding-left: 0px;
+  padding-right: 5px;
+}
+
+table#contents td.name a {
+  padding-left: 5px;
+}
+
+table#contents td.size a {
+  color: var(--text);
+}
+
+table#contents td.mtime a {
+  padding-right: 0px;
+  color: var(--text);
+}
+
+table#contents tr {
+  color: var(--text);
+}
+
+table#contents tr:hover {
+  color: var(--accent);
+}
+
+table#contents tr.separator td {
+  padding: 10px 30px 10px 30px
+}
+
+table#contents tr.separator td hr {
+  display: none;
+}
+
+nav#breadcrumbs {
+  margin-bottom: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+nav#breadcrumbs ul {
+  list-style: none;
+  display: inline-block;
+  margin: 0px;
+  padding: 0px;
+}
+
+nav#breadcrumbs ul .icon {
+  font-size: 14px;
+}
+
+nav#breadcrumbs ul li:first-child a,
+table#contents tbody tr:first-child td:first-child a {
+  color: var(--primary);
+}
+
+nav#breadcrumbs ul:hover li:first-child a {
+  color: var(--text);
+}
+
+nav#breadcrumbs ul li {
+  float: left;
+}
+
+nav#breadcrumbs ul li a {
+  color: var(--text);
+  display: block;
+  background: var(--background-lighter);
+  text-decoration: none;
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px 0 5px;
+  text-align: center;
+  margin-right: 23px;
+}
+
+nav#breadcrumbs ul li:first-child a {
+  padding-left: 15px;
+  -moz-border-radius: 4px 0 0 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px 0 0 4px;
+}
+
+nav#breadcrumbs ul li:first-child a:before {
+  border: none;
+}
+
+nav#breadcrumbs ul li:last-child a {
+  padding-right: 15px;
+  -moz-border-radius: 0 4px 4px 0;
+  -webkit-border-radius: 0;
+  border-radius: 0 4px 4px 0;
+}
+
+nav#breadcrumbs ul li:last-child a:after {
+  border: none;
+}
+
+nav#breadcrumbs ul li a:before,
+nav#breadcrumbs ul li a:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  border: 0 solid var(--background-lighter);
+  border-width: 20px 10px;
+  width: 0;
+  height: 0;
+}
+
+nav#breadcrumbs ul li a:before {
+  left: -20px;
+  border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:after {
+  left: 100%;
+  border-color: transparent;
+  border-left-color: var(--background-lighter);
+}
+
+nav#breadcrumbs ul li a:hover {
+  background-color: var(--primary);
+}
+
+nav#breadcrumbs ul li a:hover:before {
+  border-color: var(--primary);
+  border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:hover:after {
+  border-left-color: var(--primary);
+}
+
+nav#breadcrumbs ul li a:active {
+  background-color: var(--accent);
+}
+
+nav#breadcrumbs ul li a:active:before {
+  border-color: var(--accent);
+  border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:active:after {
+  border-left-color: var(--accent);
+}
--- a/srv/autoindex.xslt
+++ b/srv/autoindex.xslt
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:D="DAV:" exclude-result-prefixes="D">
+<xsl:output method="html" encoding="UTF-8" />
+
+<xsl:template match="D:multistatus">
+    <xsl:text disable-output-escaping="yes">&lt;?xml version="1.0" encoding="utf-8" ?&gt;</xsl:text>
+    <D:multistatus xmlns:D="DAV:">
+        <xsl:copy-of select="*"/>
+    </D:multistatus>
+</xsl:template>
+
+<xsl:template match="/list">
+  <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</xsl:text>
+
+  <html>
+    <head>
+      <link rel="stylesheet" href="/styles/bundles/complete.css" />
+      <link rel="stylesheet" href="/srv/autoindex-style.css" />
+      <script src="https://kit.fontawesome.com/55eb9c16a8.js"></script>
+      <script src="/srv/autoindex-script.js" type="text/javascript"></script>
+    </head>
+    <body>
+      <div>
+          <nav id="breadcrumbs"><ul><li><a href="/">/</a></li></ul></nav>
+          <table id="contents">
+            <tbody>
+                <tr class="directory go-up">
+                  <td class="icon"><a href="../"><b>←</b></a></td>
+                  <td class="name"><a href="../">..</a></td>
+                  <td class="size"><a href="../"></a></td>
+                  <td class="mtime"><a href="../"></a></td>
+                </tr>
+
+              <xsl:if test="count(directory) != 0">
+                <tr class="separator directories">
+                  <td colspan="4"><hr/></td>
+                </tr>
+              </xsl:if>
+
+              <xsl:for-each select="directory">
+                <tr class="directory">
+                  <td class="icon"><a href="{.}/"><i class="fa fa-folder"></i></a></td>
+                  <td class="name"><a href="{.}/"><xsl:value-of select="." /></a></td>
+                  <td class="size"><a href="{.}/"></a></td>
+                  <td class="mtime"><a href="{.}/"><xsl:value-of select="./@mtime" /></a></td>
+                </tr>
+              </xsl:for-each>
+
+              <xsl:if test="count(file) != 0">
+                <tr class="separator files">
+                  <td colspan="4"><hr/></td>
+                </tr>
+              </xsl:if>
+
+              <xsl:for-each select="file">
+                <tr class="file">
+                  <td class="icon"><a href="{.}"><i class="fa fa-file"></i></a></td>
+                  <td class="name"><a href="{.}"><xsl:value-of select="." /></a></td>
+                  <td class="size"><a href="{.}"><xsl:value-of select="./@size" /> B</a></td>
+                  <td class="mtime"><a href="{.}"><xsl:value-of select="./@mtime" /></a></td>
+                </tr>
+              </xsl:for-each>
+            </tbody>
+          </table>
+    </div>
+    </body>
+  </html>
+  </xsl:template>
+</xsl:stylesheet>
--- a/style.css
+++ b/style.css
@@ -1,3 +1,5 @@
+@import url('/styles/variables.css');
+@import url('/styles/scrollbar.css');
@import url('/styles/common.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
--- a/styles/bundles/complete.css
+++ b/styles/bundles/complete.css
@@ -1,3 +1,5 @@
+@import url('/styles/variables.css');
+@import url('/styles/scrollbar.css');
@import url('/styles/common.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
--- a/styles/bundles/markdown.css
+++ b/styles/bundles/markdown.css
@@ -1,4 +1,6 @@
@import url('/styles/common.css');
+@import url('/styles/variables.css');
+@import url('/styles/scrollbar.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
@import url('/styles/classes/ul-directions.css');
--- a/styles/common.css
+++ b/styles/common.css
@@ -1,6 +1,3 @@
-@import url('/styles/variables.css');
-@import url('/styles/scrollbar.css');
-
 h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 700;
--- a/styles/components/footer.css
+++ b/styles/components/footer.css
@@ -1,4 +1,3 @@
-@import url('/styles/common.css');
 footer {
  margin-top: 1em;
  color: var(--dark-text);
--- a/styles/components/header.css
+++ b/styles/components/header.css
@@ -1,5 +1,3 @@
-@import url('/styles/common.css');
-
 header {
  position: fixed;

--- a/styles/components/pre-icon.css
+++ b/styles/components/pre-icon.css
@@ -1,5 +1,3 @@
-@import url('/styles/common.css');
-
 .pre-icon {
  display: inline-flex;
  align-items: center;
--- a/styles/components/reference.css
+++ b/styles/components/reference.css
@@ -1,5 +1,3 @@
-@import url('/styles/common.css');
-
 a.reference:link,
 a.reference:visited {
  color: inherit;
--- a/tools/3rs-orbit/.gitignore
+++ b/tools/3rs-orbit/.gitignore
@@ -0,0 +1 @@
+/pkg
--- a/tools/3rs-orbit/index.html
+++ b/tools/3rs-orbit/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+    <script type="module" src="index.js"></script>
+    <style>
+      html, body {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="open-computer">Open From Computer</button>
+    <canvas style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin:auto;"></canvas>
+    <canvas style="position: absolute;top:0;bottom: 0;left: 600;right: 0;margin:auto;"></canvas>
+  </body>
+</html>
--- a/tools/3rs-orbit/index.js
+++ b/tools/3rs-orbit/index.js
@@ -0,0 +1,11 @@
+import init from './pkg/web.js';
+
+async function run() {
+    try {
+        await init();
+    } catch(e) {
+        console.error(e);
+    }
+}
+
+run();
--- a/tools/index.html
+++ b/tools/index.html
@@ -15,8 +15,10 @@
        <p>This is just a collection of tools or stuff I've made, out there for any to use.</p>
        <ul>
            <li><a href="qalc">qalc</a> - Popular libqalculate tool compiled for the web</li>
+            <li><a href="3rs-orbit">3rs-orbit</a> - Just <a href="https://github.com/javalsai/3rs-orbit/">a wasm project</a> built and hosted on my website to test it. Prob not the at the latest commit.</li>
        </ul>
    </main>
+    <!--# include virtual="/components/footer.html" -->
 </body>

 </html>
--- a/tools/qalc/index.html
+++ b/tools/qalc/index.html
@@ -19,6 +19,7 @@
            <a href="flaviut">live example</a>
        </p>
    </main>
+    <!--# include virtual="/components/footer.html" -->
 </body>

 </html>
Author	SHA1	Message	Date
javalsai	e5a16b20d4	add 3rs-orbit	2024-11-24 02:03:06 +01:00
javalsai	c3f4363091	make footer a shared component	2024-11-24 01:53:55 +01:00
javalsai	2d0ec47679	fix markdown css	2024-11-23 22:58:11 +01:00
javalsai	fd4463683d	no more flashbang 😔	2024-11-23 22:58:05 +01:00
javalsai	feec2fcef2	feat: nginx nice autoindex	2024-11-23 22:48:01 +01:00
javalsai	60ac1df123	chore: remove redundant repeated css imports	2024-11-23 22:47:36 +01:00