@astrojs/starlight 0.10.4 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -22,18 +22,147 @@
   "exports": {
     ".": "./index.ts",
     "./components": "./components.ts",
+    "./components/Badge.astro": {
+      "types": "./components/Badge.astro.tsx",
+      "import": "./components/Badge.astro"
+    },
+    "./components/LanguageSelect.astro": {
+      "types": "./components/LanguageSelect.astro.tsx",
+      "import": "./components/LanguageSelect.astro"
+    },
+    "./components/Select.astro": {
+      "types": "./components/Select.astro.tsx",
+      "import": "./components/Select.astro"
+    },
+    "./components/Banner.astro": {
+      "types": "./components/Banner.astro.tsx",
+      "import": "./components/Banner.astro"
+    },
+    "./components/LastUpdated.astro": {
+      "types": "./components/LastUpdated.astro.tsx",
+      "import": "./components/LastUpdated.astro"
+    },
+    "./components/Sidebar.astro": {
+      "types": "./components/Sidebar.astro.tsx",
+      "import": "./components/Sidebar.astro"
+    },
+    "./components/CallToAction.astro": {
+      "types": "./components/CallToAction.astro.tsx",
+      "import": "./components/CallToAction.astro"
+    },
+    "./components/MarkdownContent.astro": {
+      "types": "./components/MarkdownContent.astro.tsx",
+      "import": "./components/MarkdownContent.astro"
+    },
+    "./components/SidebarSublist.astro": {
+      "types": "./components/SidebarSublist.astro.tsx",
+      "import": "./components/SidebarSublist.astro"
+    },
+    "./components/ContentPanel.astro": {
+      "types": "./components/ContentPanel.astro.tsx",
+      "import": "./components/ContentPanel.astro"
+    },
+    "./components/MobileMenuFooter.astro": {
+      "types": "./components/MobileMenuFooter.astro.tsx",
+      "import": "./components/MobileMenuFooter.astro"
+    },
+    "./components/SiteTitle.astro": {
+      "types": "./components/SiteTitle.astro.tsx",
+      "import": "./components/SiteTitle.astro"
+    },
+    "./components/EditLink.astro": {
+      "types": "./components/EditLink.astro.tsx",
+      "import": "./components/EditLink.astro"
+    },
+    "./components/MobileMenuToggle.astro": {
+      "types": "./components/MobileMenuToggle.astro.tsx",
+      "import": "./components/MobileMenuToggle.astro"
+    },
+    "./components/SkipLink.astro": {
+      "types": "./components/SkipLink.astro.tsx",
+      "import": "./components/SkipLink.astro"
+    },
+    "./components/MobileTableOfContents.astro": {
+      "types": "./components/MobileTableOfContents.astro.tsx",
+      "import": "./components/MobileTableOfContents.astro"
+    },
+    "./components/SocialIcons.astro": {
+      "types": "./components/SocialIcons.astro.tsx",
+      "import": "./components/SocialIcons.astro"
+    },
+    "./components/FallbackContentNotice.astro": {
+      "types": "./components/FallbackContentNotice.astro.tsx",
+      "import": "./components/FallbackContentNotice.astro"
+    },
+    "./components/Page.astro": {
+      "types": "./components/Page.astro.tsx",
+      "import": "./components/Page.astro"
+    },
+    "./components/Footer.astro": {
+      "types": "./components/Footer.astro.tsx",
+      "import": "./components/Footer.astro"
+    },
+    "./components/PageFrame.astro": {
+      "types": "./components/PageFrame.astro.tsx",
+      "import": "./components/PageFrame.astro"
+    },
+    "./components/TableOfContents.astro": {
+      "types": "./components/TableOfContents.astro.tsx",
+      "import": "./components/TableOfContents.astro"
+    },
+    "./components/Head.astro": {
+      "types": "./components/Head.astro.tsx",
+      "import": "./components/Head.astro"
+    },
+    "./components/PageSidebar.astro": {
+      "types": "./components/PageSidebar.astro.tsx",
+      "import": "./components/PageSidebar.astro"
+    },
+    "./components/ThemeProvider.astro": {
+      "types": "./components/ThemeProvider.astro.tsx",
+      "import": "./components/ThemeProvider.astro"
+    },
+    "./components/Header.astro": {
+      "types": "./components/Header.astro.tsx",
+      "import": "./components/Header.astro"
+    },
+    "./components/PageTitle.astro": {
+      "types": "./components/PageTitle.astro.tsx",
+      "import": "./components/PageTitle.astro"
+    },
+    "./components/ThemeSelect.astro": {
+      "types": "./components/ThemeSelect.astro.tsx",
+      "import": "./components/ThemeSelect.astro"
+    },
+    "./components/Hero.astro": {
+      "types": "./components/Hero.astro.tsx",
+      "import": "./components/Hero.astro"
+    },
+    "./components/Pagination.astro": {
+      "types": "./components/Pagination.astro.tsx",
+      "import": "./components/Pagination.astro"
+    },
+    "./components/TwoColumnContent.astro": {
+      "types": "./components/TwoColumnContent.astro.tsx",
+      "import": "./components/TwoColumnContent.astro"
+    },
+    "./components/Search.astro": {
+      "types": "./components/Search.astro.tsx",
+      "import": "./components/Search.astro"
+    },
+    "./props": "./props.ts",
     "./schema": "./schema.ts",
     "./types": "./types.ts",
     "./index.astro": "./index.astro",
     "./404.astro": "./404.astro"
   },
   "peerDependencies": {
-    "astro": "^3.0.0"
+    "astro": "^3.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^0.33.0",
-    "astro": "^3.2.1",
+    "astro": "^3.2.3",
     "vitest": "^0.33.0"
   },
   "dependencies": {

package/props.ts

@@ -0,0 +1 @@
+export type { StarlightRouteData as Props } from './utils/route-data';

package/schema.ts

@@ -5,6 +5,7 @@ import { PrevNextLinkConfigSchema } from './schemas/prevNextLink';
 import { TableOfContentsSchema } from './schemas/tableOfContents';
 import { Icons } from './components/Icons';
 import { BadgeConfigSchema } from './schemas/badge';
+import { SidebarLinkItemHTMLAttributesSchema } from './schemas/sidebar';
 export { i18nSchema } from './schemas/i18n';
 
 type IconName = keyof typeof Icons;
@@ -139,6 +140,8 @@ export function docsSchema() {
 					 * Passing only a string defaults to the 'default' variant which uses the site accent color.
 					 */
 					badge: BadgeConfigSchema(),
+					/** HTML attributes to add to the sidebar link. */
+					attrs: SidebarLinkItemHTMLAttributesSchema(),
 				})
 				.default({}),
 

