SideButton Media (News & Releases) — Knowledge Module

Media (News & Releases)

What This Is

Public-facing news and releases page added in the April 2026 redesign. Serves as a press/news index that links to individual announcement posts. Each post is rendered from a static MDX/markdown file at build time. Reachable from the header nav (replaced "Contribute" in the header) and the footer.

As of 2026-04-26 the index lists one post: the platform launch announcement at /media/sidebutton-open-source-platform-release.

URL Patterns

Pattern	HTTP	Description
/media	200	News & releases index
/media/sidebutton-open-source-platform-release	200	Platform launch announcement (the only published post)
/media/{unknown-slug}	404	Unknown slug → site 404 page (h1: "404: Not found", body shows Path: /media/{slug})
/media/sidebutton-agent-stack-thumb.png	200	Index card thumbnail asset
/media/sidebutton-agent-stack-original.png	200	Post hero image asset

Index Page (/media)

Page Title & Meta

• <title>: SideButton News & Releases
• H1: SideButton News & Releases
• Canonical: https://sidebutton.com/media
• Meta description: News, releases, and updates from SideButton — the open-source MCP server and AI agent platform.
• og:title: same as <title>; og:image: /og-image.png (site-wide default)

Page Structure

+--[Header: marketing layout]------------------------+
|                                                    |
|  H1: SideButton News & Releases                    |
|  Intro paragraph (with 3 inline links):            |
|    "News, releases, and updates from the           |
|     SideButton project. Explore our [skills] or    |
|     [create a skill for agentic AI]."              |
|                                                    |
|  [News card]                                       |
|    Hero image (linked)                             |
|    [Release] badge   April 12, 2026                |
|    H2: post title (linked)                         |
|    Excerpt paragraph                               |
|                                                    |
+--[Footer: standard]--------------------------------+

Key Elements (index)

Element	Selector	Notes
H1	heading "SideButton News & Releases"	Primary page heading
Intro link "SideButton"	link "SideButton" (in main, first)	→ /
Intro link "skills"	link "skills"	→ /skills (lowercase text)
Intro link "create a skill for agentic AI"	link "create a skill for agentic AI"	→ /create-agentic-ai-skill (replaces old /contribute link in this intro paragraph)
Card image	img "SideButton — Open Source Platform for AI Agents"	src=/media/sidebutton-agent-stack-thumb.png — wraps a link to the post
Card category badge	span w/ classes inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold bg-primary/10 text-primary, text Release	Pill shown above the date
Card date	<time datetime="YYYY-MM-DD">	Visible text e.g. April 12, 2026
Card heading (H2)	heading "SideButton — Open Source Platform for AI Agents"	Linked to the post
Card link	link "SideButton — Open Source Platform for AI Agents"	Wraps both image and heading; → /media/sidebutton-open-source-platform-release
Card excerpt	Paragraph below H2: MCP server with knowledge packs that teach AI agents any web app. Works with Claude Code, Cursor, ChatGPT.	Plain text, no links

Disambiguation tip

The post image alt text and the H2 are identical, so link "SideButton — Open Source Platform for AI Agents" and img "SideButton — Open Source Platform for AI Agents" and heading "SideButton — Open Source Platform for AI Agents" all match the same post. Use the heading/H2 role for the title, the img role for the hero, and grab the wrapping link for navigation.

Post Detail Page (/media/{slug})

Verified against /media/sidebutton-open-source-platform-release on 2026-04-26.

Page Title & Meta

• <title>: post-specific (e.g. SideButton — Open Source AI Agent Platform) — note the title is slightly different from the index card heading (the index uses "Open Source Platform for AI Agents", the post uses "Open Source AI Agent Platform")
• H1: matches <title> (post title)
• Canonical: https://sidebutton.com/media/{slug}
• og:type: website (not article — post detail pages do not use article-typed OG)
• <time>: <time datetime="2026-04-12" class="text-sm text-text-muted">April 12, 2026</time> inside a div

Page Structure

