From a27fd0ea3fdd4da1b895d1243cd7c1599646095e Mon Sep 17 00:00:00 2001
From: stradichenko <sittoche@gmail.com>
Date: Sun, 26 Apr 2026 15:04:29 +0200
Subject: [PATCH] =?UTF-8?q?Unit=2012:=20widget=20partials=20=E2=80=94=20ex?=
 =?UTF-8?q?tract=20inline=20JS,=20add=20SRI,=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For each of: zipfs-law, lda-analysis, knowledge-graph, filters,
gallery-slider, contribution-calendar:

- Move inline <script> blocks into the corresponding
  assets/js/<widget>.js (created where missing). Pass per-page data via
  inline <script type=application/json id=<widget>-data> blocks read by
  the JS on init.
- Bundle each widget JS with js.Build | minify | fingerprint and defer.
- Add SRI integrity (or self-host) for D3, TensorFlow.js, mermaid.
- i18n widget labels (Activity Calendar, Less / More, Physics Controls,
  Repulsion, Reset to Default, All Nodes, Save as PNG/SVG/JPEG, LDA and
  Zipf labels) with English fallback.
- zipfs-law: replace the template-driven allWords.push("...") loop
  (~36 lines) with a single jsonify dump in a
  <script type=application/json> block.
- gallery-slider: extract the 460-LOC inline GallerySlider ES6 class
  into assets/js/gallery-slider.js.
- Wire assets/js/contribution-calendar.js back in (it was effectively
  dead before).
---
 assets/js/filters.js                        | 150 ++++++
 assets/js/gallery-slider.js                 | 354 ++++++++++++++
 assets/js/lda-analysis.js                   |  80 ++++
 assets/js/zipfs-law.js                      |  24 +
 i18n/en.toml                                | 157 +++++++
 layouts/partials/contribution-calendar.html |  93 ++--
 layouts/partials/filters.html               | 196 +-------
 layouts/partials/gallery-slider.html        | 497 +-------------------
 layouts/partials/knowledge-graph.html       | 118 ++---
 layouts/partials/lda-analysis.html          | 172 ++-----
 layouts/partials/zipfs-law.html             |  93 ++--
 11 files changed, 993 insertions(+), 941 deletions(-)
 create mode 100644 assets/js/filters.js
 create mode 100644 assets/js/gallery-slider.js
 create mode 100644 i18n/en.toml

diff --git a/assets/js/filters.js b/assets/js/filters.js
new file mode 100644
index 0000000..9d6fde0
--- /dev/null
+++ b/assets/js/filters.js
@@ -0,0 +1,150 @@
+// Filters widget — categories/tags filter chips for site listings.
+// Extracted from layouts/partials/filters.html.
+(function () {
+  'use strict';
+
+  function init() {
+    const categoryFilter = document.getElementById('category-filter');
+    const tagFilter = document.getElementById('tag-filter');
+    const activeFilters = document.getElementById('active-filters');
+    const clearFiltersBtn = document.getElementById('clear-filters');
+    const posts = document.querySelectorAll('.post-card');
+    const filteredCount = document.getElementById('filtered-count');
+    const filteredPosts = document.getElementById('filtered-posts');
+    const initialMessage = document.getElementById('initial-message');
+    const filterStats = document.getElementById('filter-stats');
+
+    if (!categoryFilter || !tagFilter || !activeFilters || !clearFiltersBtn) return;
+
+    const graphColors = [
+      'var(--graph-category-1)', 'var(--graph-category-2)',
+      'var(--graph-category-3)', 'var(--graph-category-4)',
+      'var(--graph-category-5)', 'var(--graph-category-6)',
+      'var(--graph-category-7)', 'var(--graph-category-8)'
+    ];
+
+    const activeFilterMap = new Map();
+    const chipColorMap = new Map();
+
+    const getRandomColor = () =>
+      graphColors[Math.floor(Math.random() * graphColors.length)];
+
+    function updateFilterStats() {
+      const visiblePosts = document.querySelectorAll('.post-card[style="display: block;"]');
+      if (filteredCount) filteredCount.textContent = String(visiblePosts.length);
+    }
+
+    function createFilterChip(type, value) {
+      if (!chipColorMap.has(value)) chipColorMap.set(value, getRandomColor());
+      const chip = document.createElement('span');
+      chip.classList.add('filter-chip');
+      chip.style.backgroundColor = chipColorMap.get(value);
+      chip.textContent = value;
+      chip.dataset.type = type;
+      chip.dataset.value = value;
+
+      const closeBtn = document.createElement('button');
+      closeBtn.classList.add('chip-close');
+      closeBtn.textContent = '×';
+      closeBtn.addEventListener('click', () => removeFilter(type, value));
+      chip.appendChild(closeBtn);
+      return chip;
+    }
+
+    function updateSelectOptions() {
+      [
+        { select: categoryFilter, type: 'category' },
+        { select: tagFilter, type: 'tag' }
+      ].forEach(({ select, type }) => {
+        const filters = activeFilterMap.get(type) || new Set();
+        Array.from(select.options).forEach(option => {
+          if (option.value && filters.has(option.value)) {
+            option.disabled = true;
+            option.style.display = 'none';
+          } else {
+            option.disabled = false;
+            option.style.display = '';
+          }
+        });
+      });
+    }
+
+    function addFilter(type, value) {
+      if (!value) return;
+      if (!activeFilterMap.has(type)) activeFilterMap.set(type, new Set());
+      activeFilterMap.get(type).add(value);
+
+      activeFilters.appendChild(createFilterChip(type, value));
+      updateVisibility();
+      updateSelectOptions();
+
+      if (type === 'category') categoryFilter.value = '';
+      if (type === 'tag') tagFilter.value = '';
+    }
+
+    function removeFilter(type, value) {
+      const filters = activeFilterMap.get(type);
+      if (filters) {
+        filters.delete(value);
+        if (filters.size === 0) activeFilterMap.delete(type);
+      }
+
+      const chip = activeFilters.querySelector(`[data-type="${type}"][data-value="${value}"]`);
+      if (chip) chip.remove();
+
+      updateVisibility();
+      updateSelectOptions();
+    }
+
+    function updateVisibility() {
+      const hasActiveFilters = activeFilterMap.size > 0;
+      if (initialMessage) initialMessage.style.display = hasActiveFilters ? 'none' : 'flex';
+      if (filteredPosts) filteredPosts.style.display = hasActiveFilters ? 'block' : 'none';
+      if (filterStats) filterStats.classList.toggle('hidden', !hasActiveFilters);
+
+      if (!hasActiveFilters) return;
+
+      posts.forEach(post => {
+        const categories = (post.dataset.categories || '').split(',').filter(Boolean);
+        const tags = (post.dataset.tags || '').split(',').filter(Boolean);
+        let visible = true;
+
+        if (activeFilterMap.has('category')) {
+          visible = visible && Array.from(activeFilterMap.get('category'))
+            .some(cat => categories.includes(cat));
+        }
+        if (activeFilterMap.has('tag')) {
+          visible = visible && Array.from(activeFilterMap.get('tag'))
+            .some(tag => tags.includes(tag));
+        }
+
+        post.style.display = visible ? 'block' : 'none';
+        post.classList.toggle('post-card-visible', visible);
+        post.classList.toggle('post-card-hidden', !visible);
+      });
+      updateFilterStats();
+    }
+
+    function clearFilters() {
+      activeFilterMap.clear();
+      chipColorMap.clear();
+      activeFilters.innerHTML = '';
+      categoryFilter.value = '';
+      tagFilter.value = '';
+      updateVisibility();
+      updateSelectOptions();
+    }
+
+    categoryFilter.addEventListener('change', e => addFilter('category', e.target.value));
+    tagFilter.addEventListener('change', e => addFilter('tag', e.target.value));
+    clearFiltersBtn.addEventListener('click', clearFilters);
+
+    updateFilterStats();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();
diff --git a/assets/js/gallery-slider.js b/assets/js/gallery-slider.js
new file mode 100644
index 0000000..5f5ca32
--- /dev/null
+++ b/assets/js/gallery-slider.js
@@ -0,0 +1,354 @@
+// Gallery slider widget — extracted from layouts/partials/gallery-slider.html.
+// Initializes every `.gallery-slider` on the page, including its lightbox.
+(function () {
+  'use strict';
+
+  class GallerySlider {
+    constructor(element) {
+      this.element = element;
+      this.track = element.querySelector('.gallery-slider__track');
+      this.slides = element.querySelectorAll('.gallery-slider__slide');
+      this.indicators = element.querySelectorAll('.gallery-slider__indicator');
+      this.thumbnails = element.querySelectorAll('.gallery-slider__thumbnail');
+      this.prevBtn = element.querySelector('.gallery-slider__nav--prev');
+      this.nextBtn = element.querySelector('.gallery-slider__nav--next');
+
+      // Lightbox elements
+      this.lightbox = element.querySelector('.gallery-lightbox');
+      this.lightboxImage = this.lightbox.querySelector('.gallery-lightbox__image');
+      this.lightboxCaption = this.lightbox.querySelector('.gallery-lightbox__caption');
+      this.lightboxClose = this.lightbox.querySelector('.gallery-lightbox__close');
+      this.lightboxPrev = this.lightbox.querySelector('.gallery-lightbox__nav--prev');
+      this.lightboxNext = this.lightbox.querySelector('.gallery-lightbox__nav--next');
+      this.lightboxCurrent = this.lightbox.querySelector('.gallery-lightbox__current');
+      this.lightboxBackdrop = this.lightbox.querySelector('.gallery-lightbox__backdrop');
+
+      this.currentSlide = 0;
+      this.totalSlides = this.slides.length;
+      this.autoplay = element.dataset.autoplay === 'true';
+      this.interval = parseInt(element.dataset.interval, 10) || 5000;
+      this.autoplayTimer = null;
+      this.isLightboxOpen = false;
+      this.containerHeight = null;
+
+      this.imageData = Array.from(this.slides).map(slide => {
+        const img = slide.querySelector('.gallery-slider__image');
+        const caption = slide.querySelector('.gallery-slider__caption');
+        return {
+          src: img.src,
+          alt: img.alt,
+          caption: caption ? caption.innerHTML : ''
+        };
+      });
+
+      this.init();
+    }
+
+    init() {
+      if (this.totalSlides <= 1) return;
+
+      this.bindEvents();
+      this.updateSlide(0);
+      this.calculateFixedHeight();
+
+      if (this.autoplay) this.startAutoplay();
+    }
+
+    calculateFixedHeight() {
+      const container = this.element.querySelector('.gallery-slider__container');
+      const containerWidth = container.offsetWidth;
+      const minHeight = window.innerWidth <= 640 ? 200 : 250;
+      const maxHeight = window.innerHeight * 0.7;
+
+      let smallestHeight = maxHeight;
+      let imagesLoaded = 0;
+
+      this.slides.forEach(slide => {
+        const img = slide.querySelector('.gallery-slider__image');
+
+        const calculateHeight = () => {
+          if (img.naturalWidth && img.naturalHeight) {
+            const aspectRatio = img.naturalHeight / img.naturalWidth;
+            const displayHeight = containerWidth * aspectRatio;
+            const constrainedHeight = Math.max(minHeight, Math.min(displayHeight, maxHeight));
+            smallestHeight = Math.min(smallestHeight, constrainedHeight);
+          }
+          imagesLoaded++;
+          if (imagesLoaded === this.totalSlides) {
+            this.containerHeight = smallestHeight;
+            this.setFixedContainerHeight();
+          }
+        };
+
+        if (img.complete && img.naturalWidth) {
+          calculateHeight();
+        } else {
+          img.addEventListener('load', calculateHeight, { once: true });
+          img.addEventListener('error', () => {
+            imagesLoaded++;
+            if (imagesLoaded === this.totalSlides) {
+              this.containerHeight = smallestHeight;
+              this.setFixedContainerHeight();
+            }
+          }, { once: true });
+        }
+      });
+    }
+
+    setFixedContainerHeight() {
+      if (this.containerHeight) {
+        this.track.style.height = `${this.containerHeight}px`;
+      }
+    }
+
+    bindEvents() {
+      this.prevBtn?.addEventListener('click', () => this.prevSlide());
+      this.nextBtn?.addEventListener('click', () => this.nextSlide());
+
+      this.indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => this.goToSlide(index));
+      });
+
+      // Open lightbox when clicking on the active slide image.
+      this.slides.forEach(slide => {
+        const img = slide.querySelector('.gallery-slider__image');
+        img.addEventListener('click', () => this.openLightbox(this.currentSlide));
+        img.style.cursor = 'pointer';
+      });
+
+      this.thumbnails.forEach((thumbnail, index) => {
+        thumbnail.addEventListener('click', e => {
+          if (e.ctrlKey || e.metaKey || e.button === 2) {
+            e.preventDefault();
+            this.goToSlide(index);
+            setTimeout(() => this.openLightbox(index), 50);
+          } else {
+            this.goToSlide(index);
+          }
+        });
+        thumbnail.addEventListener('dblclick', e => {
+          e.preventDefault();
+          this.goToSlide(index);
+          setTimeout(() => this.openLightbox(index), 50);
+        });
+      });
+
+      // Lightbox close handlers.
+      this.lightboxClose?.addEventListener('click', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.closeLightbox();
+      });
+      this.lightboxBackdrop?.addEventListener('click', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.closeLightbox();
+      });
+
+      const lightboxContainer = this.lightbox.querySelector('.gallery-lightbox__container');
+      lightboxContainer?.addEventListener('click', e => {
+        if (e.target === lightboxContainer) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.closeLightbox();
+        }
+      });
+
+      const lightboxContent = this.lightbox.querySelector('.gallery-lightbox__content');
+      lightboxContent?.addEventListener('click', e => e.stopPropagation());
+      this.lightboxImage?.addEventListener('click', e => e.stopPropagation());
+      this.lightboxCaption?.addEventListener('click', e => e.stopPropagation());
+
+      this.lightboxPrev?.addEventListener('click', () => this.lightboxPrevImage());
+      this.lightboxNext?.addEventListener('click', () => this.lightboxNextImage());
+
+      this.keyboardHandler = e => {
+        if (this.isLightboxOpen) {
+          switch (e.key) {
+            case 'Escape':
+              e.preventDefault();
+              e.stopPropagation();
+              this.closeLightbox();
+              break;
+            case 'ArrowLeft':
+              e.preventDefault();
+              this.lightboxPrevImage();
+              break;
+            case 'ArrowRight':
+              e.preventDefault();
+              this.lightboxNextImage();
+              break;
+          }
+        } else if (this.element.contains(document.activeElement)) {
+          switch (e.key) {
+            case 'ArrowLeft':
+              e.preventDefault();
+              this.prevSlide();
+              break;
+            case 'ArrowRight':
+              e.preventDefault();
+              this.nextSlide();
+              break;
+            case 'Enter':
+            case ' ':
+              if (e.target.classList.contains('gallery-slider__image')) {
+                e.preventDefault();
+                this.openLightbox(this.currentSlide);
+              }
+              break;
+          }
+        }
+      };
+      document.addEventListener('keydown', this.keyboardHandler);
+
+      this.element.addEventListener('mouseenter', () => this.pauseAutoplay());
+      this.element.addEventListener('mouseleave', () => this.resumeAutoplay());
+
+      this.lastContainerWidth = this.element.querySelector('.gallery-slider__container').offsetWidth;
+      this.resizeHandler = () => {
+        if (this.isLightboxOpen) {
+          this.constrainImageToViewport();
+        } else {
+          const container = this.element.querySelector('.gallery-slider__container');
+          const currentWidth = container.offsetWidth;
+          if (Math.abs(currentWidth - this.lastContainerWidth) > 50) {
+            this.lastContainerWidth = currentWidth;
+            this.calculateFixedHeight();
+          }
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);
+    }
+
+    openLightbox(index) {
+      this.isLightboxOpen = true;
+      const targetIndex = index !== undefined ? index : this.currentSlide;
+      this.updateLightboxImage(targetIndex);
+      this.lightbox.setAttribute('aria-hidden', 'false');
+      this.lightbox.classList.add('gallery-lightbox--active');
+      document.body.style.overflow = 'hidden';
+      this.pauseAutoplay();
+      setTimeout(() => this.lightboxClose?.focus(), 100);
+    }
+
+    closeLightbox() {
+      this.isLightboxOpen = false;
+      this.lightbox.setAttribute('aria-hidden', 'true');
+      this.lightbox.classList.remove('gallery-lightbox--active');
+      document.body.style.overflow = '';
+      this.resumeAutoplay();
+    }
+
+    updateLightboxImage(index) {
+      const safeIndex = Math.max(0, Math.min(index, this.totalSlides - 1));
+      const imageData = this.imageData[safeIndex];
+
+      this.lightboxImage.src = imageData.src;
+      this.lightboxImage.alt = imageData.alt;
+      this.lightboxCaption.innerHTML = imageData.caption;
+      this.lightboxCurrent.textContent = String(safeIndex + 1);
+
+      this.currentSlide = safeIndex;
+
+      this.lightboxImage.onload = () => this.constrainImageToViewport();
+
+      const navDisplay = this.totalSlides > 1 ? 'flex' : 'none';
+      this.lightboxPrev.style.display = navDisplay;
+      this.lightboxNext.style.display = navDisplay;
+    }
+
+    constrainImageToViewport() {
+      const img = this.lightboxImage;
+      const padding = window.innerWidth <= 768 ? 120 : 160;
+      img.style.maxWidth = `${window.innerWidth - padding}px`;
+      img.style.maxHeight = `${window.innerHeight - padding}px`;
+    }
+
+    lightboxPrevImage() {
+      const prevIndex = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
+      this.updateLightboxImage(prevIndex);
+      this.updateSlide(prevIndex);
+    }
+
+    lightboxNextImage() {
+      const nextIndex = (this.currentSlide + 1) % this.totalSlides;
+      this.updateLightboxImage(nextIndex);
+      this.updateSlide(nextIndex);
+    }
+
+    updateSlide(index) {
+      this.slides.forEach((slide, i) => {
+        slide.classList.toggle('gallery-slider__slide--active', i === index);
+      });
+      this.indicators.forEach((indicator, i) => {
+        indicator.classList.toggle('gallery-slider__indicator--active', i === index);
+        indicator.setAttribute('aria-selected', String(i === index));
+      });
+      this.thumbnails.forEach((thumbnail, i) => {
+        thumbnail.classList.toggle('gallery-slider__thumbnail--active', i === index);
+      });
+      this.currentSlide = index;
+      this.scrollToActiveThumbnail(index);
+    }
+
+    scrollToActiveThumbnail(index) {
+      if (this.thumbnails.length === 0) return;
+      const thumbnailsContainer = this.element.querySelector('.gallery-slider__thumbnails');
+      if (!thumbnailsContainer) return;
+      const activeThumbnail = this.thumbnails[index];
+      if (!activeThumbnail) return;
+
+      const containerRect = thumbnailsContainer.getBoundingClientRect();
+      const thumbnailRect = activeThumbnail.getBoundingClientRect();
+      const containerCenter = containerRect.width / 2;
+      const thumbnailCenter = thumbnailRect.left - containerRect.left + (thumbnailRect.width / 2);
+      const scrollOffset = thumbnailCenter - containerCenter;
+
+      thumbnailsContainer.scrollTo({
+        left: thumbnailsContainer.scrollLeft + scrollOffset,
+        behavior: 'smooth'
+      });
+    }
+
+    nextSlide() { this.goToSlide((this.currentSlide + 1) % this.totalSlides); }
+    prevSlide() { this.goToSlide((this.currentSlide - 1 + this.totalSlides) % this.totalSlides); }
+
+    goToSlide(index) {
+      if (index >= 0 && index < this.totalSlides) {
+        this.updateSlide(index);
+        this.resetAutoplay();
+      }
+    }
+
+    startAutoplay() {
+      if (!this.autoplay) return;
+      this.autoplayTimer = setInterval(() => this.nextSlide(), this.interval);
+    }
+
+    pauseAutoplay() {
+      if (this.autoplayTimer) {
+        clearInterval(this.autoplayTimer);
+        this.autoplayTimer = null;
+      }
+    }
+
+    resumeAutoplay() {
+      if (this.autoplay && !this.autoplayTimer) this.startAutoplay();
+    }
+
+    resetAutoplay() {
+      this.pauseAutoplay();
+      this.resumeAutoplay();
+    }
+  }
+
+  function init() {
+    document.querySelectorAll('.gallery-slider').forEach(slider => new GallerySlider(slider));
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();
diff --git a/assets/js/lda-analysis.js b/assets/js/lda-analysis.js
index 60785de..abd2eb3 100644
--- a/assets/js/lda-analysis.js
+++ b/assets/js/lda-analysis.js
@@ -611,3 +611,83 @@
     }
   };
 })();