package/schemas/components.ts

@@ -0,0 +1,256 @@
+import { z } from 'astro/zod';
+
+export function ComponentConfigSchema() {
+	return z
+		.object({
+			/*
+			HEAD ----------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Component rendered inside each page’s `<head>`.
+			 * Includes important tags including `<title>`, and `<meta charset="utf-8">`.
+			 *
+			 * Override this component as a last resort. Prefer the `head` option Starlight config if possible.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Head.astro `Head` default implementation}
+			 */
+			Head: z.string().default('@astrojs/starlight/components/Head.astro'),
+
+			/**
+			 * Component rendered inside `<head>` that sets up dark/light theme support.
+			 * The default implementation includes an inline script and a `<template>` used by the
+			 * script in `ThemeSelect.astro`.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeProvider.astro `ThemeProvider` default implementation}
+			 */
+			ThemeProvider: z.string().default('@astrojs/starlight/components/ThemeProvider.astro'),
+
+			/*
+			BODY ----------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Component rendered as the first element inside `<body>` which links to the main page
+			 * content for accessibility. The default implementation is hidden until a user focuses it
+			 * by tabbing with their keyboard.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/SkipLink.astro `SkipLink` default implementation}
+			 */
+			SkipLink: z.string().default('@astrojs/starlight/components/SkipLink.astro'),
+
+			/*
+			LAYOUT --------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Layout component wrapped around most of the page content.
+			 * The default implementation sets up the header–sidebar–main layout and includes
+			 * `header` and `sidebar` named slots along with a default slot for the main content.
+			 * It also renders `<MobileMenuToggle />` to support toggling the sidebar navigation
+			 * on small (mobile) viewports.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageFrame.astro `PageFrame` default implementation}
+			 */
+			PageFrame: z.string().default('@astrojs/starlight/components/PageFrame.astro'),
+			/**
+			 * Component rendered inside `<PageFrame>` that is responsible for toggling the
+			 * sidebar navigation on small (mobile) viewports.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuToggle.astro `MobileMenuToggle` default implementation}
+			 */
+			MobileMenuToggle: z.string().default('@astrojs/starlight/components/MobileMenuToggle.astro'),
+
+			/**
+			 * Layout component wrapped around the main content column and right sidebar (table of contents).
+			 * The default implementation handles the switch between a single-column, small-viewport layout
+			 * and a two-column, larger-viewport layout.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/TwoColumnContent.astro `TwoColumnContent` default implementation}
+			 */
+			TwoColumnContent: z.string().default('@astrojs/starlight/components/TwoColumnContent.astro'),
+
+			/*
+			HEADER --------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Header component displayed at the top of every page.
+			 * The default implementation displays `<SiteTitle />`, `<Search />`, `<SocialIcons />`,
+			 * `<ThemeSelect />`, and `<LanguageSelect />`.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro `Header` default implementation}
+			 */
+			Header: z.string().default('@astrojs/starlight/components/Header.astro'),
+			/**
+			 * Component rendered at the start of the site header to render the site title.
+			 * The default implementation includes logic for rendering logos defined in Starlight config.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/SiteTitle.astro `SiteTitle` default implementation}
+			 */
+			SiteTitle: z.string().default('@astrojs/starlight/components/SiteTitle.astro'),
+			/**
+			 * Component used to render Starlight’s search UI. The default implementation includes the
+			 * button in the header and the code for displaying a search modal when it is clicked.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro `Search` default implementation}
+			 */
+			Search: z.string().default('@astrojs/starlight/components/Search.astro'),
+			/**
+			 * Component rendered in the site header including social icon links. The default
+			 * implementation uses the `social` option in Starlight config to render icons and links.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/SocialIcons.astro `SocialIcons` default implementation}
+			 */
+			SocialIcons: z.string().default('@astrojs/starlight/components/SocialIcons.astro'),
+			/**
+			 * Component rendered in the site header that allows users to select their preferred color scheme.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeSelect.astro `ThemeSelect` default implementation}
+			 */
+			ThemeSelect: z.string().default('@astrojs/starlight/components/ThemeSelect.astro'),
+			/**
+			 * Component rendered in the site header that allows users to switch to a different language.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/LanguageSelect.astro `LanguageSelect` default implementation}
+			 */
+			LanguageSelect: z.string().default('@astrojs/starlight/components/LanguageSelect.astro'),
+
+			/*
+			SIDEBAR -------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Component rendered before page content that contains global navigation.
+			 * The default implementation displays as a sidebar on wide enough viewports and inside a
+			 * drop-down menu on small (mobile) viewports. It also renders `<MobileMenuFooter />` to
+			 * show additional items inside the mobile menu.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Sidebar.astro `Sidebar` default implementation}
+			 */
+			Sidebar: z.string().default('@astrojs/starlight/components/Sidebar.astro'),
+			/**
+			 * Component rendered at the bottom of the mobile drop-down menu.
+			 * The default implementation renders `<ThemeSelect />` and `<LanguageSelect />`.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuFooter.astro `MobileMenuFooter` default implementation}
+			 */
+			MobileMenuFooter: z.string().default('@astrojs/starlight/components/MobileMenuFooter.astro'),
+
+			/*
+			TOC -----------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Component rendered before the main page’s content to display a table of contents.
+			 * The default implementation renders `<TableOfContents />` and `<MobileTableOfContents />`.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageSidebar.astro `PageSidebar` default implementation}
+			 */
+			PageSidebar: z.string().default('@astrojs/starlight/components/PageSidebar.astro'),
+			/**
+			 * Component that renders the current page’s table of contents on wider viewports.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/TableOfContents.astro `TableOfContents` default implementation}
+			 */
+			TableOfContents: z.string().default('@astrojs/starlight/components/TableOfContents.astro'),
+			/**
+			 * Component that renders the current page’s table of contents on small (mobile) viewports.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileTableOfContents.astro `MobileTableOfContents` default implementation}
+			 */
+			MobileTableOfContents: z
+				.string()
+				.default('@astrojs/starlight/components/MobileTableOfContents.astro'),
+
+			/*
+			CONTENT HEADER ------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Banner component rendered at the top of each page. The default implementation uses the
+			 * page’s `banner` frontmatter value to decide whether or not to render.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Banner.astro `Banner` default implementation}
+			 */
+			Banner: z.string().default('@astrojs/starlight/components/Banner.astro'),
+
+			/**
+			 * Layout component used to wrap sections of the main content column.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/ContentPanel.astro `ContentPanel` default implementation}
+			 */
+			ContentPanel: z.string().default('@astrojs/starlight/components/ContentPanel.astro'),
+
+			/**
+			 * Component containing the `<h1>` element for the current page.
+			 *
+			 * Implementations should ensure they set `id="_top"` on the `<h1>` element as in the default
+			 * implementation.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageTitle.astro `PageTitle` default implementation}
+			 */
+			PageTitle: z.string().default('@astrojs/starlight/components/PageTitle.astro'),
+
+			/**
+			 * Notice displayed to users on pages where a translation for the current language is not
+			 * available. Only used on multilingual sites.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/FallbackContentNotice.astro `FallbackContentNotice` default implementation}
+			 */
+			FallbackContentNotice: z
+				.string()
+				.default('@astrojs/starlight/components/FallbackContentNotice.astro'),
+
+			/**
+			 * Component rendered at the top of the page when `hero` is set in frontmatter. The default
+			 * implementation shows a large title, tagline, and call-to-action links alongside an optional image.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Hero.astro `Hero` default implementation}
+			 */
+			Hero: z.string().default('@astrojs/starlight/components/Hero.astro'),
+
+			/*
+			CONTENT -------------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Component rendered around each page’s main content.
+			 * The default implementation sets up basic styles to apply to Markdown content.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/MarkdownContent.astro `MarkdownContent` default implementation}
+			 */
+			MarkdownContent: z.string().default('@astrojs/starlight/components/MarkdownContent.astro'),
+
+			/*
+			CONTENT FOOTER ------------------------------------------------------------------------------
+			*/
+
+			/**
+			 * Footer component displayed at the bottom of each documentation page.
+			 * The default implementation displays `<LastUpdated />`, `<Pagination />`, and `<EditLink />`.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Footer.astro `Footer` default implementation}
+			 */
+			Footer: z.string().default('@astrojs/starlight/components/Footer.astro'),
+			/**
+			 * Component rendered in the page footer to display the last-updated date.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/LastUpdated.astro `LastUpdated` default implementation}
+			 */
+			LastUpdated: z.string().default('@astrojs/starlight/components/LastUpdated.astro'),
+			/**
+			 * Component rendered in the page footer to display navigation arrows between previous/next pages.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/Pagination.astro `Pagination` default implementation}
+			 */
+			Pagination: z.string().default('@astrojs/starlight/components/Pagination.astro'),
+			/**
+			 * Component rendered in the page footer to display a link to where the page can be edited.
+			 *
+			 * @see {@link https://github.com/withastro/starlight/blob/main/packages/starlight/components/EditLink.astro `EditLink` default implementation}
+			 */
+			EditLink: z.string().default('@astrojs/starlight/components/EditLink.astro'),
+		})
+		.default({});
+}

