add i18n

render.js

@@ -0,0 +1,34 @@
+import { getLocalizedText } from "./i18n.js"
+
+const renderItem = (site, language) => {
+  const title = getLocalizedText(site.title, language)
+  const description = getLocalizedText(site.description, language)
+  const iconName =
+    language === "meow" ? "noto--cat-face.svg" : site.icon
+  return `
+<a href="${site.url}" target="_blank" class="card">
+<div class="title-icon">
+${iconName ? `<img src="/icons/${iconName}" alt="${title}" class="icon" />` : ""}
+<h2>${title} &rarr;</h2>
+</div>
+<p>${description}</p>
+<p class="single">${site.url}</p>
+</a>
+`
+}
+
+const renderPin = (site, language) => {
+  const description = getLocalizedText(site.description, language)
+  return `
+<a href="${site.url}" target="_blank" class="card pin">
+  <p>${description}</p>
+</a>
+`
+}
+
+export function renderSites({ container, sites, pins, language }) {
+  if (!container) return
+  container.innerHTML =
+    pins.map((site) => renderPin(site, language)).join("") +
+    sites.map((site) => renderItem(site, language)).join("")
+}