1 files changed, 114 insertions, 0 deletions
diff --git a/src/components/templates/MicroBlog.astro b/src/components/templates/MicroBlog.astro
new file mode 100644
index 0000000..b7019c5
--- /dev/null
+++ b/src/components/templates/MicroBlog.astro
@@ -0,0 +1,114 @@
+---
+import Date from "@components/organisms/Date.astro";
+import KeywordsList from "@components/organisms/KeywordsList.astro";
+import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
+import { Micro } from "@lib/collection/schemas";
+import type { CollectionEntry, z } from "astro:content";
+
+interface Props extends CollectionEntry<"blog"> {
+  data: z.infer<typeof Micro>;
+}
+
+const micro = Astro.props;
+const { id, data, rendered } = micro;
+const { title, lang, keywords } = data;
+const date = getLastUpdate(micro);
+const user = await getFirstUserID(micro);
+const display = user?.name ?? user?.email ?? user?.entity ?? "";
+const [first, ...names] = display.split(/\s/);
+const last = names.length > 0 ? names[names.length - 1] : "";
+const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
+---
+<article>
+  <header>
+    <h3 class="title">
+      <a href={`/blog/read/${id}`}>{title}</a>
+    </h3>
+    <span class="profile_picture">{
+      user?.website ? <a href={user.website}>{little}</a> : (
+        <span>{little}</span>
+      )
+    }</span>
+    <div>
+      {first} {last} <small>· <Date
+          {date}
+          locales={lang}
+          options={{ month: "short", day: "numeric" }}
+        /></small>
+    </div>
+  </header>
+  <div class="content">
+    <small {lang}>
+      <Fragment set:html={rendered?.html} />
+    </small>
+    <footer>
+      <div class="keywords small"><KeywordsList {keywords} /></div>
+    </footer>
+  </div>
+  <aside>
+    <small><a href="/blog/micro/1">Ver todos os microposts</a></small>
+  </aside>
+</article>
+
+<style is:inline>
+  .content > [lang] > *:first-child {
+    margin-block-start: 0;
+  }
+  .content > [lang] > *:last-child {
+    margin-block-end: 0;
+  }
+</style>
+<style>
+  article {
+    border-radius: calc(var(--size-1) * 1em);
+    box-shadow: 0 0 calc(var(--size-1) * 1em) var(--color-light);
+    padding: calc(var(--size-4) * 1em);
+    display: grid;
+    grid-template-rows: repeat(3, auto);
+    grid-template-columns: calc(var(--size-9) * 1em) auto;
+    gap: calc(var(--size-1) * 1em);
+
+    & > header {
+      display: contents;
+    }
+
+    & > aside {
+      grid-row: 3 / 4;
+      grid-column: 1 / 3;
+      border-block-start: 1px solid #e7e7e7;
+      padding-block-start: calc(var(--size-1) * 1em);
+    }
+  }
+
+  .profile_picture {
+    grid-row: 1 / 3;
+    grid-column: 1 / 2;
+
+    & > * {
+      display: inline-grid;
+      place-content: center;
+      width: calc(var(--size-9) * 1em);
+      height: calc(var(--size-9) * 1em);
+      aspect-ratio: 1 / 1;
+      background-color: var(--color-active);
+      color: #fff;
+      font-weight: 950;
+      font-size: smaller;
+      border-radius: calc(infinity * 1px);
+      text-align: center;
+      text-transform: uppercase;
+    }
+  }
+
+  .title {
+    display: none;
+  }
+  .content {
+    grid-row: 2/3;
+    grid-column: 2 / 3;
+  }
+
+  .keywords {
+    margin-block-end: 0;
+  }
+</style>