Workspace test: Add 'Back to Top' button across all pages

open-sauced / landing-page

This is the new landing page for open sauced

https://opensauced.pizza

30 stars 28 forks source link

Closed bdougie closed 3 months ago

bdougie commented 3 months ago

Related to #272

Implements a 'Back to Top' button in the PageLayout component to enhance user navigation across all pages.

Adds state management and a scroll event listener to display the button when the user scrolls down more than 300 pixels.
Implements a scrollToTop function that smoothly scrolls the user back to the top of the page when the button is clicked.
Styles the button with Tailwind CSS classes for consistency with the site's design, positioning it fixed at the bottom-right corner of the viewport.

For more details, open the Copilot Workspace session.

netlify[bot] commented 3 months ago

Name	Link
Latest commit	202936fbca423e7a13820985bd49782c9f6f3054
Latest deploy log	https://app.netlify.com/sites/opensauced-landing/deploys/6646e2c314eca50008e31885
Deploy Preview	https://deploy-preview-275--opensauced-landing.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 91 (no change from production) Best Practices: 92 (no change from production) SEO: 83 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

bdougie commented 3 months ago

Do we want to move the product hunt badge so it doesn't overlap?

I am actually going to close this. Just wanted to test Copilot Workspaces. I don't think this is needed on every page, just blog posts.

bdougie commented 3 months ago

Replaces the 'Back to Top' button with a link and removes scroll handling logic in PageLayout component.

Removes useState, useEffect, and the scrollToTop function, simplifying the component by eliminating scroll event listeners and state management for showing the button.
Introduces a direct link to #top using an anchor tag, enabling native browser handling for smooth scrolling back to the top of the page without custom JavaScript logic.

For more details, open the Copilot Workspace session.

bdougie commented 3 months ago

So I was surprise how close this got to being successful in a one shot prompt. I guess I am mostly just testing out Copliot Workspaces, but after copying @nickytonline's suggestion wholesell into the prompt and getting this commit https://github.com/open-sauced/landing-page/pull/275/commits/bab3c96097b783f9b80a5bff9bf118644defb9d8, makes me want to move this PR forward.

bdougie commented 3 months ago

Implements CSS-only visibility control for the "Back to Top" button based on page scroll.

Adds an id attribute to the main container in PageLayout.tsx to target it for the CSS scroll effect.
Modifies the "Back to Top" button's class to include a CSS class for scroll visibility control.
Updates globals.css with rules to hide the "Back to Top" button by default and to animate its visibility based on page scroll using @keyframes and the :target pseudo-class.

For more details, open the Copilot Workspace session.

bdougie commented 3 months ago

Closing for now. I don't think this is priority and there is still some clean up needed to make this work in CSS.