Merge pull request #23 from RustLangES/accesiblity

Accesiblity
RustLangES · Oct 14, 2024 · d646a9d · d646a9d
2 parents 3dfcebf + 266a264
commit d646a9d
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 67 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/layouts/section.astro b/src/layouts/section.astro
@@ -10,13 +10,16 @@ const {
   subtitle,
   description,
   image,
+  image_alt,
   className,
 }: {
   type?: SectionType;
+  imageAlign?: ImageAlign;
   title?: string;
   subtitle?: string;
   description?: string;
   image?: string;
+  image_alt?: string;
   height?: string;
   className?: string;
 } = Astro.props;
@@ -34,7 +37,7 @@ const {
     )
   }
   {
-  (type === "TitleOrange") && (
+    type === "TitleOrange" && (
       <div class="flex flex-col justify-center mt-3 items-center gap-2">
         {title && <h3 class="text-[30px]">{title.toUpperCase()}</h3>}
         {subtitle && (
@@ -44,7 +47,15 @@ const {
     )
   }
 
-  {image && <img src={image} class={imageAlign == "right" ? "max-w-[70vw] ml-[30vw]" : ""} />}
+  {
+    image && (
+      <img
+        src={image}
+        class={imageAlign == "right" ? "max-w-[70vw] ml-[30vw]" : ""}
+        alt={image_alt}
+      />
+    )
+  }
   <slot name="content" />
   {
     description && (

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,7 +10,7 @@ import Community from "../sections/Community.astro";
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <meta name="theme-color" content="#fed7aa" />

diff --git a/src/sections/Community.astro b/src/sections/Community.astro
@@ -25,20 +25,25 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
   }
 </style>
 
-<div class="flex flex-col justify-center mt-3 items-center gap-2 h-[100px] sec z-10">
+<div
+  class="flex flex-col justify-center mt-3 items-center gap-2 h-[100px] sec z-10"
+>
   <h3 class="text-[30px]">AQUÍ</h3>
   <h2 class="text-orange-600 text-[50px]">PODRAS</h2>
 </div>
 <Section type="TitleOrange" height="[70vh]">
-  <div slot="content" class="flex justify-center items-center w-full h-full mt-6">
+  <div
+    slot="content"
+    class="flex justify-center items-center w-full h-full mt-6"
+  >
     <img
       src={image1.src}
-      alt="Image 1"
+      alt="Captura del libro de rust en español"
       class="flex-grow z-10 p-[20px] mb-[40px] w-72 h-[200px] lg:w-80 md:w-96"
     />
     <img
       src={image2.src}
-      alt="Image 2"
+      alt="Captura del roadmap de la comunidad"
       class="flex-grow p-[20px] ml-[-50%] mt-[40px] z-10 w-72 h-[200px] lg:w-96"
     />
   </div>
@@ -64,6 +69,7 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
     class="flex flex-col justify-center items-center mx-6 h-[50vh]"
   >
     <iframe
+      title="Discord server"
       src="https://discord.com/widget?id=778674594856960012&theme=dark"
       width="350"
       height="500"
@@ -75,62 +81,63 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
 </Section>
 
 <Section title="Compartir" subtitle="Tus Proyectos">
-  <Fragment  slot="content">
-  <div
-    class="w-screen
+  <Fragment slot="content">
+    <div
+      class="w-screen
     min-h-[280px]
     h-[30vh]
     inline-flex
     flex-nowrap overflow-hidden
 [mask-image:_linear-gradient(to_right,transparent_0,_black_32px,_black_calc(100%-32px),transparent_100%)]"
-  >
-    <ul
-      class="flex
+    >
+      <ul
+        class="flex
     items-center
     justify-center
     animate-infinite-scroll
     p-5"
-      id="projects-container"
-    >
-      {
-        [...prebuiltData, ...prebuiltData].map((project: Project) => {
-          if (project.button_text.length > 0)
-            return (
-              <Clickable
-                className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
-                justify="normal"
-              >
-                {project.brand_as_letter ? (
-                  <p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
-                    {project.brand_src}
-                  </p>
-                ) : (
-                  <img
-                    alt="icon"
-                    src={`project-assets/${project.brand_src.substring(2)}`}
-                    class="h-14 w-14 rounded-full self-start"
-                  />
-                )}
-
-                <p class="font-bold  self-start">{project.name.join(" ")}</p>
-                <p class="text-black text-pretty">{project.description}</p>
-                <a
-                  href={project.button_link}
-                  target="_blank"
-                  class="self-start absolute bottom-0 mb-2"
+        id="projects-container"
+      >
+        {
+          [...prebuiltData, ...prebuiltData].map((project: Project) => {
+            if (project.button_text.length > 0)
+              return (
+                <Clickable
+                  className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
+                  justify="normal"
                 >
-                  <Clickable>{project.button_text}</Clickable>
-                </a>
-              </Clickable>
-            );
-        })
-      }
-    </ul>
-  </div>
+                  {project.brand_as_letter ? (
+                    <p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
+                      {project.brand_src}
+                    </p>
+                  ) : (
+                    <img
+                      alt="icon"
+                      src={`project-assets/${project.brand_src.substring(2)}`}
+                      class="h-14 w-14 rounded-full self-start"
+                    />
+                  )}
+
+                  <p class="font-bold  self-start">{project.name.join(" ")}</p>
+                  <p class="text-black text-pretty">{project.description}</p>
+                  <a
+                    href={project.button_link}
+                    target="_blank"
+                    class="self-start absolute bottom-0 mb-2"
+                  >
+                    <Clickable>{project.button_text}</Clickable>
+                  </a>
+                </Clickable>
+              );
+          })
+        }
+      </ul>
+    </div>
 
-  <a href="">
-    <Clickable className="text-1xl p-2"> Publica </Clickable>
-  </a>
+    <!-- TODO: set href -->
+    <a href="">
+      <Clickable className="text-1xl p-2"> Publica </Clickable>
+    </a>
   </Fragment>
 </Section>
 

diff --git a/src/sections/Footer.astro b/src/sections/Footer.astro
@@ -18,23 +18,23 @@ import telegram_svg from "@assets/Telegram.svg";
       <div class="flex justify-between
             items-center gap-10">
         <Clickable>
-          <img src={github_svg.src} class="w-5" />
+          <img src={github_svg.src} class="w-5" alt="Logo de github" />
           <p class="pl-5">Github</p>
         </Clickable>
 
         <Clickable>
-          <img class="w-5" src={discord_svg.src} />
+          <img class="w-5" src={discord_svg.src} alt="Logo de discord" />
           <p class="pl-5">Discord</p>
         </Clickable>
       </div>
 
       <div class="flex justify-between items-center gap-10">
         <Clickable>
-          <img class="w-5" src={linkeding_svg.src} />
+          <img class="w-5" src={linkeding_svg.src} alt="Logo de linkedin" />
           <p class="pl-5">Linkedin</p>
         </Clickable>
         <Clickable>
-          <img class="w-5" src={telegram_svg.src} />
+          <img class="w-5" src={telegram_svg.src} alt="Logo de telegram" />
           <p class="pl-5">Telegram</p>
         </Clickable>
       </div>

diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -5,7 +5,7 @@ import discord_svg from "@assets/discord.svg";
 
 <div class="flex flex-col items-center justify-center gap-2 p-3 min-h-screen">
   <div class="flex items-center justify-center">
-    <img src="./ferris.png" />
+    <img src="./ferris.png" alt="Mascota de Rust (ferris)" />
   </div>
 
   <h1 class="text-6xl">Rust Lang</h1>

diff --git a/src/sections/WhyRust.astro b/src/sections/WhyRust.astro
@@ -4,28 +4,34 @@ import Clickable from "@components/Clickable.astro";
 import Section from "@layouts/section.astro";
 ---
 
-<div class="flex flex-col justify-center mt-3 items-center gap-2 h-[100px] sec z-10">
+<div
+  class="flex flex-col justify-center mt-3 items-center gap-2 h-[100px] sec z-10"
+>
   <h3 class="text-[30px]">POR QUE</h3>
   <h2 class="text-orange-600 text-[50px]">RUST</h2>
 </div>
 <Section
   type="TitleOrange"
   image="rust.png"
   height="[65vh]"
+  image_alt="Logo de Rust"
 />
 <Section
   title="MUY RÁPIDO"
   image="rust_performance.svg"
+  image_alt="Gráfica comparativa"
   description="Al ser un lenguaje de sistemas, Rust tiene excelente rendimiento"
 />
 <Section
   title="Recursos"
   subtitle="Predecibles"
   image="predictability.png"
+  image_alt="Gráfica de rendimiento"
   description="Olvidate e métricas difíciles de predicir y presupuestar"
 />
 <Section
   image="secure.png"
+  image_alt="Compilador de Rust"
   imageAlign="right"
   title="Seguro"
   subtitle="Por Diseño"