Add more HTML metadata, re-format some text

author: Jefferson Julio <[email protected]> 2021-05-31 19:16:12 -0300
committer: Jefferson Julio <[email protected]> 2021-05-31 19:16:12 -0300
commit: 9f5162371323562623bae42b0476bd8b9a4a5e92 (patch)
tree: 9375011fbff065938b1878cbf5198247a8a0dbbf
parent: 381bff129b70471e86e99a2d6b6a7e090f13287e (diff)
download: blog.sh-9f5162371323562623bae42b0476bd8b9a4a5e92.tar.bz2
blog.sh-9f5162371323562623bae42b0476bd8b9a4a5e92.zip
13 files changed, 97 insertions, 37 deletions
diff --git a/components/post-preview.sh b/components/post-preview.sh
index 2708060..9e5bb97 100755
--- a/components/post-preview.sh
+++ b/components/post-preview.sh
@@ -5,7 +5,7 @@ DO_NOT_PROCESS_HTML=true source $SCRIPT_DIR/utils/parse-article.sh
 cat <<POST
 <section class="post-preview">
   <div class="post-header-preview">
-    <h5 class="post-title">$ stat -c "%w" \\<br/> &gt;&ensp;$ARTICLE_FILE_SANITIZED</h5>
+    <h5 class="post-title"><a href="$ARTICLE_URL">$ARTICLE_FILE</a></h5>
     <small>$ARTICLE_BYTES</small> <br/>
     <time>$ARTICLE_TIME</time>
 
@@ -20,7 +20,7 @@ cat <<POST
 
   <p>$(strip-html-tags "$ARTICLE_CONTENT" | head -c 120)...</p>
 
-  <a href="/$ARTICLE_FILE">Ler artigo completo</a>
+  <a href="$ARTICLE_URL">Ler artigo completo</a>
 </section>
 POST
 
diff --git a/config.sh b/config.sh
index 4cfed05..cfc02c1 100755
--- a/config.sh
+++ b/config.sh
@@ -6,3 +6,8 @@
 
 # Folder where posts are stored, must be relative and suffed by a slash
 ARTICLES_PATH=artigos/
+
+# Supported article file extensions, must be separated by vertical bar
+# Exemple
+# ARTICLES_EXTS="txt|html|md"
+ARTICLES_EXTS="txt|html|md"
diff --git a/footer.sh b/footer.sh
index e7790cd..9ae32d6 100755
--- a/footer.sh
+++ b/footer.sh
@@ -11,13 +11,17 @@ cat <<FOOTER
   }
 
   #footer-command-prompt {
-    padding-top: 25px;
+    padding-top: 10px;
   }
 
   #footer-command-prompt h1 {
     padding: 0px;
     margin: 0px;
   }
+
+  #footer-command-prompt .after-prompt {
+    margin-top: 10px;
+  }
 </style>
 
 <footer>
@@ -25,11 +29,14 @@ cat <<FOOTER
   <p>
     Servidor HTTP: $SERVER_SOFTWARE <br />
     Gateway: $GATEWAY_INTERFACE <br />
-    Pré-processador HTML: GNU Bash $BASH_VERSION
+    Pré-processador HTML: GNU Bash $BASH_VERSION <br />
+    Este website também funciona com javascript desabilitado :3
   </p>
 
   <div id="footer-command-prompt">
-    <h1 class="header-title">$ <span class="text"></span><span class="cursor after-prompt">&ensp;</span></h1>
+    <h1 class="header-title">$ <span class="text"></span><span class="cursor">&ensp;</span></h1>
+
+    <div class="after-prompt">&ensp;</div>
   </div>
 </footer>
 FOOTER
diff --git a/index.sh b/index.sh
index 58d8f8e..cd60cc0 100755
--- a/index.sh
+++ b/index.sh
@@ -27,15 +27,24 @@ sanitize-filename () {
   echo "${1// /\\ }"
 }
 
+scape-regex () {
+  echo "$1" |
+    sed 's/(/\\(/g' |
+    sed 's/)/\\)/g' |
+    sed 's/|/\\|/g'
+}
+
 html () {
   cat <<HTML
+<!DOCTYPE html>
 <html lang="pt-br">
   <head>
     <meta charset="utf-8" />
     <title>jefferson.sh</title>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="icon" type="image/png" href="/static/favicon.png" />
     <link rel="stylesheet" href="/static/styles.css" />
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="/static/manifest.json" />
   </head>
 
   <body>
@@ -58,28 +67,18 @@ router () {
   case "$REQUEST_URI" in
     /)
       BODY=$(source ./pages/home.sh)
-    ;;
+      ;;
     /contato)
       HEADER_TITLE="source pages/contato.sh"
       HEADER_TITLE_MOBILE="$HEADER_TITLE"
       BODY=$(source ./pages/contato.sh)
       ;;
