use project title for hero (#1364)

Author: mbostock

docs/getting-started.md

@@ -195,7 +195,7 @@ Now visit <http://127.0.0.1:3000> in your browser, which should look like:
 
 Live preview means that as you save changes, your in-browser preview updates instantly. Live preview applies to Markdown pages, imported JavaScript modules (so-called *hot module replacement*), data loaders, and file attachments. This feature is implemented by the preview server watching files and pushing changes to the browser over a socket.
 
-To experience live preview, open <code>src/index.md</code> in your preferred text editor — below we show Zed — and position your browser window so that you can see your editor and browser side-by-side. If you then replace the text “Hello, Observable Framework” with “Hi, Mom!” and save, you should see:
+To experience live preview, open <code>src/index.md</code> in your preferred text editor — below we show Zed — and position your browser window so that you can see your editor and browser side-by-side. If you then replace the text “Hello Framework” with “Hi, Mom!” and save, you should see:
 
 <figure class="wide">
   <picture>

src/create.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 import {exec} from "node:child_process";
 import {accessSync, existsSync, readdirSync, statSync} from "node:fs";
 import {constants, copyFile, mkdir, readFile, readdir, stat, writeFile} from "node:fs/promises";
@@ -7,6 +8,7 @@ import {setTimeout as sleep} from "node:timers/promises";
 import {fileURLToPath} from "node:url";
 import {promisify} from "node:util";
 import * as clack from "@clack/prompts";
+import he from "he";
 import untildify from "untildify";
 import wrapAnsi from "wrap-ansi";
 import type {ClackEffects} from "./clack.js";
@@ -102,7 +104,7 @@ export async function create(effects: CreateEffects = defaultEffects): Promise<v
             runCommand,
             installCommand,
             rootPath: rootPath!,
-            projectTitle: projectTitle as string,
+            projectTitleHtml: he.escape(projectTitle as string),
             projectTitleString: JSON.stringify(projectTitle as string),
             frameworkVersionString: JSON.stringify(`^${process.env.npm_package_version}`)
           },

templates/default/README.md.tmpl

@@ -1,4 +1,4 @@
-# {{ projectTitle }}
+# {{ projectTitleHtml }}
 
 This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run:
 

templates/default/src/index.md renamed to templates/default/src/index.md.tmpl

@@ -45,7 +45,7 @@ toc: false
 </style>
 
 <div class="hero">
-  <h1>Hello, Observable Framework</h1>
+  <h1>{{ projectTitleHtml }}</h1>
   <h2>Welcome to your new project! Edit&nbsp;<code style="font-size: 90%;">src/index.md</code> to change this page.</h2>
   <a href="https://observablehq.com/framework/getting-started">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
 </div>

templates/empty/README.md.tmpl

@@ -1,4 +1,4 @@
-# {{ projectTitle }}
+# {{ projectTitleHtml }}
 
 This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run:
 

templates/empty/src/index.md.tmpl

@@ -1,4 +1,4 @@
-# {{ projectTitle }}
+# {{ projectTitleHtml }}
 
 This is the home page of your new Observable Framework project.