+
+// ---------------------------------------------------------------------------
+// LDA mobile interaction + tooltip module
+// (Extracted from layouts/partials/lda-analysis.html inline script.)
+// ---------------------------------------------------------------------------
+(function () {
+  'use strict';
+
+  function init() {
+    const toggleBtn = document.getElementById('toggle-view');
+    const container = document.querySelector('.lda-container');
+    const toggleText = document.querySelector('.toggle-text');
+    const tooltip = document.getElementById('topic-tooltip');
+
+    if (toggleBtn && container && toggleText) {
+      const labelChart = toggleBtn.dataset.i18nChart || 'Switch to Chart View';
+      const labelTable = toggleBtn.dataset.i18nTable || 'Switch to Table View';
+      let showingTable = false;
+      toggleBtn.addEventListener('click', () => {
+        showingTable = !showingTable;
+        container.classList.toggle('show-table', showingTable);
+        toggleText.textContent = showingTable ? labelChart : labelTable;
+      });
+    }
+
+    if (!tooltip) return;
+
+    window.showTopicTooltip = function (event, topicData) {
+      if (!topicData) return;
+
+      const titleEl = tooltip.querySelector('.tooltip-title');
+      const keywordsEl = tooltip.querySelector('.tooltip-keywords');
+      const documentsEl = tooltip.querySelector('.tooltip-documents');
+      const confidenceEl = tooltip.querySelector('.tooltip-confidence');
+
+      if (titleEl) titleEl.textContent = `Topic ${topicData.id}: ${topicData.label}`;
+      if (keywordsEl && topicData.keywords) {
+        keywordsEl.innerHTML = topicData.keywords
+          .map(k => `<span class="keyword">${k}</span>`)
+          .join('');
+      }
+      if (documentsEl) {
+        documentsEl.textContent = `${topicData.documentCount} documents • ${topicData.percentage}%`;
+      }
+      if (confidenceEl) {
+        confidenceEl.textContent = `Confidence: ${topicData.confidence}%`;
+      }
+
+      const rect = event.target.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      let left = rect.left;
+      let top = rect.top - tooltipRect.height - 10;
+      if (left + tooltipRect.width > window.innerWidth) {
+        left = window.innerWidth - tooltipRect.width - 10;
+      }
+      if (left < 10) left = 10;
+      if (top < 10) top = rect.bottom + 10;
+
+      tooltip.style.left = `${left}px`;
+      tooltip.style.top = `${top}px`;
+      tooltip.classList.add('visible');
+    };
+
+    window.hideTopicTooltip = function () {
+      tooltip.classList.remove('visible');
+    };
+
+    document.addEventListener('click', (event) => {
+      if (!event.target.closest('.topic-bar-container')) {
+        window.hideTopicTooltip();
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();
diff --git a/assets/js/zipfs-law.js b/assets/js/zipfs-law.js
index 978bbf7..73b9604 100644
--- a/assets/js/zipfs-law.js
+++ b/assets/js/zipfs-law.js
@@ -688,3 +688,27 @@ function hideTooltip() {
     tooltip.style.display = 'none';
   }
 }
+
+// Bootstrap: read the corpus JSON injected by the partial and initialize.
+(function bootstrapZipfsLaw() {
+  function start() {
+    const dataNode = document.getElementById('zipf-data-words');
+    if (!dataNode) return; // Partial not on this page
+    let words = [];
+    try {
+      const parsed = JSON.parse(dataNode.textContent || '[]');
+      words = Array.isArray(parsed) ? parsed.filter(w => typeof w === 'string') : [];
+    } catch (err) {
+      console.error('Zipf: failed to parse corpus data:', err);
+      return;
+    }
+    if (typeof initializeZipfsLaw === 'function') {
+      initializeZipfsLaw(words);
+    }
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', start, { once: true });
+  } else {
+    start();
+  }
+})();
diff --git a/i18n/en.toml b/i18n/en.toml
new file mode 100644
index 0000000..243748d
--- /dev/null
+++ b/i18n/en.toml
@@ -0,0 +1,157 @@
+# PKB-theme English i18n strings.
+# This file is owned by Unit 4 of the modernization batch; Unit 12 added
+# widget-specific keys below. Keep the table-of-contents structure if Unit 4
+# expands this file.
+
+# ---------------------------------------------------------------------------
+# Knowledge graph widget
+# ---------------------------------------------------------------------------
+[knowledge_graph_physics_controls]
+other = "Physics Controls"
+
+[knowledge_graph_repulsion]
+other = "Repulsion:"
+
+[knowledge_graph_link_distance]
+other = "Link Distance:"
+
+[knowledge_graph_node_spacing]
+other = "Node Spacing:"
+
+[knowledge_graph_center_gravity]
+other = "Center Gravity:"
+
+[knowledge_graph_reset_default]
+other = "Reset to Default"
+
+[knowledge_graph_filter_by]
+other = "Filter by:"
+
+[knowledge_graph_all_nodes]
+other = "All Nodes"
+
+[knowledge_graph_filter_category]
+other = "Category"
+
+[knowledge_graph_filter_tag]
+other = "Tag"
+
+[knowledge_graph_filter_search]
+other = "Node Name"
+
+[knowledge_graph_search_placeholder]
+other = "Search nodes..."
+
+[knowledge_graph_clear_filters]
+other = "Clear Filters"
+
+[knowledge_graph_save_png]
+other = "Save as PNG"
+
+[knowledge_graph_save_svg]
+other = "Save as SVG"
+
+[knowledge_graph_save_jpeg]
+other = "Save as JPEG"
+
+[knowledge_graph_filter_aria]
+other = "Filter graph"
+
+[knowledge_graph_save_aria]
+other = "Save graph as image"
+
+[knowledge_graph_fullscreen_aria]
+other = "View graph in fullscreen"
+
+[knowledge_graph_close_fullscreen_aria]
+other = "Close fullscreen view"
+
+# ---------------------------------------------------------------------------
+# Zipf's law widget
+# ---------------------------------------------------------------------------
+[zipf_title]
+other = "Content Analysis (Zipf's Law)"
+
+[zipf_word_freq_distribution]
+other = "Word Frequency Distribution"
+
+[zipf_word_freq_analysis]
+other = "Word Frequency Analysis"
+
+[zipf_rank]
+other = "Rank"
+
+[zipf_word]
+other = "Word"
+
+[zipf_freq]
+other = "Freq (n/total)"
+
+[zipf_pr]
+other = "Pr(%)"
+
+[zipf_ideal]
+other = "Ideal"
+
+[zipf_save_png]
+other = "Save as PNG"
+
+[zipf_save_svg]
+other = "Save as SVG"
+
+[zipf_save_jpeg]
+other = "Save as JPEG"
+
+# ---------------------------------------------------------------------------
+# LDA topic analysis widget
+# ---------------------------------------------------------------------------
+[lda_title]
+other = "Topic Analysis (LDA)"
+
+[lda_topic_distribution]
+other = "Topic Distribution"
+
+[lda_topic_details]
+other = "Topic Details"
+
+[lda_loading]
+other = "Analyzing content using GPU-accelerated LDA..."
+
+[lda_switch_to_table]
+other = "Switch to Table View"
+
+[lda_switch_to_chart]
+other = "Switch to Chart View"
+
+# ---------------------------------------------------------------------------
+# Filters widget
+# ---------------------------------------------------------------------------
+[filters_select_category]
+other = "Select Category"
+
+[filters_select_tag]
+other = "Select Tag"
+
+[filters_clear_all]
+other = "Clear All"
+
+[filters_initial_message]
+other = "Select a category or tag to view matching posts"
+
+[filters_items_found]
+other = "items found"
+
+# ---------------------------------------------------------------------------
+# Contribution calendar widget
+# ---------------------------------------------------------------------------
+[calendar_activity_title]
+other = "Activity Calendar"
+
+[calendar_less]
+other = "Less"
+
+[calendar_more]
+other = "More"
+
+[calendar_no_activity]
+other = "No activity"
diff --git a/layouts/partials/contribution-calendar.html b/layouts/partials/contribution-calendar.html
index 2bf91cb..224fdc4 100644
--- a/layouts/partials/contribution-calendar.html
+++ b/layouts/partials/contribution-calendar.html
@@ -1,91 +1,67 @@
 <div class="contribution-section">
-  <h2 class="contribution-title">Activity Calendar</h2>
+  <h2 class="contribution-title">{{ i18n "calendar_activity_title" | default "Activity Calendar" }}</h2>
   <div class="contribution-calendar">
     <div class="calendar-box">
-      {{ $posts := where .Site.RegularPages "Type" "in" .Site.Params.taxonomies.mainSections }}
-      
+      {{ $posts := where site.RegularPages "Type" "in" site.Params.taxonomies.mainSections }}
+
       {{ $now := now }}
-      {{ $today := $now.Format "2006-01-02" }}
       {{ $startDate := $now.AddDate 0 0 -365 }}
-      
-      <!-- Create map of dates and activity count -->
+
+      <!-- Build a {date: count} map covering both creation and modification activity. -->
       {{ $dateMap := dict }}
       {{ range $posts }}
-        {{ $lastmod := .Lastmod.Format "2006-01-02" }}
-        {{ $created := .Date.Format "2006-01-02" }}
-        
-        {{ if (index $dateMap $created) }}
-          {{ $currentCount := index $dateMap $created }}
-          {{ $dateMap = merge $dateMap (dict $created (add $currentCount 1)) }}
-        {{ else }}
-          {{ $dateMap = merge $dateMap (dict $created 1) }}
-        {{ end }}
-        
+        {{ $created := time.Format "2006-01-02" .Date }}
+        {{ $lastmod := time.Format "2006-01-02" .Lastmod }}
+
+        {{ $dateMap = merge $dateMap (dict $created (add (index $dateMap $created | default 0) 1)) }}
         {{ if ne $lastmod $created }}
-          {{ if (index $dateMap $lastmod) }}
-            {{ $currentCount := index $dateMap $lastmod }}
-            {{ $dateMap = merge $dateMap (dict $lastmod (add $currentCount 1)) }}
-          {{ else }}
-            {{ $dateMap = merge $dateMap (dict $lastmod 1) }}
-          {{ end }}
+          {{ $dateMap = merge $dateMap (dict $lastmod (add (index $dateMap $lastmod | default 0) 1)) }}
         {{ end }}
       {{ end }}
-      
+
       <!-- Calculate month positions for the calendar period -->
       {{ $monthPositions := dict }}
-      {{ $currentDate := $startDate }}
-      {{ $endDate := $now }}
       {{ $lastMonth := "" }}
-  
-      <!-- Loop through all days to find month start positions -->
       {{ range $dayOffset := seq 0 365 }}
         {{ $date := $startDate.AddDate 0 0 $dayOffset }}
-        {{ $monthName := $date.Format "Jan" }}
-        {{ $month := $date.Format "2006-01" }}
-        
-        <!-- If we encounter a new month, record its position -->
+        {{ $monthName := time.Format "Jan" $date }}
+        {{ $month := time.Format "2006-01" $date }}
+
         {{ if ne $month $lastMonth }}
           {{ $weekNum := div $dayOffset 7 }}
-          {{ $position := add 0.0 (mul $weekNum 14) }}
+          {{ $position := mul $weekNum 14 }}
           {{ $monthPositions = merge $monthPositions (dict $monthName $position) }}
           {{ $lastMonth = $month }}
         {{ end }}
       {{ end }}
-      
+
       <!-- Generate calendar visualization -->
       <div class="calendar-container">
         <div class="calendar-wrapper">
           <div class="calendar-months">
-            <!-- Output months with their calculated positions -->
             {{ range $month, $position := $monthPositions }}
               <div class="month-label" data-month="{{ $month }}" style="left: {{ $position }}px;">{{ $month }}</div>
             {{ end }}
           </div>
-          
+
           <div class="calendar-cells">
             {{ range $i := seq 0 6 }}
               <div class="calendar-row">
                 {{ range $j := seq 0 51 }}
                   {{ $dayOffset := add (mul $j 7) $i }}
                   {{ $currentDate := $startDate.AddDate 0 0 (int $dayOffset) }}
-                  {{ $dateStr := $currentDate.Format "2006-01-02" }}
-                  {{ $month := $currentDate.Format "Jan" }}
+                  {{ $dateStr := time.Format "2006-01-02" $currentDate }}
+                  {{ $month := time.Format "Jan" $currentDate }}
                   {{ $count := index $dateMap $dateStr | default 0 }}
                   {{ $level := 0 }}
-                  {{ if gt $count 0 }}
-                    {{ if gt $count 10 }}
-                      {{ $level = 4 }}
-                    {{ else if gt $count 7 }}
-                      {{ $level = 3 }}
-                    {{ else if gt $count 4 }}
-                      {{ $level = 2 }}
-                    {{ else }}
-                      {{ $level = 1 }}
-                    {{ end }}
+                  {{ if gt $count 10 }}{{ $level = 4 }}
+                  {{ else if gt $count 7 }}{{ $level = 3 }}
+                  {{ else if gt $count 4 }}{{ $level = 2 }}
+                  {{ else if gt $count 0 }}{{ $level = 1 }}
                   {{ end }}
-                  <div 
-                    class="calendar-cell level-{{ $level }}" 
-                    data-date="{{ $dateStr }}" 
+                  <div
+                    class="calendar-cell level-{{ $level }}"
+                    data-date="{{ $dateStr }}"
                     data-month="{{ $month }}"
                     data-count="{{ $count }}"
                     title="{{ $dateStr }}: {{ $count }} activities"
@@ -96,18 +72,27 @@ <h2 class="contribution-title">Activity Calendar</h2>
           </div>
         </div>
       </div>
-      
+
       <div class="calendar-legend">
-        <span class="legend-label">Less</span>
+        <span class="legend-label">{{ i18n "calendar_less" | default "Less" }}</span>
         <div class="legend-cells">
-          <div class="calendar-cell level-0" title="No activity"></div>
+          <div class="calendar-cell level-0" title="{{ i18n "calendar_no_activity" | default "No activity" }}"></div>
           <div class="calendar-cell level-1" title="1-3 activities"></div>
           <div class="calendar-cell level-2" title="4-6 activities"></div>
           <div class="calendar-cell level-3" title="7-10 activities"></div>
           <div class="calendar-cell level-4" title="10+ activities"></div>
         </div>
-        <span class="legend-label">More</span>
+        <span class="legend-label">{{ i18n "calendar_more" | default "More" }}</span>
       </div>
     </div>
   </div>
 </div>
+
+{{/* Audit (Unit 12): contribution-calendar.js had no callers. Wire it up now;
+     it provides the cell tooltip and month-row scroll synchronization. */}}
+{{ with resources.Get "js/contribution-calendar.js" }}
+  {{ $calendarJS := . | resources.Minify | fingerprint }}
+  <script defer src="{{ $calendarJS.RelPermalink }}" integrity="{{ $calendarJS.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ else }}
+  {{ errorf "Required file 'contribution-calendar.js' not found in assets/js/ directory" }}
+{{ end }}
diff --git a/layouts/partials/filters.html b/layouts/partials/filters.html
index e965070..dd46b38 100644
--- a/layouts/partials/filters.html
+++ b/layouts/partials/filters.html
@@ -3,8 +3,8 @@
     <div class="filters-controls">
       <div class="filter-dropdowns">
         <select id="category-filter" class="filter-select">
-          <option value="" disabled selected>Select Category</option>
-          {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
+          <option value="" disabled selected>{{ i18n "filters_select_category" | default "Select Category" }}</option>
+          {{ range $name, $taxonomy := site.Taxonomies.categories }}
             {{ $count := len $taxonomy }}
             <option value="{{ $name }}" data-count="{{ $count }}" title="{{ $name }} ({{ $count }})">
               {{ $name }} ({{ $count }})
@@ -12,8 +12,8 @@
           {{ end }}
         </select>
         <select id="tag-filter" class="filter-select">
-          <option value="" disabled selected>Select Tag</option>
-          {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+          <option value="" disabled selected>{{ i18n "filters_select_tag" | default "Select Tag" }}</option>
+          {{ range $name, $taxonomy := site.Taxonomies.tags }}
             {{ $count := len $taxonomy }}
             <option value="{{ $name }}" data-count="{{ $count }}" title="{{ $name }} ({{ $count }})">
               {{ $name }} ({{ $count }})
@@ -21,44 +21,43 @@
           {{ end }}
         </select>
       </div>
-      <button id="clear-filters" class="clear-filters-btn">Clear All</button>
+      <button id="clear-filters" class="clear-filters-btn">{{ i18n "filters_clear_all" | default "Clear All" }}</button>
     </div>
     <div id="active-filters" class="active-filters"></div>
     <div id="filter-stats" class="filter-stats hidden">
-      <span id="filtered-count">0</span> items found
+      <span id="filtered-count">0</span> {{ i18n "filters_items_found" | default "items found" }}
     </div>
   </div>
 
   <div class="posts-container">
     <div id="initial-message" class="initial-message">
-      <p>Select a category or tag to view matching posts</p>
+      <p>{{ i18n "filters_initial_message" | default "Select a category or tag to view matching posts" }}</p>
       <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="filter-icon">
         <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
       </svg>
     </div>
     <div class="posts-scroll" id="filtered-posts" style="display: none;">
       {{ range site.RegularPages }}
-        <article class="post-card" 
+        <article class="post-card"
                  {{ with .Params.categories }}data-categories="{{ delimit . "," }}"{{ end }}
                  {{ with .Params.tags }}data-tags="{{ delimit . "," }}"{{ end }}>
           <h2 class="page-item-title">
             <a href="{{ .RelPermalink }}" class="page-link">{{ .LinkTitle }}</a>
           </h2>
-          
+
           <div class="page-metadata">
             {{ if .Date }}
             <span class="page-date">
-              <i class="icon-calendar"></i> {{ .Date.Format "January 2, 2006" }}
+              <i class="icon-calendar"></i> {{ time.Format "January 2, 2006" .Date }}
             </span>
             {{ end }}
-            
+
             {{ if .Params.categories }}
             <span class="page-categories">
               <i class="icon-folder"></i>
               {{ $maxCategories := 2 }}
-              {{ $categoryCount := len .Params.categories }}
               {{ $allCategories := .Params.categories }}
-              
+
               {{ range $index, $category := .Params.categories }}
                 {{ if lt $index $maxCategories }}
                   {{- if gt $index 0 }}, {{ end -}}
@@ -71,14 +70,13 @@ <h2 class="page-item-title">
               {{- end -}}
             </span>
             {{ end }}
-            
+
             {{ if .Params.tags }}
             <span class="page-tags">
               <i class="icon-tag"></i>
               {{ $maxTags := 3 }}
-              {{ $tagCount := len .Params.tags }}
               {{ $allTags := .Params.tags }}
-              
+
               {{ range $index, $tag := .Params.tags }}
                 {{ if lt $index $maxTags }}
                   {{- if gt $index 0 }}, {{ end -}}
@@ -92,13 +90,13 @@ <h2 class="page-item-title">
             </span>
             {{ end }}
           </div>
-          
+
           {{ with .Description }}
           <div class="page-description">
             {{ . }}
           </div>
           {{ end }}
-          
+
           {{ with .Summary }}
           <div class="page-summary">
             {{ . }}
@@ -110,159 +108,9 @@ <h2 class="page-item-title">
   </div>
 </div>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  const categoryFilter = document.getElementById('category-filter');
-  const tagFilter = document.getElementById('tag-filter');
-  const activeFilters = document.getElementById('active-filters');
-  const clearFiltersBtn = document.getElementById('clear-filters');
-  const posts = document.querySelectorAll('.post-card');
-  const filteredCount = document.getElementById('filtered-count');
-  const filteredPosts = document.getElementById('filtered-posts');
-  const initialMessage = document.getElementById('initial-message');
-  const filterStats = document.getElementById('filter-stats');
-
-  const graphColors = [
-    'var(--graph-category-1)', 'var(--graph-category-2)', 
-    'var(--graph-category-3)', 'var(--graph-category-4)',
-    'var(--graph-category-5)', 'var(--graph-category-6)',
-    'var(--graph-category-7)', 'var(--graph-category-8)'
-  ];
-
-  const activeFilterMap = new Map();
-  const chipColorMap = new Map();
-
-  function getRandomColor() {
-    return graphColors[Math.floor(Math.random() * graphColors.length)];
-  }
-
-  function updateFilterStats() {
-    const visiblePosts = document.querySelectorAll('.post-card[style="display: block;"]');
-    filteredCount.textContent = visiblePosts.length;
-  }
-
-  function createFilterChip(type, value) {
-    if (!chipColorMap.has(value)) {
-      chipColorMap.set(value, getRandomColor());
-    }
-
-    const chip = document.createElement('span');
-    chip.classList.add('filter-chip');
-    chip.style.backgroundColor = chipColorMap.get(value);
-    chip.textContent = value;
-    chip.dataset.type = type;
-    chip.dataset.value = value;
-    
-    const closeBtn = document.createElement('button');
-    closeBtn.classList.add('chip-close');
-    closeBtn.innerHTML = '×';
-    closeBtn.onclick = () => removeFilter(type, value);
-    
-    chip.appendChild(closeBtn);
-    return chip;
-  }
-
-  function updateSelectOptions() {
-    [
-      { select: categoryFilter, type: 'category' },
-      { select: tagFilter, type: 'tag' }
-    ].forEach(({ select, type }) => {
-      const activeFilters = activeFilterMap.get(type) || new Set();
-      Array.from(select.options).forEach(option => {
-        if (option.value && activeFilters.has(option.value)) {
-          option.disabled = true;
-          option.style.display = 'none';
-        } else {
-          option.disabled = false;
-          option.style.display = '';
-        }
-      });
-    });
-  }
-
-  function addFilter(type, value) {
-    if (!value) return;
-    
-    if (!activeFilterMap.has(type)) {
-      activeFilterMap.set(type, new Set());
-    }
-    activeFilterMap.get(type).add(value);
-    
-    activeFilters.appendChild(createFilterChip(type, value));
-    updateVisibility();
-    updateSelectOptions();
-    
-    if (type === 'category') categoryFilter.value = '';
-    if (type === 'tag') tagFilter.value = '';
-  }
-
-  function removeFilter(type, value) {
-    const filters = activeFilterMap.get(type);
-    if (filters) {
-      filters.delete(value);
-      if (filters.size === 0) {
-        activeFilterMap.delete(type);
-      }
-    }
-    
-    const chip = activeFilters.querySelector(`[data-type="${type}"][data-value="${value}"]`);
-    if (chip) chip.remove();
-    
-    updateVisibility();
-    updateSelectOptions();
-  }
-
-  function updateVisibility() {
-    const hasActiveFilters = activeFilterMap.size > 0;
-    initialMessage.style.display = hasActiveFilters ? 'none' : 'flex';
-    filteredPosts.style.display = hasActiveFilters ? 'block' : 'none';
-    filterStats.classList.toggle('hidden', !hasActiveFilters);
-
-    if (hasActiveFilters) {
-      posts.forEach(post => {
-        const categories = (post.dataset.categories || '').split(',').filter(Boolean);
-        const tags = (post.dataset.tags || '').split(',').filter(Boolean);
-        let visible = true;
-
-        if (activeFilterMap.has('category')) {
-          visible = visible && Array.from(activeFilterMap.get('category'))
-            .some(cat => categories.includes(cat));
-        }
-        
-        if (activeFilterMap.has('tag')) {
-          visible = visible && Array.from(activeFilterMap.get('tag'))
-            .some(tag => tags.includes(tag));
-        }
-
-        post.style.display = visible ? 'block' : 'none';
-        
-        if (visible) {
-          post.classList.add('post-card-visible');
-          post.classList.remove('post-card-hidden');
-        } else {
-          post.classList.add('post-card-hidden');
-          post.classList.remove('post-card-visible');
-        }
-      });
-      updateFilterStats();
-    }
-  }
-
-  function clearFilters() {
-    activeFilterMap.clear();
-    chipColorMap.clear();
-    activeFilters.innerHTML = '';
-    categoryFilter.value = '';
-    tagFilter.value = '';
-    updateVisibility();
-    updateSelectOptions();
-  }
-
-  categoryFilter.addEventListener('change', (e) => addFilter('category', e.target.value));
-  tagFilter.addEventListener('change', (e) => addFilter('tag', e.target.value));
-  clearFiltersBtn.addEventListener('click', clearFilters);
-  
-  // Initialize stats
-  updateFilterStats();
-});
-</script>
+{{ with resources.Get "js/filters.js" }}
+  {{ $filtersJS := . | resources.Minify | fingerprint }}
+  <script defer src="{{ $filtersJS.RelPermalink }}" integrity="{{ $filtersJS.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ else }}
+  {{ errorf "Required file 'filters.js' not found in assets/js/ directory" }}
+{{ end }}
diff --git a/layouts/partials/gallery-slider.html b/layouts/partials/gallery-slider.html
index b9e5e58..909314e 100644
--- a/layouts/partials/gallery-slider.html
+++ b/layouts/partials/gallery-slider.html
@@ -10,12 +10,12 @@
     <!-- Image slides -->
     <div class="gallery-slider__track" role="region" aria-label="Image gallery">
       {{- range $index, $image := $images }}
-      <div class="gallery-slider__slide {{ if eq $index 0 }}gallery-slider__slide--active{{ end }}{{ if $image.caption }} gallery-slider__slide--has-caption{{ end }}" 
+      <div class="gallery-slider__slide {{ if eq $index 0 }}gallery-slider__slide--active{{ end }}{{ if $image.caption }} gallery-slider__slide--has-caption{{ end }}"
            data-slide="{{ $index }}"
-           role="group" 
+           role="group"
            aria-roledescription="slide"
            aria-label="Slide {{ add $index 1 }} of {{ len $images }}">
-        <img src="{{ $image.src }}" 
+        <img src="{{ $image.src }}"
              alt="{{ $image.alt | default $image.caption }}"
              class="gallery-slider__image"
              loading="{{ if eq $index 0 }}eager{{ else }}lazy{{ end }}">
@@ -29,15 +29,15 @@
     </div>
 
     <!-- Navigation arrows -->
-    <button class="gallery-slider__nav gallery-slider__nav--prev" 
+    <button class="gallery-slider__nav gallery-slider__nav--prev"
             aria-label="Previous image"
             type="button">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <polyline points="15,18 9,12 15,6"></polyline>
       </svg>
     </button>
-    
-    <button class="gallery-slider__nav gallery-slider__nav--next" 
+
+    <button class="gallery-slider__nav gallery-slider__nav--next"
             aria-label="Next image"
             type="button">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -67,7 +67,7 @@
             data-slide="{{ $index }}"
             aria-label="Show slide {{ add $index 1 }}"
             type="button">
-      <img src="{{ $image.thumb | default $image.src }}" 
+      <img src="{{ $image.thumb | default $image.src }}"
            alt="{{ $image.alt | default $image.caption }}"
            class="gallery-slider__thumbnail-image">
     </button>
@@ -79,34 +79,30 @@
   <div class="gallery-lightbox" id="{{ $id }}-lightbox" aria-hidden="true" role="dialog" aria-modal="true">
     <div class="gallery-lightbox__backdrop"></div>
     <div class="gallery-lightbox__container">
-      <!-- Close button -->
       <button class="gallery-lightbox__close" aria-label="Close lightbox" type="button">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <line x1="18" y1="6" x2="6" y2="18"></line>
           <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </button>
-      
-      <!-- Main lightbox image -->
+
       <div class="gallery-lightbox__content">
         <img src="" alt="" class="gallery-lightbox__image">
         <div class="gallery-lightbox__caption"></div>
       </div>
-      
-      <!-- Navigation arrows -->
+
       <button class="gallery-lightbox__nav gallery-lightbox__nav--prev" aria-label="Previous image" type="button">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <polyline points="15,18 9,12 15,6"></polyline>
         </svg>
       </button>
-      
+
       <button class="gallery-lightbox__nav gallery-lightbox__nav--next" aria-label="Next image" type="button">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <polyline points="9,18 15,12 9,6"></polyline>
         </svg>
       </button>
-      
-      <!-- Image counter -->
+
       <div class="gallery-lightbox__counter">
         <span class="gallery-lightbox__current">1</span> / <span class="gallery-lightbox__total">{{ len $images }}</span>
       </div>
@@ -114,464 +110,13 @@
   </div>
 </div>
 
-<!-- Gallery slider JavaScript -->
-<script>
-(function() {
-  class GallerySlider {
-    constructor(element) {
-      this.element = element;
-      this.track = element.querySelector('.gallery-slider__track');
-      this.slides = element.querySelectorAll('.gallery-slider__slide');
-      this.indicators = element.querySelectorAll('.gallery-slider__indicator');
-      this.thumbnails = element.querySelectorAll('.gallery-slider__thumbnail');
-      this.prevBtn = element.querySelector('.gallery-slider__nav--prev');
-      this.nextBtn = element.querySelector('.gallery-slider__nav--next');
-      
-      // Lightbox elements
-      this.lightbox = element.querySelector('.gallery-lightbox');
-      this.lightboxImage = this.lightbox.querySelector('.gallery-lightbox__image');
-      this.lightboxCaption = this.lightbox.querySelector('.gallery-lightbox__caption');
-      this.lightboxClose = this.lightbox.querySelector('.gallery-lightbox__close');
-      this.lightboxPrev = this.lightbox.querySelector('.gallery-lightbox__nav--prev');
-      this.lightboxNext = this.lightbox.querySelector('.gallery-lightbox__nav--next');
-      this.lightboxCurrent = this.lightbox.querySelector('.gallery-lightbox__current');
-      this.lightboxBackdrop = this.lightbox.querySelector('.gallery-lightbox__backdrop');
-      
-      this.currentSlide = 0;
-      this.totalSlides = this.slides.length;
-      this.autoplay = element.dataset.autoplay === 'true';
-      this.interval = parseInt(element.dataset.interval) || 5000;
-      this.autoplayTimer = null;
-      this.isLightboxOpen = false;
-      this.containerHeight = null; // Store fixed container height
-      
-      // Store image data for lightbox
-      this.imageData = Array.from(this.slides).map(slide => {
-        const img = slide.querySelector('.gallery-slider__image');
-        const caption = slide.querySelector('.gallery-slider__caption');
-        return {
-          src: img.src,
-          alt: img.alt,
-          caption: caption ? caption.innerHTML : ''
-        };
-      });
-      
-      this.init();
-    }
-    
-    init() {
-      if (this.totalSlides <= 1) return;
-      
-      this.bindEvents();
-      this.updateSlide(0);
-      
-      // Calculate and set fixed container height based on smallest image
-      this.calculateFixedHeight();
-      
-      if (this.autoplay) {
-        this.startAutoplay();
-      }
-    }
-    
-    calculateFixedHeight() {
-      const container = this.element.querySelector('.gallery-slider__container');
-      const containerWidth = container.offsetWidth;
-      const minHeight = window.innerWidth <= 640 ? 200 : 250; // Minimum height
-      const maxHeight = window.innerHeight * 0.7; // Maximum height (70vh)
-      
-      let smallestHeight = maxHeight;
-      let imagesLoaded = 0;
-      
-      // Check all images to find the smallest height
-      this.slides.forEach(slide => {
-        const img = slide.querySelector('.gallery-slider__image');
-        
-        const calculateHeight = () => {
-          if (img.naturalWidth && img.naturalHeight) {
-            const aspectRatio = img.naturalHeight / img.naturalWidth;
-            const displayHeight = containerWidth * aspectRatio;
-            
-            // Apply constraints
-            const constrainedHeight = Math.max(minHeight, Math.min(displayHeight, maxHeight));
-            smallestHeight = Math.min(smallestHeight, constrainedHeight);
-          }
-          
-          imagesLoaded++;
-          if (imagesLoaded === this.totalSlides) {
-            // All images processed, set the fixed height
-            this.containerHeight = smallestHeight;
-            this.setFixedContainerHeight();
-          }
-        };
-        
-        if (img.complete && img.naturalWidth) {
-          calculateHeight();
-        } else {
-          img.onload = calculateHeight;
-          img.onerror = () => {
-            // If image fails to load, use minimum height
-            imagesLoaded++;
-            if (imagesLoaded === this.totalSlides) {
-              this.containerHeight = smallestHeight;
-              this.setFixedContainerHeight();
-            }
-          };
-        }
-      });
-    }
-    
-    setFixedContainerHeight() {
-      if (this.containerHeight) {
-        this.track.style.height = `${this.containerHeight}px`;
-      }
-    }
-    
-    bindEvents() {
-      this.prevBtn?.addEventListener('click', () => this.prevSlide());
-      this.nextBtn?.addEventListener('click', () => this.nextSlide());
-      
-      this.indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => this.goToSlide(index));
-      });
-      
-      this.thumbnails.forEach((thumbnail, index) => {
-        thumbnail.addEventListener('click', () => this.goToSlide(index));
-      });
-      
-      // Open lightbox when clicking on images
-      this.slides.forEach((slide, index) => {
-        const img = slide.querySelector('.gallery-slider__image');
-        img.addEventListener('click', () => {
-          // Always use the current slide index, not the clicked slide index
-          this.openLightbox(this.currentSlide);
-        });
-        img.style.cursor = 'pointer'; // Add visual feedback
-      });
-      
-      this.thumbnails.forEach((thumbnail, index) => {
-        // Regular click for navigation
-        thumbnail.addEventListener('click', (e) => {
-          // Only navigate if it's not a special click
-          if (!e.ctrlKey && !e.metaKey && e.button !== 2) {
-            this.goToSlide(index);
-          }
-        });
-        
-        // Special clicks for lightbox
-        thumbnail.addEventListener('click', (e) => {
-          if (e.ctrlKey || e.metaKey || e.button === 2) {
-            e.preventDefault();
-            this.goToSlide(index); // Navigate first
-            setTimeout(() => this.openLightbox(index), 50); // Then open lightbox
-          }
-        });
-        
-        // Double-click to open lightbox
-        thumbnail.addEventListener('dblclick', (e) => {
-          e.preventDefault();
-          this.goToSlide(index); // Navigate first
-          setTimeout(() => this.openLightbox(index), 50); // Then open lightbox
-        });
-      });
-      
-      // Lightbox events - ensure these are bound properly
-      if (this.lightboxClose) {
-        this.lightboxClose.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          this.closeLightbox();
-        });
-      }
-      
-      if (this.lightboxBackdrop) {
-        this.lightboxBackdrop.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          this.closeLightbox();
-        });
-      }
-      
-      // Close lightbox when clicking outside the image
-      const lightboxContainer = this.lightbox.querySelector('.gallery-lightbox__container');
-      if (lightboxContainer) {
-        lightboxContainer.addEventListener('click', (e) => {
-          // Only close if the click target is the container itself, not its children
-          if (e.target === lightboxContainer) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.closeLightbox();
-          }
-        });
-      }
-      
-      // Prevent closing when clicking on the image or its content
-      const lightboxContent = this.lightbox.querySelector('.gallery-lightbox__content');
-      if (lightboxContent) {
-        lightboxContent.addEventListener('click', (e) => {
-          // Stop propagation to prevent container click from closing lightbox
-          e.stopPropagation();
-        });
-      }
-      
-      // Also prevent closing when clicking directly on the image
-      if (this.lightboxImage) {
-        this.lightboxImage.addEventListener('click', (e) => {
-          e.stopPropagation();
-        });
-      }
-      
-      // Prevent closing when clicking on caption
-      if (this.lightboxCaption) {
-        this.lightboxCaption.addEventListener('click', (e) => {
-          e.stopPropagation();
-        });
-      }
-      
-      if (this.lightboxPrev) {
-        this.lightboxPrev.addEventListener('click', () => this.lightboxPrevImage());
-      }
-      
-      if (this.lightboxNext) {
-        this.lightboxNext.addEventListener('click', () => this.lightboxNextImage());
-      }
-      
-      // Keyboard navigation - use arrow function to maintain 'this' context
-      this.keyboardHandler = (e) => {
-        if (this.isLightboxOpen) {
-          switch(e.key) {
-            case 'Escape':
-              e.preventDefault();
-              e.stopPropagation();
-              this.closeLightbox();
-              break;
-            case 'ArrowLeft':
-              e.preventDefault();
-              this.lightboxPrevImage();
-              break;
-            case 'ArrowRight':
-              e.preventDefault();
-              this.lightboxNextImage();
-              break;
-          }
-        } else if (this.element.contains(document.activeElement)) {
-          switch(e.key) {
-            case 'ArrowLeft':
-              e.preventDefault();
-              this.prevSlide();
-              break;
-            case 'ArrowRight':
-              e.preventDefault();
-              this.nextSlide();
-              break;
-            case 'Enter':
-            case ' ':
-              if (e.target.classList.contains('gallery-slider__image')) {
-                e.preventDefault();
-                this.openLightbox(this.currentSlide);
-              }
-              break;
-          }
-        }
-      };
-      
-      // Bind keyboard handler
-      document.addEventListener('keydown', this.keyboardHandler);
-      
-      // Pause autoplay on hover
-      this.element.addEventListener('mouseenter', () => this.pauseAutoplay());
-      this.element.addEventListener('mouseleave', () => this.resumeAutoplay());
-      
-      // Handle window resize - only recalculate if container width changes significantly
-      this.resizeHandler = () => {
-        if (this.isLightboxOpen) {
-          this.constrainImageToViewport();
-        } else {
-          // Only recalculate if width changed significantly (>50px)
-          const container = this.element.querySelector('.gallery-slider__container');
-          const currentWidth = container.offsetWidth;
-          if (Math.abs(currentWidth - this.lastContainerWidth) > 50) {
-            this.lastContainerWidth = currentWidth;
-            this.calculateFixedHeight();
-          }
-        }
-      };
-      
-      this.lastContainerWidth = this.element.querySelector('.gallery-slider__container').offsetWidth;
-      window.addEventListener('resize', this.resizeHandler);
-    }
-    
-    openLightbox(index) {
-      this.isLightboxOpen = true;
-      // Ensure we're using the correct index
-      const targetIndex = index !== undefined ? index : this.currentSlide;
-      this.updateLightboxImage(targetIndex);
-      this.lightbox.setAttribute('aria-hidden', 'false');
-      this.lightbox.classList.add('gallery-lightbox--active');
-      document.body.style.overflow = 'hidden';
-      this.pauseAutoplay();
-      
-      // Focus the close button for accessibility
-      setTimeout(() => this.lightboxClose.focus(), 100);
-    }
-    
-    closeLightbox() {
-      this.isLightboxOpen = false;
-      this.lightbox.setAttribute('aria-hidden', 'true');
-      this.lightbox.classList.remove('gallery-lightbox--active');
-      document.body.style.overflow = '';
-      this.resumeAutoplay();
-    }
-    
-    updateLightboxImage(index) {
-      // Ensure index is within bounds
-      const safeIndex = Math.max(0, Math.min(index, this.totalSlides - 1));
-      const imageData = this.imageData[safeIndex];
-      
-      this.lightboxImage.src = imageData.src;
-      this.lightboxImage.alt = imageData.alt;
-      this.lightboxCaption.innerHTML = imageData.caption;
-      this.lightboxCurrent.textContent = safeIndex + 1;
-      
-      // Update the current slide to match lightbox
-      this.currentSlide = safeIndex;
-      
-      // Ensure image loads with proper constraints
-      this.lightboxImage.onload = () => {
-        this.constrainImageToViewport();
-      };
-      
-      // Update navigation button states
-      this.lightboxPrev.style.display = this.totalSlides > 1 ? 'flex' : 'none';
-      this.lightboxNext.style.display = this.totalSlides > 1 ? 'flex' : 'none';
-    }
-
-    constrainImageToViewport() {
-      const img = this.lightboxImage;
-      
-      // Get viewport dimensions
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      
-      // Account for padding and controls
-      const padding = 160; // Space for nav buttons and controls
-      const mobilePadding = window.innerWidth <= 768 ? 120 : padding;
-      
-      const maxWidth = viewportWidth - mobilePadding;
-      const maxHeight = viewportHeight - mobilePadding;
-      
-      // Set constraints via CSS
-      img.style.maxWidth = `${maxWidth}px`;
-      img.style.maxHeight = `${maxHeight}px`;
-    }
-    
-    lightboxPrevImage() {
-      const prevIndex = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
-      this.updateLightboxImage(prevIndex);
-      this.updateSlide(prevIndex); // Sync gallery with lightbox
-    }
-    
-    lightboxNextImage() {
-      const nextIndex = (this.currentSlide + 1) % this.totalSlides;
-      this.updateLightboxImage(nextIndex);
-      this.updateSlide(nextIndex); // Sync gallery with lightbox
-    }
-    
-    updateSlide(index) {
-      // Update active slide
-      this.slides.forEach((slide, i) => {
-        slide.classList.toggle('gallery-slider__slide--active', i === index);
-      });
-      
-      // Update indicators
-      this.indicators.forEach((indicator, i) => {
-        indicator.classList.toggle('gallery-slider__indicator--active', i === index);
-        indicator.setAttribute('aria-selected', i === index);
-      });
-      
-      // Update thumbnails
-      this.thumbnails.forEach((thumbnail, i) => {
-        thumbnail.classList.toggle('gallery-slider__thumbnail--active', i === index);
-      });
-      
-      this.currentSlide = index;
-      
-      // Scroll thumbnails to show active thumbnail
-      this.scrollToActiveThumbnail(index);
-      
-      // No need to adjust container height - it's fixed
-    }
-    
-    scrollToActiveThumbnail(index) {
-      if (this.thumbnails.length === 0) return;
-      
-      const thumbnailsContainer = this.element.querySelector('.gallery-slider__thumbnails');
-      if (!thumbnailsContainer) return;
-      
-      const activeThumbnail = this.thumbnails[index];
-      if (!activeThumbnail) return;
-      
-      // Get container and thumbnail dimensions
-      const containerRect = thumbnailsContainer.getBoundingClientRect();
-      const thumbnailRect = activeThumbnail.getBoundingClientRect();
-      
-      // Calculate scroll position to center the active thumbnail
-      const containerCenter = containerRect.width / 2;
-      const thumbnailCenter = thumbnailRect.left - containerRect.left + (thumbnailRect.width / 2);
-      const scrollOffset = thumbnailCenter - containerCenter;
-      
-      // Smooth scroll to position
-      thumbnailsContainer.scrollTo({
-        left: thumbnailsContainer.scrollLeft + scrollOffset,
-        behavior: 'smooth'
-      });
-    }
-    
-    nextSlide() {
-      const next = (this.currentSlide + 1) % this.totalSlides;
-      this.goToSlide(next);
-    }
-    
-    prevSlide() {
-      const prev = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
-      this.goToSlide(prev);
-    }
-    
-    goToSlide(index) {
-      if (index >= 0 && index < this.totalSlides) {
-        this.updateSlide(index);
-        this.resetAutoplay();
-      }
-    }
-    
-    startAutoplay() {
-      if (!this.autoplay) return;
-      this.autoplayTimer = setInterval(() => this.nextSlide(), this.interval);
-    }
-    
-    pauseAutoplay() {
-      if (this.autoplayTimer) {
-        clearInterval(this.autoplayTimer);
-        this.autoplayTimer = null;
-      }
-    }
-    
-    resumeAutoplay() {
-      if (this.autoplay && !this.autoplayTimer) {
-        this.startAutoplay();
-      }
-    }
-    
-    resetAutoplay() {
-      this.pauseAutoplay();
-      this.resumeAutoplay();
-    }
-  }
-  
-  // Initialize all gallery sliders
-  document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.gallery-slider').forEach(slider => {
-      new GallerySlider(slider);
-    });
-  });
-})();
-</script>
+{{/* Emit the bundled gallery script once per page even if invoked multiple times. */}}
+{{ if not (.Page.Store.Get "gallery-slider-js-loaded") }}
+  {{ .Page.Store.Set "gallery-slider-js-loaded" true }}
+  {{ with resources.Get "js/gallery-slider.js" }}
+    {{ $gallerySliderJS := . | resources.Minify | fingerprint }}
+    <script defer src="{{ $gallerySliderJS.RelPermalink }}" integrity="{{ $gallerySliderJS.Data.Integrity }}" crossorigin="anonymous"></script>
+  {{ else }}
+    {{ errorf "Required file 'gallery-slider.js' not found in assets/js/ directory" }}
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/knowledge-graph.html b/layouts/partials/knowledge-graph.html
index 57c36c0..5ba8df3 100644
--- a/layouts/partials/knowledge-graph.html
+++ b/layouts/partials/knowledge-graph.html
@@ -4,7 +4,7 @@
   
   <div class="controls-dropdown">
     <button id="toggle-controls" class="toggle-controls-btn" aria-expanded="false" aria-controls="graph-controls-panel">
