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
nsdonato · Apr 1, 2024 · 5906a0f · 5906a0f
1 parent 5bfd226
commit 5906a0f
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 15 deletions.
diff --git a/components/card/card.tsx b/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'

diff --git a/db/ciberseguridad/streamers.ts b/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: [],
     },

diff --git a/db/extensions/vscode.ts b/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: [
         {

diff --git a/db/frontend/deploys.ts b/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: [

diff --git a/db/frontend/domains.ts b/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' },

diff --git a/db/frontend/fonts.ts b/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' },

diff --git a/db/mobile/streamers.ts b/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: [],
     },

diff --git a/db/testing/streamers.ts b/db/testing/streamers.ts
@@ -31,7 +31,7 @@ const streamers: DocPage = {
       cover: {
         src: '/streamers/charlyautomatiza.png',
         height: 80,
-        width: 90,
+        width: 80,
       },
       videos: [],
     },

diff --git a/db/testing/tools.ts b/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',