Moving from `astro-expressive-code` to custom expressive code implimentation
This commit is contained in:
parent
f926ca677f
commit
b6802e751f
|
@ -57,9 +57,7 @@ import { defineConfig } from "astro/config";
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
+ integrations: [astroGist({
|
+ integrations: [astroGist({
|
||||||
// OPTIONAL CONFIG OPTIONS
|
theme: 'github-dark' // OPTIONAL, if not set defaults to Astro's Houston, Only Available options are Shiki Bundled options
|
||||||
// Enable the Astrojs/MDX Integration - Default: true
|
|
||||||
MDXIntegration: true
|
|
||||||
+ })]
|
+ })]
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
@ -89,6 +87,8 @@ This Utility is meant to display a single Gist as Codeblocks using ExpressiveCod
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import { GetGist } from "@matthiesenxyz/astro-gists/components"
|
import { GetGist } from "@matthiesenxyz/astro-gists/components"
|
||||||
|
// OR
|
||||||
|
import GetGist from "@matthiesenxyz/astro-gists/GetGist"
|
||||||
---
|
---
|
||||||
<GetGist
|
<GetGist
|
||||||
gistId="your-gist-id-here"
|
gistId="your-gist-id-here"
|
||||||
|
@ -103,6 +103,8 @@ This Utility is meant to display an entire collection of Gists by ID
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import { GetGistGroup } from "@matthiesenxyz/astro-gists/components"
|
import { GetGistGroup } from "@matthiesenxyz/astro-gists/components"
|
||||||
|
// OR
|
||||||
|
import GetGistGroup from "@matthiesenxyz/astro-gists/GetGistGroup"
|
||||||
---
|
---
|
||||||
<GetGistGroup
|
<GetGistGroup
|
||||||
gistId="your-gist-id-here"
|
gistId="your-gist-id-here"
|
||||||
|
|
|
@ -1,37 +0,0 @@
|
||||||
/**
|
|
||||||
* @file This file provides the types for Astro-Gists's `@matthiesenxyz/astro-gists/expressive-code` export.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export * from 'astro-expressive-code';
|
|
||||||
|
|
||||||
import type { AstroGistsExpressiveCodeOptions } from './src/integrations/expressive-code';
|
|
||||||
|
|
||||||
export type { AstroGistsExpressiveCodeOptions };
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A utility function that helps you define an Expressive Code configuration object. It is meant
|
|
||||||
* to be used inside the optional config file `ec.config.mjs` located in the root directory
|
|
||||||
* of your Starlight project, and its return value to be exported as the default export.
|
|
||||||
*
|
|
||||||
* Expressive Code will automatically detect this file and use the exported configuration object
|
|
||||||
* to override its own default settings.
|
|
||||||
*
|
|
||||||
* Using this function is recommended, but not required. It just passes through the given object,
|
|
||||||
* but it also provides type information for your editor's auto-completion and type checking.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* ```js
|
|
||||||
* // ec.config.mjs
|
|
||||||
* import { defineEcConfig } from '@matthiesenxyz/astro-gists/expressive-code'
|
|
||||||
*
|
|
||||||
* export default defineEcConfig({
|
|
||||||
* themes: ['github-dark', 'github-light'],
|
|
||||||
* styleOverrides: {
|
|
||||||
* borderRadius: '0.5rem',
|
|
||||||
* },
|
|
||||||
* })
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
export function defineEcConfig(
|
|
||||||
config: AstroGistsExpressiveCodeOptions
|
|
||||||
): AstroGistsExpressiveCodeOptions;
|
|
|
@ -1,21 +0,0 @@
|
||||||
/**
|
|
||||||
* @file This file is exported by astro-gists as `@matthiesenxyz/astro-gists/expressive-code`.
|
|
||||||
*
|
|
||||||
* It is required by the `<Code>` component to access the same configuration preprocessor
|
|
||||||
* function as the one used by the integration.
|
|
||||||
*
|
|
||||||
* It also provides access to all of the Expressive Code classes and functions without having
|
|
||||||
* to install `astro-expressive-code` as an additional dependency into a user's project
|
|
||||||
* (and thereby risiking version conflicts).
|
|
||||||
*
|
|
||||||
* Note: This file is intentionally not a TypeScript module to allow access to all exported
|
|
||||||
* functionality even if TypeScript is not available, e.g. from the `ec.config.mjs` file
|
|
||||||
* that does not get processed by Vite.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export * from 'astro-expressive-code';
|
|
||||||
|
|
||||||
// @ts-ignore - Types are provided by the separate `expressive-code.d.ts` file
|
|
||||||
export function defineEcConfig(config) {
|
|
||||||
return config;
|
|
||||||
}
|
|
|
@ -1,5 +0,0 @@
|
||||||
/**
|
|
||||||
* @file This file contains utility functions imported by the `<Code>` component.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export { getGistsEcConfigPreprocessor } from './src/integrations/expressive-code.js';
|
|
|
@ -31,25 +31,21 @@
|
||||||
"sideEffects": false,
|
"sideEffects": false,
|
||||||
"exports": {
|
"exports": {
|
||||||
".": "./src/index.ts",
|
".": "./src/index.ts",
|
||||||
"./expressive-code": {
|
|
||||||
"types": "./expressive-code.d.ts",
|
|
||||||
"default": "./expressive-code.mjs"
|
|
||||||
},
|
|
||||||
"./internal": "./internal.ts",
|
|
||||||
"./components": "./src/components/index.ts",
|
"./components": "./src/components/index.ts",
|
||||||
"./components/*": "./src/components/*"
|
"./GetGist": "./src/components/GetGist.astro",
|
||||||
|
"./GetGistGroup": "./src/components/GetGistGroup.astro"
|
||||||
},
|
},
|
||||||
"scripts": {},
|
"scripts": {},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"astro": "^4.4.0"
|
"astro": "^4.4.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/mdx": "2.1.1",
|
|
||||||
"@expressive-code/plugin-line-numbers": "^0.33.4",
|
"@expressive-code/plugin-line-numbers": "^0.33.4",
|
||||||
"@octokit/types": "^12.6.0",
|
"@octokit/types": "^12.6.0",
|
||||||
"astro-expressive-code": "^0.33.4",
|
|
||||||
"astro-integration-kit": "^0.5.1",
|
"astro-integration-kit": "^0.5.1",
|
||||||
|
"expressive-code": "^0.33.4",
|
||||||
|
"hast-util-to-html": "^8.0.4",
|
||||||
"octokit": "^3.1.2",
|
"octokit": "^3.1.2",
|
||||||
"vite": "^5.1.5"
|
"vite": "^5.1.5"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,64 @@
|
||||||
|
---
|
||||||
|
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";
|
||||||
|
|
||||||
|
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
|
||||||
|
} = Astro.props
|
||||||
|
|
||||||
|
const engine = new ExpressiveCode({
|
||||||
|
themes: [theme ? await loadShikiTheme(theme as BundledShikiTheme) : houston],
|
||||||
|
plugins: [pluginLineNumbers()],
|
||||||
|
})
|
||||||
|
|
||||||
|
const baseStyles = await engine.getBaseStyles();
|
||||||
|
const themeStyles = await engine.getThemeStyles();
|
||||||
|
const jsModules = await engine.getJsModules();
|
||||||
|
|
||||||
|
const { renderedGroupAst, styles } = await engine.render({
|
||||||
|
language: lang, meta, locale, code, props, })
|
||||||
|
|
||||||
|
let htmlContent = toHtml(renderedGroupAst)
|
||||||
|
|
||||||
|
const stylesToPrepend: string[] = []
|
||||||
|
stylesToPrepend.push(baseStyles, themeStyles, ...styles)
|
||||||
|
if (stylesToPrepend.length) {
|
||||||
|
htmlContent = `<style>${[...stylesToPrepend].join('')}</style>${htmlContent}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const scriptsToPrepend: string[] = []
|
||||||
|
scriptsToPrepend.push(...jsModules)
|
||||||
|
if (scriptsToPrepend.length) {
|
||||||
|
htmlContent = `<script type="module">${[...scriptsToPrepend].join('')}</script>${htmlContent}`
|
||||||
|
}
|
||||||
|
---
|
||||||
|
<div class="gist">
|
||||||
|
<a class="raw" title="GitHub Gist RAW" href={raw_url}>View <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-filetype-raw" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.597 11.85H0v3.999h.782v-1.491h.71l.7 1.491h1.651l.313-1.028h1.336l.314 1.028h.84L5.31 11.85h-.925l-1.329 3.96-.783-1.572A1.18 1.18 0 0 0 3 13.116q0-.384-.167-.668a1.1 1.1 0 0 0-.478-.44 1.7 1.7 0 0 0-.758-.158m-.815 1.913v-1.292h.7a.74.74 0 0 1 .507.17q.194.17.194.49 0 .315-.194.474-.19.158-.518.158zm4.063-1.148.489 1.617H4.32l.49-1.617zm4.006.445-.74 2.789h-.73L6.326 11.85h.855l.601 2.903h.038l.706-2.903h.683l.706 2.903h.04l.596-2.903h.858l-1.055 3.999h-.73l-.74-2.789H8.85Z"/> </svg></a>
|
||||||
|
<Fragment set:html={htmlContent} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.raw {
|
||||||
|
display: inline-flex;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
right: 0;
|
||||||
|
color: gray;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-inline-end: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.gist {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import { getGistFile } from "../utils"
|
import { getGistFile } from "../utils"
|
||||||
import { Code } from 'astro-expressive-code/components'
|
import CodeBlob from "./CodeBlob.astro"
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
/** REQUIRED: Used to define the desired GitHub Gist ID */
|
/** REQUIRED: Used to define the desired GitHub Gist ID */
|
||||||
|
@ -17,37 +17,19 @@ export interface Props {
|
||||||
wrap?: boolean;
|
wrap?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { gistId, filename, showLineNumbers, wrap } = Astro.props as Props;
|
const { gistId, filename, wrap, showLineNumbers } = Astro.props as Props;
|
||||||
|
|
||||||
const SHOWLINENUMBERS = showLineNumbers ? showLineNumbers : showLineNumbers == undefined ? true : false;
|
|
||||||
const WRAP = wrap ? wrap : wrap == undefined ? true : false;
|
const WRAP = wrap ? wrap : wrap == undefined ? true : false;
|
||||||
|
const SLN = showLineNumbers ? showLineNumbers : showLineNumbers == undefined ? true : false;
|
||||||
|
|
||||||
const Gist = await getGistFile( gistId, filename);
|
const Gist = await getGistFile( gistId, filename);
|
||||||
|
|
||||||
---
|
---
|
||||||
{ Gist &&
|
{ Gist &&
|
||||||
|
<CodeBlob
|
||||||
<div>
|
wrap={WRAP} showLineNumbers={SLN}
|
||||||
<a class="raw" title="GitHub Gist RAW" href={Gist.raw_url}>View <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-filetype-raw" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.597 11.85H0v3.999h.782v-1.491h.71l.7 1.491h1.651l.313-1.028h1.336l.314 1.028h.84L5.31 11.85h-.925l-1.329 3.96-.783-1.572A1.18 1.18 0 0 0 3 13.116q0-.384-.167-.668a1.1 1.1 0 0 0-.478-.44 1.7 1.7 0 0 0-.758-.158m-.815 1.913v-1.292h.7a.74.74 0 0 1 .507.17q.194.17.194.49 0 .315-.194.474-.19.158-.518.158zm4.063-1.148.489 1.617H4.32l.49-1.617zm4.006.445-.74 2.789h-.73L6.326 11.85h.855l.601 2.903h.038l.706-2.903h.683l.706 2.903h.04l.596-2.903h.858l-1.055 3.999h-.73l-.74-2.789H8.85Z"/> </svg></a>
|
title={Gist.filename} raw_url={Gist.raw_url}
|
||||||
<Code
|
|
||||||
showLineNumbers={SHOWLINENUMBERS}
|
|
||||||
wrap={WRAP}
|
|
||||||
title={Gist.filename}
|
|
||||||
code={ Gist.content ? Gist.content : "" }
|
code={ Gist.content ? Gist.content : "" }
|
||||||
lang={Gist.language ? Gist.language.toLowerCase() : undefined }
|
lang={Gist.language ? Gist.language.toLowerCase() : undefined }
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
<style>
|
|
||||||
.raw {
|
|
||||||
display: inline-flex;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99;
|
|
||||||
right: 0;
|
|
||||||
color: white;
|
|
||||||
padding-top: 2px;
|
|
||||||
padding-inline-end: 1rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import { getGistGroup } from "../utils"
|
import { getGistGroup } from "../utils"
|
||||||
import { GetGist } from "./index"
|
import CodeBlob from "./CodeBlob.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
/** REQUIRED: Used to define the desired GitHub Gist ID */
|
/** REQUIRED: Used to define the desired GitHub Gist ID */
|
||||||
|
@ -15,38 +15,28 @@ export interface Props {
|
||||||
wrap?: boolean;
|
wrap?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { gistId, showLineNumbers, wrap } = Astro.props as Props;
|
const { gistId, wrap, showLineNumbers } = Astro.props as Props;
|
||||||
|
|
||||||
const SHOWLINENUMBERS = showLineNumbers ? showLineNumbers : showLineNumbers == undefined ? true : false;
|
|
||||||
const WRAP = wrap ? wrap : wrap == undefined ? true : false;
|
const WRAP = wrap ? wrap : wrap == undefined ? true : false;
|
||||||
|
const SLN = showLineNumbers ? showLineNumbers : showLineNumbers == undefined ? true : false;
|
||||||
|
|
||||||
const Gist = await getGistGroup(gistId);
|
const Gist = await getGistGroup(gistId);
|
||||||
const files = Gist?.files;
|
|
||||||
|
|
||||||
const filed = Object.keys(files as object);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const files = Gist.files;
|
||||||
---
|
---
|
||||||
{ Gist && (
|
{ Gist && (
|
||||||
<div class="gist">
|
<div>
|
||||||
{ filed.map((file) => (
|
{Object.keys(files).map((file) => {
|
||||||
<div class="gist">
|
const { content, filename, language, raw_url } = files[file];
|
||||||
<GetGist
|
return (
|
||||||
gistId={gistId}
|
<CodeBlob
|
||||||
filename={file}
|
title={filename} wrap={WRAP}
|
||||||
showLineNumbers={SHOWLINENUMBERS}
|
code={content} raw_url={raw_url}
|
||||||
wrap={WRAP}
|
lang={language.toLowerCase()}
|
||||||
|
showLineNumbers={SLN}
|
||||||
/>
|
/>
|
||||||
</div>
|
);
|
||||||
))}
|
})}
|
||||||
</div>
|
</div>
|
||||||
) }
|
) }
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.gist {
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,2 +1,2 @@
|
||||||
export { default as GetGist} from "./GetGist.astro"
|
export { default as GetGist} from "./GetGist.astro";
|
||||||
export { default as GetGistGroup} from "./GetGistGroup.astro"
|
export { default as GetGistGroup} from "./GetGistGroup.astro";
|
|
@ -1,13 +1,23 @@
|
||||||
import { defineIntegration, createResolver } from "astro-integration-kit"
|
import { defineIntegration, createResolver } from "astro-integration-kit"
|
||||||
import { corePlugins } from "astro-integration-kit/plugins"
|
import { corePlugins } from "astro-integration-kit/plugins"
|
||||||
import { astroGistsExpressiveCode } from "./integrations/expressive-code"
|
|
||||||
import { z } from "astro/zod";
|
import { z } from "astro/zod";
|
||||||
import mdx from "@astrojs/mdx";
|
|
||||||
import { loadEnv } from "vite";
|
import { loadEnv } from "vite";
|
||||||
|
import { type BundledShikiTheme } from 'expressive-code'
|
||||||
|
|
||||||
// Load environment variables
|
// Load environment variables
|
||||||
const { GITHUB_PERSONAL_TOKEN } = loadEnv("all", process.cwd(), "GITHUB_");
|
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<BundledShikiTheme>().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type UserConfig = z.infer<typeof optionsSchema>
|
||||||
|
|
||||||
/** Astro-Gist - An Astro.js integration for embedding GitHub Gists in your Astro.js project.
|
/** Astro-Gist - An Astro.js integration for embedding GitHub Gists in your Astro.js project.
|
||||||
* @example
|
* @example
|
||||||
* import { defineConfig } from "astro/config";
|
* import { defineConfig } from "astro/config";
|
||||||
|
@ -16,26 +26,23 @@ const { GITHUB_PERSONAL_TOKEN } = loadEnv("all", process.cwd(), "GITHUB_");
|
||||||
* export default defineConfig({
|
* export default defineConfig({
|
||||||
* integrations: [
|
* integrations: [
|
||||||
* astroGist({
|
* astroGist({
|
||||||
* // Enable the Astrojs/MDX Integration - Default: true
|
* // Optional: Change the default theme for the code blocks.
|
||||||
* MDXIntegration: true
|
* // Default: `Astro Houston (Custom)` If you want to use the default theme, you can omit this option.
|
||||||
|
* theme: "github-dark"
|
||||||
* })
|
* })
|
||||||
* ]
|
* ]
|
||||||
* });
|
* });
|
||||||
*/
|
*/
|
||||||
export default defineIntegration({
|
export default defineIntegration({
|
||||||
name: "@matthiesenxyz/astro-gists",
|
name: "@matthiesenxyz/astro-gists",
|
||||||
optionsSchema: z.object({
|
optionsSchema,
|
||||||
/** Enables the astrojs/mdx Integration */
|
|
||||||
MDXIntegration: z.boolean().optional().default(true),
|
|
||||||
}),
|
|
||||||
plugins: [...corePlugins],
|
plugins: [...corePlugins],
|
||||||
setup({ options }) {
|
setup({ options }) {
|
||||||
const { resolve } = createResolver(import.meta.url)
|
const { resolve } = createResolver(import.meta.url)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
"astro:config:setup": ({
|
"astro:config:setup": ({
|
||||||
watchIntegration, hasIntegration,
|
watchIntegration, addVirtualImports, logger,
|
||||||
updateConfig, logger, config
|
|
||||||
}) => {
|
}) => {
|
||||||
logger.info("Setting up Astro Gists Integration.")
|
logger.info("Setting up Astro Gists Integration.")
|
||||||
const configSetup = logger.fork("astro-gists/config:setup")
|
const configSetup = logger.fork("astro-gists/config:setup")
|
||||||
|
@ -48,38 +55,11 @@ export default defineIntegration({
|
||||||
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.")
|
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.")
|
||||||
}
|
}
|
||||||
|
|
||||||
// CHECK FOR EXISTING INTEGRATIONS
|
// Add virtual imports
|
||||||
const integrations = [...config.integrations]
|
addVirtualImports({
|
||||||
|
"virtual:astro-gists/config": `export default ${JSON.stringify(options)}`,
|
||||||
|
});
|
||||||
|
|
||||||
// ADD ExpressiveCode INTEGRATION
|
|
||||||
if (!hasIntegration("astro-expressive-code")) {
|
|
||||||
configSetup.info("Loading Astro Gists Expressive Code Integration.")
|
|
||||||
integrations.push(...astroGistsExpressiveCode())
|
|
||||||
} else {
|
|
||||||
configSetup.info("Astro Expressive Code Integration already loaded.")
|
|
||||||
}
|
|
||||||
|
|
||||||
// ADD MDX INTEGRATION IF ENABLED
|
|
||||||
if (options.MDXIntegration && hasIntegration("@astrojs/mdx")) {
|
|
||||||
configSetup.warn("@astrojs/mdx Integration already loaded.In some cases this could cause issues. Please remove it from your astro.config.mjs file. as it will be added automatically.")
|
|
||||||
}
|
|
||||||
if (options.MDXIntegration && !hasIntegration("@astrojs/mdx")) {
|
|
||||||
configSetup.info("Loading @astrojs/mdx Integration.")
|
|
||||||
integrations.push(mdx())
|
|
||||||
}
|
|
||||||
if (!options.MDXIntegration) {
|
|
||||||
configSetup.info("Internal MDX Integration Disabled. Skipping...")
|
|
||||||
}
|
|
||||||
|
|
||||||
// UPDATE All integrations
|
|
||||||
try {
|
|
||||||
updateConfig({
|
|
||||||
integrations: [...astroGistsExpressiveCode(), mdx()]
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
logger.error(e as string);
|
|
||||||
throw `@matthiesenxyz/astro-gists: Unable to Update Integrations...\n${e}`;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"astro:config:done": ({ logger }) => {
|
"astro:config:done": ({ logger }) => {
|
||||||
const configDone = logger.fork("astro-gists/config:done")
|
const configDone = logger.fork("astro-gists/config:done")
|
||||||
|
|
|
@ -1,44 +0,0 @@
|
||||||
import {
|
|
||||||
astroExpressiveCode,
|
|
||||||
type AstroExpressiveCodeOptions,
|
|
||||||
type CustomConfigPreprocessors
|
|
||||||
} from 'astro-expressive-code';
|
|
||||||
import type { AstroIntegration } from 'astro';
|
|
||||||
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an Expressive Code configuration preprocessor based on Starlight config.
|
|
||||||
* Used internally to set up Expressive Code and by the `<Code>` component.
|
|
||||||
*/
|
|
||||||
export function getGistsEcConfigPreprocessor(): CustomConfigPreprocessors['preprocessAstroIntegrationConfig'] {
|
|
||||||
return (input): AstroExpressiveCodeOptions => {
|
|
||||||
|
|
||||||
const ecConfig = input.ecConfig as AstroExpressiveCodeOptions; // Replace {} with the appropriate value for ecConfig
|
|
||||||
const {
|
|
||||||
themes = ["github-dark", "github-light"] as const,
|
|
||||||
plugins = [pluginLineNumbers()],
|
|
||||||
...rest
|
|
||||||
} = ecConfig;
|
|
||||||
|
|
||||||
return {
|
|
||||||
themes,
|
|
||||||
plugins,
|
|
||||||
...rest,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function astroGistsExpressiveCode(): AstroIntegration[] {
|
|
||||||
return [
|
|
||||||
astroExpressiveCode({
|
|
||||||
customConfigPreprocessors: {
|
|
||||||
preprocessAstroIntegrationConfig: getGistsEcConfigPreprocessor(),
|
|
||||||
preprocessComponentConfig: `
|
|
||||||
import { getGistsEcConfigPreprocessor } from '@matthiesenxyz/astro-gists/internal'
|
|
||||||
|
|
||||||
export default getGistsEcConfigPreprocessor()
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
};
|
|
File diff suppressed because it is too large
Load Diff
|
@ -57,12 +57,7 @@ export const getGistFile = async (
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getGistGroup = async (
|
export const getGistGroup = async (gistId: string) => {
|
||||||
gistId: string
|
|
||||||
) => {
|
|
||||||
const gist = await getGist(gistId);
|
const gist = await getGist(gistId);
|
||||||
if (gist?.files) {
|
return gist;
|
||||||
return gist ? gist : null;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
};
|
|
@ -0,0 +1,4 @@
|
||||||
|
declare module "virtual:astro-gists/config" {
|
||||||
|
const Config: import("./src/integration").UserConfig;
|
||||||
|
export default Config;
|
||||||
|
}
|
|
@ -1,5 +1,7 @@
|
||||||
---
|
---
|
||||||
import { GetGist, GetGistGroup } from "@matthiesenxyz/astro-gists/components"
|
import { GetGistGroup } from "@matthiesenxyz/astro-gists/components"
|
||||||
|
|
||||||
|
import GetGist from "@matthiesenxyz/astro-gists/GetGist"
|
||||||
---
|
---
|
||||||
<h1>Dev: Playground</h1>
|
<h1>Dev: Playground</h1>
|
||||||
|
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
---
|
|
||||||
title: Hello, World
|
|
||||||
---
|
|
||||||
import { GetGist, GetGistGroup } from "@matthiesenxyz/astro-gists/components"
|
|
||||||
|
|
||||||
# Hi there! This is a MDX test page.
|
|
||||||
|
|
||||||
<GetGist
|
|
||||||
gistId="cce7f3f1d9322710be8196aa344186ba"
|
|
||||||
filename="hello.md"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<GetGistGroup
|
|
||||||
gistId="84243fa11bf96a59bfb237152eb52fa7"
|
|
||||||
/>
|
|
126
pnpm-lock.yaml
126
pnpm-lock.yaml
|
@ -19,7 +19,7 @@ importers:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/mdx':
|
'@astrojs/mdx':
|
||||||
specifier: 2.1.1
|
specifier: 2.1.1
|
||||||
version: 2.1.1(astro@4.4.4)
|
version: 2.1.1(astro@4.4.11)
|
||||||
'@expressive-code/plugin-line-numbers':
|
'@expressive-code/plugin-line-numbers':
|
||||||
specifier: ^0.33.4
|
specifier: ^0.33.4
|
||||||
version: 0.33.4
|
version: 0.33.4
|
||||||
|
@ -27,14 +27,17 @@ importers:
|
||||||
specifier: ^12.6.0
|
specifier: ^12.6.0
|
||||||
version: 12.6.0
|
version: 12.6.0
|
||||||
astro:
|
astro:
|
||||||
specifier: ^4.4.0
|
specifier: ^4.4.1
|
||||||
version: 4.4.4
|
version: 4.4.11(@types/node@20.11.24)(typescript@5.3.3)
|
||||||
astro-expressive-code:
|
|
||||||
specifier: ^0.33.4
|
|
||||||
version: 0.33.4(astro@4.4.4)
|
|
||||||
astro-integration-kit:
|
astro-integration-kit:
|
||||||
specifier: ^0.5.1
|
specifier: ^0.5.1
|
||||||
version: 0.5.1(astro@4.4.4)
|
version: 0.5.1(astro@4.4.11)
|
||||||
|
expressive-code:
|
||||||
|
specifier: ^0.33.4
|
||||||
|
version: 0.33.4
|
||||||
|
hast-util-to-html:
|
||||||
|
specifier: ^8.0.4
|
||||||
|
version: 8.0.4
|
||||||
octokit:
|
octokit:
|
||||||
specifier: ^3.1.2
|
specifier: ^3.1.2
|
||||||
version: 3.1.2
|
version: 3.1.2
|
||||||
|
@ -148,7 +151,7 @@ packages:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@astrojs/mdx@2.1.1(astro@4.4.4):
|
/@astrojs/mdx@2.1.1(astro@4.4.11):
|
||||||
resolution: {integrity: sha512-AgGFdE7HOGmoFooGvMSatkA9FiSKwyVW7ImHot/bXJ6uAbFfu6iG2ht18Cf1pT22Hda/6iSCGWusFvBv0/EnKQ==}
|
resolution: {integrity: sha512-AgGFdE7HOGmoFooGvMSatkA9FiSKwyVW7ImHot/bXJ6uAbFfu6iG2ht18Cf1pT22Hda/6iSCGWusFvBv0/EnKQ==}
|
||||||
engines: {node: '>=18.14.1'}
|
engines: {node: '>=18.14.1'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
@ -157,7 +160,7 @@ packages:
|
||||||
'@astrojs/markdown-remark': 4.2.1
|
'@astrojs/markdown-remark': 4.2.1
|
||||||
'@mdx-js/mdx': 3.0.1
|
'@mdx-js/mdx': 3.0.1
|
||||||
acorn: 8.11.3
|
acorn: 8.11.3
|
||||||
astro: 4.4.4
|
astro: 4.4.11(@types/node@20.11.24)(typescript@5.3.3)
|
||||||
es-module-lexer: 1.4.1
|
es-module-lexer: 1.4.1
|
||||||
estree-util-visit: 2.0.0
|
estree-util-visit: 2.0.0
|
||||||
github-slugger: 2.0.0
|
github-slugger: 2.0.0
|
||||||
|
@ -1766,17 +1769,7 @@ packages:
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/astro-expressive-code@0.33.4(astro@4.4.4):
|
/astro-integration-kit@0.5.1(astro@4.4.11):
|
||||||
resolution: {integrity: sha512-PtXLjd89WBA1WsDYlt3V1LZs9Pa8FFoXilaGDSyfxtbYJ2OPHjWh2JJvCiXmfXmY3HkPJ2oW9Jjo6om5vUlVcg==}
|
|
||||||
peerDependencies:
|
|
||||||
astro: ^3.3.0 || ^4.0.0-beta
|
|
||||||
dependencies:
|
|
||||||
astro: 4.4.4
|
|
||||||
hast-util-to-html: 8.0.4
|
|
||||||
remark-expressive-code: 0.33.4
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/astro-integration-kit@0.5.1(astro@4.4.4):
|
|
||||||
resolution: {integrity: sha512-ef309UUNOjxUe0jjsDP5O3p+jkt53HAcrKOsWJ2NIgdUTOp5P/YKnAjbatfyu3bAuLFDfj5xhXm/rrwSe9d/hw==}
|
resolution: {integrity: sha512-ef309UUNOjxUe0jjsDP5O3p+jkt53HAcrKOsWJ2NIgdUTOp5P/YKnAjbatfyu3bAuLFDfj5xhXm/rrwSe9d/hw==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@vitejs/plugin-react': ^4.2.1
|
'@vitejs/plugin-react': ^4.2.1
|
||||||
|
@ -1800,7 +1793,7 @@ packages:
|
||||||
vue:
|
vue:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
astro: 4.4.4
|
astro: 4.4.11(@types/node@20.11.24)(typescript@5.3.3)
|
||||||
pathe: 1.1.2
|
pathe: 1.1.2
|
||||||
recast: 0.23.5
|
recast: 0.23.5
|
||||||
dev: false
|
dev: false
|
||||||
|
@ -1888,89 +1881,6 @@ packages:
|
||||||
- typescript
|
- typescript
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/astro@4.4.4:
|
|
||||||
resolution: {integrity: sha512-EZrDTN888w4sFKqavGsHu8jSaymyxNwnoqIq5NKlMG9WNU/Xn4Yn41pUdBuAOrgNzRp1NyXXhhV6GV1pN71V2Q==}
|
|
||||||
engines: {node: '>=18.14.1', npm: '>=6.14.0'}
|
|
||||||
hasBin: true
|
|
||||||
dependencies:
|
|
||||||
'@astrojs/compiler': 2.6.0
|
|
||||||
'@astrojs/internal-helpers': 0.2.1
|
|
||||||
'@astrojs/markdown-remark': 4.2.1
|
|
||||||
'@astrojs/telemetry': 3.0.4
|
|
||||||
'@babel/core': 7.23.9
|
|
||||||
'@babel/generator': 7.23.6
|
|
||||||
'@babel/parser': 7.23.9
|
|
||||||
'@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9)
|
|
||||||
'@babel/traverse': 7.23.9
|
|
||||||
'@babel/types': 7.23.9
|
|
||||||
'@medv/finder': 3.1.0
|
|
||||||
'@types/babel__core': 7.20.5
|
|
||||||
acorn: 8.11.3
|
|
||||||
aria-query: 5.3.0
|
|
||||||
axobject-query: 4.0.0
|
|
||||||
boxen: 7.1.1
|
|
||||||
chokidar: 3.6.0
|
|
||||||
ci-info: 4.0.0
|
|
||||||
clsx: 2.1.0
|
|
||||||
common-ancestor-path: 1.0.1
|
|
||||||
cookie: 0.6.0
|
|
||||||
cssesc: 3.0.0
|
|
||||||
debug: 4.3.4
|
|
||||||
deterministic-object-hash: 2.0.2
|
|
||||||
devalue: 4.3.2
|
|
||||||
diff: 5.2.0
|
|
||||||
dlv: 1.1.3
|
|
||||||
dset: 3.1.3
|
|
||||||
es-module-lexer: 1.4.1
|
|
||||||
esbuild: 0.19.12
|
|
||||||
estree-walker: 3.0.3
|
|
||||||
execa: 8.0.1
|
|
||||||
fast-glob: 3.3.2
|
|
||||||
flattie: 1.1.0
|
|
||||||
github-slugger: 2.0.0
|
|
||||||
gray-matter: 4.0.3
|
|
||||||
html-escaper: 3.0.3
|
|
||||||
http-cache-semantics: 4.1.1
|
|
||||||
js-yaml: 4.1.0
|
|
||||||
kleur: 4.1.5
|
|
||||||
magic-string: 0.30.7
|
|
||||||
mdast-util-to-hast: 13.0.2
|
|
||||||
mime: 3.0.0
|
|
||||||
ora: 7.0.1
|
|
||||||
p-limit: 5.0.0
|
|
||||||
p-queue: 8.0.1
|
|
||||||
path-to-regexp: 6.2.1
|
|
||||||
preferred-pm: 3.1.3
|
|
||||||
prompts: 2.4.2
|
|
||||||
rehype: 13.0.1
|
|
||||||
resolve: 1.22.8
|
|
||||||
semver: 7.6.0
|
|
||||||
shikiji: 0.9.19
|
|
||||||
shikiji-core: 0.9.19
|
|
||||||
string-width: 7.1.0
|
|
||||||
strip-ansi: 7.1.0
|
|
||||||
tsconfck: 3.0.2(typescript@5.3.3)
|
|
||||||
unist-util-visit: 5.0.0
|
|
||||||
vfile: 6.0.1
|
|
||||||
vite: 5.1.5(@types/node@20.11.24)
|
|
||||||
vitefu: 0.2.5(vite@5.1.5)
|
|
||||||
which-pm: 2.1.1
|
|
||||||
yargs-parser: 21.1.1
|
|
||||||
zod: 3.22.4
|
|
||||||
optionalDependencies:
|
|
||||||
sharp: 0.32.6
|
|
||||||
transitivePeerDependencies:
|
|
||||||
- '@types/node'
|
|
||||||
- less
|
|
||||||
- lightningcss
|
|
||||||
- sass
|
|
||||||
- stylus
|
|
||||||
- sugarss
|
|
||||||
- supports-color
|
|
||||||
- terser
|
|
||||||
- typescript
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/available-typed-arrays@1.0.7:
|
/available-typed-arrays@1.0.7:
|
||||||
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
|
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
|
@ -4959,14 +4869,6 @@ packages:
|
||||||
unified: 11.0.4
|
unified: 11.0.4
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/remark-expressive-code@0.33.4:
|
|
||||||
resolution: {integrity: sha512-ucGzDknAY6LJKkcNSaYh9N0SEr1LDA0shageM1xa+4fu/o+7g6R1/ApF7d2c+cj1ERLvaF4OaUa87n5baY+MDA==}
|
|
||||||
dependencies:
|
|
||||||
expressive-code: 0.33.4
|
|
||||||
hast-util-to-html: 8.0.4
|
|
||||||
unist-util-visit: 4.1.2
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/remark-gfm@4.0.0:
|
/remark-gfm@4.0.0:
|
||||||
resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
|
resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
Loading…
Reference in New Issue