${escapeXml(meta.title)}

// ==UserScript== // @name Bookface Downloader Buttons // @namespace tweeks.io // @version 1.1.0 // @description Adds Download dropdowns for Bookface posts and comments, including a visible top-bar button beside notifications and bookmark actions. // @author Tweeks // @match *://bookface.ycombinator.com/posts/* // @grant none // ==/UserScript== (function () { 'use strict'; const SCRIPT_ATTR = 'data-bf-download-menu'; const TOP_BAR_ATTR = 'data-bf-download-top-bar'; const STYLE_ID = 'bf-download-style'; const MENU_CLASS = 'bf-download-menu'; const TARGET_MENU_SELECTOR = 'button[aria-haspopup="menu"].body-m.flex.shrink-0.items-center.self-stretch'; const TOP_ACTION_ROW_SELECTOR = 'main > div.pb-25.flex.flex-col.gap-y-5 > div.flex.w-full.flex-row.items-center.justify-between > div.flex.flex-row.items-center.gap-2'; const POST_PROSE_SELECTOR = 'div.flex.w-full.flex-col.gap-3 > div.prose.max-w-none.w-full'; const COMMENT_PROSE_SELECTOR = 'div[id^="comment-"] div.prose.max-w-none.w-full'; function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` .${MENU_CLASS} { position: relative; display: inline-block; margin-left: 8px; } .${MENU_CLASS} > button { appearance: none; border: 1px solid rgba(36, 34, 25, 0.18); border-radius: 8px; background: #fff; color: #242219; font: inherit; font-size: 12px; line-height: 1.2; padding: 4px 10px; cursor: pointer; } .${MENU_CLASS} > button:hover { background: #f7f6f3; } .${MENU_CLASS} > button:focus-visible, .${MENU_CLASS} .bf-download-option:focus-visible { outline: 2px solid #268bd2; outline-offset: 2px; } .${MENU_CLASS}[data-open="true"] .bf-download-options { display: block; } .bf-download-options { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 10000; background: #fff; border: 1px solid rgba(36, 34, 25, 0.15); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); overflow: hidden; } .${MENU_CLASS}[${TOP_BAR_ATTR}] { margin-left: 0; } .${MENU_CLASS} .bf-download-option { display: block; width: 100%; border: 0; background: transparent; text-align: left; padding: 10px 12px; color: #242219; font: inherit; cursor: pointer; } .${MENU_CLASS} .bf-download-option:hover { background: #f7f6f3; } `; document.head.appendChild(style); } function cleanText(text) { return (text || '').replace(/\u00a0/g, ' ').replace(/\s+/g, ' ').trim(); } function absoluteUrl(url) { try { return new URL(url || '', location.href).href; } catch { return url || ''; } } function escapeXml(value) { return String(value ?? '') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } function slugify(value) { return cleanText(value) .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/^-+|-+$/g, '') .slice(0, 80) || 'bookface-export'; } function isCommentContainer(node) { return Boolean(node && node.matches && node.matches('div[id^="comment-"]')); } function getPostContainer() { const prose = document.querySelector(POST_PROSE_SELECTOR); return prose ? prose.closest('main') : null; } function getContainerFromMenuButton(menuButton) { return menuButton.closest('div[id^="comment-"]') || getPostContainer(); } function getProse(container) { if (!container) return null; if (isCommentContainer(container)) { return container.querySelector('div.prose.max-w-none.w-full') || container.querySelector('.prose'); } return document.querySelector(POST_PROSE_SELECTOR) || container.querySelector('div.prose.max-w-none.w-full') || container.querySelector('.prose'); } function getMeta(container) { const prose = getProse(container); const authorLink = container.querySelector('a.font-bold.text-inherit') || container.querySelector('a[href^="/user/"]'); const companyLink = container.querySelector('a[href^="/company/"]'); const timeLink = container.querySelector('a[href*="/posts/"]'); const timeEl = container.querySelector('time'); const titleEl = prose ? prose.querySelector('h1, h2, h3, h4, h5, h6') : null; const itemType = isCommentContainer(container) ? 'comment' : 'post'; const itemId = container.id || 'post'; const fallbackTitle = itemType === 'post' ? cleanText(document.title.replace(/\s*\|\s*Bookface.*$/, '')) : `${cleanText(authorLink?.textContent) || 'comment'}-${itemId}`; return { prose, itemType, itemId, title: cleanText(titleEl?.textContent) || fallbackTitle, author: cleanText(authorLink?.textContent), authorUrl: authorLink ? absoluteUrl(authorLink.getAttribute('href')) : '', company: cleanText(companyLink?.textContent), companyUrl: companyLink ? absoluteUrl(companyLink.getAttribute('href')) : '', permalink: absoluteUrl(timeLink?.getAttribute('href') || (itemType === 'comment' ? `#${itemId}` : location.pathname + location.search + location.hash)), timeText: cleanText(timeEl?.textContent), timeIso: timeEl?.getAttribute('datetime') || '' }; } function collectImages(root) { return Array.from(root.querySelectorAll('img')) .map((img) => ({ src: absoluteUrl(img.getAttribute('src') || ''), alt: cleanText(img.getAttribute('alt') || '') })) .filter((img, index, arr) => img.src && arr.findIndex((other) => other.src === img.src) === index); } function inlineMarkdown(node) { if (node.nodeType === Node.TEXT_NODE) return node.textContent || ''; if (node.nodeType !== Node.ELEMENT_NODE) return ''; const el = node; const tag = el.tagName.toLowerCase(); if (tag === 'br') return ' \n'; if (tag === 'a') { const href = absoluteUrl(el.getAttribute('href') || ''); const text = cleanText(Array.from(el.childNodes).map(inlineMarkdown).join('')) || href; return href ? `[${text}](${href})` : text; } if (tag === 'img') { const src = absoluteUrl(el.getAttribute('src') || ''); const alt = cleanText(el.getAttribute('alt') || 'image'); return src ? `![${alt}](${src})` : ''; } if (tag === 'strong' || tag === 'b') return `**${Array.from(el.childNodes).map(inlineMarkdown).join('').trim()}**`; if (tag === 'em' || tag === 'i') return `*${Array.from(el.childNodes).map(inlineMarkdown).join('').trim()}*`; if (tag === 'code') return `\`${cleanText(el.textContent)}\``; return Array.from(el.childNodes).map(inlineMarkdown).join(''); } function listItemMarkdown(li, indent) { const inlineParts = []; const nestedParts = []; Array.from(li.childNodes).forEach((child) => { if (child.nodeType === Node.ELEMENT_NODE && ['ul', 'ol'].includes(child.tagName.toLowerCase())) { nestedParts.push(blockMarkdown(child, `${indent} `)); } else { inlineParts.push(inlineMarkdown(child)); } }); const line = cleanText(inlineParts.join(' ')); return [line, ...nestedParts].filter(Boolean).join(`\n${indent} `); } function blockMarkdown(node, indent = '') { if (!node) return ''; if (node.nodeType === Node.TEXT_NODE) return cleanText(node.textContent); if (node.nodeType !== Node.ELEMENT_NODE) return ''; const el = node; const tag = el.tagName.toLowerCase(); if (/^h[1-6]$/.test(tag)) { return `${'#'.repeat(Number(tag[1]))} ${cleanText(Array.from(el.childNodes).map(inlineMarkdown).join(''))}`; } if (tag === 'p') return Array.from(el.childNodes).map(inlineMarkdown).join('').trim(); if (tag === 'pre') return `\`\`\`\n${(el.textContent || '').trimEnd()}\n\`\`\``; if (tag === 'blockquote') { return Array.from(el.children) .map((child) => blockMarkdown(child, indent)) .filter(Boolean) .map((chunk) => chunk.split('\n').map((line) => `> ${line}`).join('\n')) .join('\n\n'); } if (tag === 'ul') { return Array.from(el.children) .filter((child) => child.tagName && child.tagName.toLowerCase() === 'li') .map((li) => `${indent}- ${listItemMarkdown(li, indent)}`) .join('\n'); } if (tag === 'ol') { return Array.from(el.children) .filter((child) => child.tagName && child.tagName.toLowerCase() === 'li') .map((li, index) => `${indent}${index + 1}. ${listItemMarkdown(li, indent)}`) .join('\n'); } if (tag === 'img') return inlineMarkdown(el); if (tag === 'hr') return '---'; if (!el.children.length) return cleanText(el.textContent); return Array.from(el.children) .map((child) => blockMarkdown(child, indent)) .filter(Boolean) .join('\n\n'); } function toMarkdown(meta) { const body = Array.from(meta.prose.children) .map((child) => blockMarkdown(child)) .filter(Boolean) .join('\n\n') .trim(); const images = collectImages(meta.prose); const header = [ `Title: ${meta.title}`, `Type: ${meta.itemType}`, meta.author ? `Author: ${meta.author}` : '', meta.company ? `Company: ${meta.company}` : '', meta.timeIso ? `Date: ${meta.timeIso}` : (meta.timeText ? `Date: ${meta.timeText}` : ''), `URL: ${meta.permalink}` ].filter(Boolean).join('\n'); const imageSection = images.length ? `\n\n## Embedded Images\n\n${images.map((img, i) => `${i + 1}. [${img.alt || 'image'}](${img.src})`).join('\n')}` : ''; return `${header}\n\n---\n\n${body}${imageSection}\n`; } function nodeToXml(node) { if (node.nodeType === Node.TEXT_NODE) { const text = node.textContent || ''; return text.trim() ? escapeXml(text) : ''; } if (node.nodeType !== Node.ELEMENT_NODE) return ''; const el = node; const tag = el.tagName.toLowerCase(); const children = Array.from(el.childNodes).map(nodeToXml).join(''); if (tag === 'br') return ''; if (tag === 'img') { return ` ${escapeXml(el.getAttribute('alt') || '')}