-      <span>Physics Controls</span>
+      <span>{{ i18n "knowledge_graph_physics_controls" | default "Physics Controls" }}</span>
       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16" class="toggle-icon">
         <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
       </svg>
@@ -12,44 +12,44 @@
     
     <div id="graph-controls-panel" class="graph-controls collapsed">
       <div class="control-group">
-        <label for="charge-strength">Repulsion:</label>
+        <label for="charge-strength">{{ i18n "knowledge_graph_repulsion" | default "Repulsion:" }}</label>
         <span class="value-display">100</span>
         <input type="range" id="charge-strength" min="10" max="300" value="100" class="slider">
       </div>
       <div class="control-group">
-        <label for="link-distance">Link Distance:</label>
+        <label for="link-distance">{{ i18n "knowledge_graph_link_distance" | default "Link Distance:" }}</label>
         <span class="value-display">30</span>
         <input type="range" id="link-distance" min="10" max="200" value="30" class="slider">
       </div>
       <div class="control-group">
-        <label for="collision-radius">Node Spacing:</label>
+        <label for="collision-radius">{{ i18n "knowledge_graph_node_spacing" | default "Node Spacing:" }}</label>
         <span class="value-display">1.2×</span>
         <input type="range" id="collision-radius" min="1" max="3" value="1.2" step="0.1" class="slider">
       </div>
       <div class="control-group">
