From 96eea6060fbe09541730cb7a1bd22761778fcfbf Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Tue, 23 Jun 2026 11:27:18 -0500 Subject: [PATCH] feat: add Discord, Mastodon, and Slack preview cards to editor Shows how shared links will appear on Discord (dark theme with accent bar), Mastodon (rounded card), and Slack (compact unfurl) alongside the existing Facebook, Twitter, and LinkedIn previews. Closes #69 --- .../plg_content_mokoog/media/css/preview.css | 95 ++++++++++++ .../plg_content_mokoog/media/js/preview.js | 136 ++++++++++++++++++ 2 files changed, 231 insertions(+) diff --git a/source/packages/plg_content_mokoog/media/css/preview.css b/source/packages/plg_content_mokoog/media/css/preview.css index ae0a8af..7f7d915 100644 --- a/source/packages/plg_content_mokoog/media/css/preview.css +++ b/source/packages/plg_content_mokoog/media/css/preview.css @@ -125,6 +125,101 @@ text-transform: none; } +/* Discord card */ +.mokoog-card-dc { + background: #2b2d31; + border-left: 4px solid #5865f2; + border-radius: 4px; +} + +.mokoog-card-dc .mokoog-card-body { + border-top: none; +} + +.mokoog-card-dc .mokoog-card-img { + height: 200px; + margin: 0 12px 12px; + border-radius: 4px; +} + +.mokoog-card-dc .mokoog-card-title { + font-size: 16px; + font-weight: 700; + color: #00a8fc; +} + +.mokoog-card-dc .mokoog-card-desc { + font-size: 14px; + color: #dbdee1; +} + +.mokoog-card-dc .mokoog-card-domain { + font-size: 12px; + color: #b5bac1; + text-transform: none; +} + +/* Mastodon card */ +.mokoog-card-ma { + border: 1px solid #c8ccd0; + border-radius: 8px; +} + +.mokoog-card-ma .mokoog-card-img { + border-radius: 8px 8px 0 0; +} + +.mokoog-card-ma .mokoog-card-body { + border-top-color: #c8ccd0; +} + +.mokoog-card-ma .mokoog-card-title { + font-size: 14px; + font-weight: 600; + color: #1a1a2e; +} + +.mokoog-card-ma .mokoog-card-desc { + font-size: 13px; + color: #606984; +} + +.mokoog-card-ma .mokoog-card-domain { + font-size: 12px; + color: #606984; + text-transform: none; +} + +/* Slack card */ +.mokoog-card-sl { + border-left: 4px solid #36c5f0; + border-radius: 0; + background: #fff; +} + +.mokoog-card-sl .mokoog-card-body { + border-top: none; + padding: 8px 12px; +} + +.mokoog-card-sl .mokoog-card-title { + font-size: 15px; + font-weight: 700; + color: #1264a3; +} + +.mokoog-card-sl .mokoog-card-desc { + font-size: 14px; + color: #1d1c1d; +} + +.mokoog-card-sl .mokoog-card-domain { + font-size: 12px; + color: #616061; + text-transform: none; + margin-top: 4px; +} + /* Character count indicators */ .mokoog-char-count { display: block; diff --git a/source/packages/plg_content_mokoog/media/js/preview.js b/source/packages/plg_content_mokoog/media/js/preview.js index 6cc4e1a..8a17c70 100644 --- a/source/packages/plg_content_mokoog/media/js/preview.js +++ b/source/packages/plg_content_mokoog/media/js/preview.js @@ -175,6 +175,107 @@ document.addEventListener('DOMContentLoaded', function () { liCard.appendChild(liBody); wrapper.appendChild(liCard); + // Discord preview card + var dcLabel = document.createElement('small'); + dcLabel.className = 'mokoog-platform-label'; + dcLabel.textContent = 'Discord'; + wrapper.appendChild(dcLabel); + + var dcCard = document.createElement('div'); + dcCard.className = 'mokoog-card mokoog-card-dc'; + + var dcBody = document.createElement('div'); + dcBody.className = 'mokoog-card-body'; + + var dcTitle = document.createElement('div'); + dcTitle.id = 'mokoog-dc-title'; + dcTitle.className = 'mokoog-card-title'; + dcBody.appendChild(dcTitle); + + var dcDesc = document.createElement('div'); + dcDesc.id = 'mokoog-dc-desc'; + dcDesc.className = 'mokoog-card-desc'; + dcBody.appendChild(dcDesc); + + var dcDomain = document.createElement('div'); + dcDomain.id = 'mokoog-dc-domain'; + dcDomain.className = 'mokoog-card-domain'; + dcBody.appendChild(dcDomain); + + dcCard.appendChild(dcBody); + + var dcImg = document.createElement('div'); + dcImg.id = 'mokoog-dc-img'; + dcImg.className = 'mokoog-card-img'; + dcCard.appendChild(dcImg); + + wrapper.appendChild(dcCard); + + // Mastodon preview card + var maLabel = document.createElement('small'); + maLabel.className = 'mokoog-platform-label'; + maLabel.textContent = 'Mastodon'; + wrapper.appendChild(maLabel); + + var maCard = document.createElement('div'); + maCard.className = 'mokoog-card mokoog-card-ma'; + + var maImg = document.createElement('div'); + maImg.id = 'mokoog-ma-img'; + maImg.className = 'mokoog-card-img'; + maCard.appendChild(maImg); + + var maBody = document.createElement('div'); + maBody.className = 'mokoog-card-body'; + + var maTitle = document.createElement('div'); + maTitle.id = 'mokoog-ma-title'; + maTitle.className = 'mokoog-card-title'; + maBody.appendChild(maTitle); + + var maDesc = document.createElement('div'); + maDesc.id = 'mokoog-ma-desc'; + maDesc.className = 'mokoog-card-desc'; + maBody.appendChild(maDesc); + + var maDomain = document.createElement('div'); + maDomain.id = 'mokoog-ma-domain'; + maDomain.className = 'mokoog-card-domain'; + maBody.appendChild(maDomain); + + maCard.appendChild(maBody); + wrapper.appendChild(maCard); + + // Slack preview card + var slLabel = document.createElement('small'); + slLabel.className = 'mokoog-platform-label'; + slLabel.textContent = 'Slack'; + wrapper.appendChild(slLabel); + + var slCard = document.createElement('div'); + slCard.className = 'mokoog-card mokoog-card-sl'; + + var slBody = document.createElement('div'); + slBody.className = 'mokoog-card-body'; + + var slTitle = document.createElement('div'); + slTitle.id = 'mokoog-sl-title'; + slTitle.className = 'mokoog-card-title'; + slBody.appendChild(slTitle); + + var slDesc = document.createElement('div'); + slDesc.id = 'mokoog-sl-desc'; + slDesc.className = 'mokoog-card-desc'; + slBody.appendChild(slDesc); + + var slDomain = document.createElement('div'); + slDomain.id = 'mokoog-sl-domain'; + slDomain.className = 'mokoog-card-domain'; + slBody.appendChild(slDomain); + + slCard.appendChild(slBody); + wrapper.appendChild(slCard); + preview.appendChild(wrapper); fieldset.parentNode.insertBefore(preview, fieldset.nextSibling); @@ -229,6 +330,41 @@ document.addEventListener('DOMContentLoaded', function () { } else { liImgEl.style.display = 'none'; } + + // Discord (title 256, desc 350) + var dcTitle = title.length > 256 ? title.substring(0, 253) + '...' : title; + var dcDesc = desc.length > 350 ? desc.substring(0, 347) + '...' : desc; + document.getElementById('mokoog-dc-title').textContent = dcTitle; + document.getElementById('mokoog-dc-desc').textContent = dcDesc; + document.getElementById('mokoog-dc-domain').textContent = domain; + var dcImgEl = document.getElementById('mokoog-dc-img'); + if (img) { + dcImgEl.style.backgroundImage = 'url(' + encodeURI(img) + ')'; + dcImgEl.style.display = ''; + } else { + dcImgEl.style.display = 'none'; + } + + // Mastodon (title 70, desc 200) + var maTitle = title.length > 70 ? title.substring(0, 67) + '...' : title; + var maDesc = desc.length > 200 ? desc.substring(0, 197) + '...' : desc; + document.getElementById('mokoog-ma-title').textContent = maTitle; + document.getElementById('mokoog-ma-desc').textContent = maDesc; + document.getElementById('mokoog-ma-domain').textContent = domain; + var maImgEl = document.getElementById('mokoog-ma-img'); + if (img) { + maImgEl.style.backgroundImage = 'url(' + encodeURI(img) + ')'; + maImgEl.style.display = ''; + } else { + maImgEl.style.display = 'none'; + } + + // Slack (title 70, desc 150, no image) + var slTitle = title.length > 70 ? title.substring(0, 67) + '...' : title; + var slDesc = desc.length > 150 ? desc.substring(0, 147) + '...' : desc; + document.getElementById('mokoog-sl-title').textContent = slTitle; + document.getElementById('mokoog-sl-desc').textContent = slDesc; + document.getElementById('mokoog-sl-domain').textContent = domain; } Object.values(fields).forEach(function (el) {