Skip to content

docs: redesign landing and docs #113

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
axadrn merged 2 commits into from
Feb 10, 2026
Merged

docs: redesign landing and docs #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82fa592
wip
axadrn Feb 10, 2026
35f536f
Merge branch 'main' into docs/redesign
axadrn Feb 10, 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
29 changes: 17 additions & 12 deletions internal/docs/ui/blocks/content.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,23 @@ package blocks
// ContentWithProse uses the Tailwind Typography plugin for styling
// Requires: @plugin "@tailwindcss/typography" in input.css
templ ContentWithProse(htmlContent string) {
<div
class={
templ.Classes(
"prose prose-neutral dark:prose-invert max-w-none",
// Inline code styling
"prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none",
"prose-code:bg-secondary prose-code:text-foreground",
// Pre blocks
"prose-pre:p-0 prose-pre:bg-secondary prose-pre:relative prose-pre:overflow-x-auto",
// Code inside pre
"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
),
<div
class={
templ.Classes(
"prose prose-neutral dark:prose-invert max-w-none",
"prose-headings:tracking-tight prose-headings:font-bold prose-headings:text-foreground",
"prose-a:text-primary prose-a:font-semibold prose-a:underline prose-a:underline-offset-4",
"prose-strong:text-foreground prose-p:text-foreground prose-li:text-foreground",
"prose-blockquote:border-l-4 prose-blockquote:border-border prose-blockquote:bg-secondary/50 prose-blockquote:px-4 prose-blockquote:py-1 prose-blockquote:not-italic",
// Inline code styling
"prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:rounded-none prose-code:text-sm prose-code:before:content-none prose-code:after:content-none",
"prose-code:border prose-code:border-border prose-code:bg-secondary prose-code:text-foreground",
// Pre blocks
"prose-pre:p-0 prose-pre:relative prose-pre:overflow-x-auto",
"prose-pre:rounded-none prose-pre:border prose-pre:border-border prose-pre:bg-card prose-pre:text-card-foreground prose-pre:shadow-[4px_4px_0_0_rgba(0,0,0,0.35)] dark:prose-pre:shadow-[4px_4px_0_0_rgba(255,255,255,0.14)]",
// Code inside pre
"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
),
}
>
@templ.Raw(htmlContent)
Expand Down
10 changes: 5 additions & 5 deletions internal/docs/ui/modules/footer.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@ package modules
import "github.com/deeploy-sh/deeploy/internal/shared/utils"

templ FooterLinks(stars int) {
<footer class="border-y border-border flex text-muted-foreground">
<footer class="mt-4 md:mt-5 flex border border-border bg-card shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<a
href="/docs"
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center hover:text-foreground transition-colors"
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
>
Docs
</a>
<a
href="https://github.com/deeploy-sh/deeploy"
target="_blank"
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
>
GitHub { utils.FormatStars(stars) }
</a>
<a
href="https://x.com/axadrn"
target="_blank"
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold hover:bg-accent transition-colors"
>
X
</a>
Expand All @@ -29,6 +29,6 @@ templ FooterLinks(stars int) {

templ FooterCopyright() {
<div class="py-8 text-center text-muted-foreground">
© 2025 <a href="https://axeladrian.com" target="_blank" class="hover:text-foreground transition-colors">Axel Adrian</a>
© 2025 <a href="https://axeladrian.com" target="_blank" class="font-semibold underline underline-offset-4 hover:text-foreground transition-colors">Axel Adrian</a>
</div>
}
8 changes: 4 additions & 4 deletions internal/docs/ui/modules/navbar.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ import (
)

templ Navbar(stars int) {
<nav class="px-4 py-4 md:px-20 md:py-6 border-b border-border flex justify-between items-center">
<a href="/" class="flex items-center gap-2 hover:text-muted-foreground transition-colors">
<nav class="mb-4 md:mb-5 border border-border bg-card px-4 py-4 md:px-10 md:py-5 flex justify-between items-center gap-4 shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<a href="/" class="flex items-center gap-2 font-bold">
@modules.BlobIcon()
deeploy
</a>
<div class="flex items-center gap-4 md:gap-6">
<a
href="/docs"
class="text-muted-foreground hover:text-foreground transition-colors"
class="font-semibold underline-offset-4 hover:underline"
>
Docs
</a>
<a
href="https://github.com/deeploy-sh/deeploy"
target="_blank"
class="text-muted-foreground hover:text-foreground transition-colors"
class="font-semibold underline-offset-4 hover:underline"
>
GitHub { utils.FormatStars(stars) }
</a>
Expand Down
32 changes: 17 additions & 15 deletions internal/docs/ui/pages/doc.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import (
)

templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
@sidebar.Layout() {
@sidebar.Sidebar() {
@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
@sidebar.Layout(sidebar.LayoutProps{Class: "bg-background text-foreground [&_[data-sidebar=sidebar]]:border-r [&_[data-sidebar=sidebar]]:border-border [&_[data-sidebar=sidebar]]:bg-card [&_[data-sidebar=sidebar]]:text-card-foreground [&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(0,0,0,0.45)] dark:[&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(255,255,255,0.18)] [&_[data-tui-sidebar=menu-button]]:rounded-none [&_[data-tui-sidebar=menu-button]]:border [&_[data-tui-sidebar=menu-button]]:border-transparent [&_[data-tui-sidebar=menu-button]]:font-semibold [&_[data-tui-sidebar=menu-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-button]]:hover:border-border [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:border-border [&_[data-tui-sidebar=menu-sub-button]]:rounded-none [&_[data-tui-sidebar=menu-sub-button]]:border [&_[data-tui-sidebar=menu-sub-button]]:border-transparent [&_[data-tui-sidebar=menu-sub-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:hover:border-border [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:border-border"}) {
@sidebar.Sidebar(sidebar.Props{}) {
@sidebar.Header() {
@sidebar.Menu() {
@sidebar.MenuItem() {
Expand Down Expand Up @@ -52,9 +52,9 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
}
}
}
@sidebar.Inset() {
<header class="sticky top-0 z-10 border-b bg-background">
<div class="flex h-14 items-center px-6">
@sidebar.Inset(sidebar.InsetProps{Class: "min-h-screen flex flex-col bg-background"}) {
<header class="sticky top-0 z-10 border-b border-border bg-card shadow-[0_4px_0_0_rgba(0,0,0,0.2)] dark:shadow-[0_4px_0_0_rgba(255,255,255,0.12)]">
<div class="flex h-14 items-center px-6 text-card-foreground">
<div class="flex items-center gap-4">
@sidebar.Trigger()
@breadcrumb.Breadcrumb() {
Expand Down Expand Up @@ -92,12 +92,12 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
</div>
</div>
</header>
<div id="docs-content-wrapper">
@DocContent(currentDoc, prev, next)
</div>
<div class="border-t border-border">
@modules.FooterCopyright()
</div>
<div class="flex flex-1 min-h-0" id="docs-content-wrapper">
@DocContent(currentDoc, prev, next)
</div>
<div class="mt-4 border-t border-border/70">
@modules.FooterCopyright()
</div>
}
}
<script nonce={ templ.GetNonce(ctx) }>
Expand Down Expand Up @@ -134,20 +134,21 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
}

templ DocContent(doc *service.Doc, prev, next *service.Doc) {
<div class="flex-1" id="docs-content">
<article class="container max-w-4xl px-6 py-12">
<div class="flex-1 w-full flex justify-center items-start p-3 md:p-4" id="docs-content">
<article class="container max-w-4xl w-full px-6 py-12 border border-border bg-card text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.5)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<div class="mb-8">
<h1 class="text-4xl font-bold mb-2">{ doc.Title }</h1>
if doc.Description != "" {
<p class="text-xl text-muted-foreground">{ doc.Description }</p>
}
</div>
@blocks.ContentWithProse(string(doc.Content))
<div class="mt-12 pt-8 border-t flex justify-between">
<div class="mt-12 pt-8 border-t border-border flex justify-between gap-3">
if prev != nil {
@button.Button(button.Props{
Href: prev.Path,
Variant: button.VariantOutline,
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
Attributes: templ.Attributes{
"hx-get": prev.Path,
"hx-target": "#docs-content-wrapper",
Expand All @@ -164,6 +165,7 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
@button.Button(button.Props{
Href: next.Path,
Variant: button.VariantOutline,
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
Attributes: templ.Attributes{
"hx-get": next.Path,
"hx-target": "#docs-content-wrapper",
Expand Down
115 changes: 59 additions & 56 deletions internal/docs/ui/pages/landing.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,65 +16,68 @@ templ Landing() {
stars = starsVal.(int)
}
}}
<div class="min-h-screen flex flex-col px-4">
<div class="max-w-5xl mx-auto w-full flex-1 flex flex-col md:border-x border-border">
<div class="min-h-screen bg-background text-foreground px-3 py-3 md:px-4 md:py-6">
<div class="mx-auto w-full max-w-6xl flex min-h-[calc(100vh-1.5rem)] flex-col">
<!-- Navbar -->
@modules.Navbar(stars)
<!-- Main Content -->
<main class="flex-1 flex flex-col justify-center">
<!-- Hero -->
<div class="py-12 md:py-16 px-4 md:px-20 space-y-4">
<h1 class="text-2xl md:text-3xl font-semibold tracking-tight">
Modern Deployment. Terminal First. Open Source.
</h1>
<p class="text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
</div>
<!-- Teaser Image -->
<div class="border-t border-border">
<img src="/assets/img/hero.png" class="w-full"/>
</div>
<!-- Features -->
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
<p class="font-semibold">Features</p>
<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
</div>
<!-- Install Commands -->
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
<p class="font-semibold">Get started in 30 seconds</p>
<div class="space-y-3">
<!-- Server Install -->
<div class="relative group">
<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
<span>Server (VPS)</span>
</div>
<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
<button
class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
>copy</button>
</div>
</div>
<!-- TUI Install -->
<div class="relative group">
<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
<span>TUI (your machine)</span>
</div>
<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
<button
class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
>copy</button>
</div>
</div>
</div>
</div>
<!-- Built with -->
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
<p class="font-semibold">Built with</p>
<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
</div>
<main class="flex-1 flex flex-col justify-center px-1 pt-3 pb-3 md:px-5 md:pt-6 md:pb-6">
<section class="space-y-5 md:space-y-7">
<!-- Hero -->
<section class="px-5 py-10 md:px-12 md:py-14 space-y-4 bg-primary/10 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<p class="text-xs md:text-sm uppercase tracking-[0.2em] font-bold text-muted-foreground">Self-hosted deploy stack</p>
<h1 class="text-3xl md:text-5xl font-bold tracking-tight leading-tight">
Modern Deployment. Terminal First. Open Source.
</h1>
<p class="text-base md:text-lg text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
</section>
<!-- Teaser Image -->
<section class="border border-border bg-accent/10 shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<img src="/assets/img/hero.png" class="w-full object-cover block" alt="deeploy ui preview"/>
</section>
<!-- Features -->
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-secondary text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Features</p>
<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
</section>
<!-- Install Commands -->
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-primary/10 text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Get started in 30 seconds</p>
<div class="space-y-3">
<!-- Server Install -->
<div class="relative">
<div class="flex items-center gap-2 text-sm mb-1">
<span>Server (VPS)</span>
</div>
<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
<button
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
>copy</button>
</div>
</div>
<!-- TUI Install -->
<div class="relative">
<div class="flex items-center gap-2 text-sm mb-1">
<span>TUI (your machine)</span>
</div>
<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
<button
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
>copy</button>
</div>
</div>
</div>
</section>
<!-- Built with -->
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 bg-accent/15 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Built with</p>
<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
</section>
</section>
<!-- Newsletter -->
<!-- <div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4"> -->
<!-- <div class="space-y-2"> -->
Expand Down
1 change: 1 addition & 0 deletions internal/shared/assets/css/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,3 +176,4 @@
"calt" 1;
}
}