feat: add logo.height and logo.width (#1806)

## PR Checklist - [x] Addresses an existing open issue: fixes #1203 - [x] That issue was marked as [`status: accepting prs`](https://github.com/JoshuaKGoldberg/create-typescript-app/issues?q=is%3Aopen+is%3Aissue+label%3A%22status%3A+accepting+prs%22) - [x] Steps in [CONTRIBUTING.md](https://github.com/JoshuaKGoldberg/create-typescript-app/blob/main/.github/CONTRIBUTING.md) were taken ## Overview Uses [`image-size`](https://github.com/image-size/image-size) to read from disk, if possible. Caps sizes to 128px. Doesn't bother adding a warning logo - I don't feel strongly about it, and have yet to have come across a situation where I would have been helped by that. 💖
JoshuaKGoldberg · Dec 24, 2024 · 398e947 · 398e947
1 parent 42c6ebd
commit 398e947
Show file tree

Hide file tree

Showing 18 changed files with 315 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
 	<img alt="💪 TypeScript: Strict" src="https://img.shields.io/badge/%F0%9F%92%AA_typescript-strict-21bb42.svg" />
 </p>
 
-<img align="right" alt="Project logo: the TypeScript blue square with rounded corners, but a plus sign instead of 'TS'" src="./docs/create-typescript-app.png">
+<img align="right" alt="Project logo: the TypeScript blue square with rounded corners, but a plus sign instead of 'TS'" height="128" src="./docs/create-typescript-app.png" width="128">
 
 `create-typescript-app` is a one-stop-shop solution to set up a new or existing repository with the latest and greatest TypeScript tooling.
 It includes options not just for building and testing but also GitHub repository templates, contributor recognition, automated release management, and more.

diff --git a/docs/Options.md b/docs/Options.md
@@ -64,6 +64,8 @@ The setup scripts also allow for optional overrides of the following inputs whos
   - This can be specified any number of times, like `--keywords apple --keywords "banana cherry"`
 - `--logo` _(`string`)_: Local image file in the repository to display near the top of the README.md
   - `--logo-alt` _(`string`)_: If `--logo` is provided or detected from an existing README.md, alt text that describes the image (will be prompted for if not provided)
+  - `--logo-height` _(`number`)_: If `--logo` is provided or detected from an existing README.md, an explicit height style (by default, read from the image, capped to `128`)
+  - `--logo-width` _(`number`)_: If `--logo` is provided or detected from an existing README.md, an explicit width style (by default, read from the image, capped to `128`)
 - `--preserve-generated-from` _(`boolean`)_: Whether to keep the GitHub repository _generated from_ notice (by default, `false`)
 
 For example, customizing the ownership and users associated with a new repository:

diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
 		"execa": "^9.5.2",
 		"git-remote-origin-url": "^4.0.0",
 		"git-url-parse": "^16.0.0",
+		"image-size": "^1.2.0",
 		"input-from-file": "0.1.0-alpha.4",
 		"input-from-file-json": "0.1.0-alpha.4",
 		"input-from-script": "0.1.0-alpha.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/bin/help.test.ts b/src/bin/help.test.ts
@@ -176,6 +176,16 @@ describe("logHelpText", () => {
 			  --logo-alt (string): If --logo is provided or detected from an existing README.md, 
 			  alt text that describes the image will be prompted for if not provided",
 			  ],
+			  [
+			    "
+			  --logo-height (string): If --logo is provided or detected from an existing README.md, 
+			  an explicit height style",
+			  ],
+			  [
+			    "
+			  --logo-width (string): If --logo is provided or detected from an existing README.md, 
+			  an explicit width style",
+			  ],
 			  [
 			    "
 			  --preserve-generated-from: Whether to keep the GitHub repository generated from 

diff --git a/src/next/base.ts b/src/next/base.ts
@@ -95,7 +95,9 @@ export const base = createBase({
 		logo: z
 			.object({
 				alt: z.string(),
+				height: z.number().optional(),
 				src: z.string(),
+				width: z.number().optional(),
 			})
 			.optional()
 			.describe(

diff --git a/src/next/blocks/blockREADME.test.ts b/src/next/blocks/blockREADME.test.ts
@@ -5,7 +5,7 @@ import { blockREADME } from "./blockREADME.js";
 import { optionsBase } from "./options.fakes.js";
 
 describe("blockREADME", () => {
-	test("options.logo", () => {
+	test("options.logo without sizing", () => {
 		const creation = testBlock(blockREADME, {
 			options: {
 				...optionsBase,
@@ -65,6 +65,68 @@ describe("blockREADME", () => {
 		`);
 	});
 
+	test("options.logo with sizing", () => {
+		const creation = testBlock(blockREADME, {
+			options: {
+				...optionsBase,
+				logo: {
+					alt: "My logo",
+					height: 100,
+					src: "img.jpg",
+					width: 128,
+				},
+			},
+		});
+
+		expect(creation).toMatchInlineSnapshot(`
+			{
+			  "files": {
+			    "README.md": "<h1 align="center">Test Title</h1>
+
+			<p align="center">Test description</p>
+
+			<p align="center">
+				<!-- prettier-ignore-start -->
+				<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+			<!-- ALL-CONTRIBUTORS-BADGE:END -->
+				<!-- prettier-ignore-end -->
+				<a href="https://github.com/test-owner/test-repository/blob/main/.github/CODE_OF_CONDUCT.md" target="_blank"><img alt="🤝 Code of Conduct: Kept" src="https://img.shields.io/badge/%F0%9F%A4%9D_code_of_conduct-kept-21bb42" /></a>
+				<a href="https://codecov.io/gh/test-owner/test-repository" target="_blank"><img alt="🧪 Coverage" src="https://img.shields.io/codecov/c/github/test-owner/test-repository?label=%F0%9F%A7%AA%20coverage" /></a>
+				<a href="https://github.com/test-owner/test-repository/blob/main/LICENSE.md" target="_blank"><img alt="📝 License: MIT" src="https://img.shields.io/badge/%F0%9F%93%9D_license-MIT-21bb42.svg"></a>
+				<a href="http://npmjs.com/package/test-repository"><img alt="📦 npm version" src="https://img.shields.io/npm/v/test-repository?color=21bb42&label=%F0%9F%93%A6%20npm" /></a>
+				<img alt="💪 TypeScript: Strict" src="https://img.shields.io/badge/%F0%9F%92%AA_typescript-strict-21bb42.svg" />
+			</p>
+
+			<img align="right" alt="My logo" height="100" src="img.jpg" width="128">
+
+			## Usage
+
+			\`\`\`shell
+			npm i test-repository
+			\`\`\`
+			\`\`\`ts
+			import { greet } from "test-repository";
+
+			greet("Hello, world! 💖");
+			\`\`\`
+
+			## Development
+
+			See [\`.github/CONTRIBUTING.md\`](./.github/CONTRIBUTING.md), then [\`.github/DEVELOPMENT.md\`](./.github/DEVELOPMENT.md).
+			Thanks! 💖
+
+			## Contributors
+
+			<!-- spellchecker: disable -->
+			<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+			<!-- ALL-CONTRIBUTORS-LIST:END -->
+			<!-- spellchecker: enable -->
+			",
+			  },
+			}
+		`);
+	});
+
 	test("without addons", () => {
 		const creation = testBlock(blockREADME, {
 			options: optionsBase,

diff --git a/src/next/blocks/blockREADME.ts b/src/next/blocks/blockREADME.ts
@@ -2,6 +2,12 @@ import { z } from "zod";
 
 import { base } from "../base.js";
 
+function printAttributes(attributes: Record<string, number | string>) {
+	return Object.entries(attributes)
+		.map(([key, value]) => `${key}="${value}"`)
+		.join(" ");
+}
+
 export const blockREADME = base.createBlock({
 	about: {
 		name: "README.md",
@@ -12,6 +18,10 @@ export const blockREADME = base.createBlock({
 	produce({ addons, options }) {
 		const { notices } = addons;
 
+		const logo = options.logo
+			? `<img ${printAttributes({ align: "right", ...options.logo })}>`
+			: "";
+
 		return {
 			files: {
 				"README.md": `<h1 align="center">${options.title}</h1>
@@ -30,7 +40,7 @@ export const blockREADME = base.createBlock({
 	<img alt="💪 TypeScript: Strict" src="https://img.shields.io/badge/%F0%9F%92%AA_typescript-strict-21bb42.svg" />
 </p>
 
-${options.logo ? `<img align="right" alt="${options.logo.alt}" src="${options.logo.src}">` : ""}
+${logo}
 
 ## Usage
 

diff --git a/src/shared/options/args.ts b/src/shared/options/args.ts
@@ -231,6 +231,22 @@ export const allArgOptions = {
 		docsSection: "optional",
 		type: "string",
 	},
+	"logo-height": {
+		description: `If ${chalk.cyanBright(
+			"--logo",
+		)} is provided or detected from an existing README.md, 
+  an explicit height style`,
+		docsSection: "optional",
+		type: "string",
+	},
+	"logo-width": {
+		description: `If ${chalk.cyanBright(
+			"--logo",
+		)} is provided or detected from an existing README.md, 
+  an explicit width style`,
+		docsSection: "optional",
+		type: "string",
+	},
 	mode: {
 		description: `Whether to:
   • create: a new repository in a child directory

diff --git a/src/shared/options/createOptionDefaults/readDefaultsFromReadme.test.ts b/src/shared/options/createOptionDefaults/readDefaultsFromReadme.test.ts
@@ -10,6 +10,14 @@ vi.mock("../../readFileSafe.js", () => ({
 	},
 }));
 
+const mockReadLogoSizing = vi.fn().mockResolvedValue({});
+
+vi.mock("../readLogoSizing.js", () => ({
+	get readLogoSizing() {
+		return mockReadLogoSizing;
+	},
+}));
+
 describe("readDefaultsFromReadme", () => {
 	describe("logo", () => {
 		it("defaults to undefined when it cannot be found", async () => {
@@ -87,6 +95,24 @@ nothing.
 			});
 		});
 
+		it("includes sizing when readLogoSizing returns sizing", async () => {
+			const sizing = { height: 117, width: 128 };
+
+			mockReadFileSafe.mockResolvedValue(`
+<img alt='Project logo: a fancy circle' src='abc/def.jpg'/>,
+`);
+
+			mockReadLogoSizing.mockReturnValueOnce(sizing);
+
+			const logo = await readDefaultsFromReadme().logo();
+
+			expect(logo).toEqual({
+				alt: "Project logo: a fancy circle",
+				src: "abc/def.jpg",
+				...sizing,
+			});
+		});
+
 		it("parses when found after a badge image", async () => {
 			mockReadFileSafe.mockResolvedValue(`
 		<a href="#contributors" target="_blank"><img alt="👪 All Contributors: 48" src="https://img.shields.io/badge/%F0%9F%91%AA_all_contributors-48-21bb42.svg" /></a>

diff --git a/src/shared/options/createOptionDefaults/readDefaultsFromReadme.ts b/src/shared/options/createOptionDefaults/readDefaultsFromReadme.ts
@@ -1,6 +1,7 @@
 import lazyValue from "lazy-value";
 
 import { readFileSafe } from "../../readFileSafe.js";
+import { readLogoSizing } from "../readLogoSizing.js";
 
 export function readDefaultsFromReadme() {
 	const readme = lazyValue(async () => await readFileSafe("README.md", ""));
@@ -28,6 +29,7 @@ export function readDefaultsFromReadme() {
 			return {
 				alt: /alt=['"](.+)['"]\s*src=/.exec(tag)?.[1] ?? "Project logo",
 				src,
+				...readLogoSizing(src),
 			};
 		},
 		title: async () => {

diff --git a/src/shared/options/logInferredOptions.ts b/src/shared/options/logInferredOptions.ts
@@ -23,6 +23,14 @@ export function logInferredOptions(augmentedOptions: InferredOptions) {
 	if (augmentedOptions.logo) {
 		logLine(chalk.gray(`- logo: ${augmentedOptions.logo.src}`));
 		logLine(chalk.gray(`- logo-alt: ${augmentedOptions.logo.alt}`));
+
+		if (augmentedOptions.logo.height) {
+			logLine(chalk.gray(`- logo-height: ${augmentedOptions.logo.height}`));
+		}
+
+		if (augmentedOptions.logo.width) {
+			logLine(chalk.gray(`- logo-width: ${augmentedOptions.logo.width}`));
+		}
 	}
 
 	logLine(chalk.gray(`- owner: ${augmentedOptions.owner}`));