@luciodale/docs-ui-kit 0.3.1 → 0.3.2

package/README.md

@@ -621,6 +621,31 @@ export const prerender = true;
 
 React islands require `@astrojs/react` in your Astro project. The docs-ui-kit itself has zero React dependency.
 
+## OG Image Generator
+
+Generate a 1200x630 Open Graph preview image for link sharing (Slack, Twitter, Discord, etc.). Reads `public/logo.svg` for the logo and `installCommand` from `src/config.ts` for the npm package name. Outputs `public/og-image.png`.
+
+```bash
+bun run og-image <path-to-docs-site>
+```
+
+Example from the docs-ui-kit root:
+
+```bash
+bun run og-image ../react-socket/packages/docs
+```
+
+Then set `ogImage` in the docs site config:
+
+```ts
+export const siteConfig: SiteConfig = {
+  // ...
+  ogImage: "/og-image.png",
+};
+```
+
+The SEO component picks up `ogImage` and renders `og:image`, `og:image:width`, `og:image:height`, and `twitter:image` tags automatically.
+
 ## Color palette
 
 Defined in `theme.css` via Tailwind v4 `@theme` tokens:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luciodale/docs-ui-kit",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "Astro component library for documentation sites. Dark theme, orange accent.",
 	"type": "module",
 	"exports": {
@@ -19,7 +19,8 @@
 		"lint:fix": "biome check --write .",
 		"build": "bunx @tailwindcss/cli --input src/styles/build-input.css --output src/styles/utilities.css --minify",
 		"npm": "bun run build && npm publish --access public",
-		"npm:test": "npm pack --dry-run"
+		"npm:test": "npm pack --dry-run",
+		"og-image": "bun run scripts/generate-og-image.ts"
 	},
 	"peerDependencies": {
 		"astro": ">=5"
@@ -29,6 +30,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.7",
+		"@resvg/resvg-js": "^2.6.2",
 		"@tailwindcss/cli": "^4.2.2",
 		"astro": "^5.0.0",
 		"tailwindcss": "^4.2.2",

package/src/components/SEO.astro

@@ -23,8 +23,9 @@ const {
 	noindex = false,
 } = Astro.props;
 
-const canonicalUrl = new URL(currentPath, config.siteUrl).href;
-const ogImageUrl = config.ogImage ? new URL(config.ogImage, config.siteUrl).href : undefined;
+const baseUrl = config.siteUrl.endsWith("/") ? config.siteUrl : `${config.siteUrl}/`;
+const canonicalUrl = new URL(currentPath.replace(/^\//, ""), baseUrl).href;
+const ogImageUrl = config.ogImage ? new URL(config.ogImage.replace(/^\//, ""), baseUrl).href : undefined;
 const fullTitle = currentPath === "/" ? title : `${title} | ${config.title}`;
 
 const jsonLd =
@@ -66,7 +67,7 @@ const breadcrumbs = currentPath === "/" ? null : {
 			"@type": "ListItem",
 			position: i + 1,
 			name: segment.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
-			item: new URL(arr.slice(0, i + 1).join("/"), config.siteUrl).href,
+			item: new URL(arr.slice(0, i + 1).join("/"), baseUrl).href,
 		})),
 };
 

package/src/components/SearchModal.astro

@@ -145,7 +145,8 @@
 	async function loadPagefind(): Promise<PagefindAPI | null> {
 		if (pagefind) return pagefind;
 		try {
-			const path = "/_pagefind/pagefind.js";
+			const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+			const path = `${base}/_pagefind/pagefind.js`;
 			pagefind = await import(/* @vite-ignore */ path) as PagefindAPI;
 			await pagefind.init();
 			return pagefind;