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

Use a single navbar across all pages

Browse Source
This commit is contained in:
Araozu 2024-08-15 11:24:02 -05:00
parent acfd84f571
commit ef16d69514
13 changed files with 288 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/blog/es/tutorial/1x/001.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/img/blog/es/tutorial/1x/002.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/img/blog/es/tutorial/1x/003.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/img/blog/es/tutorial/1x/004.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/img/blog/es/tutorial/1x/004.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/img/blog/es/tutorial/1x/005.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

35
src/components/Navigation.astro Normal file
View File

@ -0,0 +1,35 @@
<div class="h-screen">
<nav
class="fixed top-0 left-0 bg-white text-black rotate-[-90deg] font-display
w-[100vh] translate-y-[100vh] px-8 py-2 shadow shadow-zinc-500"
style="transform-origin: 0% 0%;"
>
<a class="font-semibold inline-block text-2xl hover:underline" href="/">
Fernando Araoz
</a>
<a class="ml-6 inline-block hover:underline" href="/side-projects"
>Side projects</a
>
<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>
<svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 right-0">
<filter id='shadow' color-interpolation-filters="sRGB">
<feDropShadow dx="1" dy="1" stdDeviation="2"
flood-opacity="1"
flood-color="#71717a"
/>
</filter>
<g filter="url(#shadow)">
<path d="m 0 0 h 24 v 24 c 0 -12, -12 -24, -24 -24" fill="white" />
</g>
</svg>
<svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 left-0">
<g filter="url(#shadow)">
<path d="m 24 0 h -24 v 24 c 0 -12, 12 -24, 24 -24" fill="white" />
</g>
</svg>
</nav>
</div>

37
src/layouts/BlogLayout.astro
View File