-    /$ARTICLES_PATH*.txt)
+    /$ARTICLES_PATH*)
       ARTICLE_FILE=.$REQUEST_URI
       HEADER_TITLE="ARTICLE_FILE=$(sanitize-filename "$ARTICLE_FILE");source pages/article.sh"
       HEADER_TITLE_MOBILE="ARTICLE_FILE=$(sanitize-filename "$ARTICLE_FILE");source pages/article.sh"
       BODY=$(source ./pages/article.sh)
       ;;
-    /json)
-      RESPONSE_CONTENT_TYPE="application/json"
-      STATUS=200
-      BODY=$(cat <<JSON
-{
-  "teste": "JSON"
-}
-JSON
-)
-      ;;
     *)
       STATUS=404
       HEADER_TITLE="REQUEST_FILE=.$(sanitize-filename "$REQUEST_URI");source page.sh"
diff --git a/nav.sh b/nav.sh
index 256b1e8..a0334d2 100755
--- a/nav.sh
+++ b/nav.sh
@@ -10,32 +10,35 @@ cat <<NAV
     height: 40px;
     width: calc(100% - 50px);
     align-items: center;
-    margin-left: 25px;
-    margin-right: 25px;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
   }
 
   .nav-header a {
     color: black;
     text-shadow: #e0e0e0 1px 1px 0;
-    font-size: 1.4rem;
+    font-size: 1.8rem;
     text-decoration: none;
   }
 
   .nav-links {
     padding: 0px 20px 0px 20px;
     align-self: center;
+    height: 100%;
   }
 
   .nav-links li {
     position: relative;
-    height: 100%;
-    display: inline-flex;
     align-items: center;
   }
 
   .nav-links a {
     color: var(--primary-bg);
     text-decoration: none;
+    display: block;
+    line-height: 40px;
   }
 
   .nav-links li:hover {
@@ -52,6 +55,11 @@ cat <<NAV
       flex-direction: column;
       height: auto;
       padding-bottom: 10px;
+      position: relative;
+    }
+
+    .nav-links {
+      height: auto;
     }
 
     .nav-header {
@@ -72,7 +80,11 @@ cat <<NAV
     .top-nav ul > li {
       width: 100%;
       height: 25px;
-      justify-content: center;
+      text-align: center;
+    }
+
+    .nav-links a {
+      line-height: 25px;
     }
   }
 </style>
diff --git a/pages/article.sh b/pages/article.sh
index 59a33b6..3cb5ab7 100755
--- a/pages/article.sh
+++ b/pages/article.sh
@@ -14,7 +14,7 @@ cat <<ARTICLE
 <article class="container">
   <section>
     <div class="post-header">
-      <h4 class="post-title">$ stat -c "%s %w %z" \\ <br/> &gt;&ensp;$ARTICLE_FILE_SANITIZED</h4>
+      <h4 class="post-title">$ARTICLE_FILE</h4>
       <small>$ARTICLE_BYTES</small> <br/>
       <time>$ARTICLE_TIME</time> <br/>
 
diff --git a/pages/home.sh b/pages/home.sh
index 02adf53..49094fc 100755
--- a/pages/home.sh
+++ b/pages/home.sh
@@ -3,20 +3,24 @@
 welcome () {
   cat <<WELCOME
 <section class="conainer" id="welcome">
-  <header>
+  <hgroup>
     <h1>Bem-vindo ao meu blog :3</h1>
-    <h4>Aqui mostro o meu trabalho e escrevo sobre programação.</h4>
-  </header>
+    <h4>Aqui escrevo sobre programação e mostro o meu trabalho.</h4>
+  </hgroup>
+  <hr/>
 </section>
 WELCOME
 }
 
