astro-gists/package/README.md

Astro-Gists

This is an Astro integration that allows the user to import GitHub Gists by ID through an Astro Component and Octokit

Usage

Prerequisites

The Only Requirement to install this package is a Github account with a Varified Email to be able to create a Personal Access Token.

This Integration uses Octokit by GitHub to Generate custom gists using ExpressiveCode within your Astro project!

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add @matthiesenxyz/astro-gists

npx astro add @matthiesenxyz/astro-gists

yarn astro add @matthiesenxyz/astro-gists

Or install it manually:

1. Install the required dependencies

pnpm add @matthiesenxyz/astro-gists

npm install @matthiesenxyz/astro-gists

yarn add @matthiesenxyz/astro-gists

2. Add the integration to your astro config

import { defineConfig } from "astro/config";
+import astroGist from "@matthiesenxyz/astro-gists";


// https://astro.build/config
export default defineConfig({
+  integrations: [astroGist()]
});

Configuration

Setup your .env file with the following secret from github:

Github Personal Access Token (Classic)

• No Special Permissions required
• Octokit recommends creating an empty token for this!

GITHUB_PERSONAL_TOKEN=ghp_YOURPERSONALTOKENHERE

Usage

<GetGist>

This Utility is meant to display Gists as Codeblocks using ExpressiveCode for Astro instead of Scripted Elements using the default Gist method

---
import { GetGist } from "@matthiesenxyz/astro-gists/components"
---
<GetGist 
	gistId="your-gist-id-here"
	filename="name-of-desired-file-to-be-displayed.md" 
/>

Licensing

MIT Licensed. Made with ❤️ by AdamMatthiesen Under MatthiesenXYZ.

Acknowledgements

Octokit by GitHub Expressive-Code By Hippotasic