-        <label for="center-gravity">Center Gravity:</label>
+        <label for="center-gravity">{{ i18n "knowledge_graph_center_gravity" | default "Center Gravity:" }}</label>
         <span class="value-display">0.1</span>
         <input type="range" id="center-gravity" min="0" max="1" value="0.1" step="0.05" class="slider">
       </div>
-      <button id="reset-physics" class="reset-button">Reset to Default</button>
+      <button id="reset-physics" class="reset-button">{{ i18n "knowledge_graph_reset_default" | default "Reset to Default" }}</button>
     </div>
   </div>
   
   <div class="graph-actions">
     <div class="graph-filter-dropdown">
-      <button id="filter-graph-button" class="graph-filter-button" aria-label="Filter graph" aria-expanded="false" aria-controls="filter-options">
+      <button id="filter-graph-button" class="graph-filter-button" aria-label="{{ i18n "knowledge_graph_filter_aria" | default "Filter graph" }}" aria-expanded="false" aria-controls="filter-options">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
           <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
         </svg>
       </button>
       <div id="filter-options" class="filter-options-dropdown">
         <div class="filter-section">
-          <label for="filter-type">Filter by:</label>
+          <label for="filter-type">{{ i18n "knowledge_graph_filter_by" | default "Filter by:" }}</label>
           <select id="filter-type" class="filter-select">
