1<!DOCTYPE html> 2<html lang="en"> 3<head> 4
4<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8148292690390336" 5 crossorigin="anonymous"></script>
5 6 <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 6-7
6 7<script async src="https://www.googletagmanager.com/gtag/js?id=
7G-RDPJKDNLYJ
vendor: 12 bytes, line 7
7"></script>
8<script> 9
vendor: 134 bytes, lines 9-13
9window.dataLayer = window.dataLayer || []; 10 function gtag(){dataLayer.push(arguments);} 11 gtag('js', new Date()); 12 13 gtag('config', '
13G-RDPJKDNLYJ
vendor: 4 bytes, line 13
13');
14</script>
14 15 <meta charset="UTF-8"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>Social Media Post Preview - Preview Your Posts Before Publishing | PostPreview</title> 18 <meta name="description" content="Preview how your social media posts will look on Facebook, X (Twitter), LinkedIn, Pinterest, Threads, Instagram, Reddit, and TikTok before you publish. Free social media post preview tool."> 19 <meta name="keywords" content="social media preview, post preview, Facebook preview, Twitter preview, X preview, LinkedIn preview, Instagram preview, TikTok preview, social media tool, content preview"> 20 <meta name="author" content="PostPreview"> 21 <meta name="robots" content="index, follow"> 22 <link rel="canonical" href="https://postpreview.github.io/"> 23 <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"> 24 25 26 <meta property="og:title" content="Social Media Post Preview - Preview Your Posts Before Publishing"> 27 <meta property="og:description" content="Preview how your posts will look across 8+ social media platforms before you hit publish. Free, fast, and developer-friendly."> 28 <meta property="og:url" content="https://postpreview.github.io/"> 29 <meta property="og:type" content="website"> 30 <meta property="og:site_name" content="PostPreview"> 31 <meta property="og:locale" content="en_US"> 32 33 34 <meta name="twitter:card" content="summary_large_image"> 35 <meta name="twitter:title" content="Social Media Post Preview - Preview Before You Publish"> 36 <meta name="twitter:description" content="Preview your posts on Facebook, X, LinkedIn, Pinterest, Threads, Instagram, Reddit & TikTok. Free tool for content creators."> 37 <meta name="theme-color" content="#f6f8fa"> 38 39 <!-- Schema Markup --> 40
40<script type="application/ld+json"> 41 { 42 "@context": "https://schema.org", 43 "@type": "WebApplication", 44 "name": "PostPreview", 45 "url": "https://postpreview.github.io/", 46 "description": "Preview how your social media posts will look across multiple platforms before publishing.", 47 "applicationCategory": "SocialMediaApplication", 48 "operatingSystem": "Web", 49 "offers": { 50 "@type": "Offer", 51 "price": "0", 52 "priceCurrency": "USD" 53 }, 54 "author": { 55 "@type": "Organization", 56 "name": "PostPreview" 57 }, 58 "browserRequirements": "Requires JavaScript" 59 } 60 </script>
60 61 62 <!-- Google Fonts --> 63 <link rel="preconnect" href="https://fonts.googleapis.com"> 64 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 65 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> 66 <link rel="stylesheet" href="/css/style.css" /> 67 68</head> 69<body> 70 71 <!-- Header placeholder --> 72 <div id="site-header"></div> 73 74 <!-- Mobile nav overlay --> 75 <div class="mobile-nav-overlay" id="mobileNavOverlay"></div> 76 <div class="mobile-nav" id="mobileNav"></div> 77 78 <main> 79 <!-- Hero Section --> 80 <section class="hero-section section" aria-labelledby="hero-title"> 81 <div class="container"> 82 <div class="hero-grid"> 83 <div class="hero-content animate-on-scroll"> 84 <div class="hero-badge"> 85 <span class="hero-badge-dot"></span> 86 <span>v2.0 â Now with 8+ platforms</span> 87 </div> 88 <h1 id="hero-title" class="hero-title"> 89 Preview Your Posts<br> 90 <span class="highlight">Before They Go Live</span> 91 </h1> 92 <p class="hero-description"> 93 See exactly how your content will appear on Facebook, X, LinkedIn, Instagram, TikTok, and more. Catch formatting issues before your audience does. 94 </p> 95 <div class="hero-actions"> 96 <a href="#preview-apps" class="btn btn-primary btn-lg"> 97 Start Previewing â 98 </a> 99 <a href="#how-it-works" class="btn btn-secondary btn-lg"> 100 See How It Works 101 </a> 102 </div> 103 </div> 104 <div class="hero-visual animate-on-scroll stagger-2"> 105 <div class="hero-code-block"> 106 <div class="code-block-header"> 107 <span class="code-dot red"></span> 108 <span class="code-dot yellow"></span> 109 <span class="code-dot green"></span> 110 <span style="font-size:0.7rem;color:#8b949e;margin-left:8px;">preview.js</span> 111 </div> 112 <div class="code-block-body"> 113 <span class="code-comment">// Initialize post preview</span><br> 114 <span class="code-keyword">const</span> <span>post</span> = <span class="code-function">createPreview</span>({<br> 115 platform: <span class="code-string">'facebook'</span>,<br> 116 content: <span class="code-string">'Hello World!'</span>,<br> 117 image: <span class="code-string">'og-image.png'</span><br> 118 });<br><br> 119 <span class="code-function">post.render</span>();<span class="code-cursor"></span> 120 </div> 121 </div> 122 </div> 123 </div> 124 </div> 125 </section> 126 127 <!-- Features Section --> 128 <section class="features-section section" aria-labelledby="features-title"> 129 <div class="container"> 130 <div class="section-header animate-on-scroll"> 131 <span class="section-label">// Features</span> 132 <h2 id="features-title" class="section-title">Built for Content Creators</h2> 133 <p class="section-subtitle">Powerful tools to ensure your social media posts look perfect on every platform.</p> 134 </div> 135 <div class="features-grid"> 136 <div class="feature-card animate-on-scroll stagger-1"> 137 <div class="feature-icon blue">{ }</div> 138 <h3>Multi-Platform Preview</h3> 139 <p>Preview your post across 8+ social media platforms simultaneously with a single click.</p> 140 </div> 141 <div class="feature-card animate-on-scroll stagger-2"> 142 <div class="feature-icon green"></></div> 143 <h3>Real-Time Rendering</h3> 144 <p>See changes instantly as you type. No page refreshes or delays â just immediate feedback.</p> 145 </div> 146 <div class="feature-card animate-on-scroll stagger-3"> 147 <div class="feature-icon purple">#</div> 148 <h3>Hashtag Analytics</h3> 149 <p>Check how hashtags render on each platform and optimize placement for maximum reach.</p> 150 </div> 151 <div class="feature-card animate-on-scroll stagger-4"> 152 <div class="feature-icon amber">img</div> 153 <h3>Image Preview</h3> 154 <p>See how your images crop, resize, and display across different social media layouts.</p> 155 </div> 156 <div class="feature-card animate-on-scroll stagger-5"> 157 <div class="feature-icon red">@</div> 158 <h3>Mention Validation</h3> 159 <p>Verify that @mentions and tagged accounts resolve correctly on each platform.</p> 160 </div> 161 <div class="feature-card animate-on-scroll stagger-6"> 162 <div class="feature-icon teal">~</div> 163 <h3>Character Count</h3> 164 <p>Platform-specific character limits and truncation previews so nothing gets cut off.</p> 165 </div> 166 </div> 167 </div> 168 </section> 169 170 <!-- Preview Apps Section --> 171 <section class="preview-apps-section section" id="preview-apps" aria-labelledby="apps-title"> 172 <div class="container"> 173 <div class="section-header animate-on-scroll">
174 <span class="section-label">// Preview Apps</span> 175 <h2 id="apps-title" class="section-title">Choose Your Platform</h2> 176 <p class="section-subtitle">Select a social media platform to preview how your post will look. Full preview tools coming soon.</p> 177 </div> 178 <div class="apps-grid"> 179 <!-- Facebook --> 180 <a href="#" class="app-card facebook animate-on-scroll stagger-1" aria-label="Preview on Facebook"> 181 <div class="app-card-icon">f</div> 182 <span class="app-card-name">Facebook</span> 183 <span class="app-card-subtitle">Feed & Story Preview</span> 184 <span class="app-card-badge">Preview</span> 185 </a> 186 <!-- X (Twitter) --> 187 <a href="#" class="app-card x animate-on-scroll stagger-2" aria-label="Preview on X"> 188 <div class="app-card-icon">ð</div> 189 <span class="app-card-name">X</span> 190 <span class="app-card-subtitle">formerly Twitter</span> 191 <span class="app-card-badge">Preview</span> 192 </a> 193 <!-- LinkedIn --> 194 <a href="#" class="app-card linkedin animate-on-scroll stagger-3" aria-label="Preview on LinkedIn"> 195 <div class="app-card-icon">in</div> 196 <span class="app-card-name">LinkedIn</span> 197 <span class="app-card-subtitle">Professional Feed</span> 198 <span class="app-card-badge">Preview</span> 199 </a> 200 <!-- Pinterest --> 201 <a href="#" class="app-card pinterest animate-on-scroll stagger-4" aria-label="Preview on Pinterest"> 202 <div class="app-card-icon">P</div> 203 <span class="app-card-name">Pinterest</span> 204 <span class="app-card-subtitle">Pin Preview</span> 205 <span class="app-card-badge">Preview</span> 206 </a> 207 <!-- Threads --> 208 <a href="#" class="app-card threads animate-on-scroll stagger-5" aria-label="Preview on Threads"> 209 <div class="app-card-icon">@</div> 210 <span class="app-card-name">Threads</span> 211 <span class="app-card-subtitle">Thread View</span> 212 <span class="app-card-badge">Preview</span> 213 </a> 214 <!-- Instagram --> 215 <a href="#" class="app-card instagram animate-on-scroll stagger-6" aria-label="Preview on Instagram"> 216 <div class="app-card-icon"> 217 <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="17.5" cy="6.5" r="1.2"/><rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="currentColor" stroke-width="2"/></svg> 218 </div> 219 <span class="app-card-name">Instagram</span> 220 <span class="app-card-subtitle">Feed & Reels</span> 221 <span class="app-card-badge">Preview</span> 222 </a> 223 <!-- Reddit --> 224 <a href="#" class="app-card reddit animate-on-scroll stagger-7" aria-label="Preview on Reddit"> 225 <div class="app-card-icon"> 226 <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><ellipse cx="9" cy="10" rx="1.5" ry="2" fill="currentColor"/><ellipse cx="15" cy="10" rx="1.5" ry="2" fill="currentColor"/><path d="M8 15c1.5 2 3.5 2.5 4 2.5s2.5-.5 4-2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 227 </div>
228 <span class="app-card-name">Reddit</span> 229 <span class="app-card-subtitle">Post & Comment</span> 230 <span class="app-card-badge">Preview</span> 231 </a> 232 <!-- TikTok --> 233 <a href="#" class="app-card tiktok animate-on-scroll stagger-8" aria-label="Preview on TikTok"> 234 <div class="app-card-icon"> 235 <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6V4h-2v2h-1v2h1v6c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4v2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2V6h4z" fill="currentColor"/></svg> 236 </div> 237 <span class="app-card-name">TikTok</span> 238 <span class="app-card-subtitle">Video Preview</span> 239 <span class="app-card-badge">Preview</span> 240 </a> 241 </div> 242 </div> 243 </section> 244 245 <!-- How It Works Section --> 246 <section class="how-it-works-section section" id="how-it-works" aria-labelledby="how-title"> 247 <div class="container"> 248 <div class="section-header animate-on-scroll"> 249 <span class="section-label">// How It Works</span> 250 <h2 id="how-title" class="section-title">Three Simple Steps</h2> 251 <p class="section-subtitle">Get from draft to perfect post in under a minute.</p> 252 </div> 253 <div class="steps-grid"> 254 <div class="step-card animate-on-scroll stagger-1"> 255 <div class="step-number">01</div> 256 <h3>Write Your Content</h3> 257 <p>Type or paste your post content, add images, hashtags, and mentions just like you normally would.</p> 258 </div> 259 <div class="step-card animate-on-scroll stagger-2"> 260 <div class="step-number">
26002</div> 261 <h3>Select Platforms</h3> 262 <p>Choose which social media platforms you want to preview â from Facebook to TikTok and everything in between.</p> 263 </div> 264 <div class="step-card animate-on-scroll stagger-3"> 265 <div class="step-number">03</div> 266 <h3>Preview & Perfect</h3> 267 <p>See exactly how your post renders on each platform. Tweak and refine until it looks flawless.</p> 268 </div> 269 </div> 270 </div> 271 </section> 272 273 <!-- Benefits Section --> 274 <section class="benefits-section section" aria-labelledby="benefits-title"> 275 <div class="container"> 276 <div class="section-header animate-on-scroll"> 277 <span class="section-label">// Why PostPreview</span> 278 <h2 id="benefits-title" class="section-title">Publish With Confidence</h2> 279 <p class="section-subtitle">Stop guessing how your posts will look. Know before you publish.</p> 280 </div> 281 <div class="benefits-grid"> 282 <div class="benefit-item animate-on-scroll stagger-1"> 283 <div class="benefit-check">â</div> 284 <div> 285 <h4>Eliminate Formatting Errors</h4> 286 <p>Catch broken line breaks, truncated text, and awkward image crops before anyone sees them.</p> 287 </div> 288 </div> 289 <div class="benefit-item animate-on-scroll stagger-2"> 290 <div class="benefit-check">â</div> 291 <div> 292 <h4>Save Hours of Editing</h4> 293 <p>No more publishing, checking, deleting, and reposting. Get it right the first time.</p> 294 </div> 295 </div> 296 <div class="benefit-item animate-on-scroll stagger-3"> 297 <div class="benefit-check">â</div> 298 <div> 299 <h4>Cross-Platform Consistency</h4> 300 <p>Ensure your message looks great everywhere â maintain brand consistency across all channels.</p> 301 </div> 302 </div> 303 <div class="benefit-item animate-on-scroll stagger-4"> 304 <div class="benefit-check">â</div> 305 <div> 306 <h4>Developer-Friendly Workflow</h4> 307 <p>Clean, fast interface designed for efficiency. Keyboard shortcuts, instant previews, zero bloat.</p> 308 </div> 309 </div> 310 </div> 311 </div> 312 </section> 313 314 <!-- Stats Section --> 315 <section class="stats-section section" aria-labelledby="stats-title"> 316 <div class="container"> 317 <div class="section-header animate-on-scroll"> 318 <span class="section-label">// By the Numbers</span> 319 <h2 id="stats-title" class="section-title">Trusted by Creators</h2> 320 </div> 321 <div class="stats-grid"> 322 <div class="stat-card animate-on-scroll stagger-1"> 323 <div class="stat-number">50K+</div> 324 <div class="stat-label">Posts Previewed</div> 325 </div> 326 <div class="stat-card animate-on-scroll stagger-2"> 327 <div class="stat-number">8+</div> 328 <div class="stat-label">Platforms Supported</div> 329 </div> 330 <div class="stat-card animate-on-scroll stagger-3"> 331 <div class="stat-number">99.8%</div> 332 <div class="stat-label">Render Accuracy</div> 333 </div> 334 <div class="stat-card animate-on-scroll stagger-4"> 335 <div class="stat-number">12K+</div> 336 <div class="stat-label">Happy Users</div> 337 </div> 338 </div> 339 </div> 340 </section> 341 342 <!-- Testimonials Section --> 343 <section class="testimonials-section section" aria-labelledby="testimonials-title"> 344 <div class="container"> 345 <div class="section-header animate-on-scroll">
346 <span class="section-label">// Testimonials</span> 347 <h2 id="testimonials-title" class="section-title">What Users Say</h2> 348 <p class="section-subtitle">Join thousands of content creators who publish with confidence.</p> 349 </div> 350 <div class="testimonials-grid"> 351 <div class="testimonial-card animate-on-scroll stagger-1"> 352 <p class="testimonial-text">PostPreview saved me from so many embarrassing formatting mistakes. Seeing exactly how my LinkedIn posts render before publishing is a game-changer.</p> 353 <div class="testimonial-author"> 354 <div class="testimonial-avatar">SR</div> 355 <div> 356 <div class="testimonial-name">Sarah Reynolds</div> 357 <div class="testimonial-role">Content Strategist</div> 358 </div> 359 </div> 360 </div> 361 <div class="testimonial-card animate-on-scroll stagger-2"> 362 <p class="testimonial-text">As a developer, I appreciate the clean, no-nonsense interface. It's fast, accurate, and the multi-platform preview is exactly what I needed for our social campaigns.</p> 363 <div class="testimonial-author"> 364 <div class="testimonial-avatar">MK</div> 365 <div> 366 <div class="testimonial-name">Marcus Kim</div> 367 <div class="testimonial-role">DevRel Lead</div> 368 </div> 369 </div> 370 </div> 371 <div class="testimonial-card animate-on-scroll stagger-3"> 372 <p class="testimonial-text">I manage 5 brand accounts and this tool has cut my editing time in half. The TikTok and Instagram previews are spot-on. Highly recommend!</p> 373 <div class="testimonial-author"> 374 <div class="testimonial-avatar">AJ</div> 375 <div> 376 <div class="testimonial-name">Aisha Johnson</div> 377 <div class="testimonial-role">Social Media Manager</div> 378 </div> 379 </div> 380 </div> 381 </div> 382 </div> 383 </section> 384 385 <!-- FAQ Section --> 386 <section class="faq-section section" aria-labelledby="faq-title"> 387 <div class="container"> 388 <div class="section-header animate-on-scroll"> 389 <span class="section-label">// FAQ</span> 390 <h2 id="faq-title" class="section-title">Frequently Asked Questions</h2> 391 </div> 392 <div class="faq-grid"> 393 <div class="faq-item animate-on-scroll stagger-1"> 394 <button class="faq-question" aria-expanded="false"> 395 Is PostPreview free to use? 396 <span class="faq-arrow">â¾</span> 397 </button> 398 <div class="faq-answer"> 399 <div class="faq-answer-inner">Yes! PostPreview is completely free for all 8+ social media platforms. We believe every content creator should have access to reliable preview tools without paying a premium.</div> 400 </div> 401 </div> 402 <div class="faq-item animate-on-scroll stagger-2"> 403 <button class="faq-question" aria-expanded="false"> 404 How accurate are the previews? 405 <span class="faq-arrow">â¾</span> 406 </button> 407 <div class="faq-answer"> 408 <div class="faq-answer-inner">Our previews achieve 99.8% render accuracy by using platform-specific style rules and regularly updated templates that match each social network's current design.</div> 409 </div> 410 </div> 411 <div class="faq-item animate-on-scroll stagger-3"> 412 <button class="faq-question" aria-expanded="false"> 413 Do I need to create an account?
414 <span class="faq-arrow">â¾</span> 415 </button> 416 <div class="faq-answer"> 417 <div class="faq-answer-inner">No account required! You can start previewing posts immediately. We may offer optional accounts in the future for saving preferences, but the core tool will always remain accessible.</div> 418 </div> 419 </div> 420 <div class="faq-item animate-on-scroll stagger-4"> 421 <button class="faq-question" aria-expanded="false"> 422 Can I preview image posts? 423 <span class="faq-arrow">â¾</span> 424 </button> 425 <div class="faq-answer"> 426 <div class="faq-answer-inner">Absolutely. Upload your images and see how they crop, resize, and display across different platforms â including aspect ratio adjustments and thumbnail generation.</div> 427 </div> 428 </div> 429 </div> 430 </div> 431 </section> 432 433 <!-- CTA Section --> 434 <section class="cta-section section" aria-labelledby="cta-title"> 435 <div class="cta-inner animate-on-scroll"> 436 <h2 id="cta-title">Ready to Preview Your Posts?</h2> 437 <p>Join thousands of content creators who publish with confidence. Start previewing your social media posts across 8+ platforms â free.</p> 438 <div class="cta-actions"> 439 <a href="#preview-apps" class="btn btn-primary btn-lg">Choose a Platform â</a> 440 </div> 441 </div> 442 </section> 443 </main> 444 445 <!-- Footer placeholder --> 446 <div id="site-footer"></div> 447 448 <!-- In the head or before closing body --> 449
449<script src="/js/header.js"></script>
449 450
450<script src="/js/footer.js"></script>
450 451
451<script src="/js/preview-apps.js"></script>
451 452
452<script src="/js/main.js"></script>
452 453 454
454<script> 455 // ============ SCROLL ANIMATIONS ============ 456 function initScrollAnimations() { 457 const animatedElements = document.querySelectorAll('.animate-on-scroll'); 458 459 const observer = new IntersectionObserver((entries) => { 460 entries.forEach(entry => { 461 if (entry.isIntersecting) { 462 entry.target.classList.add('visible'); 463 observer.unobserve(entry.target); 464 } 465 }); 466 }, { 467 threshold: 0.1, 468 rootMargin: '0px 0px -40px 0px' 469 }); 470 471 animatedElements.forEach(el => observer.observe(el)); 472 473 // Also observe stat numbers for counting animation 474 const statNumbers = document.querySelectorAll('.stat-number'); 475 const statObserver = new IntersectionObserver((entries) => { 476 entries.forEach(entry => { 477 if (entry.isIntersecting) { 478 entry.target.style.animation = 'none'; 479 entry.target.offsetHeight; 480 entry.target.style.animation = ''; 481 statObserver.unobserve(entry.target); 482 } 483 }); 484 }, { threshold: 0.5 }); 485 486 statNumbers.forEach(el => statObserver.observe(el)); 487 } 488 489 // ============ FAQ ACCORDION ============ 490 function initFAQ() { 491 const faqItems = document.querySelectorAll('.faq-item'); 492 faqItems.forEach(item => { 493 const questionBtn = item.querySelector('.faq-question'); 494 questionBtn.addEventListener('click', () => { 495 const isOpen = item.classList.contains('open'); 496 // Close all 497 faqItems.forEach(i => { 498 i.classList.remove('open'); 499 i.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); 500 }); 501 // Open clicked (if not already open) 502 if (!isOpen) { 503 item.classList.add('open'); 504 questionBtn.setAttribute('aria-expanded', 'true'); 505 } 506 }); 507 }); 508 } 509 510 // ============ SMOOTH SCROLL FOR ALL ANCHOR LINKS ============ 511 function initSmoothScroll() { 512 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 513 anchor.addEventListener('click', function(e) { 514 const targetId = this.getAttribute('href'); 515 if (targetId === '#') return; 516 const target = document.querySelector(targetId); 517 if (target) { 518 e.preventDefault(); 519 const headerOffset = 80; 520 const elementPosition = target.getBoundingClientRect().top; 521 const offsetPosition = elementPosition + window.pageYOffset - headerOffset; 522 window.scrollTo({ 523 top: offsetPosition, 524 behavior: 'smooth' 525 }); 526 } 527 }); 528 }); 529 } 530 531 // ============ INITIALIZE EVERYTHING ============ 532 function init() { 533 // Header and Footer are now handled by external components 534 // header.js and footer.js will auto-initialize when loaded 535 536 initScrollAnimations(); 537 initFAQ(); 538 initSmoothScroll(); 539 540 // Check if header component exists (from header.js) 541 if (window.headerComponent) { 542 console.log('[PostPreview] Header component loaded successfully'); 543 } else { 544 console.warn('[PostPreview] Header component not found. Make sure header.js is loaded.'); 545 } 546 547 // Check if footer component exists (from footer.js) 548 if (window.footerComponent) { 549 console.log('[PostPreview] Footer component loaded successfully'); 550 } else { 551 console.warn('[PostPreview] Footer component not found. Make sure footer.js is loaded.'); 552 } 553 554 // Check if preview apps component exists (from preview-apps.js) 555 if (window.previewAppsComponent) { 556 console.log('[PostPreview] Preview Apps component loaded successfully'); 557 558 // Example: Set custom click handler 559 window.previewAppsComponent.setOnAppClick((appData) => { 560 console.log(`[PostPreview] Custom handler: ${appData.name} clicked`); 561 }); 562 } else { 563 console.warn('[PostPreview] Preview Apps component not found. Make sure preview-apps.js is loaded.'); 564 } 565 } 566 567 // Run on DOM ready 568 if (document.readyState === 'loading') { 569 document.addEventListener('DOMContentLoaded', init); 570 } else { 571 init(); 572 } 573 574 // ============ SERVICE WORKER REGISTRATION (Optional PWA) ============ 575 // Left as a placeholder for future PWA implementation 576 console.log( 577 '%cð PostPreview %c v2.0 %cReady', 578 'font-weight:bold;color:#0969da;', 579 'color:#656d76;',
580 'color:#1a7f37;font-weight:bold;' 581 ); 582 console.log('%cPreview your posts before they go live.', 'color:#8b949e;font-style:italic;'); 583</script>
583 584</body> 585</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.