Skip to content

Commit 9affc69

Browse files
ProgrammerNomadProgrammerNomad
committed
Update styles and structure across various components
- Enhanced the global CSS variables for improved theming and consistency. - Refactored the `SiteHeader` and `SiteFooter` components for better layout and accessibility. - Updated the `FeatureShowcase` and `LatestReleaseSection` components to improve visual presentation and responsiveness. - Removed unused imports and components to streamline the codebase. - Adjusted the homepage content for clarity and conciseness, including updates to the hero section and feature descriptions. - Added new metadata handling for better SEO and structured data output.
1 parent 5d80f5f commit 9affc69

28 files changed

Lines changed: 462 additions & 422 deletions

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020

2121
# Generated content from DevStackBox repo
2222
/content/docs
23+
/content/docs-meta.json
24+
/content/root-markdown/
2325
/.source
2426
/lib/navigation-data.ts
2527
/public/brand/

‎app/download/page.tsx‎

Lines changed: 81 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import type { Metadata } from "next";
22
import Link from "next/link";
3-
import { Download, ExternalLink } from "lucide-react";
3+
import { Check, Download, ExternalLink, ShieldCheck } from "lucide-react";
44
import { ReleaseBody } from "@/components/release-body";
55
import { homepage } from "@/content/homepage";
66
import {
77
findWindowsInstaller,
8+
findSha256,
89
formatReleaseDate,
910
getLatestRelease,
1011
} from "@/lib/github";
@@ -22,86 +23,91 @@ export const metadata: Metadata = buildPageMetadata({
2223
export default async function DownloadPage() {
2324
const release = await getLatestRelease();
2425
const installer = release ? findWindowsInstaller(release) : null;
26+
const checksum = release ? findSha256(release.body) : null;
2527

2628
return (
27-
<div className="mx-auto max-w-3xl px-4 py-16 sm:px-6">
28-
<p className="text-sm font-medium text-primary">Latest stable release</p>
29-
<h1 className="mt-2 text-4xl font-bold tracking-tight">
30-
{release?.tag_name ?? "DevStackBox"}
31-
</h1>
32-
{release ? (
33-
<p className="mt-2 text-muted-foreground">
34-
Released {formatReleaseDate(release.published_at)}
35-
</p>
36-
) : (
37-
<p className="mt-2 text-muted-foreground">
38-
Release information is temporarily unavailable. Visit GitHub Releases.
39-
</p>
40-
)}
29+
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:py-16">
30+
<section className="grid gap-10 rounded-3xl border border-border bg-gradient-to-br from-primary/10 via-card to-card p-6 sm:p-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
31+
<div>
32+
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-primary">DevStackBox for Windows</p>
33+
<h1 className="mt-3 text-4xl font-bold tracking-tight sm:text-5xl">Download the local PHP stack.</h1>
34+
<p className="mt-4 max-w-xl text-lg leading-relaxed text-muted-foreground">
35+
Install Apache, PHP, MySQL, and phpMyAdmin in one desktop application. Your projects and settings stay on your PC.
36+
</p>
37+
<div className="mt-7 flex flex-wrap gap-3">
38+
{installer ? (
39+
<a href={installer.browser_download_url} className="btn-primary">
40+
<Download className="size-4" />
41+
Download {release?.tag_name}
42+
</a>
43+
) : (
44+
<a href="https://github.com/DevStackBox/DevStackBox/releases/latest" className="btn-primary">
45+
<ExternalLink className="size-4" />
46+
View latest release
47+
</a>
48+
)}
49+
<Link href="/docs/getting-started/installation" className="btn-secondary">Installation guide</Link>
50+
</div>
51+
<p className="mt-4 text-sm text-muted-foreground">
52+
{release ? `Latest stable: ${release.tag_name} · ${formatReleaseDate(release.published_at)}` : "Release information is temporarily unavailable."}
53+
</p>
54+
</div>
4155

42-
<div className="mt-10 rounded-2xl border border-border bg-muted/20 p-8">
43-
<h2 className="text-lg font-semibold">Windows x64 Installer</h2>
44-
{installer ? (
45-
<>
46-
<p className="mt-2 font-mono text-sm text-muted-foreground">
47-
{installer.name} · {(installer.size / 1024 / 1024).toFixed(1)} MB
48-
</p>
49-
<a
50-
href={installer.browser_download_url}
51-
className="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-white hover:opacity-90"
52-
>
53-
<Download className="h-4 w-4" />
54-
Download
55-
</a>
56-
</>
57-
) : (
58-
<a
59-
href="https://github.com/DevStackBox/DevStackBox/releases/latest"
60-
className="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-white"
61-
>
62-
View on GitHub
63-
<ExternalLink className="h-4 w-4" />
64-
</a>
65-
)}
66-
</div>
56+
<div className="rounded-2xl border border-border bg-background p-5 sm:p-6">
57+
<div className="flex items-start gap-3">
58+
<span className="rounded-xl bg-primary/10 p-2.5 text-primary"><ShieldCheck className="size-5" /></span>
59+
<div>
60+
<h2 className="font-semibold">Windows 10/11 · 64-bit</h2>
61+
<p className="mt-1 text-sm text-muted-foreground">Single installer for supported Windows PCs.</p>
62+
</div>
63+
</div>
64+
{installer ? (
65+
<dl className="mt-6 space-y-3 border-t border-border pt-5 text-sm">
66+
<div className="flex justify-between gap-4"><dt className="text-muted-foreground">Version</dt><dd className="font-medium">{release?.tag_name}</dd></div>
67+
<div className="flex justify-between gap-4"><dt className="text-muted-foreground">File</dt><dd className="break-all text-right font-mono text-xs">{installer.name}</dd></div>
68+
<div className="flex justify-between gap-4"><dt className="text-muted-foreground">Size</dt><dd>{(installer.size / 1024 / 1024).toFixed(1)} MB</dd></div>
69+
</dl>
70+
) : (
71+
<p className="mt-6 border-t border-border pt-5 text-sm text-muted-foreground">The installer details will appear here when GitHub release data is available.</p>
72+
)}
73+
{checksum ? (
74+
<div className="mt-5 rounded-xl bg-muted p-4">
75+
<p className="flex items-center gap-2 text-xs font-semibold text-muted-foreground"><Check className="size-4 text-primary" />SHA-256 checksum</p>
76+
<code className="mt-2 block break-all font-mono text-xs leading-relaxed">{checksum}</code>
77+
</div>
78+
) : null}
79+
</div>
80+
</section>
6781

68-
{release?.body ? (
69-
<section className="mt-10">
70-
<h2 className="text-lg font-semibold">Release notes</h2>
71-
<ReleaseBody body={release.body} className="mt-4" />
72-
</section>
73-
) : null}
82+
<div className="mt-12 grid gap-10 lg:grid-cols-[0.7fr_1.3fr]">
83+
<div>
84+
<section>
85+
<h2 className="text-2xl font-bold tracking-tight">What you need</h2>
86+
<ul className="mt-4 space-y-3 text-sm text-muted-foreground">
87+
{homepage.systemRequirements.map((req) => <li key={req} className="flex gap-3"><Check className="mt-0.5 size-4 shrink-0 text-primary" />{req}</li>)}
88+
</ul>
89+
</section>
90+
<section className="mt-10 rounded-2xl border border-border bg-card p-5">
91+
<h2 className="font-semibold">Prefer to verify the release?</h2>
92+
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">Check the installer checksum against the value above, or review the release files and notes directly on GitHub.</p>
93+
<a href={release?.html_url ?? "https://github.com/DevStackBox/DevStackBox/releases/latest"} target="_blank" rel="noopener noreferrer" className="link-primary mt-4 inline-flex items-center gap-2 text-sm">Open GitHub release <ExternalLink className="size-3.5" /></a>
94+
</section>
95+
</div>
7496

75-
<section className="mt-10">
76-
<h2 className="text-lg font-semibold">System requirements</h2>
77-
<ul className="mt-3 list-inside list-disc space-y-1 text-sm text-muted-foreground">
78-
{homepage.systemRequirements.map((req) => (
79-
<li key={req}>{req}</li>
80-
))}
81-
</ul>
82-
</section>
97+
<section className="min-w-0">
98+
<div className="flex flex-wrap items-baseline justify-between gap-3">
99+
<h2 className="text-2xl font-bold tracking-tight">Release notes</h2>
100+
<Link href="/releases" className="link-primary text-sm">All releases</Link>
101+
</div>
102+
{release?.body ? <ReleaseBody body={release.body} className="mt-5 rounded-2xl border border-border bg-card p-5 sm:p-7" /> : <p className="mt-5 rounded-2xl border border-border bg-card p-5 text-sm text-muted-foreground">Release notes are temporarily unavailable. Visit GitHub Releases to view them.</p>}
103+
</section>
104+
</div>
83105

84-
<nav className="mt-12 flex flex-wrap gap-4 border-t border-border pt-8 text-sm">
85-
<Link href="/releases" className="text-primary hover:underline">
86-
Previous releases
87-
</Link>
88-
<Link href="/changelog" className="text-primary hover:underline">
89-
Changelog
90-
</Link>
91-
<Link
92-
href="/docs/getting-started/installation"
93-
className="text-primary hover:underline"
94-
>
95-
Installation guide
96-
</Link>
97-
<a
98-
href="https://github.com/DevStackBox/DevStackBox/releases"
99-
target="_blank"
100-
rel="noopener noreferrer"
101-
className="text-primary hover:underline"
102-
>
103-
GitHub Releases
104-
</a>
106+
<nav aria-label="Download page links" className="mt-12 flex flex-wrap gap-x-6 gap-y-3 border-t border-border pt-7 text-sm">
107+
<Link href="/releases" className="link-primary">Previous releases</Link>
108+
<Link href="/changelog" className="link-primary">Changelog</Link>
109+
<Link href="/docs/getting-started/installation" className="link-primary">Installation guide</Link>
110+
<Link href="/community" className="link-primary">Get help</Link>
105111
</nav>
106112
</div>
107113
);

‎app/globals.css‎

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -51,62 +51,90 @@
5151

5252
@layer base {
5353
:root {
54-
--background: oklch(1 0 0);
55-
--foreground: oklch(0.145 0 0);
56-
--card: oklch(1 0 0);
57-
--card-foreground: oklch(0.145 0 0);
58-
--popover: oklch(1 0 0);
59-
--popover-foreground: oklch(0.145 0 0);
60-
--primary: oklch(0.546 0.245 262.881);
61-
--primary-foreground: oklch(0.985 0 0);
62-
--secondary: oklch(0.967 0.001 286.375);
63-
--secondary-foreground: oklch(0.21 0.006 285.885);
64-
--muted: oklch(0.967 0.001 286.375);
65-
--muted-foreground: oklch(0.552 0.016 285.938);
66-
--accent: oklch(0.967 0.001 286.375);
67-
--accent-foreground: oklch(0.21 0.006 285.885);
68-
--destructive: oklch(0.577 0.245 27.325);
69-
--border: oklch(0.92 0.004 286.32);
70-
--input: oklch(0.92 0.004 286.32);
71-
--ring: oklch(0.546 0.245 262.881);
54+
--color-fd-background: hsl(0 0% 100%);
55+
--color-fd-foreground: hsl(213 32% 11%);
56+
--color-fd-muted: hsl(213 24% 96%);
57+
--color-fd-muted-foreground: hsl(215 14% 43%);
58+
--color-fd-card: hsl(0 0% 100%);
59+
--color-fd-card-foreground: hsl(213 32% 11%);
60+
--color-fd-popover: hsl(0 0% 100%);
61+
--color-fd-popover-foreground: hsl(213 32% 11%);
62+
--color-fd-primary: hsl(223 97% 54%);
63+
--color-fd-primary-foreground: hsl(0 0% 100%);
64+
--color-fd-accent: hsl(223 100% 96%);
65+
--color-fd-accent-foreground: hsl(223 90% 33%);
66+
--color-fd-border: hsl(213 20% 88%);
67+
--color-fd-ring: hsl(223 97% 54%);
68+
--background: hsl(0 0% 100%);
69+
--foreground: hsl(213 32% 11%);
70+
--card: hsl(0 0% 100%);
71+
--card-foreground: hsl(213 32% 11%);
72+
--popover: hsl(0 0% 100%);
73+
--popover-foreground: hsl(213 32% 11%);
74+
--primary: hsl(223 97% 54%);
75+
--primary-foreground: hsl(0 0% 100%);
76+
--secondary: hsl(213 24% 96%);
77+
--secondary-foreground: hsl(213 32% 11%);
78+
--muted: hsl(213 24% 96%);
79+
--muted-foreground: hsl(215 14% 43%);
80+
--accent: hsl(223 100% 96%);
81+
--accent-foreground: hsl(223 90% 33%);
82+
--destructive: hsl(0 72% 51%);
83+
--border: hsl(213 20% 88%);
84+
--input: hsl(213 20% 88%);
85+
--ring: hsl(223 97% 54%);
7286
--radius: 0.625rem;
73-
--sidebar: oklch(0.985 0 0);
74-
--sidebar-foreground: oklch(0.145 0 0);
75-
--sidebar-primary: oklch(0.546 0.245 262.881);
76-
--sidebar-primary-foreground: oklch(0.985 0 0);
77-
--sidebar-accent: oklch(0.967 0.001 286.375);
78-
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
79-
--sidebar-border: oklch(0.92 0.004 286.32);
80-
--sidebar-ring: oklch(0.546 0.245 262.881);
87+
--sidebar: hsl(213 24% 96%);
88+
--sidebar-foreground: hsl(213 32% 11%);
89+
--sidebar-primary: hsl(223 97% 54%);
90+
--sidebar-primary-foreground: hsl(0 0% 100%);
91+
--sidebar-accent: hsl(223 100% 96%);
92+
--sidebar-accent-foreground: hsl(223 90% 33%);
93+
--sidebar-border: hsl(213 20% 88%);
94+
--sidebar-ring: hsl(223 97% 54%);
8195
}
8296

8397
.dark {
84-
--background: oklch(0.145 0 0);
85-
--foreground: oklch(0.985 0 0);
86-
--card: oklch(0.205 0 0);
87-
--card-foreground: oklch(0.985 0 0);
88-
--popover: oklch(0.205 0 0);
89-
--popover-foreground: oklch(0.985 0 0);
90-
--primary: oklch(0.623 0.214 259.815);
91-
--primary-foreground: oklch(0.985 0 0);
92-
--secondary: oklch(0.274 0.006 286.033);
93-
--secondary-foreground: oklch(0.985 0 0);
94-
--muted: oklch(0.274 0.006 286.033);
95-
--muted-foreground: oklch(0.705 0.015 286.067);
96-
--accent: oklch(0.274 0.006 286.033);
97-
--accent-foreground: oklch(0.985 0 0);
98-
--destructive: oklch(0.704 0.191 22.216);
99-
--border: oklch(1 0 0 / 10%);
100-
--input: oklch(1 0 0 / 15%);
101-
--ring: oklch(0.623 0.214 259.815);
102-
--sidebar: oklch(0.205 0 0);
103-
--sidebar-foreground: oklch(0.985 0 0);
104-
--sidebar-primary: oklch(0.623 0.214 259.815);
105-
--sidebar-primary-foreground: oklch(0.985 0 0);
106-
--sidebar-accent: oklch(0.274 0.006 286.033);
107-
--sidebar-accent-foreground: oklch(0.985 0 0);
108-
--sidebar-border: oklch(1 0 0 / 10%);
109-
--sidebar-ring: oklch(0.623 0.214 259.815);
98+
--color-fd-background: hsl(213 32% 11%);
99+
--color-fd-foreground: hsl(0 0% 98%);
100+
--color-fd-muted: hsl(213 26% 15%);
101+
--color-fd-muted-foreground: hsl(213 14% 70%);
102+
--color-fd-card: hsl(213 29% 14%);
103+
--color-fd-card-foreground: hsl(0 0% 98%);
104+
--color-fd-popover: hsl(213 29% 14%);
105+
--color-fd-popover-foreground: hsl(0 0% 98%);
106+
--color-fd-primary: hsl(223 97% 64%);
107+
--color-fd-primary-foreground: hsl(0 0% 100%);
108+
--color-fd-accent: hsl(223 35% 20%);
109+
--color-fd-accent-foreground: hsl(223 90% 88%);
110+
--color-fd-border: hsl(213 20% 22%);
111+
--color-fd-ring: hsl(223 97% 64%);
112+
--background: hsl(213 32% 11%);
113+
--foreground: hsl(0 0% 98%);
114+
--card: hsl(213 29% 14%);
115+
--card-foreground: hsl(0 0% 98%);
116+
--popover: hsl(213 29% 14%);
117+
--popover-foreground: hsl(0 0% 98%);
118+
--primary: hsl(223 97% 64%);
119+
--primary-foreground: hsl(0 0% 100%);
120+
--secondary: hsl(213 26% 15%);
121+
--secondary-foreground: hsl(0 0% 98%);
122+
--muted: hsl(213 26% 15%);
123+
--muted-foreground: hsl(213 14% 70%);
124+
--accent: hsl(223 35% 20%);
125+
--accent-foreground: hsl(223 90% 88%);
126+
--destructive: hsl(0 62% 55%);
127+
--border: hsl(213 20% 22%);
128+
--input: hsl(213 20% 22%);
129+
--ring: hsl(223 97% 64%);
130+
--sidebar: hsl(213 32% 11%);
131+
--sidebar-foreground: hsl(0 0% 98%);
132+
--sidebar-primary: hsl(223 97% 64%);
133+
--sidebar-primary-foreground: hsl(0 0% 100%);
134+
--sidebar-accent: hsl(223 35% 20%);
135+
--sidebar-accent-foreground: hsl(223 90% 88%);
136+
--sidebar-border: hsl(213 20% 22%);
137+
--sidebar-ring: hsl(223 97% 64%);
110138
}
111139
* {
112140
@apply border-border outline-ring/50;

‎app/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { FeatureShowcase } from "@/components/home/feature-showcase";
99
import { HeroSection } from "@/components/home/hero-section";
1010
import { LatestReleaseSection } from "@/components/home/latest-release-section";
1111
import { OpenSourceStrip } from "@/components/home/open-source-strip";
12-
import { ScreenshotGallery } from "@/components/screenshot-gallery";
1312
import { getLatestRelease, getRepoStats } from "@/lib/github";
1413

1514
export const revalidate = 300;
@@ -27,7 +26,6 @@ export default async function HomePage() {
2726
<FeatureGrid />
2827
<BuiltFor />
2928
<FeatureShowcase />
30-
<ScreenshotGallery />
3129
<LatestReleaseSection release={release} />
3230
<DocsPreview />
3331
<CommunityCta stats={stats} />

0 commit comments

Comments
 (0)