Fix images dimensions and favicon (#19)

* fix video url

* update deploy script for using rsync

* remove delete from script

* translate resources page

* fix images dimensions and favicon

deploy.sh

@@ -3,4 +3,4 @@
 source ./vars.txt
 
 pnpm run build
-scp -i ${SSH_KEY} -r ./dist/* ${USER}@${HOST}:${DIR}
+rsync -rtvzP -e "ssh -i ${SSH_KEY}" dist/ ${USER}@${HOST}:${DIR}

src/components/footer.tsx

@@ -4,13 +4,13 @@ import formatDate from "@/utils/format-date";
 
 const locales = {
   en: {
-    developed_by: "Developed by",
+    developed_by: "Developed by ",
-    build_handcrafted: "Built handcrafted with",
+    build_handcrafted: "Built handcrafted with ",
     last_build: "Last build",
   },
   es: {
-    developed_by: "Desarrollado por",
+    developed_by: "Desarrollado por ",
-    build_handcrafted: "Construido a mano con",
+    build_handcrafted: "Construido a mano con ",
     last_build: "Última build",
   },
 };
@@ -19,16 +19,21 @@ type Props = {
   lang: "en" | "es";
 };
 
-export default function Footer(props: Props) {
+export default function Footer({ lang }: Props) {
+  const rssUrl =
+    lang == "en"
+      ? "https://juancman.dev/feed.xml"
+      : "https://juancman.dev/es/feed.xml";
+
   return (
     <footer className="border-t border-secondary px-4 py-12 text-center text-sm md:px-16 prose prose-invert min-w-full">
       <section>
         <p>
-          {locales[props.lang].developed_by}{" "}
+          {locales[lang].developed_by}
           <strong className="font-bold text-primary">juancmandev</strong>
         </p>
         <p>
-          {locales[props.lang].build_handcrafted}{" "}
+          {locales[lang].build_handcrafted}
           <Button
             asChild
             size={null}
@@ -41,8 +46,7 @@ export default function Footer(props: Props) {
           </Button>
         </p>
         <p>
-          {locales[props.lang].last_build}: {formatDate(new Date(), props.lang)}
+          {locales[lang].last_build}: {formatDate(new Date(), lang)}.
-          .
         </p>
       </section>
       <section className="w-max mx-auto flex items-center gap-12">
@@ -63,14 +67,7 @@ export default function Footer(props: Props) {
           variant="link"
           className="flex flex-col justify-center"
         >
-          <a
+          <a target="_blank" href={rssUrl}>
-            target="_blank"
-            href={
-              props.lang == "en"
-                ? "https://juancman.dev/feed.xml"
-                : "https://juancman.dev/es/feed.xml"
-            }
-          >
             <RssIcon className="w-6" />
             RSS feed
           </a>

src/components/mdx/astro-image.astro

@@ -1,15 +1,15 @@
 ---
 import { Image } from "astro:assets";
 
-const { src, alt } = Astro.props;
+const props = Astro.props;
 ---
 
 <Image
   id="img"
-  src={src}
+  src={props.src}
-  alt={alt}
+  alt={props.alt}
-  width={1092}
+  width={props.width}
-  height={986}
+  height={props.height}
   class="w-auto h-auto rounded-md aspect-auto"
 />
 

src/content/pages/es/recursos.mdx

@@ -1,16 +1,15 @@
 ---
-title: Resources
+title: Recursos
-description:
+description: Aquí puedes encontrar los websites, canales de YouTube,
-  Here you can find websites, YouTube channels, courses and more stuff that I
+  cursos y más cosas que consumo o encuentro interesantes.
-  consume or find interesting.
 ---
 
 # Recursos
 
-Here you can find **websites**, **YouTube channels**, **courses** and **more**
+Aquí puedes encontrar los **websites**, **canales de YouTube**,
-stuff that I consume or find interesting.
+**cursos** y **más** cosas que consumo o encuentro interesantes.
 
-## Courses and Documentation
+## Cursos y Documentación
 
 - [fireship.io](https://fireship.io)
 
@@ -18,25 +17,23 @@ stuff that I consume or find interesting.
 
 ## Tech Stack
 
-- [Astro](https://astro.build/) - Tool for building websites, that's how I built
+- [Astro](https://astro.build/) - Herramienta para construir websites,
-  this one, really useful when you want a static website, but you can do Server
+  es así como construí este, muy útil cuando necesitas un static website,
-  Side Rendering too
+  pero puedes hacer Server Side Rendering también
 
-- [Next.js](https://nextjs.org) - Dynamic and flexible React meta-framework,
+- [Next.js](https://nextjs.org) - Meta-framework de React flexible y dinámico,
-  previously used on this Website
+  previamente usado en este website
 
-- [PocketBase](https://pocketbase.io/) - Fast and light database.
+- [PocketBase](https://pocketbase.io/) - Database SQLite rápida y ligera
 
-- [Supabase](https://supabase.com) - Open Source Backend as a Service
+- [Supabase](https://supabase.com) - Backend as a Service Open Source alternativa a Firebase,
-  alternative for Firebase, uses PostgreSQL and is really good if you're working
+  usa PostgreSQL y es muy bueno si trabajas solo o quieres un backend sólido sin invertir mucho
-  alone or you want a solid backend without investing to much
 
-- [TailwindCSS](https://tailwindcss.com) - Best way to write CSS
+- [TailwindCSS](https://tailwindcss.com) - La mejor forma de escribir CSS
 
-- [shadcn/ui](https://ui.shadcn.com) - Best components for React, sinergy with
+- [shadcn/ui](https://ui.shadcn.com) - Los mejores components para React, sinergia con TailwindCSS
-  TailwindCSS
 
-## YouTube channels
+## Canales de YouTube
 
 - [Mental Outlaw](https://www.youtube.com/channel/UC7YOGHUfC1Tb6E4pudI9STA)
 
@@ -44,18 +41,19 @@ stuff that I consume or find interesting.
 
 - [Luke Smith](https://www.youtube.com/channel/UC2eYFnH61tmytImy1mTYvhA)
 
-## Personal Websites
+## Websites Personales
 
 - [Eric Murphy](https://ericmurphy.xyz)
 
 - [Luke Smith](https://lukesmith.xyz/)
 
-## Favorite Blogs
+## Blogs Favoritos
 
 - [Why I Will Never Join Mastodon (or the rest of the Fediverse)](https://ericmurphy.xyz/blog/mastodon)
 
 - [Create More, Consume Less](https://www.bikobatanari.art/posts/2020/create-more) -
-  _Currently offline_
+  _Actualmente offline_
 
 - [My Website is a Personal Museum](https://www.bikobatanari.art/posts/2020/personal-museum) -
-  _Currently offline_
+  _Actualmente offline_
+  

src/content/pages/resources.mdx

@@ -25,7 +25,7 @@ stuff that I consume or find interesting.
 - [Next.js](https://nextjs.org) - Dynamic and flexible React meta-framework,
   previously used on this Website
 
-- [PocketBase](https://pocketbase.io/) - Fast and light database.
+- [PocketBase](https://pocketbase.io/) - Fast and light SQLite database
 
 - [Supabase](https://supabase.com) - Open Source Backend as a Service
   alternative for Firebase, uses PostgreSQL and is really good if you're working

src/layouts/Layout.astro

@@ -2,8 +2,8 @@
 import Header from "@/components/header.astro";
 import Navigation from "@/components/navigation";
 import Footer from "@/components/footer";
+import { getLangFromUrl } from "@/i18n/utils";
 import "@/styles/globals.css";
-import { getLangFromUrl } from "../i18n/utils";
 
 interface Props {
   title: string;
@@ -11,7 +11,6 @@ interface Props {
 }
 
 const lang = getLangFromUrl(Astro.url);
-
 const { title, description } = Astro.props;
 ---
 
@@ -20,25 +19,27 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" sizes="16x16" />
-    <link
+    {
-      rel="alternate icon"
+      lang === "en" && (
-      href="/favicon.ico"
-      type="image/png"
-      sizes="16x16"
-    />
         <link
           rel="alternate"
           title="juancmandev"
           type="application/rss+xml"
           href={new URL("feed.xml", Astro.site)}
         />
+      )
+    }
+    {
+      lang === "es" && (
         <link
           rel="alternate"
           title="juancmandev"
           type="application/rss+xml"
           href={new URL("feed.xml", `${Astro.site}/es/`)}
         />
+      )
+    }
     <link rel="sitemap" href="/sitemap-index.xml" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>