Add pages for side projects

package.json

@@ -13,6 +13,7 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/mdx": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@types/node": "^22.3.0",
     "astro": "^4.11.5",
     "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3"

pnpm-lock.yaml

@@ -13,13 +13,16 @@ importers:
         version: 0.5.10(typescript@5.5.3)
       '@astrojs/mdx':
         specifier: ^3.1.2
-        version: 3.1.2(astro@4.11.5(typescript@5.5.3))
+        version: 3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))
       '@astrojs/tailwind':
         specifier: ^5.1.0
-        version: 5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)
+        version: 5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)
+      '@types/node':
+        specifier: ^22.3.0
+        version: 22.3.0
       astro:
         specifier: ^4.11.5
-        version: 4.11.5(typescript@5.5.3)
+        version: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       tailwindcss:
         specifier: ^3.4.5
         version: 3.4.5
@@ -639,6 +642,9 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
+  '@types/node@22.3.0':
+    resolution: {integrity: sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -1975,6 +1981,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@6.18.2:
+    resolution: {integrity: sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==}
+
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -2282,12 +2291,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.2(astro@4.11.5(typescript@5.5.3))':
+  '@astrojs/mdx@3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))':
     dependencies:
       '@astrojs/markdown-remark': 5.1.1
       '@mdx-js/mdx': 3.0.1
       acorn: 8.12.1
-      astro: 4.11.5(typescript@5.5.3)
+      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -2307,9 +2316,9 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/tailwind@5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)':
+  '@astrojs/tailwind@5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)':
     dependencies:
-      astro: 4.11.5(typescript@5.5.3)
+      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       autoprefixer: 10.4.19(postcss@8.4.39)
       postcss: 8.4.39
       postcss-load-config: 4.0.2(postcss@8.4.39)
@@ -2834,6 +2843,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
+  '@types/node@22.3.0':
+    dependencies:
+      undici-types: 6.18.2
+
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
@@ -2943,7 +2956,7 @@ snapshots:
 
   astring@1.8.6: {}
 
-  astro@4.11.5(typescript@5.5.3):
+  astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3):
     dependencies:
       '@astrojs/compiler': 2.8.2
       '@astrojs/internal-helpers': 0.4.1
@@ -3001,8 +3014,8 @@ snapshots:
       tsconfck: 3.1.1(typescript@5.5.3)
       unist-util-visit: 5.0.0
       vfile: 6.0.1
-      vite: 5.3.3
+      vite: 5.3.3(@types/node@22.3.0)
-      vitefu: 0.2.5(vite@5.3.3)
+      vitefu: 0.2.5(vite@5.3.3(@types/node@22.3.0))
       which-pm: 2.2.0
       yargs-parser: 21.1.1
       zod: 3.23.8
@@ -4656,6 +4669,8 @@ snapshots:
 
   typescript@5.5.3: {}
 
+  undici-types@6.18.2: {}
+
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.2
@@ -4736,17 +4751,18 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite@5.3.3:
+  vite@5.3.3(@types/node@22.3.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.39
       rollup: 4.18.1
     optionalDependencies:
+      '@types/node': 22.3.0
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.3.3):
+  vitefu@0.2.5(vite@5.3.3(@types/node@22.3.0)):
     optionalDependencies:
-      vite: 5.3.3
+      vite: 5.3.3(@types/node@22.3.0)
 
   volar-service-css@0.0.59(@volar/language-service@2.4.0-alpha.16):
     dependencies:

src/layouts/SideProject.astro

@@ -1,7 +1,15 @@
 ---
+import {readdirSync} from "node:fs";
 import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
 import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
 import NavigationLayout from "./NavigationLayout.astro";
+
+const { project_title, git_url, page_url, previous, next, images_folder } = Astro.props;
+
+const images_base = "/img/projects/";
+const images = readdirSync(`./public${images_base}${images_folder}/`)
+    .map((s) => `${images_base}${images_folder}/${s}`);
+const images_str = JSON.stringify(images);
 ---
 
 <!doctype html>
@@ -30,41 +38,86 @@ import NavigationLayout from "./NavigationLayout.astro";
     <body>
         <NavigationLayout>
             <div class="grid grid-cols-[30rem_auto] gap-2">
-                <div class="flex items-center">
+                <div class="flex items-center justify-center gap-4 flex-col">
                     <div
-                        class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
+                        class="bg-c-bg-2 rounded p-4 shadow shadow-zinc-500 dark:shadow-black w-full"
                     >
                         <h1
                             class="font-display font-semibold text-xl text-center"
                         >
