https://github.com/uxcorprangel/ana-cards-og
🔥 Firebase Function para generar imágenes Open Graph dinámicas para los usuarios de Ana×Cards.
https://github.com/uxcorprangel/ana-cards-og
firebase firebase-functions open-graph open-graph-generator
Last synced: 5 months ago
JSON representation
🔥 Firebase Function para generar imágenes Open Graph dinámicas para los usuarios de Ana×Cards.
- Host: GitHub
- URL: https://github.com/uxcorprangel/ana-cards-og
- Owner: UXCorpRangel
- License: mit
- Created: 2024-11-29T01:46:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-05T06:50:57.000Z (about 1 year ago)
- Last Synced: 2025-10-12T16:32:59.335Z (9 months ago)
- Topics: firebase, firebase-functions, open-graph, open-graph-generator
- Language: TypeScript
- Homepage: https://cards.uxanarangel.com
- Size: 662 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://cards.uxanarangel.com/ranking/)
# 🦄 Generación dinámica de OG para los usuarios de Ana×Cards
Este proyecto es una Firebase Function para generar imágenes de Open Graph de usuarios personalizadas con un formato de imagen PNG.
La 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.
## ✨ Características
- ✅ Firebase Functions: Una función HTTP que maneja la solicitud, valida el origen, y devuelve la imagen generada.
- ✅ Generación de SVGs: Uso de Satori para renderizar un árbol de nodos de elementos en SVG.
- ✅ Transformación de la imagen: Uso de Resvg para convertir el SVG generado en un archivo PNG.
- ✅ Gestión de activos: Fetch y manipulación de fuentes y fondos desde URLs específicas.
## 🛠️ Tecnologías Utilizadas
- 🏷️ TypeScript: Para la escritura del código en un formato tipado.
- 🔥 Firebase Functions: Para manejar las solicitudes HTTP.
- 💠 Satori: Para convertir los elementos de marcado en un SVG.
- 🖼️ Resvg: Para renderizar el SVG y convertirlo en un archivo PNG.
- 🌐 isomorphic-fetch: Para hacer solicitudes de red de manera consistente en un entorno de servidor y cliente.
## 🔎 Estructura del Proyecto
- [functions](functions): Ruta principal de la función de Firebase.
- [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.
- [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.
- [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.
## 💼 ¿Cómo utilizar?
¿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.
### 🔥 Configurar Firebase
1. **Crea una cuenta en Firebase**:
- 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/).
2. **Crea un nuevo proyecto de Firebase**:
- Haz clic en "Agregar proyecto" y sigue las instrucciones para crear un nuevo proyecto de Firebase.
3. **Configura la CLI de Firebase**:
- Instala la CLI de Firebase si aún no lo has hecho:
```bash
pnpm i -g firebase-tools
```
- Inicia sesión en la CLI de Firebase:
```bash
firebase login
```
4. **Inicializa Firebase en tu proyecto local**:
- En tu terminal, navega al directorio donde quieras clonar el repositorio y ejecuta:
```bash
firebase init functions
```
- Selecciona tu proyecto de Firebase cuando se te solicite y elige entre JavaScript o TypeScript para las funciones.
### 🛠 Clonar y configurar el repositorio
1. **Clona el repositorio**:
- Usa `git` para clonar el repositorio en tu máquina local:
```bash
git clone https://github.com/UXCorpRangel/ana-cards-og.git
```
```bash
cd ana-cards-og
```
2. **Instala las dependencias**:
- Navega al directorio del proyecto y ejecuta:
```bash
pnpm i
```
3. **Ejecuta el modo desarrollo con el comando**:
- Para ejecutar el modo desarrollo, utiliza el comando:
```bash
pnpm serve
```
### 🔧 Desplegando tu función
Ejecuta el siguiente comando para desplegar la función:
```bash
firebase deploy --only functions
```
Esto subirá tu función a Firebase y la hará accesible mediante la URL proporcionada por la consola de Firebase.
¡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.
## ¿Porque Firebase Functions?
Firebase 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.
Ademá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).
## 📚 Recursos útiles
- [Guía de inicio rápido de Firebase Functions](https://firebase.google.com/docs/functions/get-started)
- [Documentación de Firebase CLI](https://firebase.google.com/docs/cli)
- [Cómo desplegar funciones en Firebase](https://firebase.google.com/docs/functions/deployment)
## 📄 Licencia
Este proyecto utiliza la Licencia MIT. Consulta el [Archivo de Licencia](./LICENSE) para obtener más información.