Better article parsing, support for article code parsing (add line numbers to code blocks)

4 files changed, 129 insertions, 3 deletions

diff --git a/static/key-press.mp3 b/static/key-press.mp3
new file mode 100644
index 0000000..c52f485
--- /dev/null
+++ b/static/key-press.mp3
diff --git a/static/manifest.json b/static/manifest.json
new file mode 100644
index 0000000..b700497
--- /dev/null
+++ b/static/manifest.json
@@ -0,0 +1,15 @@
+{
+  "name": "jefferson.sh",
+  "short_name": "jefferson.sh",
+  "description": "Blog do Jefferson",
+  "icons": [
+    {
+      "src": "static/favicon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "display": "fullscreen",
+  "start_url": "/",
+  "orientation": "portrait"
+}
diff --git a/static/navigator.js b/static/navigator.js
new file mode 100644
index 0000000..a4385fa
--- /dev/null
+++ b/static/navigator.js
@@ -0,0 +1,87 @@
+let pageTransitionLock = false;
+let pageTransitionAnimating = false;
+let pageTransitionCleared = false;
+
+function bindAllRelativeAnchors() {
+  document.querySelectorAll('a[href^="/"]:not([navigator-bind])').forEach((el) => {
+    el.setAttribute('navigator-bind', 'true');
+    el.addEventListener('click', (e) => {
+      e.preventDefault();
+      goToPage((new URL(e.target.href)).pathname);
+    });
+  });
+}
+
+function showContentIfPageIsLoaded () {
+  if (!pageTransitionLock) {
+    showContent(() => {
+      pageTransitionAnimating = false;
+      bindAllRelativeAnchors();
+    });
+  }
+}
+
+function goToPage(url, cb) {
+  if (pageTransitionLock) return;
+  pageTransitionLock = true;
+  pageTransitionAnimating = true;
+  pageTransitionCleared = false;
+
+  let footerCommandPrompt = document.querySelector('#footer-command-prompt .text');
+  history.pushState({date: "new url -> " + url}, url, url);
+
+  fetch(url).then((response) => {
+    response.text().then(html => {
+      let parser = new DOMParser();
+      let htmlDOM = parser.parseFromString(html, 'text/html');
+
+      let mainContainer = document.querySelector('main');
+
+      function swapHTMLContent() {
+        if (!pageTransitionCleared) {
+          window.requestAnimationFrame(swapHTMLContent);
+          return;
+        }
+
+        mainContainer.innerHTML = '';
+        mainContainer.innerHTML = htmlDOM.querySelector('main').innerHTML;
+        if (headerAnimationTerminated) showContent(bindAllRelativeAnchors);
+        pageTransitionLock = false;
+      }
+
+      swapHTMLContent();
+    });
+  });
+
+  typingAnimation(
+    footerCommandPrompt,
+    'clear',
+    0,
+    () => {
+      clearHeaderTerminal(() => {
+        hideContent();
+        pageTransitionCleared = true;
+        footerCommandPrompt.innerHTML = '';
+        if (url == "/") {
+          headerTerminalExecute(
+            "source jefferson.sh",
+            "source jefferson.sh",
+            showContentIfPageIsLoaded,
+          );
+        } else if (url == "/contato") {
+          headerTerminalExecute(
+            "source pages/contato.sh",
+            "source pages/contato.sh",
+            showContentIfPageIsLoaded,
+          );
+        } else if (url.match(/\/artigos/)) {
+          headerTerminalExecute(
+            `ARTICLE_FILE=.${decodeURI(url).replace(' ', '\\ ')};source pages/article.sh`,
+            `ARTICLE_FILE=.${decodeURI(url).replace(' ', '\\ ')};source pages/article.sh`,
+            showContentIfPageIsLoaded,
+          );
+        }
+      });
+    }
+  );
+}
diff --git a/static/styles.css b/static/styles.css
index e84dc56..d45bdd1 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -275,7 +275,7 @@ header > h2 {
   }
 
   .pad-left, .pad-right {
-    width: 215px;
+    width: 180px;
   }
 }
 
@@ -347,13 +347,37 @@ header > h2 {
   border-radius: 8px;
 }
 ::-webkit-scrollbar-thumb:hover{
-  background: var(--primary-bg);
+  background: #059233;
 }
 ::-webkit-scrollbar-track{
   background: var(--primary-bg);
   border-radius: 7px;
 }
 
-::-webkit-scrollbar-track:hover {
+*::selection {
   background: var(--primary-fg);
+  color: var(--primary-bg);
+}
+
+*::-moz-selection {
+  background: var(--primary-fg);
+  color: var(--primary-bg);
+}
+
+pre {
+ counter-reset: line;
+ display: block;
+ border: 1px solid;
+ padding: 4px;
+}
+
+code {
+  counter-increment: line;
+}
+
+code:before {
+  content: counter(line);
+  margin-right: 8px;
+  margin-left: 4px;
+  -webkit-user-select: none;
 }