Skip to content

Commit 643de6a

Browse files
vdavidvdavid
committed
Website: add changelog and roadmap
1 parent e708cbd commit 643de6a

7 files changed

Lines changed: 566 additions & 2 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
All notable changes to Cmdr will be documented in this file.
44

5-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6-
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
5+
The format is based on [keep a changelog](https://keepachangelog.com/en/1.1.0/),
6+
and we use [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html).
77

88
## [Unreleased]
99

‎apps/website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"@tailwindcss/vite": "^4.1.18",
2222
"astro": "^5.17.1",
23+
"marked": "^17.0.1",
2324
"tailwindcss": "^4.1.18"
2425
},
2526
"devDependencies": {

‎apps/website/src/components/CheckIcon.astro‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
interface Props {
3+
checked?: boolean
4+
class?: string
5+
}
6+
7+
const { checked = false, class: className = '' } = Astro.props
8+
---
9+
10+
<svg
11+
viewBox="0 0 20 20"
12+
fill="none"
13+
class:list={['check-icon', className]}
14+
aria-hidden="true"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<!-- Tilted rectangle frame - slightly rotated for playful feel -->
18+
<rect
19+
x="2.5"
20+
y="3"
21+
width="14"
22+
height="14"
23+
rx="2.5"
24+
transform="rotate(-2 9.5 10)"
25+
stroke="var(--color-text-tertiary)"
26+
stroke-width="1.5"
27+
fill="none"></rect>
28+
{
29+
checked && (
30+
<path
31+
d="M6 10.5 C7 11.5, 8 12.5, 9 13 C10 11, 12 8, 14.5 6"
32+
stroke="var(--color-accent)"
33+
stroke-width="2"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
fill="none"
37+
/>
38+
)
39+
}
40+
</svg>
41+
42+
<style>
43+
.check-icon {
44+
width: 1.25rem;
45+
height: 1.25rem;
46+
flex-shrink: 0;
47+
}
48+
</style>

‎apps/website/src/components/Header.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { dmgUrl } from '../lib/release'
44
const navLinks = [
55
{ href: '/#features', label: 'Features' },
66
{ href: '/pricing', label: 'Pricing' },
7+
{ href: '/changelog', label: 'Changelog' },
8+
{ href: '/roadmap', label: 'Roadmap' },
79
{ href: 'https://github.com/vdavid/cmdr', label: 'GitHub', external: true },
810
]
911
---

‎apps/website/src/pages/changelog.astro‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
import Layout from '../layouts/Layout.astro'
3+
import Header from '../components/Header.astro'
4+
import Footer from '../components/Footer.astro'
5+
import { marked } from 'marked'
6+
import fs from 'node:fs'
7+
import path from 'node:path'
8+
9+
// Read the changelog file at build time
10+
const changelogPath = path.resolve(import.meta.dirname, '../../../../CHANGELOG.md')
11+
const changelogContent = fs.readFileSync(changelogPath, 'utf-8')
12+
13+
// Parse markdown to HTML
14+
const htmlContent = await marked.parse(changelogContent)
15+
---
16+
17+
<Layout title="Changelog - Cmdr" description="See what's new in Cmdr. All notable changes documented here.">
18+
<Header />
19+
<main class="mx-auto max-w-4xl px-6 pt-32 pb-24">
20+
<header class="mb-12">
21+
<h1 class="mb-4 text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">Changelog</h1>
22+
<p class="text-[var(--color-text-secondary)]">
23+
All notable changes to Cmdr are documented here. The format is based on
24+
<a
25+
href="https://keepachangelog.com/en/1.1.0/"
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
class="text-[var(--color-accent)] underline underline-offset-2 hover:text-[var(--color-accent-hover)]"
29+
>keep a changelog</a
30+
>.
31+
</p>
32+
</header>
33+
34+
<article class="changelog-content" set:html={htmlContent} />
35+
</main>
36+
<Footer />
37+
</Layout>
38+
39+
<style>
40+
.changelog-content {
41+
font-family: var(--font-mono) monospace;
42+
font-size: 0.875rem;
43+
line-height: 1.75;
44+
}
45+
46+
/* Hide the title and intro from the markdown since we render them manually */
47+
.changelog-content :global(h1:first-child),
48+
.changelog-content :global(h1:first-child + p) {
49+
display: none;
50+
}
51+
52+
.changelog-content :global(h2) {
53+
margin-top: 3rem;
54+
margin-bottom: 1rem;
55+
padding-bottom: 0.5rem;
56+
border-bottom: 1px solid var(--color-border);
57+
font-size: 1.25rem;
58+
font-weight: 600;
59+
color: var(--color-accent);
60+
}
61+
62+
.changelog-content :global(h2:first-of-type) {
63+
margin-top: 0;
64+
}
65+
66+
.changelog-content :global(h3) {
67+
margin-top: 1.5rem;
68+
margin-bottom: 0.75rem;
69+
font-size: 1rem;
70+
font-weight: 600;
71+
color: var(--color-text-primary);
72+
}
73+
74+
.changelog-content :global(h4) {
75+
margin-top: 1.25rem;
76+
margin-bottom: 0.5rem;
77+
font-size: 0.875rem;
78+
font-weight: 600;
79+
color: var(--color-text-secondary);
80+
}
81+
82+
.changelog-content :global(p) {
83+
margin-bottom: 1rem;
84+
color: var(--color-text-secondary);
85+
}
86+
87+
.changelog-content :global(ul) {
88+
margin-bottom: 1rem;
89+
padding-left: 1.5rem;
90+
list-style-type: disc;
91+
}
92+
93+
.changelog-content :global(li) {
94+
margin-bottom: 0.5rem;
95+
color: var(--color-text-secondary);
96+
}
97+
98+
.changelog-content :global(a) {
99+
color: var(--color-accent);
100+
text-decoration: underline;
101+
text-underline-offset: 2px;
102+
transition: color 0.2s;
103+
}
104+
105+
.changelog-content :global(a:hover) {
106+
color: var(--color-accent-hover);
107+
}
108+
109+
.changelog-content :global(strong) {
110+
color: var(--color-text-primary);
111+
font-weight: 600;
112+
}
113+
114+
.changelog-content :global(code) {
115+
padding: 0.125rem 0.375rem;
116+
background: var(--color-surface);
117+
border-radius: 0.25rem;
118+
font-size: 0.875em;
119+
}
120+
121+
.changelog-content :global(hr) {
122+
margin: 2rem 0;
123+
border: none;
124+
border-top: 1px solid var(--color-border);
125+
}
126+
127+
/* Collapsible details/summary styling */
128+
.changelog-content :global(details) {
129+
margin-top: 2rem;
130+
padding: 1rem 1.5rem;
131+
background: var(--color-surface);
132+
border: 1px solid var(--color-border);
133+
border-radius: 0.75rem;
134+
}
135+
136+
.changelog-content :global(summary) {
137+
cursor: pointer;
138+
font-weight: 600;
139+
color: var(--color-text-primary);
140+
}
141+
142+
.changelog-content :global(summary:hover) {
143+
color: var(--color-accent);
144+
}
145+
146+
.changelog-content :global(details[open] summary) {
147+
margin-bottom: 1rem;
148+
}
149+
</style>

0 commit comments

Comments
 (0)
⚡