Rama de cambios y reestructuración del sitio web

.github/workflows/build-and-deploy.yaml

@@ -0,0 +1,34 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
+    - run: npm run build --if-present
+    - name: Installing surge
+      run: npm install --global surge
+    - name: Deploy to Surge
+      run: surge ./dist ${{vars.SURGE_PROD_URL}} --token ${{secrets.SURGE_TOKEN}}
+    - name: Deploy to prod
+      run: surge ./dist fundacionplantemos.org --token ${{secrets.SURGE_TOKEN}}

.gitignore

@@ -21,4 +21,6 @@ pnpm-debug.log*
 
 pnpm-lock.yaml
 
-.astro
+.astro
+
+package-lock.json

package.json

@@ -13,16 +13,17 @@
     "lint:eslint": "eslint . --ext .js,.ts,.astro"
   },
   "dependencies": {
+    "@astro-community/astro-embed-youtube": "^0.5.7",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.1.1",
-    "@astrolib/analytics": "^0.5.0",
+    "@astrolib/analytics": "^0.6.1",
     "@astrolib/seo": "^1.0.0-beta.5",
     "@fontsource-variable/inter": "^5.0.16",
     "astro": "^4.4.4",
     "astro-icon": "^1.1.0",
     "limax": "4.1.0",
     "lodash.merge": "^4.6.2",
-    "typescript-esbuild": "^0.3.9",
+    "typescript-esbuild": "^0.4.10",
     "unpic": "^3.17.0"
   },
   "devDependencies": {
@@ -34,18 +35,18 @@
     "@tailwindcss/typography": "^0.5.10",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "astro-compress": "2.2.10",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "astro-compress": "2.3.8",
     "eslint": "^8.57.0",
     "eslint-plugin-astro": "^0.31.4",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "js-yaml": "^4.1.0",
     "mdast-util-to-string": "^4.0.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
-    "sharp": "0.33.2",
+    "sharp": "0.34.4",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"

src/components/Logo.astro

@@ -2,6 +2,8 @@
 import { SITE } from '~/utils/config';
 ---
 
-<span class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
-  🚀 {SITE?.name}
+<span
+  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
+>
+  🌳 {SITE?.name}
 </span>

src/components/ui/ItemGrid2.astro

@@ -1,23 +1,18 @@
 ---
-import { Icon } from "astro-icon/components";
-import { twMerge } from "tailwind-merge";
-import type { ItemGrid } from "~/types";
-import Button from "./Button.astro";
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { ItemGrid } from '~/types';
+import Button from './Button.astro';
 
-const {
-  items = [],
-  columns,
-  defaultIcon = "",
-  classes = {},
-} = Astro.props as ItemGrid;
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
 
 const {
-  container: containerClass = "",
+  container: containerClass = '',
   // container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  panel: panelClass = "",
-  title: titleClass = "",
-  description: descriptionClass = "",
-  icon: defaultIconClass = "text-primary",
+  panel: panelClass = '',
+  title: titleClass = '',
+  description: descriptionClass = '',
+  icon: defaultIconClass = 'text-primary',
 } = classes;
 ---
 
@@ -27,68 +22,32 @@ const {
       class={twMerge(
         `grid gap-8 gap-x-12 sm:gap-y-8 ${
           columns === 4
-            ? "lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"
+            ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
             : columns === 3
-            ? "lg:grid-cols-3 sm:grid-cols-2"
-            : columns === 2
-            ? "sm:grid-cols-2 "
-            : ""
+              ? 'lg:grid-cols-3 sm:grid-cols-2'
+              : columns === 2
+                ? 'sm:grid-cols-2 '
+                : ''
         }`,
         containerClass
       )}
     >
-      {items.map(
-        ({
-          title,
-          description,
-          icon,
-          callToAction,
-          classes: itemClasses = {},
-        }) => (
-          <div
-            class={twMerge(
-              "relative flex flex-col",
-              panelClass,
-              itemClasses?.panel
-            )}
-          >
-            {(icon || defaultIcon) && (
-              <Icon
-                name={icon || defaultIcon}
-                class={twMerge(
-                  "mb-2 w-10 h-10",
-                  defaultIconClass,
-                  itemClasses?.icon
-                )}
-              />
-            )}
-            <div
-              class={twMerge(
-                "text-xl font-bold",
-                titleClass,
-                itemClasses?.title
-              )}
-            >
-              {title}
+      {items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
+        <div class={twMerge('relative flex flex-col', panelClass, itemClasses?.panel)}>
+          {(icon || defaultIcon) && (
+            <Icon name={icon || defaultIcon} class={twMerge('mb-2 w-10 h-10', defaultIconClass, itemClasses?.icon)} />
+          )}
+          <div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
+          {description && (
+            <p class={twMerge('text-muted mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
+          )}
+          {callToAction && (
+            <div class="mt-2">
+              <Button {...callToAction} />
             </div>
-            {description && (
-              <p
-                class={twMerge(
-                  "text-muted mt-2",
-                  descriptionClass,
-                  itemClasses?.description
-                )}
-                set:html={description}
-              />
-            )}
-            {callToAction && (
-              <div class="mt-2">
-                <Button {...callToAction} />
-              </div>
-            )}
-          </div>
-        )
-      )}
+          )}
+        </div>
+      ))}
     </div>
   )
 }

src/components/widgets/BlogLatestPosts.astro

@@ -1,13 +1,13 @@
 ---
-import { APP_BLOG } from "~/utils/config";
+import { APP_BLOG } from '~/utils/config';
 
-import Grid from "~/components/blog/Grid.astro";
+import Grid from '~/components/blog/Grid.astro';
 
-import { getBlogPermalink } from "~/utils/permalinks";
-import { findLatestPosts } from "~/utils/blog";
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
-import type { Widget } from "~/types";
-import Button from "../ui/Button.astro";
+import { getBlogPermalink } from '~/utils/permalinks';
+import { findLatestPosts } from '~/utils/blog';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import type { Widget } from '~/types';
+import Button from '../ui/Button.astro';
 
 export interface Props extends Widget {
   title?: string;
@@ -18,16 +18,16 @@ export interface Props extends Widget {
 }
 
 const {
-  title = await Astro.slots.render("title"),
-  linkText = "View all posts",
+  title = await Astro.slots.render('title'),
+  linkText = 'Ver todos los artículos',
   linkUrl = getBlogPermalink(),
-  information = await Astro.slots.render("information"),
+  information = await Astro.slots.render('information'),
   count = 4,
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
 const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
@@ -44,7 +44,10 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
               set:html={title}
             />
             {APP_BLOG.list.isEnabled && linkText && linkUrl && (
-              <Button variant="link" href={linkUrl}> {linkText} »</Button>
+              <Button variant="link" href={linkUrl}>
+                {' '}
+                {linkText} »
+              </Button>
             )}
           </div>
         )}