Skip to content

Commit 3a235af

Browse files
philmillmanphilmillman
authored
homepage and docs IA updates (#206)
* clean up docs IA * add icons to homepage * add vlt to package managers * add custom footer * Apply suggestions from code review
1 parent f7868f0 commit 3a235af

File tree

18 files changed

+685
-100
lines changed

18 files changed

+685
-100
lines changed

‎packages/varlock-website/astro.config.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export default defineConfig({
5656
ThemeSelect: '@/components/ThemeSelect.astro',
5757
ThemeProvider: '@/components/CustomStarlightThemeProvider.astro',
5858
SocialIcons: '@/components/SocialIcons.astro',
59+
Footer: '@/components/Footer.astro',
5960
},
6061
customCss: ['@/styles/global.css'],
6162
plugins: [starlightLlmsTxt()],
@@ -92,13 +93,11 @@ export default defineConfig({
9293
{
9394
label: 'Integrations',
9495
items: [
96+
{ label: 'Overview', slug: 'integrations/overview' },
9597
{ label: 'JavaScript / Node.js', slug: 'integrations/javascript' },
9698
{ label: 'Next.js', slug: 'integrations/nextjs' },
97-
{ label: 'Vite', slug: 'integrations/vite' },
99+
{ label: 'Vite-based', slug: 'integrations/vite' },
98100
{ label: 'Astro', slug: 'integrations/astro' },
99-
{ label: 'Qwik', slug: 'integrations/qwik' },
100-
{ label: 'React Router', slug: 'integrations/react-router' },
101-
{ label: 'Cloudflare Workers', slug: 'integrations/cloudflare-workers' },
102101
{ label: 'Other languages', slug: 'integrations/other-languages' },
103102
{ label: 'Docker', slug: 'guides/docker' },
104103
{ label: 'GitHub Actions', slug: 'integrations/github-action' },

‎packages/varlock-website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@astrojs/starlight": "^0.36.2",
1919
"@astrojs/vue": "^5.1.2",
2020
"astro": "^5.15.3",
21+
"astro-iconify": "^1.2.0",
2122
"astro-og-canvas": "^0.7.2",
2223
"astro-robots-txt": "^1.0.0",
2324
"canvaskit-wasm": "^0.40.0",

‎packages/varlock-website/public/_redirects‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
/env-spec /env-spec/overview/
22
/env-spec/ /env-spec/overview/
33
/integrations/ai-tools /guides/ai-tools
4+
/integrations/qwik /integrations/vite
5+
/integrations/react-router /integrations/vite
6+
/integrations/cloudflare-workers /integrations/vite

‎packages/varlock-website/src/components/EmailSignup.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ async function onSubmit() {
132132
133133
&:focus {
134134
border-color: var(--brand-pink);
135-
background: var);
136135
outline: none;
137136
}
138137

‎packages/varlock-website/src/components/ExecCommandWidget.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ const { command, showBinary = true, dlx = false } = Astro.props;
2020
<TabItem label="pnpm">
2121
<Code code={`pnpm ${dlx ? "dlx" : "exec --"} ${command}`} lang="bash" />
2222
</TabItem>
23+
<TabItem label="vlt">
24+
<Code code={`${dlx ? "vlx" : "vlx --"} ${command}`} lang="bash" />
25+
</TabItem>
2326
{
2427
showBinary && (
2528
<TabItem label="standalone binary">

‎packages/varlock-website/src/components/Footer.astro‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
import Default from "@astrojs/starlight/components/Footer.astro";
3+
---
4+
5+
<Default>
6+
<slot />
7+
</Default>
8+
9+
<div class="custom-footer">
10+
<p>
11+
© 2025 <a href="https://dmno.io">DMNO Inc.</a> All rights reserved.
12+
</p>
13+
</div>
14+
15+
<style>
16+
.custom-footer {
17+
padding: 1rem;
18+
text-align: center;
19+
}
20+
21+
.custom-footer p {
22+
margin: 0;
23+
color: var(--sl-color-text-2);
24+
font-size: 0.875rem;
25+
}
26+
27+
.custom-footer a {
28+
color: var(--sl-color-text-accent);
29+
text-decoration: none;
30+
transition: color 0.2s;
31+
}
32+
33+
.custom-footer a:hover {
34+
color: var(--sl-color-text-accent-hover, var(--sl-color-text-accent));
35+
text-decoration: underline;
36+
}
37+
</style>

‎packages/varlock-website/src/components/InstallJsDepsWidget.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,10 @@ const packagesStr = Array.isArray(packages) ? packages.join(" ") : packages;
3030
lang="bash"
3131
/>
3232
</TabItem>
33+
<TabItem label="vlt">
34+
<Code
35+
code={`vlt ${remove ? "uninstall" : "install"} ${dev ? "--save-dev " : ""}${packagesStr}`}
36+
lang="bash"
37+
/>
38+
</TabItem>
3339
</Tabs>

‎packages/varlock-website/src/components/LogoList.astro‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
---
2+
import { Icon } from "astro-iconify";
3+
4+
export interface LogoItem {
5+
title: string;
6+
icon?: string;
7+
href?: string;
8+
alt?: string;
9+
}
10+
11+
interface Props {
12+
title: string;
13+
logos: LogoItem[];
14+
theme?:
15+
| "purple"
16+
| "cyan"
17+
| "green"
18+
| "blue"
19+
| "orange"
20+
| "pink"
21+
| "red"
22+
| "yellow";
23+
}
24+
25+
const { title, logos, theme = "purple" } = Astro.props;
26+
---
27+
28+
<section class="logo-list not-content" data-theme={theme}>
29+
<h2>{title}</h2>
30+
<ul>
31+
{
32+
logos.map(({ title, icon, href, alt }) => {
33+
const content = (
34+
<div class="logo-tile">
35+
<Icon
36+
name={icon}
37+
class="logo-icon"
38+
aria-label={alt ?? title}
39+
title={alt ?? title}
40+
/>
41+
42+
<span>{title}</span>
43+
</div>
44+
);
45+
46+
if (href) {
47+
return (
48+
<li>
49+
<a href={href} class="logo-link">
50+
{content}
51+
</a>
52+
</li>
53+
);
54+
}
55+
56+
return <li>{content}</li>;
57+
})
58+
}
59+
</ul>
60+
</section>
61+
62+
<style>
63+
.logo-list {
64+
margin: 0;
65+
--theme-color: var(--brand-purple);
66+
--theme-color-t1: var(--brand-purple--t1);
67+
}
68+
69+
.logo-list h2 {
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
gap: 0.5em;
74+
margin-bottom: 1.5rem;
75+
}
76+
77+
.logo-list ul {
78+
list-style: none;
79+
padding: 0;
80+
margin: 0;
81+
display: grid;
82+
grid-template-columns: repeat(2, 1fr);
83+
gap: 1rem;
84+
}
85+
86+
.logo-list li {
87+
width: 100%;
88+
}
89+
90+
.logo-link {
91+
text-decoration: none;
92+
color: inherit;
93+
}
94+
95+
.logo-list[data-theme="purple"] {
96+
--theme-color: var(--brand-purple);
97+
--theme-color-t1: var(--brand-purple--t1);
98+
}
99+
100+
.logo-list[data-theme="cyan"] {
101+
--theme-color: var(--brand-cyan);
102+
--theme-color-t1: var(--brand-cyan--t1);
103+
}
104+
105+
.logo-list[data-theme="green"] {
106+
--theme-color: var(--brand-green);
107+
--theme-color-t1: var(--brand-green--t1);
108+
}
109+
110+
.logo-list[data-theme="blue"] {
111+
--theme-color: var(--brand-blue);
112+
--theme-color-t1: var(--brand-blue--t1);
113+
}
114+
115+
.logo-list[data-theme="orange"] {
116+
--theme-color: var(--brand-orange);
117+
--theme-color-t1: var(--brand-orange--t1);
118+
}
119+
120+
.logo-list[data-theme="pink"] {
121+
--theme-color: var(--brand-pink);
122+
--theme-color-t1: var(--brand-pink--t1);
123+
}
124+
125+
.logo-list[data-theme="red"] {
126+
--theme-color: var(--brand-red);
127+
--theme-color-t1: var(--brand-red--t1);
128+
}
129+
130+
.logo-list[data-theme="yellow"] {
131+
--theme-color: var(--brand-yellow);
132+
--theme-color-t1: var(--brand-yellow--t1);
133+
}
134+
135+
.logo-tile {
136+
width: 100%;
137+
border: 1px dotted var(--theme-color-t1);
138+
border-radius: 12px;
139+
padding: 1.25rem 1rem;
140+
min-height: var(--logo-tile-height, 150px);
141+
display: flex;
142+
flex-direction: column;
143+
align-items: center;
144+
gap: 0.75rem;
145+
background: color-mix(in srgb, var(--sl-color-bg), transparent 20%);
146+
transition:
147+
transform 150ms ease,
148+
border-color 150ms ease,
149+
box-shadow 150ms ease;
150+
}
151+
152+
.logo-link:hover .logo-tile,
153+
.logo-link:focus-visible .logo-tile {
154+
transform: translateY(-4px);
155+
border-color: var(--brand-red);
156+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
157+
}
158+
159+
.logo-tile img {
160+
width: 56px;
161+
height: 56px;
162+
}
163+
164+
.logo-icon {
165+
width: 56px;
166+
height: 56px;
167+
color: var(--theme-color);
168+
transition: color 150ms ease;
169+
}
170+
171+
.logo-link:hover .logo-icon,
172+
.logo-link:focus-visible .logo-icon {
173+
color: var(--brand-red);
174+
}
175+
176+
.logo-tile span {
177+
display: inline-block;
178+
max-width: 100%;
179+
text-align: center;
180+
font-size: 0.95rem;
181+
line-height: 1.4;
182+
text-wrap: balance;
183+
}
184+
185+
:global(:root[data-theme="dark"]) .logo-tile img {
186+
filter: invert(1);
187+
}
188+
189+
@media (max-width: 768px) {
190+
.logo-list ul {
191+
grid-template-columns: repeat(2, 1fr);
192+
gap: 0.75rem;
193+
}
194+
}
195+
</style>

0 commit comments

Comments
 (0)