feat: components and layout switch to markdown on main page

aaronczichon · Mar 22, 2024 · dc14407 · dc14407
1 parent e761216
commit dc14407
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 95 deletions.
diff --git a/personal/src/components/BlogEntryList.astro b/personal/src/components/BlogEntryList.astro
@@ -0,0 +1,46 @@
+---
+import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+const allPosts = await getCollection("blog");
+
+const dateOptions: object = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+const { limit } = Astro.props;
+---
+
+<div class="entry-grid">
+  {
+    allPosts
+      .sort((a, b) => {
+        return a.data.pubDate > b.data.pubDate ? -1 : 1;
+      })
+      .slice(0, limit)
+      .map((post) => (
+        <a href={"/blog/" + post.slug} class="entry">
+          {post.data.image ? (
+            <Image
+              widths={[700]}
+              sizes={`700px`}
+              src={post.data.image.url}
+              alt={post.data.image.alt}
+              style="max-height: 350px; width: 100%; object-fit: cover;"
+            />
+          ) : null}
+          <h3>
+            {post.data.title} <br />
+            <span class="entry--date">
+              {new Date(post.data.pubDate).toLocaleDateString(
+                "en-CA",
+                dateOptions,
+              )}
+            </span>
+          </h3>
+          <p>{post.data.description}</p>
+        </a>
+      ))
+  }
+</div>
diff --git a/personal/src/components/MatomoTracking.astro b/personal/src/components/MatomoTracking.astro
@@ -0,0 +1,20 @@
+---
+
+---
+
+<script is:inline>
+  var _paq = (window._paq = window._paq || []);
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    var u = "//analytics.aaronczichon.de/";
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = u + "matomo.js";
+    s.parentNode.insertBefore(g, s);
+  })();
+</script>
diff --git a/personal/src/layouts/Layout.astro b/personal/src/layouts/Layout.astro
@@ -10,6 +10,7 @@ import "../styles/fonts/mona-sans.css";
 
 import Nav from "../components/Nav.astro";
 import ColorSchemeToggle from "../components/ColorSchemeToggle.astro";
+import MatomoTracking from "../components/MatomoTracking.astro";
 ---
 
 <!doctype html>
@@ -45,21 +46,6 @@ import ColorSchemeToggle from "../components/ColorSchemeToggle.astro";
     <ColorSchemeToggle />
     <Nav />
     <slot />
-    <script is:inline>
-      var _paq = (window._paq = window._paq || []);
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        var u = "//analytics.aaronczichon.de/";
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", "1"]);
-        var d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.async = true;
-        g.src = u + "matomo.js";
-        s.parentNode.insertBefore(g, s);
-      })();
-    </script>
+    <MatomoTracking />
   </body>
 </html>
diff --git a/personal/src/layouts/StartPage.astro b/personal/src/layouts/StartPage.astro
@@ -0,0 +1,25 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Hero from "../components/Hero.astro";
+import BlogEntryList from "../components/BlogEntryList.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<Layout title={"Aaron Czichon - " + frontmatter.title}>
+  {
+    frontmatter.image ? (
+      <Hero url={frontmatter.image.url} alt={frontmatter.image.alt} />
+    ) : (
+      ""
+    )
+  }
+  <main class="container">
+    <article>
+      <slot />
+    </article>
+    <h2 style="padding-top: 32px">My latest blog entries</h2>
+    <BlogEntryList limit="5" />
+    <a href="/blog" style="padding-bottom: 32px">read more...</a>
+  </main>
+</Layout>
diff --git a/personal/src/pages/blog.astro b/personal/src/pages/blog.astro
@@ -1,16 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { getCollection } from "astro:content";
+import BlogEntryList from "../components/BlogEntryList.astro";
 import { Image } from "astro:assets";
 
-const dateOptions: object = {
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-};
-
-const allPosts = await getCollection("blog");
-
 import rssIcon from "../resources/rss.svg";
 ---
 
