Use a single navbar across all pages
This commit is contained in:
parent
acfd84f571
commit
ef16d69514
BIN
public/img/blog/es/tutorial/1x/001.jpg
Normal file
BIN
public/img/blog/es/tutorial/1x/001.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/img/blog/es/tutorial/1x/002.jpg
Normal file
BIN
public/img/blog/es/tutorial/1x/002.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
public/img/blog/es/tutorial/1x/003.jpg
Normal file
BIN
public/img/blog/es/tutorial/1x/003.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/blog/es/tutorial/1x/004.jpg
Normal file
BIN
public/img/blog/es/tutorial/1x/004.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
public/img/blog/es/tutorial/1x/004.png
Normal file
BIN
public/img/blog/es/tutorial/1x/004.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/img/blog/es/tutorial/1x/005.jpg
Normal file
BIN
public/img/blog/es/tutorial/1x/005.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
35
src/components/Navigation.astro
Normal file
35
src/components/Navigation.astro
Normal 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>
|
||||
@ -1,4 +1,6 @@
|
||||
---
|
||||
import NavigationLayout from "./NavigationLayout.astro";
|
||||
|
||||
let { frontmatter, lang } = Astro.props;
|
||||
lang = lang ?? "en";
|
||||
---
|
||||
@ -25,39 +27,10 @@ lang = lang ?? "en";
|
||||
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
|
||||
/>
|
||||
<script src="//unpkg.com/alpinejs" is:inline defer></script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid grid-cols-[4rem_auto]">
|
||||
<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 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]">
|
||||
<NavigationLayout>
|
||||
<div id="blog" class="container mx-auto max-w-[1000px]" style="font-size: 18px">
|
||||
<div class="py-6">
|
||||
{
|
||||
frontmatter?.title && (
|
||||
@ -97,6 +70,6 @@ lang = lang ?? "en";
|
||||
|
||||
<div class="min-h-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
</NavigationLayout>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
8
src/layouts/NavigationLayout.astro
Normal file
8
src/layouts/NavigationLayout.astro
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
---
|
||||
|
||||
<div class="grid grid-cols-[4rem_auto]">
|
||||
<Navigation />
|
||||
<slot />
|
||||
</div>
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
|
||||
import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
|
||||
import NavigationLayout from "./NavigationLayout.astro";
|
||||
---
|
||||
|
||||
<!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"
|
||||
/>
|
||||
<script src="//unpkg.com/alpinejs" is:inline defer></script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid grid-cols-[4rem_auto]">
|
||||
<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>
|
||||
<NavigationLayout>
|
||||
<div class="grid grid-cols-[30rem_auto] gap-2">
|
||||
<div class="flex items-center">
|
||||
<div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow">
|
||||
<h1 class="font-display font-semibold text-xl text-center">
|
||||
<div
|
||||
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)
|
||||
</h1>
|
||||
|
||||
<p class="pt-8">
|
||||
Descripción del proyecto :D (carita feliz)
|
||||
en 240 palabras o menos
|
||||
Descripción del proyecto :D (carita feliz) en 240
|
||||
palabras o menos
|
||||
</p>
|
||||
|
||||
<div class="pt-8">
|
||||
<GithubIcon color="var(--c-on-bg)" />
|
||||
<a href="" class="underline">Source code</a>
|
||||
<br>
|
||||
<br />
|
||||
<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 class="pt-8">
|
||||
logos
|
||||
</div>
|
||||
<div class="pt-8">logos</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
|
||||
class="inline-block shadow-sm dark:shadow-black rounded"
|
||||
src="/img/projects/thp/01.png"
|
||||
@ -99,7 +69,6 @@ import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavigationLayout>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
179
src/pages/blog/es/programacion-07.md
Normal file
179
src/pages/blog/es/programacion-07.md
Normal 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:
|
||||
|
||||
|
||||
|
||||
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"});
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
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`
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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});
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 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";
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,8 +3,10 @@ import Sidebar from "../components/Sidebar.astro";
|
||||
import Languages from "../components/index/Languages.astro";
|
||||
import Learning from "../components/index/Learning.astro";
|
||||
import Tools from "../components/index/Tools.astro";
|
||||
import NavigationLayout from "../layouts/NavigationLayout.astro";
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -21,15 +23,17 @@ import Tools from "../components/index/Tools.astro";
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
class="container mx-auto p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4"
|
||||
>
|
||||
<Sidebar />
|
||||
<div>
|
||||
<Languages />
|
||||
<Learning />
|
||||
<Tools />
|
||||
<NavigationLayout>
|
||||
<div
|
||||
class="container mx-auto p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4"
|
||||
>
|
||||
<Sidebar />
|
||||
<div>
|
||||
<Languages />
|
||||
<Learning />
|
||||
<Tools />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavigationLayout>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
|
||||
import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
|
||||
import NavigationLayout from "../../layouts/NavigationLayout.astro";
|
||||
---
|
||||
|
||||
<!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"
|
||||
/>
|
||||
<script src="//unpkg.com/alpinejs" is:inline defer></script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid grid-cols-[4rem_auto]">
|
||||
<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>
|
||||
<NavigationLayout>
|
||||
<div class="grid grid-cols-[30rem_auto] gap-2">
|
||||
<div class="flex items-center">
|
||||
<div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow">
|
||||
<h1 class="font-display font-semibold text-xl text-center">
|
||||
<div
|
||||
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)
|
||||
</h1>
|
||||
|
||||
<p class="pt-8 text-sm">
|
||||
This is a static webpage that contains documentation
|
||||
for my other project, the THP compiler.
|
||||
<br>
|
||||
<br>
|
||||
It is written with Astro and Markdown, highlights
|
||||
the syntax in the code snippets using said compiler,
|
||||
and has some interactive code snippets.
|
||||
<br />
|
||||
<br />
|
||||
It is written with Astro and Markdown, highlights the
|
||||
syntax in the code snippets using said compiler, and
|
||||
has some interactive code snippets.
|
||||
</p>
|
||||
|
||||
<div class="pt-8">
|
||||
<GithubIcon color="var(--c-on-bg)" />
|
||||
<a href="https://git.araozu.dev/fernando/araozu.dev" class="underline">Source code</a>
|
||||
<br>
|
||||
<a
|
||||
href="https://git.araozu.dev/fernando/araozu.dev"
|
||||
class="underline">Source code</a
|
||||
>
|
||||
<br />
|
||||
<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 class="pt-8">
|
||||
logos
|
||||
</div>
|
||||
<div class="pt-8">logos</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
|
||||
class="inline-block shadow-sm dark:shadow-black rounded"
|
||||
src="/img/projects/thp/01.png"
|
||||
@ -104,6 +79,6 @@ import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavigationLayout>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user