+--[Header: marketing layout]-----------------------+
|                                                   |
|  <article> wrapper                                |
|    [Release] badge                                |
|    <time> April 12, 2026                          |
|    H1: post title                                 |
|    Lede paragraph (post-level summary)            |
|                                                   |
|  Hero image (full width, original asset)          |
|                                                   |
|  <article> body                                   |
|    H2: What is SideButton                         |
|    H2: How it works                               |
|       <ul>                                        |
|         <li>step text + <pre>$ npx sidebutton...  |
|              [Copy command] button</li>           |
|         <li>step text + Chrome Web Store link</li>|
|         <li>step text + <pre>$ claude mcp add...  |
|              [Copy command] button</li>           |
|         <li>step text + "Learn how to create...   |
|              skill pack" link</li>                |
|         <li>step text only</li>                   |
|       </ul>                                       |
|    H2: Knowledge Packs (with 2 inline links)      |
|    H2: Feedback (with GitHub issue + site link)   |
|    H2: What's next (3-item list)                  |
|    H3: Start building enterprise AI agents today  |
|       [GitHub] [Documentation]                    |
|    Link: ← Back to Media                          |
|                                                   |
+--[Footer: standard]-------------------------------+

Key Elements (post detail)

Element	Selector	Notes
Article wrapper	article (two on this page — header block + body block)	Astro layout splits hero from body
Category badge	span.bg-primary/10.text-primary text Release	Same pill style as index card
Publish date	time[datetime="YYYY-MM-DD"]	ISO date in attribute, human-readable text inside
H1 (title)	heading "..." (level=1)	Post title
Hero image	img with full descriptive alt; src=/media/sidebutton-agent-stack-original.png	Larger asset than the index thumbnail
Section H2s	heading (level=2)	On the launch post: "What is SideButton", "How it works", "Knowledge Packs", "Feedback", "What's next"
Code block	<pre><code>	Inline code for short paths (e.g. ~/.sidebutton/skills/); <pre><code> for shell commands
Copy command button	button.copy-btn[aria-label="Copy command"]	Sits inside the same list item as the <pre> it copies; clicking copies the command (no visible state change captured here)
CTA H3	heading "Start building enterprise AI agents today" (level=3)	End-of-post CTA
GitHub CTA	link "GitHub"	→ https://github.com/sidebutton/sidebutton
Documentation CTA	link "Documentation"	→ https://docs.sidebutton.com/
Back link	link "← Back to Media"	→ /media (literal arrow + space prefix)

Outbound Links from the Launch Post

Anchor text	Destination
Chrome Web Store	https://chromewebstore.google.com/detail/sidebutton/odaefhmdmgijnhdbkfagnlnmobphgkij
Learn how to create a skill pack	https://docs.sidebutton.com/knowledge-packs/creating
Browse available skills	/skills
create a skill for agentic AI	/create-agentic-ai-skill
Submit an issue on GitHub	https://github.com/sidebutton/sidebutton/issues
sidebutton.com	/
GitHub (CTA)	https://github.com/sidebutton/sidebutton
Documentation (CTA)	https://docs.sidebutton.com/
← Back to Media	/media

Data Model

News Post (observed)

Field	Type	Example
Slug	URL path	sidebutton-open-source-platform-release
Category	Enum (badge)	Release (only value seen so far; pill uses bg-primary/10 text-primary styling)
Publish date	ISO date in <time datetime>, human-readable in text	2026-04-12 / April 12, 2026
Title	Plain text	SideButton — Open Source AI Agent Platform
Index card title	Plain text (may differ from post title)	SideButton — Open Source Platform for AI Agents
Excerpt	Plain text paragraph	MCP server with knowledge packs that teach AI agents any web app. Works with Claude Code, Cursor, ChatGPT.
Index thumbnail	Image URL	/media/sidebutton-agent-stack-thumb.png
Post hero image	Image URL	/media/sidebutton-agent-stack-original.png
Body	MDX/HTML with H2 sections, lists, <pre><code> blocks, button.copy-btn widgets	n/a

Post count as of 2026-04-26: 1.

States

