Skip to content

feat: replace inline author chat sticker with PageFrame component #393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

feat: replace inline author chat sticker with PageFrame component #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 1 addition & 23 deletions pkgs/website/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,29 +121,6 @@ export default defineConfig({
content: 'website',
},
},
{
tag: 'script',
content: `
document.addEventListener('DOMContentLoaded', function() {
if (!window.location.pathname.startsWith('/author')) {
const sticker = document.createElement('a');
sticker.href = '/author/';
sticker.className = 'hire-sticker';
sticker.textContent = 'Chat with Author';
document.body.appendChild(sticker);

// Trigger one-time attention nudge after 5 seconds
setTimeout(function() {
sticker.classList.add('nudge');
// Remove the class after animation completes
setTimeout(function() {
sticker.classList.remove('nudge');
}, 800);
}, 5000);
}
});
`,
},
],
plugins: [
starlightBlog({
Expand Down Expand Up @@ -468,6 +445,7 @@ export default defineConfig({
],
components: {
Hero: './src/components/ConditionalHero.astro',
PageFrame: './src/components/PageFrame.astro',
},
}),
robotsTxt({
Expand Down
5 changes: 5 additions & 0 deletions pkgs/website/src/assets/quote-left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions pkgs/website/src/assets/quote-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 29 additions & 3 deletions pkgs/website/src/components/CodeOverlay.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,7 @@
setTimeout(() => {
const resetButton = document.querySelector('.reset-overlay-button') as HTMLElement;
if (resetButton) resetButton.style.display = 'block';
}, 2000);
}, 1700);
});
};

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

button.addEventListener('click', () => {
// Cancel any ongoing scroll animation
if (isAnimating) {
isAnimating = false;
if (scrollAnimationFrame) {
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = null;
}
}

// Show the reset overlay button immediately
const resetButton = document.querySelector('.reset-overlay-button') as HTMLElement;
if (resetButton) {
resetButton.style.display = 'block';
}

// Mark as programmatic scroll to avoid tracking
isProgrammaticScroll = true;

// Scroll to top smoothly
scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });

// Reset flag after scroll completes
Expand All @@ -463,22 +480,31 @@

// Cancel any ongoing animation
isAnimating = false;
isProgrammaticScroll = false; // Reset programmatic flag
if (scrollAnimationFrame) {
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = null;
}

// Mark as programmatic scroll to avoid tracking
isProgrammaticScroll = true;

// Scroll to top smoothly
scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });

// Reset to initial state
overlay.classList.remove('hidden');
overlay.style.opacity = '1';
scrollableContainer.classList.remove('scrollable-enabled');
scrollableInner.scrollTop = 0;
button.style.display = 'none';
if (scrollTopButton) {
scrollTopButton.style.display = 'none';
}

// Reset flag after scroll completes
setTimeout(() => {
isProgrammaticScroll = false;
}, 1000);

// Note: hasTrackedManualScroll is NOT reset here
// This means we track manual scroll only once per page session,
// even if user reveals, resets, and reveals again
Expand Down
5 changes: 3 additions & 2 deletions pkgs/website/src/components/HeroWithSlot.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
order: 2;
justify-content: center;
}

