Skip to content

Commit 54adb63

Browse files
matthewpmatthewp
committed
feat: add mobile responsiveness to docs site
- Add viewport meta tag for proper mobile scaling - Implement mobile navigation with hamburger menus - Add collapsible sidebar for documentation pages - Make all typography and spacing responsive - Update grid layouts to stack on mobile devices - Create shared mobile navigation script - Ensure mobile navigation works on all doc subpages
1 parent 368e9b8 commit 54adb63

File tree

10 files changed

+177
-51
lines changed

10 files changed

+177
-51
lines changed

‎docs/src/components/CodeBlock.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
import Code from '../icons/Code.astro';
33
import { Prism } from '@astrojs/prism';
44
---
5-
<div class="bg-gray-900 rounded-lg p-6 my-6">
5+
<div class="bg-gray-900 rounded-lg p-4 lg:p-6 my-4 lg:my-6">
66
{Astro.props.title && (
77
<div class
8-
="flex items-center gap-2 mb-4 font-mono text-cyan-400">
8+
="flex items-center gap-2 mb-4 font-mono text-cyan-400 text-sm lg:text-base">
99
<Code size={16} />
1010
<span>{Astro.props.title}</span>
1111
</div>
1212
)}
1313
<div class
14-
="overflow-x-auto p-4 bg-black/50 rounded-lg text-gray-300 font-mono text-lg">
15-
<Prism lang="js" code={Astro.props.code} />
14+
="overflow-x-auto p-3 lg:p-4 bg-black/50 rounded-lg text-gray-300 font-mono text-xs sm:text-sm lg:text-base">
15+
<Prism lang="js" code={Astro.props.code} />
1616
</div>
1717
</div>
1818

‎docs/src/components/CommonHead.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<meta charset="utf-8">
2+
<meta name="viewport" content="width=device-width, initial-scale=1">
23
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
34
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
45
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">

‎docs/src/components/ContentSection.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 border-2 border-cyan-500">
2-
<h2 class="text-3xl font-bold font-mono text-cyan-400 mb-2">{Astro.props.title}</h2>
3-
{Astro.props.subtitle && <p class="text-xl text-gray-300 mb-6">{Astro.props.subtitle}</p>}
1+
<div class="bg-gray-900/50 backdrop-blur-sm rounded-xl p-6 lg:p-8 border-2 border-cyan-500">
2+
<h2 class="text-2xl lg:text-3xl font-bold font-mono text-cyan-400 mb-2">{Astro.props.title}</h2>
3+
{Astro.props.subtitle && <p class="text-lg lg:text-xl text-gray-300 mb-4 lg:mb-6">{Astro.props.subtitle}</p>}
44
<slot />
55
</div>

‎docs/src/components/DocsSidebar.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const activeItem = undefined;
4040
};
4141
---
4242

