From 69bfe8a797b64b9742322801f1c86477d969af20 Mon Sep 17 00:00:00 2001
From: Krem <kta035@uib.no>
Date: Thu, 16 Oct 2025 20:03:46 +0200
Subject: [PATCH] Add blog posts (WIP)

---
 src/components/Blog.astro    | 163 +++++++++++++++++++++++++++++++++++
 src/layouts/PostLayout.astro |  71 +++++++++++++++
 src/pages/posts/post-1.md    |  28 ++++++
 src/pages/posts/post-2.md    |  12 +++
 src/pages/posts/post-3.md    |  12 +++
 5 files changed, 286 insertions(+)
 create mode 100644 src/components/Blog.astro
 create mode 100644 src/layouts/PostLayout.astro
 create mode 100644 src/pages/posts/post-1.md
 create mode 100644 src/pages/posts/post-2.md
 create mode 100644 src/pages/posts/post-3.md

diff --git a/src/components/Blog.astro b/src/components/Blog.astro
new file mode 100644
index 0000000..f6dc5d4
--- /dev/null
+++ b/src/components/Blog.astro
@@ -0,0 +1,163 @@
+---
+// TODO: List some projects
+const projects = [
+  {
+    name: "My First Blog Post",
+    url: "/posts/post-1/",
+    color: "var(--ctp-lavender)",
+  },
+    {
+    name: "My Second Blog Post",
+    url: "/posts/post-2/",
+    color: "var(--ctp-lavender)",
+  },
+    {
+    name: "My Third Blog Post",
+    url: "/posts/post-3/",
+    color: "var(--ctp-lavender)",
+  },
+];
+---
+
+<section class="project">
+  <div class="content">
+    <h2 class="section-title">Blog</h2>
+    <div class="projects">
+      {
+        projects.map((project) => (
+          <a
+            href={project.url}
+            class="project-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={`--project-color: ${project.color}`}
+          >
+            <span class="project-icon">◈</span>
+            <span class="project-name">{project.name}</span>
+            <svg class="project-arrow" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M7 17L17 7M17 7H7M17 7V17"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</section>
+
+<style>
+  .project {
+    padding: 6rem 2rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .content {
+    max-width: 600px;
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin-bottom: 3rem;
+    text-align: center;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .project-link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem 2rem;
+    background-color: var(--ctp-surface0);
+    border: 2px solid var(--project-color);
+    border-radius: 12px;
+    text-decoration: none;
+    color: var(--ctp-text);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .project-link::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    background-color: var(--project-color);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 0;
+  }
+
+  .project-link:hover::before {
+    transform: scaleX(1);
+  }
+
+  .project-icon {
+    font-size: 1.5rem;
+    color: var(--project-color);
+    transition: all 0.3s ease;
+    z-index: 1;
+  }
+
+  .project-name {
+    flex: 1;
+    font-size: 1.25rem;
+    font-weight: 500;
+    z-index: 1;
+    transition: color 0.3s ease;
+  }
+
+  .project-arrow {
+    width: 24px;
+    height: 24px;
+    color: var(--project-color);
+    transition: all 0.3s ease;
+    z-index: 1;
+  }
+
+  .project-link:hover {
+    transform: translateX(8px);
+  }
+
+  .project-link:hover .project-icon,
+  .project-link:hover .project-arrow {
+    color: var(--ctp-base);
+  }
+
+  .project-link:hover .project-name {
+    color: var(--ctp-base);
+  }
+
+  @media (max-width: 600px) {
+    .project {
+      padding: 4rem 2rem;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .project-link {
+      padding: 1.25rem 1.5rem;
+    }
+
+    .project-name {
+      font-size: 1.1rem;
+    }
+  }
+</style>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
new file mode 100644
index 0000000..e2df42c
--- /dev/null
+++ b/src/layouts/PostLayout.astro
@@ -0,0 +1,71 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="darkreader-lock" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  /* TODO: Adjust the color scheme if you want
+     (recommendation: Catppuccin - https://catppuccin.com/palette/) */
+  :root {
+    /* Catppuccin Mocha */
+    --ctp-rosewater: #f5e0dc;
+    --ctp-flamingo: #f2cdcd;
+    --ctp-pink: #f5c2e7;
+    --ctp-mauve: #cba6f7;
+    --ctp-red: #f38ba8;
+    --ctp-maroon: #eba0ac;
+    --ctp-peach: #fab387;
+    --ctp-yellow: #f9e2af;
+    --ctp-green: #a6e3a1;
+    --ctp-teal: #94e2d5;
+    --ctp-sky: #89dceb;
+    --ctp-sapphire: #74c7ec;
+    --ctp-blue: #89b4fa;
+    --ctp-lavender: #b4befe;
+    --ctp-text: #cdd6f4;
+    --ctp-subtext1: #bac2de;
+    --ctp-subtext0: #a6adc8;
+    --ctp-overlay2: #9399b2;
+    --ctp-overlay1: #7f849c;
+    --ctp-overlay0: #6c7086;
+    --ctp-surface2: #585b70;
+    --ctp-surface1: #45475a;
+    --ctp-surface0: #313244;
+    --ctp-base: #1e1e2e;
+    --ctp-mantle: #181825;
+    --ctp-crust: #11111b;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--ctp-base);
+    color: var(--ctp-text);
+    font-family:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+      Cantarell, sans-serif;
+    line-height: 1.6;
+  }
+</style>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
new file mode 100644
index 0000000..7984dae
--- /dev/null
+++ b/src/pages/posts/post-1.md
@@ -0,0 +1,28 @@
+---
+layout: ../../layouts/PostLayout.astro
+title: 'My First Blog Post'
+pubDate: 2022-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["astro", "blogging", "learning in public"]
+---
+# My First Blog Post
+
+Published on: 2022-07-01
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
\ No newline at end of file
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
new file mode 100644
index 0000000..d2d21ed
--- /dev/null
+++ b/src/pages/posts/post-2.md
@@ -0,0 +1,12 @@
+---
+layout: ../../layouts/PostLayout.astro
+title: My Second Blog Post
+author: Astro Learner
+description: "After learning some Astro, I couldn't stop!"
+image:
+    url: "https://docs.astro.build/assets/arc.webp"
+    alt: "The Astro logo on a dark background with a purple gradient arc."
+pubDate: 2022-07-08
+tags: ["astro", "blogging", "learning in public", "successes"]
+---
+After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
\ No newline at end of file
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
new file mode 100644
index 0000000..a6fe8c1
--- /dev/null
+++ b/src/pages/posts/post-3.md
@@ -0,0 +1,12 @@
+---
+layout: ../../layouts/PostLayout.astro
+title: My Third Blog Post
+author: Astro Learner
+description: "I had some challenges, but asking in the community really helped!"
+image:
+    url: "https://docs.astro.build/assets/rays.webp"
+    alt: "The Astro logo on a dark background with rainbow rays."
+pubDate: 2022-07-15
+tags: ["astro", "learning in public", "setbacks", "community"]
+---
+It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!
\ No newline at end of file