State	Trigger	Visual / DOM Indicator
Index — populated	Page load with ≥1 post	One news card per post; no pagination/filter UI
Index — empty	No posts (not currently observed)	Layout untested; assume H1 + intro paragraph render but card region is empty
Post — found	Valid slug	200; <article> + <time> + H1 + body sections render
Post — not found	Unknown slug under /media/	404 page: <title>404: Not Found, H1: 404: Not found, body shows Path: /media/{slug} (matches site-wide 404, not a media-specific template)
Cookie consent first visit	First visit, no cookie	dialog "Cookie Notice" floats with button "Accept" and button "Reject"; link "Privacy Policy" inside

Common Tasks

1. Reach the media index

1. From any page, click header link "Media" OR footer link "Media" → /media

2. Open the latest post from the index

1. Navigate to /media
2. Take a snapshot, find the news card and click link "{post title}" (or click the wrapping image/heading)
3. Verify URL changes to /media/{slug} and <article> is present

3. Verify a post's publish date programmatically

1. On post detail, read document.querySelector('time').getAttribute('datetime') — returns YYYY-MM-DD
2. The visible text (time.innerText) is the human format and may vary by locale

4. Trigger the "Copy command" widget on the launch post

1. Navigate to /media/sidebutton-open-source-platform-release
2. Take a snapshot — there are 2 button "Copy command" instances inside the "How it works" list (one per shell command)
3. Click the first to copy npx sidebutton@latest; click the second to copy claude mcp add sidebutton http://localhost:9876/mcp
4. The button has class copy-btn and aria-label Copy command; clipboard write is via JS — no visible state change captured in the snapshot

5. Return to the index from a post

1. Click link "← Back to Media" (note the literal ← prefix) at the bottom of the post → /media

Tips

• This page is NEW as of the April 2026 redesign — "Media" replaced "Contribute" in the header. "Contribute" was further renamed/relocated: the link in the index intro paragraph now reads "create a skill for agentic AI" and points to /create-agentic-ai-skill, not /contribute.
• The header live in 2026-04-26 shows MCP Server / Skills / Media / Docs — note "Skills" (lowercase plural, not "Knowledge Packs") and the new "MCP Server" link. If the parent app skill still says "Knowledge Packs", trust the live snapshot.
• The index card title and the post H1 are not guaranteed to match — see the launch post for an example (one says "Open Source Platform for AI Agents", the other says "Open Source AI Agent Platform").
• Both the card image and the heading are wrapped in the same anchor — clicking either navigates to the post.
• The <time> element's datetime attribute is the safe way to read post date programmatically (independent of locale).
• og:type for post detail pages is website, not article — don't use OG-type to disambiguate index vs. post.

Gotchas

• Post detail uses the site-wide 404, not a media-specific empty state. Unknown /media/{slug} returns the generic 404 page (h1: 404: Not found). Don't assert media-themed copy on missing-post URLs.
• Index page has no pagination, search, filters, or tags. It's a static list. Tests assuming rich list features will fail.
• Index page main content is empty as raw markdown when extracted via accessibility content (Page Content: was empty in snapshot(includeContent=true)); read main.innerText via evaluate if you need the body copy. The card structure is fully visible in the accessibility tree though.
• Two <article> elements on the post detail page — Astro splits the header block (badge/date/title/lede) from the body block. Selector article matches both; scope by heading or class if you need a specific one.
• Copy command button has no visible label in the snapshot (it's icon-only). Use aria-label="Copy command" or .copy-btn to find it.
• Inline code vs. <pre><code>: short paths like .sidebutton/ and ~/.sidebutton/skills/ are inline <code> (no copy button); shell commands are <pre><code> with a sibling .copy-btn.
• Lede paragraph copy is duplicated between index card excerpt and post lede — but they are different strings (excerpt is shorter and ChatGPT-mentioning; lede is longer and "autonomous AI agents"-mentioning). Don't assume parity.
• Post index intro link create a skill for agentic AI points to /create-agentic-ai-skill — the old /contribute URL is no longer the destination, even though the parent app skill still references /contribute in places.