mejorar home

gracias data

frontend/src/lib/routes/Dump.svelte

@@ -8,7 +8,7 @@
   export let params: { dumpUrl: string };
   $: url = decodeURIComponent(params.dumpUrl);
 
-  $: metadataPromise = fetchDumpMetadata(url).catch(alert);
+  $: metadataPromise = fetchDumpMetadata(url);
 </script>
 
 <main class="mx-auto max-w-3xl">
@@ -28,6 +28,9 @@
             href={url}>{url}</a
           >
         </small>
+        <h1 class="mt-2 text-3xl font-bold">
+          Portales ({metadata.sites.length})
+        </h1>
       </header>
 
       <ul class="divide-y divide-gray-100 dark:divide-gray-700">

frontend/src/lib/routes/Home.svelte

@@ -1,37 +1,41 @@
 <script lang="ts">
-  import { inject } from "regexparam";
-  import { routes } from "../router";
   import Container from "../components/Container.svelte";
+  import Portal from "./Home/Portal.svelte";
 </script>
 
 <main class="prose mx-auto dark:prose-invert">
   <Container>
-    <div class="px-6 py-5">
-      <h1>Archivo de portales de datos abiertos</h1>
+    <div class="px-6 pt-5">
+      <h1>Archivo de portales de datos abiertos de Argentina</h1>
       <p>
-        Esta herramienta permite ver datos en archivos de portales de datos
-        abiertos, creada en el marco de
-        <a href="https://bit.ly/CartaDatosAbiertos">un pedido hecho</a> al gobierno
-        entrante el 10 de diciembre de 2023 por garantizar el mantenimiento de las
-        políticas de datos públicos en Argentina.
+        Explorá respaldos de los datos publicados en 43 portales de datos
+        abiertos.
+      </p>
+      <p>
+        Este proyecto surge en el marco de la solicitada "Por un gobierno de
+        datos abiertos" publicada el 5/12 por el grupo de usuaries de datos de
+        Argentina y firmada por una serie de organizaciones de la sociedad civil
+        y daterxs. <a href="https://bit.ly/CartaDatosAbiertos"
+          >Leer la solicitada</a
+        >
       </p>
 
-      <div class="not-prose flex place-content-center">
-        <a
-          href={inject(routes.Dump, {
-            dumpUrl: encodeURIComponent(
-              "https://archivos.nulo.ar/dump-2023-12-08/",
-            ),
-          })}
-          class="focus:shadow-outline flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-center text-xl font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2"
-        >
-          Acceder al archivo creado el 8 de diciembre de 2023
-        </a>
-      </div>
+      <h2 class="my-4">Respaldos</h2>
+    </div>
 
+    <div class="not-prose">
+      <ul
+        class="divide-y divide-gray-100 border-y border-y-gray-100 dark:divide-gray-700 dark:border-y-gray-700"
+      >
+        <Portal />
+      </ul>
+    </div>
+
+    <div class="px-6 py-5">
       <p>
-        Los archivos y las herramientas fueron creados por
-        <a href="https://nulo.ar">Nulo</a> con ayuda de varias personas. El
+        Las herramientas para descargar masivamente los archivos fueron
+        desarrolladas por
+        <a href="https://nulo.ar">Nulo</a> (y con ayuda de varias personas). El
         código está disponible
         <a
           href="https://github.com/catdevnull/transicion-desordenada-diablo/"

frontend/src/lib/routes/Home/Portal.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import ArrowForward from "eva-icons/outline/svg/arrow-forward-outline.svg?component";
+  import { inject } from "regexparam";
+  import { routes } from "../../router";
+</script>
+
+<li>
+  <a
+    class="shadow-glow flex justify-between px-6 py-5 shadow-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+    href={inject(routes.Dump, {
+      dumpUrl: encodeURIComponent("https://archivos.nulo.ar/dump-2023-12-08/"),
+    })}
+  >
+    <div>
+      <h3 class="text-lg">8 de diciembre de 2023</h3>
+      <!-- <span
+        class="relative ml-1 inline-flex items-center rounded-full border border-current px-2 py-1 text-xs font-semibold text-blue-800 dark:text-blue-400"
+      >
+        <span>portales</span>
+      </span>
+      <span
+        class="relative ml-1 inline-flex items-center rounded-full border border-current px-2 py-1 text-xs font-semibold text-blue-800 dark:text-blue-400"
+      >
+        <span>datasets</span>
+      </span> -->
+    </div>
+    <ArrowForward
+      fill="currentColor"
+      aria-hidden="true"
+      class="w-6 shrink-0 text-gray-600 dark:text-gray-400  "
+    />
+  </a>
+</li>

frontend/tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ["./index.html", "./src/**/*.svelte"],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        glow: "0 0px 35px rgb(0 0 0 / .2)",
+      },
+    },
   },
   plugins: [require("@tailwindcss/typography")],
 };