nodebb-plugin-fab-cards 0.1.0

package/docker-compose.yml

@@ -0,0 +1,50 @@
+version: "3.8"
+
+services:
+  nodebb:
+    image: ghcr.io/nodebb/nodebb:latest
+    restart: unless-stopped
+    ports:
+      - "4567:4567" # comment this out if you don't want to expose NodeBB to the host, or change the first number to any port you want
+    volumes:
+      - nodebb-build:/usr/src/app/build
+      - nodebb-uploads:/usr/src/app/public/uploads
+      - nodebb-config:/opt/config
+      - ./install/docker/setup.json:/usr/src/app/setup.json
+
+  redis:
+    image: redis:8.4.0-alpine
+    restart: unless-stopped
+    command: ["redis-server", "--appendonly", "yes", "--loglevel", "warning"]
+    # command: ["redis-server", "--save", "60", "1", "--loglevel", "warning"] # uncomment if you want to use snapshotting instead of AOF
+    volumes:
+      - redis-data:/data
+
+volumes:
+  redis-data:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: ./.docker/database/redis
+
+  nodebb-build:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: ./.docker/build
+
+  nodebb-uploads:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: ./.docker/public/uploads
+
+  nodebb-config:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: ./.docker/config

package/library.js

@@ -0,0 +1,135 @@
+'use strict';
+
+const path = require('path');
+const cheerio = require('cheerio');
+
+const CARD_INDEX_PATH = path.join(__dirname, 'data', 'cards-index.json');
+const CARD_HOST = 'https://cards.fabtcg.com';
+
+let cardData = null;
+let cardMatcher = null;
+
+function loadCardData() {
+  if (cardData) {
+    return cardData;
+  }
+
+  cardData = require(CARD_INDEX_PATH);
+  const cardNames = Object.keys(cardData.cards || {});
+
+  if (!cardNames.length) {
+    cardMatcher = null;
+    return cardData;
+  }
+
+  const escaped = cardNames
+    .sort((first, second) => second.length - first.length)
+    .map(escapeRegExp);
+
+  cardMatcher = new RegExp(`(^|[^\\p{L}\\p{N}])(${escaped.join('|')})(?=$|[^\\p{L}\\p{N}])`, 'giu');
+  return cardData;
+}
+
+function normalize(input) {
+  return String(input || '')
+    .normalize('NFKC')
+    .toLowerCase()
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function shouldSkipNode(node) {
+  const parentTag = node.parent && node.parent.tagName ? node.parent.tagName.toLowerCase() : '';
+  return ['a', 'code', 'pre', 'script', 'style', 'textarea'].includes(parentTag);
+}
+
+export function linkifyText(text, cards) {
+if (!cardMatcher || !text || !text.trim()) {
+    return text;
+  }
+
+  cardMatcher.lastIndex = 0;
+  return text.replace(cardMatcher, (fullMatch, prefix, cardName) => {
+    const normalized = normalize(cardName);
+    const card = cards[normalized];
+
+    if (!card) {
+      return fullMatch;
+    }
+
+    const href = `${CARD_HOST}${card.url}`;
+    const safeName = escapeHtml(card.name || cardName);
+    const safeImage = escapeHtml(card.image || '');
+    const safeHref = escapeHtml(href);
+
+    return `${prefix}<a class="fab-card-link" href="${safeHref}" target="_blank" rel="noopener noreferrer" data-fab-card-name="${safeName}" data-fab-card-image="${safeImage}">${cardName}</a>`;
+  });
+}
+
+function processNode($, node, cards) {
+  if (!node) {
+    return;
+  }
+
+  if (node.type === 'text' && !shouldSkipNode(node)) {
+    const original = node.data || '';
+    const replaced = linkifyText(original, cards);
+    if (replaced !== original) {
+      $(node).replaceWith(replaced);
+    }
+    return;
+  }
+
+  if (node.children && node.children.length) {
+    node.children.slice().forEach((child) => processNode($, child, cards));
+  }
+}
+
+const plugin = {};
+
+plugin.parsePost = async function (payload) {
+  const data = payload || {};
+  const carrier = data.postData && typeof data.postData.content === 'string'
+    ? data.postData
+    : (typeof data.content === 'string' ? data : null);
+
+  if (!carrier || !carrier.content) {
+    return payload;
+  }
+
+  const type = data.type || data.postData?.type || 'default';
+  if (type !== 'default') {
+    return payload;
+  }
+
+  const loaded = loadCardData();
+  if (!loaded || !loaded.cards || !cardMatcher) {
+    return payload;
+  }
+
+  const $ = cheerio.load(carrier.content, {
+    decodeEntities: false,
+  }, false);
+
+  const root = $.root().get(0);
+  if (root && root.children) {
+    root.children.slice().forEach((child) => processNode($, child, loaded.cards));
+  }
+
+  carrier.content = $.root().html() || carrier.content;
+  return payload;
+};
+
+module.exports = plugin;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nodebb-plugin-fab-cards",
+  "version": "0.1.0",
+  "description": "Auto-link Flesh and Blood card names in NodeBB posts with hover/touch previews.",
+  "main": "library.js",
+  "scripts": {
+    "build:cards": "node scripts/build-card-index.js"
+  },
+  "keywords": [
+    "nodebb",
+    "nodebb-plugin",
+    "flesh-and-blood",
+    "fab"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "cheerio": "^1.0.0"
+  },
+  "nbbpm": {
+    "compatibility": "^4.0.0"
+  },
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/braaar/nodebb-plugin-fab-cards.git"
+  },
+  "author": "braaar",
+  "bugs": {
+    "url": "https://github.com/braaar/nodebb-plugin-fab-cards/issues"
+  },
+  "homepage": "https://github.com/braaar/nodebb-plugin-fab-cards#readme"
+}

