blog post list

src/components/PostList.astro

@@ -9,29 +9,24 @@ export type Props = {
 const { posts } = Astro.props
 ---
 
-<section>
-  <ul>
-    {
-      posts.map((post) => (
-        <li>
-          <a href={`/blog/${post.slug}`}>
-            <PostPreview {post} />
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</section>
+<ul>
+  {
+    posts.map((post) => (
+      <li>
+        <a href={`/blog/${post.slug}`}>
+          <PostPreview {post} />
+        </a>
+      </li>
+    ))
+  }
+</ul>
 
 <style>
-  section {
-    padding: 3rem;
-  }
-
   ul {
     max-width: 40rem;
     display: flex;
     flex-direction: column;
-    gap: 4rem;
+    gap: 6rem;
+    list-style: none;
   }
 </style>

src/components/PostPreview.astro

@@ -1,8 +1,8 @@
 ---
+import { Picture } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
-import Tags from './Tags.astro'
 import PostAttributes from './PostAttributes.astro'
-import { Image } from 'astro:assets'
+import Tags from './Tags.astro'
 
 export type Props = {
   post: CollectionEntry<'blog'>
@@ -12,7 +12,7 @@ const { post } = Astro.props
 ---
 
 <section class:list={{ without: !post.data.coverImage }}>
-  {post.data.coverImage && <Image src={post.data.coverImage} alt={'foo'} />}
+  {post.data.coverImage && <Picture src={post.data.coverImage} alt={'foo'} />}
   <PostAttributes {post} />
   <h2>
     {post.data.title}
@@ -20,57 +20,53 @@ const { post } = Astro.props
   <Tags tags={post.data.tags.map((tag) => ({ count: 1, name: tag, href: `/tag/${tag}` }))} />
 </section>
 
-<style>
+<style lang="scss">
   section {
     display: block;
-  }
-  section > :global(img) {
-    height: 12em;
+    transition: var(--animation);
+
+    // &.without {
+    //   border: 2px solid var(--clr-primary);
+    //   padding: 5%;
+    //   width: calc(100% + 10%);
+    //   transform: translateX(-5%);
+    // }
+
+    &:hover {
+      transform: scale(1.05);
+      & :global(img) {
+      }
+      // & > :global(div) {
+      //   opacity: 0;
+      // }
+    }
   }
 
   h2 {
-    margin-top: 0.25em;
+    margin-top: 0.25rem;
     position: relative;
     top: 0;
     transition: var(--animation);
-    background-color: var(--clr-light);
-  }
-  section :global(img) {
-    transition: var(--animation);
-    position: relative;
-    top: 0;
-  }
-  section:hover :global(img) {
-    top: 2.5rem;
+    font-size: 2rem;
   }
 
   section > :global(div) {
     opacity: 1;
     transition: var(--animation);
   }
-  section:hover > :global(div) {
-    opacity: 0;
-  }
-
-  section.without {
-    border: 2px solid var(--clr-primary);
-    padding: 5%;
-    width: calc(100% + 10%);
-    transform: translateX(-5%);
-  }
 
   img {
     width: calc(100% - 0.25em);
+    height: 12rem;
     object-fit: cover;
     object-position: center;
-    border: 0.125em solid var(--clr-primary);
+    border: 0.125rem solid var(--clr-primary);
     transition: var(--animation);
     transform: scale(1);
     margin: 0;
-  }
+    margin-bottom: 0.5rem;
 
-  img {
-    transform: scale(1.1);
-    margin: 1em 0;
+    top: 0;
+    position: relative;
   }
 </style>

src/content/blog/monitor-your-self-hosted-services-for-free.md

@@ -1,6 +1,9 @@
 ---
-title: "Monitor your self hosted services for free"
-date: "2022-07-07"
+title: 'Monitor your self hosted services for free'
+date: '2022-07-07'
+tags:
+  - self-host
+  - monitoring
 ---
 
 Monitoring services requires external resources, as monitoring your server(s) from the server itself does not make sense. Renting a whole server for monitoring is a bit of a resources (and money) waste.

src/pages/blog/index.astro

@@ -1,11 +1,11 @@
 ---
 import { getCollection } from 'astro:content'
 import PostList from '../../components/PostList.astro'
-import Root from '../../layouts/Root.astro'
+import PageWithTitle from '../../layouts/PageWithTitle.astro'
 
 const posts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
 ---
 
-<Root>
+<PageWithTitle title="Blog">
   <PostList posts={posts} />
-</Root>
+</PageWithTitle>

src/styles/global.css

@@ -72,14 +72,6 @@ a {
   text-decoration: none;
 }
 
-ul {
-  margin: 0;
-  padding: 0;
-  padding-left: 0px;
-  padding-left: 1em;
-  list-style: square;
-}
-
 svg {
   fill: currentColor;
   height: auto;