fix(site): render variable width unicode characters in terminal (#9259)

Previously, characters such as 🟢 were given insufficient space, leading
to mangled output.

site/package.json

@@ -103,6 +103,7 @@
     "xterm": "5.2.1",
     "xterm-addon-canvas": "0.4.0",
     "xterm-addon-fit": "0.7.0",
+    "xterm-addon-unicode11": "0.5.0",
     "xterm-addon-web-links": "0.8.0",
     "yup": "1.2.0"
   },

site/pnpm-lock.yaml

@@ -225,6 +225,9 @@ dependencies:
   xterm-addon-fit:
     specifier: 0.7.0
     version: 0.7.0(xterm@5.2.1)
+  xterm-addon-unicode11:
+    specifier: 0.5.0
+    version: 0.5.0(xterm@5.2.1)
   xterm-addon-web-links:
     specifier: 0.8.0
     version: 0.8.0(xterm@5.2.1)
@@ -14202,6 +14205,14 @@ packages:
       xterm: 5.2.1
     dev: false
 
+  /xterm-addon-unicode11@0.5.0(xterm@5.2.1):
+    resolution: {integrity: sha512-Jm4/g4QiTxiKiTbYICQgC791ubhIZyoIwxAIgOW8z8HWFNY+lwk+dwaKEaEeGBfM48Vk8fklsUW9u/PlenYEBg==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.2.1
+    dev: false
+
   /xterm-addon-web-links@0.8.0(xterm@5.2.1):
     resolution: {integrity: sha512-J4tKngmIu20ytX9SEJjAP3UGksah7iALqBtfTwT9ZnmFHVplCumYQsUJfKuS+JwMhjsjH61YXfndenLNvjRrEw==}
     peerDependencies:

site/src/pages/TerminalPage/TerminalPage.tsx

@@ -10,6 +10,7 @@ import * as XTerm from "xterm"
 import { CanvasAddon } from "xterm-addon-canvas"
 import { FitAddon } from "xterm-addon-fit"
 import { WebLinksAddon } from "xterm-addon-web-links"
+import { Unicode11Addon } from "xterm-addon-unicode11"
 import "xterm/css/xterm.css"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { pageTitle } from "../../utils/page"
@@ -176,6 +177,7 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
       return
     }
     const terminal = new XTerm.Terminal({
+      allowProposedApi: true,
       allowTransparency: true,
       disableStdin: false,
       fontFamily: MONOSPACE_FONT_FAMILY,
@@ -191,6 +193,8 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
     const fitAddon = new FitAddon()
     setFitAddon(fitAddon)
     terminal.loadAddon(fitAddon)
+    terminal.loadAddon(new Unicode11Addon())
+    terminal.unicode.activeVersion = "11"
     terminal.loadAddon(
       new WebLinksAddon((_, uri) => {
         handleWebLink(uri)