Added references

_references/custom_css_live.txt

@@ -0,0 +1,97 @@
+.wg-latest-strip {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  width: 100%;
+  margin: 0 0 1.35rem;
+}
+
+.wg-latest-card {
+  position: relative;
+  min-width: 0;
+  padding: 1rem 1.1rem;
+  overflow: hidden;
+  background:
+    linear-gradient(100deg, rgba(32, 19, 30, 0.96), rgba(13, 12, 17, 0.98)),
+    rgba(13, 12, 17, 0.98);
+  border: 1px solid rgba(194, 163, 90, 0.2);
+  border-radius: 6px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 244, 221, 0.04),
+    0 14px 30px rgba(0, 0, 0, 0.26);
+}
+
+.wg-latest-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: rgba(194, 163, 90, 0.58);
+}
+
+.wg-latest-card--patch::before {
+  background: rgba(143, 178, 119, 0.58);
+}
+
+.wg-latest-kicker {
+  margin-bottom: 0.45rem;
+  color: #c2a35a;
+  font-family: var(--wg-font-display, Georgia, serif);
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.wg-latest-title {
+  display: block;
+  color: var(--wg-text, #e6e0d6);
+  font-family: var(--wg-font-display, Georgia, serif);
+  font-size: 1.08rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-decoration: none;
+}
+
+.wg-latest-title:hover,
+.wg-latest-title:focus {
+  color: #fff4dd;
+  text-decoration: none;
+}
+
+.wg-latest-meta {
+  min-height: 1.15rem;
+  margin-top: 0.35rem;
+  color: rgba(185, 178, 166, 0.78);
+  font-family: var(--wg-font-ui, system-ui, sans-serif);
+  font-size: 0.78rem;
+}
+
+.wg-latest-excerpt {
+  display: -webkit-box;
+  margin: 0.55rem 0 0;
+  overflow: hidden;
+  color: rgba(216, 208, 196, 0.84);
+  font-family: var(--wg-font-text, Georgia, serif);
+  font-size: 0.9rem;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.wg-latest-card.is-loading .wg-latest-title,
+.wg-latest-card.is-empty .wg-latest-title {
+  color: rgba(185, 178, 166, 0.74);
+}
+
+@media (max-width: 767px) {
+  .wg-latest-strip {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .wg-latest-card {
+    padding: 0.9rem 1rem;
+  }
+}

_references/custom_javascript.txt

@@ -0,0 +1,190 @@
+(() => {
+  const WESTGATE_LATEST_CONFIG = [
+    {
+      key: 'announcement',
+      cid: 1,
+      emptyTitle: 'No announcements yet',
+    },
+    {
+      key: 'patch',
+      cid: 10,
+      emptyTitle: 'No patch notes yet',
+    },
+  ];
+
+  const getRelativePath = () => {
+    return window.config && window.config.relative_path ? window.config.relative_path : '';
+  };
+
+  const unwrap = (payload) => {
+    return payload && payload.response ? payload.response : payload;
+  };
+
+  const textFromHtml = (html) => {
+    const el = document.createElement('div');
+    el.innerHTML = html || '';
+
+    const firstParagraph = Array.from(el.querySelectorAll('p'))
+      .map((p) => (p.textContent || '').replace(/\s+/g, ' ').trim())
+      .find(Boolean);
+
+    return (firstParagraph || el.textContent || '').replace(/\s+/g, ' ').trim();
+  };
+
+  const truncate = (text, limit = 240) => {
+    if (!text || text.length <= limit) {
+      return text || '';
+    }
+
+    return `${text.slice(0, limit).replace(/\s+\S*$/, '')}...`;
+  };
+
+  const formatDate = (value) => {
+    const timestamp = Number(value);
+    if (!timestamp) {
+      return '';
+    }
+
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    return new Intl.DateTimeFormat(undefined, {
+      month: 'short',
+      day: 'numeric',
+    }).format(date);
+  };
+
+  const getJSON = async (url) => {
+    const response = await fetch(url, {
+      credentials: 'same-origin',
+      headers: {
+        accept: 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Request failed: ${response.status}`);
+    }
+
+    return unwrap(await response.json());
+  };
+  
+  const getTopicExcerpt = async (topic) => {
+  const relativePath = getRelativePath();
+  const topicPath = topic.slug || topic.tid;
+
+  try {
+    const topicData = await getJSON(`${relativePath}/api/topic/${topicPath}?page=1&sort=oldest_to_newest`);
+    const firstPost = topicData.posts && topicData.posts[0];
+    const firstPostText = textFromHtml(firstPost && firstPost.content);
+
+    if (firstPostText) {
+      return truncate(firstPostText);
+    }
+    } catch (error) {
+      console.warn('[Westgate latest widget original post excerpt]', error);
+    }
+
+    if (topic.mainPost && topic.mainPost.content) {
+      const mainPostText = textFromHtml(topic.mainPost.content);
+      if (mainPostText) {
+        return truncate(mainPostText);
+      }
+    }
+
+    if (topic.teaser && topic.teaser.content) {
+      return truncate(textFromHtml(topic.teaser.content));
+    }
+
+    return '';
+  };
+
+  const getLatestTopic = async (cid) => {
+    const relativePath = getRelativePath();
+    const category = await getJSON(`${relativePath}/api/v3/categories/${cid}/topics?sort=recently_created&after=0`);
+    const topic = category.topics && category.topics[0];
+
+    if (!topic) {
+      return null;
+    }
+
+    let excerpt = '';
+
+    try {
+      excerpt = await getTopicExcerpt(topic);
+    } catch (error) {
+      console.warn('[Westgate latest widget excerpt]', error);
+    }
+
+    return {
+      title: topic.titleRaw || topic.title || 'Untitled',
+      url: `${relativePath}/topic/${topic.slug || topic.tid}`,
+      author: topic.user && (topic.user.displayname || topic.user.username),
+      date: formatDate(topic.timestamp || topic.lastposttime),
+      excerpt,
+    };
+  };
+
+  const renderCard = async (root, source) => {
+    const card = root.querySelector(`[data-card="${source.key}"]`);
+    if (!card) {
+      return;
+    }
+
+    const title = card.querySelector('.wg-latest-title');
+    const meta = card.querySelector('.wg-latest-meta');
+    const excerpt = card.querySelector('.wg-latest-excerpt');
+
+    card.classList.add('is-loading');
+    card.classList.remove('is-empty');
+    title.textContent = 'Loading...';
+    title.removeAttribute('href');
+    meta.textContent = '';
+    excerpt.textContent = '';
+
+    try {
+      const topic = await getLatestTopic(source.cid);
+
+      if (!topic) {
+        card.classList.remove('is-loading');
+        card.classList.add('is-empty');
+        title.textContent = source.emptyTitle;
+        return;
+      }
+
+      title.textContent = topic.title;
+      title.href = topic.url;
+      meta.textContent = [topic.author, topic.date].filter(Boolean).join(' · ');
+      excerpt.textContent = topic.excerpt || '';
+      card.classList.remove('is-loading', 'is-empty');
+    } catch (error) {
+      console.warn('[Westgate latest widget]', error);
+      card.classList.remove('is-loading');
+      card.classList.add('is-empty');
+      title.textContent = source.emptyTitle;
+      meta.textContent = 'Unable to load right now';
+    }
+  };
+
+  const renderLatestStrip = () => {
+    const root = document.querySelector('[data-westgate-latest]');
+
+    if (!root || root.dataset.loaded === '1') {
+      return;
+    }
+
+    root.dataset.loaded = '1';
+    WESTGATE_LATEST_CONFIG.forEach((source) => renderCard(root, source));
+  };
+
+  document.addEventListener('DOMContentLoaded', renderLatestStrip);
+  window.addEventListener('load', renderLatestStrip);
+
+  if (window.jQuery) {
+    window.jQuery(window).on('action:ajaxify.end', renderLatestStrip);
+  }
+
+  renderLatestStrip();
+})();