feat: add npm badge to readme (#880)

<!-- 👋 Hi, thanks for sending a PR to create-typescript-app! 💖.
Please fill out all fields below and make sure each item is true and [x]
checked.
Otherwise we may not be able to review your PR. -->

## PR Checklist

- [X] Addresses an existing open issue: fixes #730 
- [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

Added npm version badge to readme file. Also added it to the template
that creates the file: `src/steps/writeReadme/generateTopContent.ts`

---------

Co-authored-by: Josh Goldberg <[email protected]>

Author: jaas666

Diff for: README.md

@@ -24,6 +24,7 @@
     </a>
 	<img alt="Style: Prettier 🧹" src="https://img.shields.io/badge/style-prettier_🧹-21bb42.svg" />
     <img alt="TypeScript: Strict 💪" src="https://img.shields.io/badge/typescript-strict_💪-21bb42.svg" />
+    <img alt="npm package version" src="https://img.shields.io/npm/v/create-typescript-app?color=21bb42" />
 </p>
 
 <img align="right" alt="Project logo: the TypeScript blue square with rounded corners, but a plus sign instead of 'TS'" src="./create-typescript-app.png">

Diff for: src/steps/writeReadme/generateTopContent.test.ts

@@ -65,6 +65,7 @@ describe("findExistingBadges", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 			</p>
 
 			## Usage
@@ -109,6 +110,7 @@ describe("findExistingBadges", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 			</p>
 
 			## Usage
@@ -153,6 +155,7 @@ describe("findExistingBadges", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 				<img alt=\\"Unknown Badge\\" src=\\"unknown.svg\\" />
 			</p>
 
@@ -195,6 +198,7 @@ describe("findExistingBadges", () => {
 					</a>
 					<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 					<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+					<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 				</p>"
 			`);
 	});

Diff for: src/steps/writeReadme/generateTopContent.ts

@@ -67,6 +67,10 @@ export function generateTopContent(options: Options, existingBadges: string[]) {
 			`<img alt="TypeScript: Strict" src="https://img.shields.io/badge/typescript-strict-21bb42.svg" />`,
 			/typescript.*strict/i,
 		],
+		[
+			`<img alt="npm package version" src="https://img.shields.io/npm/v/create-typescript-app?color=21bb42" />`,
+			/npm.*v/i,
+		],
 	] as const) {
 		spliceBadge(badgeLine, existingMatcher);
 	}

Diff for: src/steps/writeReadme/index.test.ts

@@ -95,6 +95,7 @@ describe("writeReadme", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 			</p>
 
 			## Usage
@@ -166,6 +167,7 @@ describe("writeReadme", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 			</p>
 
 			## Usage
@@ -240,6 +242,7 @@ describe("writeReadme", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 			</p>
 
 			## Usage
@@ -357,6 +360,7 @@ describe("writeReadme", () => {
 				</a>
 				<img alt=\\"Style: Prettier\\" src=\\"https://img.shields.io/badge/style-prettier-21bb42.svg\\" />
 				<img alt=\\"TypeScript: Strict\\" src=\\"https://img.shields.io/badge/typescript-strict-21bb42.svg\\" />
+				<img alt=\\"npm package version\\" src=\\"https://img.shields.io/npm/v/create-typescript-app?color=21bb42\\" />
 				<img alt=\\"Contributor Covenant\\" src=\\"https://img.shields.io/badge/code_of_conduct-enforced-21bb42\\" />
 			</p>