Update AstroGist theme and code block configuration

This commit is contained in:
Adam Matthiesen 2024-03-09 10:53:24 -08:00
parent b788158a87
commit 363ef40442
6 changed files with 14 additions and 4189 deletions

View File

@ -55,8 +55,8 @@ import { defineConfig } from "astro/config";
// https://astro.build/config
export default defineConfig({
+ integrations: [astroGist({
// This is the default options shown... dark is Astro's Houston-dark, and light is currently nightowl-light until a Houston-light is released.
theme: ['astroGists-dark', 'astroGists-light']
// Allows you to set the default theme
theme: ['catppuccin-macchiato']
+ })]
});
```

View File

@ -1,11 +1,15 @@
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
import { ExpressiveCode } from 'expressive-code'
// import config from "virtual:astro-gists/config";
// import { loadTheme } from "./theming";
import { ExpressiveCode, loadShikiTheme, type BundledShikiTheme } from 'expressive-code'
import config from "virtual:astro-gists/config";
export { default as Code } from './components/Code.astro'
export const engine = new ExpressiveCode({
//themes: await loadTheme(config.theme),
themes: [
config.theme ?
await loadShikiTheme(config.theme as BundledShikiTheme) :
await loadShikiTheme('catppuccin-macchiato'), await loadShikiTheme('catppuccin-latte')
],
plugins: [pluginLineNumbers()],
})

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,39 +0,0 @@
import { ExpressiveCodeTheme, loadShikiTheme, type BundledShikiTheme } from 'expressive-code'
import fs from 'node:fs'
function loadBundledThemeFromFile(theme: string) {
return fs.readFileSync(new URL(`./themes/${theme}.jsonc`, import.meta.url), 'utf-8');
}
const houstonDark = loadBundledThemeFromFile('houston-dark');
const nightOwlLight = loadBundledThemeFromFile('night-owl-light');
export type BundledThemeName = 'astroGists-dark' | 'astroGists-light';
export type ShikiThemeOrBundledThemeName = BundledShikiTheme | BundledThemeName;
export async function loadTheme(
themes: ShikiThemeOrBundledThemeName[] | undefined
): Promise<ExpressiveCodeTheme[]> {
const shikiThemes = themes && !Array.isArray(themes) ? [themes] : themes
const themesToLoad = (!shikiThemes || !shikiThemes.length) ? ['astroGists-dark', 'astroGists-light'] : shikiThemes;
const loadedThemes = await Promise.all(
themesToLoad.map(async (theme) => {
if (theme === 'astroGists-dark' || theme === 'astroGists-light') {
const bundledTheme = theme === 'astroGists-dark' ? houstonDark : nightOwlLight;
return customizeBundledTheme(ExpressiveCodeTheme.fromJSONString(bundledTheme));
}
return await loadShikiTheme(theme as BundledShikiTheme);
})
);
return loadedThemes;
}
function customizeBundledTheme(theme: ExpressiveCodeTheme) {
return theme;
}

View File

@ -4,16 +4,16 @@ export default astroGist;
// Export the user config schema
import { z } from "astro/zod";
import type { ShikiThemeOrBundledThemeName } from "./ExpressiveCode/theming"
import type { BundledShikiTheme } from "expressive-code";
export const optionsSchema = z.object({
/**
* Optional: Allows the user to change the default theme for the code blocks.
* @default ['astroGist-dark','astroGist-light']
* @example ['github-dark']
*
* All available themes are listed in the [Shiki documentation](https://shiki.matsu.io/docs/themes).
*/
theme: z.custom<ShikiThemeOrBundledThemeName[]>().optional(),
theme: z.custom<BundledShikiTheme>().optional(),
});
export type astroGistsUserConfig = z.infer<typeof optionsSchema>