Skip to content

feat(blog): add blog layout example site - #16

Merged
devalog merged 10 commits into
mainfrom
devin/1787851149-blog-example
Aug 27, 2026
Merged

feat(blog): add blog layout example site#16
devalog merged 10 commits into
mainfrom
devin/1787851149-blog-example

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a blog/ example site so the blog changelog layout has a Fern-owned demo to point at — docs screenshots and videos currently have to borrow a customer site.

The example is deliberately a full exercise of the layout's surface rather than a minimal one, since it doubles as the reference authors copy:

# blog/fern/docs.yml
navigation:
  - blog: ./blog          # alias of `changelog:`, defaults the title/slug to Blog//blog
# blog/fern/blog/overview.mdx
layout: blog
blog-layout: list
authors:                  # registry the posts reference by ID
  mira: { name, role, url }

Across the six entries: single author, multi-authors, per-post slug (full site-relative, blog/<name>), tags, a hotlinked thumbnail image, and an excerpt override.

Two things the example deliberately does not demonstrate, because they don't work end-to-end yet:

  • draft: true / hidden: true only drop the card from the listing. The entry stays in the sidebar nav, stays in /blog.rss, and its page still returns 200 — verified on this PR's preview.
  • Local authors.*.avatar paths never resolve: the CLI rewrites and uploads local paths for the image frontmatter key and markdown body images, not nested author fields, so the avatar is dropped and the byline renders name + role only. External avatar URLs do work.

thumbnail vs image, found while building this: the docs describe thumbnail and image as interchangeable for setting the card/hero picture. On the deployed preview they aren't — image only reaches og:image metadata (social-share preview), it never renders on the page in either grid or list layout. thumbnail is the field that actually shows the picture, and only blog-layout: list displays it (beside the post text); grid cards render with no image slot at all. All six posts use thumbnail with a hotlinked URL (no checked-in image assets) and the overview is set to blog-layout: list accordingly. Worth a docs fix independent of this PR.

Pinned to CLI 5.106.1 in fern.config.json — earlier versions reject the blog: key. fern check passes.

Wired into the check, preview-docs, and publish-docs matrices and the README table, so it publishes to blog.docs.buildwithfern.com on merge like the other examples.

Link to Devin session: https://app.devin.ai/sessions/da27e5183b724ee0953e0cd3f4cbcd06
Open in Devin Desktop: https://app.devin.ai/desktop/session/da27e5183b724ee0953e0cd3f4cbcd06?variant=devin

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@github-actions

github-actions Bot commented Aug 27, 2026

Copy link
Copy Markdown

cadesark and others added 5 commits August 27, 2026 17:26
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Swap each post's image frontmatter from a local ./images/*.jpg path
to a hotlinked Unsplash URL, and drop the checked-in jpg files. Keeps
the example lighter and avoids shipping binary stock photos in the repo.

Co-Authored-By: Claude <noreply@anthropic.com>
blog-layout: grid only feeds the image into og:image metadata; the
list layout is the one that actually displays it beside the post
text. Confirmed on the deployed preview: grid showed no thumbnail
anywhere (card or post page), list does.

Co-Authored-By: Claude <noreply@anthropic.com>
Probing whether `thumbnail` is the key that actually wires to a
visible card/hero image, since `image` only reached og:image
metadata on the deployed preview, not any on-page element.

Co-Authored-By: Claude <noreply@anthropic.com>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

Context on the last three commits, since the images are being chased from the wrong end.

The images aren't missing because of the layout, the image host, or the frontmatter key. This preview is still serving a docs bundle built before fern-api/fern-platform#14268 merged, and that bundle reads frontmatter image as a plain string:

image: readString(frontmatter.thumbnail) ?? readString(frontmatter.image),

The CLI, however, rewrites image into an object for every value it sees — a local path becomes {type: "fileId", value} and an absolute URL becomes {type: "url", value} (visitFrontmatterImages in packages/cli/docs-markdown-utils/src/parseImagePaths.ts, applied to ["image", "og:image", "og:logo", "twitter:image"]). So the old bundle drops the value regardless of whether it points at a checked-in JPEG or at Unsplash, which is why hotlinking changed nothing and why the payload still renders "image":"$undefined".

Two of the three commits therefore can't have the intended effect:

  • blog-layout: gridlist doesn't touch image rendering. Both variants render the same BlogCard with the same <FernImage width={1200} height={675}> and the same aspect-video w-full rule; they differ only in flex direction and image width.
  • Hotlinking is a no-op for this bug, and it costs the example the local-path demonstration — which is exactly the authoring shape #14268 fixed and the one a reader is most likely to copy.

thumbnail is the one experiment that will appear to work, but for a reason that doesn't generalize: thumbnail isn't in the CLI's rewrite list, so it stays a plain string and the old bundle's readString picks it up. That also means a local thumbnail path is never uploaded, so it only works for absolute URLs.

Suggestion: revert all three and let the merged fix deploy. image: ./images/*.jpg with the checked-in JPEGs and blog-layout: grid is both the better example and the configuration that exercises the fix.

devalog and others added 4 commits August 27, 2026 15:10
Confirmed on the deployed preview: `image` only reaches og:image
metadata (social-share preview), it never renders on the page.
`thumbnail` is the field that actually shows the picture beside the
post text in blog-layout: list. Bring the other five posts in line
with the one that was already switched over.

Co-Authored-By: Claude <noreply@anthropic.com>
The card renders thumbnails in a fixed 1200x675 (16:9) box. Five posts
were serving the source photo's native 3:2 crop, so the browser had to
center-crop off ~16% of the height client-side. Request the exact box
size from Unsplash (w=1200&h=675&fit=crop) instead, so the crop is
deliberate and no extra bytes are downloaded.

Also swap the pruning-webhooks thumbnail: its source photo was a 4:5
portrait, losing over half its height to the same box. Replaced with a
photo that's natively 16:9 (a trimmed-hedge garden path), which needs
no cropping at all.

Co-Authored-By: Claude <noreply@anthropic.com>
Both lines said the same thing ("notes from the team" / "team...");
give the intro paragraph its own job of previewing what's on the blog.

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
@devalog
devalog merged commit 4ea8ccb into main Aug 27, 2026
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants