refactor: Inline and simplify glowing backdrop SVG pattern (nodejs#6536)

Co-authored-by: Augustin Mauroy <[email protected]>
canerakdas · Apr 24, 2024 · 662aabc · 662aabc
1 parent 6f9ea86
commit 662aabc
Show file tree

Hide file tree

Showing 14 changed files with 369 additions and 1,153 deletions.
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
 import CenteredLayout from '@/layouts/Centered';
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
@@ -14,7 +15,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
   return (
     <CenteredLayout>
-      <div className="glowingBackdrop" />
+      <GlowingBackdrop />
 
       <main>
         500

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
@@ -6,14 +6,15 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
 import CenteredLayout from '@/layouts/Centered';
 
 const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
     <CenteredLayout>
-      <div className="glowingBackdrop" />
+      <GlowingBackdrop />
 
       <main>
         404

diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -5,6 +5,7 @@ import { captureException } from '@sentry/nextjs';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
 import BaseLayout from '@/layouts/Base';
 import CenteredLayout from '@/layouts/Centered';
 
@@ -16,7 +17,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
       <body>
         <BaseLayout>
           <CenteredLayout>
-            <div className="glowingBackdrop" />
+            <GlowingBackdrop />
 
             <main>
               500

diff --git a/components/Common/GlowingBackdrop/index.module.css b/components/Common/GlowingBackdrop/index.module.css
@@ -0,0 +1,32 @@
+.glowingBackdrop {
+  @apply absolute
+    left-0
+    top-0
+    -z-10
+    size-full
+    opacity-50
+    md:opacity-100;
+
+  &::after {
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-square
+      w-[300px]
+      rounded-full
+      bg-green-300
+      blur-[120px]
+      content-['']
+      dark:bg-green-700;
+  }
+
+  svg {
+    @apply absolute
+      inset-0
+      m-auto
+      h-[600px]
+      object-cover
+      text-neutral-300
+      dark:text-neutral-900/75;
+  }
+}
diff --git a/components/Common/GlowingBackdrop/index.stories.tsx b/components/Common/GlowingBackdrop/index.stories.tsx
@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
+
+type Story = StoryObj<typeof GlowingBackdrop>;
+type Meta = MetaObj<typeof GlowingBackdrop>;
+
+export const Default: Story = {};
+
+export default { component: GlowingBackdrop } as Meta;
diff --git a/components/Common/GlowingBackdrop/index.tsx b/components/Common/GlowingBackdrop/index.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+
+import HexagonGrid from '@/components/Icons/HexagonGrid';
+
+import styles from './index.module.css';
+
+const GlowingBackdrop: FC = () => (
+  <div className={styles.glowingBackdrop}>
+    <HexagonGrid />
+  </div>
+);
+
+export default GlowingBackdrop;
diff --git a/components/Common/Preview/index.module.css b/components/Common/Preview/index.module.css
@@ -7,9 +7,6 @@
     border
     border-neutral-900
     bg-neutral-950
-    bg-[url('/static/images/patterns/hexagon-grid.svg')]
-    bg-contain
-    bg-center
     @container/preview;
 
   &::after {
@@ -58,6 +55,21 @@
       @xl/preview:text-2xl
       @2xl/preview:text-3xl;
 
+    .hexagon {
+      @apply absolute
+        inset-0
+        m-auto
+        size-full
+        @md/preview:h-3/5
+        @md/preview:w-3/5
+        @lg/preview:h-2/3
+        @lg/preview:w-2/3
+        @xl/preview:h-3/5
+        @xl/preview:w-3/5
+        @2xl/preview:h-2/3
+        @2xl/preview:w-2/3;
+    }
+
     .logo {
       @apply mx-auto
         size-6

diff --git a/components/Common/Preview/index.tsx b/components/Common/Preview/index.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import type { FC } from 'react';
 
+import HexagonGrid from '@/components/Icons/HexagonGrid';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import type { BlogPreviewType } from '@/types';
 
@@ -14,6 +15,7 @@ type PreviewProps = {
 const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
   <div className={classNames(styles.root, styles[type])}>
     <div className={styles.container} aria-hidden={true}>
+      <HexagonGrid className={styles.hexagon} />
       <JsIconWhite className={styles.logo} />
       {title}
     </div>

diff --git a/components/Icons/HexagonGrid.stories.tsx b/components/Icons/HexagonGrid.stories.tsx
@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import HexagonGrid from '@/components/Icons/HexagonGrid';
+
+type Story = StoryObj<typeof HexagonGrid>;
+type Meta = MetaObj<typeof HexagonGrid>;
+
+export const Default: Story = {};
+
+export default { component: HexagonGrid } as Meta;