Implement RSS localization

assets/js/data.js

@@ -1,23 +1,22 @@
 function get_data() {
   return {
-    pt: {
+    "pt": {
-      posts: [
+      "posts": [
         {
-          title: "Scripts em OCaml",
+          "title": "Scripts em OCaml",
-          slug: "scripts-em-ocaml",
+          "slug": "scripts-em-ocaml",
-          date: "23/03/2024",
+          "date": "23/03/2024"
-        },
+        }
       ]
     },
-    en: {
+    "en": {
-      posts: [
+      "posts": [
         {
-          title: "Hello, Worldling",
+          "title": "Hello, Worldling",
-          slug: "hello-worldling",
+          "slug": "hello-worldling",
-          date: "May 20, 2024",
+          "date": "May 20, 2024"
-        },
+        }
       ]
     }
   }
 }
-

assets/js/main.js

@@ -1,11 +1,12 @@
 const data = get_data()
-const post_list = document.getElementById('posts')
 
 const userLang = navigator.language || navigator.userLanguage
 let lang = userLang.includes('pt') ? 'pt' : 'en'
 
-document.addEventListener('DOMContentLoaded', function() {
+function populate_posts() {
   data[lang].posts.forEach(post => {
+    const posts = document.getElementById('nav-posts')
+    posts.innerHTML = ''
     const item = document.createElement('li')
     const anchor = document.createElement('a')
     const date = document.createElement('span')
@@ -14,9 +15,9 @@ document.addEventListener('DOMContentLoaded', function() {
     date.innerText = `${parse_date(post.date)} - `
     item.appendChild(date)
     item.appendChild(anchor)
-    post_list.appendChild(item)
+    posts.appendChild(item)
   })
-})
+}
 
 function parse_date(date) {
   current_year = new Date().getFullYear()
@@ -24,3 +25,35 @@ 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', 'pt.rss')
+  } else {
+    home.innerText='Home'
+    rss.setAttribute('href', 'en.rss')
+  }
+}
+
+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_menu()
+})
+
+pt_lang_swapper.addEventListener("click", () => {
+  lang = 'pt'
+  populate_posts()
+  localize_menu()
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+  populate_posts()
+  localize_menu()
+})

assets/style.css

@@ -15,6 +15,11 @@ html {
   color: #888
 }
 
+#nav-menu li {
+  display: inline-block;
+  margin-left: 20px;
+}
+
 p {
   margin: 30px;
 }
@@ -46,8 +51,8 @@ h2 {
   margin: 20px 0px 10px 20px;
 }
 
-ul {
+#nav-posts {
-  margin-top: 10px;
+  margin-top: 40px;
   color: #F1E9E5;
 }
 

en.rss

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf8"?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+  <channel>
+    <title>jutty.dev: Blog</title>
+    <link>http://blog.jutty.dev/</link>
+    <atom:link href="https://blog.jutty.dev/feed.rss" rel="self" type="application/rss+xml"/>
+    <description>jutty.dev: Blog</description>
+    <language>en-us</language>
+    <lastBuildDate>Mon, 20 May 2024 12:06:59 -0300</lastBuildDate>
+    <docs>https://www.rssboard.org/rss-specification</docs>
+    <item>
+      <title>Hello, Worldling</title>
+      <pubDate>Mon, 20 May 2024 12:06:59 -0300</pubDate>
+      <link>https://blog.jutty.dev/posts/hello-worldling.html</link>
+      <guid>https://blog.jutty.dev/posts/hello-worldling.html</guid>
+      <author>juno@jutty.dev (Juno Takano)</author>
+    </item>
+  </channel>
+</rss>

index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>jutty.dev</title>
     <link href="assets/style.css" rel="stylesheet">
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.jutty.dev/feed.rss"/>
+    <link rel="alternate" type="application/rss+xml" title="RSS (English)" href="https://blog.jutty.dev/en.rss"/>
+    <link rel="alternate" type="application/rss+xml" title="RSS (Português)" href="https://blog.jutty.dev/pt.rss"/>
     <script src="assets/js/data.js"></script>
     <script src="assets/js/main.js" defer></script>
   </head>
@@ -28,7 +29,14 @@
       </pre>
     </header>
     <nav>
-      <ul id="posts"></ul>
+      <ul id="nav-menu">
+        <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-rss" href="https://blog.jutty.dev/en.rss">RSS</a></li>
+        <li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
+      </ul>
+      <ul id="nav-posts"></ul>
     </nav>
   </body>
 </html>

posts/hello-worldling.html

@@ -17,7 +17,8 @@
     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
   </style>
   <link rel="stylesheet" href="../assets/style.css" />
-  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.jutty.dev/feed.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (English)" href="https://blog.jutty.dev/en.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (Português)" href="https://blog.jutty.dev/pt.rss"/>
   <script src="../assets/js/post-l10n.js" defer></script>
 </head>
 <body>

posts/scripts-em-ocaml.html

@@ -78,7 +78,8 @@
     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
   </style>
   <link rel="stylesheet" href="../assets/style.css" />