package/plugin.json

@@ -0,0 +1,18 @@
+{
+  "id": "nodebb-plugin-fab-cards",
+  "name": "FAB Cards Auto-Link",
+  "description": "Automatically links Flesh and Blood card names and shows card previews.",
+  "url": "https://github.com/fabtcg/nodebb-plugin-fab-cards",
+  "library": "./library.js",
+  "hooks": [
+    {
+      "hook": "filter:parse.post",
+      "method": "parsePost"
+    }
+  ],
+  "staticDirs": {
+    "public": "public"
+  },
+  "scripts": ["public/lib/client.js"],
+  "css": ["public/css/style.css"]
+}

package/public/css/style.css

@@ -0,0 +1,24 @@
+.fab-card-link {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.fab-card-preview {
+  position: absolute;
+  z-index: 9999;
+  width: min(80vw, 280px);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  background: #111;
+}
+
+.fab-card-preview.hidden {
+  display: none;
+}
+
+.fab-card-preview img {
+  display: block;
+  width: 100%;
+  height: auto;
+}

package/public/lib/client.js

@@ -0,0 +1,121 @@
+'use strict';
+
+(function fabCardPreview() {
+  const LINK_SELECTOR = 'a.fab-card-link[data-fab-card-image]';
+  let previewElement = null;
+  let activeTouchLink = null;
+
+  function ensurePreviewElement() {
+    if (previewElement) {
+      return previewElement;
+    }
+
+    previewElement = document.createElement('div');
+    previewElement.className = 'fab-card-preview hidden';
+    previewElement.innerHTML = '<img alt="Card preview" loading="lazy" />';
+    document.body.appendChild(previewElement);
+    return previewElement;
+  }
+
+  function hidePreview() {
+    const element = ensurePreviewElement();
+    element.classList.add('hidden');
+    activeTouchLink = null;
+  }
+
+  function positionPreview(target) {
+    const element = ensurePreviewElement();
+    const rect = target.getBoundingClientRect();
+    const margin = 12;
+
+    const width = element.offsetWidth || 280;
+    const height = element.offsetHeight || 390;
+
+    let top = rect.bottom + margin;
+    let left = rect.left;
+
+    if (left + width > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - width - margin);
+    }
+
+    if (top + height > window.innerHeight - margin) {
+      top = Math.max(margin, rect.top - height - margin);
+    }
+
+    element.style.left = `${Math.round(left + window.scrollX)}px`;
+    element.style.top = `${Math.round(top + window.scrollY)}px`;
+  }
+
+  function showPreview(link) {
+    const imageUrl = link.getAttribute('data-fab-card-image');
+    if (!imageUrl) {
+      return;
+    }
+
+    const element = ensurePreviewElement();
+    const image = element.querySelector('img');
+
+    image.src = imageUrl;
+    image.alt = link.getAttribute('data-fab-card-name') || 'Card preview';
+
+    element.classList.remove('hidden');
+    positionPreview(link);
+  }
+
+  function bindLink(link) {
+    if (!link || link.dataset.fabPreviewBound === 'true') {
+      return;
+    }
+
+    link.dataset.fabPreviewBound = 'true';
+
+    link.addEventListener('mouseenter', () => showPreview(link));
+    link.addEventListener('focus', () => showPreview(link));
+    link.addEventListener('mouseleave', hidePreview);
+    link.addEventListener('blur', hidePreview);
+
+    link.addEventListener('touchstart', (event) => {
+      if (activeTouchLink === link) {
+        activeTouchLink = null;
+        return;
+      }
+
+      event.preventDefault();
+      activeTouchLink = link;
+      showPreview(link);
+    }, { passive: false });
+  }
+
+  function bindAllLinks() {
+    document.querySelectorAll(LINK_SELECTOR).forEach(bindLink);
+  }
+
+  function registerGlobalHandlers() {
+    document.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof Element) || !target.closest(LINK_SELECTOR)) {
+        hidePreview();
+      }
+    });
+
+    window.addEventListener('resize', hidePreview);
+    window.addEventListener('scroll', hidePreview, true);
+  }
+
+  function init() {
+    ensurePreviewElement();
+    bindAllLinks();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  registerGlobalHandlers();
+
+  if (typeof window !== 'undefined' && window.jQuery) {
+    window.jQuery(window).on('action:ajaxify.end action:posts.loaded action:topic.loaded', bindAllLinks);
+  }
+})();