-            <option value="none">All Nodes</option>
-            <option value="category">Category</option>
-            <option value="tag">Tag</option>
-            <option value="search">Node Name</option>
+            <option value="none">{{ i18n "knowledge_graph_all_nodes" | default "All Nodes" }}</option>
+            <option value="category">{{ i18n "knowledge_graph_filter_category" | default "Category" }}</option>
+            <option value="tag">{{ i18n "knowledge_graph_filter_tag" | default "Tag" }}</option>
+            <option value="search">{{ i18n "knowledge_graph_filter_search" | default "Node Name" }}</option>
           </select>
         </div>
         <div id="category-filters" class="filter-options hidden">
@@ -59,27 +59,27 @@
           <!-- Tags will be dynamically populated -->
         </div>
         <div id="search-filter" class="filter-options hidden">
-          <input type="text" id="node-search" placeholder="Search nodes..." class="search-input">
+          <input type="text" id="node-search" placeholder="{{ i18n "knowledge_graph_search_placeholder" | default "Search nodes..." }}" class="search-input">
         </div>
-        <button id="clear-filters" class="filter-button">Clear Filters</button>
+        <button id="clear-filters" class="filter-button">{{ i18n "knowledge_graph_clear_filters" | default "Clear Filters" }}</button>
       </div>
     </div>