-print-all-articles () {
+all-articles-sort-by-last-modification () {
   # Find all articles and sort by date of creation
+  cat <<HEADER
+  <h4>Últimas atividades</h4>
+HEADER
   IFS=';' read -ra ARTICLE_LIST <<< "$(
     find $ARTICLES_PATH \
       -type f \
-      -name '*.txt' \
+      -regex ".*\.$(scape-regex "($ARTICLES_EXTS)")" \
       -printf "%T@ %p\n" |
     sort -rn |
     cut -b 23- |
@@ -32,6 +36,6 @@ print-all-articles () {
 cat <<PAGE
 <article class="home-feed container">
   $(welcome)
-  $(print-all-articles)
+  $(all-articles-sort-by-last-modification)
 </article>
 PAGE
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..88ff931
--- /dev/null
+++ b/static/favicon.png
diff --git a/static/header.js b/static/header.js
index 06d868a..a3f6275 100644
--- a/static/header.js
+++ b/static/header.js
@@ -7,6 +7,22 @@ window.addEventListener('resize', () => {
   isMobile = window.innerWidth < 769;
 });
 
+function listenUserScroll(e) {
+  e.preventDefault();
+}
+
+function blockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'hidden';
+  window.addEventListener('mousewheel', listenUserScroll, { passive: false });
+  window.addEventListener('touchmove', listenUserScroll, { passive: false });
+}
+
+function unblockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'auto';
+  window.removeEventListener('mousewheel', listenUserScroll);
+  window.removeEventListener('touchmove', listenUserScroll);
+}
+
 function hideTopNav() {
   let topNav = document.querySelector('.top-nav');
   topNav.style.opacity = '0';
@@ -30,7 +46,7 @@ function showContent(cb) {
 
   topNav.style.transition = '100ms';
   topNav.style.opacity = '1';
-  topNav.style.display = 'block';
+  topNav.style.display = 'inline-flex';
 
   setTimeout(() => {
     mainContainer.style.transition = '500ms';
@@ -40,7 +56,12 @@ function showContent(cb) {
       footer.style.transition = '500ms';
       footer.style.opacity = '1';
       footer.style.display = 'block';
+      !isMobile ? topNav.style.position = 'sticky' : null;
       if (cb) cb();
+
+      if (topNav.getBoundingClientRect().top > 0 && window.scrollY == 0) {
+        topNav.scrollIntoView({ behavior: 'smooth' });
+      }
     }, 500);
   }, 100);
 }
@@ -91,8 +112,9 @@ function clearHeaderTerminal(cb) {
     titleDesktop.innerHTML = '';
   }
 
-  footerCommandPrompt.style.height = 'calc(100vh)';
-  hideTopNav();
+  blockUserScrolling();
+  footerCommandPrompt.style.height = 'calc(100vh + 70px)';
+  document.querySelector('.top-nav').style.position = 'relative';
   footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
     behavior: 'smooth',
   });
@@ -100,6 +122,7 @@ function clearHeaderTerminal(cb) {
   setTimeout(() => {
     if (cb) cb();
     footerCommandPrompt.style.height = 'auto';
+    unblockUserScrolling();
   }, 1000);
 }
 
diff --git a/static/manifest.json b/static/manifest.json
index b700497..f5c09f1 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -4,7 +4,7 @@
   "description": "Blog do Jefferson",
   "icons": [
     {
-      "src": "static/favicon.png",
+      "src": "/static/favicon.png",
       "sizes": "192x192",
       "type": "image/png"
     }
diff --git a/static/navigator.js b/static/navigator.js
index a4385fa..6d53ee5 100644
--- a/static/navigator.js
+++ b/static/navigator.js
@@ -27,6 +27,8 @@ function goToPage(url, cb) {
   pageTransitionAnimating = true;
   pageTransitionCleared = false;
 
+  blockUserScrolling();
+
   let footerCommandPrompt = document.querySelector('#footer-command-prompt .text');
   history.pushState({date: "new url -> " + url}, url, url);
 
diff --git a/static/styles.css b/static/styles.css
index d45bdd1..ce4aeb6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -158,7 +158,7 @@ html {
   background-color: var(--primary-bg);
   color: var(--primary-fg);
   font-family: 'VT323', monospace;
-  font-size: 16px;
+  font-size: 18px;
   position: relative;
   overflow: auto;
   /* scroll-behavior: smooth; */
@@ -189,6 +189,11 @@ html:before {
   pointer-events: none;
 }
 
+hr {
+  background-color: var(--primary-fg);
+  border-color: var(--primary-fg);
+}
+
 .separator-wrap {
   width: 100%;
   display: flex;
@@ -225,7 +230,7 @@ ul > li {
 }
 
 header, footer {
-  margin: 25px;
+  margin: 10px;
 }
 
 header > h1,
diff --git a/utils/parse-article.sh b/utils/parse-article.sh
index b64c0ff..836fd49 100755
--- a/utils/parse-article.sh
+++ b/utils/parse-article.sh
@@ -9,6 +9,9 @@ ARTICLE_FILE_CONTENT=$(cat "$ARTICLE_FILE")
 # The first 3 lines of the file are metadata information
 ARTICLE_METADATA=$(echo "$ARTICLE_FILE_CONTENT" | head -n 3)
 
+# URL path to article
+ARTICLE_URL="/$ARTICLE_FILE"
+
 source $SCRIPT_DIR/utils/parse-article-content.sh
 
 # Tags are placed on the first line of the file, delimited by commas
author	Jefferson Julio <[email protected]>	2021-05-31 19:16:12 -0300
committer	Jefferson Julio <[email protected]>	2021-05-31 19:16:12 -0300
commit	9f5162371323562623bae42b0476bd8b9a4a5e92 (patch)
tree	9375011fbff065938b1878cbf5198247a8a0dbbf
parent	381bff129b70471e86e99a2d6b6a7e090f13287e (diff)
download	blog.sh-9f5162371323562623bae42b0476bd8b9a4a5e92.tar.bz2 blog.sh-9f5162371323562623bae42b0476bd8b9a4a5e92.zip