feat: styling microblogs

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>

1 files changed, 34 insertions, 8 deletions

diff --git a/src/pages/blog/micro/[page].astro b/src/pages/blog/micro/[page].astro
index 9fb04f1..72ccdcf 100644
--- a/src/pages/blog/micro/[page].astro
+++ b/src/pages/blog/micro/[page].astro
@@ -1,6 +1,7 @@
 ---
 import MicroBlog from "@components/templates/MicroBlog.astro";
 import Base from "@layouts/Base.astro";
+import PrevNext from "@layouts/PrevNext.astro";
 import { fromPosts, isMicro } from "@lib/collection/helpers";
 import { identity } from "@utils/anonymous";
 import type {
@@ -19,14 +20,39 @@ export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
 export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { page } = Astro.props;
+
+const { prev, next, first, last } = page.url;
 ---
 <Base title="Micro Blogue">
-  <h1>Page {page.currentPage}</h1>
-  <ul>
-    {page.data.map((micro) => <li><MicroBlog {...micro} /></li>)}
-  </ul>
-  {page.url.first ? <a href={page.url.first}>First</a> : null}
-  {page.url.prev ? <a href={page.url.prev}>Previous</a> : null}
-  {page.url.next ? <a href={page.url.next}>Next</a> : null}
-  {page.url.last ? <a href={page.url.last}>Last</a> : null}
+  <main
+    itemprop="mainContentOfPage"
+    itemscope
+    itemtype="https://schema.org/WebPageElement"
+  >
+    <section
+      id="posts"
+      itemprop="citation"
+      itemscope
+      itemtype="http://schema.org/Blog"
+    >
+      <h2 itemprop="name description">Página {page.currentPage}</h2>
+      <PrevNext previous={prev} {next} {first} {last}>
+        <ul>{page.data.map((micro) => <li><MicroBlog {micro} /></li>)}</ul>
+      </PrevNext>
+    </section>
+  </main>
 </Base>
+<style>
+  ul {
+    max-width: 40ch;
+    margin-inline: auto;
+    margin-block: calc(var(--size-7) * 1em);
+    padding-inline: 0;
+    list-style-type: none;
+    & > li {
+      width: 100%;
+      margin-block: calc(var(--size-0) * 1em);
+      margin-inline: auto;
+    }
+  }
+</style>