package/schemas/sidebar.ts

@@ -0,0 +1,89 @@
+import type { AstroBuiltinAttributes } from 'astro';
+import type { HTMLAttributes } from 'astro/types';
+import { z } from 'astro/zod';
+import { BadgeConfigSchema } from './badge';
+
+const SidebarBaseSchema = z.object({
+	/** The visible label for this item in the sidebar. */
+	label: z.string(),
+	/** Translations of the `label` for each supported language. */
+	translations: z.record(z.string()).default({}),
+});
+
+const SidebarGroupSchema = SidebarBaseSchema.extend({
+	/** Whether this item should be collapsed by default. */
+	collapsed: z.boolean().default(false),
+});
+
+// HTML attributes that can be added to an anchor element, validated as
+// `Record<string, string | number | boolean | undefined>` but typed as `HTMLAttributes<'a'>`
+// for user convenience.
+const linkHTMLAttributesSchema = z.record(
+	z.union([z.string(), z.number(), z.boolean(), z.undefined()])
+) as z.Schema<Omit<HTMLAttributes<'a'>, keyof AstroBuiltinAttributes | 'children'>>;
+export type LinkHTMLAttributes = z.infer<typeof linkHTMLAttributesSchema>;
+
+export const SidebarLinkItemHTMLAttributesSchema = () => linkHTMLAttributesSchema.default({});
+
+const SidebarLinkItemSchema = SidebarBaseSchema.extend({
+	/** The link to this item’s content. Can be a relative link to local files or the full URL of an external page. */
+	link: z.string(),
+	/** Adds a badge to the link item */
+	badge: BadgeConfigSchema(),
+	/** HTML attributes to add to the link item. */
+	attrs: SidebarLinkItemHTMLAttributesSchema(),
+});
+export type SidebarLinkItem = z.infer<typeof SidebarLinkItemSchema>;
+
+const AutoSidebarGroupSchema = SidebarGroupSchema.extend({
+	/** Enable autogenerating a sidebar category from a specific docs directory. */
+	autogenerate: z.object({
+		/** The directory to generate sidebar items for. */
+		directory: z.string(),
+		/**
+		 * Whether the autogenerated subgroups should be collapsed by default.
+		 * Defaults to the `AutoSidebarGroup` `collapsed` value.
+		 */
+		collapsed: z.boolean().optional(),
+		// TODO: not supported by Docusaurus but would be good to have
+		/** How many directories deep to include from this directory in the sidebar. Default: `Infinity`. */
+		// depth: z.number().optional(),
+	}),
+});
+export type AutoSidebarGroup = z.infer<typeof AutoSidebarGroupSchema>;
+
+type ManualSidebarGroupInput = z.input<typeof SidebarGroupSchema> & {
+	/** Array of links and subcategories to display in this category. */
+	items: Array<
+		| z.input<typeof SidebarLinkItemSchema>
+		| z.input<typeof AutoSidebarGroupSchema>
+		| ManualSidebarGroupInput
+	>;
+};
+
+type ManualSidebarGroupOutput = z.output<typeof SidebarGroupSchema> & {
+	/** Array of links and subcategories to display in this category. */
+	items: Array<
+		| z.output<typeof SidebarLinkItemSchema>
+		| z.output<typeof AutoSidebarGroupSchema>
+		| ManualSidebarGroupOutput
+	>;
+};
+
+const ManualSidebarGroupSchema: z.ZodType<
+	ManualSidebarGroupOutput,
+	z.ZodTypeDef,
+	ManualSidebarGroupInput
+> = SidebarGroupSchema.extend({
+	/** Array of links and subcategories to display in this category. */
+	items: z.lazy(() =>
+		z.union([SidebarLinkItemSchema, ManualSidebarGroupSchema, AutoSidebarGroupSchema]).array()
+	),
+});
+
+export const SidebarItemSchema = z.union([
+	SidebarLinkItemSchema,
+	ManualSidebarGroupSchema,
+	AutoSidebarGroupSchema,
+]);
+export type SidebarItem = z.infer<typeof SidebarItemSchema>;

