PageSourceSearch

https://postpreview.github.io/

html postpreview.github.io collected 2026-10-03 09:46:40 UTC 31,737 bytes, 585 lines download raw bytes

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                                &nbsp;&nbsp;platform: <span class="code-string">'facebook'</span>,<br>
116                                &nbsp;&nbsp;content: <span class="code-string">'Hello World!'</span>,<br>
117                                &nbsp;&nbsp;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">&lt;/&gt;</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.