Skip to content

Commit 8ae5b5f

Browse files
authored
feat: bump astro + tailwiind + mark of the odd in ukranian (#10)
## Pull Request Overview This pull request bumps several dependencies (Astro, Tailwind, etc.) and updates class names across various components to reflect the new syntax conventions. Key changes include the update of Tailwind dynamic class syntax from square bracket notation to an incorrect parenthesis notation, adjustments in JSX element ordering, and the substitution of MDX wrappers in some components. ### Reviewed Changes Copilot reviewed 17 out of 23 changed files in this pull request and generated 16 comments. <details> <summary>Show a summary per file</summary> | File | Description | | ---- | ----------- | | src/routes/SearchRoute/SearchRoute.tsx | Updated Tailwind class for background color (incorrect syntax introduced). | | src/routes/ResourceRoute/ResourceRoute.tsx | Multiple Tailwind class changes affecting border and hover text styles. | | src/routes/PreviewGameAssetRoute/PreviewGameAssetRoute.tsx | Changed hover text Tailwind class and updated MDX wrapper. | | src/routes/PlayCampaignRoute/PlayCampaignRoute.tsx | Tailwind rounding class updated with incorrect syntax. | | src/routes/GameRoute/GameRoute.tsx | Updated hover text Tailwind class syntax. | | src/components/server/Header/Header.tsx | Updated container classes for rounding and borders using incorrect syntax. | | src/components/client/MDX/mdx-components/ui/MDXLabel.tsx | Incorrect Tailwind text color syntax applied. | | src/components/client/MDX/mdx-components/state/MDXTracker.tsx | Updated background and hover color classes with new syntax that is likely invalid. | | src/components/client/MDX/mdx-components/state/MDXRollingTable.tsx | Modified dynamic text color classes with broken syntax. | | src/components/client/DiceRoller/DiceRoller.tsx | Incorrect Tailwind color class syntax in icon and result text. | | src/components/client/Card/Card.tsx | Changed text color classes in Card component using erroneous syntax. | | astro.config.mjs | Modified Tailwind integration using the Vite plugin. | </details> <details> <summary>Files not reviewed (6)</summary> * **package.json**: Language not supported * **src/content/games/fari-rpgs/stoneburner/index.mdx**: Language not supported * **src/content/resources/bastionland-press/mark-of-the-odd/ua.mdx**: Language not supported * **src/content/resources/fari-rpgs/breathless/index.mdx**: Language not supported * **src/layouts/Layout.astro**: Language not supported * **src/layouts/index.css**: Language not supported </details> <details> <summary>Comments suppressed due to low confidence (2)</summary> **src/routes/GameRoute/GameRoute.tsx:54** * Update the class to 'hover:text-[--accent-12]' following Tailwind’s dynamic class syntax. ``` className="hover:text-(--accent-12)" ``` **src/components/client/DiceRoller/DiceRoller.tsx:226** * The Tailwind class should use square brackets—update 'text-(--accent-5)' to 'text-[--accent-5]'. ``` className="text-(--accent-5)" ``` </details>
1 parent e11ed46 commit 8ae5b5f

File tree

35 files changed

+1344
-1165
lines changed

35 files changed

+1344
-1165
lines changed

astro.config.mjs

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import netlify from "@astrojs/netlify";
33
import react from "@astrojs/react";
44
import sitemap from "@astrojs/sitemap";
55
import starlight from "@astrojs/starlight";
6-
import tailwind from "@astrojs/tailwind";
76
import { defineConfig } from "astro/config";
87

98
import { constants } from "./src/domains/utils/constants";
109

1110
import partytown from "@astrojs/partytown";
1211

12+
import tailwindcss from "@tailwindcss/vite";
13+
1314
// https://astro.build/config
1415
export default defineConfig({
1516
site: "https://keeper.farirpgs.com",
@@ -43,7 +44,6 @@ export default defineConfig({
4344
},
4445
}),
4546
react(),
46-
tailwind(),
4747
mdx(),
4848
sitemap(),
4949
partytown({
@@ -56,4 +56,7 @@ export default defineConfig({
5656
contentIntellisense: true,
5757
},
5858
adapter: netlify(),
59+
vite: {
60+
plugins: [tailwindcss()],
61+
},
5962
});

bun.lock

+248-439
Large diffs are not rendered by default.

package.json

+9-10
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,39 @@
1717
},
1818
"dependencies": {
1919
"@astrojs/check": "0.9.4",
20-
"@astrojs/mdx": "4.0.3",
21-
"@astrojs/netlify": "6.0.1",
22-
"@astrojs/partytown": "^2.1.3",
23-
"@astrojs/starlight": "^0.31.0",
24-
"@astrojs/react": "4.1.2",
25-
"@astrojs/sitemap": "^3.2.1",
26-
"@astrojs/tailwind": "5.1.4",
20+
"@astrojs/mdx": "4.2.2",
21+
"@astrojs/netlify": "6.2.4",
22+
"@astrojs/partytown": "2.1.4",
23+
"@astrojs/react": "4.2.2",
24+
"@astrojs/sitemap": "3.3.0",
25+
"@astrojs/starlight": "0.32.5",
2726
"@mdx-js/mdx": "^3.1.0",
2827
"@radix-ui/colors": "^3.0.0",
2928
"@radix-ui/react-icons": "^1.3.2",
3029
"@radix-ui/themes": "^3.1.6",
3130
"@tailwindcss/typography": "^0.5.16",
31+
"@tailwindcss/vite": "^4.0.9",
3232
"@types/bun": "^1.2.0",
3333
"@types/canvas-confetti": "^1.9.0",
3434
"@types/lodash": "^4.17.14",
3535
"@types/prompts": "^2.4.9",
3636
"@types/react": "^19.0.3",
3737
"@types/react-dom": "^19.0.2",
3838
"@vercel/og": "^0.6.4",
39-
"astro": "5.1.3",
39+
"astro": "5.5.5",
4040
"canvas-confetti": "^1.9.3",
4141
"clsx": "^2.1.1",
4242
"github-slugger": "^2.0.0",
4343
"lodash": "^4.17.21",
4444
"lucide-react": "^0.469.0",
4545
"prettier": "^3.4.2",
4646
"prettier-plugin-astro": "^0.14.1",
47-
"prettier-plugin-tailwindcss": "^0.6.9",
4847
"prompts": "^2.4.2",
4948
"react": "^19.0.0",
5049
"react-dom": "^19.0.0",
5150
"rehype-slug": "^6.0.0",
5251
"remark-gfm": "^4.0.0",
53-
"tailwindcss": "^3.4.17",
52+
"tailwindcss": "^4.0.9",
5453
"typescript": "^5.7.2",
5554
"zod": "^3.24.1"
5655
},

src/components/client/Card/Card.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function Card(props: {
8787
}}
8888
/>
8989
{props.badge && (
90-
<Box className="absolute right-4 top-4">{props.badge}</Box>
90+
<Box className="absolute top-4 right-4">{props.badge}</Box>
9191
)}
9292

9393
<Box position={"absolute"} className="bottom-0 left-0 w-full">
@@ -116,7 +116,7 @@ export function Card(props: {
116116
weight="bold"
117117
truncate
118118
color="gray"
119-
className="dark text-[--accent-a12]"
119+
className="dark text-(--accent-a12)"
120120
>
121121
{props.title}
122122
</Text>
@@ -128,7 +128,7 @@ export function Card(props: {
128128
size="5"
129129
color="gray"
130130
truncate
131-
className="dark text-[--accent-a11]"
131+
className="dark text-(--accent-a11)"
132132
>
133133
{props.subtitle}
134134
</Text>

src/components/client/DiceRoller/DiceRoller.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export function DiceRoller(props: { theme?: ThemeType; button?: boolean }) {
223223
<Flex direction="row" gap="2" wrap={"wrap"} justify={"center"}>
224224
{results.length === 0 && (
225225
<Text color="gray">
226-
<CircleOff size="6rem" className="text-[--accent-5]"></CircleOff>
226+
<CircleOff size="6rem" className="text-(--accent-5)"></CircleOff>
227227
</Text>
228228
)}
229229
{results.map((result, index) => {
@@ -270,7 +270,7 @@ export function DiceRoller(props: { theme?: ThemeType; button?: boolean }) {
270270

271271
function renderResultsText() {
272272
return (
273-
<Text color="gray" size={"1"} className="text-center text-[--accent-11]">
273+
<Text color="gray" size={"1"} className="text-center text-(--accent-11)">
274274
Click on a result to reroll it.
275275
<br />
276276
Right click on a result to add it to highlight it.
@@ -376,7 +376,7 @@ export function DiceRoller(props: { theme?: ThemeType; button?: boolean }) {
376376

377377
function renderCloseButton() {
378378
return (
379-
<Flex gap="3" justify="end" className="absolute right-0 top-0">
379+
<Flex gap="3" justify="end" className="absolute top-0 right-0">
380380
<Dialog.Close>
381381
<Button
382382
variant="ghost"

src/components/client/MDX/MDX.tsx

+34-25
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
Blockquote,
33
Card,
44
Em,
5-
Flex,
65
Heading,
76
Link,
87
Strong,
@@ -34,38 +33,48 @@ export const TEXT_CLASSES = "text-[1.2rem] leading-[1.5em] tracking-normal";
3433

3534
export function MDXWrapper(props: { children: React.ReactNode }) {
3635
return (
37-
<Flex gap="3" direction="column">
36+
<div className="prose prose-xl dark:prose-invert w-full max-w-full">
3837
{props.children}
39-
</Flex>
38+
</div>
39+
);
40+
}
41+
export function MDXSheetWrapper(props: { children: React.ReactNode }) {
42+
return (
43+
<div className="prose prose-xl dark:prose-invert w-full max-w-full">
44+
{props.children}
45+
</div>
46+
);
47+
}
48+
49+
export function Fields(props: { children: React.ReactNode }) {
50+
return (
51+
<div className="flex w-full flex-col gap-4 py-4 [&_*]:m-0">
52+
{props.children}
53+
</div>
4054
);
4155
}
4256

4357
export function getMdxComponents(arg: { allowH1s?: boolean } = {}) {
4458
const allowH1s = arg.allowH1s ?? true;
4559
return {
46-
h1: allowH1s ? (MDXH1 as any) : (MDXH2 as any),
47-
h2: allowH1s ? (MDXH2 as any) : (MDXH3 as any),
48-
h3: allowH1s ? (MDXH3 as any) : (MDXH4 as any),
49-
h4: allowH1s ? (MDXH4 as any) : (MDXH5 as any),
50-
h5: allowH1s ? (MDXH5 as any) : (MDXH6 as any),
51-
h6: allowH1s ? (MDXH6 as any) : (MDXH6 as any),
52-
a: MDXA as any,
60+
h1: allowH1s ? "h1" : "h2",
61+
h2: allowH1s ? "h2" : "h3",
62+
h3: allowH1s ? "h3" : "h4",
63+
h4: allowH1s ? "h4" : "h5",
64+
h5: allowH1s ? "h5" : "h6",
65+
h6: allowH1s ? "h6" : "h6",
66+
Fields: Fields,
67+
// add back links in h1-h6
68+
// add back fancier block quotes
69+
// add a container that removes all spacing for all sub children
70+
// h1: allowH1s ? (MDXH1 as any) : (MDXH2 as any),
71+
// h2: allowH1s ? (MDXH2 as any) : (MDXH3 as any),
72+
// h3: allowH1s ? (MDXH3 as any) : (MDXH4 as any),
73+
// h4: allowH1s ? (MDXH4 as any) : (MDXH5 as any),
74+
// h5: allowH1s ? (MDXH5 as any) : (MDXH6 as any),
75+
// h6: allowH1s ? (MDXH6 as any) : (MDXH6 as any),
76+
// a: MDXA as any,
5377
blockquote: MDXBlockquote as any,
54-
em: MDXEm as any,
55-
strong: MDXStrong as any,
56-
pre: MDXPre as any,
57-
ul: MDXUl as any,
58-
ol: MDXOl as any,
59-
li: MDXLi as any,
60-
code: MDXCode as any,
61-
p: MDXP as any,
62-
table: MDXTable as any,
63-
thead: MDXTHead as any,
64-
tbody: MDXTBody as any,
65-
tr: MDXTr as any,
66-
th: MDXTh as any,
67-
td: MDXTd as any,
68-
hr: MDXDivider as any,
6978
Divider: MDXDivider as any,
7079
Row: MDXRow as any,
7180
Columns: MDXColumns as any,

src/components/client/MDX/mdx-components/state/MDXRollingTable.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ export function MDXRollingTable(p: Props) {
112112
size="2"
113113
key={index}
114114
className={clsx(
115-
isLatest && "font-bold text-[--accent-11]",
116-
!isLatest && "text-[--gray-9]",
115+
isLatest && "font-bold text-(--accent-11)",
116+
!isLatest && "text-([)--gray-9)",
117117
)}
118118
>
119119
{index + 1}

src/components/client/MDX/mdx-components/state/MDXTracker.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ export function MDXTracker(p: Props) {
8585
variant={value ? "soft" : "soft"}
8686
className={clsx(
8787
{
88-
"bg-[--accent-7]": value,
89-
"bg-[--accent-4]": !value,
88+
"bg-(--accent-7)": value,
89+
"bg-(--accent-4)": !value,
9090
},
91-
"hover:bg-[--accent-5]",
91+
"hover:bg-(--accent-5)",
9292
)}
9393
key={i}
9494
disabled={campaignManager.readonly}

src/components/client/MDX/mdx-components/ui/MDXHeading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function MDXHeading(p: Props) {
1616
});
1717

1818
return (
19-
<Heading data-mdx-type="heading" size={"8"} weight={"bold"}>
19+
<Heading data-mdx-type="heading" weight={"bold"} className="text-3xl">
2020
{props.children}
2121
</Heading>
2222
);

src/components/client/MDX/mdx-components/ui/MDXLabel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function MDXLabel(p: Props) {
2222
data-mdx-type="label"
2323
size={"5"}
2424
weight={"bold"}
25-
className={clsx("text-[--accent-11]", {
25+
className={clsx("text-(--accent-11)", {
2626
"w-full": props.fullWidth,
2727
})}
2828
>

src/components/client/NothingToShowHere/NothingToShowHere.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function NothingToShowHere(props: {
2020
<div className="py-[10vh]">
2121
<Flex direction="column" gap="4" align="center">
2222
{Icon && <Icon size="20vh" className="mb-[2rem]"></Icon>}
23-
<MDXH1 as="h3" align={"center"}>
23+
<MDXH1 as="h3" align={"center"} size="6">
2424
{props.title}
2525
</MDXH1>
2626
<Text align={"center"}>{props.description}</Text>

src/components/server/GameWarningBanner/GameWarningBanner.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Callout } from "@radix-ui/themes";
44
export function GameWarningBanner() {
55
return (
66
<>
7-
<Callout.Root>
7+
<Callout.Root color="yellow">
88
<Callout.Icon>
99
<InfoCircledIcon />
1010
</Callout.Icon>

src/components/server/Header/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function Header(props: { theme?: ThemeType }) {
6565
justify={"between"}
6666
align={"center"}
6767
columns="3"
68-
className="my-9 items-center rounded-[--radius-2] border-b border-l border-r border-t border-[--accent-4] px-6 py-5 initial:my-6 initial:mb-[3rem] print:hidden"
68+
className="initial:my-6 initial:mb-[3rem] my-9 items-center rounded-(--radius-2) border-t border-r border-b border-l border-(--accent-4) px-6 py-5 print:hidden"
6969
style={{
7070
...getSurfaceStyle(),
7171
}}
@@ -190,7 +190,7 @@ export function Header(props: { theme?: ThemeType }) {
190190
<Flex
191191
gap="3"
192192
justify="end"
193-
className="absolute right-0 top-0"
193+
className="absolute top-0 right-0"
194194
>
195195
<Dialog.Close>
196196
<Button

src/content/assets/fari-rpgs/songs-and-sagas/character-sheet.mdx

+36-15
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ name: Character Sheet
33
game: fari-rpgs/songs-and-sagas
44
---
55

6+
<Fields>
7+
8+
<Fields>
69
<Heading>Details</Heading>
710
<TextField name="name"> Name </TextField>
811
<TextField name="pronouns"> Pronouns </TextField>
@@ -15,6 +18,9 @@ game: fari-rpgs/songs-and-sagas
1518
Vanori
1619

1720
</SelectField>
21+
</Fields>
22+
23+
<Fields>
1824

1925
<Heading>Skills</Heading>
2026
<Row>
@@ -23,17 +29,21 @@ Vanori
2329
<NumberField name="skills.willpower">Willpower</NumberField>
2430
<NumberField name="skills.heart">Heart</NumberField>
2531
</Row>
32+
</Fields>
2633

27-
<Heading>Resilience</Heading>
28-
<Row>
29-
<NumberField min={0} name="resilience.initial">
30-
Initial
31-
</NumberField>
32-
<NumberField min={0} name="resilience.current">
33-
Current
34-
</NumberField>
35-
</Row>
34+
<Fields>
35+
<Heading>Resilience</Heading>
36+
<Row>
37+
<NumberField min={0} name="resilience.initial">
38+
Initial
39+
</NumberField>
40+
<NumberField min={0} name="resilience.current">
41+
Current
42+
</NumberField>
43+
</Row>
44+
</Fields>
3645

46+
<Fields>
3747
<Heading>Armor</Heading>
3848
<Row>
3949
<TextField name="armor.name">Armor Name</TextField>
@@ -42,17 +52,28 @@ Vanori
4252
Type
4353
</SelectField>
4454
</Row>
55+
</Fields>
4556

46-
<Heading>Inventory</Heading>
47-
<List max={5} name="inventory">
48-
<TextField name="name" placeholder="Item name...">
49-
Item
50-
</TextField>
51-
</List>
57+
<Fields>
58+
<Heading>Inventory</Heading>
59+
<List max={5} name="inventory">
60+
<TextField name="name" placeholder="Item name...">
61+
Item
62+
</TextField>
63+
</List>
64+
</Fields>
5265

66+
<Fields>
5367
<Heading>Experience</Heading>
5468

5569
<Tracker name="experience" min={8} max={8} />
5670

71+
</Fields>
72+
73+
<Fields>
5774
<Heading>Notes</Heading>
5875
<TextAreaField name="notes" placeholder="Record your notes..." />
76+
77+
</Fields>
78+
79+
</Fields>

src/content/assets/fari-rpgs/songs-and-sagas/rolling-tables.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ name: Rolling Tables
33
game: fari-rpgs/songs-and-sagas
44
---
55

6+
<Fields>
67
<Columns>
78
<RollingTable
89
name="Themes"
@@ -270,3 +271,5 @@ game: fari-rpgs/songs-and-sagas
270271
"Roll twice, pick both",
271272
]}
272273
/>
274+
275+
</Fields>

0 commit comments

Comments
 (0)