Finalize links page

README.md

@@ -11,4 +11,5 @@ A bare-bones personal website relying only on simple scripts.
 - [ ] Create a custom syntax highlighting style 
   - See: <https://pandoc.org/chunkedhtml-demo/13-syntax-highlighting.html>
 - [x] Add an RSS feed
+  - [ ] Links RSS feed
 - [ ] Add tags

assets/js/data.js

@@ -19,7 +19,8 @@ function get_data() {
     "links": [
       {
         "title": "Capital Offense How to Handle Abbreviations in CamelCase - Approxion",
-        "url": "https://www.approxion.com/capital-offenses-how-to-handle-abbreviations-in-camelcase/"
+        "url": "https://www.approxion.com/capital-offenses-how-to-handle-abbreviations-in-camelcase/",
+        "date": "23/03/2024"
       }
     ]
   }

assets/js/links.js

@@ -6,13 +6,21 @@ function populate_links() {
     links.innerHTML = ''
     const item = document.createElement('li')
     const anchor = document.createElement('a')
+    const date = document.createElement('span')
     anchor.innerText = link.title
     anchor.href = link.url
+    date.innerText = `${parse_date(link.date)} - `
+    item.appendChild(date)
     item.appendChild(anchor)
     links.appendChild(item)
   })
 }
 
+function parse_date(date) {
+  current_year = new Date().getFullYear()
+  return date.replace(`/${current_year}`, '')
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   populate_links()
 })

assets/js/main-l10n.js

