Minimal blog layout

2024-05-20 17:47:25 -05:00 · 2024-05-20 17:47:25 -05:00 · 783aeb2399
commit 783aeb2399
parent 2ce75eadcd
9 changed files with 71 additions and 11 deletions
--- a/public/IosevkaEtoile/Heavy.woff2
+++ b/public/IosevkaEtoile/Heavy.woff2
--- a/public/blog.css
+++ b/public/blog.css
--- a/public/global.css
+++ b/public/global.css
@ -17,6 +17,15 @@
 	src: url('/Iosevka/Bold.woff2') format('woff2');
 }

+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
+}
+
 :root {
    --c-bg: #101010;
    --c-on-bg: #dedede;
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@ -1,3 +1,8 @@
+---
+const { frontmatter } = Astro.props;
+---
+
+<!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
@ -5,7 +10,8 @@
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <link rel="stylesheet" href="/global.css" />
-        <title>Fernando Araoz - Blog</title>
+        <link rel="stylesheet" href="/blog.css" />
+        <title>Blog - Fernando Araoz</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
@ -19,7 +25,32 @@
        />
        <script src="//unpkg.com/alpinejs" defer></script>
    </head>
-    <body>
+    <body style="font-size: 20px;">
+        <div id="blog" class="container mx-auto max-w-[1000px]">
+            <div
+                class="font-etoile text-3xl text-center py-16 font-bold dark:bg-c-bg-2 text-c-on-bg my-4 rounded hover:underline hover:cursor-help"
+            >
+                Fernando Araoz: le ブログ
+            </div>
+
+            <div class="py-6">
+                {
+                    frontmatter?.title && (
+                        <h1 class="font-etoile text-center text-2xl py-2">
+                            {frontmatter.title}
+                        </h1>
+                    )
+                }
+                {
+                    frontmatter?.pubDate && (
+                        <p class="text-center text-sm">
+                            Published: {frontmatter.pubDate}
+                        </p>
+                    )
+                }
+            </div>
+
            <slot />
+        </div>
    </body>
 </html>
--- a/src/pages/blog/first.md
+++ b/src/pages/blog/first.md
@ -1,7 +0,0 @@
---
-layout: ../../layouts/BlogLayout.astro
---
-# First
-
-The first page
-
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@ -4,4 +4,18 @@ import BlogLayout from "../../layouts/BlogLayout.astro";

 <BlogLayout>
    <h1>Blog index, WIP</h1>
+
+    <p>Some day there will be a procedurally generated list of pages here!</p>
+
+    <p>Until then:</p>
+
+    <p>Posts:</p>
+
+    <ul>
+        <li>
+            <a class="underline" href="/blog/responsible-stack/">
+                The responsible stack
+            </a>
+        </li>
+    </ul>
 </BlogLayout>
--- a/src/pages/blog/responsible-stack.md
+++ b/src/pages/blog/responsible-stack.md
@ -0,0 +1,10 @@
+---
+layout: ../../layouts/BlogLayout.astro
+title: The responsible tech stack
+description: tech stack
+pubDate: 2024/05/20
+tags: ["tech stack"]
+---
+
+The first page
+
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -4,7 +4,7 @@ import Languages from "../components/index/Languages.astro";
 import Learning from "../components/index/Learning.astro";
 import Tools from "../components/index/Tools.astro";
 ---
-
+<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -8,6 +8,9 @@ export default {
 				'c-on-bg': 'var(--c-on-bg)',
 				'c-bg-2': 'var(--c-bg-2)',
 			},
+            fontFamily: {
+                "etoile": ["'Iosevka Etoile Web'", "serif"],
+            }
 		},
 	},
 	plugins: [