datalog-theme 0.6.0

data/assets/js/academic.js

@@ -0,0 +1,262 @@
+/**
+ * @fileoverview Academic features for citation display and research tools.
+ * Handles citation metrics, publication lists, and academic integrations.
+ * @module academic
+ */
+
+/**
+ * Populates citation metric elements with data from global academic data.
+ * Supports total citations, h-index, i10-index, and yearly breakdowns.
+ * @returns {void}
+ */
+export function populateCitationMetrics() {
+  const academicData = window.DatalogAcademic || {};
+  const publicationsData = window.DatalogPublications || {};
+  const metrics = publicationsData.metrics || (academicData.citations ? academicData.citations.metrics : {}) || {};
+  const yearlyTotals = publicationsData.yearly_totals || (academicData.citations ? academicData.citations.yearly_totals : {}) || {};
+
+  document.querySelectorAll('[data-citation-metric]').forEach((element) => {
+    const key = element.getAttribute('data-citation-metric');
+    if (!key) {
+      return;
+    }
+    let value;
+    switch (key) {
+      case 'total':
+        value = metrics.total;
+        break;
+      case 'h_index':
+      case 'h-index':
+        value = metrics.h_index;
+        break;
+      case 'i10_index':
+      case 'i10-index':
+        value = metrics.i10_index;
+        break;
+      case 'since_total':
+        value = metrics.since_2019 ? metrics.since_2019.total : undefined;
+        break;
+      case 'since_h_index':
+        value = metrics.since_2019 ? metrics.since_2019.h_index : undefined;
+        break;
+      case 'since_i10':
+        value = metrics.since_2019 ? metrics.since_2019.i10_index : undefined;
+        break;
+      default:
+        if (key.startsWith('year_')) {
+          const yearKey = key.replace('year_', '');
+          value = yearlyTotals[yearKey];
+        }
+        break;
+    }
+    if (typeof value === 'number') {
+      element.textContent = value.toLocaleString();
+    } else if (value) {
+      element.textContent = value;
+    }
+  });
+}
+
+/**
+ * Populates citation counts for individual publications.
+ * @returns {void}
+ */
+export function populatePublicationCitations() {
+  const academicData = window.DatalogAcademic || {};
+  const publicationsData = window.DatalogPublications || {};
+  const perPublication = publicationsData.citation_totals || (academicData.citations ? academicData.citations.per_publication : {}) || {};
+
+  document.querySelectorAll('[data-publication-citations]').forEach((element) => {
+    const publicationId = element.getAttribute('data-publication-citations');
+    if (!publicationId) {
+      return;
+    }
+    const lower = publicationId.toLowerCase();
+    let value;
+    if (perPublication[publicationId]) {
+      value = perPublication[publicationId].total || perPublication[publicationId];
+    } else if (perPublication[lower]) {
+      value = perPublication[lower].total || perPublication[lower];
+    }
+    if (typeof value === 'number') {
+      element.textContent = value.toLocaleString();
+    }
+  });
+}
+
+/**
+ * Populates the citation timeline chart with yearly data.
+ * @returns {void}
+ */
+export function populateCitationTimeline() {
+  const academicData = window.DatalogAcademic || {};
+  const publicationsData = window.DatalogPublications || {};
+  const yearlyTotals = publicationsData.yearly_totals || (academicData.citations ? academicData.citations.yearly_totals : {}) || {};
+
+  const timelineContainer = document.querySelector('[data-citation-timeline]');
+  if (timelineContainer && yearlyTotals) {
+    const listItems = timelineContainer.querySelectorAll('li[data-year]');
+    listItems.forEach((item) => {
+      const year = item.getAttribute('data-year');
+      if (!year) {
+        return;
+      }
+      const display = item.querySelector('[data-year-total]');
+      const total = yearlyTotals[year];
+      if (display && typeof total !== 'undefined') {
+        display.textContent = Number(total).toLocaleString();
+        item.style.setProperty('--timeline-value', Math.min(Number(total) / 5, 100));
+      }
+    });
+  }
+}
+
+/**
+ * Attaches copy-to-clipboard handlers to elements matching the selector.
+ * @param {string} selector - CSS selector for trigger elements
+ * @param {function(HTMLElement): string|string} getText - Function to get text or static text
+ * @returns {void}
+ */
+export function attachCopyHandler(selector, getText) {
+  document.querySelectorAll(selector).forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const text = typeof getText === 'function' ? getText(trigger) : getText;
+      if (!text) {
+        return;
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard
+          .writeText(text)
+          .then(() => {
+            trigger.dataset.copied = 'true';
+            trigger.textContent = 'Copied!';
+            setTimeout(() => {
+              trigger.dataset.copied = 'false';
+              trigger.textContent = trigger.dataset.originalText || 'Copy';
+            }, 2000);
+          })
+          .catch(() => {
+            trigger.dataset.copied = 'error';
+            trigger.textContent = 'Error';
+          });
+      }
+    });
+    trigger.dataset.originalText = trigger.textContent;
+  });
+}
+
+/**
+ * Initializes copy handlers for citation and bibliography buttons.
+ * @returns {void}
+ */
+export function initCopyHandlers() {
+  attachCopyHandler('[data-copy-citation]', (trigger) => {
+    const targetId = trigger.getAttribute('data-target');
+    if (!targetId) {
+      return '';
+    }
+    const target = document.getElementById(targetId);
+    return target ? target.value : '';
+  });
+
+  attachCopyHandler('[data-copy-bibliography]', (trigger) => {
+    const targetId = trigger.getAttribute('data-target');
+    if (!targetId) {
+      return '';
+    }
+    const target = document.getElementById(targetId);
+    return target ? target.value : '';
+  });
+}
+
+/**
+ * Initializes the submission status filter for paper tracking.
+ * @returns {void}
+ */
+export function initSubmissionFilter() {
+  const submissionFilter = document.querySelector('[data-submission-filter]');
+  if (submissionFilter) {
+    const cards = document.querySelectorAll('.submission-card');
+    const filterCards = () => {
+      const value = submissionFilter.value;
+      cards.forEach((card) => {
+        if (!value) {
+          card.hidden = false;
+          return;
+        }
+        const status = card.getAttribute('data-submission-status');
+        card.hidden = status !== value;
+      });
+    };
+    submissionFilter.addEventListener('change', filterCards);
+    filterCards();
+  }
+}
+
+/**
+ * Initializes the academic calendar event type filter.
+ * @returns {void}
+ */
+export function initCalendarFilter() {
+  const calendarFilter = document.querySelector('[data-calendar-filter]');
+  const calendarList = document.querySelector('[data-academic-calendar]');
+  if (calendarFilter && calendarList) {
+    const events = calendarList.querySelectorAll('li[data-event-type]');
+    const filterEvents = () => {
+      const value = calendarFilter.value;
+      events.forEach((event) => {
+        if (!value) {
+          event.hidden = false;
+          return;
+        }
+        const type = event.getAttribute('data-event-type');
+        event.hidden = type !== value;
+      });
+    };
+    calendarFilter.addEventListener('change', filterEvents);
+    filterEvents();
+  }
+}
+
+/**
+ * Initializes open science badges with tooltip descriptions.
+ * @returns {void}
+ */
+export function initOpenScienceBadges() {
+  const badges = document.querySelectorAll('.open-science-badge');
+  badges.forEach((badge) => {
+    const description = badge.querySelector('.open-science-badge__description');
+    const criteria = badge.querySelector('.open-science-badge__criteria');
+    const tooltipParts = [];
+    if (description) {
+      tooltipParts.push(description.textContent.trim());
+    }
+    if (criteria) {
+      tooltipParts.push(criteria.textContent.trim());
+    }
+    if (tooltipParts.length) {
+      badge.setAttribute('title', tooltipParts.join(' • '));
+    }
+  });
+}
+
+/**
+ * Initializes all academic features on the page.
+ * @returns {void}
+ */
+export function initAcademicFeatures() {
+  populateCitationMetrics();
+  populatePublicationCitations();
+  populateCitationTimeline();
+  initCopyHandlers();
+  initSubmissionFilter();
+  initCalendarFilter();
+  initOpenScienceBadges();
+}
+
+// Auto-initialize when module loads (backward compatibility)
+if (typeof window !== 'undefined' && document.readyState !== 'loading') {
+  initAcademicFeatures();
+} else if (typeof window !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', initAcademicFeatures);
+}

