refactor(website): Upgrade dependencies and use `StarlightPage` component #1854

yanthomasdev · 2024-02-18T01:10:31Z

Summary

This PR uses the new <StarlightPage> component instead of the custom <StarlightSplashLayout> one, which was making it impossible for us to upgrade Starlight, Astro and its dependencies.

I've added per-file comments explaining a few changes necessary due to the breaking changes from upgrading.

Test Plan

Visually expecting the website and seeing everything is working as usual

…nent

netlify · 2024-02-18T01:10:46Z

✅ Deploy Preview for biomejs ready!

Name	Link
🔨 Latest commit	`744f683`
🔍 Latest deploy log	https://app.netlify.com/sites/biomejs/deploys/65d2484cc1b4d000089fa8e1
😎 Deploy Preview	https://deploy-preview-1854--biomejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 97 (no change from production) Best Practices: 100 (no change from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

yanthomasdev · 2024-02-18T01:11:27Z

website/astro.config.ts

@@ -1,40 +1,9 @@
-import { netlifyStatic } from "@astrojs/netlify";


The static Netlify adapter will be deprecated, so I've removed it. Note that we technically don't even need this one, so we should feel safe to remove it as well.

We don't??? 😯🤯

Nope, both Vercel and Netlify let you deploy just fine without an adapter, we do mention it in the docs: https://docs.astro.build/en/guides/integrations-guide/netlify/

It might enable some host-specific features but for the most part, the adapters aren't focused on the static use case.

yanthomasdev · 2024-02-18T01:12:28Z

website/astro.config.ts

 import rehypeSlug from "rehype-slug";
-import remarkToc from "remark-toc";


Looks like we weren't using "remark-toc" anywhere, so I've removed it. Also, did the same for @astrojs/vercel, which isn't being used anymore.

yanthomasdev · 2024-02-18T01:15:40Z

website/astro.config.ts