-  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.jutty.dev/feed.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (English)" href="https://blog.jutty.dev/en.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (Português)" href="https://blog.jutty.dev/pt.rss"/>
   <script src="../assets/js/post-l10n.js" defer></script>
 </head>
 <body>

posts/template.html

@@ -23,7 +23,8 @@ $endif$
 $for(css)$
   <link rel="stylesheet" href="$css$" />
 $endfor$
-  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.jutty.dev/feed.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (English)" href="https://blog.jutty.dev/en.rss"/>
+  <link rel="alternate" type="application/rss+xml" title="RSS (Português)" href="https://blog.jutty.dev/pt.rss"/>
   <script src="../assets/js/post-l10n.js" defer></script>
 $for(header-includes)$
   $header-includes$

pt.rss

@@ -6,7 +6,7 @@
     <atom:link href="https://blog.jutty.dev/feed.rss" rel="self" type="application/rss+xml"/>
     <description>jutty.dev: Blog</description>
     <language>pt-br</language>
-    <lastBuildDate>Sun, 19 May 2024 21:11:05 -0300</lastBuildDate>
+    <lastBuildDate>Mon, 20 May 2024 12:06:59 -0300</lastBuildDate>
     <docs>https://www.rssboard.org/rss-specification</docs>
     <item>
       <title>Scripts em OCaml</title>

update-feed.zsh

@@ -2,12 +2,13 @@
 # dependencies: zsh, xmlstarlet, xmllint
 
 date="$(date +'%a, %d %b %Y %H:%M:%S %z')"
+data='assets/js/data.js'
 
 function subnode {
   local -r tag="${1}"
   local -r value="${2}"
   local path="${3:-rss/channel/new}"
-  local -r file="${4:-feed2.rss}"
+  local -r file="${4:-tmp.rss}"
 
   if [[ -n $value ]]; then
     /usr/bin/xmlstarlet ed -L --subnode "$path" -t elem -n "$tag" -v "$value" "$file"
@@ -19,14 +20,15 @@ function subnode {
 function insert {
   local -r title="$1"
   local -r slug="${2}.html"
+  local -r file="${3}"
   local -r url_root='https://blog.jutty.dev/posts'
   local -r author='juno@jutty.dev (Juno Takano)'
 
-  if grep -q "$url_root/$slug" feed.rss; then
+  if grep -q "$url_root/$slug" "$file"; then
     return 0
   fi
 
-  xmlstarlet ed --update rss/channel/lastBuildDate --value "$date" feed.rss > feed2.rss
+  xmlstarlet ed --update rss/channel/lastBuildDate --value "$date" "$file" > tmp.rss
 
   subnode new '' rss/channel
   subnode title "$title"
@@ -35,27 +37,50 @@ function insert {
   subnode guid "$url_root/$slug"
   subnode author "$author"
 
-  sed -i 's/<new>/<item>/g' feed2.rss
+  sed -i 's/<new>/<item>/g' tmp.rss
-  sed -i 's/<\/new>/<\/item>/g' feed2.rss
+  sed -i 's/<\/new>/<\/item>/g' tmp.rss
 
-  if xmllint --noout feed2.rss; then
+  if xmllint --noout tmp.rss; then
-    mv -v feed2.rss feed.rss
+    mv -v tmp.rss "$file"
   else
     echo 'Generated an invalid feed, not overwriting'
-    rm -vf feed2.rss
+    rm -v tmp.rss
     return 1
   fi
 
 }
 
-index="$(cat assets/js/data.js | grep 'title\|slug' | sed 's/,/\n/g' | grep '.')"
+function assemble_index {
-total=$(echo $index | wc -l)
+  local -r lang="$1"
 
-current=2
+  cat "$data" |
-while [[ $current -le $total ]]; do
+    grep -v function |
-  lines=$(echo $index | tail -$((current)) | head -2)
+    sed 's/ *return //' |
-  title=$(echo $lines | grep title: | cut -d: -f 2 | xargs)
+    sed -E ':a;N;$!ba; s/(.*)\}(.*)/\1\2/' |
-  slug=$(echo $lines | grep slug: | cut -d: -f 2 | xargs)
+    jq ".$lang" |
-  insert "$title" "$slug"
+    grep 'title\|slug' |
-  ((current+=2))
+    grep '.'
-done
+}
+
+index_en=$(assemble_index en)
+index_pt=$(assemble_index pt)
+
+function insert_from {
+  local -r index="$1"
+  local -r file="$2"
+  local -r total=$(echo $index | wc -l)
+  local title
+  local slug
+
+  current=2
+  while [[ $current -le $total ]]; do
+    lines=$(echo $index | tail -$((current)) | head -2)
+    title=$(echo $lines | grep title | cut -d'"' -f 4 | xargs)
+    slug=$(echo $lines | grep slug | cut -d'"' -f 4 | xargs)
+    insert "$title" "$slug" "$file"
+    ((current+=2))
+  done
+}
+
+insert_from "$index_pt" pt.rss
+insert_from "$index_en" en.rss