Merge pull request #6 from AnnaBurd/dev

Fix: not working links in production mode and heading overflows

.github/lighthouse/budget.json

@@ -8,7 +8,7 @@
       },
       {
         "metric": "first-contentful-paint",
-        "budget": 1000
+        "budget": 1500
       }
     ],
     "resourceSizes": [
@@ -24,7 +24,7 @@
     "resourceCounts": [
       {
         "resourceType": "third-party",
-        "budget": 25
+        "budget": 50
       }
     ]
   }

.github/workflows/main.yml

@@ -37,7 +37,7 @@ jobs:
         id: wait_for_netlify
         uses: jakepartusch/[email protected]
         with:
-          site_name: roaring-douhua-959988
+          site_name: annaburd
           max_timeout: 180
 
       - name: Audit URLs using Lighthouse
@@ -46,9 +46,9 @@ jobs:
         with:
           urls: |
             ${{ steps.wait_for_netlify.outputs.url }}
-            ${{ steps.wait_for_netlify.outputs.url }}en
-            ${{ steps.wait_for_netlify.outputs.url }}vi
-            ${{ steps.wait_for_netlify.outputs.url }}ru
+            ${{ steps.wait_for_netlify.outputs.url }}en/work/real-estate-app
+            ${{ steps.wait_for_netlify.outputs.url }}ru/work/translator-app
+
           budgetPath: ".github/lighthouse/budget.json" # test performance budgets https://web.dev/articles/use-lighthouse-for-performance-budgets
           uploadArtifacts: true # save results as an action artifacts
           temporaryPublicStorage: true # upload lighthouse report to the temporary storage

package.json

@@ -20,7 +20,7 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-resources-to-backend": "^1.2.0",
     "negotiator": "^0.6.3",
-    "next": "^14.0.3",
+    "next": "^14.1.0",
     "react": "^18",
     "react-cookie": "^6.1.1",
     "react-dom": "^18",

src/app/[lang]/components/hero/Hero.tsx

@@ -69,6 +69,10 @@ const Hero: React.FC<Props> = ({ lang }) => {
         headingRef.current?.setAttribute("data-highlight", "true");
       }, 1600);
     }
+
+    if (loadingAnimationState === "skipped") {
+      headingRef.current?.setAttribute("data-highlight", "true");
+    }
   }, [loadingAnimationState]);
 
   return (

src/app/components/footer/Footer.tsx

@@ -21,7 +21,8 @@ const Footer: React.FC<Props> = async ({ lang }) => {
           <Reveal className="flex-1" options={{ revealHighlight: true }}>
             <h2
               className={
-                fontSecondary.className + `  mb-4 font-black leading-tight`
+                fontSecondary.className +
+                `  mb-4  font-black leading-tight max-[500px]:w-4/5`
               }
             >
               <span

src/app/components/header/MobileNavbar.tsx

@@ -2,9 +2,6 @@ import { Locale } from "@/app/i18n/i18n-config";
 import { motion, useCycle } from "framer-motion";
 import { useRef } from "react";
 import Link from "../ui/Link";
-import { LinkedinLogo } from "@phosphor-icons/react/dist/ssr/LinkedinLogo";
-import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
-import { Envelope } from "@phosphor-icons/react/dist/ssr/Envelope";
 import contacts from "../contacts/Contacts";
 
 type Props = {

src/app/components/header/Navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import Link from "../ui/Link";
 import { Locale } from "@/app/i18n/i18n-config";
 
@@ -14,24 +14,15 @@ type Props = {
 const Navbar: React.FC<Props> = ({ lang }) => {
   const pathname = usePathname();
 
-  // console.log(window.location.href, window.location.origin);
-
   const homePathRe = /^\/(en|vi|ru)?$/i;
   const pathWithLocaleRe = /^\/(en|vi|ru)\//i;
 
   let portfolioPath = "#portfolio";
 
   if (!homePathRe.test(pathname)) {
-    if (pathWithLocaleRe.test(pathname)) {
-      portfolioPath = `/${lang}#portfolio`;
-    } else {
-      portfolioPath = "/#portfolio";
-    }
-
-    // Note: Next JS app router has a bug? navigating to a path with /#hash does not trigger scroll to the element with id=hash, when navigating from a different page a SECOND time. The first time works fine. This is a workaround, which helps but the issue still persists for n-th time navigation.
-    if (typeof window !== "undefined") {
-      portfolioPath = window.location.origin + portfolioPath;
-    }
+    portfolioPath = pathWithLocaleRe.test(pathname)
+      ? `/${lang}#portfolio`
+      : "#portfolio";
   }
 
   const translation = useTranslation(lang, "common").t;

src/app/components/ui/Link.tsx

@@ -7,6 +7,7 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   replace?: boolean;
+  prefetch?: boolean;
   scroll?: boolean;
 };
 
@@ -15,14 +16,22 @@ const Button: React.FC<Props> = ({
   href,
   className,
   replace = false,
+  prefetch = false,
   scroll = true,
 }) => {
+
+  // In case link is a simple anchor link, we don't want to use next/link (it is not working in production mode on netlify deployment)
+
+  if(href.startsWith("#")) return (<a href={href} className={`${styles["link-highlight"]} text-base font-medium ${className}`}>{children}</a>);
+
+
   return (
     <Link
       className={`${styles["link-highlight"]}  text-base font-medium ${className}`}
       href={href}
       replace={replace}
       scroll={scroll}
+      prefetch={prefetch}
     >
       {children}
     </Link>