Skip to content

Add GitHub Pages documentation site with custom theme #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Its-donkey merged 4 commits into from
Jan 19, 2026
Merged

Add GitHub Pages documentation site with custom theme #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3996748
Add FAQ, Troubleshooting, and Migration Guide pages
Its-donkey Jan 19, 2026
96389ce
Add sidebar navigation with pages list
Its-donkey Jan 19, 2026
a1cd3de
Fix sidebar CSS - add cache busting and stronger selectors
Its-donkey Jan 19, 2026
8f273d5
Bump CSS version to force cache refresh on all pages
Its-donkey Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 69 additions & 12 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}?v=3">
</head>
<body>
<nav class="navbar">
Expand Down Expand Up @@ -37,19 +37,76 @@
</nav>

<main class="main-content">
<div class="content-container">
{% if page.title and page.url != '/' %}
<header class="page-header">
<h1>{{ page.title }}</h1>
{% if page.description %}
<p class="page-description">{{ page.description }}</p>
<div class="content-wrapper">
<aside class="sidebar">
<nav class="sidebar-nav">
<div class="sidebar-section">
<h3>Getting Started</h3>
<ul>
<li><a href="{{ '/quickstart' | relative_url }}"{% if page.url contains 'quickstart' %} class="active"{% endif %}>Quick Start</a></li>
<li><a href="{{ '/api-reference' | relative_url }}"{% if page.url contains 'api-reference' %} class="active"{% endif %}>API Reference</a></li>
<li><a href="{{ '/cookbook' | relative_url }}"{% if page.url contains 'cookbook' %} class="active"{% endif %}>Cookbook</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>Authentication</h3>
<ul>
<li><a href="{{ '/auth' | relative_url }}"{% if page.url contains '/auth' %} class="active"{% endif %}>OAuth Flows</a></li>
<li><a href="{{ '/extension-jwt' | relative_url }}"{% if page.url == '/extension-jwt' or page.url == '/extension-jwt.html' %} class="active"{% endif %}>Extension JWT</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>Real-Time</h3>
<ul>
<li><a href="{{ '/eventsub' | relative_url }}"{% if page.url contains 'eventsub' and page.url contains 'examples' == false %} class="active"{% endif %}>EventSub</a></li>
<li><a href="{{ '/irc-client' | relative_url }}"{% if page.url == '/irc-client' or page.url == '/irc-client.html' %} class="active"{% endif %}>IRC Client</a></li>
<li><a href="{{ '/pubsub-compat' | relative_url }}"{% if page.url contains 'pubsub-compat' %} class="active"{% endif %}>PubSub Compat</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>API Endpoints</h3>
<ul>
<li><a href="{{ '/channels' | relative_url }}"{% if page.url contains '/channels' %} class="active"{% endif %}>Channels</a></li>
<li><a href="{{ '/streams' | relative_url }}"{% if page.url contains '/streams' %} class="active"{% endif %}>Streams</a></li>
<li><a href="{{ '/users' | relative_url }}"{% if page.url contains '/users' %} class="active"{% endif %}>Users</a></li>
<li><a href="{{ '/chat' | relative_url }}"{% if page.url == '/chat' or page.url == '/chat.html' %} class="active"{% endif %}>Chat</a></li>
<li><a href="{{ '/moderation' | relative_url }}"{% if page.url contains '/moderation' %} class="active"{% endif %}>Moderation</a></li>
<li><a href="{{ '/channel-points' | relative_url }}"{% if page.url contains '/channel-points' %} class="active"{% endif %}>Channel Points</a></li>
<li><a href="{{ '/bits' | relative_url }}"{% if page.url contains '/bits' %} class="active"{% endif %}>Bits</a></li>
<li><a href="{{ '/subscriptions' | relative_url }}"{% if page.url contains '/subscriptions' %} class="active"{% endif %}>Subscriptions</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>Advanced</h3>
<ul>
<li><a href="{{ '/advanced' | relative_url }}"{% if page.url contains '/advanced' %} class="active"{% endif %}>Batch & Caching</a></li>
<li><a href="{{ '/conduits' | relative_url }}"{% if page.url contains '/conduits' %} class="active"{% endif %}>Conduits</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>Help</h3>
<ul>
<li><a href="{{ '/faq' | relative_url }}"{% if page.url contains '/faq' %} class="active"{% endif %}>FAQ</a></li>
<li><a href="{{ '/troubleshooting' | relative_url }}"{% if page.url contains '/troubleshooting' %} class="active"{% endif %}>Troubleshooting</a></li>
<li><a href="{{ '/migration' | relative_url }}"{% if page.url contains '/migration' %} class="active"{% endif %}>Migration Guide</a></li>
</ul>
</div>
</nav>
</aside>
<div class="content-container">
{% if page.title and page.url != '/' %}
<header class="page-header">
<h1>{{ page.title }}</h1>
{% if page.description %}
<p class="page-description">{{ page.description }}</p>
{% endif %}
</header>
{% endif %}
</header>
{% endif %}

<article class="content">
{{ content }}
</article>
<article class="content">
{{ content }}
</article>
</div>
</div>
</main>

Expand Down
5 changes: 5 additions & 0 deletions docs/api-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,8 @@ description: Complete documentation for all Twitch Helix API endpoints.
- [Guest Star API](guest-star.md) - Guest Star (beta)
- [Content Classification](ccl.md) - Content labels
- [Advanced Features](advanced.md) - Batch, caching, middleware

## Help
- [FAQ](faq.md) - Frequently asked questions
- [Troubleshooting](troubleshooting.md) - Common issues and solutions
- [Migration Guide](migration.md) - Migrating from other libraries
88 changes: 87 additions & 1 deletion docs/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,85 @@ body {
padding: var(--space-2xl) var(--space-lg);
}

.content-wrapper {
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: var(--space-2xl);
}

.content-container {
flex: 1;
max-width: 900px;
margin: 0 auto;
min-width: 0;
}

/* ========================================
Sidebar
======================================== */

.sidebar {
width: 240px;
flex-shrink: 0;
position: sticky;
top: 88px;
height: fit-content;
max-height: calc(100vh - 112px);
overflow-y: auto;
}

.sidebar-nav {
padding-right: var(--space-md);
}

.sidebar-section {
margin-bottom: var(--space-lg);
}

.sidebar-section h3 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--light-text-muted);
margin-bottom: var(--space-sm);
padding-left: var(--space-sm);
}

.sidebar-section ul,
.sidebar .sidebar-section ul,
.sidebar-nav .sidebar-section ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}

.sidebar-section li,
.sidebar .sidebar-section li,
.sidebar-nav .sidebar-section li {
margin: 0 !important;
list-style: none !important;
}

.sidebar-section a {
display: block;
padding: var(--space-xs) var(--space-sm);
color: var(--light-text);
text-decoration: none;
font-size: 0.875rem;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}

.sidebar-section a:hover {
background: var(--purple-subtle);
color: var(--purple-dark);
}

.sidebar-section a.active {
background: var(--purple-primary);
color: white;
font-weight: 500;
}

.page-header {
Expand Down Expand Up @@ -463,6 +539,16 @@ body {
Responsive Design
======================================== */

@media (max-width: 1024px) {
.sidebar {
display: none;
}

.content-wrapper {
display: block;
}
}

@media (max-width: 768px) {
.nav-links {
position: fixed;
Expand Down
Loading