43-
<nav id="docs-sidebar" class="w-64 flex-shrink-0 py-8" aria-label="Documentation navigation">
43+
<nav class="w-full lg:w-64 flex-shrink-0 py-4 lg:py-8 px-4 lg:px-0" aria-label="Documentation navigation">
4444
<script>
4545
function toggleSection(ev) {
4646
let button = this;
@@ -90,7 +90,7 @@ const activeItem = undefined;
9090
button.addEventListener('keydown', onKeyDown);
9191
}
9292
</script>
93-
<div class="sticky top-24">
93+
<div class="lg:sticky lg:top-24">
9494
{Object.entries(sections).map(([sectionName, items], index) => (
9595
<div data-type="section" key={sectionName} class={index > 0 ? 'mt-8' : ''}>
9696
<button

‎docs/src/components/FeatureCard.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="group bg-gray-900 p-8 rounded-xl border-2 border-cyan-500 hover:border-pink-500 transition-colors relative overflow-hidden">
1+
<div class="group bg-gray-900 p-6 lg:p-8 rounded-xl border-2 border-cyan-500 hover:border-pink-500 transition-colors relative overflow-hidden">
22
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-cyan-400 to-pink-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
3-
<div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
3+
<div class="w-10 h-10 lg:w-12 lg:h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
44
<slot />
55
</div>
6-
<h3 class="text-xl font-bold mb-2 font-mono text-cyan-400">{Astro.props.title}</h3>
7-
<p class="text-gray-400">{Astro.props.description}</p>
6+
<h3 class="text-lg lg:text-xl font-bold mb-2 font-mono text-cyan-400">{Astro.props.title}</h3>
7+
<p class="text-sm lg:text-base text-gray-400">{Astro.props.description}</p>
88
</div>

‎docs/src/components/Footer.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import Github from '../icons/GitHub.astro';
33
import Heart from '../icons/Heart.astro';
44
---
5-
<footer class="border-t border-cyan-500/20 bg-gray-900/50 backdrop-blur-sm mt-16">
6-
<div class="container mx-auto px-4 py-8">
7-
<div class="grid md:grid-cols-3 gap-8 text-center">
5+
<footer class="border-t border-cyan-500/20 bg-gray-900/50 backdrop-blur-sm mt-8 lg:mt-16">
6+
<div class="container mx-auto px-4 py-6 lg:py-8">
7+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 lg:gap-8 text-center">
88
<div>
99
<h3 class="font-mono text-cyan-400 font-bold mb-4 text-sm">CONNECT</h3>
1010
<div class="space-y-2">

‎docs/src/pages/docs/[slug]/index.astro‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import BookOpen from '../../../icons/BookOpen.astro';
44
import ChevronRight from '../../../icons/ChevronRight.astro';
55
import Footer from '../../../components/Footer.astro';
66
import Sidebar from '../../../components/DocsSidebar.astro';
7+
import Menu from '../../../icons/Menu.astro';
78
import { Prism } from '@astrojs/prism';
89
import '../../../styles/base.css';
910
import CommonHead from '../../../components/CommonHead.astro';
@@ -66,9 +67,12 @@ const { Content } = await Astro.props.item.render();
6667

6768
<header class="border-b border-cyan-500/20 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
6869
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
69-
<div class="flex items-center gap-8">
70-
<div class="font-mono text-xl font-bold text-cyan-400">ROBOT_DOCS</div>
71-
<div class={`relative w-64 transition-all duration-300 ${isSearchFocused ? 'w-96' : ''}`}>
70+
<div class="flex items-center gap-4 lg:gap-8">
71+
<button id="mobile-sidebar-toggle" class="lg:hidden text-cyan-400 p-2" aria-label="Toggle sidebar">
72+
<Menu size={24} />
73+
</button>
74+
<a href="/" class="font-mono text-lg lg:text-xl font-bold text-cyan-400">ROBOT_DOCS</a>
75+
<div class={`hidden lg:block relative w-64 transition-all duration-300 ${isSearchFocused ? 'w-96' : ''}`}>
7276
<Search class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={16} />
7377
<input
7478
type="text"
@@ -79,16 +83,42 @@ const { Content } = await Astro.props.item.render();
7983
/>
8084
</div>
8185
</div>
82-
<nav class="flex gap-6 text-sm font-mono">
83-
<a href="#" class="text-cyan-400 hover:text-cyan-300">DOCS</a>
84-
<a href="#" class="text-gray-400 hover:text-gray-300">API</a>
85-
<a href="#" class="text-gray-400 hover:text-gray-300">EXAMPLES</a>
86+
<nav class="hidden lg:flex gap-6 text-sm font-mono">
87+
<a href="/docs/" class="text-cyan-400 hover:text-cyan-300">DOCS</a>
88+
<a href="/docs/createMachine/" class="text-gray-400 hover:text-gray-300">API</a>
89+
<a href="https://github.com/matthewp/robot" class="text-gray-400 hover:text-gray-300">GITHUB</a>
8690
</nav>
91+
<button id="mobile-menu-toggle" class="lg:hidden text-cyan-400 p-2" aria-label="Toggle menu">
92+
<Menu size={24} />
93+
</button>
94+
</div>
95+
<!-- Mobile menu -->
96+
<div id="mobile-menu" class="hidden lg:hidden border-t border-cyan-500/30">
97+
<div class="px-4 py-4 space-y-3">
98+
<a href="/docs/" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">DOCS</a>
99+
<a href="/docs/createMachine/" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">API</a>
100+
<a href="https://github.com/matthewp/robot" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">GITHUB</a>
101+
<div class="relative">
102+
<Search class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={16} />
103+
<input
104+
type="text"
105+
placeholder="Search..."
106+
class="w-full bg-gray-800 rounded-lg pl-10 pr-4 py-2 text-sm border-2 border-transparent focus:border-cyan-500 outline-none"
107+
/>
108+
</div>
109+
</div>
87110
</div>
88111
</header>
89112

113+
<script>
114+
import { initMobileNav } from '../../../scripts/mobile-nav.js';
115+
initMobileNav();
116+
</script>
117+
90118
<div class="container mx-auto px-4 flex gap-6">
91-
<Sidebar />
119+
<div id="docs-sidebar" class="fixed lg:static lg:translate-x-0 -translate-x-full top-16 left-0 h-[calc(100vh-4rem)] lg:h-auto w-64 bg-gray-900/95 lg:bg-transparent backdrop-blur-sm lg:backdrop-blur-none z-50 lg:z-auto transition-transform duration-300 overflow-y-auto">
120+
<Sidebar />
121+
</div>
92122

93123
<main class="flex-1 py-8 min-w-0">
94124
<div class="prose prose-invert max-w-none">
@@ -101,7 +131,7 @@ const { Content } = await Astro.props.item.render();
101131
<span>{ Astro.props.item.data.title }</span>
102132
</div>
103133

104-
<h1 class="font-mono text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-pink-500 mb-6">
134+
<h1 class="font-mono text-3xl lg:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-pink-500 mb-6">
105135
{ Astro.props.item.data.title }
106136
</h1>
107137

‎docs/src/pages/docs/index.astro‎

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CommonHead from '../../components/CommonHead.astro';
1010
import Code from '../../icons/Code.astro';
1111
import Zap from '../../icons/Zap.astro';
1212
import Terminal from '../../icons/Terminal.astro';
13+
import Menu from '../../icons/Menu.astro';
1314
import '../../styles/base.css';
1415
1516
const isSearchFocused = false;
@@ -94,9 +95,12 @@ const machine = createMachine({
9495

9596
<header class="border-b border-cyan-500/20 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
9697
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
97-
<div class="flex items-center gap-8">
98-
<div class="font-mono text-xl font-bold text-cyan-400">ROBOT_DOCS</div>
99-
<div class={`relative w-64 transition-all duration-300 ${isSearchFocused ? 'w-96' : ''}`}>
98+
<div class="flex items-center gap-4 lg:gap-8">
99+
<button id="mobile-sidebar-toggle" class="lg:hidden text-cyan-400 p-2" aria-label="Toggle sidebar">
100+
<Menu size={24} />
101+
</button>
102+
<a href="/" class="font-mono text-lg lg:text-xl font-bold text-cyan-400">ROBOT_DOCS</a>
103+
<div class={`hidden lg:block relative w-64 transition-all duration-300 ${isSearchFocused ? 'w-96' : ''}`}>
100104
<Search class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={16} />
101105
<input
102106
type="text"
@@ -107,16 +111,42 @@ const machine = createMachine({
107111
/>
108112
</div>
109113
</div>
110-
<nav class="flex gap-6 text-sm font-mono">
114+
<nav class="hidden lg:flex gap-6 text-sm font-mono">
111115
<a href="/docs/" class="text-cyan-400 hover:text-cyan-300">DOCS</a>
112116
<a href="/docs/createMachine/" class="text-gray-400 hover:text-gray-300">API</a>
113117
<a href="https://github.com/matthewp/robot" class="text-gray-400 hover:text-gray-300">GITHUB</a>
114118
</nav>
119+
<button id="mobile-menu-toggle" class="lg:hidden text-cyan-400 p-2" aria-label="Toggle menu">
120+
<Menu size={24} />
121+
</button>
122+
</div>
123+
<!-- Mobile menu -->
124+
<div id="mobile-menu" class="hidden lg:hidden border-t border-cyan-500/30">
125+
<div class="px-4 py-4 space-y-3">
126+
<a href="/docs/" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">DOCS</a>
127+
<a href="/docs/createMachine/" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">API</a>
128+
<a href="https://github.com/matthewp/robot" class="block font-mono text-cyan-300 hover:text-cyan-400 transition-colors">GITHUB</a>
129+
<div class="relative">
130+
<Search class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={16} />
131+
<input
132+
type="text"
133+
placeholder="Search..."
134+
class="w-full bg-gray-800 rounded-lg pl-10 pr-4 py-2 text-sm border-2 border-transparent focus:border-cyan-500 outline-none"
135+
/>
136+
</div>
137+
</div>
115138
</div>
116139
</header>
117140

141+
<script>
142+
import { initMobileNav } from '../../scripts/mobile-nav.js';
143+
initMobileNav();
144+
</script>
145+
118146
<div class="container mx-auto px-4 flex gap-6">
119-
<Sidebar />
147+
<div id="docs-sidebar" class="fixed lg:static lg:translate-x-0 -translate-x-full top-16 left-0 h-[calc(100vh-4rem)] lg:h-auto w-64 bg-gray-900/95 lg:bg-transparent backdrop-blur-sm lg:backdrop-blur-none z-50 lg:z-auto transition-transform duration-300 overflow-y-auto">
148+
<Sidebar />
149+
</div>
120150
<main class="flex-1 py-8 min-w-0">
121151
<div class="prose prose-invert max-w-none">
122152
<div class="flex items-center gap-2 text-sm font-mono text-gray-400 mb-4">
@@ -126,16 +156,16 @@ const machine = createMachine({
126156
<span>GETTING_STARTED</span>
127157
</div>
128158

129-
<h1 class="font-mono text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-pink-500 mb-8">
159+
<h1 class="font-mono text-3xl lg:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-pink-500 mb-8">
130160
Robot Documentation
131161
</h1>
132162

133-
<p class="text-xl text-gray-300 mb-8">
163+
<p class="text-lg lg:text-xl text-gray-300 mb-8">
134164
Build <strong class="text-cyan-400">finite state machines</strong> in a simple and flexible way.
135165
At just <strong class="text-cyan-400">1KB</strong>, Robot brings declarative state management to your applications.
136166
</p>
137167

138-
<div class="grid md:grid-cols-3 gap-6 mb-12">
168+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6 mb-12">
139169
<FeatureCard
140170
title="TINY_SIZE"
141171
description="Just 1KB of pure robotic efficiency. No bloat, all bot!"
@@ -156,7 +186,7 @@ const machine = createMachine({
156186
</FeatureCard>
157187
</div>
158188

159-
<h2 class="font-mono text-3xl font-bold text-cyan-400 mb-6">Getting Started</h2>
189+
<h2 class="font-mono text-2xl lg:text-3xl font-bold text-cyan-400 mb-6">Getting Started</h2>
160190

161191
<p class="text-gray-300 mb-6">
162192
Install Robot via npm or yarn:
@@ -175,7 +205,7 @@ const machine = createMachine({
175205
</div>
176206
</div>
177207

178-
<h3 class="font-mono text-2xl font-bold text-cyan-400 mb-4">Basic Example</h3>
208+
<h3 class="font-mono text-xl lg:text-2xl font-bold text-cyan-400 mb-4">Basic Example</h3>
179209

180210
<p class="text-gray-300 mb-6">
181211
Create your first state machine:
@@ -186,7 +216,7 @@ const machine = createMachine({
186216
code={basicExample}
187217
/>
188218

189-
<h3 class="font-mono text-2xl font-bold text-cyan-400 mb-4 mt-8">Use with React/Preact</h3>
219+
<h3 class="font-mono text-xl lg:text-2xl font-bold text-cyan-400 mb-4 mt-8">Use with React/Preact</h3>
190220

191221
<p class="text-gray-300 mb-6">
192222
Robot has integrations for all major frameworks:
@@ -197,7 +227,7 @@ const machine = createMachine({
197227
code={integrationExample}
198228
/>
199229

200-
<h3 class="font-mono text-2xl font-bold text-cyan-400 mb-4 mt-8">Advanced Features</h3>
230+
<h3 class="font-mono text-xl lg:text-2xl font-bold text-cyan-400 mb-4 mt-8">Advanced Features</h3>
201231

202232
<p class="text-gray-300 mb-6">
203233
Handle async operations, context, and complex state logic:
@@ -209,7 +239,7 @@ const machine = createMachine({
209239
/>
210240

211241
<div class="bg-gray-900/50 rounded-xl p-8 border border-cyan-500/30 mt-12">
212-
<h3 class="font-mono text-2xl font-bold text-cyan-400 mb-4">Why Finite State Machines?</h3>
242+
<h3 class="font-mono text-xl lg:text-2xl font-bold text-cyan-400 mb-4">Why Finite State Machines?</h3>
213243
<p class="text-gray-300 mb-4">
214244
Robot brings the declarative revolution to application state. Instead of managing multiple booleans
215245
and imperative state updates, define your states declaratively and eliminate invalid states entirely.
@@ -218,7 +248,7 @@ const machine = createMachine({
218248
With Robot, your states and transitions are validated when the machine is created, preventing an
219249
entire category of bugs before they happen.
220250
</p>
221-
<div class="grid md:grid-cols-2 gap-8">
251+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
222252
<div>
223253
<h4 class="font-mono text-lg font-bold text-pink-400 mb-3">✅ With Robot</h4>
224254
<ul class="text-gray-300 space-y-2 text-sm">
@@ -241,11 +271,11 @@ const machine = createMachine({
241271
</div>
242272

243273
<div class="mt-12 text-center">
244-
<h3 class="font-mono text-2xl font-bold text-cyan-400 mb-4">Ready to Build?</h3>
274+
<h3 class="font-mono text-xl lg:text-2xl font-bold text-cyan-400 mb-4">Ready to Build?</h3>
245275
<p class="text-gray-300 mb-6">
246276
Explore the documentation to learn about Robot's powerful features and integrations.
247277
</p>
248-
<div class="flex justify-center gap-4">
278+
<div class="flex flex-col sm:flex-row justify-center gap-4">
249279
<a href="/docs/createMachine/" class="bg-cyan-500 hover:bg-cyan-400 text-black font-mono px-6 py-3 rounded-lg transition-colors">
250280
API Reference
251281
</a>

0 commit comments

Comments
 (0)