update

AugustinMauroy · May 23, 2024 · 3c6e34a · 3c6e34a
1 parent 558072e
commit 3c6e34a
Show file tree

Hide file tree

Showing 18 changed files with 211 additions and 85 deletions.
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -19,7 +19,7 @@
  "footer": {
  "title": "MIT License © 2023 Augustin Mauroy"
  },
- "header": {
+ "nav": {
  "about": "About",
  "blog": "Blog",
  "projects": "Projects"
@@ -46,6 +46,10 @@
  "description": "Hi 👋, I'm Augustin. I'm {age} years old. I'm a web developer and an OSS enthusiast!",
  "title": "I am Augustin Mauroy"
  },
+ "pride": {
+ "title": "Happy Pride Month 🏳️‍🌈",
+ "description": "I support the LGBTQ+ community. Love is love ❤️🧡💛💚💙💜"
+ },
  "findme": {
  "title": "Find Me 🔎"
  }

diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -19,7 +19,7 @@
  "footer": {
  "title": "Licence MIT © 2023 Augustin Mauroy"
  },
- "header": {
+ "nav": {
  "about": "À propos",
  "blog": "Blog",
  "projects": "Projets"
@@ -46,6 +46,10 @@
  "description": "Salut 👋, je suis Augustin. J'ai {age} ans. Je suis développeur web et passionné d'open source!",
  "title": "Je suis Augustin Mauroy"
  },
+ "pride": {
+ "title": "Joyeux Mois des Fiertés 🏳️‍🌈",
+ "description": "Je soutiens la communauté LGBTQ+. L'amour est amour ❤️🧡💛💚💙💜"
+ },
  "findme": {
  "title": "Retrouvez-moi 🔎"
  }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
  "@radix-ui/react-avatar": "~1.0.4",
  "bright": "~0.8.5",
  "classnames": "~2.5.1",
+ "framer-motion": "^11.2.6",
  "js-yaml": "~4.1.0",
  "next": "~14.2.3",
  "next-intl": "~3.14.0",

diff --git a/src/app/[locale]/blog/page.module.css b/src/app/[locale]/blog/page.module.css
@@ -21,7 +21,10 @@
  }
 
  svg {
- @apply size-8;
+ @apply size-8
+ transition-transform
+ duration-200
+ hover:scale-125;
  }
  }
 

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,12 +1,13 @@
 import { unstable_setRequestLocale, getTranslations } from 'next-intl/server';
 import Footer from '@/components/sections/footer';
-import Header from '@/components/sections/header';
 import { LocaleProvider } from '@/provider/localeProvider';
 import ThemeProviderWrapper from '@/provider/themeProvider';
 import { availableLocales } from '@/utils/i18n';
+import Navbar from '@/components/sections/navbar';
 import type { Params } from '@/types/params';
 import type { Metadata } from 'next';
 import type { FC, PropsWithChildren } from 'react';
