fix(pkg): width size

thuongtruong109 · thuongtruong109 · commit ddd2e6878ac6 · 2025-08-24T16:00:45.000+07:00
diff --git a/.config/eslint.config.ts b/.config/eslint.config.ts
@@ -9,7 +9,6 @@ export default tseslint.config([
   sonarjs.configs.recommended,
   {
     files: ["**/*.{js,mjs,cjs,ts,mts,cts}"],
-    ignores: ["coverage/**", "dist/**", "examples/**"],
     plugins: { js },
     languageOptions: { globals: { ...globals.browser, ...globals.node } },
     rules: {
@@ -18,5 +17,5 @@ export default tseslint.config([
       "sonarjs/no-commented-code": "off",
     },
   },
-  globalIgnores(["dist/**/*"]),
+  globalIgnores(["dist/**/*", "api/**/*"]),
 ]);
diff --git a/.config/lefthook.yml b/.config/lefthook.yml
@@ -1,30 +1,15 @@
-# Lefthook configuration for git hooks
-# Documentation: https://lefthook.dev/configuration/
-
 pre-commit:
   parallel: true
   jobs:
     - name: eslint
       glob: "*.{js,ts,jsx,tsx}"
-      run: bun run eslint --config .config/eslint.config.ts {staged_files}
-      
+      run: bun run lint {staged_files}
+
     - name: biome
       glob: "*.{js,ts,jsx,tsx,json}"
-      run: biome check --no-errors-on-unmatched --files-ignore-unknown=true {staged_files}
+      run: bun run biome {staged_files}
 
 commit-msg:
   jobs:
     - name: commitlint
-      run: commitlint --config .config/commitlint.config.ts --edit {1}
-
-pre-push:
-  parallel: true
-  jobs:
-    - name: lint-check
-      run: bun run lint
-      
-    - name: biome-check
-      run: bun run biome
-      
-    - name: build
-      run: bun run build
+      run: bunx commitlint --config .config/commitlint.config.ts --edit {1}
diff --git a/README.md b/README.md
@@ -7,10 +7,11 @@
 
 ![CI status](https://img.shields.io/github/actions/workflow/status/thuongtruong109/flashot/ci.yml?branch=main&label=ci&logo=github&style=flat&colorA=080f12&colorB=1fa669)
 [![Npm version](https://img.shields.io/npm/v/flashot?style=flat&label=version&colorA=080f12&colorB=1fa669&logo=npm)](https://npmjs.com/package/flashot)
-[![Npm downloads](https://img.shields.io/npm/dm/flashot?style=flat&colorA=080f12&colorB=1fa669)](https://npmjs.com/package/flashot)
-![Code size](https://img.shields.io/github/languages/code-size/thuongtruong109/flashot?style=flat&colorA=080f12&colorB=1fa669)
-[![JSDocs](https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669)](https://www.jsdocs.io/package/vite-unbundled)
+[![Npm downloads](https://img.shields.io/npm/dm/flashot?style=flat&logo=jsr&colorA=080f12&colorB=1fa669)](https://npmjs.com/package/flashot)
+[![JSDocs](https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&logo=javascript&colorA=080f12&colorB=1fa669)](https://www.jsdocs.io/package/vite-unbundled)
+![Code size](https://img.shields.io/github/languages/code-size/thuongtruong109/flashot?style=flat&logo=bun&colorA=080f12&colorB=1fa669)
 [![License](https://img.shields.io/github/license/thuongtruong109/flashot.svg?style=flat&colorA=080f12&colorB=1fa669)](https://github.com/antfu/vite-unbundled/blob/main/LICENSE)
+[![Sponsor](https://img.shields.io/badge/sponsor-1fa669?logo=githubsponsors&labelColor=080f12)](https://github.com/sponsors/thuongtruong109)
 
 Flashot is the **blazing-fast image generation tool** for code snippets, designed for flawless experience and speed.
 
@@ -48,9 +49,11 @@ import { writeFile } from "node:fs/promises";
 import { c2i } from "flashot";
 
 const buffer = await c2i('console.log("hello, world!");');
-await writeFile("image.png", buffer);
+await writeFile("output.png", buffer); // Export the image
 ```
 
+Then you can use the `buffer` to display the image or send it in a response.
+
 ## ⚙️ API Options (default is not needed)
 
 ```js
@@ -60,7 +63,7 @@ const defaultOptions = {
   font: "https://fonts.bunny.net/ubuntu-sans-mono/files/ubuntu-sans-mono-latin-400-normal.woff2", // custom font
   width: 800, // default is auto
   height: 400, // default is auto
-  backgroundColor: "transparent", // default is theme's background
+  bg: "transparent", // default is theme's background
   gap: 1, // gap between lines (default is 1)
   style: {
     borderRadius: 10, // default is 8
@@ -72,31 +75,28 @@ const defaultOptions = {
 const buffer = await c2i('console.log("hello, world!");', defaultOptions);
 ```
 
-| Option   | Description                                                                              | Default              |
-| -------- | ---------------------------------------------------------------------------------------- | -------------------- |
-| `lang`   | Code language ([supported](https://shiki.style/languages))                               | `"typescript"`       |
-| `theme`  | Rendering theme ([supported](https://shiki.style/themes))                                | `"github-dark"`      |
-| `style`  | Additional container styles ([docs](https://takumi.kane.tw/docs/deep-dives/stylesheets)) | `{}`                 |
-| `font`   | Font for rendering (URL or ArrayBuffer)                                                  | System default       |
-| `width`  | Image width                                                                              | `(columns + 2) * 10` |
-| `height` | Image height                                                                             | `(lines + 2) * 20`   |
-
-## 🚀 Features
-
-- **[Bun](https://bun.sh)** - Fast all-in-one JavaScript runtime and toolkit
-- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe development with strict mode enabled
-- **[Vite](https://vitejs.dev/)** - Lightning-fast build tool with optimized bundling
-- **[Vitest](https://vitest.dev/)** - Blazing fast unit testing framework
-- **[shiki](https://github.com/shikijs/shiki)** and **[takumi](https://github.com/kane50613/takumi)**
-- **Dual Module Support** - ESM and CommonJS output with proper type definitions
-- **[Biome](https://biomejs.dev/)** - Fast formatter and linter for consistent code style
-- **[ESLint](https://eslint.org/)** - Advanced linting with TypeScript and SonarJS rules
-- **Git Hooks** - Automated quality checks via Lefthook and Commitlint
-- **Watch Mode** - Hot rebuild during development
-- **Test Coverage** - Built-in coverage reporting with v8
-- **UI Testing** - Interactive test UI with `@vitest/ui`
-- **Pre-commit Hooks** - Automatic linting and formatting on commit
-- **Pre-push Validation** - Full build and test suite before pushing
+| Option   | Description                                                                              | Default                                                                                            |
+| -------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `lang`   | Code language ([supported](https://shiki.style/languages))                               | `"js"`                                                                                             |
+| `theme`  | Rendering theme ([supported](https://shiki.style/themes))                                | `"dracula"`                                                                                        |
+| `font`   | Font for rendering (URL or ArrayBuffer)                                                  | [`ubuntu`](https://fonts.bunny.net/ubuntu-sans-mono/files/ubuntu-sans-mono-latin-400-normal.woff2) |
+| `width`  | Image width                                                                              | System default                                                                                     |
+| `height` | Image height                                                                             | System default                                                                                     |
+| `bg`     | Background color                                                                         | Theme's background                                                                                 |
+| `gap`    | Gap between lines                                                                        | `1`                                                                                                |
+| `style`  | Additional container styles ([docs](https://takumi.kane.tw/docs/deep-dives/stylesheets)) | `{ borderRadius: 8, padding: 25 }`                                                                 |
+
+## 📚 Technologies
+
+- ⚡ **[Bun](https://bun.sh)** - Fast all-in-one JavaScript runtime and toolkit
+- 🏗️ **[TypeScript](https://www.typescriptlang.org/)** - Type-safe development with strict mode enabled
+- 📦 **[Vite](https://vitejs.dev/)** - Lightning-fast build tool with optimized bundling
+- 🔋 **[Vitest](https://vitest.dev/)** - Blazing fast unit testing & interactive test UI framework
+- 🪓 **[shiki](https://github.com/shikijs/shiki)** and **[takumi](https://github.com/kane50613/takumi)**
+- 📝 **[Biome](https://biomejs.dev/)** - Fast formatter and linter for consistent code style
+- 🚀 **Dual Module Support** - ESM and CommonJS output with proper type definitions
+- 🔥 **[ESLint](https://eslint.org/)** - Advanced linting with TypeScript and SonarJS rules
+- 🧩 **[Lefthook](https://github.com/evilmartians/lefthook)** and **[Commitlint](https://commitlint.js.org/)** - Automated Git hooks for linting and formatting
 
 ## 🧪 Code Coverage
 
diff --git a/examples/image.png b/examples/image.png
diff --git a/examples/starter-js/index.js b/examples/starter-js/index.js
@@ -2,4 +2,4 @@ import { writeFile } from "node:fs/promises";
 import { c2i } from "flashot";
 
 const buffer = await c2i('console.log("hello, world!");');
-await writeFile("image.png", buffer);
+await writeFile("output.png", buffer);
diff --git a/examples/starter-js/output.png b/examples/starter-js/output.png
diff --git a/examples/starter-js/package-lock.json b/examples/starter-js/package-lock.json
diff --git a/examples/starter-js/package.json b/examples/starter-js/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "flashot-code-to-image-demo",
+  "name": "flashot-starter-js",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,6 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "flashot": "^1.0.1"
+    "flashot": "^1.2.0"
   }
 }
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "biome": "biome check .",
     "biome:fix": "biome check --write .",
     "check": "bun run lint && bun run biome",
-    "check:fix": "bun run lint:fix && bun run biome:fix"
+    "check:fix": "bun run lint:fix && bun run biome:fix",
+    "pre": "bun lefthook run pre-commit && bun lefthook run pre-push"
   },
   "files": [
     "dist"
diff --git a/src/index.ts b/src/index.ts
@@ -55,13 +55,13 @@ export async function c2i(code: string, options?: ThemeOptions) {
                 style: {
                   minWidth: em(0.5 * token.content.length),
                   minHeight: 0,
-                  backgroundColor: "transparent",
+                  // backgroundColor: "transparent",
                   padding: 0,
                 },
               })
-            : text(token.content, { color: token.color })
+            : text(token.content, { color: token.color }),
         ),
-      })
+      }),
     ),
   });
 
@@ -78,7 +78,7 @@ export async function c2i(code: string, options?: ThemeOptions) {
 
   const res = await renderer.renderAsync(root, {
     format: "Png" as OutputFormat | undefined,
-    width: mergedOptions.width || (columns + 2) * 10,
+    width: mergedOptions.width || (columns + 4) * 10,
     height:
       (mergedOptions.height || (lines + 2) * 23.7) +
       (Number(mergedOptions.style.padding) - 25) * 15,
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
+import pkg from "./package.json";
 
 const license = readFileSync(resolve(__dirname, "LICENSE"), "utf-8");
 const banner = `/**
@@ -18,7 +19,7 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.ts"),
-      name: "PkgName",
+      name: pkg.name,
       formats: ["es", "cjs"],
       fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
     },

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "flashot-code-to-image-demo",`
	`2`	`+ "name": "flashot-starter-js",`
`3`	`3`	`"version": "1.0.0",`
`4`	`4`	`"main": "index.js",`
`5`	`5`	`"scripts": {`
`@@ -10,6 +10,6 @@`
`10`	`10`	`"license": "ISC",`
`11`	`11`	`"description": "",`
`12`	`12`	`"dependencies": {`
`13`		`- "flashot": "^1.0.1"`
	`13`	`+ "flashot": "^1.2.0"`
`14`	`14`	`}`
`15`	`15`	`}`