-    
+
     <div class="graph-save-dropdown">
-      <button id="save-graph-button" class="graph-save-button" aria-label="Save graph as image" aria-expanded="false" aria-controls="save-options">
+      <button id="save-graph-button" class="graph-save-button" aria-label="{{ i18n "knowledge_graph_save_aria" | default "Save graph as image" }}" aria-expanded="false" aria-controls="save-options">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
           <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
           <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
         </svg>
       </button>
       <div id="save-options" class="save-options-dropdown">
-        <button class="save-option" data-format="png">Save as PNG</button>
-        <button class="save-option" data-format="svg">Save as SVG</button>
-        <button class="save-option" data-format="jpeg">Save as JPEG</button>
+        <button class="save-option" data-format="png">{{ i18n "knowledge_graph_save_png" | default "Save as PNG" }}</button>
+        <button class="save-option" data-format="svg">{{ i18n "knowledge_graph_save_svg" | default "Save as SVG" }}</button>
+        <button class="save-option" data-format="jpeg">{{ i18n "knowledge_graph_save_jpeg" | default "Save as JPEG" }}</button>
       </div>
     </div>
-    
-    <button id="fullscreen-button" class="graph-fullscreen-button" aria-label="View graph in fullscreen">
+
+    <button id="fullscreen-button" class="graph-fullscreen-button" aria-label="{{ i18n "knowledge_graph_fullscreen_aria" | default "View graph in fullscreen" }}">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
         <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/>
       </svg>