package/schemas/social.ts

@@ -0,0 +1,65 @@
+import { z } from 'astro/zod';
+
+export const SocialLinksSchema = () =>
+	z
+		.record(
+			z.enum([
+				'twitter',
+				'mastodon',
+				'github',
+				'gitlab',
+				'bitbucket',
+				'discord',
+				'gitter',
+				'codeberg',
+				'codePen',
+				'youtube',
+				'threads',
+				'linkedin',
+				'twitch',
+				'microsoftTeams',
+				'instagram',
+				'stackOverflow',
+				'x.com',
+				'telegram',
+				'rss',
+				'facebook',
+				'email',
+			]),
+			// Link to the respective social profile for this site
+			z.string().url()
+		)
+		.transform((links) => {
+			const labelledLinks: Partial<Record<keyof typeof links, { label: string; url: string }>> = {};
+			for (const _k in links) {
+				const key = _k as keyof typeof links;
+				const url = links[key];
+				if (!url) continue;
+				const label = {
+					github: 'GitHub',
+					gitlab: 'GitLab',
+					bitbucket: 'Bitbucket',
+					discord: 'Discord',
+					gitter: 'Gitter',
+					twitter: 'Twitter',
+					mastodon: 'Mastodon',
+					codeberg: 'Codeberg',
+					codePen: 'CodePen',
+					youtube: 'YouTube',
+					threads: 'Threads',
+					linkedin: 'LinkedIn',
+					twitch: 'Twitch',
+					microsoftTeams: 'Microsoft Teams',
+					instagram: 'Instagram',
+					stackOverflow: 'Stack Overflow',
+					'x.com': 'X',
+					telegram: 'Telegram',
+					rss: 'RSS',
+					facebook: 'Facebook',
+					email: 'Email',
+				}[key];
+				labelledLinks[key] = { label, url };
+			}
+			return labelledLinks;
+		})
+		.optional();

