fernando/araozu.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change navbar of blog sections

Browse Source
This commit is contained in:
Araozu 2024-07-15 09:05:28 -05:00
parent 30acaf936d
commit 6a7d59301a
7 changed files with 85 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Sidebar.astro
View File

@ -12,6 +12,7 @@
love building things and learning new stuff. love building things and learning new stuff.
</p> </p>
<div class="text-center py-4"> <div class="text-center py-4">
<a class="inline-block py-2 px-4 rounded bg-blue-600 text-white" href="/blog/">Blog</a> <a class="inline-block py-2 px-4 rounded bg-blue-600 text-white" href="/blog/en/">Blog (en)</a>
<a class="inline-block py-2 px-4 rounded bg-indigo-600 text-white" href="/blog/es/">Blog (es)</a>
</div> </div>
</div> </div>

100
src/layouts/BlogLayout.astro
View File

@ -1,9 +1,9 @@
--- ---
const { frontmatter } = Astro.props; const { frontmatter, lang } = Astro.props;
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang={lang ?? "en"}>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@ -15,7 +15,7 @@ const { frontmatter } = Astro.props;
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link <link
@ -23,8 +23,8 @@ const { frontmatter } = Astro.props;
type="text/css" type="text/css"
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
/> />
<script src="//unpkg.com/alpinejs" defer></script> <script src="//unpkg.com/alpinejs" is:inline defer></script>
<style> <style>
html { html {
font-size: 18px; font-size: 18px;
@ -32,51 +32,57 @@ const { frontmatter } = Astro.props;
</style> </style>
</head> </head>
<body> <body>
<div id="blog" class="container mx-auto max-w-[1000px]"> <div class="grid grid-cols-[4rem_auto]">
<a <div class="h-screen">
class="font-etoile text-3xl text-center py-10 font-bold dark:bg-c-bg-2 text-c-on-bg my-4 rounded <nav
inline-block w-full hover:underline cursor-pointer" class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
href="/" style="transform-origin: 0% 0%;"
> >
Fernando Araoz: le ブログ <a class="font-semibold inline-block text-2xl hover:underline" href={"/blog/" + lang}>
</a> Fernando Araoz
</a>
<div class="py-6"> <a class="ml-6 inline-block hover:underline" href="/blog/en">Eng Blog</a>
{ <a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
frontmatter?.title && ( </nav>
<h1 class="font-etoile text-center text-4xl py-2">
{frontmatter.title}
</h1>
)
}
{
frontmatter?.pubDate && (
<p class="text-center text-sm">
Published: {frontmatter.pubDate}
</p>
)
}
{
frontmatter?.image && (
<figure>
<img
class="dark:opacity-70 rounded pt-8"
src={frontmatter.image.url}
alt={frontmatter.image.alt}
/>
<figcaption class="text-xs text-center pt-2 pb-8 opacity-75">
{frontmatter.image.caption}
</figcaption>
</figure>
)
}
</div> </div>
<div id="blog" class="container mx-auto max-w-[1000px]">
<div class="py-6">
{
frontmatter?.title && (
<h1 class="font-etoile text-center text-4xl py-2">
{frontmatter.title}
</h1>
)
}
{
frontmatter?.pubDate && (
<p class="text-center text-sm">
Published: {frontmatter.pubDate}
</p>
)
}
{
frontmatter?.image && (
<figure>
<img
class="dark:opacity-70 rounded pt-8"
src={frontmatter.image.url}
alt={frontmatter.image.alt}
/>
<figcaption class="text-xs text-center pt-2 pb-8 opacity-75">
{frontmatter.image.caption}
</figcaption>
</figure>
)
}
</div>
<div class="text-base"> <div class="text-base">
<slot /> <slot />
</div>
<div class="min-h-40"></div>
</div> </div>
<div class="min-h-40"></div>
</div> </div>
</body> </body>
</html> </html>

2
src/pages/blog/go-1.md → src/pages/blog/en/go-1.md
View File

@ -1,5 +1,5 @@
--- ---
layout: ../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayout.astro
title: Golang first impressions title: Golang first impressions
description: First thoughts after using a little bit of Golang description: First thoughts after using a little bit of Golang
pubDate: "2024-05-25" pubDate: "2024-05-25"

6
src/pages/blog/index.astro → src/pages/blog/en/index.astro
View File

@ -1,5 +1,5 @@
--- ---
import BlogLayout from "../../layouts/BlogLayout.astro"; import BlogLayout from "../../../layouts/BlogLayout.astro";
--- ---
<BlogLayout> <BlogLayout>
@ -13,12 +13,12 @@ import BlogLayout from "../../layouts/BlogLayout.astro";
<ul> <ul>
<li> <li>
<a class="underline" href="/blog/responsible-stack/"> <a class="underline" href="/blog/en/responsible-stack/">
The responsible stack The responsible stack
</a> </a>
</li> </li>
<li> <li>
<a class="underline" href="/blog/go-1/"> <a class="underline" href="/blog/en/go-1/">
Golang first impressions Golang first impressions
</a> </a>
</li> </li>

2
src/pages/blog/responsible-stack.md → src/pages/blog/en/responsible-stack.md
View File

@ -1,5 +1,5 @@
--- ---
layout: ../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayout.astro
title: The responsible tech stack title: The responsible tech stack
description: tech stack description: tech stack
pubDate: "2024-05-20" pubDate: "2024-05-20"

24
src/pages/blog/es/index.astro Normal file
View File

@ -0,0 +1,24 @@
---
import BlogLayout from "../../../layouts/BlogLayout.astro";
---
<BlogLayout lang="es">
<h1>Blog en Español</h1>
<p>Carita feliz :D</p>
<p>Posts:</p>
<ul>
<li>
<a class="underline" href="/blog/responsible-stack/">
The responsible stack
</a>
</li>
<li>
<a class="underline" href="/blog/go-1/">
Golang first impressions
</a>
</li>
</ul>
</BlogLayout>

1
tailwind.config.mjs
View File

@ -10,6 +10,7 @@ export default {
}, },
fontFamily: { fontFamily: {
"etoile": ["'Iosevka Etoile Web'", "serif"], "etoile": ["'Iosevka Etoile Web'", "serif"],
"display": ["'Outfit'", "sans-serif"],
} }
}, },
}, },