fix: 🐛 Bug Fix: Theme System (#36)

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

.changeset/forty-ways-share.md

@@ -0,0 +1,5 @@
+---
+"@matthiesenxyz/astro-gists": patch
+---
+
+Readds a basic version of the theme system for now

package/README.md

@@ -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.
+	// Allows you to set the default theme
-	theme: ['astroGists-dark', 'astroGists-light']
+	theme: ['catppuccin-macchiato']
 +  })]
 });
 ```

package/src/ExpressiveCode/index.ts

@@ -1,11 +1,15 @@
 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 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()],
-})
+})
+

package/src/ExpressiveCode/theming.ts

@@ -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;
-}

package/src/index.ts

@@ -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>