Skip to content

refactor: Inline and simplify glowing backdrop SVG pattern #6536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 24, 2024
Merged

refactor: Inline and simplify glowing backdrop SVG pattern #6536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5fd3db
refactor: Inline and simplify glowing background SVG pattern
damianstasik Mar 24, 2024
73b7484
Merge branch 'main' into pr/6536
AugustinMauroy Apr 21, 2024
8b4686e
refactor: Inline glowing backdrop SVG pattern
AugustinMauroy Apr 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/[locale]/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -14,7 +15,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {

return (
<CenteredLayout>
<div className="glowingBackdrop" />
<GlowingBackdrop />

<main>
500
Expand Down
3 changes: 2 additions & 1 deletion app/[locale]/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -16,7 +17,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
<body>
<BaseLayout>
<CenteredLayout>
<div className="glowingBackdrop" />
<GlowingBackdrop />

<main>
500
Expand Down
32 changes: 32 additions & 0 deletions components/Common/GlowingBackdrop/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
10 changes: 10 additions & 0 deletions components/Common/GlowingBackdrop/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 13 additions & 0 deletions components/Common/GlowingBackdrop/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
18 changes: 15 additions & 3 deletions components/Common/Preview/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions components/Common/Preview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions components/Icons/HexagonGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading