Skip to content

Commit cb06d23

Browse files
bring-shrubberybring-shrubbery
committed
CI fixes
1 parent 28d2924 commit cb06d23

33 files changed

+230
-207
lines changed

‎.github/workflows/main.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ jobs:
1818
cache: "pnpm"
1919

2020
- run: pnpm install --frozen-lockfile
21-
- run: pnpm lint && pnpm build
21+
- run: pnpm build
22+
- run: pnpm lint

‎apps/web/app/globals.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@
7676
}
7777
body {
7878
@apply bg-background text-foreground antialiased;
79-
font-feature-settings: "rlig" 1, "calt" 1;
79+
font-feature-settings:
80+
"rlig" 1,
81+
"calt" 1;
8082
}
8183
ul,
8284
ol {

‎apps/web/app/sections/ExamplesSectionAsChildExample.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Card, CardContent } from "@/components/ui/card";
22
import { Code } from "@/components/ui/code";
33
import { Squircle } from "@squircle-js/react";
4-
54
import Prism from "prismjs";
5+
66
import "prismjs/components/prism-jsx";
7+
78
import type { PropsWithChildren } from "react";
89

910
const usage = `<Squircle
@@ -15,17 +16,20 @@ const usage = `<Squircle
1516
<span>Inline Squircle</span>
1617
</Squircle>`;
1718

18-
const highlightedUsage = "jsx" in Prism.languages ? Prism.highlight(
19-
["...", usage, "..."].join("\n"),
20-
Prism.languages.jsx,
21-
"jsx"
22-
) : "";
19+
const highlightedUsage =
20+
"jsx" in Prism.languages
21+
? Prism.highlight(
22+
["...", usage, "..."].join("\n"),
23+
Prism.languages.jsx,
24+
"jsx",
25+
)
26+
: "";
2327

2428
export const ExamplesSectionAsChildExample = () => {
2529
return (
2630
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
27-
<CardContent className="py-6 w-full space-y-4">
28-
<h3 className="font-semibold text-lg">Code:</h3>
31+
<CardContent className="w-full space-y-4 py-6">
32+
<h3 className="text-lg font-semibold">Code:</h3>
2933
<p>
3034
You can use <Kode>asChild</Kode> prop to squircle any element. This is
3135
useful when you want to squircle some element that might change size.
@@ -36,13 +40,13 @@ export const ExamplesSectionAsChildExample = () => {
3640
</p>
3741

3842
<Code dangerousHTML={highlightedUsage} raw={usage} />
39-
<h3 className="font-semibold text-lg">Result:</h3>
43+
<h3 className="text-lg font-semibold">Result:</h3>
4044

4145
<Squircle
4246
cornerRadius={10}
4347
cornerSmoothing={1}
4448
asChild
45-
className="bg-black text-white px-2 py-1"
49+
className="bg-black px-2 py-1 text-white"
4650
>
4751
<span>Inline Squircle</span>
4852
</Squircle>
@@ -52,7 +56,7 @@ export const ExamplesSectionAsChildExample = () => {
5256
};
5357

5458
const Kode = ({ children }: PropsWithChildren) => (
55-
<code className="bg-slate-200/50 px-1.5 text-sm py-0.5 rounded-md">
59+
<code className="rounded-md bg-slate-200/50 px-1.5 py-0.5 text-sm">
5660
{children}
5761
</code>
5862
);

‎apps/web/app/sections/ExamplesSectionConstantSizeExample.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Card, CardContent } from "@/components/ui/card";
22
import { Code } from "@/components/ui/code";
33
import { Squircle } from "@squircle-js/react";
4-
54
import Prism from "prismjs";
5+
66
import "prismjs/components/prism-jsx";
7+
78
import type { PropsWithChildren } from "react";
89

910
const usage = `<Squircle
@@ -19,17 +20,20 @@ const usage = `<Squircle
1920
/>
2021
</Squircle>`;
2122

22-
const highlightedUsage = "jsx" in Prism.languages ? Prism.highlight(
23-
["...", usage, "..."].join("\n"),
24-
Prism.languages.jsx,
25-
"jsx"
26-
) : "";
23+
const highlightedUsage =
24+
"jsx" in Prism.languages
25+
? Prism.highlight(
26+
["...", usage, "..."].join("\n"),
27+
Prism.languages.jsx,
28+
"jsx",
29+
)
30+
: "";
2731

2832
export const ExampleSectionConstantSizeExample = () => {
2933
return (
3034
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
31-
<CardContent className="py-6 w-full space-y-4">
32-
<h3 className="font-semibold text-lg">Code:</h3>
35+
<CardContent className="w-full space-y-4 py-6">
36+
<h3 className="text-lg font-semibold">Code:</h3>
3337

3438
<p>
3539
When you know the exact size you want your squircle to be, you can use{" "}
@@ -39,7 +43,7 @@ export const ExampleSectionConstantSizeExample = () => {
3943
</p>
4044

4145
<Code dangerousHTML={highlightedUsage} raw={usage} />
42-
<h3 className="font-semibold text-lg">Result:</h3>
46+
<h3 className="text-lg font-semibold">Result:</h3>
4347

4448
<Squircle
4549
cornerRadius={64}
@@ -48,19 +52,15 @@ export const ExampleSectionConstantSizeExample = () => {
4852
height={256}
4953
className="mx-auto"
5054
>
51-
<div
52-
className="w-full h-full
53-
bg-gradient-to-br from-indigo-500
54-
via-purple-500 to-pink-500"
55-
/>
55+
<div className="h-full w-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500" />
5656
</Squircle>
5757
</CardContent>
5858
</Card>
5959
);
6060
};
6161

6262
const Kode = ({ children }: PropsWithChildren) => (
63-
<code className="bg-slate-200/50 px-1.5 text-sm py-0.5 rounded-md">
63+
<code className="rounded-md bg-slate-200/50 px-1.5 py-0.5 text-sm">
6464
{children}
6565
</code>
6666
);

‎apps/web/app/sections/ExamplesSectionDefaultSizeExampleClientComponent.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
"use client";
22

3+
import { useEffect, useState } from "react";
4+
import Image from "next/image";
35
import { Button } from "@/components/ui/button";
46
import { Squircle } from "@squircle-js/react";
57
import { RotateCcwIcon } from "lucide-react";
6-
import Image from "next/image";
7-
import { useEffect, useState } from "react";
88

99
export const ExamplesSectionDefaultSizeExampleClientComponent = () => {
1010
const [src, setSrc] = useState("");
@@ -24,9 +24,9 @@ export const ExamplesSectionDefaultSizeExampleClientComponent = () => {
2424
}, []);
2525

2626
return (
27-
<div className="space-y-4 flex flex-col items-center">
27+
<div className="flex flex-col items-center space-y-4">
2828
<Button variant="outline" onClick={handleRefetchImage}>
29-
<RotateCcwIcon className={"w-4 h-4 mr-2"} />
29+
<RotateCcwIcon className={"mr-2 h-4 w-4"} />
3030
Refetch Image
3131
</Button>
3232
{src && (
@@ -35,7 +35,7 @@ export const ExamplesSectionDefaultSizeExampleClientComponent = () => {
3535
cornerSmoothing={1}
3636
defaultWidth={320}
3737
defaultHeight={214}
38-
className="bg-slate-100 w-fit h-fit"
38+
className="h-fit w-fit bg-slate-100"
3939
asChild
4040
>
4141
<Image src={src} width={320} height={214} alt="" />

‎apps/web/app/sections/FeaturesSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export const FeaturesSection = () => {
22
return (
3-
<div className="mx-auto container w-fit mb-36">
4-
<h2 className="font-semibold text-2xl mx-auto w-fit mb-4">
3+
<div className="container mx-auto mb-36 w-fit">
4+
<h2 className="mx-auto mb-4 w-fit text-2xl font-semibold">
55
{"Features 👑"}
66
</h2>
77

8-
<ul className="list-none list-inside space-y-2">
8+
<ul className="list-inside list-none space-y-2">
99
<li>{"💃 Easy to use primitive for building your own components."}</li>
1010
<li>{"🚀 Available for React, (other libraries coming soon)"}</li>
1111
<li>{"😏 React 18 support (server components)"}</li>

‎apps/web/app/sections/HowItWorksSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const HowItWorksSection = () => {
22
return (
3-
<div className="mx-auto container max-w-[640px] mb-36">
4-
<h2 className="font-semibold text-2xl mx-auto w-fit mb-4">
3+
<div className="container mx-auto mb-36 max-w-[640px]">
4+
<h2 className="mx-auto mb-4 w-fit text-2xl font-semibold">
55
How does it work? 🤓
66
</h2>
77
</div>

‎apps/web/app/sections/UsageSection.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import type { ReactNode } from "react";
34
import { Badge } from "@/components/ui/badge";
45
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
56
import { LANGUAGE_SELECTOR_ATOM } from "@/lib/atoms";
@@ -8,7 +9,7 @@ import { useAtom } from "jotai";
89
export const UsageSection = ({
910
reactUsageContent,
1011
}: {
11-
reactUsageContent: JSX.Element;
12+
reactUsageContent: ReactNode;
1213
}) => {
1314
const [language, setLanguage] = useAtom(LANGUAGE_SELECTOR_ATOM);
1415

‎apps/web/app/sections/UsageSectionReactContent.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Card, CardContent } from "@/components/ui/card";
22
import { Code } from "@/components/ui/code";
3-
43
import Prism from "prismjs";
4+
55
import "prismjs/components/prism-jsx";
66
import "prismjs/components/prism-bash";
77

@@ -31,42 +31,39 @@ import { SquircleNoScript } from "@squircle-js/react";
3131
...
3232
`.trim();
3333

34-
const highlightedUsage1 = "bash" in Prism.languages ? Prism.highlight(
35-
usage_react_1,
36-
Prism.languages.bash,
37-
"bash"
38-
) : "";
34+
const highlightedUsage1 =
35+
"bash" in Prism.languages
36+
? Prism.highlight(usage_react_1, Prism.languages.bash, "bash")
37+
: "";
3938

40-
const highlightedUsage2 = "jsx" in Prism.languages ? Prism.highlight(
41-
usage_react_2,
42-
Prism.languages.jsx,
43-
"jsx"
44-
) : "";
39+
const highlightedUsage2 =
40+
"jsx" in Prism.languages
41+
? Prism.highlight(usage_react_2, Prism.languages.jsx, "jsx")
42+
: "";
4543

46-
const highlightedUsage3 = "jsx" in Prism.languages ? Prism.highlight(
47-
usage_react_3,
48-
Prism.languages.jsx,
49-
"jsx"
50-
) : "";
44+
const highlightedUsage3 =
45+
"jsx" in Prism.languages
46+
? Prism.highlight(usage_react_3, Prism.languages.jsx, "jsx")
47+
: "";
5148

5249
export const UsageSectionReactContent = () => {
5350
return (
5451
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
55-
<CardContent className="py-6 w-full">
56-
<h3 className="font-semibold text-lg mb-2">
52+
<CardContent className="w-full py-6">
53+
<h3 className="mb-2 text-lg font-semibold">
5754
Step 1. <span className="font-normal">Install the package.</span>
5855
</h3>
5956
<Code dangerousHTML={highlightedUsage1} raw={usage_react_1} />
6057

61-
<h3 className="font-semibold text-lg mb-2 mt-4">
58+
<h3 className="mb-2 mt-4 text-lg font-semibold">
6259
Step 2.{" "}
6360
<span className="font-normal">
6461
Import and use as a a regular div.
6562
</span>
6663
</h3>
6764
<Code raw={usage_react_2} dangerousHTML={highlightedUsage2} />
6865

69-
<h3 className="font-semibold text-lg mb-2 mt-4">
66+
<h3 className="mb-2 mt-4 text-lg font-semibold">
7067
Step 3.{" "}
7168
<span className="font-normal">
7269
Add global component for noscript support.

‎apps/web/components/navbar.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { SITECONFIG } from "@/lib/siteconfig";
21
import Link from "next/link";
3-
2+
import { SITECONFIG } from "@/lib/siteconfig";
43
import { IoLogoGithub } from "react-icons/io5";
54

65
export const Navbar = () => {
76
return (
8-
<nav className="bg-white border-gray-200 dark:bg-gray-900">
9-
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-6">
10-
<div className="w-0 opacity-0 sm:opacity-100 sm:w-auto line-clamp-1 p-2 text-white hover:text-black">
7+
<nav className="border-gray-200 bg-white dark:bg-gray-900">
8+
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-6">
9+
<div className="line-clamp-1 w-0 p-2 text-white opacity-0 hover:text-black sm:w-auto sm:opacity-100">
1110
{"Yes, I really didn't put anything in this corner."}
1211
</div>
1312

0 commit comments

Comments
 (0)