feat: add badges

eslint.config.js

@@ -20,7 +20,7 @@ const pluginReact = eslintReact.configs.all.plugins
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
-  { ignores: resolveIgnoresFromGitignore() },
+  { ignores: [...resolveIgnoresFromGitignore(), 'functions/lib/*'] },
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
   ...neostandard({

functions/src/index.ts

@@ -1,21 +1,34 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { error as logger } from 'firebase-functions/logger'
+import { https } from 'firebase-functions/v2'
+import { defaultStyle, roundedStyle } from './primary'
 
-/**
- * Import function triggers from their respective submodules:
- *
- * import {onCall} from "firebase-functions/v2/https";
- * import {onDocumentWritten} from "firebase-functions/v2/firestore";
- *
- * See a full list of supported triggers at https://firebase.google.com/docs/functions
- */
+export const badge = https.onRequest(async (request, response) => {
+  const { query } = request
 
-import * as logger from 'firebase-functions/logger'
-import { onRequest } from 'firebase-functions/v2/https'
+  try {
+    let svgContent
 
-// Start writing functions
-// https://firebase.google.com/docs/functions/typescript
+    // Verificar que el método de la solicitud sea GET
+    if (request.method !== 'GET') {
+      response.status(405).send(`Método ${request.method} no permitido.`)
+      return
+    }
 
-// export const helloWorld = onRequest((request, response) => {
-//   logger.info("Hello logs!", {structuredData: true});
-//   response.send("Hello from Firebase!");
-// });
+    // Generar el contenido SVG
+    if (query.style === 'default') {
+      svgContent = defaultStyle(query)
+    }
+
+    if (query.style === 'rounded') {
+      svgContent = roundedStyle(query)
+    }
+
+    // Establecer el tipo de contenido como image/svg+xml
+    response.set('Content-Type', 'image/svg+xml')
+    response.status(200).send(svgContent)
+  } catch (error) {
+    // Registrar el error y devolver un mensaje genérico
+    logger('Error manejando la solicitud:', error)
+    response.status(500).send('Error de servidor.')
+  }
+})

functions/src/primary/default.ts

@@ -0,0 +1,43 @@
+interface Query {
+  text: string
+}
+
+export function defaultStyle(query: Query): string {
+  const { text } = query
+
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" width="283" height="45" fill="none">
+      <style>
+        text {
+          user-select: none;
+        }
+      </style>
+      <g filter="url(#shadow)" shape-rendering="crispEdges">
+        <rect width="281" height="43" fill="url(#gradient)" rx="8"/>
+        <rect width="280" height="42" x=".5" y=".5" stroke="#000" rx="7.5"/>
+      </g>
+      <defs>
+        <linearGradient id="gradient" x1="138.9" x2="284.4" y1="46.3" y2="-37" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#EE2525"/>
+          <stop offset=".8" stop-color="#8B1818"/>
+        </linearGradient>
+        <filter id="shadow" width="283" height="47" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+          <feOffset dx="2" dy="2"/>
+          <feComposite in2="hardAlpha" operator="out"/>
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1_11"/>
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_11" result="shape"/>
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+          <feOffset dy="4"/>
+          <feGaussianBlur stdDeviation="2"/>
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+          <feBlend in2="shape" result="effect2_innerShadow_1_11"/>
+        </filter>
+      </defs>
+      <text x="28" y="27" stroke="#fff">${text}</text>
+    </svg>
+  `
+}

functions/src/primary/index.ts

@@ -0,0 +1,2 @@
+export * from './default'
+export * from './rounded'

functions/src/primary/rounded.ts

@@ -0,0 +1,43 @@
+interface Query {
+  text: string
+}
+
+export function roundedStyle(query: Query): string {
+  const { text } = query
+
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" width="283" height="45" fill="none">
+      <style>
+        text {
+          user-select: none;
+        }
+      </style>
+      <g filter="url(#a)">
+        <rect width="281" height="43" fill="url(#b)" rx="21.5" shape-rendering="crispEdges"/>
+        <rect width="280" height="42" x=".5" y=".5" stroke="#000" rx="21" shape-rendering="crispEdges"/>
+      </g>
+      <defs>
+        <linearGradient id="b" x1="138.9" x2="284.4" y1="46.3" y2="-37" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#EE2525"/>
+          <stop offset=".8" stop-color="#8B1818"/>
+        </linearGradient>
+        <filter id="a" width="283" height="47" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+          <feOffset dx="2" dy="2"/>
+          <feComposite in2="hardAlpha" operator="out"/>
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1_15"/>
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_15" result="shape"/>
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+          <feOffset dy="4"/>
+          <feGaussianBlur stdDeviation="2"/>
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+          <feBlend in2="shape" result="effect2_innerShadow_1_15"/>
+        </filter>
+      </defs>
+      <text x="28" y="27" stroke="#fff">${text}</text>
+    </svg>
+  `
+}