diff --git a/.changeset/giant-eels-pump.md b/.changeset/giant-eels-pump.md new file mode 100644 index 0000000..e251c54 --- /dev/null +++ b/.changeset/giant-eels-pump.md @@ -0,0 +1,10 @@ +--- +"@matthiesenxyz/astro-gists": patch +--- + +Changes: +- Internal refactor that will provide better future-proofing, this change also allowed the addition of EC's built in light/dark mode automations! Code Blocks will now be able to show both dark/light mode depending on the user's system preferences. + +# NEW: +- adds light/darkmode support +- Themes can be defined by either single theme or an array (`['astroGists-dark','astroGists-light']`) diff --git a/package/README.md b/package/README.md index f755810..31d892a 100644 --- a/package/README.md +++ b/package/README.md @@ -55,7 +55,8 @@ import { defineConfig } from "astro/config"; // https://astro.build/config export default defineConfig({ + integrations: [astroGist({ - theme: 'github-dark' // OPTIONAL, if not set defaults to Astro's Houston, Only Available options are Shiki Bundled options + // 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'] + })] }); ``` diff --git a/package/src/components/CodeBlob.astro b/package/src/ExpressiveCode/components/Code.astro similarity index 66% rename from package/src/components/CodeBlob.astro rename to package/src/ExpressiveCode/components/Code.astro index 7d6b3c2..0500b05 100644 --- a/package/src/components/CodeBlob.astro +++ b/package/src/ExpressiveCode/components/Code.astro @@ -1,35 +1,31 @@ --- -import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers' -import { ExpressiveCode, loadShikiTheme, type BundledShikiTheme, ExpressiveCodeTheme } from 'expressive-code' import { toHtml } from 'hast-util-to-html' -import fs from 'node:fs' -import config from "virtual:astro-gists/config"; -import { getPageData } from './page-data' +import { getPageData } from './page-data'; +import { engine } from '../index' -const jsoncString = fs.readFileSync(new URL(`../themes/houston.jsonc`, import.meta.url), 'utf-8') -const houston = ExpressiveCodeTheme.fromJSONString(jsoncString) - -const theme = config.theme - -const { code, raw_url, locale, - lang = '', meta = '', ...props +// Extract the code and other props from the Astro component +const { + code, + raw_url, + locale, + lang = '', + meta = '', + ...props } = Astro.props - const pageData = getPageData(Astro.request) - // Note: It's important to store the incremented index in a local variable immediately, - // as the `pageData` object is shared between all components on the current page - // and can be changed by other Code components during the `await` calls below - const groupIndex = ++pageData.blockGroupIndex - -const engine = new ExpressiveCode({ - themes: [theme ? await loadShikiTheme(theme as BundledShikiTheme) : houston], - plugins: [pluginLineNumbers()], -}) +// Get the current block group index from the page data +const pageData = getPageData(Astro.request) +// Note: It's important to store the incremented index in a local variable immediately, +// as the `pageData` object is shared between all components on the current page +// and can be changed by other Code components during the `await` calls below +const groupIndex = ++pageData.blockGroupIndex +// Get the base and theme styles, and the JS modules from the ExpressiveCode engine const baseStyles = await engine.getBaseStyles(); const themeStyles = await engine.getThemeStyles(); const jsModules = await engine.getJsModules(); +// Render the code using the ExpressiveCode engine const { renderedGroupAst, styles } = await engine.render({ language: lang, meta, locale, code, parentDocument: { @@ -37,14 +33,17 @@ const { renderedGroupAst, styles } = await engine.render({ }, props, }) +// Convert the rendered group AST to HTML let htmlContent = toHtml(renderedGroupAst) +// Prepend the base and theme styles to the HTML content const stylesToPrepend: string[] = [] stylesToPrepend.push(baseStyles, themeStyles, ...styles) if (stylesToPrepend.length) { htmlContent = `${htmlContent}` } +// Prepend the JS modules to the HTML content const scriptsToPrepend: string[] = [] scriptsToPrepend.push(...jsModules) if (scriptsToPrepend.length) { diff --git a/package/src/components/page-data.ts b/package/src/ExpressiveCode/components/page-data.ts similarity index 100% rename from package/src/components/page-data.ts rename to package/src/ExpressiveCode/components/page-data.ts diff --git a/package/src/ExpressiveCode/index.ts b/package/src/ExpressiveCode/index.ts new file mode 100644 index 0000000..f782cd7 --- /dev/null +++ b/package/src/ExpressiveCode/index.ts @@ -0,0 +1,11 @@ +import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers' +import { ExpressiveCode } from 'expressive-code' +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), + plugins: [pluginLineNumbers()], +}) \ No newline at end of file diff --git a/package/src/themes/houston.jsonc b/package/src/ExpressiveCode/themes/houston-dark.jsonc similarity index 100% rename from package/src/themes/houston.jsonc rename to package/src/ExpressiveCode/themes/houston-dark.jsonc diff --git a/package/src/ExpressiveCode/themes/night-owl-light.jsonc b/package/src/ExpressiveCode/themes/night-owl-light.jsonc new file mode 100644 index 0000000..b1eff58 --- /dev/null +++ b/package/src/ExpressiveCode/themes/night-owl-light.jsonc @@ -0,0 +1,1695 @@ +/** + * Night Owl VS Code Theme - https://github.com/sdras/night-owl-vscode-theme + * + * MIT License + * + * Copyright (c) 2018 Sarah Drasner + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +{ + "name": "Night Owl Light", + "type": "light", + "semanticHighlighting": false, + "colors": { + "foreground": "#403f53", + "focusBorder": "#93A1A1", + "errorForeground": "#403f53", + "selection.background": "#7a8181ad", + "descriptionForeground": "#403f53", + "widget.shadow": "#d9d9d9", + "titleBar.activeBackground": "#F0F0F0", + "notifications.background": "#F0F0F0", + "notifications.foreground": "#403f53", + "notificationLink.foreground": "#994cc3", + "notifications.border": "#CCCCCC", + "notificationCenter.border": "#CCCCCC", + "notificationToast.border": "#CCCCCC", + "notificationCenterHeader.foreground": "#403f53", + "notificationCenterHeader.background": "#F0F0F0", + "button.background": "#2AA298", + "button.foreground": "#F0F0F0", + "dropdown.background": "#F0F0F0", + "dropdown.foreground": "#403f53", + "dropdown.border": "#d9d9d9", + "input.background": "#F0F0F0", + "input.foreground": "#403f53", + "input.border": "#d9d9d9", + "input.placeholderForeground": "#93A1A1", + "inputOption.activeBorder": "#2AA298", + "inputValidation.infoBorder": "#D0D0D0", + "inputValidation.infoBackground": "#F0F0F0", + "inputValidation.warningBackground": "#daaa01", + "inputValidation.warningBorder": "#E0AF02", + "inputValidation.errorBackground": "#f76e6e", + "inputValidation.errorBorder": "#de3d3b", + "badge.background": "#2AA298", + "badge.foreground": "#F0F0F0", + "progressBar.background": "#2AA298", + "list.activeSelectionBackground": "#d3e8f8", + "list.activeSelectionForeground": "#403f53", + "list.inactiveSelectionBackground": "#E0E7EA", + "list.inactiveSelectionForeground": "#403f53", + "list.focusBackground": "#d3e8f8", + "list.hoverBackground": "#d3e8f8", + "list.focusForeground": "#403f53", + "list.hoverForeground": "#403f53", + "list.highlightForeground": "#403f53", + "list.errorForeground": "#E64D49", + "list.warningForeground": "#daaa01", + "activityBar.background": "#F0F0F0", + "activityBar.foreground": "#403f53", + "activityBar.dropBackground": "#D0D0D0", + "activityBarBadge.background": "#403f53", + "activityBarBadge.foreground": "#F0F0F0", + "activityBar.border": "#F0F0F0", + "sideBar.background": "#F0F0F0", + "sideBar.foreground": "#403f53", + "sideBarTitle.foreground": "#403f53", + "sideBar.border": "#F0F0F0", + "scrollbar.shadow": "#CCCCCC", + "tab.border": "#F0F0F0", + "tab.activeBackground": "#F6F6F6", + "tab.activeForeground": "#403f53", + "tab.inactiveForeground": "#403f53", + "tab.inactiveBackground": "#F0F0F0", + "editorGroup.border": "#F0F0F0", + "editorGroup.background": "#F6F6F6", + "editorGroupHeader.tabsBackground": "#F0F0F0", + "editorGroupHeader.tabsBorder": "#F0F0F0", + "editorGroupHeader.noTabsBackground": "#F0F0F0", + "tab.activeModifiedBorder": "#2AA298", + "tab.inactiveModifiedBorder": "#93A1A1", + "tab.unfocusedActiveModifiedBorder": "#93A1A1", + "tab.unfocusedInactiveModifiedBorder": "#93A1A1", + "editor.background": "#FBFBFB", + "editor.foreground": "#403f53", + "editorCursor.foreground": "#90A7B2", + "editorLineNumber.foreground": "#90A7B2", + "editorLineNumber.activeForeground": "#403f53", + "editor.selectionBackground": "#E0E0E0", + "editor.selectionHighlightBackground": "#339cec33", + "editor.wordHighlightBackground": "#339cec33", + "editor.wordHighlightStrongBackground": "#007dd659", + "editor.findMatchBackground": "#93A1A16c", + "editor.findMatchHighlightBackground": "#93a1a16c", + "editor.findRangeHighlightBackground": "#7497a633", + "editor.hoverHighlightBackground": "#339cec33", + "editor.lineHighlightBackground": "#F0F0F0", + "editor.rangeHighlightBackground": "#7497a633", + "editorWhitespace.foreground": "#d9d9d9", + "editorIndentGuide.background": "#d9d9d9", + "editorCodeLens.foreground": "#403f53", + "editorBracketMatch.background": "#d3e8f8", + "editorBracketMatch.border": "#2AA298", + "editorError.foreground": "#E64D49", + "editorError.border": "#FBFBFB", + "editorWarning.foreground": "#daaa01", + "editorWarning.border": "#daaa01", + "editorGutter.addedBackground": "#49d0c5", + "editorGutter.modifiedBackground": "#6fbef6", + "editorGutter.deletedBackground": "#f76e6e", + "editorRuler.foreground": "#d9d9d9", + "editorOverviewRuler.errorForeground": "#E64D49", + "editorOverviewRuler.warningForeground": "#daaa01", + "editorWidget.background": "#F0F0F0", + "editorWidget.border": "#d9d9d9", + "editorSuggestWidget.background": "#F0F0F0", + "editorSuggestWidget.foreground": "#403f53", + "editorSuggestWidget.highlightForeground": "#403f53", + "editorSuggestWidget.selectedBackground": "#d3e8f8", + "editorSuggestWidget.border": "#d9d9d9", + "editorHoverWidget.background": "#F0F0F0", + "editorHoverWidget.border": "#d9d9d9", + "debugExceptionWidget.background": "#F0F0F0", + "debugExceptionWidget.border": "#d9d9d9", + "editorMarkerNavigation.background": "#D0D0D0", + "editorMarkerNavigationError.background": "#f76e6e", + "editorMarkerNavigationWarning.background": "#daaa01", + "debugToolBar.background": "#F0F0F0", + "pickerGroup.border": "#d9d9d9", + "pickerGroup.foreground": "#403f53", + "extensionButton.prominentBackground": "#2AA298", + "extensionButton.prominentForeground": "#F0F0F0", + "statusBar.background": "#F0F0F0", + "statusBar.border": "#F0F0F0", + "statusBar.debuggingBackground": "#F0F0F0", + "statusBar.debuggingForeground": "#403f53", + "statusBar.foreground": "#403f53", + "statusBar.noFolderBackground": "#F0F0F0", + "statusBar.noFolderForeground": "#403f53", + "panel.background": "#F0F0F0", + "panel.border": "#d9d9d9", + "peekView.border": "#d9d9d9", + "peekViewEditor.background": "#F6F6F6", + "peekViewEditorGutter.background": "#F6F6F6", + "peekViewEditor.matchHighlightBackground": "#49d0c5", + "peekViewResult.background": "#F0F0F0", + "peekViewResult.fileForeground": "#403f53", + "peekViewResult.lineForeground": "#403f53", + "peekViewResult.matchHighlightBackground": "#49d0c5", + "peekViewResult.selectionBackground": "#E0E7EA", + "peekViewResult.selectionForeground": "#403f53", + "peekViewTitle.background": "#F0F0F0", + "peekViewTitleLabel.foreground": "#403f53", + "peekViewTitleDescription.foreground": "#403f53", + "terminal.ansiBrightBlack": "#403f53", + "terminal.ansiBlack": "#403f53", + "terminal.ansiBrightBlue": "#288ed7", + "terminal.ansiBlue": "#288ed7", + "terminal.ansiBrightCyan": "#2AA298", + "terminal.ansiCyan": "#2AA298", + "terminal.ansiBrightGreen": "#08916a", + "terminal.ansiGreen": "#08916a", + "terminal.ansiBrightMagenta": "#d6438a", + "terminal.ansiMagenta": "#d6438a", + "terminal.ansiBrightRed": "#de3d3b", + "terminal.ansiRed": "#de3d3b", + "terminal.ansiBrightWhite": "#F0F0F0", + "terminal.ansiWhite": "#F0F0F0", + "terminal.ansiBrightYellow": "#daaa01", + "terminal.ansiYellow": "#E0AF02", + "terminal.background": "#F6F6F6", + "terminal.foreground": "#403f53" + }, + "tokenColors": [ + { + "name": "Changed", + "scope": [ + "markup.changed", + "meta.diff.header.git", + "meta.diff.header.from-file", + "meta.diff.header.to-file" + ], + "settings": { + "foreground": "#a2bffc" + } + }, + { + "name": "Deleted", + "scope": "markup.deleted.diff", + "settings": { + "foreground": "#EF535090" + } + }, + { + "name": "Inserted", + "scope": "markup.inserted.diff", + "settings": { + "foreground": "#4876d6ff" + } + }, + { + "name": "Global settings", + "settings": { + "background": "#011627", + "foreground": "#403f53" + } + }, + { + "name": "Comment", + "scope": "comment", + "settings": { + "foreground": "#989fb1" + } + }, + { + "name": "String", + "scope": "string", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "String Quoted", + "scope": ["string.quoted", "variable.other.readwrite.js"], + "settings": { + "foreground": "#c96765" + } + }, + { + "name": "Support Constant Math", + "scope": "support.constant.math", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Number", + "scope": ["constant.numeric", "constant.character.numeric"], + "settings": { + "foreground": "#aa0982", + "fontStyle": "" + } + }, + { + "name": "Built-in constant", + "scope": ["constant.language", "punctuation.definition.constant", "variable.other.constant"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "User-defined constant", + "scope": ["constant.character", "constant.other"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Constant Character Escape", + "scope": "constant.character.escape", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "RegExp String", + "scope": ["string.regexp", "string.regexp keyword.other"], + "settings": { + "foreground": "#5ca7e4" + } + }, + { + "name": "Comma in functions", + "scope": "meta.function punctuation.separator.comma", + "settings": { + "foreground": "#5f7e97" + } + }, + { + "name": "Variable", + "scope": "variable", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Keyword", + "scope": ["punctuation.accessor", "keyword"], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Storage", + "scope": [ + "storage", + "meta.var.expr", + "meta.class meta.method.declaration meta.var.expr storage.type.js", + "storage.type.property.js", + "storage.type.property.ts", + "storage.type.property.tsx" + ], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Storage type", + "scope": "storage.type", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Storage type", + "scope": "storage.type.function.arrow.js", + "settings": { + "fontStyle": "" + } + }, + { + "name": "Class name", + "scope": ["entity.name.class", "meta.class entity.name.type.class"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Inherited class", + "scope": "entity.other.inherited-class", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Function name", + "scope": "entity.name.function", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Meta Tag", + "scope": ["punctuation.definition.tag", "meta.tag"], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "HTML Tag names", + "scope": [ + "entity.name.tag", + "meta.tag.other.html", + "meta.tag.other.js", + "meta.tag.other.tsx", + "entity.name.tag.tsx", + "entity.name.tag.js", + "entity.name.tag", + "meta.tag.js", + "meta.tag.tsx", + "meta.tag.html" + ], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Tag attribute", + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Entity Name Tag Custom", + "scope": "entity.name.tag.custom", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Library (function & constant)", + "scope": ["support.function", "support.constant"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Support Constant Property Value meta", + "scope": "support.constant.meta.property-value", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Library class/type", + "scope": ["support.type", "support.class"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Support Variable DOM", + "scope": "support.variable.dom", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Invalid", + "scope": "invalid", + "settings": { + "foreground": "#ff2c83" + } + }, + { + "name": "Invalid deprecated", + "scope": "invalid.deprecated", + "settings": { + "foreground": "#d3423e" + } + }, + { + "name": "Keyword Operator", + "scope": "keyword.operator", + "settings": { + "foreground": "#0c969b", + "fontStyle": "" + } + }, + { + "name": "Keyword Operator Relational", + "scope": "keyword.operator.relational", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Operator Assignment", + "scope": "keyword.operator.assignment", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Operator Arithmetic", + "scope": "keyword.operator.arithmetic", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Operator Bitwise", + "scope": "keyword.operator.bitwise", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Operator Increment", + "scope": "keyword.operator.increment", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Operator Ternary", + "scope": "keyword.operator.ternary", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Double-Slashed Comment", + "scope": "comment.line.double-slash", + "settings": { + "foreground": "#939dbb" + } + }, + { + "name": "Object", + "scope": "object", + "settings": { + "foreground": "#cdebf7" + } + }, + { + "name": "Null", + "scope": "constant.language.null", + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "Meta Brace", + "scope": "meta.brace", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Meta Delimiter Period", + "scope": "meta.delimiter.period", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Punctuation Definition String", + "scope": "punctuation.definition.string", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Punctuation Definition String Markdown", + "scope": "punctuation.definition.string.begin.markdown", + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "Boolean", + "scope": "constant.language.boolean", + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "Object Comma", + "scope": "object.comma", + "settings": { + "foreground": "#ffffff" + } + }, + { + "name": "Variable Parameter Function", + "scope": "variable.parameter.function", + "settings": { + "foreground": "#0c969b", + "fontStyle": "" + } + }, + { + "name": "Support Type Property Name & entity name tags", + "scope": [ + "support.type.vendor.property-name", + "support.constant.vendor.property-value", + "support.type.property-name", + "meta.property-list entity.name.tag" + ], + "settings": { + "foreground": "#0c969b", + "fontStyle": "" + } + }, + { + "name": "Entity Name tag reference in stylesheets", + "scope": "meta.property-list entity.name.tag.reference", + "settings": { + "foreground": "#57eaf1" + } + }, + { + "name": "Constant Other Color RGB Value Punctuation Definition Constant", + "scope": "constant.other.color.rgb-value punctuation.definition.constant", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Constant Other Color", + "scope": "constant.other.color", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Keyword Other Unit", + "scope": "keyword.other.unit", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Meta Selector", + "scope": "meta.selector", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Entity Other Attribute Name Id", + "scope": "entity.other.attribute-name.id", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Meta Property Name", + "scope": "meta.property-name", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Doctypes", + "scope": ["entity.name.tag.doctype", "meta.tag.sgml.doctype"], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Punctuation Definition Parameters", + "scope": "punctuation.definition.parameters", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Keyword Control Operator", + "scope": "keyword.control.operator", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Keyword Operator Logical", + "scope": "keyword.operator.logical", + "settings": { + "foreground": "#994cc3", + "fontStyle": "" + } + }, + { + "name": "Variable Instances", + "scope": [ + "variable.instance", + "variable.other.instance", + "variable.readwrite.instance", + "variable.other.readwrite.instance", + "variable.other.property" + ], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Variable Property Other object property", + "scope": ["variable.other.object.property"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Variable Property Other object", + "scope": ["variable.other.object.js"], + "settings": { + "fontStyle": "" + } + }, + { + "name": "Entity Name Function", + "scope": ["entity.name.function"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Keyword Operator Comparison, imports, returns and Keyword Operator Ruby", + "scope": [ + "keyword.operator.comparison", + "keyword.control.flow.js", + "keyword.control.flow.ts", + "keyword.control.flow.tsx", + "keyword.control.ruby", + "keyword.control.module.ruby", + "keyword.control.class.ruby", + "keyword.control.def.ruby", + "keyword.control.loop.js", + "keyword.control.loop.ts", + "keyword.control.import.js", + "keyword.control.import.ts", + "keyword.control.import.tsx", + "keyword.control.from.js", + "keyword.control.from.ts", + "keyword.control.from.tsx", + "keyword.operator.instanceof.js", + "keyword.operator.expression.instanceof.ts", + "keyword.operator.expression.instanceof.tsx" + ], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Keyword Control Conditional", + "scope": [ + "keyword.control.conditional.js", + "keyword.control.conditional.ts", + "keyword.control.switch.js", + "keyword.control.switch.ts" + ], + "settings": { + "foreground": "#994cc3", + "fontStyle": "" + } + }, + { + "name": "Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords", + "scope": [ + "support.constant", + "keyword.other.special-method", + "keyword.other.new", + "keyword.other.debugger", + "keyword.control" + ], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Support Function", + "scope": "support.function", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Invalid Broken", + "scope": "invalid.broken", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Invalid Unimplemented", + "scope": "invalid.unimplemented", + "settings": { + "foreground": "#8BD649" + } + }, + { + "name": "Invalid Illegal", + "scope": "invalid.illegal", + "settings": { + "foreground": "#c96765" + } + }, + { + "name": "Language Variable", + "scope": "variable.language", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Support Variable Property", + "scope": "support.variable.property", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Variable Function", + "scope": "variable.function", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Variable Interpolation", + "scope": "variable.interpolation", + "settings": { + "foreground": "#ec5f67" + } + }, + { + "name": "Meta Function Call", + "scope": "meta.function-call", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Punctuation Section Embedded", + "scope": "punctuation.section.embedded", + "settings": { + "foreground": "#d3423e" + } + }, + { + "name": "Punctuation Tweaks", + "scope": [ + "punctuation.terminator.expression", + "punctuation.definition.arguments", + "punctuation.definition.array", + "punctuation.section.array", + "meta.array" + ], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "More Punctuation Tweaks", + "scope": [ + "punctuation.definition.list.begin", + "punctuation.definition.list.end", + "punctuation.separator.arguments", + "punctuation.definition.list" + ], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Template Strings", + "scope": "string.template meta.template.expression", + "settings": { + "foreground": "#d3423e" + } + }, + { + "name": "Backtics(``) in Template Strings", + "scope": "string.template punctuation.definition.string", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Italics", + "scope": "italic", + "settings": { + "foreground": "#994cc3", + "fontStyle": "italic" + } + }, + { + "name": "Bold", + "scope": "bold", + "settings": { + "foreground": "#4876d6", + "fontStyle": "bold" + } + }, + { + "name": "Quote", + "scope": "quote", + "settings": { + "foreground": "#697098" + } + }, + { + "name": "Raw Code", + "scope": "raw", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "CoffeScript Variable Assignment", + "scope": "variable.assignment.coffee", + "settings": { + "foreground": "#31e1eb" + } + }, + { + "name": "CoffeScript Parameter Function", + "scope": "variable.parameter.function.coffee", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "CoffeeScript Assignments", + "scope": "variable.assignment.coffee", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "C# Readwrite Variables", + "scope": "variable.other.readwrite.cs", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "C# Classes & Storage types", + "scope": ["entity.name.type.class.cs", "storage.type.cs"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "C# Namespaces", + "scope": "entity.name.type.namespace.cs", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Tag names in Stylesheets", + "scope": [ + "entity.name.tag.css", + "entity.name.tag.less", + "entity.name.tag.custom.css", + "support.constant.property-value.css" + ], + "settings": { + "foreground": "#c96765", + "fontStyle": "" + } + }, + { + "name": "Wildcard(*) selector in Stylesheets", + "scope": [ + "entity.name.tag.wildcard.css", + "entity.name.tag.wildcard.less", + "entity.name.tag.wildcard.scss", + "entity.name.tag.wildcard.sass" + ], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "CSS Keyword Other Unit", + "scope": "keyword.other.unit.css", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Attribute Name for CSS", + "scope": [ + "meta.attribute-selector.css entity.other.attribute-name.attribute", + "variable.other.readwrite.js" + ], + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Elixir Classes", + "scope": [ + "source.elixir support.type.elixir", + "source.elixir meta.module.elixir entity.name.class.elixir" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Elixir Functions", + "scope": "source.elixir entity.name.function", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Elixir Constants", + "scope": [ + "source.elixir constant.other.symbol.elixir", + "source.elixir constant.other.keywords.elixir" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Elixir String Punctuations", + "scope": "source.elixir punctuation.definition.string", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Elixir", + "scope": [ + "source.elixir variable.other.readwrite.module.elixir", + "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Elixir Binary Punctuations", + "scope": "source.elixir .punctuation.binary.elixir", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Closure Constant Keyword", + "scope": "constant.keyword.clojure", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Go Function Calls", + "scope": "source.go meta.function-call.go", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Go Keywords", + "scope": [ + "source.go keyword.package.go", + "source.go keyword.import.go", + "source.go keyword.function.go", + "source.go keyword.type.go", + "source.go keyword.struct.go", + "source.go keyword.interface.go", + "source.go keyword.const.go", + "source.go keyword.var.go", + "source.go keyword.map.go", + "source.go keyword.channel.go", + "source.go keyword.control.go" + ], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "Go Constants e.g. nil, string format (%s, %d, etc.)", + "scope": ["source.go constant.language.go", "source.go constant.other.placeholder.go"], + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "C++ Functions", + "scope": ["entity.name.function.preprocessor.cpp", "entity.scope.name.cpp"], + "settings": { + "foreground": "#0c969bff" + } + }, + { + "name": "C++ Meta Namespace", + "scope": ["meta.namespace-block.cpp"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "C++ Language Primitive Storage", + "scope": ["storage.type.language.primitive.cpp"], + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "C++ Preprocessor Macro", + "scope": ["meta.preprocessor.macro.cpp"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "C++ Variable Parameter", + "scope": ["variable.parameter"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Powershell Variables", + "scope": ["variable.other.readwrite.powershell"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Powershell Function", + "scope": ["support.function.powershell"], + "settings": { + "foreground": "#0c969bff" + } + }, + { + "name": "ID Attribute Name in HTML", + "scope": "entity.other.attribute-name.id.html", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "HTML Punctuation Definition Tag", + "scope": "punctuation.definition.tag.html", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "HTML Doctype", + "scope": "meta.tag.sgml.doctype.html", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "JavaScript Classes", + "scope": "meta.class entity.name.type.class.js", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "JavaScript Method Declaration e.g. `constructor`", + "scope": "meta.method.declaration storage.type.js", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "JavaScript Terminator", + "scope": "terminator.js", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "JavaScript Meta Punctuation Definition", + "scope": "meta.js punctuation.definition.js", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Entity Names in Code Documentations", + "scope": ["entity.name.type.instance.jsdoc", "entity.name.type.instance.phpdoc"], + "settings": { + "foreground": "#5f7e97" + } + }, + { + "name": "Other Variables in Code Documentations", + "scope": ["variable.other.jsdoc", "variable.other.phpdoc"], + "settings": { + "foreground": "#78ccf0" + } + }, + { + "name": "JavaScript module imports and exports", + "scope": [ + "variable.other.meta.import.js", + "meta.import.js variable.other", + "variable.other.meta.export.js", + "meta.export.js variable.other" + ], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "JavaScript Variable Parameter Function", + "scope": "variable.parameter.function.js", + "settings": { + "foreground": "#7986E7" + } + }, + { + "name": "JavaScript[React] Variable Other Object", + "scope": [ + "variable.other.object.js", + "variable.other.object.jsx", + "variable.object.property.js", + "variable.object.property.jsx" + ], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "JavaScript Variables", + "scope": ["variable.js", "variable.other.js"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "JavaScript Entity Name Type", + "scope": ["entity.name.type.js", "entity.name.type.module.js"], + "settings": { + "foreground": "#111111", + "fontStyle": "" + } + }, + { + "name": "JavaScript Support Classes", + "scope": "support.class.js", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "JSON Property Names", + "scope": "support.type.property-name.json", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "JSON Support Constants", + "scope": "support.constant.json", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "JSON Property values (string)", + "scope": "meta.structure.dictionary.value.json string.quoted.double", + "settings": { + "foreground": "#c789d6" + } + }, + { + "name": "Strings in JSON values", + "scope": "string.quoted.double.json punctuation.definition.string.json", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Specific JSON Property values like null", + "scope": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language", + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "JavaScript Other Variable", + "scope": "variable.other.object.js", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Ruby Variables", + "scope": ["variable.other.ruby"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Ruby Class", + "scope": ["entity.name.type.class.ruby"], + "settings": { + "foreground": "#c96765" + } + }, + { + "name": "Ruby Hashkeys", + "scope": "constant.language.symbol.hashkey.ruby", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Ruby Symbols", + "scope": "constant.language.symbol.ruby", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "LESS Tag names", + "scope": "entity.name.tag.less", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "LESS Keyword Other Unit", + "scope": "keyword.other.unit.css", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Attribute Name for LESS", + "scope": "meta.attribute-selector.less entity.other.attribute-name.attribute", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Markdown Headings", + "scope": [ + "markup.heading.markdown", + "markup.heading.setext.1.markdown", + "markup.heading.setext.2.markdown" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Markdown Italics", + "scope": "markup.italic.markdown", + "settings": { + "foreground": "#994cc3", + "fontStyle": "italic" + } + }, + { + "name": "Markdown Bold", + "scope": "markup.bold.markdown", + "settings": { + "foreground": "#4876d6", + "fontStyle": "bold" + } + }, + { + "name": "Markdown Quote + others", + "scope": "markup.quote.markdown", + "settings": { + "foreground": "#697098" + } + }, + { + "name": "Markdown Raw Code + others", + "scope": "markup.inline.raw.markdown", + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Markdown Links", + "scope": ["markup.underline.link.markdown", "markup.underline.link.image.markdown"], + "settings": { + "foreground": "#ff869a" + } + }, + { + "name": "Markdown Link Title and Description", + "scope": ["string.other.link.title.markdown", "string.other.link.description.markdown"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Markdown Punctuation", + "scope": [ + "punctuation.definition.string.markdown", + "punctuation.definition.string.begin.markdown", + "punctuation.definition.string.end.markdown", + "meta.link.inline.markdown punctuation.definition.string" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Markdown MetaData Punctuation", + "scope": ["punctuation.definition.metadata.markdown"], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Markdown List Punctuation", + "scope": ["beginning.punctuation.definition.list.markdown"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Markdown Inline Raw String", + "scope": "markup.inline.raw.string.markdown", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "PHP Variables", + "scope": ["variable.other.php", "variable.other.property.php"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Support Classes in PHP", + "scope": "support.class.php", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Punctuations in PHP function calls", + "scope": "meta.function-call.php punctuation", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "PHP Global Variables", + "scope": "variable.other.global.php", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Declaration Punctuation in PHP Global Variables", + "scope": "variable.other.global.php punctuation.definition.variable", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Language Constants in Python", + "scope": "constant.language.python", + "settings": { + "foreground": "#bc5454" + } + }, + { + "name": "Python Function Parameter and Arguments", + "scope": ["variable.parameter.function.python", "meta.function-call.arguments.python"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Python Function Call", + "scope": ["meta.function-call.python", "meta.function-call.generic.python"], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "Punctuations in Python", + "scope": "punctuation.python", + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Decorator Functions in Python", + "scope": "entity.name.function.decorator.python", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Python Language Variable", + "scope": "source.python variable.language.special", + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Python import control keyword", + "scope": "keyword.control", + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "SCSS Variable", + "scope": [ + "variable.scss", + "variable.sass", + "variable.parameter.url.scss", + "variable.parameter.url.sass" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Variables in SASS At-Rules", + "scope": ["source.css.scss meta.at-rule variable", "source.css.sass meta.at-rule variable"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "Variables in SASS At-Rules", + "scope": ["source.css.scss meta.at-rule variable", "source.css.sass meta.at-rule variable"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "Attribute Name for SASS", + "scope": [ + "meta.attribute-selector.scss entity.other.attribute-name.attribute", + "meta.attribute-selector.sass entity.other.attribute-name.attribute" + ], + "settings": { + "foreground": "#aa0982" + } + }, + { + "name": "Tag names in SASS", + "scope": ["entity.name.tag.scss", "entity.name.tag.sass"], + "settings": { + "foreground": "#0c969b" + } + }, + { + "name": "SASS Keyword Other Unit", + "scope": ["keyword.other.unit.scss", "keyword.other.unit.sass"], + "settings": { + "foreground": "#994cc3" + } + }, + { + "name": "TypeScript[React] Variables and Object Properties", + "scope": [ + "variable.other.readwrite.alias.ts", + "variable.other.readwrite.alias.tsx", + "variable.other.readwrite.ts", + "variable.other.readwrite.tsx", + "variable.other.object.ts", + "variable.other.object.tsx", + "variable.object.property.ts", + "variable.object.property.tsx", + "variable.other.ts", + "variable.other.tsx", + "variable.tsx", + "variable.ts" + ], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "TypeScript[React] Entity Name Types", + "scope": ["entity.name.type.ts", "entity.name.type.tsx"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "TypeScript[React] Node Classes", + "scope": ["support.class.node.ts", "support.class.node.tsx"], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "TypeScript[React] Entity Name Types as Parameters", + "scope": [ + "meta.type.parameters.ts entity.name.type", + "meta.type.parameters.tsx entity.name.type" + ], + "settings": { + "foreground": "#5f7e97" + } + }, + { + "name": "TypeScript[React] Import/Export Punctuations", + "scope": [ + "meta.import.ts punctuation.definition.block", + "meta.import.tsx punctuation.definition.block", + "meta.export.ts punctuation.definition.block", + "meta.export.tsx punctuation.definition.block" + ], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "TypeScript[React] Punctuation Decorators", + "scope": [ + "meta.decorator punctuation.decorator.ts", + "meta.decorator punctuation.decorator.tsx" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "TypeScript[React] Punctuation Decorators", + "scope": "meta.tag.js meta.jsx.children.tsx", + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "YAML Entity Name Tags", + "scope": "entity.name.tag.yaml", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "JavaScript Variable Other ReadWrite", + "scope": ["variable.other.readwrite.js", "variable.parameter"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "Support Class Component", + "scope": ["support.class.component.js", "support.class.component.tsx"], + "settings": { + "foreground": "#aa0982", + "fontStyle": "" + } + }, + { + "name": "Text nested in React tags", + "scope": ["meta.jsx.children", "meta.jsx.children.js", "meta.jsx.children.tsx"], + "settings": { + "foreground": "#403f53" + } + }, + { + "name": "TypeScript Classes", + "scope": "meta.class entity.name.type.class.tsx", + "settings": { + "foreground": "#111111" + } + }, + { + "name": "TypeScript Entity Name Type", + "scope": ["entity.name.type.tsx", "entity.name.type.module.tsx"], + "settings": { + "foreground": "#111111" + } + }, + { + "name": "TypeScript Class Variable Keyword", + "scope": [ + "meta.class.ts meta.var.expr.ts storage.type.ts", + "meta.class.tsx meta.var.expr.tsx storage.type.tsx" + ], + "settings": { + "foreground": "#C792EA" + } + }, + { + "name": "TypeScript Method Declaration e.g. `constructor`", + "scope": [ + "meta.method.declaration storage.type.ts", + "meta.method.declaration storage.type.tsx" + ], + "settings": { + "foreground": "#4876d6" + } + }, + { + "name": "normalize font style of certain components", + "scope": [ + "meta.property-list.css meta.property-value.css variable.other.less", + "meta.property-list.scss variable.scss", + "meta.property-list.sass variable.sass", + "meta.brace", + "keyword.operator.operator", + "keyword.operator.or.regexp", + "keyword.operator.expression.in", + "keyword.operator.relational", + "keyword.operator.assignment", + "keyword.operator.comparison", + "keyword.operator.type", + "keyword.operator", + "keyword", + "punctuation.definintion.string", + "punctuation", + "variable.other.readwrite.js", + "storage.type", + "source.css", + "string.quoted" + ], + "settings": { + "fontStyle": "" + } + } + ] +} diff --git a/package/src/ExpressiveCode/theming.ts b/package/src/ExpressiveCode/theming.ts new file mode 100644 index 0000000..f3300f2 --- /dev/null +++ b/package/src/ExpressiveCode/theming.ts @@ -0,0 +1,39 @@ +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 { + + 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; +} \ No newline at end of file diff --git a/package/src/components/GetGist.astro b/package/src/components/GetGist.astro index 19d8d8e..e9883ad 100644 --- a/package/src/components/GetGist.astro +++ b/package/src/components/GetGist.astro @@ -1,6 +1,6 @@ --- -import { getGistFile } from "../utils" -import CodeBlob from "./CodeBlob.astro" +import { getGistFile } from "../lib" +import { Code } from "../ExpressiveCode" export interface Props { /** REQUIRED: Used to define the desired GitHub Gist ID */ @@ -26,7 +26,7 @@ const Gist = await getGistFile( gistId, filename); --- { Gist && - { const { content, filename, language, raw_url } = files[file]; return ( - ().optional(), +}); + +export type astroGistsUserConfig = z.infer \ No newline at end of file diff --git a/package/src/integration.ts b/package/src/integration.ts index c48523c..81d232d 100644 --- a/package/src/integration.ts +++ b/package/src/integration.ts @@ -1,37 +1,10 @@ import { defineIntegration, createResolver } from "astro-integration-kit" import { corePlugins } from "astro-integration-kit/plugins" -import { z } from "astro/zod"; -import { loadEnv } from "vite"; -import { type BundledShikiTheme } from 'expressive-code' +import { isThereAToken, TOKEN_MISSING_ERROR } from "./lib" +import { optionsSchema } from "./index" -// Load environment variables -const { GITHUB_PERSONAL_TOKEN } = loadEnv("all", process.cwd(), "GITHUB_"); - -export const optionsSchema = z.object({ - /** - * Optional: Allows the user to change the default theme for the code blocks. - * - * All available themes are listed in the [Shiki documentation](https://shiki.matsu.io/docs/themes). - */ - theme: z.custom().optional(), - }); - -export type UserConfig = z.infer - -/** Astro-Gist - An Astro.js integration for embedding GitHub Gists in your Astro.js project. - * @example - * import { defineConfig } from "astro/config"; - * import astroGist from "@matthiesenxyz/astro-gists"; - * - * export default defineConfig({ - * integrations: [ - * astroGist({ - * // Optional: Change the default theme for the code blocks. - * // Default: `Astro Houston (Custom)` If you want to use the default theme, you can omit this option. - * theme: "github-dark" - * }) - * ] - * }); +/** + * Astro-Gist - An Astro.js integration for embedding GitHub Gists in your Astro.js project. */ export default defineIntegration({ name: "@matthiesenxyz/astro-gists", @@ -51,9 +24,7 @@ export default defineIntegration({ watchIntegration(resolve()) // Check for GITHUB_PERSONAL_TOKEN - if (!GITHUB_PERSONAL_TOKEN) { - configSetup.warn("GITHUB_PERSONAL_TOKEN not found. Please add it to your .env file. Without it, you will be limited to 60 requests per hour.") - } + if (!isThereAToken) {configSetup.warn(TOKEN_MISSING_ERROR)} // Add virtual imports addVirtualImports({ diff --git a/package/src/lib/gist-processor.ts b/package/src/lib/gist-processor.ts new file mode 100644 index 0000000..259f6e9 --- /dev/null +++ b/package/src/lib/gist-processor.ts @@ -0,0 +1,30 @@ +import { requestRetry } from './octokit'; + +// Get a Gist by ID +export const getGist = async (gistId: string) => { + /** @ts-ignore-error */ + const { data: response } = await requestRetry('GET /gists/{gist_id}', { gist_id: gistId }); + const data = response as { + // biome-ignore lint/suspicious/noExplicitAny: we don't know the shape of the data returned from the API +files: any; data: unknown +}; + return data; +}; + +// Get a file from a Gist by ID and filename +export const getGistFile = async ( + gistId: string, + filename: string + ) => { + const gist = await getGist(gistId); + if (gist?.files) { + const file = gist.files[filename]; + return file ? file : null; + } + return null; +}; + +export const getGistGroup = async (gistId: string) => { + const gist = await getGist(gistId); + return gist; +}; \ No newline at end of file diff --git a/package/src/lib/index.ts b/package/src/lib/index.ts new file mode 100644 index 0000000..b7e2afd --- /dev/null +++ b/package/src/lib/index.ts @@ -0,0 +1,2 @@ +export * from "./gist-processor"; +export * from "./octokit"; \ No newline at end of file diff --git a/package/src/utils.ts b/package/src/lib/octokit.ts similarity index 58% rename from package/src/utils.ts rename to package/src/lib/octokit.ts index 5028d5c..d75a5e5 100644 --- a/package/src/utils.ts +++ b/package/src/lib/octokit.ts @@ -5,11 +5,20 @@ import type { Route, RequestParameters, OctokitResponse } from "@octokit/types" // Load environment variables const { GITHUB_PERSONAL_TOKEN } = loadEnv("all", process.cwd(), "GITHUB_"); +export const isThereAToken = () => { + if (!GITHUB_PERSONAL_TOKEN) { + return false; + } + return true; +} + +export const TOKEN_MISSING_ERROR = "GITHUB_PERSONAL_TOKEN not found. Please add it to your .env file. Without it, you will be limited to 60 requests per hour."; + // Create an Octokit instance -export const octokit = new Octokit({ auth: GITHUB_PERSONAL_TOKEN }); +const octokit = new Octokit({ auth: GITHUB_PERSONAL_TOKEN }); // Retry requests if rate limited -async function requestRetry(route: Route, parameters: RequestParameters) { +export async function requestRetry(route: Route, parameters: RequestParameters) { try { const response: OctokitResponse = await octokit.request(route, parameters); return response; @@ -31,33 +40,4 @@ async function requestRetry(route: Route, parameters: RequestParameters) { // Return a rejected Promise return Promise.reject(error); } -} - -// Get a Gist by ID -export const getGist = async (gistId: string) => { - /** @ts-ignore-error */ - const { data: response } = await requestRetry('GET /gists/{gist_id}', { gist_id: gistId }); - const data = response as { - // biome-ignore lint/suspicious/noExplicitAny: we don't know the shape of the data returned from the API -files: any; data: unknown -}; - return data; -}; - -// Get a file from a Gist by ID and filename -export const getGistFile = async ( - gistId: string, - filename: string - ) => { - const gist = await getGist(gistId); - if (gist?.files) { - const file = gist.files[filename]; - return file ? file : null; - } - return null; -}; - -export const getGistGroup = async (gistId: string) => { - const gist = await getGist(gistId); - return gist; -}; \ No newline at end of file +} \ No newline at end of file diff --git a/package/virtual-config.d.ts b/package/virtual-config.d.ts index 3013024..162feb6 100644 --- a/package/virtual-config.d.ts +++ b/package/virtual-config.d.ts @@ -1,4 +1,4 @@ declare module "virtual:astro-gists/config" { - const Config: import("./src/integration").UserConfig; + const Config: import("./src/index").astroGistsUserConfig; export default Config; } \ No newline at end of file