package/scripts/build-card-index.js

@@ -0,0 +1,103 @@
+'use strict';
+
+const fs = require('fs/promises');
+const path = require('path');
+
+const API_ENDPOINT = 'https://cards.fabtcg.com/api/search/v1/cards/?limit=200';
+const OUTPUT_FILE = path.join(__dirname, '..', 'data', 'cards-index.json');
+
+function normalize(input) {
+  return String(input || '')
+    .normalize('NFKC')
+    .toLowerCase()
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+async function fetchJson(url) {
+  const response = await fetch(url, {
+    headers: {
+      'accept': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed (${response.status}): ${url}`);
+  }
+
+  return response.json();
+}
+
+function toAbsoluteUrl(url) {
+  if (!url) {
+    return null;
+  }
+
+  try {
+    return new URL(url, 'https://cards.fabtcg.com').toString();
+  } catch (error) {
+    return null;
+  }
+}
+
+async function run() {
+  const cards = {};
+  let pageUrl = API_ENDPOINT;
+  let pageCount = 0;
+  let recordCount = 0;
+
+  while (pageUrl) {
+    pageCount += 1;
+    const payload = await fetchJson(pageUrl);
+
+    const results = Array.isArray(payload.results) ? payload.results : [];
+    recordCount += results.length;
+
+    for (const card of results) {
+      const name = String(card.name || '').trim();
+      if (!name) {
+        continue;
+      }
+
+      const normalized = normalize(name);
+      if (!normalized || cards[normalized]) {
+        continue;
+      }
+
+      const relativeCardUrl = card.url || `/card/${card.card_id || ''}/`;
+      const cardUrl = toAbsoluteUrl(relativeCardUrl);
+      const image = card.image?.normal || card.image?.large || card.image?.small || '';
+
+      if (!cardUrl || !image) {
+        continue;
+      }
+
+      cards[normalized] = {
+        name,
+        url: new URL(cardUrl).pathname,
+        image,
+      };
+    }
+
+    pageUrl = payload.next || null;
+    process.stdout.write(`Fetched page ${pageCount} - indexed ${Object.keys(cards).length} unique card names\n`);
+  }
+
+  const output = {
+    generatedAt: new Date().toISOString(),
+    source: API_ENDPOINT,
+    fetchedRecords: recordCount,
+    uniqueCards: Object.keys(cards).length,
+    cards,
+  };
+
+  await fs.mkdir(path.dirname(OUTPUT_FILE), { recursive: true });
+  await fs.writeFile(OUTPUT_FILE, JSON.stringify(output, null, 2));
+
+  process.stdout.write(`\nSaved ${output.uniqueCards} cards to ${OUTPUT_FILE}\n`);
+}
+
+run().catch((error) => {
+  process.stderr.write(`${error.stack || error.message}\n`);
+  process.exitCode = 1;
+});