Skip to content

Commit 322bcac

Browse files
Rel1cxRel1cx
committed
feat(website): add background effect to homepage
1 parent ad441cd commit 322bcac

File tree

11 files changed

+346
-15
lines changed

11 files changed

+346
-15
lines changed

‎.pkgs/configs/eslint.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const templateIndentTags = [
1313
"ts",
1414
"tsx",
1515
"html",
16+
"glsl",
1617
"dedent",
1718
"outdent",
1819
];

‎.pkgs/configs/eslint.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const templateIndentTags = [
1717
"ts",
1818
"tsx",
1919
"html",
20+
"glsl",
2021
"dedent",
2122
"outdent",
2223
];

‎apps/website/app/(home)/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { EffectLayer } from "#/components/EffectLayer";
12
import { ESLintReact } from "#/components/ESLintReact";
23
import { Card, Cards } from "fumadocs-ui/components/card";
34
import { CircleDotDashed, Gauge, Sliders, Zap } from "lucide-react";
@@ -17,27 +18,26 @@ const features = [
1718
export default function HomePage() {
1819
return (
1920
<main className="w-full min-w-0 max-w-6xl px-8 pt-4 pb-12 md:px-12 mx-auto">
21+
<EffectLayer />
2022
<ESLintReact />
2123
<article className="prose max-w-none">
22-
<p className="text-center">
23-
A series of composable ESLint rules for React and friends.
24-
</p>
25-
<h2>Features</h2>
24+
<h2 className="isolate">Features</h2>
2625
<Cards className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
2726
{features.map(([title, description, Icon]) => (
2827
<Card
28+
className="mix-blend-luminosity"
2929
description={description}
3030
icon={<Icon />}
3131
key={title}
3232
title={title}
3333
/>
3434
))}
3535
</Cards>
36-
<h2>Roadmap</h2>
36+
<h2 className="isolate">Roadmap</h2>
3737
<p>
3838
Check out the <Link href="/roadmap">roadmap</Link> to see what's planned for the future.
3939
</p>
40-
<h2>Contributing</h2>
40+
<h2 className="isolate">Contributing</h2>
4141
<p>
4242
Want to contribute? Check out the{" "}
4343
<Link href="https://github.com/Rel1cx/eslint-react/blob/main/.github/CONTRIBUTING.md">

‎apps/website/app/layout.config.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,9 @@ export const baseOptions: BaseLayoutProps = {
2727
<span>ESLint React</span>
2828
</div>
2929
),
30+
transparentMode: "top",
31+
},
32+
themeSwitch: {
33+
enabled: false,
3034
},
3135
};

‎apps/website/app/layout.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ const ibm_plex_mono = IBM_Plex_Mono({
1515
weight: ["400", "500", "700"],
1616
});
1717

18+
const themeOptions = {
19+
defaultTheme: "dark",
20+
enabled: true,
21+
enableSystem: false,
22+
forcedTheme: "dark",
23+
};
24+
1825
export const metadata = {
1926
description: "A series of composable ESLint rules for React and friends.",
2027
title: {
@@ -45,7 +52,9 @@ export default function Layout({ children }: { children: ReactNode }) {
4552
type="image/png"
4653
/>
4754
<body className="flex flex-col min-h-screen">
48-
<RootProvider>{children}</RootProvider>
55+
<RootProvider theme={themeOptions}>
56+
{children}
57+
</RootProvider>
4958
</body>
5059
</html>
5160
</ViewTransitions>

‎apps/website/app/overrides.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
filter: brightness(0.5);
1414
}
1515

16+
#nd-home-layout {
17+
position: relative;
18+
}
19+
1620
#nd-page .bsky-post [class*="embed-module_external"] {
1721
display: none;
1822
}

‎apps/website/components/ESLintReact.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export function ESLintReact() {
88
<div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
99
<Image alt="logo" height="150" quality={100} src={logo as StaticImageData} width="150" />
1010
<span className="text-2xl">ESLint React</span>
11+
<p className="text-center text-gray-400">
12+
A series of composable ESLint rules for React and friends.
13+
</p>
1114
</div>
1215
);
1316
}

0 commit comments

Comments
 (0)