@@ -93,19 +93,19 @@
     
     <div class="fullscreen-actions">
       <div class="graph-filter-dropdown">
-        <button id="fullscreen-filter-button" class="graph-filter-button" aria-label="Filter graph" aria-expanded="false" aria-controls="fullscreen-filter-options">
+        <button id="fullscreen-filter-button" class="graph-filter-button" aria-label="{{ i18n "knowledge_graph_filter_aria" | default "Filter graph" }}" aria-expanded="false" aria-controls="fullscreen-filter-options">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
             <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
           </svg>
         </button>
         <div id="fullscreen-filter-options" class="filter-options-dropdown">
           <div class="filter-section">
-            <label for="fullscreen-filter-type">Filter by:</label>
+            <label for="fullscreen-filter-type">{{ i18n "knowledge_graph_filter_by" | default "Filter by:" }}</label>
             <select id="fullscreen-filter-type" class="filter-select">
-              <option value="none">All Nodes</option>
-              <option value="category">Category</option>
-              <option value="tag">Tag</option>
-              <option value="search">Node Name</option>
+              <option value="none">{{ i18n "knowledge_graph_all_nodes" | default "All Nodes" }}</option>
+              <option value="category">{{ i18n "knowledge_graph_filter_category" | default "Category" }}</option>
+              <option value="tag">{{ i18n "knowledge_graph_filter_tag" | default "Tag" }}</option>
+              <option value="search">{{ i18n "knowledge_graph_filter_search" | default "Node Name" }}</option>
             </select>
           </div>
           <div id="fullscreen-category-filters" class="filter-options hidden">
@@ -115,27 +115,27 @@
             <!-- Tags will be dynamically populated -->
           </div>
           <div id="fullscreen-search-filter" class="filter-options hidden">
-            <input type="text" id="fullscreen-node-search" placeholder="Search nodes..." class="search-input">
+            <input type="text" id="fullscreen-node-search" placeholder="{{ i18n "knowledge_graph_search_placeholder" | default "Search nodes..." }}" class="search-input">
           </div>
-          <button id="fullscreen-clear-filters" class="filter-button">Clear Filters</button>
+          <button id="fullscreen-clear-filters" class="filter-button">{{ i18n "knowledge_graph_clear_filters" | default "Clear Filters" }}</button>
         </div>
       </div>
-      
+
       <div class="graph-save-dropdown">
-        <button id="fullscreen-save-button" class="graph-save-button" aria-label="Save graph as image" aria-expanded="false" aria-controls="fullscreen-save-options">
+        <button id="fullscreen-save-button" class="graph-save-button" aria-label="{{ i18n "knowledge_graph_save_aria" | default "Save graph as image" }}" aria-expanded="false" aria-controls="fullscreen-save-options">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
             <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
             <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
           </svg>
         </button>
         <div id="fullscreen-save-options" class="save-options-dropdown">
-          <button class="save-option" data-format="png" data-target="fullscreen">Save as PNG</button>
-          <button class="save-option" data-format="svg" data-target="fullscreen">Save as SVG</button>
-          <button class="save-option" data-format="jpeg" data-target="fullscreen">Save as JPEG</button>
+          <button class="save-option" data-format="png" data-target="fullscreen">{{ i18n "knowledge_graph_save_png" | default "Save as PNG" }}</button>
+          <button class="save-option" data-format="svg" data-target="fullscreen">{{ i18n "knowledge_graph_save_svg" | default "Save as SVG" }}</button>
+          <button class="save-option" data-format="jpeg" data-target="fullscreen">{{ i18n "knowledge_graph_save_jpeg" | default "Save as JPEG" }}</button>
         </div>
       </div>
-      
-      <button id="close-fullscreen" class="close-fullscreen-button" aria-label="Close fullscreen view">
+
+      <button id="close-fullscreen" class="close-fullscreen-button" aria-label="{{ i18n "knowledge_graph_close_fullscreen_aria" | default "Close fullscreen view" }}">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
           <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
         </svg>
@@ -146,34 +146,34 @@
     
     <div class="controls-dropdown fullscreen-controls">
       <button id="fullscreen-toggle-controls" class="toggle-controls-btn" aria-expanded="false" aria-controls="fullscreen-graph-controls-panel">
-        <span>Physics Controls</span>
+        <span>{{ i18n "knowledge_graph_physics_controls" | default "Physics Controls" }}</span>
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16" class="toggle-icon">
           <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
         </svg>
       </button>
-      
+
       <div id="fullscreen-graph-controls-panel" class="graph-controls collapsed">
         <div class="control-group">
-          <label for="fullscreen-charge-strength">Repulsion:</label>
+          <label for="fullscreen-charge-strength">{{ i18n "knowledge_graph_repulsion" | default "Repulsion:" }}</label>
           <span class="value-display">200</span>
           <input type="range" id="fullscreen-charge-strength" min="10" max="300" value="200" class="slider">
         </div>
         <div class="control-group">
-          <label for="fullscreen-link-distance">Link Distance:</label>
+          <label for="fullscreen-link-distance">{{ i18n "knowledge_graph_link_distance" | default "Link Distance:" }}</label>
           <span class="value-display">60</span>
           <input type="range" id="fullscreen-link-distance" min="10" max="200" value="60" class="slider">
         </div>
         <div class="control-group">
-          <label for="fullscreen-collision-radius">Node Spacing:</label>
+          <label for="fullscreen-collision-radius">{{ i18n "knowledge_graph_node_spacing" | default "Node Spacing:" }}</label>
           <span class="value-display">1.8×</span>
           <input type="range" id="fullscreen-collision-radius" min="1" max="3" value="1.8" step="0.1" class="slider">
         </div>
         <div class="control-group">
-          <label for="fullscreen-center-gravity">Center Gravity:</label>
+          <label for="fullscreen-center-gravity">{{ i18n "knowledge_graph_center_gravity" | default "Center Gravity:" }}</label>
           <span class="value-display">0.1</span>
           <input type="range" id="fullscreen-center-gravity" min="0" max="1" value="0.1" step="0.05" class="slider">
         </div>
-        <button id="fullscreen-reset-physics" class="reset-button">Reset to Default</button>
+        <button id="fullscreen-reset-physics" class="reset-button">{{ i18n "knowledge_graph_reset_default" | default "Reset to Default" }}</button>
       </div>
     </div>
   </div>
@@ -182,7 +182,7 @@
 <script type="application/json" id="graph-data">
   {{- $nodes := slice -}}
   {{- $links := slice -}}
-  {{- range .Site.Pages -}}
+  {{- range site.Pages -}}
     {{- $nodeID := .RelPermalink -}}
     {{- $node := dict "id" $nodeID "title" .Title "category" .Section -}}
     {{- $nodes = $nodes | append $node -}}
@@ -191,17 +191,29 @@
       {{- $links = $links | append $link -}}
     {{- end -}}
   {{- end -}}
-  {
-    "nodes": {{ $nodes | jsonify }},
-    "links": {{ $links | jsonify }}
-  }
+  {{ dict "nodes" $nodes "links" $links | jsonify }}
 </script>
 
-{{ $graphScript := resources.Get "js/knowledge-graph.js" }}
-{{ if $graphScript }}
-  {{ $graphScript = $graphScript | resources.ExecuteAsTemplate "js/knowledge-graph.js" . | resources.Minify | fingerprint }}
-  <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
-  <script src="{{ $graphScript.RelPermalink }}" integrity="{{ $graphScript.Data.Integrity }}"></script>
+{{/* D3 with SRI: prefer build-time fetch via resources.GetRemote so we get a verified hash. */}}
+{{ $d3URL := "https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js" }}
+{{ $d3Integrity := "" }}
+{{ $d3Resource := resources.GetRemote $d3URL }}
+{{ if $d3Resource }}
+  {{ if $d3Resource.Err }}
+    {{ warnf "knowledge-graph: failed to fetch D3 for SRI: %s" $d3Resource.Err }}
+  {{ else }}
+    {{ $d3Integrity = $d3Resource.Data.Integrity }}
+  {{ end }}
+{{ end }}
+
+{{ with resources.Get "js/knowledge-graph.js" }}
+  {{ $graphScript := . | resources.ExecuteAsTemplate "js/knowledge-graph.js" $ | resources.Minify | fingerprint }}
+  {{ if $d3Integrity }}
+    <script defer src="{{ $d3URL }}" integrity="{{ $d3Integrity }}" crossorigin="anonymous"></script>
+  {{ else }}
+    <script defer src="{{ $d3URL }}" crossorigin="anonymous"></script>
+  {{ end }}
+  <script defer src="{{ $graphScript.RelPermalink }}" integrity="{{ $graphScript.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ else }}
   {{ errorf "Required file 'knowledge-graph.js' not found in assets/js/ directory" }}
 {{ end }}
diff --git a/layouts/partials/lda-analysis.html b/layouts/partials/lda-analysis.html
index c934b92..571e039 100644
--- a/layouts/partials/lda-analysis.html
+++ b/layouts/partials/lda-analysis.html
@@ -1,11 +1,11 @@
 <div class="about-profile-container">
   <div class="lda-box">
-    <h2 class="lda-title">Topic Analysis (LDA)</h2>
-    
+    <h2 class="lda-title">{{ i18n "lda_title" | default "Topic Analysis (LDA)" }}</h2>
+
     <div class="lda-container">
       <div class="lda-graph-wrapper">
         <div class="lda-graph">
-          <h3>Topic Distribution</h3>
+          <h3>{{ i18n "lda_topic_distribution" | default "Topic Distribution" }}</h3>
           <div id="lda-chart" class="chart-responsive">
             <!-- Remove hardcoded sample bars - they're immediately replaced by JavaScript -->
             <div id="lda-chart-bars" class="lda-chart-bars">
@@ -14,13 +14,13 @@ <h3>Topic Distribution</h3>
           </div>
         </div>
       </div>
-      
+
       <div class="lda-table-wrapper">
         <div class="lda-table">
-          <h3>Topic Details</h3>
+          <h3>{{ i18n "lda_topic_details" | default "Topic Details" }}</h3>
           <div id="topic-list" class="topic-list responsive-table">
             <div class="lda-loading">
-              <p>Analyzing content using GPU-accelerated LDA...</p>
+              <p>{{ i18n "lda_loading" | default "Analyzing content using GPU-accelerated LDA..." }}</p>
             </div>
           </div>
           <!-- Tooltip container moved outside of table wrapper for better positioning -->
@@ -40,8 +40,10 @@ <h4 class="tooltip-title"></h4>
     
     <!-- Mobile-specific controls -->
     <div class="lda-mobile-controls">
-      <button id="toggle-view" class="btn-toggle-view">
-        <span class="toggle-text">Switch to Table View</span>
+      <button id="toggle-view" class="btn-toggle-view"
+              data-i18n-table="{{ i18n "lda_switch_to_table" | default "Switch to Table View" }}"
+              data-i18n-chart="{{ i18n "lda_switch_to_chart" | default "Switch to Chart View" }}">
+        <span class="toggle-text">{{ i18n "lda_switch_to_table" | default "Switch to Table View" }}</span>
       </button>
     </div>
     
@@ -54,20 +56,18 @@ <h4 class="tooltip-title"></h4>
 
 <!-- Embed document data for LDA analysis -->
 <script type="application/json" id="lda-documents-data">
-[
-  {{ $first := true }}
-  {{ range where .Site.RegularPages "Section" "in" (slice "posts" "docs") }}
-    {{ if not $first }},{{ end }}
-    {
-      "content": {{ printf "%s %s %s" .Title .Description .Plain | jsonify }},
-      "type": {{ .Section | jsonify }},
-      "title": {{ .Title | jsonify }},
-      "url": {{ .RelPermalink | jsonify }},
-      "date": {{ .Date.Format "2006-01-02" | jsonify }}
-    }
-    {{ $first = false }}
-  {{ end }}
-]
+{{- $docs := slice -}}
+{{- range where site.RegularPages "Section" "in" (slice "posts" "docs") -}}
+  {{- $doc := dict
+      "content" (printf "%s %s %s" .Title .Description .Plain)
+      "type" .Section
+      "title" .Title
+      "url" .RelPermalink
+      "date" (time.Format "2006-01-02" .Date)
+  -}}
+  {{- $docs = $docs | append $doc -}}
+{{- end -}}
+{{ $docs | jsonify }}
 </script>
 
 <!-- Load LDA CSS -->
@@ -76,114 +76,26 @@ <h4 class="tooltip-title"></h4>
   <link rel="stylesheet" href="{{ $ldaCSS.RelPermalink }}" integrity="{{ $ldaCSS.Data.Integrity }}" crossorigin="anonymous">
 {{ end }}
 
-<!-- Optimized mobile interaction and tooltip script -->
-<script>
-(function() {
-  'use strict';
-  
-  // Cache DOM elements and state
-  let toggleBtn, container, toggleText, tooltip;
-  let showingTable = false;
-  
-  document.addEventListener('DOMContentLoaded', function() {
-    // Cache elements once
-    toggleBtn = document.getElementById('toggle-view');
-    container = document.querySelector('.lda-container');
-    toggleText = document.querySelector('.toggle-text');
-    tooltip = document.getElementById('topic-tooltip');
-    
-    // Initialize mobile toggle functionality
-    if (toggleBtn && container && toggleText) {
-      toggleBtn.addEventListener('click', handleToggleView);
-    }
-    
-    // Initialize tooltip functions for LDA script
-    initializeTooltipFunctions();
-  });
-  
-  function handleToggleView() {
-    showingTable = !showingTable;
-    
-    if (showingTable) {
-      container.classList.add('show-table');
-      toggleText.textContent = 'Switch to Chart View';
-    } else {
-      container.classList.remove('show-table');
-      toggleText.textContent = 'Switch to Table View';
-    }
-  }
-  
-  function initializeTooltipFunctions() {
-    if (!tooltip) return;
-    
-    // Global tooltip functions for LDA script
-    window.showTopicTooltip = function(event, topicData) {
-      if (!tooltip || !topicData) return;
-      
-      // Update tooltip content
-      const titleEl = tooltip.querySelector('.tooltip-title');
-      const keywordsEl = tooltip.querySelector('.tooltip-keywords');
-      const documentsEl = tooltip.querySelector('.tooltip-documents');
-      const confidenceEl = tooltip.querySelector('.tooltip-confidence');
-      
-      if (titleEl) titleEl.textContent = `Topic ${topicData.id}: ${topicData.label}`;
-      
-      if (keywordsEl && topicData.keywords) {
-        keywordsEl.innerHTML = topicData.keywords
-          .map(k => `<span class="keyword">${k}</span>`)
-          .join('');
-      }
-      
-      if (documentsEl) {
-        documentsEl.textContent = `${topicData.documentCount} documents • ${topicData.percentage}%`;
-      }
-      
-      if (confidenceEl) {
-        confidenceEl.textContent = `Confidence: ${topicData.confidence}%`;
-      }
-      
-      // Position tooltip
-      const rect = event.target.getBoundingClientRect();
-      const tooltipRect = tooltip.getBoundingClientRect();
-      
-      // Calculate position with viewport bounds checking
-      let left = rect.left;
-      let top = rect.top - tooltipRect.height - 10;
-      
-      // Adjust if tooltip would go off-screen
-      if (left + tooltipRect.width > window.innerWidth) {
-        left = window.innerWidth - tooltipRect.width - 10;
-      }
-      if (left < 10) left = 10;
-      
-      if (top < 10) {
-        top = rect.bottom + 10;
-      }
-      
-      tooltip.style.left = left + 'px';
-      tooltip.style.top = top + 'px';
-      tooltip.classList.add('visible');
-    };
-    
-    window.hideTopicTooltip = function() {
-      if (tooltip) {
-        tooltip.classList.remove('visible');
-      }
-    };
-    
-    // Hide tooltip when clicking elsewhere
-    document.addEventListener('click', function(event) {
-      if (tooltip && !event.target.closest('.topic-bar-container')) {
-        window.hideTopicTooltip();
-      }
-    });
-  }
-})();
-</script>
+{{/* TensorFlow.js with SRI via resources.GetRemote */}}
+{{ $tfURL := "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js" }}
+{{ $tfIntegrity := "" }}
+{{ $tfResource := resources.GetRemote $tfURL }}
+{{ if $tfResource }}
+  {{ if $tfResource.Err }}
+    {{ warnf "lda-analysis: failed to fetch tfjs for SRI: %s" $tfResource.Err }}
+  {{ else }}
+    {{ $tfIntegrity = $tfResource.Data.Integrity }}
+  {{ end }}
+{{ end }}
+{{ if $tfIntegrity }}
+  <script defer src="{{ $tfURL }}" integrity="{{ $tfIntegrity }}" crossorigin="anonymous"></script>
+{{ else }}
+  <script defer src="{{ $tfURL }}" crossorigin="anonymous"></script>
+{{ end }}
 
-<!-- Load TensorFlow.js then LDA analysis script -->
-<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
 {{ with resources.Get "js/lda-analysis.js" }}
-  {{ $ldaJS := . | js.Build | minify | fingerprint }}
-  <script src="{{ $ldaJS.RelPermalink }}" integrity="{{ $ldaJS.Data.Integrity }}" crossorigin="anonymous"></script>
+  {{ $ldaJS := . | js.Build (dict "minify" true) | fingerprint }}
+  <script defer src="{{ $ldaJS.RelPermalink }}" integrity="{{ $ldaJS.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ else }}
+  {{ errorf "Required file 'lda-analysis.js' not found in assets/js/ directory" }}
 {{ end }}
diff --git a/layouts/partials/zipfs-law.html b/layouts/partials/zipfs-law.html
index 5858934..075117b 100644
--- a/layouts/partials/zipfs-law.html
+++ b/layouts/partials/zipfs-law.html
@@ -1,10 +1,10 @@
 <div class="about-profile-container">
   <div class="zipf-box">
-    <h2 class="zipf-title">Content Analysis (Zipf's Law)</h2>
-    
+    <h2 class="zipf-title">{{ i18n "zipf_title" | default "Content Analysis (Zipf's Law)" }}</h2>
+
     <div class="zipf-container">
       <div class="zipf-graph">
-        <h3>Word Frequency Distribution</h3>
+        <h3>{{ i18n "zipf_word_freq_distribution" | default "Word Frequency Distribution" }}</h3>
         <!-- Wrapper for chart with relative positioning -->
         <div class="zipf-chart-wrapper">
           <div id="zipf-chart"></div>
@@ -29,9 +29,9 @@ <h3>Word Frequency Distribution</h3>
                 </svg>
               </button>
               <div id="zipf-save-options" class="zipf-save-options">
-                <button class="zipf-save-option" data-format="png">Save as PNG</button>
-                <button class="zipf-save-option" data-format="svg">Save as SVG</button>
-                <button class="zipf-save-option" data-format="jpeg">Save as JPEG</button>
+                <button class="zipf-save-option" data-format="png">{{ i18n "zipf_save_png" | default "Save as PNG" }}</button>
+                <button class="zipf-save-option" data-format="svg">{{ i18n "zipf_save_svg" | default "Save as SVG" }}</button>
+                <button class="zipf-save-option" data-format="jpeg">{{ i18n "zipf_save_jpeg" | default "Save as JPEG" }}</button>
               </div>
             </div>
           </div>
@@ -77,16 +77,16 @@ <h4>About the Cleaned Corpus</h4>
       </div>
       
       <div class="zipf-table">
-        <h3>Word Frequency Analysis</h3>
+        <h3>{{ i18n "zipf_word_freq_analysis" | default "Word Frequency Analysis" }}</h3>
         <div class="table-container">
           <table id="zipf-data">
             <thead>
               <tr>
-                <th>Rank</th>
-                <th>Word</th>
-                <th>Freq (n/total)</th>
-                <th>Pr(%)</th>
-                <th>Ideal</th>
+                <th>{{ i18n "zipf_rank" | default "Rank" }}</th>
+                <th>{{ i18n "zipf_word" | default "Word" }}</th>
+                <th>{{ i18n "zipf_freq" | default "Freq (n/total)" }}</th>
+                <th>{{ i18n "zipf_pr" | default "Pr(%)" }}</th>
+                <th>{{ i18n "zipf_ideal" | default "Ideal" }}</th>
               </tr>
             </thead>
             <tbody>
@@ -119,9 +119,9 @@ <h3>Word Frequency Analysis</h3>
             </svg>
           </button>
           <div id="zipf-fullscreen-save-options" class="zipf-save-options">
-            <button class="zipf-save-option" data-format="png" data-target="fullscreen">Save as PNG</button>
-            <button class="zipf-save-option" data-format="svg" data-target="fullscreen">Save as SVG</button>
-            <button class="zipf-save-option" data-format="jpeg" data-target="fullscreen">Save as JPEG</button>
+            <button class="zipf-save-option" data-format="png" data-target="fullscreen">{{ i18n "zipf_save_png" | default "Save as PNG" }}</button>
+            <button class="zipf-save-option" data-format="svg" data-target="fullscreen">{{ i18n "zipf_save_svg" | default "Save as SVG" }}</button>
+            <button class="zipf-save-option" data-format="jpeg" data-target="fullscreen">{{ i18n "zipf_save_jpeg" | default "Save as JPEG" }}</button>
           </div>
         </div>
       </div>
@@ -136,43 +136,28 @@ <h3>Word Frequency Analysis</h3>
   </div>
 </div>
 
-<!-- Load external JavaScript -->
-{{ $zipfJS := resources.Get "js/zipfs-law.js" }}
-<script src="{{ $zipfJS.RelPermalink }}"></script>
+<!-- Per-page corpus data: built once via Hugo, consumed by zipfs-law.js on init -->
+{{- $mainSections := site.Params.taxonomies.mainSections | default site.Params.mainSections | default (slice "posts" "docs" "blog") -}}
+{{- $words := slice -}}
+{{- range where site.RegularPages "Type" "in" $mainSections -}}
+  {{- with .Title -}}
+    {{- $words = $words | append (split (lower .) " ") -}}
+  {{- end -}}
+  {{- with .Description -}}
+    {{- $words = $words | append (split (lower .) " ") -}}
+  {{- end -}}
+  {{- range .Params.tags -}}
+    {{- $words = $words | append (lower .) -}}
+  {{- end -}}
+  {{- range .Params.categories -}}
+    {{- $words = $words | append (lower .) -}}
+  {{- end -}}
+{{- end }}
+<script type="application/json" id="zipf-data-words">{{ $words | jsonify }}</script>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Extract words from all posts
-  const allWords = [];
-  {{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
-    // Extract from title
-    {{ $title := .Title | lower }}
-    {{ $titleWords := split $title " " }}
-    {{ range $titleWords }}
-      allWords.push("{{ . }}");
-    {{ end }}
-    
-    // Extract from description
-    {{ with .Description }}
-      {{ $desc := . | lower }}
-      {{ $descWords := split $desc " " }}
-      {{ range $descWords }}
-        allWords.push("{{ . }}");
-      {{ end }}
-    {{ end }}
-    
-    // Extract from tags
-    {{ range .Params.tags }}
-      allWords.push("{{ . | lower }}");
-    {{ end }}
-    
-    // Extract from categories
-    {{ range .Params.categories }}
-      allWords.push("{{ . | lower }}");
-    {{ end }}
-  {{ end }}
-  
-  // Initialize Zipf's Law visualization
-  initializeZipfsLaw(allWords);
-});
-</script>
+{{ with resources.Get "js/zipfs-law.js" }}
+  {{ $zipfJS := . | resources.Minify | fingerprint }}
+  <script defer src="{{ $zipfJS.RelPermalink }}" integrity="{{ $zipfJS.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ else }}
+  {{ errorf "Required file 'zipfs-law.js' not found in assets/js/ directory" }}
+{{ end }}