Blog and comments

Requirements

A theme declares blog rendering support by using <gs-blog> in its Loom files. The compiler detects this element and writes supports_blog into the package registry. After npm run themes:build, run php artisan themes:sync from api. Enable Blog for the workspace. Loom markup does not grant access to a plugin.

Archive: sections/journal.html

<section class="theme-journal">
  <gs-blog variant="blog-grid-sidebar"></gs-blog>
</section>

*.schema.json:

{
  "name": "Blog",
  "settings": [],
  "presets": [
    {
      "name": "Blog"
    }
  ]
}

Page: templates/blog.json

{"title":"Blog","role":"blog","sections":{"journal":{"type":"journal"}},"order":["journal"]}

For an article page, use role: "blog-details". These roles support navigation, sitemap discovery and hiding blog pages when Blog is disabled. A fresh package installation creates these pages; upgrading a package does not automatically add pages to existing customer sites. Add a page with a blog layout and a blog section to an existing site.

Variants and addresses

blog-grid-sidebar and blog-list-sidebar display a list, or an article when a post is selected. blog-detail-sidebar is a detail view. For custom compositions use blog-cards, blog-list, blog-article, blog-search, blog-categories, blog-tags, blog-recent, blog-pagination, blog-author and blog-post-footer.

An article URL looks like /article?post=post-slug. The renderer finds archive and detail destinations through page roles. The API accepts post, page, search, category, tag. Shared components generate links and search forms; never fetch private endpoints from theme files. Public responses exclude drafts and posts scheduled for the future.

Comments plugin

<gs-blog variant="blog-article"></gs-blog>
<gs-comments></gs-comments>

Enable Blog, Comments and comments on the individual post. Only approved comments are visible. The reply form uses GrowSite validation, protection and endpoints. Submission is disabled in builder preview. Sidebar variants already include comments in their detail view, so do not add another gs-comments there.

Theme styling for Blog and Comments

gs-blog and gs-comments provide shared content, navigation and form behavior. They do not automatically reproduce your theme's visual design. Put the plugin styles in your theme package, for example assets/blog.css. GS Loom loads CSS from assets/ inside the theme scope; keep selectors limited to the relevant components so other sections retain their appearance.

Cover the complete reading experience:

GrowSite Skeleton includes its own assets/blog.css for both templates/blog.json and templates/article.json. It uses rounded dark cards, accent-colored tags and buttons, rounded images, and a comment form matching the Instant theme. The file also styles rich-text code blocks. Download the complete GrowSite Skeleton package to inspect the implementation and its theme variables.

For example, Skeleton styles the shared search component without replacing its form:

.sk-page .blog-section .blog-search {
  border: 1px solid var(--sk-border);
  border-radius: 50px;
  background: var(--sk-surface);
}
.sk-page .blog-section .blog-search input {
  font-size: 16px;
  color: var(--sk-text);
  background: transparent;
}

The --sk-* variables belong to Skeleton; define your own tokens when adapting this example to another theme. Give the input an explicit readable font size: the shared search label hides its visible text with font-size: 0, while its accessible name remains available.

Style hover, keyboard focus, disabled controls and narrow layouts. Preserve the shared form submission, validation and plugin access checks. On phones, stack the sidebar and comment fields, allow tags to wrap, and keep long content inside the page. See code block styling for rich-text code.

Verification and SEO

Create a published post, a draft and a future-dated post. Test the list, search, categories, pagination and article. Check empty lists, disabled comments, moderation and invalid replies. Disabling Blog removes pages with blog roles from public navigation without deleting content. GrowSite generates article metadata and canonical URLs; see SEO.