feat: index page

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

1 files changed, 94 insertions, 10 deletions

diff --git a/src/pages/index.astro b/src/pages/index.astro
index eea5205..7e506bd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,28 +1,112 @@
 ---
+import MicroBlog from "@components/templates/MicroBlog.astro";
+import SimplePostList from "@components/templates/SimplePostList.astro";
 import Base from "@layouts/Base.astro";
-import { SITE_TITLE } from "src/consts";
+import {
+  fromPosts,
+  isMicro,
+  isOriginal,
+  sortLastUpdated,
+} from "@lib/collection/helpers";
+import { env } from "@lib/env";
+
+const { PUBLIC_SITE_TITLE } = env;
+
+const originals = await fromPosts(
+  isOriginal,
+  (originals) => originals.sort(sortLastUpdated).slice(0, 10),
+);
+const micro = await fromPosts(
+  isMicro,
+  (originals) => originals.sort(sortLastUpdated)?.[0],
+);
 ---
 
-<Base title={SITE_TITLE} showSearch={true} showNav={true}>
+<Base title={PUBLIC_SITE_TITLE}>
   <main>
     <article>
       <h2>Viva abril!</h2>
       <figure>
         <blockquote lang="es-VE" translate="no">
-          &laquo;Los que le cierran el camino a la revoluci&oacute;n
-          pac&iacute;fica le abren al mismo tiempo el camino a la
-          revoluci&oacute;n violenta&raquo;.
+          <i>«Los que le cierran el camino a la revolución pacífica le abren al
+            mismo tiempo el camino a la revolución violenta.»</i>
         </blockquote>
         <figcaption>
-          &mdash; Hugo Ch&aacute;vez.
+          &mdash; Hugo Chávez.
           <p>
-            Tradu&ccedil;&atilde;o: &ldquo;Aqueles que fecham o caminho para a
-            revolu&ccedil;&atilde;o pac&iacute;fica abrem, ao mesmo tempo, o
-            caminho para a revolu&ccedil;&atilde;o violenta.&rdquo;
+            <small>Tradução: &ldquo;Aqueles que fecham o caminho para a
+              revolução pacífica abrem, ao mesmo tempo, o caminho para a
+              revolução violenta&rdquo;.</small>
           </p>
         </figcaption>
       </figure>
-      <p><em>Portugal <em>fez</em> diferente!</em></p>
+      <p class="lead"><em>Portugal <em>fez</em> diferente!</em></p>
     </article>
+    {
+      (originals.length > 0 || micro) && (
+        <section id="posts">
+          <h2>Últimas aplicações atualizadas</h2>
+          {micro && <div id="last-micro"><MicroBlog {...micro} /></div>}
+          <div id="last-originals"><SimplePostList posts={originals} /></div>
+        </section>
+      )
+    }
   </main>
 </Base>
+
+<style>
+  figure:has(blockquote) {
+    border-inline-start: 2px solid var(--color-active);
+    padding-inline-start: calc(var(--size-7) * 1em);
+
+    & > blockquote {
+      margin-block-start: calc(var(--size-7) * 1em);
+      margin-inline-start: 0;
+      border-inline-start: 2px solid var(--color-light);
+      padding-inline-start: calc(var(--size-7) * 1em);
+    }
+  }
+
+  #posts {
+    position: relative;
+
+    & > h2 {
+      float: inline-start;
+    }
+  }
+
+  #last-micro {
+    clear: inline-start;
+    max-width: 40ch;
+    margin-inline: auto;
+  }
+
+  #last-originals {
+    clear: inline-start;
+  }
+
+  @media (width >= 30rem) {
+    #posts {
+      & > h2 {
+        float: inline-start;
+        max-width: calc(
+          100svw
+            - calc(
+            50svw
+              + calc(
+              calc(2 * calc(var(--size-4) * 1em)) + calc(var(--size-2) * 1em)
+            )
+          )
+        );
+      }
+    }
+
+    #last-micro {
+      clear: none;
+      float: inline-end;
+      width: 50svw;
+      margin-inline-start: calc(var(--size-2) * 1em);
+      margin-block-end: calc(var(--size-2) * 1em);
+    }
+  }
+</style>