Skip to content

Fixed Load More Posts and Introduced Dark Mode on Keploy Blogs Website #148

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed Load More Posts and Introduced Dark Mode on Keploy Blogs Website #148

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
32 changes: 32 additions & 0 deletions components/DarkModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// components/DarkModeToggle.tsx
import { useEffect, useState } from "react";

export default function DarkModeToggle() {
const [dark, setDark] = useState(false);

useEffect(() => {
const isDark = localStorage.theme === "dark";
setDark(isDark);
document.documentElement.classList.toggle("dark", isDark);
}, []);

const toggleDark = () => {
const newDark = !dark;
setDark(newDark);
document.documentElement.classList.toggle("dark", newDark);
localStorage.theme = newDark ? "dark" : "light";
};

return (
<button
onClick={toggleDark}
className="p-2 rounded-lg transition-colors"
style={{
background: 'var(--card)',
color: 'var(--text)'
}}
>
{dark ? "🌙" : "☀️"}
</button>
);
}
192 changes: 101 additions & 91 deletions components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import sideBySideSvg from "../public/images/sidebyside-transparent.svg"
import sideBySideSvg from "../public/images/sidebyside-transparent.svg";
import { SpringValue, animated } from "@react-spring/web";
import DarkModeToggle from "./DarkModeToggle";

const menuItems = [
{ text: "Docs", link: "https://keploy.io/docs" },
{ text: "Tech Blogs", link: "/technology" },
{ text: "Community Articles", link: "/community" },
];

const formatStars = (num: number) =>
Intl.NumberFormat('en-US', {
notation: "compact",
maximumFractionDigits: 1,
}).format(num);
Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1,
}).format(num);

const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
if (mobile) {
return (
<Link
href="https://app.keploy.io/signin"
className="inline-flex items-center py-2 px-4 rounded text-gray-200 bg-[#00163d] font-semibold ml-3"
className="inline-flex items-center py-2 px-4 rounded text-gray-200 bg-[#00163d] font-semibold ml-3"
>
<span>Sign In</span>
<svg
Expand All @@ -40,7 +42,7 @@ const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
return (
<Link
href="https://app.keploy.io/signin"
className="inline-flex py-2 px-4 rounded leading-[1.375rem] text-gray-200 bg-[#00163d] hover:text-primary-300 ml-3"
className="inline-flex py-2 px-4 rounded leading-[1.375rem] text-gray-200 bg-[#00163d] hover:text-primary-300 ml-3"
>
<span>Sign In</span>
</Link>
Expand Down Expand Up @@ -97,7 +99,7 @@ const GithubBtn = () => {
const MenuBtn = () => {
return (
<svg
className="w-6 h-6 text-gray-900 fill-current"
className="w-6 h-6 text-gray-900 fill-current dark:text-white"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -114,97 +116,105 @@ export default function Header({
readProgress?: SpringValue<number>;
}) {
const [toggleMenu, setToggleMenu] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);

const toggleMenuHandler = () => {
setToggleMenu((prev) => !prev);
};

useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

return (
<div className="h-32 md:h-40">
<header className="fixed z-30 w-full transition duration-300 ease-in-out bg-neutral-100 md:bg-opacity-90 ">
<div className="max-w-6xl px-5 mx-auto sm:px-6">
<div className="flex items-center justify-between h-16 md:h-20">
<div className="flex-grow-0 w-2/12 mr-4 shrink-0">
<Link href={"https://keploy.io/"}>
<Image
src={sideBySideSvg}
alt="Keploy Logo"
className="w-auto h-10"
/>
</Link>
</div>
<nav className="flex-grow-0 hidden w-6/12 lg:flex ">
<ul className="flex flex-wrap items-center justify-end grow">
{menuItems.map((item, index) => {
return (
<li key={index}>
<Link
href={item.link}
className="flex items-center flex-grow-0 px-5 py-3 font-medium text-gray-600 transition duration-150 ease-in-out hover:text-primary-300 lg:flex"
>
{item.text}
</Link>
</li>
);
})}
</ul>
</nav>

<div className="justify-end flex-1 hidden header-btn-container lg:flex">
<GithubBtn />
<WaitListBtn />
</div>
<div className="flex lg:hidden">
<button
onClick={toggleMenuHandler}
className={toggleMenu ? "hamburger active" : "hamburger "}
>
<span className="sr-only">Menu</span>
<MenuBtn />
{/* <img src="/blog/images/Menu.svg" className="w-6 h-6"></img> */}
</button>
<div>
{toggleMenu ? (
<nav className="absolute left-0 z-20 flex-grow-0 w-full h-screen pb-16 overflow-scroll translate-y-0 bg-white opacity-100 top-full">
<ul className="px-5 py-2">
<li>
<GithubBtn />
</li>
{menuItems.map((item, index) => {
return (
<li key={index}>
<Link
href={item.link}
className="flex items-center px-5 py-3 font-medium text-gray-600 transition duration-150 ease-in-out hover:text-primary-300"
>
{item.text}
</Link>
</li>
);
})}
<li>
<WaitListBtn mobile={true} />
</li>
</ul>
</nav>
) : null}
</div>
</div>
<header className="fixed top-0 z-30 w-full bg-white shadow-md dark:bg-gray-900 dark:border-b dark:border-gray-700">
<div className="max-w-6xl px-5 mx-auto sm:px-6">
<div className="flex items-center justify-between h-16 md:h-20">
<div className="flex-grow-0 w-2/12 mr-4 shrink-0">
<Link href={"https://keploy.io/"}>
<Image
src={sideBySideSvg}
alt="Keploy Logo"
className="w-auto h-10"
/>
</Link>
</div>
</div>
{readProgress && (
<div className="relative h-1">
<animated.div
className="h-full rounded-r-full bg-gradient-to-r from-orange-500 to-yellow-500"
style={{
width: readProgress.to((v) => v + "%"),
}}

<nav className="flex-grow-0 hidden w-6/12 lg:flex">
<ul className="flex flex-wrap items-center justify-end grow">
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.link}
className="flex items-center flex-grow-0 px-5 py-3 font-medium transition duration-150 ease-in-out text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"
>
{item.text}
</Link>
</li>
))}
</ul>
</nav>

<div className="justify-end flex-1 hidden header-btn-container lg:flex items-center space-x-4">
<GithubBtn />
<WaitListBtn />
<DarkModeToggle />
</div>

<div className="flex lg:hidden">
<button
onClick={toggleMenuHandler}
className={`hamburger ml-4 ${toggleMenu ? "active" : ""}`}
>
</animated.div>
<div className="absolute top-0 w-full h-full bg-gray-300 -z-10"></div>
<span className="sr-only">Menu</span>
<MenuBtn />
</button>
</div>
)}
</header>
</div>
</div>
</div>

{toggleMenu && (
<nav className="absolute left-0 z-20 w-full pb-4 bg-white shadow-lg dark:bg-gray-900 top-full">
<ul className="px-5 py-2 space-y-4">
<li>
<GithubBtn />
</li>
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.link}
className="flex items-center px-5 py-3 font-medium transition duration-150 ease-in-out text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"
>
{item.text}
</Link>
</li>
))}
<li>
<WaitListBtn mobile={true} />
</li>
<li className="px-5">
<DarkModeToggle />
</li>
</ul>
</nav>
)}

