diff --git a/fern/docs.yml b/fern/docs.yml index 1bd6e2298..e44dfd9ea 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -152,6 +152,8 @@ js: strategy: beforeInteractive - path: ./rive-animation.js strategy: afterInteractive + - path: ./pdf-download.js + strategy: afterInteractive analytics: # posthog: diff --git a/fern/pdf-download.js b/fern/pdf-download.js new file mode 100644 index 000000000..5c14745a6 --- /dev/null +++ b/fern/pdf-download.js @@ -0,0 +1,150 @@ +(function() { + function addPdfDownloadButton() { + if (!window.location.pathname.includes('/home')) { + return; + } + + const heroSection = document.querySelector('.hero-section'); + if (!heroSection) { + return; + } + + const existingButton = document.getElementById('pdf-download-btn'); + if (existingButton) { + return; + } + + const buttonContainer = document.createElement('div'); + buttonContainer.style.cssText = 'margin-top: 20px; text-align: center;'; + + const downloadButton = document.createElement('button'); + downloadButton.id = 'pdf-download-btn'; + downloadButton.className = 'fern-button filled normal primary gap-1'; + downloadButton.innerHTML = ` + + + + + + Download PDF + `; + downloadButton.style.cssText = 'cursor: pointer; display: inline-flex; align-items: center;'; + + downloadButton.addEventListener('click', function() { + downloadButton.disabled = true; + downloadButton.innerHTML = 'Generating PDF...'; + + setTimeout(function() { + window.print(); + + setTimeout(function() { + downloadButton.disabled = false; + downloadButton.innerHTML = ` + + + + + + Download PDF + `; + }, 1000); + }, 100); + }); + + buttonContainer.appendChild(downloadButton); + + const heroTitleContainer = heroSection.querySelector('.hero-title-container'); + if (heroTitleContainer) { + heroTitleContainer.appendChild(buttonContainer); + } + } + + function addPrintStyles() { + const existingStyle = document.getElementById('pdf-print-styles'); + if (existingStyle) { + return; + } + + const style = document.createElement('style'); + style.id = 'pdf-print-styles'; + style.textContent = ` + @media print { + @page { + size: A4; + margin: 1cm; + } + + body { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + #pdf-download-btn { + display: none !important; + } + + .dashed-pattern { + display: none !important; + } + + nav, header, footer, .navbar, .sidebar { + display: none !important; + } + + .hero-section { + page-break-after: avoid; + } + + .panel-card { + page-break-inside: avoid; + margin-bottom: 20px; + } + + .feature-grid { + display: block !important; + } + + .rive-container, canvas { + display: none !important; + } + + a { + text-decoration: none; + color: inherit; + } + + a[href]:after { + content: " (" attr(href) ")"; + font-size: 0.8em; + color: #666; + } + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + } + `; + document.head.appendChild(style); + } + + function initialize() { + addPrintStyles(); + addPdfDownloadButton(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initialize); + } else { + initialize(); + } + + let lastUrl = location.href; + new MutationObserver(() => { + const url = location.href; + if (url !== lastUrl) { + lastUrl = url; + setTimeout(initialize, 100); + } + }).observe(document, { subtree: true, childList: true }); +})();