@@ -0,0 +1,67 @@
+const userLang = navigator.language || navigator.userLanguage
+let lang = userLang.includes('pt') ? 'pt' : 'en'
+
+function localize_menu() {
+  const home = document.getElementById('nav-menu-home')
+  const rss = document.getElementById('nav-menu-rss')
+
+  if (lang == 'pt') {
+    if (home) home.innerText = 'Início'
+    if (rss) rss.setAttribute('href', 'assets/rss/pt.rss')
+  } else {
+    if (home) home.innerText = 'Home'
+    if (rss) rss.setAttribute('href', 'assets/rss/en.rss')
+  }
+}
+
+function localize_navigation() {
+  const skip = document.getElementById('a11y-skip')
+  const post_list = document.getElementById('nav-posts')
+
+  if (lang == 'pt') {
+    if (skip) skip.innerText = 'Saltar para o conteúdo principal'
+    if (post_list) post_list.ariaLabel = 'Listagem de todas as postagens'
+  } else {
+    if (skip) skip.innerText = 'Skip to main content'
+    if (post_list) post_list.ariaLabel = 'Listing of all posts'
+  }
+}
+
+function localize_footer() {
+  const footer_back = document.getElementById('footer-back-link')
+
+  if (footer_back) {
+    if (lang == 'pt') {
+      footer_back.innerText = 'Voltar'
+    } else {
+      footer_back.innerText = 'Back'
+    }
+  }
+}
+
+const en_lang_swapper = document.getElementById('lang-swap-en')
+const pt_lang_swapper = document.getElementById('lang-swap-pt')
+
+if (en_lang_swapper) {
+  en_lang_swapper.addEventListener("click", () => {
+    lang = 'en'
+    populate_posts()
+    localize_navigation()
+    localize_menu()
+  })
+}
+
+if (pt_lang_swapper) {
+  pt_lang_swapper.addEventListener("click", () => {
+    lang = 'pt'
+    populate_posts()
+    localize_navigation()
+    localize_menu()
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  localize_navigation()
+  localize_menu()
+  localize_footer()
+})

assets/js/main.js

@@ -1,8 +1,5 @@
 const data = get_data()
 
-const userLang = navigator.language || navigator.userLanguage
-let lang = userLang.includes('pt') ? 'pt' : 'en'
-
 function populate_posts() {
   data.posts[lang].forEach(post => {
     const posts = document.getElementById('nav-posts')
@@ -25,51 +22,6 @@ function parse_date(date) {
     .replace(`/${current_year}`, '')
 }
 
-function localize_menu() {
-  const home = document.getElementById('nav-menu-home')
-  const rss = document.getElementById('nav-menu-rss')
-
-  if (lang == 'pt') {
-    home.innerText='Início'
-    rss.setAttribute('href', 'assets/rss/pt.rss')
-  } else {
-    home.innerText='Home'
-    rss.setAttribute('href', 'assets/rss/en.rss')
-  }
-}
-
-function localize_navigation() {
-  const skip = document.getElementById('a11y-skip')
-  const post_list = document.getElementById('nav-posts')
-
-  if (lang == 'pt') {
-    skip.innerText = 'Saltar para o conteúdo principal'
-    post_list.ariaLabel = 'Listagem de todas as postagens'
-  } else {
-    skip.innerText = 'Skip to main content'
-    post_list.ariaLabel = 'Listing of all posts'
-  }
-}
-
-const en_lang_swapper = document.getElementById('lang-swap-en')
-const pt_lang_swapper = document.getElementById('lang-swap-pt')
-
-en_lang_swapper.addEventListener("click", () => {
-  lang = 'en'
-  populate_posts()
-  localize_navigation()
-  localize_menu()
-})
-
-pt_lang_swapper.addEventListener("click", () => {
-  lang = 'pt'
-  populate_posts()
-  localize_navigation()
-  localize_menu()
-})
-
 document.addEventListener('DOMContentLoaded', () => {
   populate_posts()
-  localize_navigation()
-  localize_menu()
 })

assets/js/post-l10n.js

@@ -1,8 +1,6 @@
 const userLang = navigator.language || navigator.userLanguage
 let lang = userLang.includes('pt') ? 'pt' : 'en'
 
-console.log('post-l10n.js loaded:', lang)
-
 if (lang == 'pt') {
   const footer_back = document.getElementById('footer-back-link')
   const author_pre = document.getElementById('author-pre-text')

index.html

@@ -9,6 +9,7 @@
     <link rel="alternate" type="application/rss+xml" title="RSS (Português)" href="https://blog.jutty.dev/assets/rss/pt.rss"/>
     <link rel="icon" type="image/ico" href="assets/img/favicon.ico">
     <script src="assets/js/data.js"></script>
+    <script src="assets/js/main-l10n.js" defer></script>
     <script src="assets/js/main.js" defer></script>
   </head>
   <body>
@@ -35,7 +36,7 @@
         <li><a id="nav-menu-home" href="https://jutty.dev">Home</a></li>
         <li><a id="lang-swap-en" href="#">English</a></li>
         <li><a id="lang-swap-pt" href="#">Português</a></li>
-        <!--li><a id="nav-menu-links" href="pages/links.html">Links</a></li-->
+        <li><a id="nav-menu-links" href="pages/links.html">Links</a></li>
         <li><a id="nav-menu-rss" href="https://blog.jutty.dev/assets/rss/en.rss">RSS</a></li>
         <li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
       </ul>

pages/links.html

@@ -8,6 +8,7 @@
     <!--link rel="alternate" type="application/rss+xml" title="RSS (Links)" href="https://blog.jutty.dev/assets/rss/links.rss"/-->
     <link rel="icon" type="image/ico" href="../assets/img/favicon.ico">
     <script src="../assets/js/data.js"></script>
+    <script src="../assets/js/main-l10n.js"></script>
     <script src="../assets/js/links.js" defer></script>
   </head>
   <body>
@@ -15,4 +16,12 @@
       <ul id="links"></ul>
     </main>
   </body>
+  <footer>
+    <hr/>
+    <div class="footer-text">
+      <span class="footer-back" aria-role="nav" aria-label="Navigate back">
+        ↩ <a id="footer-back-link" href="../index.html">Back</a>
+      </span>
+    </div>
+  </footer>
 </html>