.stack {
order: 1;
flex-direction: column;
Expand Down Expand Up @@ -93,7 +93,8 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
.hero {
grid-template-columns: 4fr 5fr;
gap: 3%;
padding-block: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
padding-top: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
padding-bottom: 0;
}

.hero > .hero-html {
Expand Down
259 changes: 259 additions & 0 deletions pkgs/website/src/components/PageFrame.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/PageFrame.astro';
import { LinkButton } from '@astrojs/starlight/components';

const isAuthorPage = Astro.url.pathname.startsWith('/author');
const isLandingPage = Astro.url.pathname === '/';
const showFooter = isLandingPage || isAuthorPage;
---

<Default {...Astro.props}>
<slot slot="header" name="header" />
<slot slot="sidebar" name="sidebar" />
<slot />
</Default>

{!isAuthorPage && (
<a href="/author/" class="hire-sticker">
Chat with Author
</a>
)}

{showFooter && (
<footer class="site-footer">
<div class="footer-content">
<div class="footer-left">
<div class="footer-logo">
<a href="/">
<img src="/src/assets/pgflow-logo-dark.svg" alt="" class="logo-dark" />
<img src="/src/assets/pgflow-logo-light.svg" alt="" class="logo-light" />
<span class="logo-text">pgflow</span>
</a>
</div>
<div class="footer-social">
<a href="https://github.com/pgflow-dev/pgflow" aria-label="GitHub" target="_blank" rel="noopener">
<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>
</a>
<a href="https://discord.gg/pgflow" aria-label="Discord" target="_blank" rel="noopener">
<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>
</a>
<a href="https://x.com/pgflow_dev" aria-label="Twitter" target="_blank" rel="noopener">
<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>
</a>
<a href="mailto:hello@pgflow.dev" aria-label="Email" target="_blank" rel="noopener">
<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>
</a>
<a href="/news/rss.xml" aria-label="RSS Feed" target="_blank" rel="noopener">
<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>
</a>
</div>
<div class="footer-demo">
<LinkButton href="https://demo.pgflow.dev" variant="primary" icon="rocket">
Try Demo
</LinkButton>
</div>
</div>

<div class="footer-right">
<div class="footer-column">
<h3>Get Started</h3>
<ul>
<li><a href="/get-started/installation/">Installation</a></li>
<li><a href="/get-started/flows/create-flow/">Create Flow</a></li>
<li><a href="/get-started/flows/compile-flow/">Compile Flow</a></li>
<li><a href="/get-started/flows/run-flow/">Run Flow</a></li>
<li><a href="/project-status/">Project Status</a></li>
<li><a href="/get-started/faq/">FAQ</a></li>
</ul>
</div>

<div class="footer-column">
<h3>Build</h3>
<ul>
<li><a href="/build/starting-flows/">Starting Flows</a></li>
<li><a href="/build/retrying-steps/">Retrying Steps</a></li>
<li><a href="/build/process-arrays-in-parallel/">Process Arrays</a></li>
<li><a href="/build/create-reusable-tasks/">Reusable Tasks</a></li>
<li><a href="/build/organize-flow-code/">Organize Code</a></li>
<li><a href="/build/delaying-steps/">Delaying Steps</a></li>
<li><a href="/build/version-flows/">Version Flows</a></li>
</ul>
</div>

<div class="footer-column">
<h3>Deploy</h3>
<ul>
<li><a href="/deploy/supabase/deploy-first-flow/">Deploy to Supabase</a></li>
<li><a href="/deploy/monitor-execution/">Monitor Execution</a></li>
<li><a href="/deploy/supabase/keep-workers-running/">Keep Workers Running</a></li>
<li><a href="/deploy/supabase/update-deployed-flows/">Update Deployed Flows</a></li>
<li><a href="/deploy/update-pgflow/">Update pgflow</a></li>
<li><a href="/deploy/tune-flow-config/">Tune Flows</a></li>
<li><a href="/deploy/prune-records/">Prune Records</a></li>
</ul>
</div>

<div class="footer-column">
<h3>Learn</h3>
<ul>
<li><a href="/concepts/how-pgflow-works/">How pgflow Works</a></li>
<li><a href="/concepts/three-layer-architecture/">Three-Layer Architecture</a></li>
<li><a href="/concepts/understanding-flows/">Understanding Flows</a></li>
<li><a href="/concepts/map-steps/">Map Steps</a></li>
<li><a href="/tutorials/ai-web-scraper/">AI Web Scraper Tutorial</a></li>
<li><a href="/comparisons/">Comparisons</a></li>
</ul>
</div>

<div class="footer-column">
<h3>Reference</h3>
<ul>
<li><a href="/reference/">API Overview</a></li>
<li><a href="/reference/pgflow-client/">@pgflow/client API</a></li>
<li><a href="/reference/context/">Context API</a></li>
<li><a href="/reference/compile-api/">Compile API</a></li>
<li><a href="/reference/configuration/">Configuration</a></li>
<li><a href="/reference/permissions/">Permissions</a></li>
</ul>
</div>
</div>
</div>
</footer>
)}

<style>
.site-footer {
width: 100%;
background: var(--sl-color-gray-6);
border-top: 1px solid var(--sl-color-gray-5);
margin-top: 4rem;
padding: 3rem 2rem 4rem;
}

.footer-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: 4rem;
}

.footer-left {
flex-shrink: 0;
min-width: 200px;
}

.footer-logo {
margin-bottom: 1.5rem;
}

.footer-logo a {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}

.footer-logo img {
height: 40px;
width: auto;
}

.footer-logo .logo-text {
font-size: 1.5rem;
font-weight: 700;
color: var(--sl-color-white);
}

.footer-logo .logo-dark {
display: block;
}

.footer-logo .logo-light {
display: none;
}

:global([data-theme='light']) .footer-logo .logo-dark {
display: none;
}

:global([data-theme='light']) .footer-logo .logo-light {
display: block;
}

.footer-social {
display: flex;
gap: 1rem;
}

.footer-social a {
color: var(--sl-color-gray-3);
transition: color 0.2s ease;
}

.footer-social a:hover {
color: var(--sl-color-white);
}

.footer-demo {
margin-top: 1.5rem;
}

.footer-right {
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
}

.footer-column h3 {
color: var(--sl-color-white);
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
}

.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-column li {
margin-bottom: 0.6rem;
}

.footer-column a {
color: var(--sl-color-gray-3);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}

.footer-column a:hover {
color: var(--sl-color-white);
}

@media (max-width: 1100px) {
.footer-content {
flex-direction: column;
gap: 3rem;
}

.footer-right {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.footer-right {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.footer-right {
grid-template-columns: 1fr;
}
}
</style>
Loading