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 // https://astro.build/config
export default defineConfig({ export default defineConfig({
+ integrations: [astroGist({ + 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. // Allows you to set the default theme
theme: ['astroGists-dark', 'astroGists-light'] theme: ['catppuccin-macchiato']
+ })] + })]
}); });
``` ```

View File

@ -1,11 +1,15 @@
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers' import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
import { ExpressiveCode } from 'expressive-code' import { ExpressiveCode, loadShikiTheme, type BundledShikiTheme } from 'expressive-code'
// import config from "virtual:astro-gists/config"; import config from "virtual:astro-gists/config";
// import { loadTheme } from "./theming";
export { default as Code } from './components/Code.astro' export { default as Code } from './components/Code.astro'
export const engine = new ExpressiveCode({ 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()], 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 // Export the user config schema
import { z } from "astro/zod"; import { z } from "astro/zod";
import type { ShikiThemeOrBundledThemeName } from "./ExpressiveCode/theming" import type { BundledShikiTheme } from "expressive-code";
export const optionsSchema = z.object({ export const optionsSchema = z.object({
/** /**
* Optional: Allows the user to change the default theme for the code blocks. * 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). * 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> export type astroGistsUserConfig = z.infer<typeof optionsSchema>