Skip to content

Commit a825258

Browse files
jumskijumski
committed
style: update component layout, add quote styling, and improve responsiveness
- Adjusted padding and grid layout in HeroWithSlot component for better spacing - Added a styled quote block with hover effects and responsive typography - Enhanced quote container margins and max-width for clarity and mobile support - Included styling for quote link hover states and attribution text - Minor layout tweaks to improve visual separation and consistency across components
1 parent 5764ac6 commit a825258

File tree

12 files changed

+691
-280
lines changed

12 files changed

+691
-280
lines changed

‎pkgs/website/astro.config.mjs‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -121,29 +121,6 @@ export default defineConfig({
121121
content: 'website',
122122
},
123123
},
124-
{
125-
tag: 'script',
126-
content: `
127-
document.addEventListener('DOMContentLoaded', function() {
128-
if (!window.location.pathname.startsWith('/author')) {
129-
const sticker = document.createElement('a');
130-
sticker.href = '/author/';
131-
sticker.className = 'hire-sticker';
132-
sticker.textContent = 'Chat with Author';
133-
document.body.appendChild(sticker);
134-
135-
// Trigger one-time attention nudge after 5 seconds
136-
setTimeout(function() {
137-
sticker.classList.add('nudge');
138-
// Remove the class after animation completes
139-
setTimeout(function() {
140-
sticker.classList.remove('nudge');
141-
}, 800);
142-
}, 5000);
143-
}
144-
});
145-
`,
146-
},
147124
],
148125
plugins: [
149126
starlightBlog({
@@ -468,6 +445,7 @@ export default defineConfig({
468445
],
469446
components: {
470447
Hero: './src/components/ConditionalHero.astro',
448+
PageFrame: './src/components/PageFrame.astro',
471449
},
472450
}),
473451
robotsTxt({

‎pkgs/website/src/assets/quote-left.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎pkgs/website/src/assets/quote-right.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎pkgs/website/src/components/CodeOverlay.astro‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@
408408
setTimeout(() => {
409409
const resetButton = document.querySelector('.reset-overlay-button') as HTMLElement;
410410
if (resetButton) resetButton.style.display = 'block';
411-
}, 2000);
411+
}, 1700);
412412
});
413413
};
414414

@@ -439,8 +439,25 @@
439439
scrollableInner.addEventListener('scroll', updateButtonVisibility, { passive: true });
440440

441441
button.addEventListener('click', () => {
442+
// Cancel any ongoing scroll animation
443+
if (isAnimating) {
444+
isAnimating = false;
445+
if (scrollAnimationFrame) {
446+
cancelAnimationFrame(scrollAnimationFrame);
447+
scrollAnimationFrame = null;
448+
}
449+
}
450+
451+
// Show the reset overlay button immediately
452+
const resetButton = document.querySelector('.reset-overlay-button') as HTMLElement;
453+
if (resetButton) {
454+
resetButton.style.display = 'block';
455+
}
456+
442457
// Mark as programmatic scroll to avoid tracking
443458
isProgrammaticScroll = true;
459+
460+
// Scroll to top smoothly
444461
scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });
445462

446463
// Reset flag after scroll completes
@@ -463,22 +480,31 @@
463480

464481
// Cancel any ongoing animation
465482
isAnimating = false;
466-
isProgrammaticScroll = false; // Reset programmatic flag
467483
if (scrollAnimationFrame) {
468484
cancelAnimationFrame(scrollAnimationFrame);
469485
scrollAnimationFrame = null;
470486
}
471487

488+
// Mark as programmatic scroll to avoid tracking
489+
isProgrammaticScroll = true;
490+
491+
// Scroll to top smoothly
492+
scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });
493+
472494
// Reset to initial state
473495
overlay.classList.remove('hidden');
474496
overlay.style.opacity = '1';
475497
scrollableContainer.classList.remove('scrollable-enabled');
476-
scrollableInner.scrollTop = 0;
477498
button.style.display = 'none';
478499
if (scrollTopButton) {
479500
scrollTopButton.style.display = 'none';
480501
}
481502

503+
// Reset flag after scroll completes
504+
setTimeout(() => {
505+
isProgrammaticScroll = false;
506+
}, 1000);
507+
482508
// Note: hasTrackedManualScroll is NOT reset here
483509
// This means we track manual scroll only once per page session,
484510
// even if user reveals, resets, and reveals again

