@altano/satori-fit-text 0.1.1 → 0.1.2

package/README.md

@@ -15,13 +15,13 @@ yarn add @altano/satori-fit-text
 pnpm add @altano/satori-fit-text
 ```
 
-## Example Usage
+## Basic Example
 
 ```ts
 import { findLargestUsableFontSize, type Font } from "@altano/satori-fit-text";
 
 async function getInter(): Promise<Font> {
-  const interSemiBoldBuffer = await fetch(`https://rsms.me/inter/font-files/Inter-SemiBold.woff`).then((res) => res.arrayBuffer());
+  const interSemiBoldBuffer = await fetch(`https://files.terriblefish.com/fonts/Inter/v4/extras/otf/Inter-SemiBold.otf`).then((res) => res.arrayBuffer());
 
   const font = {
     name: "Inter",
@@ -41,9 +41,12 @@ const largestUsableFontSize = await findLargestUsableFontSize({
 console.log(largestUsableFontSize);
 ```
 
-## Potential Uses
+## Example Uses
 
-Because this measures the maximum font size using Satori, the ideal use of this library is to determine the largest possible font size in something like an [Open Graph card](https://ogp.me/). If you dynamically generate Open Graph cards with text (e.g. the title of your blog post) you may want the text to fill the card's area as best as possible without overflowing. This library can help you achieve that.
+- [React Component (sandbox)](https://codesandbox.io/s/altano-satori-fit-text-browser-example-j2gvk6)
+- [Next.js Open Graph Card - Simple (codesandbox)](https://codesandbox.io/p/sandbox/altano-satori-fit-text-next-js-demo-sv4flc)
+- [Next.js Open Graph Card - Complex](https://github.com/altano/alan.norbauer.com/blob/main/src/components/opengraph/image.tsx#L29-L35)
+- [Node.js CLI App (codesandbox)](https://codesandbox.io/p/sandbox/github/altano/npm-packages/tree/main/codesandboxes/satori-fit-text-node-cli?file=%2Fpackage.json%3A1%2C1)
 
 ## Implementation
 

package/dist/index.d.ts

@@ -1,3 +1,47 @@
-export * from "./fitText";
-export * from "./types";
-//# sourceMappingURL=index.d.ts.map
+import { Font as Font$1 } from 'satori';
+
+type Font = Font$1;
+
+type FindOptions = {
+    /**
+     * The text you want to fit
+     */
+    text: string;
+    /**
+     * The font of your text. Options are the same as [those taken by
+     * Satori](https://github.com/vercel/satori#fonts), but only one font and not
+     * an array of fonts is accepted here.
+     */
+    font: Font;
+    /**
+     * The max width the text must be contained in
+     */
+    maxWidth: number;
+    /**
+     * The max height the text must be contained in
+     */
+    maxHeight: number;
+    /**
+     * Optional: the CSS line height factor to use, e.g. 1.1
+     */
+    lineHeight?: number | "normal";
+    /**
+     * The minimum font size that should be returned, even if smaller fonts fit
+     */
+    minFontSize?: number;
+    /**
+     * The maximum font size that should be returned, even if larger fonts fit
+     */
+    maxFontSize?: number;
+    /**
+     * The maximum number of font sizes to try before giving up. Defaults to 1000.
+     */
+    maxTries?: number;
+};
+/**
+ * Given text, dimensions, and some options, returns the largest font size that
+ * would keep the text contained within the dimensions.
+ */
+declare function findLargestUsableFontSize({ text, font, maxWidth, maxHeight, lineHeight, minFontSize, maxFontSize, maxTries, }: FindOptions): Promise<number>;
+
+export { type FindOptions, type Font, findLargestUsableFontSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Fit text to a bounding box in Node or the browser",
   "type": "module",
   "sideEffects": false,
@@ -36,31 +36,32 @@
     "@svgdotjs/svg.js": "^3.2.0",
     "debug": "^4.3.4",
     "he": "^1.2.0",
-    "satori": "^0.10.3",
+    "satori": "^0.10.13",
     "satori-html": "^0.3.2",
-    "svgdom": "^0.1.14"
+    "svgdom": "^0.1.19"
   },
   "devDependencies": {
-    "@resvg/resvg-js": "^2.4.1",
-    "@types/debug": "^4.1.8",
-    "@types/he": "^1.2.0",
-    "@types/jest-image-snapshot": "^6.2.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/svgdom": "^0.1.0",
-    "@vitest/coverage-v8": "^0.34.3",
-    "@vitest/ui": "^0.30.1",
-    "jest-image-snapshot": "^6.2.0",
+    "@resvg/resvg-js": "^2.6.0",
+    "@types/debug": "^4.1.12",
+    "@types/he": "^1.2.3",
+    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@types/svgdom": "^0.1.2",
+    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
+    "jest-image-snapshot": "^6.4.0",
     "npm-run-all": "^4.1.5",
-    "react": "^18",
-    "react-dom": "^18",
-    "tsup": "^7.2.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.3",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vitest": "^1.3.1",
     "@altano/assets": "0.0.0",
-    "@altano/tsconfig": "0.0.0",
-    "@altano/tiny-async-pool": "1.0.2"
+    "@altano/tiny-async-pool": "1.0.3",
+    "@altano/tsconfig": "0.0.0"
   },
   "scripts": {
     "build": "tsup",
@@ -69,7 +70,8 @@
     "lint": "eslint src/**/*.ts*",
     "lint:timing": "TIMING=1 eslint src/**/*.ts*",
     "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
-    "format": "prettier --write src",
+    "format": "prettier --check src",
+    "format:fix": "prettier --write src",
     "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
     "test": "run-s test:unit test:benchmark",
     "test:unit": "vitest --run",