feat: reading progress bar bigger

app/(web)/guides/page.tsx

@@ -21,7 +21,7 @@ export default function GuidesPage() {
       return compareDesc(new Date(a.date), new Date(b.date))
     })
   return (
-    <div className="px-3 py-6 lg:py-10">
+    <div className="px-3 py-6">
       <DocsPageHeader
         heading="Guides"
         text="Collector's guide into the visualize value ecosystem: checks, opepen"
@@ -43,7 +43,7 @@ export default function GuidesPage() {
                   <Icons.logo className="absolute -right-3 -top-3 fill-black text-white dark:fill-white dark:text-black" />
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img src={guide.image} alt={guide.title} className="h-4/5 w-full rounded-lg object-cover" />
-                  <div className="space-y-2">
+                  <div className="space-y-2 selection:dark:bg-white selection:dark:text-black">
                     <h3 className="text-2xl font-semibold tracking-tight">
                       {guide.title}
                     </h3>

app/(web)/page.tsx

@@ -26,7 +26,7 @@ import { GuideAuthors } from "@/components/guide-authors"
   )
 
                 return (
-                  <div className="px-3 py-6 lg:py-10">
+                  <div className="px-3 py-6">
 
                     <DocsPageHeader
                       heading="Checks Guide"
@@ -50,8 +50,8 @@ import { GuideAuthors } from "@/components/guide-authors"
                               <div className="flex flex-col justify-between space-y-4 pt-4">
                                 <Icons.logo className="absolute -right-3 -top-3 fill-black text-white" />
                                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                                <img src={guide.image} alt={guide.title} className="h-4/5 w-full rounded-lg object-cover" />
-                                <div className="space-y-2">
+                                <img src={guide.image} alt={guide.title} className="h-4/5 w-full select-none rounded-lg object-cover" />
+                                <div className="space-y-2 selection:dark:bg-white selection:dark:text-black">
                                   <h3 className="text-2xl font-semibold tracking-tight">
                                     {guide.title}
                                   </h3>

components/animated-skeleton.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import {motion} from "framer-motion"
-import { FileQuestion } from "lucide-react";
-import { CardTitle } from "./ui/card";
+
 import Image from "next/image"
 export const AnimatedSkeleton = ({}) => {
   return(
@@ -12,11 +11,9 @@ export const AnimatedSkeleton = ({}) => {
       animate={{ opacity: 1 }}
       transition={{ delay: 1 }}
     >
-      <Image alt="opepen-vvd" src="/images/guides/opepen/opepen-light.png"className="block dark:hidden"    width="512" height="512"/>
-      <Image alt="opepen-vvd" src="/images/guides/opepen/opepen-dark.png" className="hidden dark:block"  width="512" height="512"/>
-      <p className="text-3xl font-bold text-[#F4F3F8] dark:text-[#0B0B07] ">COMING SOON...</p>
-      {/* {children} */}
-      {/* <FileQuestion className="text-gray-200" size={48} /> */}
+      <Image alt="opepen-vvd" src="/images/guides/opepen/opepen-light.png"className="block selection:bg-black selection:text-white dark:hidden dark:border-white selection:dark:bg-transparent"    width="512" height="512"/>
+      <Image alt="opepen-vvd" src="/images/guides/opepen/opepen-dark.png" className="hidden selection:bg-black selection:text-white dark:block dark:border-white selection:dark:bg-transparent"  width="512" height="512"/>
+      <p className="text-3xl font-bold text-[#F4F3F8] selection:bg-black selection:text-white dark:border-white dark:text-[#0B0B07] selection:dark:bg-white selection:dark:text-black">COMING SOON...</p>
     </motion.div>
   )
 }

components/base-toggle.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { useTheme } from "next-themes"
+import { usePathname } from "next/navigation"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -14,33 +15,44 @@ import { Icons } from "@/components/icons"
 
 export function BaseToggle() {
   const { setTheme } = useTheme()
+  const pathname = usePathname()
+  console.log(pathname)
+  const isGuide = pathname.startsWith("/guides/")
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="h-8 w-8 px-0">
+        <Button
+          variant="ghost"
+          size="sm"
+          className={`h-8 w-8 px-0 ${isGuide ? "md:-mr-60 -pr-5 mt-10" : "mt-10"}`}
+        >
           <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" side="left" className="mt-4 flex-col rounded-md" sideOffset={10}>
+      <DropdownMenuContent
+        align="end"
+        side="left"
+        className="mt-8 flex-col rounded-md"
+        sideOffset={10}
+      >
         <div className="flex">
-
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Icons.sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Icons.moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Icons.laptop className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("light")}>
+            <Icons.sun className="mr-2 h-4 w-4" />
+            <span>Light</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("dark")}>
+            <Icons.moon className="mr-2 h-4 w-4" />
+            <span>Dark</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            <Icons.laptop className="mr-2 h-4 w-4" />
+            <span>System</span>
+          </DropdownMenuItem>
         </div>
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}

components/guide-authors.tsx

@@ -48,7 +48,7 @@ export function GuideAuthors({ authors, className }: GuideAuthorsProps) {
     <>
       {authors?.length ? (
         <motion.div
-          className={`group flex  cursor-pointer justify-between space-x-4 rounded-lg border-2 border-gray-100 shadow-[#60a5fa]   transition-all duration-300 hover:border-[#60a5fa] hover:bg-gray-50 hover:shadow-[#60a5fa] dark:border-gray-800 dark:shadow-[blue-500] dark:hover:bg-gray-900 ${className}`
+          className={`group flex  cursor-pointer justify-between space-x-4 rounded-lg border-2 border-gray-100 shadow-[#60a5fa]   transition-all duration-300 selection:bg-white hover:border-[#60a5fa] hover:bg-gray-50 hover:shadow-[#60a5fa] dark:border-gray-800 dark:shadow-[blue-500] dark:hover:bg-gray-900 ${className}`
           }
           variants={container}
           initial="hidden"
@@ -70,7 +70,7 @@ export function GuideAuthors({ authors, className }: GuideAuthorsProps) {
                         alt={author.title}
                         width={80}
                         height={80}
-                        className="rounded-full bg-white shadow-sm transition-all duration-300 hover:scale-105 group-hover:bg-gray-100 group-hover:shadow-md dark:bg-gray-800 dark:shadow-[blue-500] dark:group-hover:bg-gray-700"
+                        className="select-none rounded-full bg-white shadow-sm transition-all duration-300 hover:scale-105 group-hover:bg-gray-100 group-hover:shadow-md dark:bg-gray-800 dark:shadow-[blue-500] dark:group-hover:bg-gray-700"
                         variants={item}
                       />
                       <Icons.logo className="absolute bottom-3 left-16  h-6 w-6 fill-[#60a5fa] text-white" />
@@ -84,9 +84,9 @@ export function GuideAuthors({ authors, className }: GuideAuthorsProps) {
                         <Link
                           target="_blank"
                           href={`https://twitter.com/${author.twitter}`}
-                          className="flex items-center gap-1 rounded-full border-2 border-blue-400 px-2 py-0.5 text-xs font-semibold text-blue-400 transition-all duration-300 group-hover:bg-[#60a5fa] group-hover:text-white dark:text-gray-500"
+                          className="flex select-none items-center gap-1 rounded-full border-2 border-blue-400 px-2 py-0.5 text-xs font-semibold text-blue-400 transition-all duration-300 group-hover:bg-[#60a5fa] group-hover:text-white dark:text-gray-500"
                         >
-                          <Icons.twitter className="h-3 w-3 fill-blue-400  font-semibold text-blue-400 group-hover:fill-white group-hover:text-white" />
+                          <Icons.twitter className="h-3 w-3 select-none  fill-blue-400 font-semibold text-blue-400 group-hover:fill-white group-hover:text-white" />
                           @{author.twitter}
                         </Link>
                       </motion.div>
@@ -95,7 +95,7 @@ export function GuideAuthors({ authors, className }: GuideAuthorsProps) {
               </div>
             ) : null)}
             </div>
-                                          <TooltipContent sideOffset={7} side="bottom" className="flex select-none items-center gap-2">
+                                          <TooltipContent align={"start"} alignOffset={-15} sideOffset={7} side="bottom" className="flex select-none items-center gap-2">
                           <Icons.link className="h-4 w-4 text-gray-700 dark:fill-gray-800" />
                           Go to {authors[0].title}&apos;s Twitter
                           <TooltipArrow className="fill-gray-200 dark:fill-gray-800" />

components/main-nav.tsx

@@ -31,7 +31,7 @@ export function MainNav({ items, children }: MainNavProps) {
   }
 
   return (
-    <div className="flex w-full gap-6 md:gap-10">
+    <div className="flex w-full pt-10 gap-6 md:gap-10 selection:dark:text-black selection:dark:bg-white">
       <TooltipProvider>
         <Tooltip>
         <TooltipTrigger asChild>

components/mdx-components.tsx

@@ -108,7 +108,7 @@ const components = {
     // eslint-disable-next-line @next/next/no-img-element
     <img className={cn("rounded-md border", className)} alt={alt} {...props} />
   ),
-  hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />,
+  hr: ({ ...props }) => <hr className="-mx-10 my-4 md:my-8" {...props} />,
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
     <div className="my-6 w-full overflow-y-auto">
       <table className={cn("w-full", className)} {...props} />

components/page-header.tsx

@@ -36,7 +36,7 @@ export function DocsPageHeader({
 
   return (
     <motion.div
-      className={cn("mb-10 space-y-4", className)}
+      className={cn("mb-10 space-y-4 selection:dark:text-black selection:dark:bg-white", className)}
       variants={containerVariants}
       initial="hidden"
       animate="visible"

components/reading-progress.tsx

@@ -1,9 +1,8 @@
 // components/ReadingProgressBar.js
 
-// import React, { useEffect, useState } from 'react';
-// import {useWindowSize} from "@uidotdev/usehooks";
 import React, { useEffect, useState, useCallback } from 'react';
 import { useWindowSize } from '@uidotdev/usehooks';
+import { Icons } from './icons';
 
 export function ReadingProgressBar() {
   const [scrollPosition, setScrollPosition] = useState(0);
@@ -23,24 +22,38 @@ export function ReadingProgressBar() {
 
   return (
     <div className="reading-progress-container">
-      <div className="reading-progress-bar" style={{ width: `${scrollPosition}%` }}></div>
+      <div className="reading-progress-bar" style={{ width: `${scrollPosition}%` }}>
+        <div className="reading-progress-percentage">{Math.round(scrollPosition)}%</div>
+      </div>
+        <Icons.logo className="absolute h-4 w-4 right-1 top-0.5 text-[#e0e0e0]" />
       <style jsx>{`
         .reading-progress-container {
           width: 100%;
-          height: 4px;
+          height: 20px;
           background-color: #e0e0e0;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 1000;
         }
         .reading-progress-bar {
-          height: 4px;
+          height: 20px;
           background-color: #000;
+          position: relative;
+        }
+        .reading-progress-percentage {
+          position: absolute;
+          top: 0px;
+          left: 10px;
+          font-weight: 600;
+          font-size: 12px;
+          z-index: 1001;
+          color: #fff;
+          text-shadow: 0px 0px 5px #000;
         }
       `}</style>
     </div>
   );
-      };
+};
 
-export default ReadingProgressBar
+export default ReadingProgressBar;

components/site-footer.tsx

@@ -6,7 +6,6 @@ import { motion } from "framer-motion"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
-import { ModeToggle } from "@/components/mode-toggle"
 
 export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   const containerVariants = {
@@ -27,7 +26,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
       animate="visible"
     >
       <motion.div
-        className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0"
+        className="container mb-10 flex flex-col items-center justify-between gap-4 py-10 selection:dark:bg-white selection:dark:text-black md:h-24 md:flex-row md:py-0"
         variants={itemVariants}
       >
         <motion.div
@@ -49,8 +48,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             </a>
           </p>
         </motion.div>
-        <div className="-mt-12 flex flex-col items-center justify-center">
-          <ModeToggle />
+        <div className="-mt-5 flex flex-col items-center justify-center">
           <div className="mt-2 flex items-center justify-center gap-2">
 
           <Icons.logo className="h-8 w-auto" />
@@ -65,7 +63,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
         >
           <p className="flex flex-row items-center gap-2 text-center text-sm leading-loose md:text-left">
             <a
-              href={siteConfig.links.twitter}
+              href={"https://twitter.com/@0xAgusti"}
               target="_blank"
               rel="noreferrer noopener"
               className=" text-sm font-medium transition-all duration-300 ease-in-out hover:text-green-600"

content/guides/checks.mdx

@@ -51,8 +51,6 @@ have seen flourish in Web3.
 <Accordion title="Who created Checks" slug="who-created-checks" readingTimeInMinutes={2}>
 <article className="prose">
 
-
----
 <h4 className="text-center">
 Checks was created by Jack Butcher.
 </h4>