Files
supabase/apps/kb/astro.config.mjs
2026-09-07 12:40:09 +02:00

70 lines
2.4 KiB
JavaScript

// @ts-check
import { createRequire } from 'node:module'
import path from 'node:path'
import react from '@astrojs/react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'astro/config'
import supabaseTheme from '../learn/lib/themes/supabase-2.json' with { type: 'json' }
// Absolute dir of lodash-es, for the SSR-only lodash alias below (same fix
// apps/studio/vite.config.ts uses). `packages/ui`'s clipboard util does
// `import { noop } from 'lodash'` — under Vite's dev-mode SSR module runner,
// that CJS import evaluates as pure ESM (no module/exports/require), so the
// named import binds to undefined. lodash-es is real ESM and the same
// version, so swapping it in for SSR only (client bundles are untouched)
// fixes it without touching the shared `ui` package.
const lodashEsDir = path.dirname(createRequire(import.meta.url).resolve('lodash-es/package.json'))
// Not typed as `import('vite').Plugin` — kb's own `vite` (from the pnpm
// catalog) and Astro's internal vite dependency resolve to distinct type
// instances, and comparing them blows TS's structural-comparison stack depth.
const ssrLodashEs = {
name: 'kb-ssr-lodash-es',
enforce: 'pre',
/**
* @param {string} source
* @param {string | undefined} _importer
* @param {{ ssr?: boolean } | undefined} options
*/
resolveId(source, _importer, options) {
if (!options?.ssr) return
if (source === 'lodash') return path.join(lodashEsDir, 'lodash.js')
const subpath = source.match(/^lodash\/(.+?)(\.js)?$/)
if (subpath) return path.join(lodashEsDir, `${subpath[1]}.js`)
},
}
// https://astro.build/config
export default defineConfig({
base: '/kb',
trailingSlash: 'ignore',
integrations: [react()],
vite: {
ssr: {
noExternal: ['lodash'],
},
plugins: [tailwindcss(), ssrLodashEs],
},
markdown: {
shikiConfig: {
theme: supabaseTheme,
// Match the docs app's CodeBlock component (border + rounded-lg on the
// outer element), since Astro's own markdown pipeline renders code
// blocks straight to a `<pre>` with no wrapper we can add classes to.
transformers: [
{
name: 'kb-code-block-classes',
pre(node) {
this.addClassToHast(node, 'border border-default rounded-lg')
},
code(node) {
this.addClassToHast(node, 'inline-block p-6')
},
},
],
},
},
})