use dynamic guide links

apps/site/guides/AllGuides.tsx

@@ -0,0 +1,10 @@
+import { GuidesCollection } from '@/collections'
+import { Card } from '@/components/Card'
+
+export function AllGuides() {
+  return GuidesCollection.getSources().then((sources) =>
+    sources.map((source, index) => (
+      <Card key={index} href={source.getPath()} label={source.getTitle()} />
+    ))
+  )
+}

apps/site/guides/index.mdx

@@ -1,12 +1,13 @@
+import { AllGuides } from './AllGuides'
+
 export const metadata = {
   title: 'Guides',
   description:
     'Renoun works with most JavaScript libraries, enhancing flexibility and compatibility. These guides will help you integrate Renoun with your favorite library.',
 }
 
 <Row>
-  <Card href="/guides/next" label="Next.js" />
-  <Card href="/guides/waku" label="Waku" />
+  <AllGuides />
 </Row>
 
 Don't see a guide for the library you use? [Request a guide](https://github.com/souporserious/renoun/issues/new?title=requesting%20a%20guide%20for%20%3Cframework-here%3E) and we'll help you get started!