‎pkgs/website/src/components/HeroWithSlot.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
5252
order: 2;
5353
justify-content: center;
5454
}
55-
55+
5656
.stack {
5757
order: 1;
5858
flex-direction: column;
@@ -93,7 +93,8 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
9393
.hero {
9494
grid-template-columns: 4fr 5fr;
9595
gap: 3%;
96-
padding-block: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
96+
padding-top: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
97+
padding-bottom: 0;
9798
}
9899

99100
.hero > .hero-html {

‎pkgs/website/src/components/PageFrame.astro‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
---
2+
import type { Props } from '@astrojs/starlight/props';
3+
import Default from '@astrojs/starlight/components/PageFrame.astro';
4+
import { LinkButton } from '@astrojs/starlight/components';
5+
6+
const isAuthorPage = Astro.url.pathname.startsWith('/author');
7+
const isLandingPage = Astro.url.pathname === '/';
8+
const showFooter = isLandingPage || isAuthorPage;
9+
---
10+
11+
<Default {...Astro.props}>
12+
<slot slot="header" name="header" />
13+
<slot slot="sidebar" name="sidebar" />
14+
<slot />
15+
</Default>
16+
17+
{!isAuthorPage && (
18+
<a href="/author/" class="hire-sticker">
19+
Chat with Author
20+
</a>
21+
)}
22+
23+
{showFooter && (
24+
<footer class="site-footer">
25+
<div class="footer-content">
26+
<div class="footer-left">
27+
<div class="footer-logo">
28+
<a href="/">
29+
<img src="/src/assets/pgflow-logo-dark.svg" alt="" class="logo-dark" />
30+
<img src="/src/assets/pgflow-logo-light.svg" alt="" class="logo-light" />
31+
<span class="logo-text">pgflow</span>
32+
</a>
33+
</div>
34+
<div class="footer-social">
35+
<a href="https://github.com/pgflow-dev/pgflow" aria-label="GitHub" target="_blank" rel="noopener">
36+
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
37+
</a>
38+
<a href="https://discord.gg/pgflow" aria-label="Discord" target="_blank" rel="noopener">
39+
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
40+
</a>
41+
<a href="https://x.com/pgflow_dev" aria-label="Twitter" target="_blank" rel="noopener">
42+
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
43+
</a>
44+
<a href="mailto:hello@pgflow.dev" aria-label="Email" target="_blank" rel="noopener">
45+
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
46+
</a>
47+
<a href="/news/rss.xml" aria-label="RSS Feed" target="_blank" rel="noopener">
48+
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/></svg>
49+
</a>
50+
</div>
51+
<div class="footer-demo">
52+
<LinkButton href="https://demo.pgflow.dev" variant="primary" icon="rocket">
53+
Try Demo
54+
</LinkButton>
55+
</div>
56+
</div>
57+
58+
<div class="footer-right">
59+
<div class="footer-column">
60+
<h3>Get Started</h3>
61+
<ul>
62+
<li><a href="/get-started/installation/">Installation</a></li>
63+
<li><a href="/get-started/flows/create-flow/">Create Flow</a></li>
64+
<li><a href="/get-started/flows/compile-flow/">Compile Flow</a></li>
65+
<li><a href="/get-started/flows/run-flow/">Run Flow</a></li>
66+
<li><a href="/project-status/">Project Status</a></li>
67+
<li><a href="/get-started/faq/">FAQ</a></li>
68+
</ul>
69+
</div>
70+
71+
<div class="footer-column">
72+
<h3>Build</h3>
73+
<ul>
74+
<li><a href="/build/starting-flows/">Starting Flows</a></li>
75+
<li><a href="/build/retrying-steps/">Retrying Steps</a></li>
76+
<li><a href="/build/process-arrays-in-parallel/">Process Arrays</a></li>
77+
<li><a href="/build/create-reusable-tasks/">Reusable Tasks</a></li>
78+
<li><a href="/build/organize-flow-code/">Organize Code</a></li>
79+
<li><a href="/build/delaying-steps/">Delaying Steps</a></li>
80+
<li><a href="/build/version-flows/">Version Flows</a></li>
81+
</ul>
82+
</div>
83+
84+
<div class="footer-column">
85+
<h3>Deploy</h3>
86+
<ul>
87+
<li><a href="/deploy/supabase/deploy-first-flow/">Deploy to Supabase</a></li>
88+
<li><a href="/deploy/monitor-execution/">Monitor Execution</a></li>
89+
<li><a href="/deploy/supabase/keep-workers-running/">Keep Workers Running</a></li>
90+
<li><a href="/deploy/supabase/update-deployed-flows/">Update Deployed Flows</a></li>
91+
<li><a href="/deploy/update-pgflow/">Update pgflow</a></li>
92+
<li><a href="/deploy/tune-flow-config/">Tune Flows</a></li>
93+
<li><a href="/deploy/prune-records/">Prune Records</a></li>
94+
</ul>
95+
</div>
96+
97+
<div class="footer-column">
98+
<h3>Learn</h3>
99+
<ul>
100+
<li><a href="/concepts/how-pgflow-works/">How pgflow Works</a></li>
101+
<li><a href="/concepts/three-layer-architecture/">Three-Layer Architecture</a></li>
102+
<li><a href="/concepts/understanding-flows/">Understanding Flows</a></li>
103+
<li><a href="/concepts/map-steps/">Map Steps</a></li>
104+
<li><a href="/tutorials/ai-web-scraper/">AI Web Scraper Tutorial</a></li>
105+
<li><a href="/comparisons/">Comparisons</a></li>
106+
</ul>
107+
</div>
108+
109+
<div class="footer-column">
110+
<h3>Reference</h3>
111+
<ul>
112+
<li><a href="/reference/">API Overview</a></li>
113+
<li><a href="/reference/pgflow-client/">@pgflow/client API</a></li>
114+
<li><a href="/reference/context/">Context API</a></li>
115+
<li><a href="/reference/compile-api/">Compile API</a></li>
116+
<li><a href="/reference/configuration/">Configuration</a></li>
117+
<li><a href="/reference/permissions/">Permissions</a></li>
118+
</ul>
119+
</div>
120+
</div>
121+
</div>
122+
</footer>
123+
)}
124+
125+
<style>
126+
.site-footer {
127+
width: 100%;
128+
background: var(--sl-color-gray-6);
129+
border-top: 1px solid var(--sl-color-gray-5);
130+
margin-top: 4rem;
131+
padding: 3rem 2rem 4rem;
132+
}
133+
134+
.footer-content {
135+
max-width: 1400px;
136+
margin: 0 auto;
137+
display: flex;
138+
gap: 4rem;
139+
}
140+
141+
.footer-left {
142+
flex-shrink: 0;
143+
min-width: 200px;
144+
}
145+
146+
.footer-logo {
147+
margin-bottom: 1.5rem;
148+
}
149+
150+
.footer-logo a {
151+
display: flex;
152+
align-items: center;
153+
gap: 0.75rem;
154+
text-decoration: none;
155+
}
156+
157+
.footer-logo img {
158+
height: 40px;
159+
width: auto;
160+
}
161+
162+
.footer-logo .logo-text {
163+
font-size: 1.5rem;
164+
font-weight: 700;
165+
color: var(--sl-color-white);
166+
}
167+
168+
.footer-logo .logo-dark {
169+
display: block;
170+
}
171+
172+
.footer-logo .logo-light {
173+
display: none;
174+
}
175+
176+
:global([data-theme='light']) .footer-logo .logo-dark {
177+
display: none;
178+
}
179+
180+
:global([data-theme='light']) .footer-logo .logo-light {
181+
display: block;
182+
}
183+
184+
.footer-social {
185+
display: flex;
186+
gap: 1rem;
187+
}
188+
189+
.footer-social a {
190+
color: var(--sl-color-gray-3);
191+
transition: color 0.2s ease;
192+
}
193+
194+
.footer-social a:hover {
195+
color: var(--sl-color-white);
196+
}
197+
198+
.footer-demo {
199+
margin-top: 1.5rem;
200+
}
201+
202+
.footer-right {
203+
flex: 1;
204+
display: grid;
205+
grid-template-columns: repeat(5, 1fr);
206+
gap: 2rem;
207+
}
208+
209+
.footer-column h3 {
210+
color: var(--sl-color-white);
211+
font-size: 0.95rem;
212+
font-weight: 600;
213+
margin-bottom: 1rem;
214+
}
215+
216+
.footer-column ul {
217+
list-style: none;
218+
padding: 0;
219+
margin: 0;
220+
}
221+
222+
.footer-column li {
223+
margin-bottom: 0.6rem;
224+
}
225+
226+
.footer-column a {
227+
color: var(--sl-color-gray-3);
228+
text-decoration: none;
229+
font-size: 0.875rem;
230+
transition: color 0.2s ease;
231+
}
232+
233+
.footer-column a:hover {
234+
color: var(--sl-color-white);
235+
}
236+
237+
@media (max-width: 1100px) {
238+
.footer-content {
239+
flex-direction: column;
240+
gap: 3rem;
241+
}
242+
243+
.footer-right {
244+
grid-template-columns: repeat(3, 1fr);
245+
}
246+
}
247+
248+
@media (max-width: 768px) {
249+
.footer-right {
250+
grid-template-columns: repeat(2, 1fr);
251+
}
252+
}
253+
254+
@media (max-width: 480px) {
255+
.footer-right {
256+
grid-template-columns: 1fr;
257+
}
258+
}
259+
</style>

0 commit comments

Comments
 (0)