fix(footer): show 0.0.0-development version in Footer in development

This reverts commit c2c9b59c7a.

app/blog/page.tsx

@@ -25,7 +25,7 @@ const BlogPage = async (): Promise<JSX.Element> => {
   return (
     <main className="flex flex-1 flex-col flex-wrap items-center">
       <div className="mt-10 flex flex-col items-center">
-        <h1 className="text-4xl font-semibold text-yellow dark:text-yellow-dark">
+        <h1 className="text-4xl font-semibold text-primary dark:text-primary-dark">
           Blog
         </h1>
         <p className="mt-6 text-center" data-cy="blog-post-date">

app/error.tsx

@@ -18,7 +18,7 @@ const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => {
       <h1 className="my-6 text-4xl font-semibold">
         Error{" "}
         <span
-          className="text-yellow dark:text-yellow-dark"
+          className="text-primary dark:text-primary-dark"
           data-cy="status-code"
         >
           500

app/globals.css

@@ -29,7 +29,7 @@
 
 .prose a,
 .prose strong {
-  @apply !font-semibold text-yellow dark:text-yellow-dark;
+  @apply !font-semibold text-primary dark:text-primary-dark;
 }
 
 strong,

app/not-found.tsx

@@ -10,7 +10,7 @@ const NotFound = (): JSX.Element => {
       <h1 className="my-6 text-4xl font-semibold">
         {i18n.translate("errors.error")}{" "}
         <span
-          className="text-yellow dark:text-yellow-dark"
+          className="text-primary dark:text-primary-dark"
           data-cy="status-code"
         >
           404
@@ -20,7 +20,7 @@ const NotFound = (): JSX.Element => {
         {i18n.translate("errors.not-found")}{" "}
         <Link
           href="/"
-          className="text-yellow hover:underline dark:text-yellow-dark"
+          className="text-primary hover:underline dark:text-primary-dark"
         >
           {i18n.translate("errors.return-to-home-page")}
         </Link>

blog/BlogPost.tsx

@@ -21,7 +21,7 @@ export const BlogPost = async (props: BlogPostProps): Promise<JSX.Element> => {
   return (
     <main className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
       <div className="my-10 flex flex-col items-center text-center">
-        <h1 className="text-3xl font-semibold text-yellow dark:text-yellow-dark">
+        <h1 className="text-3xl font-semibold text-primary dark:text-primary-dark">
           {blogPost.frontmatter.title}
         </h1>
         <p className="mt-2" data-cy="blog-post-date">

blog/BlogPosts.tsx

@@ -25,7 +25,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
               <ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
                 <h2
                   data-cy="blog-post-title"
-                  className="text-xl font-semibold text-yellow dark:text-yellow-dark"
+                  className="text-xl font-semibold text-primary dark:text-primary-dark"
                 >
                   {post.frontmatter.title}
                 </h2>

components/Footer/FooterText.tsx

@@ -9,7 +9,7 @@ export const FooterText = (): JSX.Element => {
     <p>
       <Link
         href="/"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
       >
         Théo LUDWIG
       </Link>{" "}

components/Footer/FooterVersion.tsx

@@ -16,7 +16,7 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => {
       Version{" "}
       <a
         data-cy="version-link"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
         href={versionLink}
         target="_blank"
         rel="noopener noreferrer"

components/Footer/index.tsx

@@ -1,9 +1,10 @@
+import { getVersion } from "@/utils/getVersion"
+
 import { FooterText } from "./FooterText"
 import { FooterVersion } from "./FooterVersion"
 
 export const Footer = async (): Promise<JSX.Element> => {
-  const { readPackage } = await import("read-pkg")
+  const version = await getVersion()
-  const { version } = await readPackage()
 
   return (
     <footer className="flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black">

components/Header/index.tsx

@@ -23,7 +23,7 @@ export const Header = (): JSX.Element => {
             alt="Théo LUDWIG"
             priority
           />
-          <strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark sm:block sm:text-xl">
+          <strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
             Théo LUDWIG
           </strong>
         </h1>
@@ -33,7 +33,7 @@ export const Header = (): JSX.Element => {
           <Link
             href="/blog"
             data-cy="header-blog-link"
-            className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+            className="font-semibold text-primary hover:underline dark:text-primary-dark"
           >
             Blog
           </Link>

components/Interests/InterestParagraph.tsx

@@ -22,7 +22,7 @@ export const InterestParagraph = (
   return (
     <>
       <p className="my-6 text-center text-gray dark:text-gray-dark">
-        <strong className="text-lg font-semibold text-yellow dark:text-yellow-dark">
+        <strong className="text-lg font-semibold text-primary dark:text-primary-dark">
           {title}
         </strong>
         <br />

components/Interests/InterestsList/InterestItem.tsx

@@ -12,7 +12,7 @@ export const InterestItem = (props: InterestItemProps): JSX.Element => {
   return (
     <li className="m-2 size-8" title={title}>
       <FontAwesomeIcon
-        className="block size-full text-yellow dark:text-yellow-dark"
+        className="block size-full text-primary dark:text-primary-dark"
         icon={fontAwesomeIcon}
       />
     </li>

components/OpenSource/Repository.tsx

@@ -15,7 +15,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
       <a href={href} target="_blank" rel="noopener noreferrer">
         <div className="flex">
           <GitHubIcon className="mr-2 h-6" />
-          <span className="font-semibold text-yellow dark:text-yellow-dark">
+          <span className="font-semibold text-primary dark:text-primary-dark">
             {name}
           </span>
         </div>

components/Portfolio/PortfolioItem.tsx

@@ -32,7 +32,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
           />
         </div>
         <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-          <h3 className="my-6 text-2xl font-semibold text-yellow dark:text-yellow-dark">
+          <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
             {title}
           </h3>
           <p className="mx-4 my-6 font-semibold">{description}</p>

components/Profile/ProfileDescriptionBottom.tsx

@@ -12,7 +12,7 @@ export const ProfileDescriptionBottom = (): JSX.Element => {
       <br />
       <a
         href="/curriculum-vitae/index.html"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
       >
         Curriculum vitæ ({i18n.translate("common.fr-FR")})
       </a>

components/Profile/ProfileInfo.tsx

@@ -5,7 +5,7 @@ export const ProfileInformation = (): JSX.Element => {
 
   return (
     <div className="mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400">
-      <h1 className="mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark">
+      <h1 className="mb-2 text-4xl font-semibold text-primary dark:text-primary-dark">
         Théo LUDWIG
       </h1>
       <h2 className="mb-3 text-base">

components/Profile/ProfileList/index.tsx

@@ -5,6 +5,7 @@ import { useMemo } from "react"
 import { useI18n } from "@/i18n/i18n.client"
 import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
 import type { CookiesStore } from "@/utils/constants"
+import { useIsMounted } from "@/hooks/useIsMounted"
 
 import { ProfileItem } from "./ProfileItem"
 
@@ -21,18 +22,22 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
     return getAge(BIRTH_DATE)
   }, [])
 
+  const { isMounted } = useIsMounted()
+
   return (
     <ul className="m-0 list-none p-0">
       <ProfileItem
         title={i18n.translate("home.about.pronouns")}
         value={i18n.translate("home.about.pronouns-value")}
       />
-      <ProfileItem
+      {isMounted ? (
-        title={i18n.translate("home.about.birth-date")}
+        <ProfileItem
-        value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
+          title={i18n.translate("home.about.birth-date")}
-          "home.about.years-old",
+          value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
-        )})`}
+            "home.about.years-old",
-      />
+          )})`}
+        />
+      ) : null}
       <ProfileItem
         title={i18n.translate("home.about.nationality")}
         value="Alsace, France"

components/Skills/Skill.tsx

@@ -29,7 +29,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   return (
     <a
       href={skillProperties.link}
-      className="mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark"
+      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
       target="_blank"
       rel="noopener noreferrer"
     >

components/Skills/SkillsSection.tsx

@@ -14,7 +14,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
         <div className="flex flex-wrap px-4 py-6">
           <div className="flex-1">
             <div className="mb-8 border-b border-gray-600 dark:border-white/10">
-              <h3 className="my-3 text-xl font-semibold text-yellow dark:text-yellow-dark">
+              <h3 className="my-3 text-xl font-semibold text-primary dark:text-primary-dark">
                 {title}
               </h3>
             </div>

components/design/Loader.tsx

@@ -16,7 +16,7 @@ export const Loader = (props: LoaderProps): JSX.Element => {
         height,
       }}
       className={classNames(
-        "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark",
+        "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-primary dark:text-primary-dark",
         className,
       )}
       role="status"

components/design/Section/SectionHeading.tsx

@@ -6,7 +6,7 @@ export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   return (
     <h2
       {...rest}
-      className="mb-3 mt-1 text-center text-4xl font-semibold text-yellow dark:text-yellow-dark"
+      className="mb-3 mt-1 text-center text-4xl font-semibold text-primary dark:text-primary-dark"
     >
       {children}
     </h2>

hooks/useIsMounted.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react"
+
+export interface UseIsMountedResult {
+  isMounted: boolean
+}
+
+export const useIsMounted = (): UseIsMountedResult => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return { isMounted }
+}

i18n/translations/en-US/home.json

@@ -18,7 +18,7 @@
       },
       {
         "title": "Open-Source Enthusiast",
-        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]
@@ -34,7 +34,7 @@
       {
         "title": "Carolo",
         "description": "Strategy board game similar to chess which allows grandiose moves (only available in French).",
-        "link": "https://carolo.org/",
+        "link": "https://carolo.theoludwig.fr/",
         "image": "/images/portfolio/Carolo.png"
       },
       {

i18n/translations/fr-FR/home.json

@@ -18,7 +18,7 @@
       },
       {
         "title": "Enthousiaste de l'Open-Source",
-        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]
@@ -34,7 +34,7 @@
       {
         "title": "Carolo",
         "description": "Jeu de plateau stratégique similaire aux échecs qui permet des coups grandioses, reposant sur des enchaînements remarquables.",
-        "link": "https://carolo.org/",
+        "link": "https://carolo.theoludwig.fr/",
         "image": "/images/portfolio/Carolo.png"
       },
       {

tailwind.config.js

@@ -14,7 +14,7 @@ const tailwindConfig = {
           DEFAULT: "#333333",
           dark: "#b7c0c9",
         },
-        yellow: {
+        primary: {
           DEFAULT: "#006cff",
           dark: "#00aeff",
         },

utils/getVersion.ts

@@ -0,0 +1,8 @@
+export const getVersion = async (): Promise<string> => {
+  if (process.env.NODE_ENV === "development") {
+    return "0.0.0-development"
+  }
+  const { readPackage } = await import("read-pkg")
+  const { version } = await readPackage()
+  return version
+}