// Ghost Content API — fetch latest posts
async function fetchPosts(apiUrl, apiKey) {
    const response = await fetch(`${apiUrl}/ghost/api/content/posts/?key=${apiKey}`);
    const { posts } = await response.json();
    return posts.map(p => ({ title: p.title, slug: p.slug }));
}

State: Logged out

State: Needs upgrade

Nav — Logged out

Nav — Logged in

Jane Doe

Sign out

Elements with class .reveal fade in when they enter the viewport. Uses IntersectionObserver with threshold: 0.1.

Code Copy Button

Every code block in post content automatically gets a Copy button in the top-right corner. Clicking it copies the code and shows a brief confirmation.

const ghost = require('@tryghost/content-api');
const api = new ghost({ url: 'https://demo.ghost.io', key: 'your-key', version: 'v5.0' });Copy code

Doc Sidebar Navigation

The left sidebar organizes documentation by sections. Each section can be collapsed and expanded. The active page is highlighted with the accent color. On mobile, the sidebar slides in as an overlay.

Reading Progress Bar

A thin progress bar at the top of the page shows how far the reader has scrolled through the document content.

A floating button appears after scrolling past the first viewport height. Clicking it smooth-scrolls to the top of the page.