From cd334a56c10421bd3069d4867a3c1d3dcd67e6b6 Mon Sep 17 00:00:00 2001 From: lade6501 Date: Sat, 23 Nov 2024 23:17:11 +0530 Subject: [PATCH] feat : Added scroll to top feature --- website3.0/components/ScrollToTop.js | 48 ++++++++++++++++++++++++++++ website3.0/src/app/layout.js | 45 +++++++++++++++----------- 2 files changed, 74 insertions(+), 19 deletions(-) create mode 100644 website3.0/components/ScrollToTop.js diff --git a/website3.0/components/ScrollToTop.js b/website3.0/components/ScrollToTop.js new file mode 100644 index 00000000..8d52df6c --- /dev/null +++ b/website3.0/components/ScrollToTop.js @@ -0,0 +1,48 @@ +"use client"; +import { Context } from "@context/store"; +import React, { useContext, useCallback, useEffect, useState } from "react"; +import { faArrowUp } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +function ScrollToTop() { + let { theme } = useContext(Context); + const [isVisible, setIsVisible] = useState(false); + + // Memoize the visibility toggle logic + const toggleVisibility = useCallback(() => { + if (window.scrollY > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }, []); + + useEffect(() => { + window.addEventListener("scroll", toggleVisibility); + return () => window.removeEventListener("scroll", toggleVisibility); + }, [toggleVisibility]); + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + + if (!isVisible) { + return null; + } + + return ( + + ); +} + +export default ScrollToTop; diff --git a/website3.0/src/app/layout.js b/website3.0/src/app/layout.js index d9c5f90d..1b61a84c 100644 --- a/website3.0/src/app/layout.js +++ b/website3.0/src/app/layout.js @@ -7,6 +7,7 @@ import Authprovider from "@components/auth/Authprovider"; import { NextAuthProvider } from "./provider"; import { GlobalContext } from "@context/store"; import React from "react"; +import ScrollToTop from "@components/ScrollToTop"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { @@ -23,18 +24,20 @@ export const metadata = { { size: "32x32", href: "/HelpOps-H Fevicon-32.webp" }, { size: "16x16", href: "/HelpOps-H Fevicon-16.webp" }, ], - }, /* Keywords and other details for SEO Optimization purpose */ - keywords: "DevOps, HelpOps, DevOps Support, DevOps Hub, Helpops Hub, DevOps Resources, DevOps Tutorials, DevOps Tools, DevOps Best Practices, Continuous Integration, Continuous Delivery, CI/CD, Infrastructure as Code, IaC, DevOps Automation, DevOps Monitoring, dev ops, dev ops what is, devops tools, dev ops pipeline, devops technologies, cloud devops, dev ops projects, learn devops, devops practices, dev ops team, devops support, devops journey, it dev ops, devops trends, devops community, devops guidelines, challenges with devops, challenges in devops, what is devops, devops meaning, devops azure, devops aws, azure devops pipeline, aws devops, devops blogs, devops benefits, devops basics, devops best practices, branching strategy in devops, build tools in devops, devops ci/cd, ci cd devops, copilot azure devops, devops definition, devops tools, devops full form, DevOps deployment, DevOps integration, DevOps security, DevOps metrics, DevOps efficiency, how to use devops, where to use devops, what is devops, what is helpopshub, about helpopshub, contact helpopshub, azfar alam, helpops team, helpopshub contact, helpops contact, helpopshub team, devops discussions, helpopshub discussions, devops arsenal, helpopshub opensource, devops issues, solve devops, trends in devops, devops trends, innovations in devops, devops technologies, technologies in devops, technologies of devops, azfar alam devops, azfar alam developer, azfar alam devops engineer, devoops engineer", + } /* Keywords and other details for SEO Optimization purpose */, + keywords: + "DevOps, HelpOps, DevOps Support, DevOps Hub, Helpops Hub, DevOps Resources, DevOps Tutorials, DevOps Tools, DevOps Best Practices, Continuous Integration, Continuous Delivery, CI/CD, Infrastructure as Code, IaC, DevOps Automation, DevOps Monitoring, dev ops, dev ops what is, devops tools, dev ops pipeline, devops technologies, cloud devops, dev ops projects, learn devops, devops practices, dev ops team, devops support, devops journey, it dev ops, devops trends, devops community, devops guidelines, challenges with devops, challenges in devops, what is devops, devops meaning, devops azure, devops aws, azure devops pipeline, aws devops, devops blogs, devops benefits, devops basics, devops best practices, branching strategy in devops, build tools in devops, devops ci/cd, ci cd devops, copilot azure devops, devops definition, devops tools, devops full form, DevOps deployment, DevOps integration, DevOps security, DevOps metrics, DevOps efficiency, how to use devops, where to use devops, what is devops, what is helpopshub, about helpopshub, contact helpopshub, azfar alam, helpops team, helpopshub contact, helpops contact, helpopshub team, devops discussions, helpopshub discussions, devops arsenal, helpopshub opensource, devops issues, solve devops, trends in devops, devops trends, innovations in devops, devops technologies, technologies in devops, technologies of devops, azfar alam devops, azfar alam developer, azfar alam devops engineer, devoops engineer", author: "Azfar Alam", - openGraph: { /* Details to display when website is shared */ - type: "website", + openGraph: { + /* Details to display when website is shared */ type: "website", url: "https://helpopshub.com", title: "Helpops-Hub", description: "Ensuring You Never Get Stuck In DevOps Again!", site_name: "Helpops-Hub", locale: "en_US", }, - twitter: { /* Details to display when website shared on twitter (now X) */ + twitter: { + /* Details to display when website shared on twitter (now X) */ card: "summary_large_image", url: "https://helpopshub.com", title: "Helpops-Hub", @@ -45,23 +48,27 @@ export const metadata = { export default function RootLayout({ children }) { return ( - + -
-
- - - - - -
- {children} -