package/style/reset.css

@@ -40,7 +40,7 @@ h4,
 h5,
 h6,
 code {
-	overflow-wrap: break-word;
+	overflow-wrap: anywhere;
 }
 
 code {

package/translations/index.ts

@@ -19,6 +19,7 @@ import zh from './zh.json';
 import ko from './ko.json';
 import sv from './sv.json';
 import ru from './ru.json';
+import vi from './vi.json';
 
 const { parse } = builtinI18nSchema();
 
@@ -44,5 +45,6 @@ export default Object.fromEntries(
 		ko,
 		sv,
 		ru,
+		vi,
 	}).map(([key, dict]) => [key, parse(dict)])
 );

package/translations/vi.json

@@ -0,0 +1,22 @@
+{
+  "skipLink.label": "Bỏ qua nội dung",
+  "search.label": "Tìm kiếm",
+  "search.shortcutLabel": "(Nhấn / để Tìm kiếm)",
+  "search.cancelLabel": "Thoát",
+  "search.devWarning": "Tìm kiếm không khả dụng khi đang trong môi trường lập trình. \nThử xuất bản website và tìm kiếm.",
+  "themeSelect.accessibleLabel": "Chọn giao diện",
+  "themeSelect.dark": "Tối",
+  "themeSelect.light": "Sáng",
+  "themeSelect.auto": "Tự động",
+  "languageSelect.accessibleLabel": "Chọn ngôn ngữ",
+  "menuButton.accessibleLabel": "Menu",
+  "sidebarNav.accessibleLabel": "Chính",
+  "tableOfContents.onThisPage": "Tóm tắt",
+  "tableOfContents.overview": "Tổng quát",
+  "i18n.untranslatedContent": "Nội dung này không tồn tại trong ngôn ngữ của bạn",
+  "page.editLink": "Chỉnh sửa trang",
+  "page.lastUpdated": "Cập nhật lần cuối:",
+  "page.previousLink": "Tiếp",
+  "page.nextLink": "Trước",
+  "404.text": "Không tìm thấy trang. Kiểm tra URL hoặc thử sử dụng thanh tìm kiếm."
+}

package/{components/TableOfContents → utils}/generateToC.ts

@@ -1,4 +1,5 @@
 import type { MarkdownHeading } from 'astro';
+import { PAGE_TITLE_ID } from '../constants';
 
 export interface TocItem extends MarkdownHeading {
 	children: TocItem[];
@@ -16,7 +17,7 @@ export function generateToC(
 	{ minHeadingLevel, maxHeadingLevel, title }: TocOpts
 ) {
 	headings = headings.filter(({ depth }) => depth >= minHeadingLevel && depth <= maxHeadingLevel);
-	const toc: Array<TocItem> = [{ depth: 2, slug: '_top', text: title, children: [] }];
+	const toc: Array<TocItem> = [{ depth: 2, slug: PAGE_TITLE_ID, text: title, children: [] }];
 	for (const heading of headings) injectChild(toc, { ...heading, children: [] });
 	return toc;
 }