+import Header from '@/components/sections/header';
 import '@/styles/globals.css';
 
 type RootLayoutProps = PropsWithChildren<{
@@ -37,7 +38,7 @@ const RootLayout: FC<RootLayoutProps> = ({ children, params }) => {
  <body>
  <LocaleProvider>
  <ThemeProviderWrapper>
- <Header />
+ <Navbar />
  <main>{children}</main>
  <Footer />
  </ThemeProviderWrapper>

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,6 +1,7 @@
 import { unstable_setRequestLocale } from 'next-intl/server';
 import FindMe from '@/components/home/findme';
 import Hero from '@/components/home/hero';
+import Pride from '@/components/home/pride';
 import type { Params } from '@/types/params';
 import type { FC } from 'react';
 
@@ -14,6 +15,7 @@ const Page: FC<PageProps> = ({ params }) => {
  return (
  <>
  <Hero />
+ <Pride />
  <hr />
  <FindMe />
  </>

diff --git a/src/components/home/findme/index.module.css b/src/components/home/findme/index.module.css
@@ -13,15 +13,18 @@
  }
 
  .links {
- @apply flex flex-row flex-wrap justify-center gap-6;
+ @apply flex
+ flex-row
+ flex-wrap
+ justify-center
+ gap-6;
 
  svg {
- @apply h-16
- w-16
- transition-transform
- duration-200
- ease-in-out
- hover:scale-125;
+ @apply size-16
+ transition-transform
+ duration-200
+ ease-in-out
+ hover:scale-125;
  }
  }
 }
diff --git a/src/components/home/pride/index.module.css b/src/components/home/pride/index.module.css
@@ -0,0 +1,20 @@
+.pride {
+ @apply mx-auto
+ w-3/4
+ rounded-lg
+ bg-gradient-to-r
+ from-purple-400
+ to-pink-400
+ p-4
+ shadow-lg
+ dark:from-purple-800
+ dark:to-pink-800
+ dark:shadow-none
+ lg:w-1/2;
+
+ h2,
+ p {
+ @apply text-white
+ drop-shadow-md;
+ }
+}
diff --git a/src/components/home/pride/index.stories.tsx b/src/components/home/pride/index.stories.tsx
@@ -0,0 +1,9 @@
+import Pride from './';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Pride>;
+type Meta = MetaObj<typeof Pride>;
+
+export const Default: Story = {};
+
+export default { component: Pride } as Meta;
diff --git a/src/components/home/pride/index.tsx b/src/components/home/pride/index.tsx
@@ -0,0 +1,27 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { dateIsBetween } from '@/utils/dateUtils';
+import styles from './index.module.css';
+import type { FC } from 'react';
+
+const Pride: FC = () => {
+ const t = useTranslations('components.home.pride');
+
+ if (
+ !dateIsBetween({
+ startDate: '2024-06-01T00:00:00.000Z',
+ endDate: '2024-06-30T00:00:00.000Z',
+ careAboutYear: false,
+ })
+ )
+ return null;
+
+ return (
+ <section className={styles.pride}>
+ <h2>{t('title')}</h2>
+ <p>{t('description')}</p>
+ </section>
+ );
+};
+
+export default Pride;
diff --git a/src/components/i18n/localizedLink.tsx b/src/components/i18n/localizedLink.tsx
@@ -1,44 +1,26 @@
 'use client';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
-import type { FC, ReactNode, MouseEventHandler } from 'react';
-import type { UrlObject } from 'url';
+import type {
+ FC,
+ AnchorHTMLAttributes,
+ HTMLAttributeAnchorTarget,
+} from 'react';
 
-type Props = {
- href: string | URL | URLSearchParams | UrlObject;
- children: ReactNode;
- className?: string;
- target?: string;
- rel?: string;
- activeClassName?: string;
- onClick?: MouseEventHandler<HTMLAnchorElement> | undefined;
-};
+type Props = AnchorHTMLAttributes<HTMLAttributeAnchorTarget>;
 
 const LocalizedLink: FC<Props> = ({
  href,
  children,
  className,
  target,
  rel,
- activeClassName,
- onClick,
 }) => {
  const params = useParams();
- const pathname = usePathname();
  const path = `/${params.locale}${href}`;
- // if pathname is /en/about/slug and path is /en/about, then it's active
- const isActive = path === pathname.split('/').slice(0, 3).join('/');
 
  return (
- <Link
- href={path}
- className={`${className ? className : ''} ${
- isActive ? activeClassName : ''
- }`}
- target={target}
- rel={rel}
- onClick={onClick}
- >
+ <Link href={path} className={className} target={target} rel={rel}>
  {children}
  </Link>
  );

diff --git a/src/components/sections/header/index.tsx b/src/components/sections/header/index.tsx
diff --git a/...mponents/sections/header/index.module.css → ...mponents/sections/navbar/index.module.css b/...mponents/sections/header/index.module.css → ...mponents/sections/navbar/index.module.css
@@ -1,4 +1,4 @@
-.header {
+.nav {
  @apply sticky
  top-0
  z-10
@@ -29,16 +29,9 @@
  no-underline
  transition-colors
  duration-75
- hover:bg-gray-300
  hover:text-gray-950
  dark:text-gray-50
- dark:hover:bg-gray-600
  hover:dark:text-white;
-
- &.active {
- @apply bg-teal-500
- text-white;
- }
  }
 
  .links {

diff --git a/...ponents/sections/header/index.stories.tsx → ...ponents/sections/navbar/index.stories.tsx b/...ponents/sections/header/index.stories.tsx → ...ponents/sections/navbar/index.stories.tsx