Member info based on markdown

src/components/BlogPost.astro

@@ -1,8 +1,8 @@
 ---
 interface Props {
 	url: string;
-	title: string;
-	description: string;
+	title?: string;
+	description?: string;
 }
 
 const { url, title, description } = Astro.props;

src/components/Member.astro

@@ -1,10 +1,11 @@
 ---
 interface Props {
-	github: string;
-	name: string;
+	github?: string;
+	name?: string;
+	content?: string;
 }
 
-const { github, name } = Astro.props;
+const { github, name, content } = Astro.props;
 ---
 
 <div class="member-card">
@@ -15,9 +16,7 @@ const { github, name } = Astro.props;
 		<h2>
 			<a href={`https://github.com/${github}`} target="_blank">{name} ({github})</a>
 		</h2>
-		<slot>
-			<p>Something awesome about {name}!</p>
-		</slot>
+		<slot set:html={content}></slot>
 	</div>
 </div>
 <style>

src/pages/index.astro

@@ -4,6 +4,7 @@ import Member from '../components/Member.astro';
 import BlogPost from '../components/BlogPost.astro';
 
 const posts = await Astro.glob('../pages/blog/*.md');
+const members = await Astro.glob('../pages/members/*.md');
 ---
 
 <Layout title="Julie, Racks & Hazel">
@@ -19,23 +20,9 @@ const posts = await Astro.glob('../pages/blog/*.md');
 
 		<h2>About us</h2>
 		<div class="about-us">
-			<Member
-				github="zoey-on-github"
-				name="Julie"
-			/>
-			<Member
-				github="rhaskia"
-				name="Racks"
-			/>
-			<Member
-				github="leafeling"
-				name="Hazel"
-			>
-				<p>
-					I've been developing small games since I was very young, and my first publically available
-					game was <a href="https://github.com/leafal-io/celesteia">Celesteia</a>, a 2D sandbox game.
-				</p>
-			</Member>
+			{members.sort((a, b) => a.frontmatter.name > b.frontmatter.name ? 1 : -1).map((member) =>
+				<Member {...member.frontmatter} content={member.compiledContent()} />
+			)}
 		</div>
 	</main>
 </Layout>

src/pages/members/leafeling.md

@@ -0,0 +1,6 @@
+---
+name: 'Hazel'
+github: leafeling
+---
+I've been developing small games since I was very young, and my first publically available
+game was [Celesteia](https://github.com/leafal-io/celesteia), a 2D sandbox game.

src/pages/members/rhaskia.md

@@ -0,0 +1,5 @@
+---
+name: 'Racks'
+github: rhaskia
+---
+Something awesome about Racks!

src/pages/members/zoey-on-github.md

@@ -0,0 +1,5 @@
+---
+name: 'Julie'
+github: zoey-on-github
+---
+Something awesome about Julie!