Change landing page

Jenkinsfile

@@ -1,25 +1,29 @@
 pipeline {
-    agent any
+agent {
-    environment {
+		docker {
-        PATH = "/var/lib/jenkins/.nvm/versions/node/v20.9.0/bin:/var/lib/jenkins/bin:${env.PATH}"
+			image 'node:22'
+		}
 	}
     stages {
-        stage('Install deps') {
+		stage('Install pnpm') {
+			steps {
+				sh 'npm i -g pnpm'
+			}
+		}
+		stage('Install dependencies') {
 			steps {
 				sh 'pnpm i'
 			}
 		}
-        stage('Build') {
+		stage('Buid') {
-            environment {
-                PATH = "${env.WORKSPACE}/node_modules/.bin:${env.PATH}"
-            }
 			steps {
 				sh 'pnpm build'
 			}
 		}
 		stage('Deploy') {
 			steps {
-                sh 'cp -r ./dist/* /var/www/araozu.dev/'
+				sh 'rm -rf /var/www/dev.araozu/*'
+				sh 'mv -f dist/* /var/www/dev.araozu/'
 			}
 		}
 	}

src/components/Card.astro

@@ -4,7 +4,7 @@ const { title } = Astro.props;
 
 <div
     x-data="{open: true}"
-    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent mb-2"
+    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-zinc-600 dark:border-zinc-900 mb-2"
 >
     <h2
         class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 font-etoile"

src/components/Navigation.astro

@@ -1,9 +1,10 @@
 <div class="h-screen">
     <nav
-        class="fixed top-0 left-0 bg-white text-black rotate-[-90deg] font-display
+        class="fixed top-0 left-0 rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] p-2"
-            w-[100vh] translate-y-[100vh] px-8 py-2 shadow shadow-zinc-500"
         style="transform-origin: 0% 0%;"
     >
+        <div class="shadow hover:shadow-md transition-shadow bg-c-bg-2 py-2 px-4 border border-zinc-600 dark:border-zinc-900 rounded-md">
+
         <a class="font-semibold inline-block text-2xl hover:underline" href="/">
             Fernando Araoz
         </a>
@@ -14,22 +15,6 @@
         >
         <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">
+        </div>
-            <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>

src/components/Sidebar.astro

@@ -1,18 +1,12 @@
 <div class="lg:px-1">
-    <h1 class="text-xl font-light py-4">
-        Hi 👋! I'm
-        <br />
-        <span class="font-bold text-3xl">Fernando Araoz</span>
-    </h1>
     <div class="text-center">
         <div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
     </div>
-    <p class="text-center">
+
-        I'm a (human) software engineer passionate about web technologies. I
+    <h1 class="text-xl font-light py-4">
-        love building things and learning new stuff.
+        <span class="font-display font-bold text-3xl">Fernando Araoz</span>
+    </h1>
+    <p class="font-display">
+        Human software engineer based in Peru
     </p>
-    <div class="text-center py-4">
-    <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>

src/components/index/EsBlogIndex.astro

@@ -0,0 +1,32 @@
+---
+import Card from "../Card.astro"
+
+const allPosts = await Astro.glob("../../pages/blog/en/*.md");
+---
+
+<Card title="en blog">
+    <div class="font-display">
+        <p>
+            Things I've thought about, about programming.
+        </p>
+
+    <ul class="py-4">
+        {
+            allPosts
+                .toSorted((x, y) =>
+                    x.frontmatter.pubDate > y.frontmatter.pubDate ? -1 : 1,
+                )
+                .map((post) => {
+                    return (
+                        <li class="py-1">
+                            {post.frontmatter.pubDate} -
+                            <a class="underline text-lg" href={post.url}>
+                                {post.frontmatter.title}
+                            </a>
+                        </li>
+                    );
+                })
+        }
+    </ul>
+    </div>
+</Card>

src/layouts/BlogLayout.astro

@@ -32,7 +32,7 @@ lang = lang ?? "en";
                 <div class="py-6">
                     {
                         frontmatter?.title && (
-                            <h1 class="font-etoile text-center text-4xl py-2">
+                            <h1 class="font-display font-bold text-center text-4xl py-2">
                                 {frontmatter.title}
                             </h1>
                         )
@@ -62,26 +62,15 @@ lang = lang ?? "en";
                     }
                 </div>
 
-                <div class="text-base">
+                <div
-                    <slot />
+                    class="text-base shadow-lg p-2 bg-c-bg-2 rounded-md border border-slate-600 dark:border-transparent mb-2"
-                </div>
-
-                <div class="pt-4 border-t border-c-on-bg">
-                    <h3>Comments/Comentarios</h3>
-                    <section id="isso-thread"
-
                 >
-                        <noscript>Javascript needs to be activated to view comments.</noscript>
+                    <slot />
-                    </section>
                 </div>
 
                 <div class="min-h-40"></div>
             </div>
         </NavigationLayout>
 
-        <script data-isso="https://comments.araozu.dev/"
-            data-isso-lang={lang}
-            src="https://comments.araozu.dev/js/embed.min.js"
-        ></script>
     </body>
 </html>

src/pages/index.astro

@@ -1,9 +1,7 @@
 ---
 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";
+import EsBlogIndex from "../components/index/EsBlogIndex.astro";
 ---
 
 <!doctype html>
@@ -33,9 +31,7 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
             >
                 <Sidebar />
                 <div>
-                    <Languages />
+                    <EsBlogIndex />
-                    <Learning />
-                    <Tools />
                 </div>
             </div>
         </NavigationLayout>