${escapeXml(el.getAttribute('alt') || '')}

`; } if (tag === 'a') { return `${children}`; } if (/^h[1-6]$/.test(tag)) { return `${children}`; } const map = { p: 'paragraph', ul: 'unorderedList', ol: 'orderedList', li: 'item', blockquote: 'blockquote', pre: 'preformatted', code: 'code', strong: 'strong', b: 'strong', em: 'emphasis', i: 'emphasis' }; const outTag = map[tag] || 'node'; return `<${outTag}>${children}`; } function toXml(meta) { const images = collectImages(meta.prose); const contentXml = Array.from(meta.prose.childNodes).map(nodeToXml).join(''); const imagesXml = images.map((img) => ` ${escapeXml(img.alt)}

`).join('\n'); return `\n\n ${escapeXml(meta.itemType)}\n ${escapeXml(meta.itemId)}\n ${escapeXml(meta.title)}\n ${escapeXml(meta.author)}\n ${escapeXml(meta.company)}\n ${escapeXml(meta.permalink)}\n ${escapeXml(meta.timeText)}\n \n${imagesXml}${imagesXml ? '\n' : ''} \n ${contentXml}\n\n`; } function downloadText(filename, content, mimeType) { const blob = new Blob([content], { type: `${mimeType};charset=utf-8` }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); setTimeout(() => URL.revokeObjectURL(url), 2000); } function buildFilename(meta, ext) { return `${meta.itemType}-${meta.itemId}-${slugify(meta.title)}.${ext}`; } function closeMenus(except) { document.querySelectorAll(`.${MENU_CLASS}[data-open="true"]`).forEach((menu) => { if (menu !== except) menu.setAttribute('data-open', 'false'); }); } function createDropdown(container, options = {}) { const { markAttr = SCRIPT_ATTR } = options; const wrapper = document.createElement('div'); wrapper.className = MENU_CLASS; wrapper.setAttribute(markAttr, 'true'); wrapper.setAttribute('data-open', 'false'); const trigger = document.createElement('button'); trigger.type = 'button'; trigger.textContent = 'Download'; const menu = document.createElement('div'); menu.className = 'bf-download-options'; const mdButton = document.createElement('button'); mdButton.type = 'button'; mdButton.className = 'bf-download-option'; mdButton.textContent = 'Download as Markdown'; const xmlButton = document.createElement('button'); xmlButton.type = 'button'; xmlButton.className = 'bf-download-option'; xmlButton.textContent = 'Download as XML'; trigger.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); const open = wrapper.getAttribute('data-open') !== 'true'; closeMenus(wrapper); wrapper.setAttribute('data-open', String(open)); }); mdButton.addEventListener('click', () => { const meta = getMeta(container); if (!meta.prose) return; downloadText(buildFilename(meta, 'md'), toMarkdown(meta), 'text/markdown'); wrapper.setAttribute('data-open', 'false'); }); xmlButton.addEventListener('click', () => { const meta = getMeta(container); if (!meta.prose) return; downloadText(buildFilename(meta, 'xml'), toXml(meta), 'application/xml'); wrapper.setAttribute('data-open', 'false'); }); menu.append(mdButton, xmlButton); wrapper.append(trigger, menu); return wrapper; } function enhance() { injectStyles(); const postContainer = getPostContainer(); const topActionRow = document.querySelector(TOP_ACTION_ROW_SELECTOR); if (topActionRow && postContainer && !topActionRow.querySelector(`:scope > [${TOP_BAR_ATTR}]`)) { const meta = getMeta(postContainer); if (meta && meta.prose) { topActionRow.appendChild(createDropdown(postContainer, { markAttr: TOP_BAR_ATTR })); } } document.querySelectorAll(TARGET_MENU_SELECTOR).forEach((menuButton) => { const hostRow = menuButton.parentElement; if (!hostRow || hostRow.querySelector(`:scope > [${SCRIPT_ATTR}]`)) return; const container = getContainerFromMenuButton(menuButton); const meta = container ? getMeta(container) : null; if (!meta || !meta.prose) return; hostRow.appendChild(createDropdown(container)); }); } document.addEventListener('click', (event) => { if (!event.target.closest(`.${MENU_CLASS}`)) closeMenus(null); }); window.addEventListener('hashchange', () => setTimeout(enhance, 50)); function start() { enhance(); const root = document.querySelector('main') || document.querySelector('div.pb-25.flex.flex-col.gap-y-5'); if (!root) return; const observer = new MutationObserver(() => enhance()); observer.observe(root, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start, { once: true }); } else { start(); } })();