Skip to content

Commit

Permalink
Merge pull request #174 from albugowy15/preview-dev
Browse files Browse the repository at this point in the history 
Preview dev
  • Loading branch information
@albugowy15
albugowy15 authored Jan 22, 2023
2 parents 86f97d5 + 9797e67 commit 8981120
Show file tree
Hide file tree
Showing 14 changed files with 662 additions and 374 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-use-scrollspy": "^3.1.1",
"reading-time": "^1.5.0",
"rehype": "^12.0.1",
"rehype-code-titles": "^1.1.0",
Expand Down
30 changes: 15 additions & 15 deletions public/sitemap.xml
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://www.bughowi.com</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/about</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/build-react-form-with-react-hook-form-and-yup</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/create-blog-with-mdx-contentlayer</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/nextjs-key-features</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/simple-toc-in-mdx</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/typescript-fundamentals</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/usecontext-and-redux</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/bughowi-com</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/jamjiwa</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/jelata</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/netflix-clone</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/nextjs-blog</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/about</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/build-react-form-with-react-hook-form-and-yup</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/create-blog-with-mdx-contentlayer</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/nextjs-key-features</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/simple-toc-in-mdx</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/typescript-fundamentals</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/blog/usecontext-and-redux</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/bughowi-com</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/jamjiwa</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/jelata</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/netflix-clone</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.bughowi.com/projects/nextjs-blog</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>
195 changes: 125 additions & 70 deletions src/components/layout/partials/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,40 @@ import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import pp from "@assets/profile-picture.png";
import clsx from "clsx";
import { BsGithub, BsLinkedin, BsTwitter } from "react-icons/bs";
import { AiFillCaretDown } from "react-icons/ai";