@@ -39,34 +31,6 @@ import rssIcon from "../resources/rss.svg";
         feel offended by, please let me know. <br />
       </p>
     </article>
-    <div class="entry-grid">
-      {
-        allPosts
-          .sort((a, b) => {
-            return a.data.pubDate > b.data.pubDate ? -1 : 1;
-          })
-          .map((post) => (
-            <a href={"/blog/" + post.slug} class="entry">
-              {post.data.image ? (
-                <Image
-                  src={post.data.image.url}
-                  alt={post.data.image.alt}
-                  style="max-height: 350px; width: 100%; object-fit: cover;"
-                />
-              ) : null}
-              <h3>
-                {post.data.title} <br />
-                <span class="entry--date">
-                  {new Date(post.data.pubDate).toLocaleDateString(
-                    "en-CA",
-                    dateOptions,
-                  )}
-                </span>
-              </h3>
-              <p>{post.data.description}</p>
-            </a>
-          ))
-      }
-    </div>
+    <BlogEntryList />
   </main>
 </Layout>
diff --git a/personal/src/pages/index.md b/personal/src/pages/index.md
@@ -0,0 +1,19 @@
+---
+layout: "../layouts/StartPage.astro"
+title: "Home"
+---
+
+# Hi, I'm Aaron!
+
+I currently live in Halifax, Canada and I work for the German company [PlanB. GmbH](https://plan-b-gmbh.com) since September 2020 as an Solution Expert with focus on web technologies. In previous years I worked at cellent AG as a developer and at a startup as Head of Software Development.
+
+Over the past few years of software development I wrote several apps, articles and talked at conferences. Since August 2022 I'm listed as an official [Ionic Developer Expert (IDE)](https://ionic.io/developer-experts).
+
+You can also take a look at my public [Github](https://github.com/aaronczichon) profile or let me hear something from you on [Mastodon](https://mastodon.social/@czichon).
+
+Need a conversation starter?  
+I like motorcycling, volleyball and Formula 1.
+
+If you have questions don't hesitate to contact me.
+
+Want to talk to me? [Book](https://cal.com/aaronczichon/30min) a slot if you like. I would love to chat :)
diff --git a/personal/src/pages/index.astro → personal/src/pages/index2.astro b/personal/src/pages/index.astro → personal/src/pages/index2.astro
@@ -1,14 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { getCollection } from "astro:content";
-import { Image } from "astro:assets";
-const allPosts = await getCollection("blog");
-
-const dateOptions: object = {
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-};
+import BlogEntryList from "../components/BlogEntryList.astro";
 ---
 
 <Layout title="Aaron Czichon - Home">
@@ -51,38 +43,7 @@ const dateOptions: object = {
       </p>
     </article>
     <h2 style="padding-top: 32px">My latest blog entries</h2>
-    <div class="entry-grid">
-      {
-        allPosts
-          .sort((a, b) => {
-            return a.data.pubDate > b.data.pubDate ? -1 : 1;
-          })
-          .slice(0, 5)
-          .map((post) => (
-            <a href={"/blog/" + post.slug} class="entry">
-              {post.data.image ? (
-                <Image
-                  widths={[700]}
-                  sizes={`700px`}
-                  src={post.data.image.url}
-                  alt={post.data.image.alt}
-                  style="max-height: 350px; width: 100%; object-fit: cover;"
-                />
-              ) : null}
-              <h3>
-                {post.data.title} <br />
-                <span class="entry--date">
-                  {new Date(post.data.pubDate).toLocaleDateString(
-                    "en-CA",
-                    dateOptions,
-                  )}
-                </span>
-              </h3>
-              <p>{post.data.description}</p>
-            </a>
-          ))
-      }
-    </div>
+    <BlogEntryList limit="5" />
     <a href="/blog" style="padding-bottom: 32px">read more...</a>
   </main>
 </Layout>