data/assets/js/analytics-dashboard.js

@@ -0,0 +1,382 @@
+/**
+ * @fileoverview Analytics dashboard for displaying site metrics.
+ * Renders visitor charts, engagement stats, and search term reports.
+ * @module analytics-dashboard
+ */
+
+/**
+ * Retrieves analytics data from global window object.
+ * @returns {Object} Analytics data object
+ */
+function getAnalyticsData() {
+  return window.__DATALOG_ANALYTICS__ || {};
+}
+
+/**
+ * Executes callback when DOM is ready.
+ * @param {function} callback - Function to execute
+ * @returns {void}
+ */
+export function onReady(callback) {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", callback, { once: true });
+  } else {
+    callback();
+  }
+}
+
+/**
+ * Parses rows from an analytics report.
+ * @param {Object} report - Report object with rows array
+ * @returns {Array} Array of row objects
+ */
+export function parseRows(report) {
+  if (!report || !Array.isArray(report.rows)) {
+    return [];
+  }
+  return report.rows;
+}
+
+/**
+ * Formats a number for display using locale settings.
+ * @param {number} value - Number to format
+ * @param {Object} [options] - Intl.NumberFormat options
+ * @returns {string} Formatted number string
+ */
+export function formatNumber(value, options) {
+  const formatter = new Intl.NumberFormat(undefined, options || { maximumFractionDigits: 0 });
+  return formatter.format(value || 0);
+}
+
+/**
+ * Displays a placeholder message in a table container.
+ * @param {HTMLElement} container - Table body element
+ * @param {string} message - Message to display
+ * @param {number} [columns] - Number of columns to span
+ * @returns {void}
+ */
+export function ensurePlaceholder(container, message, columns) {
+  if (!container) return;
+  const colSpan = columns || container.closest("table")?.querySelectorAll("th").length || 1;
+  const tr = document.createElement("tr");
+  tr.className = "placeholder";
+  const td = document.createElement("td");
+  td.setAttribute("colspan", colSpan);
+  td.textContent = message;
+  tr.appendChild(td);
+  container.replaceChildren(tr);
+}
+
+/**
+ * Renders the top posts table with page view and engagement data.
+ * @returns {void}
+ */
+export function renderTopPosts() {
+  const tbody = document.getElementById("analytics-top-posts");
+  const rows = parseRows(getAnalyticsData().top_posts);
+  if (!tbody) return;
+
+  if (!rows.length) {
+    ensurePlaceholder(tbody, tbody.dataset.emptyMessage || "No data available", 3);
+    return;
+  }
+
+  tbody.replaceChildren();
+  rows.forEach((row) => {
+    const dimensions = row.dimensionValues || [];
+    const metrics = row.metricValues || [];
+    const path = dimensions[0]?.value || "";
+    const views = Number(metrics[0]?.value || 0);
+    const engagement = Number(metrics[1]?.value || 0);
+    const tr = document.createElement("tr");
+    const link = document.createElement("a");
+    link.href = path.startsWith("/") ? path : `/${path}`;
+    link.textContent = path || "—";
+    link.rel = "noopener";
+    link.className = "analytics-link";
+
+    const pathCell = document.createElement("td");
+    pathCell.appendChild(link);
+
+    const viewsCell = document.createElement("td");
+    viewsCell.textContent = formatNumber(views);
+
+    const engagementCell = document.createElement("td");
+    engagementCell.textContent = formatNumber(engagement, { maximumFractionDigits: 0 });
+
+    tr.append(pathCell, viewsCell, engagementCell);
+    tbody.appendChild(tr);
+  });
+}
+
+export function renderSearchTerms() {
+  const tbody = document.getElementById("analytics-search-terms");
+  if (!tbody) return;
+  const rows = parseRows(getAnalyticsData().search_terms);
+
+  if (!rows.length) {
+    ensurePlaceholder(tbody, tbody.dataset.emptyMessage || "No search queries recorded", 2);
+    return;
+  }
+
+  tbody.replaceChildren();
+  rows.forEach((row) => {
+    const dimensions = row.dimensionValues || [];
+    const metrics = row.metricValues || [];
+    const term = dimensions[0]?.value || "(not provided)";
+    const sessions = Number(metrics[0]?.value || 0);
+    const tr = document.createElement("tr");
+    const termCell = document.createElement("td");
+    termCell.textContent = term;
+    const countCell = document.createElement("td");
+    countCell.textContent = formatNumber(sessions);
+    tr.append(termCell, countCell);
+    tbody.appendChild(tr);
+  });
+}
+
+export function formatDateLabel(value) {
+  if (!value) return value;
+  if (value.includes("-")) return value;
+  if (value.length === 8) {
+    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
+  }
+  return value;
+}
+
+export function renderVisitorChart() {
+  const canvas = document.getElementById("analytics-visitors-chart");
+  if (!canvas || typeof Chart === "undefined") return;
+
+  const rows = parseRows(getAnalyticsData().visitor_trends);
+  if (!rows.length) return;
+
+  const labels = rows.map((row) => formatDateLabel(row.dimensionValues?.[0]?.value));
+  const totalUsers = rows.map((row) => Number(row.metricValues?.[0]?.value || 0));
+  const newUsers = rows.map((row) => Number(row.metricValues?.[1]?.value || 0));
+  const sessions = rows.map((row) => Number(row.metricValues?.[2]?.value || 0));
+  const pageViews = rows.map((row) => Number(row.metricValues?.[3]?.value || 0));
+
+  new Chart(canvas, {
+    type: "line",
+    data: {
+      labels,
+      datasets: [
+        {
+          label: "Total users",
+          data: totalUsers,
+          borderColor: "#2563eb",
+          backgroundColor: "rgba(37, 99, 235, 0.15)",
+          tension: 0.35,
+          fill: true,
+        },
+        {
+          label: "New users",
+          data: newUsers,
+          borderColor: "#10b981",
+          backgroundColor: "rgba(16, 185, 129, 0.12)",
+          tension: 0.35,
+          fill: false,
+        },
+        {
+          label: "Sessions",
+          data: sessions,
+          borderColor: "#9333ea",
+          backgroundColor: "rgba(147, 51, 234, 0.1)",
+          tension: 0.35,
+          fill: false,
+        },
+        {
+          label: "Page views",
+          data: pageViews,
+          borderColor: "#f97316",
+          backgroundColor: "rgba(249, 115, 22, 0.1)",
+          borderDash: [6, 6],
+          tension: 0.35,
+          fill: false,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: "index", intersect: false },
+      scales: {
+        y: {
+          beginAtZero: true,
+          ticks: { callback: (val) => formatNumber(val) },
+        },
+      },
+      plugins: {
+        legend: { position: "top" },
+      },
+    },
+  });
+}
+
+export function renderEngagementChart() {
+  const canvas = document.getElementById("analytics-engagement-chart");
+  if (!canvas || typeof Chart === "undefined") return;
+  const rows = parseRows(getAnalyticsData().engagement_by_page).slice(0, 10);
+  if (!rows.length) return;
+
+  const labels = rows.map((row) => row.dimensionValues?.[0]?.value || "—");
+  const engagedSessions = rows.map((row) => Number(row.metricValues?.[2]?.value || 0));
+  const views = rows.map((row) => Number(row.metricValues?.[0]?.value || 0));
+
+  new Chart(canvas, {
+    type: "bar",
+    data: {
+      labels,
+      datasets: [
+        {
+          label: "Engaged sessions",
+          data: engagedSessions,
+          backgroundColor: "rgba(59, 130, 246, 0.7)",
+        },
+        {
+          label: "Page views",
+          data: views,
+          backgroundColor: "rgba(14, 165, 233, 0.5)",
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      indexAxis: "y",
+      scales: {
+        x: { beginAtZero: true, ticks: { callback: (val) => formatNumber(val) } },
+      },
+      plugins: {
+        legend: { position: "top" },
+      },
+    },
+  });
+}
+
+export function renderKeyEvents() {
+  const container = document.getElementById("analytics-key-events");
+  if (!container) return;
+  const rows = parseRows(getAnalyticsData().key_events);
+  if (!rows.length) {
+    const li = document.createElement("li");
+    li.className = "placeholder";
+    li.textContent = "No tracked events in the selected window.";
+    container.replaceChildren(li);
+    return;
+  }
+
+  container.replaceChildren();
+  rows.forEach((row) => {
+    const name = row.dimensionValues?.[0]?.value || "event";
+    const count = Number(row.metricValues?.[0]?.value || 0);
+    const li = document.createElement("li");
+    const strong = document.createElement("strong");
+    strong.textContent = formatNumber(count);
+    li.appendChild(strong);
+    li.appendChild(document.createTextNode(` ${name.replace(/_/g, " ")}`));
+    container.appendChild(li);
+  });
+}
+
+export function renderScholar() {
+  const metrics = getAnalyticsData().scholar || {};
+  const totalField = document.querySelector('[data-field="scholar-total"]');
+  const hIndexField = document.querySelector('[data-field="scholar-h-index"]');
+  const i10Field = document.querySelector('[data-field="scholar-i10-index"]');
+  if (totalField) totalField.textContent = metrics.total ? formatNumber(Number(metrics.total)) : "—";
+  if (hIndexField) hIndexField.textContent = metrics.h_index ? formatNumber(Number(metrics.h_index)) : "—";
+  if (i10Field) i10Field.textContent = metrics.i10_index ? formatNumber(Number(metrics.i10_index)) : "—";
+
+  const canvas = document.getElementById("analytics-scholar-chart");
+  if (!canvas || typeof Chart === "undefined") return;
+  const yearly = metrics.yearly_totals || {};
+  const entries = Object.entries(yearly)
+    .map(([year, value]) => [Number(year), Number(value)])
+    .sort((a, b) => a[0] - b[0]);
+  if (!entries.length) return;
+
+  new Chart(canvas, {
+    type: "bar",
+    data: {
+      labels: entries.map((item) => item[0]),
+      datasets: [
+        {
+          label: "Citations",
+          data: entries.map((item) => item[1]),
+          backgroundColor: "rgba(99, 102, 241, 0.8)",
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: { beginAtZero: true, ticks: { callback: (val) => formatNumber(val) } },
+      },
+    },
+  });
+}
+
+export function renderMonthlyReports() {
+  const tbody = document.getElementById("analytics-monthly-reports");
+  if (!tbody) return;
+  const reports = Array.isArray(getAnalyticsData().monthly_reports) ? getAnalyticsData().monthly_reports : [];
+  if (!reports.length) {
+    ensurePlaceholder(tbody, tbody.dataset.emptyMessage || "No monthly reports available", 5);
+    return;
+  }
+
+  tbody.replaceChildren();
+  reports.forEach((report) => {
+    const tr = document.createElement("tr");
+    const month = document.createElement("td");
+    month.textContent = report.month || "—";
+    const total = document.createElement("td");
+    total.textContent = formatNumber(report.total_users || 0);
+    const news = document.createElement("td");
+    news.textContent = formatNumber(report.new_users || 0);
+    const sessions = document.createElement("td");
+    sessions.textContent = formatNumber(report.sessions || 0);
+    const views = document.createElement("td");
+    views.textContent = formatNumber(report.page_views || 0);
+    tr.append(month, total, news, sessions, views);
+    tbody.appendChild(tr);
+  });
+}
+
+export function render() {
+  const status = getAnalyticsData().status;
+  if (status !== "ok") {
+    ["analytics-top-posts", "analytics-search-terms", "analytics-monthly-reports"].forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) {
+        ensurePlaceholder(el, getAnalyticsData().message || "Analytics data unavailable.");
+      }
+    });
+    const events = document.getElementById("analytics-key-events");
+    if (events) {
+      const li = document.createElement("li");
+      li.className = "placeholder";
+      li.textContent = getAnalyticsData().message || "Analytics data unavailable.";
+      events.replaceChildren(li);
+    }
+    renderScholar();
+    return;
+  }
+
+  renderTopPosts();
+  renderSearchTerms();
+  renderVisitorChart();
+  renderEngagementChart();
+  renderKeyEvents();
+  renderScholar();
+  renderMonthlyReports();
+}
+
+// Auto-initialize when module loads (backward compatibility)
+// Skip auto-init in test environment
+if (typeof window !== 'undefined' && !window.__VITEST__) {
+  onReady(render);
+}