{readProgress && (
<div className="relative h-1">
<animated.div
className="h-full rounded-r-full bg-gradient-to-r from-orange-500 to-yellow-500"
style={{
width: readProgress.to((v) => v + "%"),
}}
></animated.div>
<div className="absolute top-0 w-full h-full bg-gray-300 -z-10"></div>
</div>
)}
</header>
);
}

2 changes: 1 addition & 1 deletion components/hero-post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function HeroPost({

return (
<section>
<div className="relative bg-gray-100 border border-gray-300 px-8 py-8 rounded-md lg:grid lg:grid-cols-2 lg:gap-x-8 mb-20 md:mb-28 content-center lg:group transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)] overflow-hidden">
<div className="relative bg-gray-100 border border-gray-300 px-8 py-8 rounded-md lg:grid lg:grid-cols-2 lg:gap-x-8 mb-20 md:mb-28 content-center lg:group transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)] overflow-hidden card">
{/* Banner */}
<div className="absolute top-0 right-0 transform rotate-45 translate-x-[25%] translate-y-[90%] bg-orange-200 text-orange-800 text-[10px] font-bold py-0.5 w-[100px] flex justify-center items-center shadow-md">
Latest Blog
Expand Down
67 changes: 36 additions & 31 deletions components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { Post } from "../types/post";
import Alert from './alert'
import Footer from './footer'
import Meta from './meta'
import Alert from './alert';
import Footer from './footer';
import Meta from './meta';
import Script from 'next/script';
import { motion } from "framer-motion";
export default function Layout({ preview, children, featuredImage, Title, Description }:{
import Header from './header';

export default function Layout({
preview,
children,
featuredImage,
Title,
Description,
}: {
preview: any;
Description: any;
featuredImage: Post["featuredImage"]["node"]["sourceUrl"];
Expand All @@ -23,10 +31,12 @@ export default function Layout({ preview, children, featuredImage, Title, Descri
stiffness: 260,
damping: 20,
}}
className="min-h-screen"
className="min-h-screen bg-white text-black dark:bg-gray-900 dark:text-white transition-colors duration-500"
>
{/* <Alert preview={preview} /> */}
<main>{children}</main>
<Header />
<main className="pt-24 md:pt-28 px-4 sm:px-6 lg:px-8">
{children}
</main>
</motion.div>
<Footer />

Expand All @@ -44,8 +54,6 @@ export default function Layout({ preview, children, featuredImage, Title, Descri
}}
/>



<Script
id="msclarity"
type="text/javascript"
Expand All @@ -60,32 +68,28 @@ export default function Layout({ preview, children, featuredImage, Title, Descri
}}
/>

{/* publisher Script */}

<Script async type="application/javascript"
id="swg-basic"
src="https://news.google.com/swg/js/v1/swg-basic.js">
</Script>
id="swg-basic"
src="https://news.google.com/swg/js/v1/swg-basic.js">
</Script>

<Script
id="publisher"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(self.SWG_BASIC = self.SWG_BASIC || []).push( basicSubscriptions => {
basicSubscriptions.init({
type: "NewsArticle",
isPartOfType: ["Product"],
isPartOfProductId: "CAowz4a6DA:openaccess",
clientOptions: { theme: "light", lang: "en" },
});
<Script
id="publisher"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(self.SWG_BASIC = self.SWG_BASIC || []).push( basicSubscriptions => {
basicSubscriptions.init({
type: "NewsArticle",
isPartOfType: ["Product"],
isPartOfProductId: "CAowz4a6DA:openaccess",
clientOptions: { theme: "light", lang: "en" },
});
`,
}}
/>

});
`,
}}
/>

{/* Apollo Tracking Script */}
<Script
id="apollo-tracker"
type="text/javascript"
Expand All @@ -109,3 +113,4 @@ export default function Layout({ preview, children, featuredImage, Title, Descri
</>
);
}

Loading