From 561702663a24688c98f66ff85ed58b3cc5af3de8 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Fri, 26 Sep 2025 11:00:50 +0530 Subject: [PATCH] fix: logo rendering issue in small terminal window sizes --- package.json | 1 + pnpm-lock.yaml | 36 +++++++++++++++++++++++ src/commands/lazycommit.ts | 16 ++-------- src/utils/render-title.ts | 60 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 99 insertions(+), 14 deletions(-) create mode 100644 src/utils/render-title.ts diff --git a/package.json b/package.json index d1bece2..0ca3eff 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "cleye": "^1.3.4", "execa": "^9.6.0", "fs-fixture": "^2.8.1", + "gradient-string": "^3.0.0", "groq-sdk": "^0.32.0", "https-proxy-agent": "^7.0.6", "ini": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2626f9..ff8927a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: fs-fixture: specifier: ^2.8.1 version: 2.8.1 + gradient-string: + specifier: ^3.0.0 + version: 3.0.0 groq-sdk: specifier: ^0.32.0 version: 0.32.0 @@ -470,6 +473,9 @@ packages: '@types/through@0.0.33': resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==} + '@types/tinycolor2@1.4.6': + resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==} + '@types/yargs-parser@21.0.3': resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==} @@ -515,6 +521,10 @@ packages: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} + chalk@5.6.2: + resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==} + engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + ci-info@3.9.0: resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} engines: {node: '>=8'} @@ -688,6 +698,10 @@ packages: graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} + gradient-string@3.0.0: + resolution: {integrity: sha512-frdKI4Qi8Ihp4C6wZNB565de/THpIaw3DjP5ku87M+N9rNSGmPTjfkq61SdRXB7eCaL8O1hkKDvf6CDMtOzIAg==} + engines: {node: '>=14'} + groq-sdk@0.32.0: resolution: {integrity: sha512-KQZOzSV8UmeIbv7YEvzpZinSR9CaI/8pIGzLrVBVher6RuamklljBom5HXnNTqpekk3/L/h9Txc3Jq3ti58jug==} @@ -946,6 +960,12 @@ packages: terminal-columns@1.4.1: resolution: {integrity: sha512-IKVL/itiMy947XWVv4IHV7a0KQXvKjj4ptbi7Ew9MPMcOLzkiQeyx3Gyvh62hKrfJ0RZc4M1nbhzjNM39Kyujw==} + tinycolor2@1.6.0: + resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} + + tinygradient@1.1.5: + resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -1295,6 +1315,8 @@ snapshots: dependencies: '@types/node': 24.5.1 + '@types/tinycolor2@1.4.6': {} + '@types/yargs-parser@21.0.3': {} '@types/yargs@17.0.33': @@ -1335,6 +1357,8 @@ snapshots: ansi-styles: 4.3.0 supports-color: 7.2.0 + chalk@5.6.2: {} + ci-info@3.9.0: {} cjs-module-lexer@2.1.0: {} @@ -1536,6 +1560,11 @@ snapshots: graceful-fs@4.2.11: {} + gradient-string@3.0.0: + dependencies: + chalk: 5.6.2 + tinygradient: 1.1.5 + groq-sdk@0.32.0: dependencies: '@types/node': 18.19.126 @@ -1798,6 +1827,13 @@ snapshots: terminal-columns@1.4.1: {} + tinycolor2@1.6.0: {} + + tinygradient@1.1.5: + dependencies: + '@types/tinycolor2': 1.4.6 + tinycolor2: 1.6.0 + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 diff --git a/src/commands/lazycommit.ts b/src/commands/lazycommit.ts index 8f8614f..e318eee 100644 --- a/src/commands/lazycommit.ts +++ b/src/commands/lazycommit.ts @@ -20,6 +20,7 @@ import { getConfig } from '../utils/config.js'; import { generateCommitMessageFromSummary } from '../utils/groq.js'; import { generatePrompt } from '../utils/prompt.js'; import { KnownError, handleCliError } from '../utils/error.js'; +import { renderTitle } from '../utils/render-title.js'; // Build lightweight per-file diff snippets to give semantic context without huge payloads @@ -112,19 +113,6 @@ WRONG FORMAT (do not use): Return only the commit message line, no explanations.`; }; - - -const ASCII_LOGO = `╔──────────────────────────────────────────────────────────────────────────────────────╗ -│ │ -│ ██╗ █████╗ ███████╗██╗ ██╗ ██████╗ ██████╗ ███╗ ███╗███╗ ███╗██╗████████╗ │ -│ ██║ ██╔══██╗╚══███╔╝╚██╗ ██╔╝██╔════╝██╔═══██╗████╗ ████║████╗ ████║██║╚══██╔══╝ │ -│ ██║ ███████║ ███╔╝ ╚████╔╝ ██║ ██║ ██║██╔████╔██║██╔████╔██║██║ ██║ │ -│ ██║ ██╔══██║ ███╔╝ ╚██╔╝ ██║ ██║ ██║██║╚██╔╝██║██║╚██╔╝██║██║ ██║ │ -│ ███████╗██║ ██║███████╗ ██║ ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚═╝ ██║██║ ██║ │ -│ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ │ -│ │ -╚──────────────────────────────────────────────────────────────────────────────────────╝`; - export default async ( generate: number | undefined, excludeFiles: string[], @@ -134,7 +122,7 @@ export default async ( rawArgv: string[] ) => (async () => { - console.log(ASCII_LOGO); + renderTitle(); console.log(); intro(bgCyan(black(' lazycommit '))); await assertGitRepo(); diff --git a/src/utils/render-title.ts b/src/utils/render-title.ts new file mode 100644 index 0000000..e452246 --- /dev/null +++ b/src/utils/render-title.ts @@ -0,0 +1,60 @@ +import gradient from "gradient-string"; + +const ASCII_LOGO = `╔──────────────────────────────────────────────────────────────────────────────────────╗ +│ │ +│ ██╗ █████╗ ███████╗██╗ ██╗ ██████╗ ██████╗ ███╗ ███╗███╗ ███╗██╗████████╗ │ +│ ██║ ██╔══██╗╚══███╔╝╚██╗ ██╔╝██╔════╝██╔═══██╗████╗ ████║████╗ ████║██║╚══██╔══╝ │ +│ ██║ ███████║ ███╔╝ ╚████╔╝ ██║ ██║ ██║██╔████╔██║██╔████╔██║██║ ██║ │ +│ ██║ ██╔══██║ ███╔╝ ╚██╔╝ ██║ ██║ ██║██║╚██╔╝██║██║╚██╔╝██║██║ ██║ │ +│ ███████╗██║ ██║███████╗ ██║ ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚═╝ ██║██║ ██║ │ +│ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ │ +│ │ +╚──────────────────────────────────────────────────────────────────────────────────────╝`; + +const ASCII_LOGO_MULTI_LINE = `╔─────────────────────────────────────────────────────╗ +│ │ +│ ██╗ █████╗ ███████╗██╗ ██╗ │ +│ ██║ ██╔══██╗╚══███╔╝╚██╗ ██╔╝ │ +│ ██║ ███████║ ███╔╝ ╚████╔╝ │ +│ ██║ ██╔══██║ ███╔╝ ╚██╔╝ │ +│ ███████╗██║ ██║███████╗ ██║ │ +│ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ │ +│ │ +│ ██████╗ ██████╗ ███╗ ███╗███╗ ███╗██╗████████╗ │ +│ ██╔════╝██╔═══██╗████╗ ████║████╗ ████║██║╚══██╔══╝ │ +│ ██║ ██║ ██║██╔████╔██║██╔████╔██║██║ ██║ │ +│ ██║ ██║ ██║██║╚██╔╝██║██║╚██╔╝██║██║ ██║ │ +│ ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚═╝ ██║██║ ██║ │ +│ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ │ +│ │ +╚─────────────────────────────────────────────────────╝`; + +const ASCII_LOGO_MINI = `╔══════════════╗ +║ LAZYCOMMIT ║ +╚══════════════╝`; + +const gradientColors = [ + "#F5C2E7", + "#CBA6F7", + "#F38BA8", + "#E78284", + "#FAB387", + "#F9E2AF", + "#A6E3A1", + "#94E2D5", + "#89DCEB", + "#74C7EC", + "#B4BEFE", +]; + +function getTitle(width: number): string { + if (width > 100) return ASCII_LOGO; + if (width > 55) return ASCII_LOGO_MULTI_LINE; + return ASCII_LOGO_MINI; +} + +export const renderTitle = () => { + const terminalWidth = process.stdout.columns || 55; + const title: string = getTitle(terminalWidth); + console.log(gradient(gradientColors).multiline(title)); +}; \ No newline at end of file