{"id":22158073,"url":"https://github.com/uxcorprangel/ana-cards-og","last_synced_at":"2026-02-27T21:05:30.401Z","repository":{"id":265527628,"uuid":"895825965","full_name":"UXCorpRangel/ana-cards-og","owner":"UXCorpRangel","description":"🔥 Firebase Function para generar imágenes Open Graph dinámicas para los usuarios de Ana×Cards.","archived":false,"fork":false,"pushed_at":"2025-05-05T06:50:57.000Z","size":678,"stargazers_count":4,"open_issues_count":16,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-12T16:32:59.335Z","etag":null,"topics":["firebase","firebase-functions","open-graph","open-graph-generator"],"latest_commit_sha":null,"homepage":"https://cards.uxanarangel.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UXCorpRangel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-29T01:46:32.000Z","updated_at":"2025-09-11T14:06:57.000Z","dependencies_parsed_at":"2025-01-29T19:43:07.281Z","dependency_job_id":"9ff77efa-f372-4d49-9595-b484ed0545af","html_url":"https://github.com/UXCorpRangel/ana-cards-og","commit_stats":null,"previous_names":["uxcorprangel/ana-cards-og"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/UXCorpRangel/ana-cards-og","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXCorpRangel%2Fana-cards-og","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXCorpRangel%2Fana-cards-og/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXCorpRangel%2Fana-cards-og/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXCorpRangel%2Fana-cards-og/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UXCorpRangel","download_url":"https://codeload.github.com/UXCorpRangel/ana-cards-og/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXCorpRangel%2Fana-cards-og/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29913784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"ssl_error","status_checked_at":"2026-02-27T19:37:41.463Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","firebase-functions","open-graph","open-graph-generator"],"created_at":"2024-12-02T03:17:32.527Z","updated_at":"2026-02-27T21:05:30.371Z","avatar_url":"https://github.com/UXCorpRangel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Previsualización del OG generado](https://us-central1-ana-cards-og.cloudfunctions.net/og?avatar=https://static-cdn.jtvnw.net/jtv_user_pictures/e8e4b1bd-745b-42cf-b9ba-154f6a9ba117-profile_image-300x300.png\u0026user=felixicaza\u0026cards=129\u0026ranking=2)](https://cards.uxanarangel.com/ranking/)\n\n# 🦄 Generación dinámica de OG para los usuarios de Ana×Cards\n\nEste proyecto es una Firebase Function para generar imágenes de Open Graph de usuarios personalizadas con un formato de imagen PNG.\n\nLa funcionalidad principal consiste en recibir peticiones HTTP GET a través de la Firebase Function y procesar datos, como avatar, nombre de usuario, y otros parámetros, para generar una imagen de Open Graph personalizada con un fondo y fuente específicos.\n\n## ✨ Características\n\n- ✅ Firebase Functions: Una función HTTP que maneja la solicitud, valida el origen, y devuelve la imagen generada.\n- ✅ Generación de SVGs: Uso de Satori para renderizar un árbol de nodos de elementos en SVG.\n- ✅ Transformación de la imagen: Uso de Resvg para convertir el SVG generado en un archivo PNG.\n- ✅ Gestión de activos: Fetch y manipulación de fuentes y fondos desde URLs específicas.\n\n## 🛠️ Tecnologías Utilizadas\n\n- 🏷️ TypeScript: Para la escritura del código en un formato tipado.\n- 🔥 Firebase Functions: Para manejar las solicitudes HTTP.\n- 💠 Satori: Para convertir los elementos de marcado en un SVG.\n- 🖼️ Resvg: Para renderizar el SVG y convertirlo en un archivo PNG.\n- 🌐 isomorphic-fetch: Para hacer solicitudes de red de manera consistente en un entorno de servidor y cliente.\n\n## 🔎 Estructura del Proyecto\n\n- [functions](functions): Ruta principal de la función de Firebase.\n- [functions/src/index.ts](functions/src/index.ts): Archivo de entrada principal que define la función de Firebase para procesar solicitudes relacionadas con la generación dinámica de imágenes OG.\n- [functions/src/og/index.ts](functions/src/og/index.ts): Implementación de la lógica principal para la generación de imágenes OG, incluyendo la construcción de plantillas SVG, conversión a PNG, y manejo de recursos como fuentes y fondos.\n- [functions/src/og/markup.ts](functions/src/og/markup.ts): Estructura para construir las plantillas SVG dinámicas utilizadas en la generación de imágenes OG.\n\n## 💼 ¿Cómo utilizar?\n\n¿Te gustaría tomar este repositorio para tener tu propia Firebase Function para generar OG dinámicamente? Sigue los pasos a continuación para crear tu propia implementación.\n\n### 🔥 Configurar Firebase\n\n1. **Crea una cuenta en Firebase**:\n\n   - Si aún no tienes una cuenta, regístrate en [Firebase](https://firebase.google.com/) y accede al [Consola de Firebase](https://console.firebase.google.com/).\n\n2. **Crea un nuevo proyecto de Firebase**:\n\n   - Haz clic en \"Agregar proyecto\" y sigue las instrucciones para crear un nuevo proyecto de Firebase.\n\n3. **Configura la CLI de Firebase**:\n\n   - Instala la CLI de Firebase si aún no lo has hecho:\n     ```bash\n     pnpm i -g firebase-tools\n     ```\n   - Inicia sesión en la CLI de Firebase:\n     ```bash\n     firebase login\n     ```\n\n4. **Inicializa Firebase en tu proyecto local**:\n   - En tu terminal, navega al directorio donde quieras clonar el repositorio y ejecuta:\n     ```bash\n     firebase init functions\n     ```\n   - Selecciona tu proyecto de Firebase cuando se te solicite y elige entre JavaScript o TypeScript para las funciones.\n\n### 🛠 Clonar y configurar el repositorio\n\n1. **Clona el repositorio**:\n\n   - Usa `git` para clonar el repositorio en tu máquina local:\n     ```bash\n     git clone https://github.com/UXCorpRangel/ana-cards-og.git\n     ```\n     ```bash\n     cd ana-cards-og\n     ```\n\n2. **Instala las dependencias**:\n\n   - Navega al directorio del proyecto y ejecuta:\n     ```bash\n     pnpm i\n     ```\n\n3. **Ejecuta el modo desarrollo con el comando**:\n\n   - Para ejecutar el modo desarrollo, utiliza el comando:\n\n     ```bash\n     pnpm serve\n     ```\n\n### 🔧 Desplegando tu función\n\nEjecuta el siguiente comando para desplegar la función:\n\n```bash\nfirebase deploy --only functions\n```\n\nEsto subirá tu función a Firebase y la hará accesible mediante la URL proporcionada por la consola de Firebase.\n\n¡Y eso es todo! Ahora puedes tener tu propia función de Firebase para generar imágenes OG dinámicamente y personalizarlas según tus necesidades.\n\n## ¿Porque Firebase Functions?\n\nFirebase Functions se eligió para este proyecto debido a su escalabilidad automática y costos basados en uso, lo que permite optimizar recursos y mantener el proyecto rentable.\n\nAdemás, su modelo de precios, basado en la cantidad de invocaciones y tiempo de ejecución, es económico y flexible, lo que lo hace adecuado para proyectos con tráfico variable. Puedes consultar más sobre la [estructura de precios de Firebase Functions aquí](https://firebase.google.com/pricing) y obtener detalles sobre el [pago por uso en la nube de Google](https://cloud.google.com/functions/pricing).\n\n## 📚 Recursos útiles\n\n- [Guía de inicio rápido de Firebase Functions](https://firebase.google.com/docs/functions/get-started)\n- [Documentación de Firebase CLI](https://firebase.google.com/docs/cli)\n- [Cómo desplegar funciones en Firebase](https://firebase.google.com/docs/functions/deployment)\n\n## 📄 Licencia\n\nEste proyecto utiliza la Licencia MIT. Consulta el [Archivo de Licencia](./LICENSE) para obtener más información.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuxcorprangel%2Fana-cards-og","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuxcorprangel%2Fana-cards-og","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuxcorprangel%2Fana-cards-og/lists"}