Woot new component

.changeset/lucky-candles-melt.md

@@ -0,0 +1,5 @@
+---
+"@matthiesenxyz/astro-gists": patch
+---
+
+Added new <GetGistGroup> Component to get entire collections of gists (See Readme for more info)

package/README.md

@@ -73,9 +73,9 @@ GITHUB_PERSONAL_TOKEN=ghp_YOURPERSONALTOKENHERE
 
 ### Usage
 
-#### `<GetGist>`
+#### `<GetGist>` Shows a SINGLE gist from a GistCollection
 
-This Utility is meant to display Gists as Codeblocks using ExpressiveCode for Astro instead of Scripted Elements using the default Gist method
+This Utility is meant to display a single Gist as Codeblocks using ExpressiveCode for Astro instead of Scripted Elements using the default Gist method by calling the ID and Filename
 
 ```astro
 ---
@@ -87,6 +87,18 @@ import { GetGist } from "@matthiesenxyz/astro-gists/components"
 />
 ```
 
+#### `<GetGistGroup>` Shows all of the Gists from a GistCollection
+
+This Utility is meant to display an entire collection of Gists by ID
+
+```astro
+import { GetGistGroup } from "@matthiesenxyz/astro-gists/components"
+
+<GetGistGroup 
+	gistId="your-gist-id-here"
+/>
+```
+
 ## Contributing
 
 This package is structured as a monorepo:

package/src/components/GetGistGroup.astro

@@ -0,0 +1,52 @@
+---
+import { getGistGroup } from "../utils"
+import { GetGist } from "./index"
+
+export interface Props {
+    /** REQUIRED: Used to define the desired GitHub Gist ID */
+    gistId: string;
+    /** OPTIONAL: Allows the user to Enable and Disable LineNumbers
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /** OPTIONAL: Allows the user to Enable and Disable LineWrapping
+     * @default true
+     */
+    wrap?: boolean;
+}
+
+const { gistId, showLineNumbers, wrap } = Astro.props as Props;
+
+const SHOWLINENUMBERS = showLineNumbers ? showLineNumbers : showLineNumbers == undefined ? true : false;
+const WRAP = wrap ? wrap : wrap == undefined ? true : false;
+
+const Gist = await getGistGroup(gistId);
+const files = Gist?.files;
+
+const filed = Object.keys(files as object);
+
+
+
+---
+{ Gist && (
+    <div class="gist">
+        { filed.map((file) => (
+            <div class="gist">
+                <GetGist 
+                    gistId={gistId} 
+                    filename={file} 
+                    showLineNumbers={SHOWLINENUMBERS} 
+                    wrap={WRAP} 
+                />
+            </div>
+        ))}
+    </div>
+) }
+
+
+<style>
+    .gist {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+</style>

package/src/components/index.ts

@@ -1 +1,2 @@
-export { default as GetGist} from "./GetGist.astro"
+export { default as GetGist} from "./GetGist.astro"
+export { default as GetGistGroup} from "./GetGistGroup.astro"

package/src/utils.ts

@@ -26,3 +26,12 @@ export const getGistFile = async (
   return null;
 };
 
+export const getGistGroup = async (
+  gistId: string
+  ) => {
+const gist = await getGist(gistId);
+if (gist?.files) {
+  return gist ? gist : null;
+}
+return null;
+};

playground/src/pages/index.astro

@@ -1,9 +1,13 @@
 ---
-import { GetGist } from "@matthiesenxyz/astro-gists/components"
+import { GetGist, GetGistGroup } from "@matthiesenxyz/astro-gists/components"
 ---
 <h1>Dev: Playground</h1>
 
 <GetGist 
 	gistId="cce7f3f1d9322710be8196aa344186ba"
 	filename="hello.md" 
+/>
+
+<GetGistGroup 
+	gistId="84243fa11bf96a59bfb237152eb52fa7"
 />