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
This commit is contained in:
Jonathan Miller
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user