.tag background: #eef3fc; padding: 0.2rem 0.7rem; border-radius: 30px; font-size: 0.7rem; font-weight: 500; color: #1e5f8e;
/* main container */ .app-container max-width: 1400px; margin: 0 auto;
.copy-btn background: transparent; border: 1px solid #bed0e0; padding: 0.4rem 1rem; border-radius: 40px; font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: 0.2s; color: #1e5a7a;
const displayDate = formatDisplayDate(rawDate); const tagArray = parseTags(tagsRaw); // Process content: simple formatting: preserve line breaks and optionally convert markdown-style **bold** let formattedContent = content; // simple inline bold conversion (optional but nice) formattedContent = formattedContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); formattedContent = formattedContent.replace(/\*(.*?)\*/g, '<em>$1</em>'); // convert line breaks to <br> for proper rendering formattedContent = formattedContent.replace(/\n/g, '<br>'); // Build the post html const postHTML = ` <div class="post-card"> <div class="post-header"> <div class="post-category">$escapeHtml(category)</div> <div class="post-title">$escapeHtml(title)</div> <div class="post-meta"> <span>👤 $escapeHtml(author)</span> <span>📅 $escapeHtml(displayDate)</span> <span>⏱️ $Math.max(1, Math.ceil(content.length / 300)) min read</span> </div> </div> <div class="post-body"> <div class="post-content">$formattedContent</div> </div> <div class="post-footer"> <div class="tag-list"> $tagArray.length > 0 ? tagArray.map(tag => `<span class="tag">#$escapeHtml(tag)</span>`).join('') : '<span class="tag">#general</span>' </div> <button class="copy-btn" id="copyPostBtn">📋 Copy post</button> </div> </div> `; previewContainer.innerHTML = postHTML; // attach copy event to the newly created button const copyButton = document.getElementById('copyPostBtn'); if (copyButton) copyButton.addEventListener('click', (e) => e.preventDefault(); copyPostContentToClipboard(title, author, displayDate, category, content, tagArray); ); // helper: copy entire post as formatted text (rich text / plain fallback) function copyPostContentToClipboard(title, author, date, category, rawContent, tagsArray) // build a clean textual representation of the post const tagLine = tagsArray.length ? `Tags: $tagsArray.join(', ')` : 'Tags: general'; const plainText = `📌 "$title"\n$category · by $author · $date\n\n$rawContent\n\n$tagLine\n— Generated via Http‑— Post Builder`; // Use clipboard API navigator.clipboard.writeText(plainText).then(() => showToast('✨ Post copied to clipboard!'); ).catch(err => console.warn('Clipboard error:', err); // fallback const textarea = document.createElement('textarea'); textarea.value = plainText; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); showToast('📋 Copied (fallback)'); ); // basic XSS protection function escapeHtml(str) if (!str) return ''; return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; ); // set default placeholder content on first load: a nice demo post example function setDefaultDemoContent() if (titleInput.value === '') titleInput.value = 'HTTP/3: The next generation of the web'; if (categoryInput.value === '') categoryInput.value = 'Web Protocols'; if (authorInput.value === '') authorInput.value = 'Alex Rivera'; if (contentTextarea.value === '') contentTextarea.value = `The Hypertext Transfer Protocol (HTTP) is the foundation of data exchange on the World Wide Web. **HTTP/3** introduces QUIC as a transport protocol, reducing latency and improving performance on unreliable networks.\n\nWith HTTP/3, websites load faster, streams are independent, and connection migration becomes seamless. It's a giant leap for real-time applications and mobile browsing.\n\nIn this post, we’ll explore the key advantages, adoption rates, and how to prepare your infrastructure for the future of HTTP.`; if (tagsInput.value === '') tagsInput.value = 'http3, quic, performance, webdev'; // set a default date to today's date for nicer preview if (!dateInput.value) const today = new Date().toISOString().split('T')[0]; dateInput.value = today; // event handler: generate post based on current fields function handleGenerate() generatePostPreview(); showToast('✅ Post preview updated'); // attach event listener generateBtn.addEventListener('click', handleGenerate); // additional: pressing Enter on any field? not necessary but nice (optional) const fields = [titleInput, categoryInput, authorInput, contentTextarea, tagsInput]; fields.forEach(field => field.addEventListener('keypress', (e) => if (e.key === 'Enter' && (e.target === tagsInput ); ); // Initialize: set demo content if fields are empty, then generate initial preview setDefaultDemoContent(); generatePostPreview(); // also regenerate if user manually clicks, but we already have button. // optional: auto-refresh? not to spam, but fine with manual trigger. // small extra: provide a reset if needed, but this is clean. // adding a minor double click safety </script> </body> </html> **HTTP/3** introduces QUIC as a transport protocol, reducing
.toast-msg position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #1e2f3c; color: white; padding: 0.7rem 1.6rem; border-radius: 60px; font-size: 0.85rem; font-weight: 500; z-index: 1000; opacity: 0; transition: opacity 0.25s; pointer-events: none; backdrop-filter: blur(8px); background: #1f3b4cee; box-shadow: 0 6px 14px rgba(0,0,0,0.2);
.input-group margin-bottom: 1.5rem;
label display: block; font-weight: 600; margin-bottom: 0.5rem; color: #1f3b4c; font-size: 0.85rem; letter-spacing: 0.3px; text-transform: uppercase; // optional: auto-refresh
.post-content font-size: 1rem; line-height: 1.55; color: #1f2f3a; white-space: pre-wrap; word-break: break-word;
<div class="input-group"> <label>🏷️ Tags (comma separated)</label> <input type="text" id="postTags" placeholder="e.g., http, webdev, performance" value="http, api, development"> </div>
// Helper: parse tags from comma-separated string -> array of trimmed tags function parseTags(tagString) if (!tagString) return []; return tagString.split(',').map(t => t.trim()).filter(t => t !== ''); .toast-msg position: fixed
.empty-preview background: #f9fcff; border-radius: 1.5rem; padding: 3rem 1.5rem; text-align: center; color: #98b1c9; border: 1px dashed #cbdde9;
.post-header background: #f8fafd; padding: 1.2rem 1.5rem; border-bottom: 2px solid #e2e8f0;
.hero p color: #2c3e4e; margin-top: 0.75rem; font-size: 1.1rem; font-weight: 500;
button background: none; border: none; hr margin: 0.5rem 0; </style> </head> <body> <div class="app-container"> <div class="hero"> <h1> 📝 Http‑— <span>generate a post</span> </h1> <p>✍️ Fill the details & instantly generate a rich, ready-to-share blog post preview</p> </div>