@@ -397,11 +362,10 @@ export default defineConfig({

 	markdown: {
 		syntaxHighlight: "prism",
-		remarkPlugins: [remarkToc],
-		rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, autolinkConfig]],
+		rehypePlugins: [rehypeSlug, ...rehypeAutolink()],


Since the unified project had breaking changes, we now have some weird behavior clashing issue when trying to apply the remarkAutolink plugin, had to move it to an external file to make it work properly.

yanthomasdev · 2024-02-18T01:16:20Z

website/src/components/InlineSVG.astro

 }

 const { src } = Astro.props as Props;

 const files = await import.meta.glob<string>("/src/assets/svg/**/*.svg", {
-	as: "raw",


as: "raw" was deprecated in Vite, so I've replaced it for the recommended query: "?raw"

yanthomasdev · 2024-02-18T01:17:28Z

website/src/playground/PlaygroundLoader.tsx

@@ -343,7 +343,7 @@ function initState(
 				searchParams.get("bracketSpacing") === "true" ||
 				defaultPlaygroundState.settings.bracketSpacing,
 			bracketSameLine:
-				searchParams.get("bracketSameLine") === "true" ??
+				searchParams.get("bracketSameLine") === "true" ||


Vite was complaining and throwing an warning about this line where the left operand would always be used, might be a false alarm from it, so that's something we can change back, probably.

We should revert this change, it previously caused some issue

yanthomasdev · 2024-02-18T01:40:47Z

website/astro.config.ts

 	},

-	adapter: netlifyStatic(),
+	adapter: netlify(),

 	vite: {


For some reason Vite is complaining about some imported code by Astro's DevToolbar. Supposedly vite.server.fs.allow the path used should fix it, but didn't work for me.

We have to disable their remote image service, because they don't support multiple remote image domains from the config file. Their alternative is to use another configuration file

There we go, the vite.server.fs.allow issue should be fixed, Vite now has a utility to allow workspace packages to be served, which fixes the issue with serving files from dependencies.

ematipico · 2024-02-18T09:06:05Z

website/package.json

+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",


Seems like the playground doesn't work anymore. Unless you want to spend time understanding the issue, maybe we can revert the change

The issue doesn't seem related to updating the React dependencies, reverting them doesn't fix, nor does loading the Playground without <StarlightPage> - my best guess it might be Vite-related? But hard to know without context on how the Playground was built.

ematipico · 2024-02-18T09:07:44Z

website/astro.config.ts

 	},

-	adapter: netlifyStatic(),
+	adapter: netlify(),

 	vite: {


We have to disable their remote image service, because they don't support multiple remote image domains from the config file. Their alternative is to use another configuration file

ematipico · 2024-02-18T09:09:08Z

website/src/playground/PlaygroundLoader.tsx

@@ -343,7 +343,7 @@ function initState(
 				searchParams.get("bracketSpacing") === "true" ||
 				defaultPlaygroundState.settings.bracketSpacing,
 			bracketSameLine:
-				searchParams.get("bracketSameLine") === "true" ??
+				searchParams.get("bracketSameLine") === "true" ||


We should revert this change, it previously caused some issue

ematipico · 2024-02-18T09:09:47Z

website/astro.config.ts

@@ -1,40 +1,9 @@
-import { netlifyStatic } from "@astrojs/netlify";


We don't??? 😯🤯

Sec-ant · 2024-02-18T15:31:28Z

website/package.json

@@ -34,25 +33,25 @@
 		"@types/node": "^18.18.0",
 		"@types/react": "^18.2.23",
 		"@types/react-dom": "^18.2.8",
-		"@uiw/react-codemirror": "4.20.2",
+		"@uiw/react-codemirror": "4.21.21",


The playground not working anymore is caused by this bump.

This version of @uiw/react-codemirror indirectly requires the version of @codemirror/state to be in range ^0.6.4 because of its dependencies: @codemirror/view and @codemirror/commands.

However @codemirror/[email protected] is explicitly pinned in the devDependencies, so two versions of @codemirror/state are installed and hence the error occurs which you can find in the console, and it breaks the playground.

A simple fix is to bump the @codemirror/state in devDepedencies to 0.6.4.

And IMHO a future-proof fix is to try not pinning these low-level dependencies (including other codemirror tools) but use semver ranges instead.

Nice catch, thanks @Sec-ant - hadn't noticed the dependencies were pinned, I've moved them to ranges instead and seem to be working fine locally!

ysm-dev · 2024-02-19T01:19:06Z

RSS link broken after this PR: https://biomejs.dev/feed.xml

yanthomasdev · 2024-02-19T18:15:23Z

RSS link broken after this PR: biomejs.dev/feed.xml

I'll give it a look, thanks for noticing @ysm-dev!

refactor(website): Upgrade dependencies and use StarlightPage compo…

5c40dad

…nent

github-actions bot added the A-Website Area: website label Feb 18, 2024

yanthomasdev commented Feb 18, 2024

View reviewed changes

Remove strict: false and sort imports

5112f20

yanthomasdev commented Feb 18, 2024

View reviewed changes

ematipico reviewed Feb 18, 2024

View reviewed changes

yanthomasdev added 2 commits February 18, 2024 08:32

Disable Netlify Image CDN

d23a298

revert PlaygroundLoader.tsx change

295f4bd

Sec-ant reviewed Feb 18, 2024

View reviewed changes

yanthomasdev added 5 commits February 18, 2024 13:34

Fix vite.server.fs.allow issue

cf4be25

Bump dependencies and use semver ranges instead

f5f7a1d

Update lockfile

15f3673

Run formatting

591e95a

Merge branch 'main' into starlight-refactor

744f683

ematipico approved these changes Feb 18, 2024

View reviewed changes

ematipico merged commit 5394928 into biomejs:main Feb 18, 2024
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(website): Upgrade dependencies and use `StarlightPage` component #1854

refactor(website): Upgrade dependencies and use `StarlightPage` component #1854

yanthomasdev commented Feb 18, 2024 •

edited

Loading

netlify bot commented Feb 18, 2024 •

edited

Loading

yanthomasdev Feb 18, 2024

ematipico Feb 18, 2024

yanthomasdev Feb 18, 2024

yanthomasdev Feb 18, 2024

yanthomasdev Feb 18, 2024

yanthomasdev Feb 18, 2024

yanthomasdev Feb 18, 2024

ematipico Feb 18, 2024

yanthomasdev Feb 18, 2024

ematipico Feb 18, 2024

yanthomasdev Feb 18, 2024 •

edited

Loading

ematipico Feb 18, 2024

yanthomasdev Feb 18, 2024

ematipico Feb 18, 2024

ematipico Feb 18, 2024

ematipico Feb 18, 2024

Sec-ant Feb 18, 2024 •

edited

Loading

yanthomasdev Feb 18, 2024

ysm-dev commented Feb 19, 2024

yanthomasdev commented Feb 19, 2024

		@@ -1,40 +1,9 @@
		import { netlifyStatic } from "@astrojs/netlify";

		import rehypeSlug from "rehype-slug";
		import remarkToc from "remark-toc";

refactor(website): Upgrade dependencies and use StarlightPage component #1854

refactor(website): Upgrade dependencies and use StarlightPage component #1854

Conversation

yanthomasdev commented Feb 18, 2024 • edited Loading

Summary

Test Plan

netlify bot commented Feb 18, 2024 • edited Loading

✅ Deploy Preview for biomejs ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yanthomasdev Feb 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sec-ant Feb 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ysm-dev commented Feb 19, 2024

yanthomasdev commented Feb 19, 2024

refactor(website): Upgrade dependencies and use `StarlightPage` component #1854

refactor(website): Upgrade dependencies and use `StarlightPage` component #1854

yanthomasdev commented Feb 18, 2024 •

edited

Loading

netlify bot commented Feb 18, 2024 •

edited

Loading

yanthomasdev Feb 18, 2024 •

edited

Loading

Sec-ant Feb 18, 2024 •

edited

Loading