set up blog posts

src/components/Base.astro

···
   banner?: string;
   graph?: {
     description: string;
-    url: string;
     type?: "website" | "article";
   };
 }
···
           <meta name="description" content={graph.description} />
           <meta property="og:title" content={title} />
           <meta property="og:description" content={graph.description} />
-          <meta property="og:url" content={graph.url} />
+          <meta
+            property="og:url"
+            content={
+              "https://entomoviscera.online" + Astro.url.pathname.toString()
+            }
+          />
           <meta property="og:type" content={graph.type ?? "website"} />
           <meta property="og:image" content={banner} />
         </Fragment>

src/components/BlogPost.astro

···
+---
+const { url, title, time } = Astro.props;
+---
+
+<a href={url}>
+  <article>
+    <h3>{title}</h3>
+    <time class="barcodetext" datetime={time}>{time}</time>
+  </article>
+</a>
+
+<style>
+  a {
+    display: block;
+    border: 10px double;
+    text-decoration: none;
+  }
+
+  article {
+    padding: 13px 15px;
+  }
+
+  time {
+    font-weight: bold;
+    font-size: 2rem;
+  }
+</style>

src/content/blog/v01.md

···
+---
+title: Site update V0.1
+bio: Website update log.
+pub: 2025-10-31
+---
+
+Hello world. Currently there isn't much to see here but at least now there's blog posts. Learning how to use astro. It's the framework I'm currently using to make this site. So far it's not too bad actually.
+
+God have mercy for my code is utterly garbage but at least I have the audacity to make it public.

src/content/config.ts

···
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const blog = defineCollection({
+  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
+  schema: z.object({
+    title: z.string(),
+    bio: z.string(),
+    pub: z.date(),
+  }),
+});
+
+export const collections = { blog };

src/pages/blog/[slug].astro

···
+---
+import { getCollection, render } from "astro:content";
+import Base from "../../components/Base.astro";
+import "../../styles/main.css";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<Base
+  title={`LOG_${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()} | ${post.data.title}`}
+  graph={{
+    description: post.data.bio,
+    type: "article",
+  }}
+>
+  <article class="bwcontainer">
+    <header class="bwbox center">
+      <h1>{post.data.title}</h1>
+      <time
+        class="barcodetext"
+        datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
+      >
+        {
+          `${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`
+        }
+      </time>
+    </header>
+    <div class="bwbox">
+      <Content />
+    </div>
+  </article>
+</Base>
+
+<style>
+  h1 {
+    margin-bottom: 13px;
+  }
+
+  time {
+    font-weight: bold;
+    font-size: 2.5rem;
+  }
+
+  article {
+    max-width: 82ch;
+    margin: 0 auto;
+  }
+</style>

src/pages/home.astro

···
 ---
+import { getCollection } from "astro:content";
 import Base from "../components/Base.astro";
+import BlogPost from "../components/BlogPost.astro";
 import "../styles/main.css";
+
+const post = await getCollection("blog").then((x) =>
+  x.sort(
+    (a, b) =>
+      (b.data.pub as unknown as number) - (a.data.pub as unknown as number),
+  ),
+);
 ---
 
 <Base
   title="HOME"
   graph={{
     description: "WARNING: Bug inside.",
-    url: "https://entomoviscera.online/home",
   }}
 >
   <div class="bwcontainer wrapper">
     <header class="bwbox center flex">
-      <h1>ENTOMOVISCERA.ONLINE</h1>
+      <h1 class="barcodetext">ENTOMOVISCERA.ONLINE</h1>
       <a href="/">
         <img src="/img/icons/poweroff.png" alt="return to landing page" />
       </a>
···
       </div>
       <div id="blog" class="bwbox">
         <h2>Latest blog post</h2>
-        <p>Under construction. Come back later.</p>
+        <BlogPost
+          url={`/blog/${post[0].id}`}
+          title={post[0].data.title}
+          time={`${post[0].data.pub.getFullYear()}-${post[0].data.pub.getMonth() + 1}-${post[0].data.pub.getDate()}`}
+        />
       </div>
     </main>
   </div>

src/pages/index.astro

···
   title="ENTRANCE"
   graph={{
     description: "WARNING: Bug inside.",
-    url: "https://entomoviscera.online/",
   }}
 >
   <a href="/home" id="welcome">

src/styles/main.css

···
 
 h1 {
   font-size: clamp(1.5rem, 1.8vw, 2rem);
-  font-family: barcodetext;
+}
+
+h2,
+h3 {
+  margin-bottom: 13px;
 }
 
 h2 {
···
 .flex {
   display: flex;
   flex-wrap: wrap;
+}
+
+.barcodetext {
+  font-family: barcodetext;
 }
 
 @font-face {