@ -1,4 +1,6 @@
--- ---
import NavigationLayout from "./NavigationLayout.astro";
let { frontmatter, lang } = Astro.props; let { frontmatter, lang } = Astro.props;
lang = lang ?? "en"; lang = lang ?? "en";
--- ---
@ -25,39 +27,10 @@ lang = lang ?? "en";
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" is:inline defer></script> <script src="//unpkg.com/alpinejs" is:inline defer></script>
<style>
html {
font-size: 18px;
}
</style>
</head> </head>
<body> <body>
<div class="grid grid-cols-[4rem_auto]"> <NavigationLayout>
<div class="h-screen"> <div id="blog" class="container mx-auto max-w-[1000px]" style="font-size: 18px">
<nav
class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
style="transform-origin: 0% 0%;"
>
<a
class="font-semibold inline-block text-2xl hover:underline"
href="/"
>
Fernando Araoz
</a>
<a
class="ml-6 inline-block hover:underline"
href="/side-projects">Side projects</a
>
<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
>
</nav>
</div>
<div id="blog" class="container mx-auto max-w-[1000px]">
<div class="py-6"> <div class="py-6">
{ {
frontmatter?.title && ( frontmatter?.title && (
@ -97,6 +70,6 @@ lang = lang ?? "en";
<div class="min-h-40"></div> <div class="min-h-40"></div>
</div> </div>
</div> </NavigationLayout>
</body> </body>
</html> </html>

8
src/layouts/NavigationLayout.astro Normal file
View File

@ -0,0 +1,8 @@
---
import Navigation from "../components/Navigation.astro";
---
<div class="grid grid-cols-[4rem_auto]">
<Navigation />
<slot />
</div>

69
src/layouts/SideProject.astro
View File

@ -1,6 +1,7 @@
--- ---
import GithubIcon from "../components/Sideprojects/GithubIcon.astro"; import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro"; import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
import NavigationLayout from "./NavigationLayout.astro";
--- ---
<!doctype html> <!doctype html>
@ -25,73 +26,42 @@ import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
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" is:inline defer></script> <script src="//unpkg.com/alpinejs" is:inline defer></script>
<style>
html {
font-size: 18px;
}
</style>
</head> </head>
<body> <body>
<div class="grid grid-cols-[4rem_auto]"> <NavigationLayout>
<div class="h-screen">
<nav
class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
style="transform-origin: 0% 0%;"
>
<a
class="font-semibold inline-block text-2xl hover:underline"
href="/"
>
Fernando Araoz
</a>
<a
class="ml-6 inline-block underline"
href="/side-projects"
>
Side projects
</a>
<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>
</nav>
</div>
<div class="grid grid-cols-[30rem_auto] gap-2"> <div class="grid grid-cols-[30rem_auto] gap-2">
<div class="flex items-center"> <div class="flex items-center">
<div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"> <div
<h1 class="font-display font-semibold text-xl text-center"> class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
>
<h1
class="font-display font-semibold text-xl text-center"
>
Typed Hyperscript Processor (webpage) Typed Hyperscript Processor (webpage)
</h1> </h1>
<p class="pt-8"> <p class="pt-8">
Descripción del proyecto :D (carita feliz) Descripción del proyecto :D (carita feliz) en 240
en 240 palabras o menos palabras o menos
</p> </p>
<div class="pt-8"> <div class="pt-8">
<GithubIcon color="var(--c-on-bg)" /> <GithubIcon color="var(--c-on-bg)" />
<a href="" class="underline">Source code</a> <a href="" class="underline">Source code</a>
<br> <br />
<GlobeIcon color="var(--c-on-bg)" /> <GlobeIcon color="var(--c-on-bg)" />
<a href="" class="underline">https://webpage.araozu.dev/</a> <a href="" class="underline"
>https://webpage.araozu.dev/</a
>
</div> </div>
<div class="pt-8"> <div class="pt-8">logos</div>
logos
</div>
</div> </div>
</div> </div>
<div class="w-full h-screen flex items-center justify-center p-16"> <div
class="w-full h-screen flex items-center justify-center p-16"
>
<img <img
class="inline-block shadow-sm dark:shadow-black rounded" class="inline-block shadow-sm dark:shadow-black rounded"
src="/img/projects/thp/01.png" src="/img/projects/thp/01.png"
@ -99,7 +69,6 @@ import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
/> />
</div> </div>
</div> </div>
</div> </NavigationLayout>
</body> </body>
</html> </html>

179
src/pages/blog/es/programacion-07.md Normal file
View File

@ -0,0 +1,179 @@
---
layout: ../../../layouts/BlogLayout.astro
title: "07: Cero a Zig - Variables"
description: |
Introducción a las variables
pubDate: "2024-08-10"
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
image:
url: ""
alt: ""
caption: ""
---
Ahora veremos un concepto fundamental: Variables.
Todo el código lo escribiremos en el proyecto que creamos
en el artículo anterior.
## Motivación
Vamos a plantear un escenario: Queremos escribir un programa
que salude a una persona, le diga cuanto cuesta su orden,
y se despida.
Digamos que la persona se llama `Juan`. El código es así:
```zig
const std = @import("std");
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
std.debug.print("Adios {s}\n", .{"Juan"});
}
```
Y al ejecutarlo se muestra:
![Codigo](/img/blog/es/tutorial/1x/001.jpg)
Como el código es sencillo, no hay ningún problema.
¿Pero qué pasaría si tuvieramos que imprimir el nombre 10 veces?
Entonces tendríamos que repetirlo 10 veces.
```zig
const std = @import("std");
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
}
```
![Codigo](/img/blog/es/tutorial/1x/002.jpg)
Un poco tedioso, pero nada imposible.
Ahora vamos a cambiar el programa: el nombre de la
persona será `Maria`.
Lo que tenemos que hacer es cambiar `Juan` por
`Maria` en los 10 lugares, uno por uno.
Esto es bastante común, y existe una solución para
no cambiar 10 veces, sino solamente una.
## Variables
Una variable es como un almacén. Una variable
almacena un valor bajo un nombre.
Por ejemplo, podemos decir que `nombre = "Juan"`,
y a partir de ese momento cada vez que usemos
`nombre` se reemplazará por `Juan`.
Por ejemplo:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre});
}
```
En el código de arriba en la linea 4, hemos creado una
variable `nombre`, y le hemos dado como valor `"Juan"`.
Despues, en la linea 5 estamos utilizando la variable.
En vez de escribir `.{"Juan"}` escribimos `.{nombre}`.
Al ejecutar el programa se imprimirá `Hola Juan`
![Codigo](/img/blog/es/tutorial/1x/003.jpg)
Podemos utilizar la variable las veces que queramos.
Si imprimimos 10 veces se vería así:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
Y al ejecutar se imprime 10 veces.
![Codigo](/img/blog/es/tutorial/1x/004.jpg)
Ahora, si queremos cambiar `Juan` por `Maria`,
solo tenemos que hacerlo en un lugar:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Maria";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
![Codigo](/img/blog/es/tutorial/1x/005.jpg)
## Creando una variable
Para crear una variable se escribe:
- `const`
- El nombre de la variable
- `=`
- El valor de la variable
- `;`
El nombre de la variable solo puede tener letras,
números y guiones bajos. No puede tener espacios.
Puedes crear varias variables, cada una en una
línea. Por ejemplo:
```zig
const nombre = "Pedro";
const edad = "32";
const helado_favorito = "Vainilla";
```

24
src/pages/index.astro
View File

@ -3,8 +3,10 @@ import Sidebar from "../components/Sidebar.astro";
import Languages from "../components/index/Languages.astro"; import Languages from "../components/index/Languages.astro";
import Learning from "../components/index/Learning.astro"; import Learning from "../components/index/Learning.astro";
import Tools from "../components/index/Tools.astro"; import Tools from "../components/index/Tools.astro";
import NavigationLayout from "../layouts/NavigationLayout.astro";
--- ---
<!DOCTYPE html>
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -21,15 +23,17 @@ import Tools from "../components/index/Tools.astro";
<script src="//unpkg.com/alpinejs" defer></script> <script src="//unpkg.com/alpinejs" defer></script>
</head> </head>
<body> <body>
<div <NavigationLayout>
class="container mx-auto p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4" <div
> class="container mx-auto p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4"
<Sidebar /> >
<div> <Sidebar />
<Languages /> <div>
<Learning /> <Languages />
<Tools /> <Learning />
<Tools />
</div>
</div> </div>
</div> </NavigationLayout>
</body> </body>
</html> </html>

81
src/pages/side-projects/index.astro
View File

@ -1,6 +1,7 @@
--- ---
import GithubIcon from "../../components/Sideprojects/GithubIcon.astro"; import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro"; import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
import NavigationLayout from "../../layouts/NavigationLayout.astro";
--- ---
<!doctype html> <!doctype html>
@ -25,78 +26,52 @@ import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
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" is:inline defer></script> <script src="//unpkg.com/alpinejs" is:inline defer></script>
<style>
html {
font-size: 18px;
}
</style>
</head> </head>
<body> <body>
<div class="grid grid-cols-[4rem_auto]"> <NavigationLayout>
<div class="h-screen">
<nav
class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
style="transform-origin: 0% 0%;"
>
<a
class="font-semibold inline-block text-2xl hover:underline"
href="/"
>
Fernando Araoz
</a>
<a
class="ml-6 inline-block underline"
href="/side-projects"
>
Side projects
</a>
<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>
</nav>
</div>
<div class="grid grid-cols-[30rem_auto] gap-2"> <div class="grid grid-cols-[30rem_auto] gap-2">
<div class="flex items-center"> <div class="flex items-center">
<div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"> <div
<h1 class="font-display font-semibold text-xl text-center"> class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
>
<h1
class="font-display font-semibold text-xl text-center"
>
Typed Hyperscript Processor (webpage) Typed Hyperscript Processor (webpage)
</h1> </h1>
<p class="pt-8 text-sm"> <p class="pt-8 text-sm">
This is a static webpage that contains documentation This is a static webpage that contains documentation
for my other project, the THP compiler. for my other project, the THP compiler.
<br> <br />
<br> <br />
It is written with Astro and Markdown, highlights It is written with Astro and Markdown, highlights the
the syntax in the code snippets using said compiler, syntax in the code snippets using said compiler, and
and has some interactive code snippets. has some interactive code snippets.
</p> </p>
<div class="pt-8"> <div class="pt-8">
<GithubIcon color="var(--c-on-bg)" /> <GithubIcon color="var(--c-on-bg)" />
<a href="https://git.araozu.dev/fernando/araozu.dev" class="underline">Source code</a> <a
<br> href="https://git.araozu.dev/fernando/araozu.dev"
class="underline">Source code</a
>
<br />
<GlobeIcon color="var(--c-on-bg)" /> <GlobeIcon color="var(--c-on-bg)" />
<a href="https://thp.araozu.dev/" target="_blank" class="underline">https://thp.araozu.dev/</a> <a
href="https://thp.araozu.dev/"
target="_blank"
class="underline">https://thp.araozu.dev/</a
>
</div> </div>
<div class="pt-8"> <div class="pt-8">logos</div>
logos
</div>
</div> </div>
</div> </div>
<div class="w-full h-screen flex items-center justify-center p-16"> <div
class="w-full h-screen flex items-center justify-center p-16"
>
<img <img
class="inline-block shadow-sm dark:shadow-black rounded" class="inline-block shadow-sm dark:shadow-black rounded"
src="/img/projects/thp/01.png" src="/img/projects/thp/01.png"
@ -104,6 +79,6 @@ import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
/> />
</div> </div>
</div> </div>
</div> </NavigationLayout>
</body> </body>
</html> </html>