mirror of
https://github.com/github/awesome-copilot.git
synced 2026-08-25 18:25:01 +00:00
Aaron Powell
8d31163c00
Astro's default Shiki config bakes in the fixed 'github-dark' theme's literal colors, ignoring the site's actual light/dark mode - this made plain markdown-fenced code blocks (as opposed to the prototype's own SyntaxHighlightedCode component) always render a hardcoded dark box regardless of theme. Switch shikiConfig to the 'css-variables' theme so highlighted tokens resolve through --astro-code-* custom properties instead, then map those to the same brand color tokens the prototype's codeBlock uses (canvas-subtle background, border-muted border, brand text/link/accent colors for tokens). Raw markdown code blocks now match the prototype's bordered, canvas-subtle surface in both color modes. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
99 lines
3.5 KiB
JavaScript
99 lines
3.5 KiB
JavaScript
import sitemap from "@astrojs/sitemap";
|
|
import react from "@astrojs/react";
|
|
import { defineConfig } from "astro/config";
|
|
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
|
|
import pagefindResources from "./src/integrations/pagefind-resources";
|
|
|
|
// Playbook course content mirrored from external workshop repos is authored in
|
|
// GitHub admonition syntax (`> [!NOTE]`). This remark plugin rewrites those
|
|
// callouts into directives before rendering, so the same syntax used in the
|
|
// source repos and on github.com also produces styled callouts here.
|
|
const githubAdmonitionMapping = {
|
|
NOTE: "note",
|
|
TIP: "tip",
|
|
IMPORTANT: "note",
|
|
WARNING: "caution",
|
|
CAUTION: "caution",
|
|
};
|
|
|
|
const site = "https://awesome-copilot.github.com/";
|
|
|
|
// https://astro.build/config
|
|
export default defineConfig({
|
|
site,
|
|
base: "/",
|
|
output: "static",
|
|
markdown: {
|
|
remarkPlugins: [
|
|
[remarkGithubAdmonitionsToDirectives, { mapping: githubAdmonitionMapping }],
|
|
],
|
|
// The prototype's own code blocks (SyntaxHighlightedCode.tsx) are styled
|
|
// entirely through brand CSS tokens rather than baked-in theme colours, so
|
|
// they automatically match the site's light/dark mode. Raw markdown code
|
|
// fences render through Shiki instead, which by default bakes a fixed
|
|
// "github-dark" theme's literal colours into inline styles — that ignores
|
|
// the site's actual colour mode and clashes with the prototype's bordered,
|
|
// canvas-subtle code block styling. The "css-variables" theme emits
|
|
// `var(--astro-code-*)` custom properties instead of literal colours,
|
|
// which are mapped to the same brand tokens in
|
|
// src/components/brand/styles/{dotnet-upgrade,github-copilot-app}.module.css.
|
|
shikiConfig: {
|
|
theme: "css-variables",
|
|
},
|
|
},
|
|
// English is served at the site root (no locale prefix), preserving all
|
|
// existing URLs. Additional locales are served under a locale prefix
|
|
// (e.g. /es-es/…) and fall back to the English page when a translation does
|
|
// not yet exist. These keys match the locale directory names used by mirrored
|
|
// Playbook course content (website/src/content/docs/<locale>/…).
|
|
i18n: {
|
|
defaultLocale: "en",
|
|
locales: ["en", "es-es", "ja-jp", "ko-kr", "pt-br", "zh-cn"],
|
|
routing: {
|
|
prefixDefaultLocale: false,
|
|
fallbackType: "rewrite",
|
|
},
|
|
fallback: {
|
|
"es-es": "en",
|
|
"ja-jp": "en",
|
|
"ko-kr": "en",
|
|
"pt-br": "en",
|
|
"zh-cn": "en",
|
|
},
|
|
},
|
|
integrations: [react(), sitemap(), pagefindResources()],
|
|
redirects: {
|
|
"/samples/": "/learning-hub/cookbook/",
|
|
},
|
|
build: {
|
|
assets: "assets",
|
|
},
|
|
trailingSlash: "always",
|
|
vite: {
|
|
// @primer/react-brand's default entrypoint is CJS, so Node's ESM loader
|
|
// cannot detect its named exports during SSR. The package also ships a
|
|
// proper ESM build; alias to it so named imports resolve in both the
|
|
// server render and the client bundle.
|
|
resolve: {
|
|
alias: [
|
|
{
|
|
// Only the bare package specifier (the JS entrypoint) is redirected;
|
|
// subpath imports such as `/lib/css/main.css` must resolve normally.
|
|
find: /^@primer\/react-brand$/,
|
|
replacement: "@primer/react-brand/esm",
|
|
},
|
|
],
|
|
// The ESM build imports its own .css files, which Node's loader cannot
|
|
// handle, so it has to be bundled rather than externalised for SSR.
|
|
noExternal: ["@primer/react-brand"],
|
|
},
|
|
build: {
|
|
sourcemap: false,
|
|
chunkSizeWarningLimit: 900,
|
|
},
|
|
css: {
|
|
devSourcemap: true,
|
|
},
|
|
},
|
|
});
|