2024-02-24 03:34:15 +00:00
# `Astro-Gists`
2024-02-24 02:44:44 +00:00
2024-02-24 03:34:15 +00:00
This is an [Astro integration ](https://docs.astro.build/en/guides/integrations-guide/ ) that allows the user to import GitHub Gists by ID through an Astro Component and Octokit
2024-02-24 02:44:44 +00:00
## Usage
### Prerequisites
2024-02-24 09:47:57 +00:00
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` ](http://octokit.github.io/ ) by `GitHub` to Generate custom gists using [`ExpressiveCode` ](https://expressive-code.com/ ) within your Astro project!
2024-02-24 02:44:44 +00:00
### Installation
Install the integration **automatically** using the Astro CLI:
```bash
2024-02-24 03:34:15 +00:00
pnpm astro add @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
```bash
2024-02-24 03:34:15 +00:00
npx astro add @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
```bash
2024-02-24 03:34:15 +00:00
yarn astro add @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
Or install it **manually** :
1. Install the required dependencies
```bash
2024-02-24 03:34:15 +00:00
pnpm add @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
```bash
2024-02-24 03:34:15 +00:00
npm install @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
```bash
2024-02-24 03:34:15 +00:00
yarn add @matthiesenxyz/astro -gists
2024-02-24 02:44:44 +00:00
```
2. Add the integration to your astro config
```diff
2024-02-24 09:47:57 +00:00
import { defineConfig } from "astro/config";
+import astroGist from "@matthiesenxyz/astro-gists";
2024-02-24 02:44:44 +00:00
2024-02-24 09:47:57 +00:00
// https://astro.build/config
2024-02-24 02:44:44 +00:00
export default defineConfig({
2024-02-24 09:47:57 +00:00
+ integrations: [astroGist()]
2024-02-24 02:44:44 +00:00
});
```
### Configuration
2024-02-24 09:47:57 +00:00
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!
2024-02-24 09:50:18 +00:00
```dotenv
2024-02-24 09:47:57 +00:00
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
2024-02-24 09:50:18 +00:00
```astro
2024-02-24 09:47:57 +00:00
---
import { GetGist } from "@matthiesenxyz/astro-gists/components"
---
< GetGist
gistId="your-gist-id-here"
filename="name-of-desired-file-to-be-displayed.md"
/>
2024-02-24 09:50:18 +00:00
```
2024-02-24 02:44:44 +00:00
## Licensing
2024-02-24 03:34:15 +00:00
[MIT Licensed ](./LICENSE ). Made with ❤️ by [AdamMatthiesen ](https://github.com/AdamMatthiesen ) Under [MatthiesenXYZ ](https://github.com/MatthiesenXYZ ).
2024-02-24 02:44:44 +00:00
## Acknowledgements
2024-02-24 09:52:04 +00:00
- [`Octokit` ](http://octokit.github.io ) by GitHub
- [`Expressive-Code` ](https://expressive-code.com/ ) By Hippotasic