Skip to content

Commit a82705d

Browse files
axadrnaxadrn
authored
Merge pull request #113 from deeploy-sh/docs/redesign
docs: redesign landing and docs
2 parents 025bff1 + 35f536f commit a82705d

6 files changed

Lines changed: 103 additions & 92 deletions

File tree

‎internal/docs/ui/blocks/content.templ‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,23 @@ package blocks
33
// ContentWithProse uses the Tailwind Typography plugin for styling
44
// Requires: @plugin "@tailwindcss/typography" in input.css
55
templ ContentWithProse(htmlContent string) {
6-
<div
7-
class={
8-
templ.Classes(
9-
"prose prose-neutral dark:prose-invert max-w-none",
10-
// Inline code styling
11-
"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",
12-
"prose-code:bg-secondary prose-code:text-foreground",
13-
// Pre blocks
14-
"prose-pre:p-0 prose-pre:bg-secondary prose-pre:relative prose-pre:overflow-x-auto",
15-
// Code inside pre
16-
"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
17-
),
6+
<div
7+
class={
8+
templ.Classes(
9+
"prose prose-neutral dark:prose-invert max-w-none",
10+
"prose-headings:tracking-tight prose-headings:font-bold prose-headings:text-foreground",
11+
"prose-a:text-primary prose-a:font-semibold prose-a:underline prose-a:underline-offset-4",
12+
"prose-strong:text-foreground prose-p:text-foreground prose-li:text-foreground",
13+
"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",
14+
// Inline code styling
15+
"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",
16+
"prose-code:border prose-code:border-border prose-code:bg-secondary prose-code:text-foreground",
17+
// Pre blocks
18+
"prose-pre:p-0 prose-pre:relative prose-pre:overflow-x-auto",
19+
"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)]",
20+
// Code inside pre
21+
"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
22+
),
1823
}
1924
>
2025
@templ.Raw(htmlContent)

‎internal/docs/ui/modules/footer.templ‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ package modules
33
import "github.com/deeploy-sh/deeploy/internal/shared/utils"
44

55
templ FooterLinks(stars int) {
6-
<footer class="border-y border-border flex text-muted-foreground">
6+
<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)]">
77
<a
88
href="/docs"
9-
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center hover:text-foreground transition-colors"
9+
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"
1010
>
1111
Docs
1212
</a>
1313
<a
1414
href="https://github.com/deeploy-sh/deeploy"
1515
target="_blank"
16-
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
16+
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"
1717
>
1818
GitHub { utils.FormatStars(stars) }
1919
</a>
2020
<a
2121
href="https://x.com/axadrn"
2222
target="_blank"
23-
class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
23+
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold hover:bg-accent transition-colors"
2424
>
2525
X
2626
</a>
@@ -29,6 +29,6 @@ templ FooterLinks(stars int) {
2929

3030
templ FooterCopyright() {
3131
<div class="py-8 text-center text-muted-foreground">
32-
© 2025 <a href="https://axeladrian.com" target="_blank" class="hover:text-foreground transition-colors">Axel Adrian</a>
32+
© 2025 <a href="https://axeladrian.com" target="_blank" class="font-semibold underline underline-offset-4 hover:text-foreground transition-colors">Axel Adrian</a>
3333
</div>
3434
}

‎internal/docs/ui/modules/navbar.templ‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@ import (
66
)
77

88
templ Navbar(stars int) {
9-
<nav class="px-4 py-4 md:px-20 md:py-6 border-b border-border flex justify-between items-center">
10-
<a href="/" class="flex items-center gap-2 hover:text-muted-foreground transition-colors">
9+
<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)]">
10+
<a href="/" class="flex items-center gap-2 font-bold">
1111
@modules.BlobIcon()
1212
deeploy
1313
</a>
1414
<div class="flex items-center gap-4 md:gap-6">
1515
<a
1616
href="/docs"
17-
class="text-muted-foreground hover:text-foreground transition-colors"
17+
class="font-semibold underline-offset-4 hover:underline"
1818
>
1919
Docs
2020
</a>
2121
<a
2222
href="https://github.com/deeploy-sh/deeploy"
2323
target="_blank"
24-
class="text-muted-foreground hover:text-foreground transition-colors"
24+
class="font-semibold underline-offset-4 hover:underline"
2525
>
2626
GitHub { utils.FormatStars(stars) }
2727
</a>

‎internal/docs/ui/pages/doc.templ‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import (
1515
)
1616

1717
templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
18-
@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
19-
@sidebar.Layout() {
20-
@sidebar.Sidebar() {
18+
@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
19+
@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"}) {
20+
@sidebar.Sidebar(sidebar.Props{}) {
2121
@sidebar.Header() {
2222
@sidebar.Menu() {
2323
@sidebar.MenuItem() {
@@ -52,9 +52,9 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
5252
}
5353
}
5454
}
55-
@sidebar.Inset() {
56-
<header class="sticky top-0 z-10 border-b bg-background">
57-
<div class="flex h-14 items-center px-6">
55+
@sidebar.Inset(sidebar.InsetProps{Class: "min-h-screen flex flex-col bg-background"}) {
56+
<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)]">
57+
<div class="flex h-14 items-center px-6 text-card-foreground">
5858
<div class="flex items-center gap-4">
5959
@sidebar.Trigger()
6060
@breadcrumb.Breadcrumb() {
@@ -92,12 +92,12 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
9292
</div>
9393
</div>
9494
</header>
95-
<div id="docs-content-wrapper">
96-
@DocContent(currentDoc, prev, next)
97-
</div>
98-
<div class="border-t border-border">
99-
@modules.FooterCopyright()
100-
</div>
95+
<div class="flex flex-1 min-h-0" id="docs-content-wrapper">
96+
@DocContent(currentDoc, prev, next)
97+
</div>
98+
<div class="mt-4 border-t border-border/70">
99+
@modules.FooterCopyright()
100+
</div>
101101
}
102102
}
103103
<script nonce={ templ.GetNonce(ctx) }>
@@ -134,20 +134,21 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
134134
}
135135

136136
templ DocContent(doc *service.Doc, prev, next *service.Doc) {
137-
<div class="flex-1" id="docs-content">
138-
<article class="container max-w-4xl px-6 py-12">
137+
<div class="flex-1 w-full flex justify-center items-start p-3 md:p-4" id="docs-content">
138+
<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)]">
139139
<div class="mb-8">
140140
<h1 class="text-4xl font-bold mb-2">{ doc.Title }</h1>
141141
if doc.Description != "" {
142142
<p class="text-xl text-muted-foreground">{ doc.Description }</p>
143143
}
144144
</div>
145145
@blocks.ContentWithProse(string(doc.Content))
146-
<div class="mt-12 pt-8 border-t flex justify-between">
146+
<div class="mt-12 pt-8 border-t border-border flex justify-between gap-3">
147147
if prev != nil {
148148
@button.Button(button.Props{
149149
Href: prev.Path,
150150
Variant: button.VariantOutline,
151+
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
151152
Attributes: templ.Attributes{
152153
"hx-get": prev.Path,
153154
"hx-target": "#docs-content-wrapper",
@@ -164,6 +165,7 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
164165
@button.Button(button.Props{
165166
Href: next.Path,
166167
Variant: button.VariantOutline,
168+
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
167169
Attributes: templ.Attributes{
168170
"hx-get": next.Path,
169171
"hx-target": "#docs-content-wrapper",

‎internal/docs/ui/pages/landing.templ‎

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,65 +16,68 @@ templ Landing() {
1616
stars = starsVal.(int)
1717
}
1818
}}
19-
<div class="min-h-screen flex flex-col px-4">
20-
<div class="max-w-5xl mx-auto w-full flex-1 flex flex-col md:border-x border-border">
19+
<div class="min-h-screen bg-background text-foreground px-3 py-3 md:px-4 md:py-6">
20+
<div class="mx-auto w-full max-w-6xl flex min-h-[calc(100vh-1.5rem)] flex-col">
2121
<!-- Navbar -->
2222
@modules.Navbar(stars)
2323
<!-- Main Content -->
24-
<main class="flex-1 flex flex-col justify-center">
25-
<!-- Hero -->
26-
<div class="py-12 md:py-16 px-4 md:px-20 space-y-4">
27-
<h1 class="text-2xl md:text-3xl font-semibold tracking-tight">
28-
Modern Deployment. Terminal First. Open Source.
29-
</h1>
30-
<p class="text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
31-
</div>
32-
<!-- Teaser Image -->
33-
<div class="border-t border-border">
34-
<img src="/assets/img/hero.png" class="w-full"/>
35-
</div>
36-
<!-- Features -->
37-
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
38-
<p class="font-semibold">Features</p>
39-
<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
40-
</div>
41-
<!-- Install Commands -->
42-
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
43-
<p class="font-semibold">Get started in 30 seconds</p>
44-
<div class="space-y-3">
45-
<!-- Server Install -->
46-
<div class="relative group">
47-
<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
48-
<span>Server (VPS)</span>
49-
</div>
50-
<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
51-
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
52-
<button
53-
class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
54-
data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
55-
>copy</button>
56-
</div>
57-
</div>
58-
<!-- TUI Install -->
59-
<div class="relative group">
60-
<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
61-
<span>TUI (your machine)</span>
62-
</div>
63-
<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
64-
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
65-
<button
66-
class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
67-
data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
68-
>copy</button>
69-
</div>
70-
</div>
71-
</div>
72-
</div>
73-
<!-- Built with -->
74-
<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
75-
<p class="font-semibold">Built with</p>
76-
<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
77-
</div>
24+
<main class="flex-1 flex flex-col justify-center px-1 pt-3 pb-3 md:px-5 md:pt-6 md:pb-6">
25+
<section class="space-y-5 md:space-y-7">
26+
<!-- Hero -->
27+
<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)]">
28+
<p class="text-xs md:text-sm uppercase tracking-[0.2em] font-bold text-muted-foreground">Self-hosted deploy stack</p>
29+
<h1 class="text-3xl md:text-5xl font-bold tracking-tight leading-tight">
30+
Modern Deployment. Terminal First. Open Source.
31+
</h1>
32+
<p class="text-base md:text-lg text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
33+
</section>
34+
<!-- Teaser Image -->
35+
<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)]">
36+
<img src="/assets/img/hero.png" class="w-full object-cover block" alt="deeploy ui preview"/>
37+
</section>
38+
<!-- Features -->
39+
<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)]">
40+
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Features</p>
41+
<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
42+
</section>
43+
<!-- Install Commands -->
44+
<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)]">
45+
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Get started in 30 seconds</p>
46+
<div class="space-y-3">
47+
<!-- Server Install -->
48+
<div class="relative">
49+
<div class="flex items-center gap-2 text-sm mb-1">
50+
<span>Server (VPS)</span>
51+
</div>
52+
<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)]">
53+
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
54+
<button
55+
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
56+
data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
57+
>copy</button>
58+
</div>
59+
</div>
60+
<!-- TUI Install -->
61+
<div class="relative">
62+
<div class="flex items-center gap-2 text-sm mb-1">
63+
<span>TUI (your machine)</span>
64+
</div>
65+
<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)]">
66+
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
67+
<button
68+
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
69+
data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
70+
>copy</button>
71+
</div>
72+
</div>
73+
</div>
74+
</section>
75+
<!-- Built with -->
76+
<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)]">
77+
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Built with</p>
78+
<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
79+
</section>
80+
</section>
7881
<!-- Newsletter -->
7982
<!-- <div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4"> -->
8083
<!-- <div class="space-y-2"> -->

‎internal/shared/assets/css/input.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,3 +176,4 @@
176176
"calt" 1;
177177
}
178178
}
179+

0 commit comments

Comments
 (0)