Merge branch 'main' of https://github.com/nachovigilante/cheatsheets

components/layout/Header.tsx

@@ -2,17 +2,33 @@ import Link from "next/link";
 import ThemeSwitch from "../utils/ThemeSwitch";
 import { useRouter } from "next/router";
 import { twMerge } from "tailwind-merge";
+import Image from "next/image";
+import { useWindowSize } from "usehooks-ts";
 
 const Header = () => {
     const { pathname } = useRouter();
+    const windowSize = useWindowSize();
 
     return (
         <header className="flex items-center justify-between w-screen lg:pb-20 xl:px-12 px-4 py-4 pb-12 md:pb-14 md:px-5 md:py-6 absolute z-50 top-0 backdrop-blur-sm fade-bottom">
             <Link href="/">
                 <a className="flex items-center no-underline 3xl:gap-5 gap-2 md:gap-4">
-                    <img
+                    <Image
                         src="/assets/icons/Logo.svg"
-                        className="xl:h-[45px] h-[30px] md:h-[35px]"
+                        height={
+                            windowSize.width >= 1250
+                                ? 45
+                                : windowSize.width >= 800
+                                ? 35
+                                : 30
+                        }
+                        width={
+                            windowSize.width >= 1250
+                                ? 45
+                                : windowSize.width >= 800
+                                ? 35
+                                : 30
+                        }
                         alt="Logo"
                     />
                     <h1 className="xl:text-2xl text-base md:text-lg select-none 3xl:mt-1 font-space no-ligature">

components/utils/Terminal/Terminal.tsx

@@ -7,6 +7,8 @@ import {
 } from "../../../contexts/TerminalContext";
 import { CheatsheetType } from "../../../pages";
 import Command from "./Command";
+import Image from "next/image";
+import { useWindowSize } from "usehooks-ts";
 
 type TerminalProps = {
     cheatsheets: CheatsheetType[];
@@ -40,14 +42,16 @@ const WindowHeader = () => {
                 <div className="bg-[#ffbd2e] 2xl:w-5 2xl:h-5 md:w-4 md:h-4 sm:h-3 sm:w-3 h-2 w-2 rounded-full" />
                 <div className="bg-[#27c93f] 2xl:w-5 2xl:h-5 md:w-4 md:h-4 sm:h-3 sm:w-3 h-2 w-2 rounded-full" />
             </div>
-            <div className="flex-grow text-center md:static absolute w-full md:text-lg text-base">
+            <div className="flex-grow text-center md:static absolute w-full xl:text-2xl md:text-lg text-base">
                 tic:https://cheatsheets
             </div>
         </div>
     );
 };
 
 const Sidebar = ({ cheatsheets }: TerminalProps) => {
+    const windowSize = useWindowSize();
+
     return (
         <div className="bg-[#242229] xl:p-5 p-4 pb-10 font-space hidden md:block">
             <div className="2xl:text-xl text-lg 2xl:mb-3 mb-2">
@@ -59,10 +63,11 @@ const Sidebar = ({ cheatsheets }: TerminalProps) => {
                     <li key={c.slug}>
                         <Link href={`/cheatsheet/${c.slug}`}>
                             <a className="flex gap-2 items-center 2xl:text-xl xl:text-lg text-md py-1 px-2 hover:bg-[#2a2831] cursor-pointer">
-                                <img
+                                <Image
                                     src={`/assets/images/${c.slug}.svg`}
                                     alt={`${c.slug} logo`}
-                                    className="xl:h-5 xl:w-5 h-4 w-4"
+                                    width={windowSize.width >= 1250 ? 20 : 16}
+                                    height={windowSize.width >= 1250 ? 20 : 16}
                                 />
                                 <span>{c.slug}.md</span>
                             </a>

hooks/useWindowSize.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+const getCurrentSize = () => {
+    if (typeof window !== "undefined") {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    }
+    return {
+        width: 0,
+        height: 0,
+    };
+};
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(getCurrentSize);
+
+    useEffect(() => {
+        window.addEventListener("resize", () =>
+            setWindowSize(getCurrentSize())
+        );
+
+        return () => {
+            window.removeEventListener("resize", () =>
+                setWindowSize(getCurrentSize())
+            );
+        };
+    }, []);
+
+    return windowSize;
+};

pages/index.tsx

@@ -8,6 +8,9 @@ import Background from "../components/layout/Background";
 import Terminal from "../components/utils/Terminal/Terminal";
 import Glassbox from "../components/utils/Glassbox";
 import Section from "../components/layout/Section";
+import { useWindowSize } from "usehooks-ts";
+import Image from "next/image";
+import { useMemo } from "react";
 
 export type CheatsheetType = {
     slug: string;
@@ -18,13 +21,29 @@ export type CheatsheetType = {
 };
 
 const Home: NextPage = ({ cheatsheets }: { cheatsheets: CheatsheetType[] }) => {
+    const windowSize = useWindowSize();
+
+    const ratio = 20 / 17;
+
+    const imageWidth = useMemo(() => {
+        if (windowSize.width >= 1900) return 800;
+        if (windowSize.width >= 1450) return 600;
+        if (windowSize.width >= 1250) return 400;
+        if (windowSize.width >= 1000) return 380;
+        if (windowSize.width >= 800) return 320;
+        if (windowSize.width >= 500) return 250;
+        return 200;
+    }, [windowSize]);
+
+    const imageHeight = useMemo(() => imageWidth / ratio, [imageWidth]);
+
     return (
         <>
             <div className="relative z-20 p-0 3xl:max-w-[1200px] 2xl:max-w-[1000px] xl:max-w-[900px] lg:max-w-[800px] md:max-w-[640px] sm:max-w-[450px] max-w-[320px] m-auto">
                 <Head>
                     <title>{"<TIC_Cheatsheets/>"}</title>
                 </Head>
-                <section className="flex justify-start items-center lg:pl-20 2xl:pl-0 md:pl-10 sm:pl-8">
+                <section className="flex justify-start items-center lg:pl-20 2xl:pl-0 md:pl-10 sm:pl-8 select-none">
                     <div className="relative xl:h-screen lg:h-[400px] md:h-[400px] sm:h-[350px] h-[300px] xl:mt-0 lg:mt-20 flex flex-col justify-center z-20 items-start">
                         <h1 className="flex lg:gap-5 sm:gap-2 flex-col 3xl:text-9xl 2xl:text-8xl xl:text-7xl lg:text-6xl md:text-5xl text-4xl relative z-20 font-raleway font-black w-full drop-shadow-md">
                             <span>TIC</span>
@@ -38,11 +57,14 @@ const Home: NextPage = ({ cheatsheets }: { cheatsheets: CheatsheetType[] }) => {
                         >
                             {"> Ir a la terminal"}
                         </a>
-                        <img
-                            src="/assets/images/notebook.png"
-                            className="absolute top-30 3xl:left-[480px] 2xl:left-[400px] xl:left-[380px] lg:left-[300px] md:left-[250px] sm:left-[170px] left-[130px] lg:w-[380px] md:w-[320px] sm:w-[250px] 3xl:w-[800px] 2xl:w-[600px] xl:w-[400px] w-[200px] drop-shadow-notebook"
-                            alt="notebook"
-                        />
+                        <div className="absolute 3xl:w-[800px] 2xl:w-[600px] xl:w-[400px] lg:w-[380px] md:w-[320px] sm:w-[250px] w-[200px] top-30 3xl:left-[480px] 2xl:left-[400px] xl:left-[380px] lg:left-[300px] md:left-[250px] sm:left-[170px] left-[130px] drop-shadow-notebook">
+                            <Image
+                                src="/assets/images/notebook.png"
+                                alt="notebook"
+                                width={imageWidth}
+                                height={imageHeight}
+                            />
+                        </div>
                     </div>
                 </section>
                 <Section className="xl:my-40 md:my-24 mb-16">