Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Share to X button with proper tweet text

Browse Source 
- Added "Share to X" button next to "Copy link"
- Tweet text: "I made [song] game boy version. Click to listen or generate your own, made in Wario Synth by @b1rdmania"
- Updated Twitter cards to summary_large_image
- Dynamic OG description includes song title

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 14:32:34 +00:00
parent 469212aa3c
commit eb3f61b63a
4 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -6
View File
@@ -1149,12 +1149,13 @@
</div>
</div>
<div style="margin-top: 14px;">
<button id="copyLinkBtn" type="button" disabled>Share</button>
<div id="shareLinkBox" style="display: none; margin-top: 12px;">
<input type="text" id="shareLinkInput" readonly style="width: 100%; font-size: 8px; padding: 10px;" />
<div style="margin-top: 6px; font-size: 8px; color: var(--gb-dark);">Select and copy the link above</div>
</div>
<div style="margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap;">
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
<button id="shareToXBtn" type="button" disabled>Share to X</button>
</div>
<div id="shareLinkBox" style="display: none; margin-top: 12px;">
<input type="text" id="shareLinkInput" readonly style="width: 100%; font-size: 8px; padding: 10px;" />
<div style="margin-top: 6px; font-size: 8px; color: var(--gb-dark);">Select and copy the link above</div>
</div>
</div>
play.html
+1 -1
View File
@@ -16,7 +16,7 @@
<meta property="og:url" content="https://motif-self.vercel.app/play" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="WARIO SYNTH" />
<meta name="twitter:description" content="Tap to play this Gameboy tune" />
<meta name="twitter:image" content="https://motif-self.vercel.app/wariosynthlogo.png" />
server/src/server.ts
+5 -3
View File
@@ -220,8 +220,10 @@ app.get('/s/:code', async (req, res) => {
const imageUrl = origin ? `${origin}/wariosynthlogo.png` : '/wariosynthlogo.png';
const sharedTitle = (payload.title || '').trim();
const ogTitle = sharedTitle || 'WARIO SYNTH';
const ogDescription = 'I made this in Wario Synth, click to listen or generate your own';
const ogTitle = sharedTitle ? `${sharedTitle} - WARIO SYNTH` : 'WARIO SYNTH';
const ogDescription = sharedTitle
? `I made ${sharedTitle} game boy version. Click to listen or generate your own, made in Wario Synth by @b1rdmania.`
: 'Turn any song into retro game console music. Made by @b1rdmania.';
const html = `<!doctype html>
<html lang="en">
@@ -239,7 +241,7 @@ app.get('/s/:code', async (req, res) => {
<meta property="og:type" content="website" />
<meta property="og:url" content="${escapeHtml(shortUrl)}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="${escapeHtml(ogTitle)}" />
<meta name="twitter:description" content="${escapeHtml(ogDescription)}" />
<meta name="twitter:image" content="${escapeHtml(imageUrl)}" />
src/main.ts
+47 -1
View File
@@ -58,6 +58,7 @@ class MotifApp {
private iosAudioState!: HTMLElement;
private copyLinkBtn!: HTMLButtonElement;
private shareToXBtn!: HTMLButtonElement;
private shareLinkBox!: HTMLElement;
private shareLinkInput!: HTMLInputElement;
@@ -135,6 +136,7 @@ class MotifApp {
this.motifDuration = document.getElementById('motifDuration')!;
this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement;
this.shareToXBtn = document.getElementById('shareToXBtn') as HTMLButtonElement;
this.shareLinkBox = document.getElementById('shareLinkBox') as HTMLElement;
this.shareLinkInput = document.getElementById('shareLinkInput') as HTMLInputElement;
@@ -184,6 +186,7 @@ class MotifApp {
this.motifProgressBar.addEventListener('change', seekHandler);
this.copyLinkBtn.addEventListener('click', () => void this.handleCopyLink());
this.shareToXBtn.addEventListener('click', () => void this.handleShareToX());
// Embed snippet copy (may be disabled / not-live)
this.copyEmbedBtn?.addEventListener('click', () => void this.copyEmbedSnippet());
@@ -744,6 +747,47 @@ class MotifApp {
}
}
private async handleShareToX(): Promise<void> {
if (!this.hasGenerated) return;
const result = this.searchResults[this.selectedResultIndex];
if (!result?.midiUrl) return;
const title = this.cleanSongTitle(result.title || 'a song');
// Get share URL (try short link first)
let shareUrl: string | null = null;
try {
let payload: any = null;
if (result.source === 'bitmidi') {
const m = String(result.midiUrl).match(/\/uploads\/(\d+)\.mid/i);
if (m?.[1]) payload = { src: 'bitmidi', id: m[1], title: result.title };
}
if (!payload) payload = { u: result.midiUrl, title: result.title };
const resp = await fetch('/api/share', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (resp.ok) {
const data = await resp.json();
if (data?.url) shareUrl = `${window.location.origin}${data.url}`;
}
} catch {
// Fall through
}
if (!shareUrl) {
shareUrl = window.location.href;
}
// Compose tweet text
const tweetText = `I made ${title} game boy version. Click to listen or generate your own, made in Wario Synth by @b1rdmania`;
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(shareUrl)}`;
window.open(twitterUrl, '_blank', 'width=550,height=420');
}
private setState(state: 'idle' | 'results' | 'selected' | 'generated'): void {
// results - keep visible in all states except idle so user can pick a different source
const hasResults = state === 'results' || state === 'selected' || state === 'generated';
@@ -754,9 +798,11 @@ class MotifApp {
const hasSelection = state === 'selected' || state === 'generated';
this.playerSection.classList.toggle('visible', hasSelection);
// share link only after generation
// share buttons only after generation
this.copyLinkBtn.style.display = state === 'generated' ? 'inline-block' : 'none';
this.copyLinkBtn.disabled = !(state === 'generated' && this.hasGenerated);
this.shareToXBtn.style.display = state === 'generated' ? 'inline-block' : 'none';
this.shareToXBtn.disabled = !(state === 'generated' && this.hasGenerated);
// Dim results when selected/generated, but keep them interactive
this.resultsSection.classList.toggle('collapsed', state === 'selected' || state === 'generated');