Skip to content

Commit fc1d1ed

Browse files
lambdalisuelambdalisue
committed
feat(docs): add installation page with Nix flake guide and mobile menu
Created comprehensive installation documentation covering shell script, Homebrew, and Nix flake integration. Nix section includes project-level dependency management patterns with inputs.follows explanation. Added responsive mobile navigation with hamburger menu to accommodate expanded navigation items (900px breakpoint). Menu toggle prevents scroll and shows dropdown navigation below header. Refactored overview.md to focus on quick start by moving detailed installation instructions to dedicated page.
1 parent 1f120a7 commit fc1d1ed

6 files changed

Lines changed: 277 additions & 39 deletions

File tree

‎data/docs.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,15 @@ export const docPages: DocPage[] = [
2121
file: "./docs/overview.md",
2222
title: "Overview",
2323
label: "Overview",
24+
description: "Introduction to Probitas, quick start, and core concepts",
25+
},
26+
{
27+
path: "/docs/installation/",
28+
file: "./docs/installation.md",
29+
title: "Installation",
30+
label: "Installation",
2431
description:
25-
"Introduction to Probitas, installation guide, quick start, and core concepts",
32+
"Install Probitas CLI via shell script, Homebrew, or Nix flake with project integration",
2633
},
2734
{
2835
path: "/docs/scenario/",

‎docs/installation.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Installation
2+
3+
This guide covers all methods to install Probitas CLI.
4+
5+
## Requirements
6+
7+
- [Deno](https://deno.land/) v2.x or later
8+
9+
## Shell Installer
10+
11+
Install the CLI using the shell installer:
12+
13+
```bash
14+
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | bash
15+
```
16+
17+
### Options
18+
19+
Configure installation via environment variables:
20+
21+
```bash
22+
# Install specific version
23+
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | PROBITAS_VERSION=0.7.3 bash
24+
25+
# Install to custom directory
26+
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | PROBITAS_INSTALL_DIR=/usr/local/bin bash
27+
```
28+
29+
## Homebrew (macOS/Linux)
30+
31+
Install via the official Homebrew tap:
32+
33+
```bash
34+
# Add the tap and install
35+
brew tap jsr-probitas/tap
36+
brew install probitas
37+
38+
# Or install directly
39+
brew install jsr-probitas/tap/probitas
40+
```
41+
42+
Deno is installed automatically as a dependency.
43+
44+
## Nix
45+
46+
The Probitas CLI provides a Nix flake with multiple usage patterns.
47+
48+
### Run Without Installing
49+
50+
Execute `probitas` directly without installing:
51+
52+
```bash
53+
nix run github:jsr-probitas/cli
54+
```
55+
56+
### Install to Profile
57+
58+
Install into your Nix profile for persistent access:
59+
60+
```bash
61+
nix profile install github:jsr-probitas/cli
62+
```
63+
64+
### Add to Project's flake.nix
65+
66+
Add Probitas to your project's development environment. Create or update
67+
`flake.nix`:
68+
69+
```nix
70+
{
71+
inputs = {
72+
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
73+
flake-utils.url = "github:numtide/flake-utils";
74+
probitas.url = "github:jsr-probitas/cli";
75+
probitas.inputs.nixpkgs.follows = "nixpkgs";
76+
probitas.inputs.flake-utils.follows = "flake-utils";
77+
};
78+
79+
outputs = { self, nixpkgs, flake-utils, probitas }:
80+
flake-utils.lib.eachDefaultSystem (system:
81+
let
82+
pkgs = import nixpkgs { inherit system; };
83+
in {
84+
devShells.default = pkgs.mkShell {
85+
packages = [
86+
pkgs.deno
87+
probitas.packages.${system}.default
88+
];
89+
};
90+
});
91+
}
92+
```
93+
94+
Enter the development environment:
95+
96+
```bash
97+
nix develop
98+
```
99+
100+
### Why Use inputs.follows?
101+
102+
The `inputs.follows` directive ensures Probitas uses your project's nixpkgs
103+
version instead of its own pinned version:
104+
105+
```nix
106+
probitas.inputs.nixpkgs.follows = "nixpkgs";
107+
probitas.inputs.flake-utils.follows = "flake-utils";
108+
```
109+
110+
Benefits:
111+
112+
- **Single nixpkgs version**: All dependencies share one nixpkgs, reducing
113+
closure size
114+
- **Consistent tooling**: Deno version matches across your project
115+
- **Faster evaluation**: Fewer inputs to fetch and evaluate
116+
117+
### Pin a Specific Version
118+
119+
Lock to a specific CLI version using a commit hash or tag:
120+
121+
```nix
122+
probitas.url = "github:jsr-probitas/cli/v0.7.3";
123+
```
124+
125+
Or using a commit:
126+
127+
```nix
128+
probitas.url = "github:jsr-probitas/cli/abc1234";
129+
```
130+
131+
### Flake Outputs Reference
132+
133+
The Probitas CLI flake provides:
134+
135+
| Output | Description |
136+
| ----------------------------- | --------------------------- |
137+
| `packages.${system}.default` | The `probitas` CLI package |
138+
| `packages.${system}.probitas` | Alias for the CLI package |
139+
| `apps.${system}.default` | App for `nix run` |
140+
| `devShells.${system}.default` | Development shell with Deno |
141+
142+
## Verify Installation
143+
144+
After installation, verify the CLI is working:
145+
146+
```bash
147+
probitas --version
148+
```
149+
150+
## Next Steps
151+
152+
- [Quick Start](/docs/overview/#quick-start) - Initialize your first project
153+
- [Scenario Guide](/docs/scenario/) - Learn to write scenarios

‎docs/overview.md‎

Lines changed: 7 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,53 +16,22 @@ other backend services.
1616

1717
## Installation
1818

19-
### Install CLI
20-
21-
Requires [Deno](https://deno.land/) v2.x or later.
22-
23-
Install the CLI to run scenarios using the shell installer:
19+
Install the CLI to run scenarios. Choose your preferred method:
2420

2521
```bash
22+
# Shell installer (requires Deno)
2623
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | bash
27-
```
28-
29-
**Options via environment variables:**
30-
31-
```bash
32-
# Install specific version
33-
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | PROBITAS_VERSION=0.7.3 bash
34-
35-
# Install to custom directory
36-
curl -fsSL https://raw.githubusercontent.com/jsr-probitas/cli/main/install.sh | PROBITAS_INSTALL_DIR=/usr/local/bin bash
37-
```
38-
39-
### Using Homebrew (macOS/Linux)
40-
41-
Install via the official Homebrew tap:
4224

43-
```bash
44-
# Add the tap and install
45-
brew tap jsr-probitas/tap
46-
brew install probitas
47-
48-
# Or install directly
25+
# Homebrew (macOS/Linux)
4926
brew install jsr-probitas/tap/probitas
50-
```
51-
52-
Deno is installed automatically as a dependency.
53-
54-
### Using Nix
5527

56-
Use the flake to run or install the CLI:
57-
58-
```bash
59-
# Run without installing
28+
# Nix
6029
nix run github:jsr-probitas/cli
61-
62-
# Install into your profile
63-
nix profile install github:jsr-probitas/cli
6430
```
6531

32+
See [Installation Guide](/docs/installation/) for detailed options including Nix
33+
flake integration for project-level dependency management.
34+
6635
## Quick Start
6736

6837
### Initialize a Project

‎static/common.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,94 @@ a {
199199
display: none;
200200
}
201201

202+
/* ========================================
203+
Mobile Menu Toggle
204+
======================================== */
205+
.mobile-menu-toggle {
206+
display: none;
207+
align-items: center;
208+
justify-content: center;
209+
width: 40px;
210+
height: 40px;
211+
background: transparent;
212+
border: 1px solid var(--border);
213+
border-radius: 8px;
214+
cursor: pointer;
215+
color: var(--text-muted);
216+
transition: all 0.2s;
217+
margin-left: auto;
218+
}
219+
220+
.mobile-menu-toggle:hover {
221+
color: var(--text-heading);
222+
border-color: var(--accent);
223+
background: rgba(99, 102, 241, 0.1);
224+
}
225+
226+
.mobile-menu-toggle i {
227+
font-size: 20px;
228+
}
229+
230+
.mobile-menu-toggle .icon-close {
231+
display: none;
232+
}
233+
234+
.global-header.menu-open .mobile-menu-toggle .icon-menu {
235+
display: none;
236+
}
237+
238+
.global-header.menu-open .mobile-menu-toggle .icon-close {
239+
display: block;
240+
}
241+
242+
/* Mobile responsive styles */
243+
@media (max-width: 900px) {
244+
.mobile-menu-toggle {
245+
display: flex;
246+
}
247+
248+
.header-nav {
249+
display: none;
250+
position: absolute;
251+
top: 100%;
252+
left: 0;
253+
right: 0;
254+
flex-direction: column;
255+
background: var(--bg-card);
256+
border-bottom: 1px solid var(--border);
257+
padding: 1rem;
258+
gap: 0;
259+
margin: 0;
260+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
261+
}
262+
263+
.global-header.menu-open .header-nav {
264+
display: flex;
265+
}
266+
267+
.header-nav a {
268+
padding: 0.75rem 1rem;
269+
border-radius: 8px;
270+
font-size: 1rem;
271+
}
272+
273+
.header-nav a:hover {
274+
background: rgba(99, 102, 241, 0.1);
275+
}
276+
277+
.header-right {
278+
margin-left: 0.75rem;
279+
}
280+
281+
.search-shortcut {
282+
display: none;
283+
}
284+
285+
body.menu-open {
286+
overflow: hidden;
287+
}
288+
}
289+
202290
/* ========================================
203291
Buttons
204292
======================================== */

‎templates/Layout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,15 @@ function Header() {
242242
/>
243243
<span class="logo-text">Probitas</span>
244244
</a>
245+
<button
246+
type="button"
247+
class="mobile-menu-toggle"
248+
onclick="toggleMobileMenu()"
249+
aria-label="Toggle menu"
250+
>
251+
<i class="ti ti-menu-2 icon-menu" />
252+
<i class="ti ti-x icon-close" />
253+
</button>
245254
<nav class="header-nav">
246255
{docPages.map((doc) => (
247256
<a key={doc.path} href={`${basePath}${doc.path}`}>{doc.label}</a>

‎templates/scripts.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,18 @@ function toggleTheme() {
2929
updateHljsTheme(next);
3030
}
3131
32+
function toggleMobileMenu() {
33+
const header = document.querySelector('.global-header');
34+
header.classList.toggle('menu-open');
35+
document.body.classList.toggle('menu-open');
36+
}
37+
38+
function closeMobileMenu() {
39+
const header = document.querySelector('.global-header');
40+
header.classList.remove('menu-open');
41+
document.body.classList.remove('menu-open');
42+
}
43+
3244
function initCarousel() {
3345
const tabs = document.querySelectorAll('.carousel-tab');
3446
const slides = document.querySelectorAll('.carousel-slide');

0 commit comments

Comments
 (0)