have dedicated files for blog entries

src/components/BlogEntries.jsx

@@ -0,0 +1,31 @@
+function BlogEntries({ blogentries }) {
+  const entries = blogentries
+    .sort((a, b) => b.data.date - a.data.date);
+  return (
+    <div>
+      <ul>
+        {(
+          <div id="blogentries">
+            {entries.map((blogentry, idx) => {
+              return (
+                <li key={idx} className={"d-flex justify-content-center mt-5"}>
+                  <a
+                    href={`/blogentries/${blogentry.slug}`}
+                    key={`${blogentry.id}_${idx}`}
+                  >
+                    <h3>{blogentry.data.title}</h3>
+                    <div>
+                      <time>{blogentry.data.date.toLocaleDateString()}</time>
+                    </div>
+                  </a>
+                </li>
+              );
+            })}
+          </div>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+export default BlogEntries;

src/pages/blog.md → src/content/blogentries/DataScienceConf2023.md

@@ -1,5 +1,10 @@
+---
+title: Data Science in F#
+date: 2023-09-30
+slug: "2023/09/30"
+---
 
-## DataScience in F# in Berlin - 2023-09-30
+## Data Science in F# in Berlin - 2023-09-30
 
 Some of us made the trip to Berlin to attend the [Data Science in F#](https://datascienceinfsharp.com/) conference.  
 First of all, we want to give a big shoutout to the organizers for putting together the first real live F# conference after many years.
@@ -11,6 +16,6 @@ In the discussions a lot of opportunities for collaboration came up, and we are
 Regarding Amplifying F# itself, we are very happy to welcome [Ronald Schlenker](https://github.com/RonaldSchlenker) in our team.
 A great buddy and a great F# developer known for his work on [FsHttp](https://github.com/fsprojects/FsHttp), [Vide](https://github.com/RonaldSchlenker/Vide), and many other projects.
 
-Many ideas to drive our initiative forward and to lift Amplifying F# to the next level came up during the conference.  
+Many ideas to take the next steps in our initiative and to lift Amplifying F# to the next level came up during the conference.  
 Stay tuned for more news in the coming weeks.
 ![The Amplifying F# team and friends.](/images/blog/datascience2023.jpg)

src/layouts/Layout.astro

@@ -83,7 +83,7 @@ const footerIcons = [
           id="navbarToggler"
         >
           <div class="navbar-nav">
-            <a class="nav-link" aria-current="page" href="/blog">Blog</a>
+            <a class="nav-link" aria-current="page" href="/blogentries">Blog</a>
             <a class="nav-link" aria-current="page" href="/incitation"
               >Incitation</a
             >

src/pages/blogentries.astro

@@ -0,0 +1,22 @@
+---
+import PageLayout from "../layouts/PageLayout.astro";
+import BlogEntries from "../components/blogEntries.jsx";
+
+import { getCollection } from "astro:content";
+const blogentries = await getCollection("blogentries");
+---
+
+<PageLayout
+  title="Blog"
+  backgroundImage="/images/blog-header.jpg"
+  mainTitle="Blog"
+  containerClass="container-fluid"
+>
+  <BlogEntries client:load blogentries={blogentries} />
+</PageLayout>
+
+<style lang="sass" is:global>
+  img
+    max-width: 80pc
+    margin: 2rem
+</style>

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

@@ -0,0 +1,36 @@
+---
+import { getCollection } from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+import LocalTime from "../../components/LocalTime.jsx";
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection("blogentries");
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+const {
+  title,
+  date,
+} = entry.data;
+---
+
+<PageLayout
+  backgroundImage="/images/blog-header.jpg"
+  title={title}
+  mainTitle={title}
+>
+  <Content />
+</PageLayout>
+
+<style is:global>
+  img {
+    margin: 0.5rem auto;
+    width: 100%;
+    max-width: 960px;
+  }
+</style>