Merge pull request #62 from amplifying-fsharp/add_blog

Add blog

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/content/blogentries/DataScienceConf2023.md

@@ -0,0 +1,21 @@
+---
+title: Data Science in F#
+date: 2023-09-30
+slug: "2023/09/30"
+---
+
+## Data Science in F# in Berlin - 2023-09-30
+
+The Europe-based part 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.
+Everyone was thrilled to have the opportunity to meet in person and share a drink .. or two .. or ..  
+
+Being mostly involved with dev tooling so far, it was a real eye opener for us to see and meet the Data Science community of F#.  
+In the discussions a lot of opportunities for collaboration came up, and we are looking forward to working with the [Fslab](https://fslab.org/) community to help them with their wonderful F# ecosystem for Data Science. The dominance of Python in the Data Science space is unlikely to go away soon, but there is a strong believe that F# deserves a strong foot hold in the Data Science world. A very well prepared hackathon on Saturday helped new contributors to get started and has already resulted in a number of PRs.
+
+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.
+
+Fueled by coffee and ice cream, 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,6 +83,7 @@ const footerIcons = [
           id="navbarToggler"
         >
           <div class="navbar-nav">
+            <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 {
+    display: block;
+    margin: 1.5rem auto;
+    max-width: 960px;
+  }
+</style>