diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx index 6268aea..d5c691e 100644 --- a/src/app/changelog/page.tsx +++ b/src/app/changelog/page.tsx @@ -1,7 +1,8 @@ import type { Metadata } from 'next'; +import { ArrowUpRight } from 'lucide-react'; export const metadata: Metadata = { - title: "What's New", + title: 'Changelog', description: 'Changelog and release history for reqsh - see what has changed in each version.', }; @@ -56,7 +57,10 @@ function renderInline(text: string): React.ReactNode { return parts.map((part, i) => { if (part.startsWith('`') && part.endsWith('`')) { return ( - + {part.slice(1, -1)} ); @@ -74,37 +78,44 @@ export default async function ChangelogPage() { return (
-
-
-

- What's New +
+
+

+ Changelog

-

+

Every release of reqsh, from the latest features to the smallest fixes.

-
+
{releases.map((release, i) => ( -
-
-

+
+
+

v{release.version}

{i === 0 && ( - + Latest )} +
- -
    +
      {release.items.map((item, j) => ( -
    • - {renderInline(item)} +
    • +
      • ))}
    @@ -112,26 +123,15 @@ export default async function ChangelogPage() { ))}

- diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx index c1d7273..c8b02c9 100644 --- a/src/app/docs/page.tsx +++ b/src/app/docs/page.tsx @@ -8,28 +8,40 @@ export const metadata: Metadata = { 'Getting started with reqsh - learn how to install, configure and send HTTP requests from your terminal.', }; +function InlineCode({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} + export default function DocsPage() { return (
-
-
-

Documentation

-

- Master the interactive HTTP shell. Learn how to install, configure your environment, and - execute requests efficiently. +

+
+

+ Documentation +

+

+ Learn how to install reqsh, configure your session, and send requests efficiently — + all from the comfort of your terminal.

-
-

Getting Started

-
+
+

+ Getting started +

+
-

1. Install reqsh

-

+

1. Install reqsh

+

Head over to the{' '} installation guide {' '} @@ -37,64 +49,43 @@ export default function DocsPage() {

-

2. Start the shell

-

- Simply type{' '} - - reqsh - {' '} - in your terminal. This drops you into the interactive REPL. +

2. Start the shell

+

+ Simply type reqsh in your terminal. This drops you into + the interactive REPL.

-

3. Set a base URL

-

- Define your target host. All subsequent requests in this session will be appended to - this base URL automatically. +

3. Set a base URL

+

+ Define your target host. All subsequent requests in this session will be appended + to this base URL automatically.

base https://api.example.com']} />
-

4. Send a request

-

+

4. Send a request

+

Type the HTTP method and the relative path. Then execute it using the special{' '} - - ::send - {' '} - command. + ::send command.

GET /users', '.....> ::send']} />
-
-

Sending Requests

-

+

+

+ Sending requests +

+

The shell supports building complex requests step-by-step. Start with the method and - path. HTTP methods are case-insensitive -{' '} - - GET - - ,{' '} - - POST - - ,{' '} - - PUT - - ,{' '} - - PATCH - - ,{' '} - - DELETE - {' '} - are all supported. You can also use absolute URLs — no base URL required. Add headers on - the following lines. Leave a blank line to start writing the body. + path. HTTP methods are case-insensitive — GET,{' '} + POST, PUT,{' '} + PATCH, DELETE are all supported. You + can also use absolute URLs — no base URL required. Add headers on the following lines. + Leave a blank line to start writing the body.

::send', ]} /> -
- Response time is displayed after every request:{' '} - - 200 OK - 142ms - +

+ Response time is displayed after every request: 200 OK - 142ms . JSON responses are automatically pretty-printed with colored syntax. -

+

-
-

Variables

-

- Store values with{' '} - - set - {' '} - and reference them anywhere in your request using{' '} - - {'{{name}}'} - - . Variables are interpolated at request time. +

+

+ Variables +

+

+ Store values with set and reference them anywhere in your + request using {'{{name}}'}. Variables are interpolated at + request time.

-
-

Query Parameters

-

- Add query parameters with{' '} - - param: - {' '} - lines. Values are URL-encoded automatically. +

+

+ Query parameters +

+

+ Add query parameters with param: lines. Values are URL-encoded + automatically.

-
-

Save & Run

-

- Save a request to session memory after executing it, then run it again instantly without - retyping. +

+

+ Save & run +

+

+ Save a request to session memory after executing it, then run it again instantly + without retyping.

-

Built-in Commands

-

- Beyond standard HTTP methods ( - - GET - - ,{' '} - - POST - - ,{' '} - - PUT - - ,{' '} - - PATCH - - ,{' '} - - DELETE - - ), reqsh provides specific REPL commands to manage your session. +

+ Built-in commands +

+

+ Beyond standard HTTP methods (GET,{' '} + POST, PUT,{' '} + PATCH, DELETE), reqsh provides + specific REPL commands to manage your session.

-
+
- - - - + + + + - + - - - + + + + ); } diff --git a/src/app/globals.css b/src/app/globals.css index 7bcdd60..17eb592 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,34 +1,87 @@ @import 'tailwindcss'; -@theme { - --color-accent: #ff3333; - --color-accent-dark: #cc2222; - --color-accent-light: #ff5555; - --color-surface: #0a0a0a; - --color-surface-light: #1a1a1a; - --color-surface-lighter: #2a2a2a; - --color-text-primary: #ffffff; - --color-text-secondary: #888888; - --color-border: rgba(255, 255, 255, 0.08); +@custom-variant dark (&:where(.dark, .dark *)); + +/* Palette: warm paper, warm charcoal, muted brick red */ +:root { + --background: #f6f3ec; + --foreground: #26211d; + --muted: #6f6760; + --card: #fdfbf7; + --border: #e5dfd3; + + --accent: #b8402e; + --accent-strong: #99321f; + --accent-soft: #f2e4de; + + /* Dark surfaces (nav, footer, terminal) */ + --ink: #211d1a; + --ink-soft: #2e2a26; + --ink-border: #3b3630; + --ink-muted: #a39b91; + --ink-foreground: #f6f3ec; +} + +.dark { + --background: #171412; + --foreground: #ede8e0; + --muted: #a49b90; + --card: #201c19; + --border: #353029; + + --accent: #d9705a; + --accent-strong: #e58a76; + --accent-soft: #33231e; + + --ink: #100e0c; + --ink-soft: #1d1916; + --ink-border: #322d27; + --ink-muted: #a39b91; + --ink-foreground: #f6f3ec; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-muted: var(--muted); + --color-card: var(--card); + --color-border: var(--border); + + --color-accent: var(--accent); + --color-accent-strong: var(--accent-strong); + --color-accent-soft: var(--accent-soft); + + --color-ink: var(--ink); + --color-ink-soft: var(--ink-soft); + --color-ink-border: var(--ink-border); + --color-ink-muted: var(--ink-muted); + --color-ink-foreground: var(--ink-foreground); + + --font-sans: var(--font-geist-sans), system-ui, sans-serif; + --font-serif: var(--font-instrument-serif), Georgia, serif; + --font-mono: var(--font-geist-mono), ui-monospace, monospace; +} + +html { + background: var(--background); + scroll-behavior: smooth; } body { - background: linear-gradient(135deg, #000000 0%, #0a0505 50%, #050000 100%); - color: #ffffff; - font-family: var(--font-geist-sans), system-ui, sans-serif; + background: var(--background); + color: var(--foreground); + font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - position: relative; overflow-x: hidden; -} - -html { - background: #000000; + transition: + background-color 250ms ease, + color 250ms ease; } ::selection { - background: rgba(255, 51, 51, 0.4); - color: #ffffff; + background: var(--accent-soft); + color: var(--accent-strong); } *::-webkit-scrollbar { @@ -40,24 +93,25 @@ html { } *::-webkit-scrollbar-thumb { - background: rgba(255, 51, 51, 0.4); + background: var(--border); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { - background: rgba(255, 51, 51, 0.6); + background: var(--muted); } -.transition-snappy { - transition-property: all; - transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); - transition-duration: 300ms; +/* Accessible focus states — red outline per brand */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + border-radius: 2px; } -.transition-smooth { +.transition-snappy { transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 500ms; + transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); + transition-duration: 250ms; } @keyframes blink { @@ -67,111 +121,37 @@ html { } .animate-blink { - animation: blink 1s step-end infinite; -} - -@keyframes float { - 0%, 100% { - transform: translateY(0px) rotate(0deg); - } - 50% { - transform: translateY(-20px) rotate(5deg); - } -} - -.animate-float { - animation: float 6s ease-in-out infinite; + animation: blink 1.1s step-end infinite; } -@keyframes float-delayed { - 0%, 100% { - transform: translateY(0px) rotate(0deg); +@keyframes fade-up { + from { + opacity: 0; + transform: translateY(16px); } - 50% { - transform: translateY(-15px) rotate(-3deg); + to { + opacity: 1; + transform: translateY(0); } } -.animate-float-delayed { - animation: float-delayed 8s ease-in-out infinite 1s; +.animate-fade-up { + animation: fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; } -@keyframes pulse-glow { - 0%, 100% { - opacity: 0.5; - filter: blur(8px); - } - 50% { - opacity: 0.8; - filter: blur(12px); - } +.animate-fade-up-delay-1 { + animation: fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both; } -.animate-pulse-glow { - animation: pulse-glow 4s ease-in-out infinite; +.animate-fade-up-delay-2 { + animation: fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s both; } -@keyframes slide-in { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); +@media (prefers-reduced-motion: reduce) { + .animate-fade-up, + .animate-fade-up-delay-1, + .animate-fade-up-delay-2, + .animate-blink { + animation: none; } } - -.animate-slide-in { - animation: slide-in 0.6s ease-out; -} - -/* Abstract gradient background elements */ -.gradient-blob-1 { - position: fixed; - top: -10%; - right: -5%; - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(255, 51, 51, 0.15) 0%, transparent 70%); - border-radius: 50%; - filter: blur(40px); - pointer-events: none; - z-index: 0; - animation: float 20s ease-in-out infinite; -} - -.gradient-blob-2 { - position: fixed; - bottom: -20%; - left: -10%; - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(255, 51, 51, 0.1) 0%, transparent 70%); - border-radius: 50%; - filter: blur(50px); - pointer-events: none; - z-index: 0; - animation: float-delayed 25s ease-in-out infinite; -} - -.gradient-blob-3 { - position: fixed; - top: 50%; - left: 50%; - width: 400px; - height: 400px; - background: radial-gradient(circle, rgba(255, 51, 51, 0.08) 0%, transparent 70%); - border-radius: 50%; - filter: blur(60px); - pointer-events: none; - z-index: 0; - transform: translate(-50%, -50%); - animation: pulse-glow 6s ease-in-out infinite 2s; -} - -/* Content wrapper to sit above blobs */ -.relative-content { - position: relative; - z-index: 1; -} diff --git a/src/app/install/page.tsx b/src/app/install/page.tsx index ddeec84..e72eda7 100644 --- a/src/app/install/page.tsx +++ b/src/app/install/page.tsx @@ -7,21 +7,33 @@ export const metadata: Metadata = { 'Install reqsh - use the install script, download a prebuilt binary or build from source.', }; +function InlineCode({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} + export default function InstallPage() { return (
-
-
-

Installation

-

+

+
+

+ Installation +

+

Get reqsh running on your system in seconds. Choose the method that best fits your workflow.

-
-

Install Script

-

+

+

+ Install script +

+

The fastest and recommended way to install. This script detects your OS and architecture, downloads the latest binary, and places it in your PATH.

@@ -32,33 +44,27 @@ export default function InstallPage() { />
-
-

Prebuilt Binary

-

+

+

+ Prebuilt binary +

+

Download the latest binary for your platform from the{' '} GitHub Releases {' '} page. Available for macOS (Intel & Silicon), Linux (x86_64), and Windows (x86_64).

-
-

- 1.Download the binary for your - platform. -

-

- 2.Move it to a directory included - in your system PATH. -

-

- 3.Grant execution permissions. -

-
+
    +
  1. Download the binary for your platform.
    2. +
  2. Move it to a directory included in your system PATH.
    3. +
  3. Grant execution permissions.
    4. +
-

- Windows users: place{' '} - - reqsh.exe - {' '} - in a directory listed in your{' '} - - %PATH% - - . +

+ Windows users: place reqsh.exe in a directory listed in your{' '} + %PATH%.

-
-

Build from Source

-

+

+

+ Build from source +

+

If you want to compile reqsh yourself, you'll need the{' '} Rust toolchain {' '} @@ -101,18 +102,16 @@ export default function InstallPage() { 'cargo build --release', ]} /> -

- The binary will be at{' '} - - target/release/reqsh - - . +

+ The binary will be at target/release/reqsh.

-

Verify Installation

-

+

+ Verify installation +

+

Confirm reqsh is installed and working correctly.

diff --git a/src/app/layout.tsx b/src/app/layout.tsx index acc7c21..8334807 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from 'next'; -import { Geist, Geist_Mono } from 'next/font/google'; +import { Geist, Geist_Mono, Instrument_Serif } from 'next/font/google'; import { SpeedInsights } from '@vercel/speed-insights/next'; import Nav from '@/components/nav'; import Footer from '@/components/footer'; @@ -15,6 +15,13 @@ const geistMono = Geist_Mono({ subsets: ['latin'], }); +const instrumentSerif = Instrument_Serif({ + variable: '--font-instrument-serif', + subsets: ['latin'], + weight: '400', + style: ['normal', 'italic'], +}); + const siteUrl = 'https://reqsh.dev'; export const metadata: Metadata = { @@ -130,24 +137,26 @@ export default function RootLayout({ }; return ( - - + + +
CommandUsageDescription
CommandUsageDescription
{cmd}{usage}{desc}
{cmd}{usage}{desc}