Blog Post

Image sizing: Display phone screenshots at approximately 230x516px. Adjust proportionally if the source image has a different aspect ratio.

3. Add screenshots

Leave <!-- TODO: description --> comments with placeholder image references (PLACEHOLDER_name.webp) where screenshots are needed. Then use the /emulator-screenshot skill to capture each one:

1. Tell the user which screen to navigate to
2. Wait for them to confirm ready
3. Run /emulator-screenshot blog/entries/<postName>/<imageName>.webp
4. Update the HTML to replace the placeholder with the actual filename
5. Repeat for each screenshot

4. Add to blog index

Edit blog.html to add a new entry card at the top (newest first):

<a href="/blog/entries/<postName>/<postName>.html" class="blog-entry-link">
    <div class="blog-entry">
        <img src="/blog/entries/<postName>/thumb.webp" alt="Blog Image" class="blog-image">
        <div class="blog-content">
            <h2 class="blog-title">Post Title</h2>
            <p class="blog-date">Mon DD, YYYY</p>
            <p class="blog-blurb">Short one-line description</p>
        </div>
    </div>
</a>

5. Create thumbnail

Create a thumbnail for the blog index card. Use 640px width since the thumbnail is also used in the app and needs to stay sharp:

magick blog/entries/<postName>/<image>.webp -resize 640x blog/entries/<postName>/thumb.webp

6. Add to sitemap

Add the new post URL to sitemap.xml:

<url>
    <loc>https://www.squabbitgolf.com/blog/entries/<postName>/<postName>.html</loc>
    <changefreq>yearly</changefreq>
    <priority>0.6</priority>
</url>

7. Run build script

Run node build.js to inline the header and footer into the new post.