const Navbar = () => {
const [onTop, setOnTop] = useState(true);
const [showDropdown, setShowDropdown] = useState(false);
const router = useRouter();

function handleScroll() {
if (onTop !== (window.scrollY === 0)) {
setOnTop(window.scrollY === 0);
setOnTop(window.scrollY == 0);
}
console.log(onTop);
}

useEffect(() => {
window.addEventListener("scroll", handleScroll);
console.log(onTop);
return () => {
window.removeEventListener("scroll", handleScroll);
};
});

return (
<nav className="p-1 w-full sticky top-0 z-50">
<nav
className={clsx("p-1 w-full sticky top-0 z-50 bg-darkPrimary/70", {
"backdrop-filter backdrop-blur-lg border-b border-slate-500/40": !onTop,
})}
>
<div className="container 2xl:max-w-7xl px-3 xl:px-14 mx-auto">
<div
className={`${
onTop
? ""
: "bg-darkPrimary bg-opacity-50 backdrop-filter backdrop-blur-lg shadow-black/60 shadow-md rounded-md"
} px-3`}
>
{/* Navbar on large screen */}
<div className="flex justify-between items-center py-2">
{/* Navbar on large screen */}
<div className="flex items-center justify-between py-2">
<div className="flex items-center w-full justify-between sm:justify-start sm:gap-4">
<Link href="/">
<div className="flex items-center justify-start gap-2 cursor-pointer">
<div className="relative overflow-hidden rounded-full p-4 border-[3px] border-blueAccent object-cover">
Expand All @@ -46,73 +50,124 @@ const Navbar = () => {
</div>
</div>
</Link>

<div className="flex justify-end items-center">
<ul className="flex justify-around gap-1 items-center">
<li>
<Link href="/">
<p
className={`${
router.pathname === "/"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
<ul className="flex text-sm sm:text-base gap-1 items-center">
<li>
<Link href="/blog">
<p
className={`${
router.pathname === "/blog" ||
router.pathname === "/blog/[slug]"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
`}
>
Home
</p>
</Link>
</li>
<li>
<Link href="/blog">
<p
className={`${
router.pathname === "/blog" ||
router.pathname === "/blog/[slug]"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
>
Blog
</p>
</Link>
</li>
<li>
<Link href="/projects">
<p
className={`${
router.pathname === "/projects" ||
router.pathname === "/projects/[slug]"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
`}
>
Blog
</p>
</Link>
</li>
<li>
<Link href="/projects">
<p
className={`${
router.pathname === "/projects" ||
router.pathname === "/projects/[slug]"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
>
Projects
</p>
</Link>
</li>
<li>
<Link href="/about">
<p
className={`${
router.pathname === "/about"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
`}
>
About
</p>
</Link>
</li>
<li className="sm:hidden relative">
<div
className="font-bold cursor-pointer px-1.5 py-0.5 bg-darkSecondary rounded-md flex items-center gap-1 text-blue-400"
onClick={() => setShowDropdown(!showDropdown)}
>
Connect <AiFillCaretDown />
</div>
{showDropdown && (
<div className="absolute flex mt-2 flex-col gap-1 rounded-lg bg-darkSecondary p-2 z-50 right-0 shadow-md shadow-slate-800">
<a
className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
href="https://github.com/albugowy15"
target="_blank"
rel="noreferrer"
>
Projects
</p>
</Link>
</li>
<li>
<Link href="/about">
<p
className={`${
router.pathname === "/about"
? "text-blue-400 bg-darkSecondary/60 rounded"
: ""
}
font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
`}
<div className="p-1.5 bg-blueAccent/70 rounded-lg">
<BsGithub />
</div>
<p className="font-semibold">albugowy15</p>
</a>
<a
className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
href="https://twitter.com/bughowy"
target="_blank"
rel="noreferrer"
>
<div className="p-1.5 bg-blueAccent/70 rounded-lg">
<BsTwitter />
</div>
<p className="font-semibold">bughowy</p>
</a>
<a
className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
href="https://linkedin.com/in/bughowi"
target="_blank"
rel="noreferrer"
>
About
</p>
</Link>
</li>
</ul>
</div>
<div className="p-1.5 bg-blueAccent/70 rounded-lg">
<BsLinkedin />
</div>
<p className="font-semibold">bughowi</p>
</a>
</div>
)}
</li>
</ul>
</div>

<div className="sm:flex items-center gap-4 hidden">
<BsGithub
className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
size={20}
onClick={() =>
window.open("https://github.com/albugowy15", "_blank")
}
/>
<BsTwitter
className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
size={20}
onClick={() =>
window.open("https://twitter.com/bughowy", "_blank")
}
/>
<BsLinkedin
className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
onClick={() =>
window.open("https://linkedin.com/in/bughowi", "_blank")
}
size={20}
/>
</div>
</div>
</div>
Expand Down
94 changes: 56 additions & 38 deletions src/components/layout/partials/Subscribe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,65 @@ import { useSubscribeToNewsletter } from "@utils/form";
import SocialMedia from "./SocialMedia";

const Subscribe = () => {
const { form, subscribe, inputEl } = useSubscribeToNewsletter();
const { form, subscribe, inputEl } = useSubscribeToNewsletter();

return (
<footer className='mx-auto p-5 w-full'>
<div className='bg-darkSecondary w-full max-w-xl rounded border border-gray-700 p-5 mx-auto'>
<p className='font-bold text-lg'>Subscribe to the newsletter</p>
return (
<footer className="mx-auto p-5 w-full">
<div className="bg-darkSecondary w-full max-w-xl rounded border border-gray-700 p-5 mx-auto">
<p className="font-bold text-lg">Subscribe to the newsletter</p>

<p className='py-1'>Get emails from me about web development, android, tech, and early access to new articles.</p>
<form onSubmit={subscribe} className='w-full mx-auto mt-1' method='post' target='_blank'>
<div className='flex flex-wrap w-full items-center justify-center gap-2'>
<input
type='email'
ref={inputEl}
id='email'
className='flex-auto bg-darkPrimary border border-darkSecondary text-slate-400 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block p-2'
placeholder='[email protected]'
required
/>
<button type='submit' className='flex-1 w-28 p-1.5 text-center text-slate-200 bg-blueAccent rounded font-bold hover:bg-blue-500 transition-colors'>
{form.state === Form.Loading ? <span>Loading...</span> : "Subscribe"}
</button>
</div>
<p className="py-1">
Get emails from me about web development, programming, tech, and early
access to new articles.
</p>
<form
onSubmit={subscribe}
className="w-full mx-auto mt-1"
method="post"
target="_blank"
>
<div className="flex flex-wrap w-full items-center justify-center gap-2">
<input
type="email"
ref={inputEl}
id="email"
className="flex-auto bg-darkPrimary border border-darkSecondary text-slate-400 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block p-2"
placeholder="[email protected]"
required
/>
<button
type="submit"
className="flex-1 w-28 p-1.5 text-center text-slate-200 bg-blueAccent rounded font-bold hover:bg-blue-500 transition-colors"
>
{form.state === Form.Loading ? (
<span>Loading...</span>
) : (
"Subscribe"
)}
</button>
</div>

{form.state === Form.Success ? (
<div className='mt-4'>
<span className='font-bold text-green-600'>
<span>&#128522;</span> Thank you for subscribing my newsletters
</span>
</div>
) : (
<span></span>
)}
</form>
</div>
<p className='text-center mt-8'>Find Me!</p>
<SocialMedia />
<div>
<p className='text-center text-xs mt-8 opacity-60'>&copy; 2022 bughowi.com - Built with Next.js, Tailwind, Contentlayer, Vercel</p>
</div>
</footer>
);
{form.state === Form.Success ? (
<div className="mt-4">
<span className="font-bold text-green-600">
<span>&#128522;</span> Thank you for subscribing my newsletters
</span>
</div>
) : (
<span></span>
)}
</form>
</div>
<p className="text-center mt-8">Find Me!</p>
<SocialMedia />
<div>
<p className="text-center text-xs mt-8 opacity-60">
&copy; 2022 bughowi.com - Built with Next.js, Tailwind, Contentlayer,
Vercel
</p>
</div>
</footer>
);
};

export default Subscribe;
Loading

1 comment on commit 8981120

@vercel
Copy link

@vercel vercel bot commented on 8981120 Jan 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bughowi-com – ./

www.bughowi.com
bughowi-com-albugowy15.vercel.app
bughowi-com-git-main-albugowy15.vercel.app
bughowi.com

Please sign in to comment.