moracarta 2.1.1 → 2.1.3

package/README.md

@@ -5,7 +5,7 @@
 [![npm version](https://img.shields.io/npm/v/moracarta)](https://www.npmjs.com/package/moracarta)
 [![npm downloads](https://img.shields.io/npm/dt/moracarta)](https://www.npmjs.com/package/moracarta)
 
-🌐 **[Live Demo](https://moracarta.pages.dev/)**
+🌐 **[Live Demo - Latest Stable Branch](https://moracarta.pages.dev/)** | 🛠️ **[Live Demo - Development Branch](https://development.moracarta.pages.dev/)**
 
 ## Features
 
@@ -21,10 +21,16 @@
 
 ```bash
 npm i moracarta
-moracarta setup
-moracarta build
-moracarta deploy
+npx moracarta setup
+npx moracarta build
+npx moracarta deploy
 ```
+### What each command does
+
+- `npm i moracarta` installs Moracarta as a dependency in your project.
+- `npx moracarta setup` sets up Moracarta and lets you configure the website.
+- `npx moracarta build` builds your website using your configured letters and settings.
+- `npx moracarta deploy` deploys the finished website for free.
 
 ### App Demo
 <p align="center">
@@ -35,7 +41,7 @@ moracarta deploy
 ### Setup Demo
 
 <img src="public/assets/images/setup-demo.png" width="100%">
-<br><br>
+<br>
 
 ## That's it.
 

package/index.html

@@ -26,6 +26,6 @@
     <p data-variable="YOUR_NAME"></p>
   </div>
   
-  <script type="module" src="src/scripts/main.script.js"></script>
-  <script type="module" src="src/scripts/data.variable.js"></script>
+  <script type="module" src="src/scripts/main.js"></script>
+  <script type="module" src="src/scripts/templateBinding.js"></script>
 </html>

package/package.json

@@ -1,26 +1,38 @@
 {
   "name": "moracarta",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "type": "module",
   "description": "",
+  "license": "MIT",
   "main": "index.js",
+  "keywords": [
+    "cli",
+    "scaffold",
+    "static-site",
+    "cloudflare",
+    "wrangler",
+    "gift",
+    "envelope",
+    "letters",
+    "romantic",
+    "html-css-js"
+  ],
   "files": [
     "index.html",
     "vite.config.mjs",
     "public",
     "src/commands",
     "src/config/fonts.js",
-    "src/data/letters.example.js",
-    "src/data/lettersLoader.js",
-    "src/i18n",
+    "src/content/letters.example.js",
+    "src/loaders/lettersLoader.js",
     "src/scripts",
     "src/services",
     "src/styles",
     "src/views"
   ],
-  "postinstall": "node src/commands/postinstall.js",
+  "postinstall": "node src/commands/postInstall.js",
   "bin": {
-    "moracarta": "src/commands/cliConfig.js"
+    "moracarta": "src/config/cliConfig.js"
   },
   "scripts": {
     "setup": "node src/commands/setup.js",
@@ -34,13 +46,11 @@
     "type": "git",
     "url": "git+https://github.com/WesleyHanauer/moracarta.git"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "author": "Wesley Hanauer",
   "bugs": {
     "url": "https://github.com/WesleyHanauer/moracarta/issues"
   },
-  "homepage": "https://github.com/WesleyHanauer/moracarta#readme",
+  "homepage": "https://moracarta.pages.dev",
   "dependencies": {
     "@inquirer/prompts": "^8.6.0",
     "vite": "^8.2.2",

package/src/commands/add.js

@@ -11,7 +11,7 @@ import { getDocumentText } from "../services/googleDocs.js";
 const DATA_DIRECTORY = resolve(
     process.cwd(),
     "src",
-    "data"
+    "content"
 );
 
 const LETTERS_FILE = resolve(
@@ -76,7 +76,7 @@ ${letterObject}
 
     if (closingIndex === -1) {
         throw new Error(
-            "Could not find the end of the letters array in src/data/letters.js."
+            "Could not find the end of the letters array in src/content/letters.js."
         );
     }
 

package/src/commands/deploy.js

@@ -4,12 +4,12 @@ import { execSync } from "node:child_process";
 import { resolve } from "node:path";
 import { pathToFileURL } from "node:url";
 
-const configPath = resolve(process.cwd(), "src", "config", "globalVariables.js");
+const dataPath = resolve(process.cwd(), "src", "config", "globalVariables.js");
 
 let globalVariables;
 
 try {
-    ({ default: globalVariables } = await import(pathToFileURL(configPath).href));
+    ({ default: globalVariables } = await import(pathToFileURL(dataPath).href));
 } catch (error) {
     if (error.code === "ERR_MODULE_NOT_FOUND") {
         console.error("\n✗ No configuration found. Run moracarta setup first.");

package/src/commands/remove.js

@@ -7,7 +7,7 @@ import { resolve } from "node:path";
 const LETTERS_FILE = resolve(
     process.cwd(),
     "src",
-    "data",
+    "content",
     "letters.js"
 );
 
@@ -32,7 +32,7 @@ function extractLetters(lettersFile) {
 
     if (!match) {
         throw new Error(
-            "Could not find the letters array in src/data/letters.js."
+            "Could not find the letters array in src/content/letters.js."
         );
     }
 

package/src/commands/setup.js

@@ -11,17 +11,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PACKAGE_ROOT = resolve(__dirname, "..", "..");
 
-/** TODO
-const LANGUAGE = await select({
-    message: "What is the main language of the application?",
-    choices: [
-        { name: "English", value: "en" },
-        { name: "Português (Brasil)", value: "pt-BR" }
-    ]
-});
-*/
-const LANGUAGE = "en";
-
 const PROJECT_NAME = await input({
     message: "What should your project be called? (Cloudflare project name, do not use 'moracarta')",
     default: "romantic-gift",
@@ -137,8 +126,6 @@ const config = `/**
  * This file was generated automatically by Moracarta setup.
  */
 
-const LANGUAGE = ${JSON.stringify(LANGUAGE)};
-
 const PROJECT_NAME = ${JSON.stringify(PROJECT_NAME)};
 const TITLE = ${JSON.stringify(TITLE)};
 
@@ -155,7 +142,6 @@ const CLOSED_LETTER_TEXT_BOTTOM_LINE =
     ${JSON.stringify(CLOSED_LETTER_TEXT_BOTTOM_LINE)};
 
 const globalVariables = {
-    LANGUAGE,
     PROJECT_NAME,
     TITLE,
     YOUR_NAME,
@@ -169,15 +155,15 @@ const globalVariables = {
 export default globalVariables;
 `;
 
-const configPath = resolve(
+const dataPath = resolve(
     process.cwd(),
     "src",
     "config",
     "globalVariables.js"
 );
 
-await mkdir(dirname(configPath), { recursive: true });
-await writeFile(configPath, config, "utf8");
+await mkdir(dirname(dataPath), { recursive: true });
+await writeFile(dataPath, config, "utf8");
 
 /**
  * Files that make up the actual site. These get copied out of the
@@ -189,9 +175,8 @@ const TEMPLATE_ENTRIES = [
     "vite.config.mjs",
     "public",
     "src/config/fonts.js",
-    "src/data/letters.example.js",
-    "src/data/lettersLoader.js",
-    "src/i18n",
+    "src/content/letters.example.js",
+    "src/loaders/lettersLoader.js",
     "src/scripts",
     "src/services",
     "src/styles",
@@ -253,5 +238,5 @@ await copyTemplateFiles();
 await ensureModuleType();
 
 console.log("\n❤️ Moracarta setup complete!");
-console.log(`Configuration saved to: ${configPath}`);
+console.log(`Configuration saved to: ${dataPath}`);
 console.log("Run moracarta dev to test the application");

package/src/{data → content}/letters.example.js

@@ -24,5 +24,25 @@ Peter Parker`
 
 With all my love,
 Peter Parker`
+  },
+  {
+    id: 3,
+    date: 'Aug 31, 2026',
+    title: 'Custom Letter Title 3',
+    content: `Dear Mary Jane,
+    Sometimes I wonder how I got so lucky to have you in my life. Between all the chaos, the late nights, and everything I have to keep hidden, you're always the person who makes me feel like I can just be Peter. You make even the hardest days feel a little lighter, and I hope you know how much that means to me.
+    I know I don't always have the time or the words to explain how I feel, but I want you to know that you're always on my mind. No matter how far I swing, no matter how crazy things get, there's always a part of me that wants to come home to you. You're not just someone I love, MJ. You're my favorite part of being Peter Parker.
+Love,
+Peter Parker`
+  },
+  {
+    id: 4,
+    date: 'Aug 31, 2026',
+    title: 'Custom Letter Title 4',
+    content: `Dear MJ,
+    There are so many things I wish I could tell you, but somehow every time I try, the words never seem to be enough. You're the person who sees me when I don't even know how to see myself. When everything feels overwhelming, just hearing your voice reminds me that maybe things aren't as hopeless as they seem.
+    I know I've made mistakes, and I know I've kept things from you that I probably shouldn't have. But through all of it, you've stayed by my side. You make me want to be better—not because you expect me to be perfect, but because being with you makes me want to become someone worthy of the way you believe in me.
+Love,
+Peter`
   }
 ];

package/src/loaders/lettersLoader.js

@@ -0,0 +1,7 @@
+const modules = import.meta.glob("../content/letters*.js", {
+  eager: true,
+  import: "letters",
+});
+
+export const letters =
+  modules["../content/letters.js"] ?? modules["../content/letters.example.js"];

package/src/scripts/{letters.script.js → letters.js}

@@ -1,5 +1,4 @@
-import { getTranslation } from './i18n.js';
-import { letters } from '../data/lettersLoader.js';
+import { letters } from '../loaders/lettersLoader.js';
 
 console.log('letters.script loaded');
 
@@ -99,17 +98,17 @@ if (!letter) {
   const previousLetter = currentIndex > 0 ? sortedLetters[currentIndex - 1] : null;
   const nextLetter = currentIndex < sortedLetters.length - 1 ? sortedLetters[currentIndex + 1] : null;
 
-  document.getElementById('letter-counter').textContent = `${currentIndex + 1} ${getTranslation('OF')} ${sortedLetters.length}`;
+  document.getElementById('letter-counter').textContent = `${currentIndex + 1} Of ${sortedLetters.length}`;
 
   if (previousLetter) {
     const previousButton = document.getElementById('nav-previous');
-    previousButton.href = `./letters.view.html?id=${previousLetter.id}`;
+    previousButton.href = `./letters.html?id=${previousLetter.id}`;
     previousButton.classList.remove('invisible');
   }
 
   if (nextLetter) {
     const nextButton = document.getElementById('nav-next');
-    nextButton.href = `./letters.view.html?id=${nextLetter.id}`;
+    nextButton.href = `./letters.html?id=${nextLetter.id}`;
     nextButton.classList.remove('invisible');
   }
 

package/src/scripts/lettersPage.js

@@ -0,0 +1,256 @@
+import { letters } from '../loaders/lettersLoader.js';
+
+console.log('letters.script loaded');
+
+const params = new URLSearchParams(window.location.search);
+const requestedId = parseInt(params.get('id'), 10);
+const letter = letters.find((entry) => entry.id === requestedId);
+
+// A set of base color families used to generate a unique yet consistent
+// envelope palette for each letter based on its id, title, and date.
+const paletteFamilies = [
+  { hue: 18, sat: 54, light: 88, sealHue: 345, sealSat: 76, sealLight: 42 },
+  { hue: 26, sat: 48, light: 86, sealHue: 12, sealSat: 72, sealLight: 38 },
+  { hue: 4, sat: 50, light: 84, sealHue: 5, sealSat: 78, sealLight: 34 },
+  { hue: 38, sat: 42, light: 90, sealHue: 24, sealSat: 66, sealLight: 36 },
+  { hue: 8, sat: 58, light: 86, sealHue: 6, sealSat: 82, sealLight: 30 },
+  { hue: 12, sat: 50, light: 88, sealHue: 11, sealSat: 74, sealLight: 33 },
+  { hue: 22, sat: 46, light: 92, sealHue: 20, sealSat: 68, sealLight: 40 },
+  { hue: 16, sat: 60, light: 84, sealHue: 5, sealSat: 86, sealLight: 32 },
+  { hue: 28, sat: 52, light: 90, sealHue: 15, sealSat: 70, sealLight: 38 },
+  { hue: 14, sat: 44, light: 88, sealHue: 8, sealSat: 80, sealLight: 36 }
+];
+
+function hashString(value) {
+  // Simple deterministic string hash used to select a palette and variant.
+  // This keeps each letter appearance stable across page loads.
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) - hash) + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function generatePalette(letterItem) {
+  // Build a deterministic palette based on the letter's identity.
+  // The base hash selects one of the palette families, while the variant
+  // arrays add subtle shifts to keep similar letters visually distinct.
+  const baseHash = hashString(`${letterItem.id}|${letterItem.title}|${letterItem.date}`);
+  const family = paletteFamilies[baseHash % paletteFamilies.length];
+  const variant = Math.floor(baseHash / paletteFamilies.length) % 7;
+  const hueShift = [0, 14, -12, 20, -18, 26, -22][variant];
+  const satShift = [0, 8, -6, 12, -10, 14, -8][variant];
+  const lightShift = [0, -8, 8, -5, 6, -10, 10][variant];
+
+  const envelope = `hsl(${clamp(family.hue + hueShift, 0, 360)}, ${clamp(family.sat + satShift, 42, 72)}%, ${clamp(family.light + lightShift, 78, 92)}%)`;
+  const flap = `hsl(${clamp(family.hue + hueShift + 2, 0, 360)}, ${clamp(family.sat + satShift + 8, 50, 82)}%, ${clamp(family.light - 18 + lightShift, 60, 76)}%)`;
+  const shadow = `hsl(${clamp(family.hue + hueShift + 8, 0, 360)}, ${clamp(family.sat + satShift - 12, 30, 58)}%, ${clamp(family.light - 36 + lightShift, 42, 58)}%)`;
+  const base = `hsl(${clamp(family.hue + hueShift + 8, 0, 360)}, ${clamp(family.sat + satShift - 10, 30, 58)}%, ${clamp(family.light - 30 + lightShift, 44, 62)}%)`;
+  const seal = `hsl(${clamp(family.sealHue + hueShift, 0, 360)}, ${clamp(family.sealSat + satShift, 68, 92)}%, ${clamp(family.sealLight + lightShift * 0.8, 28, 46)}%)`;
+  const text = `hsl(${family.hue}, 22%, 18%)`;
+
+  return { envelope, flap, shadow, base, seal, text };
+}
+
+function applyEnvelopePalette(letterItem) {
+  const palette = generatePalette(letterItem);
+  document.querySelector('.env-fundo').style.background = palette.envelope;
+
+  const flapPolygon = document.querySelector('.env-aba svg polygon');
+  if (flapPolygon) {
+    flapPolygon.setAttribute('fill', palette.flap);
+  }
+
+  const sidePolygons = document.querySelectorAll('.env-corpo-svg svg polygon');
+  if (sidePolygons.length === 3) {
+    sidePolygons[0].setAttribute('fill', palette.shadow);
+    sidePolygons[1].setAttribute('fill', palette.shadow);
+    sidePolygons[2].setAttribute('fill', palette.base);
+  }
+}
+
+if (!letter) {
+  document.getElementById('error-message').style.display = 'block';
+  document.getElementById('envelope-wrap').style.display = 'none';
+  document.getElementById('letter-wrap').style.display = 'none';
+  document.getElementById('letter-nav').style.display = 'none';
+} else {
+  document.title = letter.title;
+
+  document.getElementById('letter-date').textContent = letter.date;
+  document.getElementById('letter-title').textContent = letter.title;
+  document.getElementById('letter-body').innerHTML = letter.content
+      .split(/\n\s*\n/)
+      .filter(paragraph => paragraph.trim())
+      .map(paragraph => `<p>${paragraph.trimEnd()}</p>`)
+      .join('');
+
+  applyEnvelopePalette(letter);
+  document.querySelector('.envelope-stage').classList.add('ready');
+
+  const sortedLetters = letters.slice().sort((first, second) => first.id - second.id);
+  const currentIndex = sortedLetters.findIndex((entry) => entry.id === requestedId);
+  const previousLetter = currentIndex > 0 ? sortedLetters[currentIndex - 1] : null;
+  const nextLetter = currentIndex < sortedLetters.length - 1 ? sortedLetters[currentIndex + 1] : null;
+
+  document.getElementById('letter-counter').textContent = `${currentIndex + 1} Of ${sortedLetters.length}`;
+
+  if (previousLetter) {
+    const previousButton = document.getElementById('nav-previous');
+    previousButton.href = `./letters.html?id=${previousLetter.id}`;
+    previousButton.classList.remove('invisible');
+  }
+
+  if (nextLetter) {
+    const nextButton = document.getElementById('nav-next');
+    nextButton.href = `./letters.html?id=${nextLetter.id}`;
+    nextButton.classList.remove('invisible');
+  }
+
+  startHeartAnimation();
+
+  // Animate the envelope opening, sealing, and letter reveal in timed stages.
+  window.setTimeout(() => {
+    document.getElementById('flap').classList.add('open');
+    document.getElementById('seal').classList.add('fading');
+  }, 400);
+
+  window.setTimeout(() => {
+    document.getElementById('flap').classList.add('behind');
+  }, 1050);
+
+  window.setTimeout(() => {
+    document.getElementById('paper').classList.add('leaving');
+  }, 900);
+
+  window.setTimeout(() => {
+    document.getElementById('letter-wrap').classList.add('visible');
+    document.getElementById('letter-nav').classList.add('visible');
+    document.getElementById('envelope-wrap').style.display = 'none';
+
+  }, 2100);
+}
+
+function startHeartAnimation() {
+  // Floating heart particle animation for the letter view background.
+  // Particles are born after a delay, float upward, fade at the top, and die
+  // when they leave the canvas to keep the animation visually light.
+  const canvas = document.getElementById('canvas-hearts');
+  const context = canvas.getContext('2d');
+  const devicePixelRatio = window.devicePixelRatio || 1;
+
+  canvas.width = window.innerWidth * devicePixelRatio;
+  canvas.height = window.innerHeight * devicePixelRatio;
+  canvas.style.width = `${window.innerWidth}px`;
+  canvas.style.height = `${window.innerHeight}px`;
+  context.scale(devicePixelRatio, devicePixelRatio);
+
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const colors = ['#c0392b', '#e74c3c', '#e91e63', '#ff4081', '#ad1457', '#f06292', '#ff6b6b', '#d63031', '#ff8a80'];
+
+  function drawHeart(radius) {
+    context.beginPath();
+    context.moveTo(0, -radius * 0.3);
+    context.bezierCurveTo(radius, -radius * 1.1, radius * 1.5, radius * 0.4, 0, radius);
+    context.bezierCurveTo(-radius * 1.5, radius * 0.4, -radius, -radius * 1.1, 0, -radius * 0.3);
+    context.closePath();
+  }
+
+  const totalParticles = 55;
+  const particles = [];
+
+  for (let index = 0; index < totalParticles; index += 1) {
+    const angle = (Math.random() - 0.5) * (Math.PI / 1.5);
+    const velocity = 1.2 + Math.random() * 2.2;
+    const radius = 8 + Math.random() * 18;
+
+    particles.push({
+      x: width * 0.05 + Math.random() * width * 0.9,
+      y: height + radius * 2,
+      velocityX: Math.sin(angle) * velocity,
+      velocityY: -Math.cos(angle) * velocity,
+      radius,
+      rotation: (Math.random() - 0.5) * 0.06,
+      currentAngle: 0,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      alpha: 0,
+      delay: Math.random() * 2500,
+      born: false,
+      dead: false
+    });
+  }
+
+  let startTime = null;
+
+  function animate(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+    const elapsed = timestamp - startTime;
+    context.clearRect(0, 0, width, height);
+
+    let allDead = true;
+
+    particles.forEach((particle) => {
+      if (elapsed < particle.delay) {
+        allDead = false;
+        return;
+      }
+
+      if (!particle.born) {
+        particle.born = true;
+      }
+
+      if (particle.dead) {
+        return;
+      }
+
+      allDead = false;
+      particle.x += particle.velocityX;
+      particle.y += particle.velocityY;
+      particle.velocityY -= 0.012;
+      particle.velocityX *= 0.998;
+      particle.currentAngle += particle.rotation;
+
+      const fraction = 1 - (particle.y / height);
+      if (fraction < 0.08) {
+        particle.alpha = fraction / 0.08;
+      } else if (fraction > 0.55) {
+        particle.alpha = Math.max(0, 1 - (fraction - 0.55) / 0.45);
+      } else {
+        particle.alpha = 1;
+      }
+
+      if (particle.y < -particle.radius * 3) {
+        particle.dead = true;
+        return;
+      }
+
+      context.save();
+      context.translate(particle.x, particle.y);
+      context.rotate(particle.currentAngle);
+      context.globalAlpha = particle.alpha;
+      context.shadowColor = particle.color;
+      context.shadowBlur = 6;
+      context.fillStyle = particle.color;
+      drawHeart(particle.radius);
+      context.fill();
+      context.restore();
+    });
+
+    if (!allDead) {
+      window.requestAnimationFrame(animate);
+    } else {
+      context.clearRect(0, 0, width, height);
+    }
+  }
+
+  window.requestAnimationFrame(animate);
+}

package/src/scripts/{main.script.js → main.js}

@@ -1,5 +1,4 @@
-import { getTranslation } from './i18n.js';
-import { letters } from '../data/lettersLoader.js';
+import { letters } from '../loaders/lettersLoader.js';
 
 const listContainer = document.getElementById('letter-list');
 
@@ -52,13 +51,12 @@ function renderLetters() {
     return;
   }
 
-  const tapToOpenText = getTranslation('TAP_TO_OPEN');
   const orderedLetters = [...letters].reverse();
 
   orderedLetters.forEach((letter) => {
     const palette = generatePalette(letter);
     const link = document.createElement('a');
-    link.href = `./src/views/letters.view.html?id=${letter.id}`;
+    link.href = `./src/views/letters.html?id=${letter.id}`;
     link.className = 'envelope-link';
 
     link.innerHTML = `
@@ -83,7 +81,7 @@ function renderLetters() {
           <div class="envelope-centro">
             <span class="envelope-data" style="color:${palette.text};">${letter.date}</span>
             <span class="envelope-titulo" style="color:${palette.text};">${letter.title}</span>
-            <span class="envelope-hint" style="color:${palette.text};">${tapToOpenText}</span>
+            <span class="envelope-hint" style="color:${palette.text};">Tap to open</span>
           </div>
           <div class="envelope-canto tl"></div>
           <div class="envelope-canto tr"></div>

package/src/scripts/{data.variable.js → templateBinding.js}

@@ -6,7 +6,7 @@ document.documentElement.style.setProperty(
     fonts[globalVariables.FONT] || fonts.handwritten
 );
 
-// Data variables are injected from `src/config/globalVariables.js` into
+// Template variables are injected from `src/config/globalVariables.js` into
 // HTML elements using the `data-variable` attribute.
 // HTML entities are preserved when the value contains markup characters.
 document.querySelectorAll("[data-variable]").forEach(element => {

package/src/views/{letters.view.html → letters.html}

@@ -15,11 +15,11 @@
   <div class="back-link-wrap">
     <a href="../../index.html" class="back-link">
       <span class="back-link-arrow">&#8592;</span>
-      <span data-i18n="RETURN"></span>
+      <span>Return</span>
     </a>
   </div>
 
-  <div id="error-message" class="error" style="display:none"><p data-i18n="LETTER_NOT_FOUND"></p></div>
+  <div id="error-message" class="error" style="display:none"><p>Letter not found</p></div>
 
   <div class="envelope-animation-wrap" id="envelope-wrap">
     <div class="envelope-stage">
@@ -72,12 +72,11 @@
   </div>
 
   <nav class="letter-nav" id="letter-nav">
-    <a id="nav-previous" class="nav-button invisible" href="#">&#8592; <p data-i18n="PREVIOUS"></p></a>
+    <a id="nav-previous" class="nav-button invisible" href="#">&#8592; <p>Previous</p></a>
     <span class="nav-counter" id="letter-counter"></span>
-    <a id="nav-next" class="nav-button invisible" href="#"><p data-i18n="NEXT"></p> &#8594;</a>
+    <a id="nav-next" class="nav-button invisible" href="#"><p>Next</p> &#8594;</a>
   </nav>
 
-  <script type="module" src="../scripts/letters.script.js"></script>
-  <script type="module" src="../scripts/i18n.js"></script>
-  <script type="module" src="../scripts/data.variable.js"></script>
+  <script type="module" src="../scripts/lettersPage.js"></script>
+  <script type="module" src="../scripts/templateBinding.js"></script>
 </html>

package/vite.config.mjs

@@ -9,7 +9,7 @@ export default defineConfig({
     rollupOptions: {
       input: {
         main: resolve(import.meta.dirname, 'index.html'),
-        letter: resolve(import.meta.dirname, 'src/views/letters.view.html')
+        letter: resolve(import.meta.dirname, 'src/views/letters.html')
       }
     }
   }

package/src/data/lettersLoader.js

@@ -1,7 +0,0 @@
-const modules = import.meta.glob("./letters*.js", {
-  eager: true,
-  import: "letters",
-});
-
-export const letters =
-  modules["./letters.js"] ?? modules["./letters.example.js"];

package/src/i18n/de.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "Zum Öffnen tippen",
-    RETURN: "Zurück",
-    PREVIOUS: "Vorherige",
-    NEXT: "Nächste",
-    OF: "von",
-    LETTER_NOT_FOUND: "Brief nicht gefunden."
-}

package/src/i18n/en.js

@@ -1,8 +0,0 @@
-export default{
-    TAP_TO_OPEN: "Tap to open",
-    RETURN: "Return",
-    PREVIOUS: "Previous",
-    NEXT: "Next",
-    OF: "of",
-    LETTER_NOT_FOUND: "Letter not found."
-}

package/src/i18n/es.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "Toca para abrir",
-    RETURN: "Volver",
-    PREVIOUS: "Anterior",
-    NEXT: "Siguiente",
-    OF: "de",
-    LETTER_NOT_FOUND: "Carta no encontrada."
-}

package/src/i18n/fr.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "Touchez pour ouvrir",
-    RETURN: "Retour",
-    PREVIOUS: "Précédente",
-    NEXT: "Suivante",
-    OF: "sur",
-    LETTER_NOT_FOUND: "Lettre introuvable."
-}

package/src/i18n/it.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "Tocca per aprire",
-    RETURN: "Indietro",
-    PREVIOUS: "Precedente",
-    NEXT: "Successiva",
-    OF: "di",
-    LETTER_NOT_FOUND: "Lettera non trovata."
-}

package/src/i18n/ja.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "タップして開く",
-    RETURN: "戻る",
-    PREVIOUS: "前へ",
-    NEXT: "次へ",
-    OF: "の",
-    LETTER_NOT_FOUND: "手紙が見つかりません。"
-}

package/src/i18n/ko.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "탭하여 열기",
-    RETURN: "돌아가기",
-    PREVIOUS: "이전",
-    NEXT: "다음",
-    OF: "중",
-    LETTER_NOT_FOUND: "편지를 찾을 수 없습니다."
-}

package/src/i18n/pt-BR.js

@@ -1,8 +0,0 @@
-export default{
-    TAP_TO_OPEN: "Toque para abrir",
-    RETURN: "Voltar",
-    PREVIOUS: "Anterior",
-    NEXT: "Próxima",
-    OF: "de",
-    LETTER_NOT_FOUND: "Carta não encontrada."
-}

package/src/i18n/ru.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "Нажмите, чтобы открыть",
-    RETURN: "Назад",
-    PREVIOUS: "Предыдущая",
-    NEXT: "Следующая",
-    OF: "из",
-    LETTER_NOT_FOUND: "Письмо не найдено."
-}

package/src/i18n/zh.js

@@ -1,8 +0,0 @@
-export default {
-    TAP_TO_OPEN: "点击打开",
-    RETURN: "返回",
-    PREVIOUS: "上一封",
-    NEXT: "下一封",
-    OF: "共",
-    LETTER_NOT_FOUND: "未找到信件。"
-}

package/src/scripts/i18n.js

@@ -1,67 +0,0 @@
-import globalVariables from "../config/globalVariables.js";
-
-import en from "../i18n/en.js";
-import ptbr from "../i18n/pt-BR.js";
-import es from "../i18n/es.js";
-import fr from "../i18n/fr.js";
-import de from "../i18n/de.js";
-import it from "../i18n/it.js";
-import ja from "../i18n/ja.js";
-import ko from "../i18n/ko.js";
-import zh from "../i18n/zh.js";
-import ru from "../i18n/ru.js";
-
-// Language files are selected by the configured LANGUAGE value.
-// Missing translation keys fall back to English, then to the key name.
-const translations = {
-    en,
-    "pt-BR": ptbr,
-    es,
-    fr,
-    de,
-    it,
-    ja,
-    ko,
-    zh,
-    ru
-};
-
-const getCurrentLanguage = () => globalVariables?.LANGUAGE || "en";
-
-export const getTranslation = (key, ...args) => {
-    const language = translations[getCurrentLanguage()] || translations.en;
-
-    const translation =
-        language?.[key] ??
-        translations.en?.[key] ??
-        key;
-
-    // Support translated functions such as PROGRESS(current, total)
-    return typeof translation === "function"
-        ? translation(...args)
-        : translation;
-};
-
-export const translateElement = (element) => {
-    const key = element.dataset.i18n;
-
-    if (key) {
-        element.textContent = getTranslation(key);
-    }
-};
-
-document
-    .querySelectorAll("[data-i18n]")
-    .forEach(translateElement);
-
-export const refreshTranslations = () => {
-    document
-        .querySelectorAll("[data-i18n]")
-        .forEach(translateElement);
-};
-
-window.i18n = {
-    getTranslation,
-    translateElement,
-    refreshTranslations
-};