From 7fc14c2a86abde9e638be64775ae663fd29f42d6 Mon Sep 17 00:00:00 2001 From: ToledoVitor Date: Wed, 29 Jul 2026 18:04:03 -0300 Subject: [PATCH] feat: add title_font_size query param Adds a title_font_size query param (5-40, default 20) that controls the graph title's font size. Default matches the previous hardcoded value so existing embeds render unchanged. The title's foreignObject box scales with the font size so larger titles don't get clipped. Closes #139 --- README.md | 1 + __test__/fakeInputs.ts | 14 ++++++++++++++ __test__/svgs.test.ts | 8 ++++++++ src/GraphCards.ts | 2 ++ src/interfaces/interface.ts | 3 +++ src/svgs.ts | 4 ++-- src/utils.ts | 4 ++++ 7 files changed, 34 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4ee2a463..7741a6ed 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ Customize the appearance of your Activity Graph however you want with URL params | `hide_border` | makes the border of the graph transparent | boolean (default: `false`) | | `hide_title` | sets the title to an empty string | boolean (default: `false`) | | `custom_title` | set the title to any string | string | +| `title_font_size` | font-size of the graph's title | number (5-40 inclusive) | | `theme` | name of [available themes](#available-themes) | string | | `radius` | border radius of graph | number (0-16 inclusive) | | `height` | height of the graph | number (200-600 inclusive) | diff --git a/__test__/fakeInputs.ts b/__test__/fakeInputs.ts index 3346aec1..7d59caaa 100644 --- a/__test__/fakeInputs.ts +++ b/__test__/fakeInputs.ts @@ -8,6 +8,7 @@ export let fakeQueryString = [ hide_title: false, custom_title: undefined, title_color: 'ffffff', + title_font_size: 30, }, { username: 'githubusername', @@ -16,6 +17,7 @@ export let fakeQueryString = [ bg_color: '44475a', hide_title: false, custom_title: undefined, + title_font_size: 2, }, { username: 'githubusername', @@ -25,6 +27,7 @@ export let fakeQueryString = [ color: '000000', hide_title: false, custom_title: undefined, + title_font_size: 50, }, { username: 'githubusername', @@ -113,6 +116,7 @@ export let fakeQueryStringRes = [ pointColor: '403d3d', }, hide_title: false, + title_font_size: 30, area: false, days: 31, from: '', @@ -133,6 +137,7 @@ export let fakeQueryStringRes = [ pointColor: '403d3d', }, hide_title: false, + title_font_size: 5, area: false, days: 31, from: '', @@ -153,6 +158,7 @@ export let fakeQueryStringRes = [ pointColor: '403d3d', }, hide_title: false, + title_font_size: 40, area: false, days: 31, from: '', @@ -173,6 +179,7 @@ export let fakeQueryStringRes = [ pointColor: '403d3d', }, hide_title: false, + title_font_size: 20, area: false, days: 31, from: '', @@ -193,6 +200,7 @@ export let fakeQueryStringRes = [ pointColor: '44475a', }, hide_title: false, + title_font_size: 20, area: false, days: 31, from: '', @@ -213,6 +221,7 @@ export let fakeQueryStringRes = [ pointColor: 'bd93f9', }, hide_title: false, + title_font_size: 20, area: true, days: 31, from: '', @@ -234,6 +243,7 @@ export let fakeQueryStringRes = [ }, area: true, hide_title: false, + title_font_size: 20, days: 31, from: '', to: '', @@ -254,6 +264,7 @@ export let fakeQueryStringRes = [ }, area: true, hide_title: true, + title_font_size: 20, days: 31, from: '', to: '', @@ -274,6 +285,7 @@ export let fakeQueryStringRes = [ }, area: true, hide_title: false, + title_font_size: 20, custom_title: 'some title', days: 31, from: '', @@ -295,6 +307,7 @@ export let fakeQueryStringRes = [ }, area: true, hide_title: false, + title_font_size: 20, days: 31, from: '', to: '', @@ -316,6 +329,7 @@ export let fakeGraphArgs: GraphArgs = { pointColor: 'bd93f9', }, title: 'graphSvg', + titleFontSize: 20, line: Promise.resolve('line'), }; diff --git a/__test__/svgs.test.ts b/__test__/svgs.test.ts index 52052f62..d3844130 100644 --- a/__test__/svgs.test.ts +++ b/__test__/svgs.test.ts @@ -13,6 +13,14 @@ describe('SVG Testing', () => { expect(invalidUserSvg(fakeInvalidSvgArg)).toMatchSnapshot(); }); + it('Test custom title font-size', () => { + const svg = graphSvg({ ...fakeGraphArgs, titleFontSize: 32 }); + expect(svg).toContain( + "font: 600 32px 'Segoe UI', Ubuntu, Sans-Serif;\n text-align: center;", + ); + expect(svg).toContain(''); + }); + //- Svg testing Promise (GrapgCards.ts)✔ it('chart SVGs', async () => { expect.assertions(1); diff --git a/src/GraphCards.ts b/src/GraphCards.ts index da044772..6d21a409 100644 --- a/src/GraphCards.ts +++ b/src/GraphCards.ts @@ -11,6 +11,7 @@ export class Card { private readonly title = '', private readonly area = false, private readonly showGrid = true, + private readonly titleFontSize = 20, ) {} private getOptions() { @@ -77,6 +78,7 @@ export class Card { width: this.width, colors: this.colors, title: this.title, + titleFontSize: this.titleFontSize, radius: this.radius, line, }; diff --git a/src/interfaces/interface.ts b/src/interfaces/interface.ts index d0dbece5..a083b9bd 100644 --- a/src/interfaces/interface.ts +++ b/src/interfaces/interface.ts @@ -19,6 +19,7 @@ export class QueryOption { username: string; hide_title?: boolean; custom_title?: string; + title_font_size: number; from?: string; to?: string; grid: boolean; @@ -33,6 +34,7 @@ export class ParsedQs { username?: string; hide_title?: boolean; custom_title?: string; + title_font_size?: number; bg_color?: string; border_color?: string; hide_border?: boolean; @@ -56,6 +58,7 @@ export class GraphArgs { width: number; colors: Colors; title: string; + titleFontSize: number; radius: number; line: Promise; } diff --git a/src/svgs.ts b/src/svgs.ts index 0b585197..99415f27 100644 --- a/src/svgs.ts +++ b/src/svgs.ts @@ -20,7 +20,7 @@ export const graphSvg = (props: GraphArgs) => ` font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; } .header { - font: 600 20px 'Segoe UI', Ubuntu, Sans-Serif; + font: 600 ${props.titleFontSize}px 'Segoe UI', Ubuntu, Sans-Serif; text-align: center; color: #${props.colors.titleColor ?? props.colors.color}; margin-top: 20px; @@ -39,7 +39,7 @@ export const graphSvg = (props: GraphArgs) => ` ${lineAnimation()} - +

${props.title}

diff --git a/src/utils.ts b/src/utils.ts index ddef898e..08a62d5c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -111,6 +111,9 @@ export class Utilities { const options: QueryOption = { username: this.username, hide_title: String(this.queryString.hide_title) === 'true', + title_font_size: this.queryString.title_font_size + ? Math.min(Math.max(this.queryString.title_font_size, 5), 40) + : 20, // Custom title font-size in range [5, 40], if not specified use default value - 20 radius: this.queryString.radius ? Math.min(Math.max(this.queryString.radius, 0), 16) : 0, // Border radius in range [0, 16] @@ -154,6 +157,7 @@ export class Utilities { title, options.area, options.grid, + options.title_font_size, ); const getChart = await graph.buildGraph(fetchCalendarData.contributions); return {