Skip to content

Commit

Permalink
refactor(website): Upgrade dependencies and use StarlightPage compo…
Browse files Browse the repository at this point in the history 
…nent (#1854)
  • Loading branch information
@yanthomasdev
yanthomasdev authored Feb 18, 2024
1 parent 24308e4 commit 5394928
Show file tree
Hide file tree
Showing 9 changed files with 1,936 additions and 2,613 deletions.
4,212 changes: 1,823 additions & 2,389 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

49 changes: 8 additions & 41 deletions website/astro.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,10 @@
import { netlifyStatic } from "@astrojs/netlify";
import netlify from "@astrojs/netlify";
import react from "@astrojs/react";
import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import { h } from "hastscript";
import { escape as htmlEscape } from "html-escaper";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeSlug from "rehype-slug";
import remarkToc from "remark-toc";

const anchorLinkIcon = h(
"span",
{ ariaHidden: "true", class: "anchor-icon" },
h(
"svg",
{ width: 16, height: 16, viewBox: "0 0 24 24" },
h("path", {
fill: "currentcolor",
d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
}),
),
);

const anchorLinkSRLabel = (text: string) =>
h(
"span",
{ "is:raw": true, class: "sr-only" },
`Section titled ${htmlEscape(text)}`,
);

const autolinkConfig = {
properties: { class: "anchor-link" },
behavior: "after",
group: ({ tagName }) =>
h("div", { tabIndex: -1, class: `heading-wrapper level-${tagName}` }),
content: ({ heading }) => [anchorLinkIcon, anchorLinkSRLabel("test")],
};
import { searchForWorkspaceRoot } from "vite";
import { rehypeAutolink } from "./plugins/rehype-autolink";

const site = "https://biomejs.dev";
// https://astro.build/config
Expand All @@ -44,10 +14,6 @@ export default defineConfig({

compressHTML: true,

image: {
domains: ["avatars.githubusercontent.com"],
},

integrations: [
react(),
starlight({
Expand Down Expand Up @@ -397,11 +363,12 @@ export default defineConfig({

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

adapter: netlifyStatic(),
adapter: netlify({
imageCDN: false,
}),

vite: {
resolve: {
Expand All @@ -418,7 +385,7 @@ export default defineConfig({
server: {
fs: {
// https://vitejs.dev/config/server-options.html#server-fs-allow
allow: [process.cwd(), "../packages/@biomejs/wasm-web"],
allow: [searchForWorkspaceRoot(process.cwd())],
},
},
},
Expand Down
63 changes: 31 additions & 32 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,58 +16,57 @@
"textlint:fix": "textlint --fix './src/content/docs/ja/**/*.{md,mdx}'"
},
"devDependencies": {
"@astrojs/netlify": "^3.0.4",
"@astrojs/prism": "^2.1.2",
"@astrojs/react": "^2.3.2",
"@astrojs/rss": "^2.4.4",
"@astrojs/starlight": "^0.13.0",
"@astrojs/vercel": "^5.0.1",
"@astrojs/netlify": "^5.1.2",
"@astrojs/prism": "^3.0.0",
"@astrojs/react": "^3.0.10",
"@astrojs/rss": "^4.0.5",
"@astrojs/starlight": "^0.19.0",
"@biomejs/wasm-web": "link:../packages/@biomejs/wasm-web",
"@codemirror/lang-javascript": "6.1.8",
"@codemirror/lang-json": "6.0.1",
"@codemirror/lint": "6.2.1",
"@codemirror/state": "6.2.1",
"@codemirror/view": "6.12.0",
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lint": "^6.5.0",
"@codemirror/state": "^6.4.0",
"@codemirror/view": "^6.24.0",
"@docsearch/css": "^3.5.2",
"@docsearch/js": "^3.5.2",
"@fontsource/inter": "^4.5.15",
"@types/node": "^18.18.0",
"@types/react": "^18.2.23",
"@types/react-dom": "^18.2.8",
"@uiw/react-codemirror": "4.20.2",
"@types/node": "^18.19.17",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@uiw/react-codemirror": "^4.21.22",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"codemirror-lang-rome-ast": "0.0.6",
"autoprefixer": "^10.4.17",
"codemirror-lang-rome-ast": "^0.0.6",
"fast-diff": "^1.3.0",
"hast-util-to-html": "^8.0.4",
"hastscript": "^8.0.0",
"hast-util-to-html": "^9.0.0",
"hast-util-to-string": "^3.0.0",
"hastscript": "^9.0.0",
"html-escaper": "^3.0.3",
"lang-rome-formatter-ir": "0.0.2",
"mdast-util-to-hast": "^12.3.0",
"mdast-util-to-hast": "^13.1.0",
"mermaid": "^9.4.3",
"postcss": "^8.4.30",
"prettier": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"rehype-toc": "^3.0.2",
"remark-toc": "^8.0.1",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"remark-toc": "^9.0.0",
"rollup": "^3.29.4",
"sass": "^1.68.0",
"sass": "^1.71.0",
"sharp": "^0.32.6",
"textlint": "^13.4.1",
"textlint-rule-preset-jtf-style": "^2.3.13",
"textlint-rule-preset-jtf-style": "^2.3.14",
"textlint-rule-prh": "^5.3.0",
"typescript": "^5.2.2",
"typescript": "^5.3.3",
"vite": "5.0.10",
"vite-plugin-svgr": "^4.2.0"
},
"engines": {
"pnpm": "^8.0.0"
},
"dependencies": {
"astro": "^3.6.0",
"astro": "^4.4.0",
"astro-og-canvas": "^0.4.2",
"canvaskit-wasm": "^0.39.1"
}
Expand Down
43 changes: 43 additions & 0 deletions website/plugins/rehype-autolink.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import type { RehypePlugins } from "astro";
import { toString as hastToString } from "hast-util-to-string";
import { h } from "hastscript";
import { escape as htmlEscape } from "html-escaper";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

const anchorLinkIcon = h(
"span",
{ ariaHidden: "true", class: "anchor-icon" },
h(
"svg",
{ width: 16, height: 16, viewBox: "0 0 24 24" },
h("path", {
fill: "currentcolor",
d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
}),
),
);

const anchorLinkSRLabel = (text: string) =>
h(
"span",
{ "is:raw": true, class: "sr-only" },
`Section titled ${htmlEscape(text)}`,
);

const autolinkConfig = {
properties: { class: "anchor-link" },
behavior: "after",
group: ({ tagName }) =>
h("div", {
tabIndex: -1,
class: `heading-wrapper level-${tagName}`,
}),
content: (heading) => [
anchorLinkIcon,
anchorLinkSRLabel(hastToString(heading)),
],
};

export const rehypeAutolink = (): RehypePlugins => [
[rehypeAutolinkHeadings, autolinkConfig],
];
3 changes: 2 additions & 1 deletion website/src/components/InlineSVG.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ export interface Props {
const { src } = Astro.props as Props;
const files = await import.meta.glob<string>("/src/assets/svg/**/*.svg", {
as: "raw",
query: "?raw",
import: "default",
});
const path = `/src/assets/svg/${src}.svg`;
Expand Down
129 changes: 0 additions & 129 deletions website/src/layouts/StarlightSplashLayout.astro
View file

This file was deleted.

19 changes: 11 additions & 8 deletions website/src/pages/blog/[...slug].astro
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import { getCollection, type CollectionEntry } from "astro:content";
import BlogLayout from "@/layouts/Blog.astro";
import StarlightSplashLayout from "@/layouts/StarlightSplashLayout.astro";
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import { getImage } from "astro:assets";
export async function getStaticPaths() {
Expand Down Expand Up @@ -45,14 +45,17 @@ const head = [
];
---

<StarlightSplashLayout
title={post.title}
description={post.description}
slug={entry.slug}
head={head}
editUrl={`https://github.com/biomejs/biome/edit/main/website/src/content/blog/${entry.id}`}
<StarlightPage
frontmatter={{
title: post.title,
description: post.description,
slug: entry.slug,
head: head,
template: "splash",
editUrl: `https://github.com/biomejs/biome/edit/main/website/src/content/blog/${entry.id}`,
}}
>
<BlogLayout post={post}>
<Content />
</BlogLayout>
</StarlightSplashLayout>
</StarlightPage>
Loading

0 comments on commit 5394928

Please sign in to comment.