Merge pull request #14 from DemocraciaEnRed/main

Bump SEO and GTAG things

src/app/abc/page.tsx

@@ -1,10 +1,23 @@
 import { subtopics, iframes, resources } from './_data'
-import VideosSLider from "../components/VideosSLider"
+// import VideosSLider from "../components/VideosSLider"
 // import Resource from "./components/Resource"
 import amparoIcon from '../../../public/shared/amparo.png'
 import SubtopicsMap from "./components/SubtopicsMap"
 import Image from 'next/image'
 import Link from 'next/link'
+import { Metadata } from 'next'
+
+const metaTitle = 'ABC | Datos en Fuga'
+// const metaDescription = 'Conoce más sobre los casos y consecuencias de los #DatosEnFuga'
+
+export const metadata: Metadata = {
+  title: metaTitle,
+//   description: metaDescription,
+  openGraph: {
+    title: metaTitle,
+    // description: metaDescription
+  }
+}
 
 const page = () => {
     return (

src/app/about/page.tsx

@@ -1,7 +1,20 @@
+import { Metadata } from "next"
 import VideosSLider from "../components/VideosSLider"
 import ActionsList from "./components/ActionsList"
 import Quienes from "./components/Quienes"
 
+const metaTitle = '¿Qué queremos? | Datos en Fuga'
+const metaDescription = 'Queremos que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados. Queremos que el Estado deje de perseguir penalmente a quienes identifican, denuncian y reportan vulnerabilidades informáticas.'
+
+export const metadata: Metadata = {
+  title: metaTitle,
+  description: metaDescription,
+  openGraph: {
+    title: metaTitle,
+    description: metaDescription
+  }
+}
+
 const About = () => {
     const iframes = [
         {

src/app/amparo/page.tsx

@@ -5,9 +5,16 @@ import amparoIcon from '../../../public/shared/amparo.png'
 // import SiteMapFooter from '../components/SiteMapFooter'
 import { Metadata } from 'next'
 
+const metaTitle = 'Amparo | Datos en Fuga';
+const metaDescription = 'Presentamos un amparo contra el Estado para proteger nuestros datos personales en un año de elecciones.';
+
 export const metadata: Metadata = {
-  title: 'Amparo | Datos en Fuga',
-  description: 'Presentamos un amparo contra el Estado para proteger nuestros datos personales en un año de elecciones.',
+  title: metaTitle,
+  description: metaDescription,
+  openGraph: {
+    title: metaTitle,
+    description: metaDescription
+  }
 }
 
 const Amparo = () => {
@@ -125,7 +132,7 @@ const Amparo = () => {
             width={96}
           />
           <p className='text-2xl font-nippo'>
-          Presentamos un amparo colectivo contra el Estado solicitando el pronunciamiento de inconstitucionalidad de la DA 431/2020 y de determinados artículos de Ley de Datos Personales, y solicitando se dicte una medida cautelar que ordena la suspensión de lo que disponen para evitar la transferencia y el mal uso de nuestros datos personales.
+            Presentamos un amparo colectivo contra el Estado solicitando el pronunciamiento de inconstitucionalidad de la DA 431/2020 y de determinados artículos de Ley de Datos Personales, y solicitando se dicte una medida cautelar que ordena la suspensión de lo que disponen para evitar la transferencia y el mal uso de nuestros datos personales.
           </p>
           <div className='flex justify-center items-center gap-5 flex-wrap'>
             <a href="https://drive.google.com/file/d/1E98MIeIvUPRuz2jz_EODQy4TKd3Xahnw/view" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">

src/app/casos/[id]/page.tsx

@@ -18,9 +18,15 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   const id = params.id
   const caso = getCaso(id)
+  const metaTitle = `Caso ${caso?.name} | Datos en Fuga`;
+  const metaDescription = caso?.description
   return {
-    title: `Caso ${caso?.name} | Datos en Fuga`,
-    description: caso?.description
+    title: metaTitle,
+    description: metaDescription,
+    openGraph: {
+      title: metaTitle,
+      description: metaDescription
+    }
   }
 }
 
@@ -34,7 +40,7 @@ const ID = ({ params }: { params: { id: string } }) => {
 
   return (
     <main>
-      <CasesHeader/>
+      <CasesHeader />
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
         <h2 className='font-nippo text-2xl sm:text-4xl bg-[#CC4356] py-4 pl-8 sm:pl-[65px] md:pl-[130px] pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
         <p className='font-nippo text-der-black text-xl pl-8 sm:pl-[65px] md:pl-[130px] my-4 font-medium'>

src/app/casos/page.tsx

@@ -6,21 +6,28 @@ import CasesHeader from './components/CasesHeader'
 import CasesDescription from './components/CasesDescriptions'
 
 
+const metaTitle = 'Casos | Datos en Fuga'
+const metaDescription = 'Conoce más sobre los casos y consecuencias de los #DatosEnFuga'
+
 export const metadata: Metadata = {
-  title: 'Casos | Datos en Fuga',
-  description: 'Conoce más sobre los casos y consecuencias de los #DatosEnFuga',
+  title: metaTitle,
+  description: metaDescription,
+  openGraph: {
+    title: metaTitle,
+    description: metaDescription
+  }
 }
 
 const Casos = () => {
   return (
     <main>
-      <CasesHeader/>
+      <CasesHeader />
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
         <h2 className='font-nippo text-2xl sm:text-4xl bg-[#CC4356] py-4 pl-8 sm:pl-[65px] md:pl-[130px] pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
         <p className='font-nippo text-der-black text-xl pl-8 sm:pl-[65px] md:pl-[130px] my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>
-        <CaseSelector cases={cases} id={cases[0].id}/>
+        <CaseSelector cases={cases} id={cases[0].id} />
         <CasesDescription caso={cases[0]} />
       </section>
       <HowToReport />

src/app/components/GoogleAnalytics.tsx

@@ -0,0 +1,18 @@
+import Script from 'next/script';
+
+const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
+const GoogleAnalytics = () => {
+    if (!GA_TRACKING_ID) {
+        return null; // Don't render if tracking ID is not available
+    }
+
+    return (
+        <Script
+            strategy="afterInteractive" // Load the script after interactive content is available
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+        />
+    );
+};
+
+export default GoogleAnalytics;

src/app/layout.tsx

@@ -6,7 +6,8 @@ import NavBar from './components/NavBar'
 
 import { storyblokInit, apiPlugin } from "@storyblok/react";
 import ScrollTopButton from './components/ScrollTopButton'
-import Footer from './components/Footer'
+// import Footer from './components/Footer'
+import GoogleAnalytics from './components/GoogleAnalytics'
 
 storyblokInit({
   accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
@@ -67,9 +68,17 @@ const nippo = localFont({
   display: 'swap'
 })
 
+const metaTitle = 'Datos en Fuga | ¿Tu información está segura?'
+const metaDescription = 'Queremos que el Estado asegure estándares de ciberseguridad y que  deje de perseguir hackers que realizan denuncias.'
+
 export const metadata: Metadata = {
-  title: 'Datos en Fuga | ¿Tu información está segura?',
-  description: 'Queremos que el Estado asegure estándares de ciberseguridad y que  deje de perseguir hackers que realizan denuncias.',
+  title: metaTitle,
+  description: metaDescription,
+  colorScheme: 'dark',
+  openGraph:{
+    title: metaTitle,
+    description: metaDescription
+  }
 }
 
 export default function RootLayout({
@@ -80,6 +89,7 @@ export default function RootLayout({
 
   return (
     <html lang="es">
+      <GoogleAnalytics />
       <body className={`${nippo.variable} ${raleway.variable} ${roboto.variable} ${lexendDeca.variable} ${inter.variable} ${openSans.className} flex flex-col min-h-[100vh] text-white`}>
         <NavBar />
         {children}

src/app/novedades/page.tsx

@@ -2,10 +2,17 @@ import { ISbStoriesParams, getStoryblokApi } from "@storyblok/react/rsc";
 import EventsMasonry from "./components/EventsMasonry";
 import { Metadata } from "next";
 
+const metaTitle = 'Novedades'
+const metaDescription = 'Novedades'
+
 export const metadata: Metadata = {
-    title: 'Novedades',
-    description: 'Novedades',
-    keywords: 'debate, presentaciones, seguridad informática, ciberseguridad, justicia'
+  title: metaTitle,
+  description: metaDescription,
+  keywords: 'debate, presentaciones, seguridad informática, ciberseguridad, justicia',
+  openGraph: {
+    title: metaTitle,
+    description: metaDescription
+  }
 }
 
 const Eventos = async () => {