Merge pull request #8 from milan-codes/develop

Develop

Author: milan-codes

astro.config.mjs

@@ -1,28 +1,24 @@
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-import svelte from "@astrojs/svelte";
+import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
-import tailwind from "@astrojs/tailwind";
-
-// https://astro.build/config
-import partytown from "@astrojs/partytown";
-import { remarkReadingTime } from "./remark-reading-time.mjs";
+import partytown from '@astrojs/partytown';
+import { remarkReadingTime } from './remark-reading-time.mjs';
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [
-    svelte(),
     tailwind(),
     partytown({
       config: {
-        forward: ["dataLayer.push"],
+        forward: ['dataLayer.push'],
       },
     }),
   ],
   markdown: {
-    remarkPlugins: ["remark-math", remarkReadingTime],
-    rehypePlugins: ["rehype-katex"],
+    remarkPlugins: ['remark-math', remarkReadingTime],
+    rehypePlugins: ['rehype-katex'],
   },
 });

bun.lockb

@@ -12,12 +12,10 @@
   },
   "dependencies": {
     "@astrojs/partytown": "^1.2.3",
-    "@astrojs/svelte": "^2.0.1",
     "@astrojs/tailwind": "^3.0.1",
-    "astro": "^2.0.4",
+    "astro": "^3.0.10",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "svelte": "^3.54.0",
     "tailwindcss": "^3.0.24"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,33 @@
+---
+import { formattedPublishDate } from '../utils';
+
+const { frontmatter } = Astro.props;
+---
+
+<div>
+  <h1 class="text-sm text-gray-400 dark:text-gray-600 mt-8">
+    {formattedPublishDate(frontmatter.pubDate)}
+  </h1>
+  <h1 class="text-xl text-gray-900 dark:text-gray-100 tracking-wider">{frontmatter.title}</h1>
+  <h1 class="text-gray-600 dark:text-gray-400">{frontmatter.description}</h1>
+  <h1 class="mt-1 text-sm text-gray-400 dark:text-gray-600">{frontmatter.minutesRead}</h1>
+  <div class="prose dark:prose-invert text-gray-600 dark:text-gray-400 my-8">
+    <slot />
+  </div>
+  <ul class="flex flex-wrap my-8">
+    {
+      frontmatter.tags.map((tag: any) => (
+        <li class="text-sm text-gray-400 dark:text-gray-600 mr-3 hover:underline">
+          <a href={`/tags/${tag}`}>{`#${tag}`}</a>
+        </li>
+      ))
+    }
+  </ul>
+  <hr />
+  <div class="prose dark:prose-invert text-gray-600 dark:text-gray-400 my-8">
+    If you have any questions or comments, or you would like to point out any errors in any of the
+    blog posts, please reach out to me at <a href="mailto:milanherke@protonmail.com"
+      >milanherke@protonmail.com</a
+    >.
+  </div>
+</div>

src/components/About.svelte src/components/About.astrosrc/components/About.svelte renamed to src/components/About.astro

@@ -0,0 +1,41 @@
+---
+import { formattedPublishDate } from '../utils';
+
+const { post, containerStyleOverride } = Astro.props;
+---
+
+<div class={containerStyleOverride ?? 'my-8'}>
+  <p class="text-gray-400 dark:text-gray-600 text-sm">
+    {formattedPublishDate(post.frontmatter.pubDate)}
+  </p>
+  <a
+    class="inline-flex items-center rounded-lg text-gray-900 dark:text-gray-100 hover:underline"
+    href={post.url}
+  >
+    {post.frontmatter.title}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="ml-1 h-4 w-4"
+      ><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg
+    >
+  </a>
+  <p class="text-gray-600 dark:text-gray-400">{post.frontmatter.description}</p>
+  <ul class="flex flex-wrap">
+    <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.frontmatter.minutesRead}</li>
+    {
+      post.frontmatter.tags.map((tag: any) => (
+        <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm font-medium hover:underline">
+          <a href={`/tags/${tag}`}>{`#${tag}`}</a>
+        </li>
+      ))
+    }
+  </ul>
+</div>

src/components/BlogPost.astro

@@ -0,0 +1,30 @@
+---
+import BlogPostCard from './BlogPostCard.astro';
+
+const { post } = Astro.props;
+---
+
+<div class="my-8">
+  <div class="flex justify-between">
+    <h1 class="text-gray-900 dark:text-gray-100 tracking-wider">Latest blog post</h1>
+    <a
+      href="/blog"
+      class="inline-flex items-center text-gray-400 dark:text-gray-600 text-sm hover:underline"
+      >See all <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="ml-1 h-4 w-4"
+        ><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"
+        ></polyline></svg
+      ></a
+    >
+  </div>
+  <BlogPostCard post={post} containerStyleOverride="mt-2" />
+</div>