nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add share-as-image to X and Facebook for Q&A cards; v1.0.12

Browse Source 
On mobile: Web Share API opens native share sheet with the PNG attached,
letting users pick X, Facebook, Instagram, etc. directly.
On desktop: downloads the image and opens the platform compose window.
"Save image" download button kept alongside the two new share buttons.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
2026-07-22 12:57:13 -04:00
parent 6444d6e0e3
commit ff7eec9906
2 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/QASection.tsx
+57 -28
View File
@@ -595,7 +595,7 @@ export default function QASection() {
setPage(0)
}
const saveAsImage = (question: DecoratedQuestion) => {
const buildQuoteCanvas = (question: DecoratedQuestion): HTMLCanvasElement => {
const SIZE = 1080
const PADDING = 72
const canvas = document.createElement('canvas')
@@ -603,15 +603,12 @@ export default function QASection() {
canvas.height = SIZE
const ctx = canvas.getContext('2d')!
// Background
ctx.fillStyle = '#1a1208'
ctx.fillRect(0, 0, SIZE, SIZE)
// Gold top border
ctx.fillStyle = '#c9a84c'
ctx.fillRect(0, 0, SIZE, 6)
// Helper: word-wrap text
function wrapText(text: string, maxWidth: number, font: string): string[] {
ctx.font = font
const words = text.split(' ')
@@ -619,12 +616,8 @@ export default function QASection() {
let line = ''
for (const word of words) {
const test = line ? `${line} ${word}` : word
if (ctx.measureText(test).width > maxWidth && line) {
lines.push(line)
line = word
} else {
line = test
}
if (ctx.measureText(test).width > maxWidth && line) { lines.push(line); line = word }
else { line = test }
}
if (line) lines.push(line)
return lines
@@ -632,51 +625,41 @@ export default function QASection() {
let y = PADDING + 40
// Ornament header
ctx.fillStyle = '#c9a84c'
ctx.font = 'bold 26px Georgia, serif'
ctx.textAlign = 'center'
ctx.fillText('✦ Verse by Verse with Nate ✦', SIZE / 2, y)
y += 50
// Divider
ctx.fillStyle = '#c9a84c'
ctx.fillRect(PADDING, y, SIZE - PADDING * 2, 1)
y += 36
// Question label
ctx.fillStyle = '#c9a84c'
ctx.font = 'bold 22px Georgia, serif'
ctx.textAlign = 'left'
ctx.fillText('Q', PADDING, y)
y += 8
// Question text
const qFont = 'italic 32px Georgia, serif'
const qLines = wrapText(`"${question.question}"`, SIZE - PADDING * 2 - 20, qFont)
ctx.fillStyle = '#f5ead2'
ctx.font = qFont
ctx.textAlign = 'left'
const qLineH = 44
for (const line of qLines.slice(0, 5)) {
y += qLineH
ctx.fillText(line, PADDING + 20, y)
}
for (const line of qLines.slice(0, 5)) { y += qLineH; ctx.fillText(line, PADDING + 20, y) }
y += 40
// Divider
ctx.fillStyle = '#3a2d14'
ctx.fillRect(PADDING, y, SIZE - PADDING * 2, 1)
y += 36
// Answer label
ctx.fillStyle = '#c9a84c'
ctx.font = 'bold 22px Georgia, serif'
ctx.textAlign = 'left'
ctx.fillText('A', PADDING, y)
y += 8
// Answer text (truncated to fit)
const aFont = '28px Georgia, serif'
const maxAHeight = SIZE - y - PADDING - 60
const aLineH = 40
@@ -688,24 +671,62 @@ export default function QASection() {
}
ctx.fillStyle = '#e8d9b5'
ctx.font = aFont
for (const line of aLines) {
y += aLineH
ctx.fillText(line, PADDING + 20, y)
}
for (const line of aLines) { y += aLineH; ctx.fillText(line, PADDING + 20, y) }
// URL footer
ctx.fillStyle = '#8a7040'
ctx.font = '20px Georgia, serif'
ctx.textAlign = 'center'
ctx.fillText(window.location.host + '/questions', SIZE / 2, SIZE - PADDING + 8)
// Download
return canvas
}
const saveAsImage = (question: DecoratedQuestion) => {
const canvas = buildQuoteCanvas(question)
const link = document.createElement('a')
link.download = `vbvn-qa-${question.id.slice(0, 8)}.png`
link.href = canvas.toDataURL('image/png')
link.click()
}
const shareImageTo = async (question: DecoratedQuestion, platform: 'x' | 'facebook') => {
const canvas = buildQuoteCanvas(question)
const shareUrl = getSocialUrl(question.id)
const shareText = `Q: ${question.question.slice(0, 120)}${question.question.length > 120 ? '…' : ''}`
// Try Web Share API with file (works on mobile — iOS Safari, Android Chrome)
if (typeof navigator.share === 'function') {
try {
const blob = await new Promise<Blob>((resolve, reject) =>
canvas.toBlob(b => b ? resolve(b) : reject(new Error('Canvas toBlob failed')), 'image/png')
)
const file = new File([blob], `vbvn-qa-${question.id.slice(0, 8)}.png`, { type: 'image/png' })
if (navigator.canShare?.({ files: [file] })) {
await navigator.share({ files: [file], text: shareText, url: shareUrl })
incrementEngagement(question.id, 'shares')
return
}
} catch (err) {
if ((err as DOMException)?.name === 'AbortError') return
}
}
// Desktop fallback: download the image, then open the compose window
const link = document.createElement('a')
link.download = `vbvn-qa-${question.id.slice(0, 8)}.png`
link.href = canvas.toDataURL('image/png')
link.click()
if (platform === 'x') {
const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`
window.open(tweetUrl, '_blank', 'width=600,height=400,noopener')
} else {
const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`
window.open(fbUrl, '_blank', 'width=600,height=400,noopener')
}
incrementEngagement(question.id, 'shares')
}
const getShareUrl = (id: string) =>
`${window.location.origin}/questions#qa-${encodeURIComponent(id)}`
@@ -1041,7 +1062,15 @@ export default function QASection() {
{linkCopied ? '✓ Copied' : 'Copy link'}
</button>
<button type="button" className="qa-share-btn" onClick={() => saveAsImage(question)}>
Save as image
Save image
</button>
<button type="button" className="qa-social-btn qa-social-btn--x" onClick={() => shareImageTo(question, 'x')}>
<svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="14" height="14"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
<span>Image</span>
</button>
<button type="button" className="qa-social-btn qa-social-btn--fb" onClick={() => shareImageTo(question, 'facebook')}>
<svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="14" height="14"><path d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.884v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>
<span>Image</span>
</button>
</div>
{(facebookCaptionCopied || linkCopied) && (