-                            Typed Hyperscript Processor (webpage)
+                            {project_title}
                         </h1>
 
                         <p class="pt-8">
-                            Descripción del proyecto :D (carita feliz) en 240
+                            <slot />
-                            palabras o menos
                         </p>
 
                         <div class="pt-8">
                             <GithubIcon color="var(--c-on-bg)" />
-                            <a href="" class="underline">Source code</a>
+                            <a href={git_url} class="underline">Source code</a>
                             <br />
+                            {
+                                page_url && (
+                                    <>
                                         <GlobeIcon color="var(--c-on-bg)" />
-                            <a href="" class="underline"
+                                        <a href={page_url} class="underline">
-                                >https://webpage.araozu.dev/</a
+                                            Webpage
-                            >
+                                        </a>
+                                    </>
+                                )
+                            }
                         </div>
 
+                        <!--
                         <div class="pt-8">logos</div>
+                        -->
+                    </div>
+
+                    <div class="grid grid-cols-2 w-full gap-6">
+                        <a
+                            class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
+                                 dark:shadow-black transition-colors
+                                ${previous? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
+                            href={previous? `/side-projects/${previous}` : `#`}
+                        >
+                            &larr; <span class="underline">Previous project</span>
+                        </a>
+                        <a
+                            class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
+                                 dark:shadow-black transition-colors text-right
+                                ${next? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
+                            href={next? `/side-projects/${next}` : `#`}
+                        >
+                            <span class="underline">Next project</span> &rarr;
+                        </a>
                     </div>
                 </div>
 
                 <div
-                    class="w-full h-screen flex items-center justify-center p-16"
+                    class="relative w-full h-screen flex items-center justify-center p-16"
+                    x-data={`{img: ${images_str}, img_len: ${images.length}, idx: 0}`}
                 >
+                    <button 
+                        class="absolute left-12 top-[50%] bg-zinc-800 border border-zinc-950
+                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
+                            disabled:opacity-25"
+                        x-bind:disabled="idx === 0"
+                        x-on:click="idx -= 1"
+                    >
+                        &larr;
+                    </button>
+                    <button 
+                        class="absolute right-12 top-[50%] bg-zinc-800 border border-zinc-950 text-white
+                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
+                            disabled:opacity-25"
+                        x-bind:disabled="idx === img_len - 1"
+                        x-on:click="idx += 1"
+                    >
+                        &rarr;
+                    </button>
                     <img
                         class="inline-block shadow-sm dark:shadow-black rounded"
-                        src="/img/projects/thp/01.png"
+                        x-bind:src="img[idx]"
                         alt="Project image"
                     />
                 </div>

src/pages/side-projects/acecha.astro

@@ -0,0 +1,18 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="Acechanime"
+    previous="horarios-2"
+    next="pseudo"
+    images_folder="acecha"
+>
+    A now defunt video platform for anime I made for a
+    startup from Spain.
+    <br />
+    <br />
+    It featured shows indexing, comments, video playback,
+    search, scheduling, and a custom content management
+    system.
+</SideProject>

src/pages/side-projects/horarios-1.astro

@@ -0,0 +1,18 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="Horarios Unsa (v1)"
+    git_url="https://git.araozu.dev/fernando/horarios-v2"
+    page_url="https://horarios-v1.araozu.dev/"
+    previous="pseudo"
+    images_folder="horarios-v1"
+>
+    My first programming project ever (2017), completely
+    made in vanilla JavaScript.
+    <br />
+    <br />
+    It has (more or less) the same functionality as the
+    next rewrites, but it's a little more ugly.
+</SideProject>

src/pages/side-projects/horarios-2.astro

@@ -0,0 +1,20 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="Horarios Unsa (v2)"
+    git_url="https://git.araozu.dev/fernando/horarios-v2"
+    page_url="https://horarios-v2.araozu.dev/"
+    previous="kscript"
+    next="acecha"
+    images_folder="horarios-v2"
+>
+    A schedule creator for the courses at
+    National Saint Austing University (second rewrite).
+    <br />
+    <br />
+    Allows students to visually see which classes may
+    collide with each other, see professor names
+    and easily keep track of missing courses.
+</SideProject>

src/pages/side-projects/horarios.astro

@@ -0,0 +1,20 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="Horarios Unsa (v3)"
+    git_url="https://git.araozu.dev/fernando/horarios-v3"
+    page_url="https://horarios-v3.araozu.dev/#/sistemas/"
+    previous="thp"
+    next="rimajon"
+    images_folder="horarios-v3"
+>
+    A schedule creator for the courses at
+    National Saint Austing University (Third rewrite).
+    <br />
+    <br />
+    Allows students to visually see which classes may
+    collide with each other, see professor names
+    and easily keep track of missing courses.
+</SideProject>

src/pages/side-projects/index.astro

@@ -1,84 +1,24 @@
 ---
-import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
+import SideProject from "../../layouts/SideProject.astro";
-import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
-import NavigationLayout from "../../layouts/NavigationLayout.astro";
 ---
 
-<!doctype html>
+<SideProject
-<html lang="en">
+    project_title="Typed Hyperscript Processor (webpage)"
-    <head>
+    git_url="https://git.araozu.dev/fernando/thp-web"
-        <meta charset="utf-8" />
+    page_url="https://thp.araozu.dev"
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    next="thp"
-        <meta name="viewport" content="width=device-width" />
+    images_folder="thp"
-        <meta name="generator" content={Astro.generator} />
+>
-        <link rel="stylesheet" href="/global.css" />
-        <link rel="stylesheet" href="/blog.css" />
-        <title>Side projects - Fernando Araoz</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
-            rel="stylesheet"
-        />
-        <link
-            rel="stylesheet"
-            type="text/css"
-            href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
-        />
-        <script src="//unpkg.com/alpinejs" is:inline defer></script>
-    </head>
-    <body>
-        <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"
-                        >
-                            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.
+    for the THP programming language.
     <br />
     <br />
-                            It is written with Astro and Markdown, highlights the
+    THP is a strong, statically typed, functional first
-                            syntax in the code snippets using said compiler, and
+    language that compiles to PHP.
-                            has some interactive code snippets.
+    <br>
-                        </p>
+    <br>
-
+    The page is written with Astro, and connects to the
-                        <div class="pt-8">
+    compiler to provide syntax highlighting, error
-                            <GithubIcon color="var(--c-on-bg)" />
+    detection, reference resolving and automatic
-                            <a
+    documentation generation.
-                                href="https://git.araozu.dev/fernando/araozu.dev"
+</SideProject>
-                                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
-                            >
-                        </div>
-
-                        <div class="pt-8">logos</div>
-                    </div>
-                </div>
-
-                <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"
-                        alt="Project image"
-                    />
-                </div>
-            </div>
-        </NavigationLayout>
-    </body>
-</html>

src/pages/side-projects/kscript.astro

@@ -0,0 +1,18 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="KScript"
+    git_url="https://github.com/misti-lang/kscript"
+    page_url="https://jovial-jepsen-2619da.netlify.app/#/docs/v0.0.43/estructuras/condicionales/"
+    previous="rimajon"
+    next="horarios-2"
+    images_folder="kscript"
+>
+    A previous iteration of a new programming language.
+    <br />
+    <br />
+    This project featured a documentation page,
+    a TypeScript compiler, and a online playground.
+</SideProject>

src/pages/side-projects/pseudo.astro

@@ -0,0 +1,21 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="PseudoSubs"
+    git_url="#"
+    previous="acecha"
+    next="horarios-1"
+    images_folder="pseudo"
+>
+    An anime indexing site.
+    <br />
+    <br />
+    It contained information for many shows, comments,
+    responsive design. It served as a way for me to
+    learn about webdev and modern frameworks.
+    <br>
+    <br>
+    It went through many rewrites.
+</SideProject>

src/pages/side-projects/rimajon.astro

@@ -0,0 +1,22 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="Rimajon"
+    git_url="https://git.araozu.dev/fernando/rimajon-vue"
+    page_url="https://rimajon.araozu.dev/#/"
+    previous="horarios"
+    next="kscript"
+    images_folder="rimajon"
+>
+    A Mahjong-like game, with cards instead of Tiles.
+    <br />
+    <br />
+    It's multiplayer, for 4 persons, with the possibility
+    to add bots. Has its own set of rules and behaviors.
+    Everything is communicated through Web Sockets.
+    <br>
+    <br>
+    A Go+Solid rewrite is on the way.
+</SideProject>

src/pages/side-projects/thp.astro

@@ -0,0 +1,22 @@
+---
+import SideProject from "../../layouts/SideProject.astro";
+---
+
+<SideProject
+    project_title="THP compiler"
+    git_url="https://git.araozu.dev/fernando/thp"
+    previous="#"
+    next="horarios"
+    images_folder="thpc"
+>
+    The compiler for the THP Programming Language.
+    <br />
+    <br />
+    Written in Rust, features a hand written lexer,
+    top-down parser, type checker, IR generator
+    and code generator.
+    <br>
+    <br>
+    In the future it will also perform code formatting,
+    provide an LSP and package managing.
+</SideProject>