feat:add readme for mods

astro.config.mjs

@@ -5,11 +5,12 @@ import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';
 
 import sitemap from '@astrojs/sitemap';
+import markdownIntegration from '@astropub/md';
 
 // https://astro.build/config
 export default defineConfig({
     integrations: [tailwind(), react(), sitemap({
         filter: (page) => !page.includes('mods/'),
-    })],
+    }), markdownIntegration()],
     site: 'https://zen-browser.app',
 });

package.json

@@ -16,6 +16,8 @@
 		"@astrojs/react": "^4.1.2",
 		"@astrojs/rss": "^4.0.10",
 		"@astrojs/sitemap": "^3.2.1",
+		"@astrojs/tailwind": "^5.1.2",
+		"@astropub/md": "^1.0.0",
 		"@astrojs/tailwind": "^5.1.4",
 		"@fontsource/bricolage-grotesque": "^5.1.0",
 		"@fortawesome/fontawesome-svg-core": "^6.7.1",
@@ -41,6 +43,7 @@
 		"typescript": "^5.6.3"
 	},
 	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.15",
 		"wrangler": "^3.94.0"
 	}
 }

src/components/ReadmeComponent.astro

@@ -0,0 +1,36 @@
+---
+import { markdown } from '@astropub/md'
+import { ExternalLink } from 'lucide-astro'
+
+interface Props {
+  url: string
+  id: string
+}
+
+const { url, id } = Astro.props
+
+const readme = await fetch(url).then((res) => res.text())
+const readmeLink = `https://github.com/zen-browser/theme-store/tree/main/themes/${id}`
+const html = await markdown(readme)
+---
+
+<section id="readme-wrapper" class="rounded-xl bg-coral/10 p-2">
+  <h2
+    class="flex w-full flex-wrap items-baseline justify-start gap-1 pb-2 text-2xl"
+  >
+    Readme
+    <a href={readmeLink} target="_blank">
+      {' '}
+      <ExternalLink
+        class="aspect-square h-4 text-dark opacity-40 hover:opacity-100 transition-all ease-linear duration-100"
+      />{' '}
+    </a>
+
+  </h2>
+  <div
+    id="markdown-content"
+    class="prose-lg border-t border-dark pt-2 p-2 prose-a:underline prose-li:list-disc"
+  >
+    <Fragment set:html={html} class:list={'readme-text'} />
+  </div>
+</section>

src/pages/mods/[...slug].astro

@@ -6,6 +6,10 @@ import Title from '../../components/Title.astro';
 import Description from '../../components/Description.astro';
 import Button from '../../components/Button.astro';
 import BackButton from '../../components/BackButton.astro';
+
+import { Info } from 'lucide-astro';
+import ReadmeComponent from '../../components/ReadmeComponent.astro';
+
 import { ArrowRight, Info } from 'lucide-astro';
 
 export async function getStaticPaths() {
@@ -16,8 +20,6 @@ export async function getStaticPaths() {
   }));
 }
 
-// https://github.com/TeaClientMC/Website/blob/7faacc9f8b2c79c74f711d413b155c84faafc00d/src/pages/news/%5B...slug%5D.astro
-
 const mod = Astro.props;
 
 const dates = {
@@ -79,10 +81,8 @@ const dates = {
           </Button>
         </div>
       </div>
-      <!-- TODO: Readme markdown 
-      <div class="h-[1px] opacity-80 bg-dark w-full"></div>
-      -->
+      <ReadmeComponent url={mod.readme} id={mod.id}/>
     </div>
     <div>
   </main>
-</Layout>
+</Layout>

tailwind.config.mjs

@@ -18,5 +18,7 @@ export default {
 			},
 		},
 	},
-	plugins: [],
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 }