feat: card is highlighted when the item was searched for by algolia (#122)

* feat: card is highlighted when the item was searched for by algolia

* fix: some visual fixes

Author: nsdonato

components/card/card.tsx

@@ -1,3 +1,7 @@
+'use client'
+
+import { useEffect } from 'react'
+
 import { PageItem } from '@/lib/db-types'
 import { getFormattedIdentifier } from '@/lib/utils'
 
@@ -13,6 +17,21 @@ type CardProps = {
 export const Card = ({ item }: CardProps) => {
   const { cover, imgPlaceholder, titleCard, infoExtra, links, videos } = item
 
+  useEffect(() => {
+    const highlightedCard =
+      window.location.hash === `#${getFormattedIdentifier(item.imgPlaceholder)}`
+
+    if (highlightedCard) {
+      const card = document.getElementById(
+        getFormattedIdentifier(item.imgPlaceholder)
+      )
+      card?.classList.add('ring-accent')
+      setTimeout(() => {
+        card?.classList.remove('ring-accent')
+      }, 2000)
+    }
+  }, [item.imgPlaceholder])
+
   return (
     <div
       className='card p-4 ring-1 bg-base-100 shadow-lg h-auto hover:scale-105 transition-transform'

db/ciberseguridad/streamers.ts

@@ -22,7 +22,7 @@ export const streamers: DocPage = {
       cover: {
         src: '/streamers/hack4u.jpg',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },
@@ -37,7 +37,7 @@ export const streamers: DocPage = {
       cover: {
         src: '/streamers/securiters.png',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },

db/extensions/vscode.ts

@@ -346,7 +346,7 @@ const vscode: DocPage = {
       titleCard: '',
       cover: {
         src: '/extensions/vscode/colorize.no-invert.svg',
-        height: 50,
+        height: 90,
         width: 150,
       },
       links: [
@@ -411,8 +411,8 @@ const vscode: DocPage = {
       titleCard: '',
       cover: {
         src: '/extensions/vscode/es7-react-js-icon.png',
-        height: 70,
-        width: 70,
+        height: 80,
+        width: 120,
       },
       links: [
         {

db/frontend/deploys.ts

@@ -3,9 +3,9 @@ import { DocPage, LinkType } from '@/lib/db-types'
 const deploys: DocPage = {
   title: 'Deploys en frontend',
   description: [
-    '¿Como hacemos que otra persona pueda ver nuestra web por internet? <br />',
-    '¿Que herramientas nos permiten publicarla, configurarla, entre otras necesidades? <br />',
-    'Tu elección va a depender de las necesidades del proyecto y las preferencias del equipo de desarrollo. <br />',
+    '¿Como hacemos que otra persona pueda ver nuestra web por internet?',
+    '¿Que herramientas nos permiten publicarla, configurarla, entre otras necesidades?',
+    'Tu elección va a depender de las necesidades del proyecto y las preferencias del equipo de desarrollo.',
     'Algunas de las herramientas más populares son:',
   ],
   contributors: [

db/frontend/domains.ts

@@ -2,7 +2,7 @@ import { DocPage, LinkType } from '@/lib/db-types'
 
 const domains: DocPage = {
   title: 'Dominios',
-  description: ['Donde comprar tu dominio para tu proyecto'],
+  description: ['Donde comprar tu dominio para tu proyecto.'],
   contributors: [
     { github_username: 'nsdonato' },
     { github_username: 'guguponce' },

db/frontend/fonts.ts

@@ -3,7 +3,8 @@ import { DocPage, LinkType } from '@/lib/db-types'
 const fonts: DocPage = {
   title: 'Fuentes',
   description: [
-    'Encontrá la tipografía que más se adapte a tu proyecto! <br /> En alguna de las herramientas también podés encontrar combinaciones de fuentes que funcionan bien juntas.',
+    'Encontrá la tipografía que más se adapte a tu proyecto!',
+    'En alguna de las herramientas también podés encontrar combinaciones de fuentes que funcionan bien juntas.',
   ],
   contributors: [
     { github_username: 'nsdonato' },

db/mobile/streamers.ts

@@ -23,7 +23,7 @@ const streamers: DocPage = {
       cover: {
         src: '/streamers/neryad.png',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },
@@ -45,7 +45,7 @@ const streamers: DocPage = {
       cover: {
         src: '/streamers/vadim-headshot.webp',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },
@@ -63,7 +63,7 @@ const streamers: DocPage = {
       cover: {
         src: '/streamers/moure.png',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },

db/testing/streamers.ts

@@ -31,7 +31,7 @@ const streamers: DocPage = {
       cover: {
         src: '/streamers/charlyautomatiza.png',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },

db/testing/tools.ts

@@ -2,7 +2,7 @@ import { DocPage, LinkType } from '@/lib/db-types'
 
 const tools: DocPage = {
   title: 'Testing',
-  description: ['Frameworks o herramientas para testing'],
+  description: ['Frameworks o herramientas para testing.'],
   contributors: [
     {
       github_username: 'nsdonato',