From 9110c2e5cfe5b2cfed4417301c8d5c35ee6cc462 Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Thu, 7 Mar 2024 02:28:47 -0800
Subject: [PATCH] Add hippo recommends

---
 package/src/components/CodeBlob.astro | 17 +++++++++++++++--
 package/src/components/page-data.ts   | 18 ++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 package/src/components/page-data.ts

diff --git a/package/src/components/CodeBlob.astro b/package/src/components/CodeBlob.astro
index 427750b..81f5041 100644
--- a/package/src/components/CodeBlob.astro
+++ b/package/src/components/CodeBlob.astro
@@ -4,6 +4,7 @@ import { ExpressiveCode, loadShikiTheme, type BundledShikiTheme, ExpressiveCodeT
 import { toHtml } from 'hast-util-to-html'
 import fs from 'node:fs'
 import config from "virtual:astro-gists/config";
+import { getPageData } from './page-data'
 
 const jsoncString = fs.readFileSync(new URL(`../themes/houston.jsonc`, import.meta.url), 'utf-8')
 const houston = ExpressiveCodeTheme.fromJSONString(jsoncString)
@@ -14,6 +15,12 @@ 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()],
@@ -24,12 +31,18 @@ const themeStyles = await engine.getThemeStyles();
 const jsModules = await engine.getJsModules();
 
 const { renderedGroupAst, styles } = await engine.render({
-	language: lang, meta, locale, code, props, })
+	language: lang, meta, locale, code,
+  parentDocument: {
+    positionInDocument: { groupIndex,},
+  },
+  props, })
 
 let htmlContent = toHtml(renderedGroupAst)
 
 const stylesToPrepend: string[] = []
-stylesToPrepend.push(baseStyles, themeStyles, ...styles)
+const gistBaseStyles = baseStyles.replace(/\.expressive-code/g, '.gist .expressive-code')
+const gistThemeStyles = themeStyles.replace(/\.expressive-code/g, '.gist .expressive-code')
+stylesToPrepend.push(gistBaseStyles, gistThemeStyles, ...styles)
 if (stylesToPrepend.length) {
   htmlContent = `<style>${[...stylesToPrepend].join('')}</style>${htmlContent}`
 }
diff --git a/package/src/components/page-data.ts b/package/src/components/page-data.ts
new file mode 100644
index 0000000..f332b3f
--- /dev/null
+++ b/package/src/components/page-data.ts
@@ -0,0 +1,18 @@
+export type PageData = {
+	url: string
+	blockGroupIndex: number
+}
+
+const pageDataMap = new Map<Request, PageData>()
+
+export function getPageData(request: Request): PageData {
+	let data = pageDataMap.get(request)
+	if (!data) {
+		data = {
+			url: request.url,
+			blockGroupIndex: -1,
+		}
+		pageDataMap.set(request, data)
+	}
+	return data
+}
\ No newline at end of file