refactor: perf improvements + new card features

Dockerfile

@@ -8,6 +8,11 @@ RUN bun install --frozen-lockfile --production
 # Copy source code and assets needed at runtime
 COPY index.ts tsconfig.json ./
 COPY utils ./utils
+COPY components ./components
+COPY config ./config
+COPY constants ./constants
+COPY services ./services
+COPY types ./types
 COPY fonts ./fonts
 COPY logo ./logo
 

README.md

@@ -1,15 +1,145 @@
-# og-cards-v2
+# OG Cards v2
 
-To install dependencies:
+A server for generating Open Graph (OG) card images for DeFi protocols and metrics.
+
+## Installation
 
 ```bash
 bun install
 ```
 
-To run:
+## Running
 
 ```bash
 bun run index.ts
 ```
 
+The server will start on `http://localhost:3000` (or the port specified by the `PORT` environment variable).
+
+## API Usage
+
+All requests are GET requests to the root path `/` with query parameters.
+
+### Query Parameters
+
+#### Required Parameters
+- `metricName` - The label/title for the metric (e.g., "Total Value Locked", "Fees (24hr)")
+- `metricValue` - The value to display (e.g., "$27.336b", "in 6 hours")
+
+#### Optional Parameters
+- `projectName` - The name of the project/protocol (e.g., "Lido", "Aave")
+- `filetype` - Output image format: `png` (default) or `jpeg`
+- `theme` - Color theme: `dark` (default) or `light`
+- `diff` - Change indicator with percentage (e.g., "4.8%", "-2.4%")
+- `barData` - Comma-separated list of 7 numeric values for bar chart visualization
+- `projectLogo` - URL to the project logo image
+- `footerURL` - Custom footer URL (defaults to "https://defillama.com")
+- `metricName2` - Second metric label (enables double card layout)
+- `metricValue2` - Second metric value (enables double card layout)
+- `diff2` - Second metric change indicator
+- `barData2` - Comma-separated list of 7 numeric values for second card's bar chart
+
+### Card Types
+
+#### 1. Standard Card (Single Metric)
+
+Basic card with a single metric:
+
+```
+http://localhost:3000/?projectName=Lido&filetype=png&theme=dark&metricName=Total+Value+Locked&metricValue=%2427.336b&diff=4.8%25&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48
+```
+
+#### 2. Standard Card with Bar Chart
+
+Add a 7-day bar chart by including `barData`:
+
+```
+http://localhost:3000/?projectName=Lido&filetype=png&theme=dark&metricName=Total+Value+Locked&metricValue=%2427.336b&diff=4.8%25&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48&barData=10,2,20,22,18,28,38
+```
+
+The `barData` parameter should contain exactly 7 comma-separated numeric values. The last value will be highlighted in blue.
+
+#### 3. Double Card (Two Metrics)
+
+Display two metrics side-by-side by including `metricName2` and `metricValue2`:
+
+```
+http://localhost:3000/?projectName=Lido&filetype=png&theme=dark&metricName=Total+Value+Locked&metricValue=%2427.336b&diff=4.8%25&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48&metricName2=Fees%20(24hr)&metricValue2=$1.98m
+```
+
+#### 4. Double Card with Bar Charts
+
+Add bar charts to both cards by including `barData` and `barData2`:
+
+```
+http://localhost:3000/?projectName=Lido&filetype=png&theme=dark&metricName=Total+Value+Locked&metricValue=%2427.336b&diff=4.8%25&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48&metricName2=Fees%20(24hr)&metricValue2=$1.98m&barData=10,2,20,22,18,28,38&barData2=5,12,8,22,18,28,70
+```
+
+#### 5. Light Theme Card
+
+Use `theme=light` for light mode:
+
+```
+http://localhost:3000/?projectName=Lido&filetype=png&theme=light&metricName=Next+Unlock+%7C+%24129%2C745&metricValue=in+6+hours&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48
+```
+
+#### 6. Homepage Card (No Project Name)
+
+Card without a project name, useful for aggregate metrics:
+
+```
+http://localhost:3000/?metricName=Total%20Value+Locked%20in%20DeFi&metricValue=$119.042b&diff=-1.16%25&projectLogo=https%3A%2F%2Ficons.llamao.fi%2Ficons%2Fprotocols%2Flido%3Fw%3D48%26h%3D48
+```
+
+### Image Format
+
+Specify the output format using the `filetype` parameter:
+- `png` (default) - Returns PNG image
+- `jpeg` or `jpg` - Returns JPEG image
+
+The filename in the response will be `{projectName}.{filetype}` (or `image.{filetype}` if no project name is provided).
+
+### Notes
+
+- The `diff` parameter accepts values like "4.8%", "-2.4%", or "0%". The sign (+ or -) is used to determine arrow direction but is not displayed.
+- Bar charts require exactly 7 numeric values. If `barData` is not provided or invalid, no bar chart will be displayed.
+- For double cards, both `metricName2` and `metricValue2` must be provided.
+- Project logos are automatically fetched and converted to PNG format, supporting various input formats (WebP, SVG, PNG, etc.).
+
+## Project Structure
+
+```
+og-cards-v2/
+├── index.ts                 # Main server entry point
+├── config/
+│   └── assets.ts            # Font and logo loading
+├── types/
+│   └── params.ts            # TypeScript type definitions
+├── constants/
+│   └── styles.ts            # Theme colors, font sizes, dimensions
+├── utils/
+│   ├── sanitize.ts          # URL and text sanitization
+│   ├── formatters.ts        # Value formatting utilities
+│   └── parsers.ts           # Query parameter parsing
+├── components/
+│   ├── header.ts            # Header component builders
+│   ├── stats-card.ts        # Stats card component
+│   └── footer.ts            # Footer component
+├── services/
+│   ├── image-fetcher.ts     # Project logo fetching
+│   └── image-generator.ts   # Satori + Sharp image generation
+└── fonts/                   # Inter font files
+```
+
+## Docker
+
+Build and run with Docker:
+
+```bash
+docker build -t og-cards-v2 .
+docker run -p 3000:3000 og-cards-v2
+```
+
+## License
+
 This project was created using `bun init` in bun v1.3.1. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

components/footer.ts

@@ -0,0 +1,27 @@
+import type { Theme } from "../constants/styles";
+import { THEMES, FONT_SIZES } from "../constants/styles";
+
+export function createFooter(
+  footerUrl: string,
+  theme: Theme,
+  hasMetrics: boolean
+) {
+  return {
+    type: "p",
+    props: {
+      children: `DefiLlama is committed to providing accurate data without advertisements or sponsored content, as well as transparency. Learn more on: ${footerUrl}`,
+      style: {
+        fontSize: FONT_SIZES.footer,
+        fontStyle: "italic",
+        fontWeight: 300,
+        color: THEMES[theme].footerColor,
+        marginTop: "auto",
+        display: "flex",
+        justifyContent: hasMetrics ? "flex-start" : "center",
+        textAlign: hasMetrics ? "left" : "center",
+        alignItems: "center",
+        marginBottom: "-8px",
+      },
+    },
+  };
+}