Improve command table wrapping

Author: mrfloris

scripts/generate-site-content.mjs

@@ -107,6 +107,11 @@ function escapeHtml(value) {
     .trim();
 }
 
+function formatCommand(value) {
+  return escapeHtml(value)
+    .replaceAll('|', '|<wbr />');
+}
+
 function uniqueValues(values) {
   const seen = new Set();
   const unique = [];
@@ -807,12 +812,12 @@ function extractCommandData(markdown) {
 function commandTable(commands) {
   const rows = commands
     .map(([command, purpose]) => `    <tr>
-      <td><code>${escapeHtml(command)}</code></td>
+      <td><code>${formatCommand(command)}</code></td>
       <td>${escapeHtml(purpose)}</td>
     </tr>`)
     .join('\n');
 
-  return `<table>
+  return `<table class="command-table">
   <thead>
     <tr>
       <th>Command</th>
@@ -829,13 +834,13 @@ function commandIndexTable(rows, guidePathPrefix = '../plugins/') {
   const htmlRows = rows
     .map((row) => `    <tr>
       <td><a href="${guidePathPrefix}${row.slug}/">${escapeHtml(row.plugin)}</a></td>
-      <td><code>${escapeHtml(row.command)}</code></td>
+      <td><code>${formatCommand(row.command)}</code></td>
       <td>${escapeHtml(friendlyText(row.description))}</td>
-      <td><code>${escapeHtml(row.example)}</code></td>
+      <td><code>${formatCommand(row.example)}</code></td>
     </tr>`)
     .join('\n');
 
-  return `<table>
+  return `<table class="command-table command-index-table">
   <thead>
     <tr>
       <th>Feature</th>
@@ -855,7 +860,7 @@ function commandPreview(details, guideHref) {
   if (!commands.length) {
     return 'No player commands listed yet.';
   }
-  const preview = commands.slice(0, 4).map((command) => `<code>${escapeHtml(command)}</code>`).join(', ');
+  const preview = commands.slice(0, 4).map((command) => `<code>${formatCommand(command)}</code>`).join(', ');
   const hidden = commands.length - 4;
   if (hidden <= 0) {
     return preview;
@@ -908,13 +913,13 @@ ${rows}
 function pluginCommandTable(plugin, commandData) {
   const rows = commandData.playerCommands
     .map((command) => `    <tr>
-      <td><code>${escapeHtml(command)}</code></td>
+      <td><code>${formatCommand(command)}</code></td>
       <td>${escapeHtml(friendlyText(commandData.descriptions.get(command) || commandDescription(command, plugin)))}</td>
-      <td><code>${escapeHtml(commandExample(command))}</code></td>
+      <td><code>${formatCommand(commandExample(command))}</code></td>
     </tr>`)
     .join('\n');
 
-  return `<table>
+  return `<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>

src/content/docs/player-guides/commands.mdx

@@ -25,7 +25,7 @@ These are the current player-facing feature guides generated from the synced pro
       <td><a href="../plugins/recordingmode/">RecordingMode</a></td>
       <td>Player Fun</td>
       <td>Quiet selected personal messages and requests while recording or streaming.</td>
-      <td><code>/recording</code>, <code>/recording status</code>, <code>/recording help</code>, <code>/recording set msg &lt;on|off&gt;</code>, <a href="../plugins/recordingmode/">+7 more</a></td>
+      <td><code>/recording</code>, <code>/recording status</code>, <code>/recording help</code>, <code>/recording set msg &lt;on|<wbr />off&gt;</code>, <a href="../plugins/recordingmode/">+7 more</a></td>
     </tr>
     <tr>
       <td><a href="../plugins/sellstreaks/">SellStreaks</a></td>
@@ -67,7 +67,7 @@ These are the current player-facing feature guides generated from the synced pro
       <td><a href="../plugins/kitstreaks/">KitStreaks</a></td>
       <td>Player Fun</td>
       <td>Track kit claim streaks, milestone calendars, and reward progress.</td>
-      <td><code>/kitstreak info</code>, <code>/kitstreak status [track|kit:&lt;kit&gt;]</code>, <code>/kitstreak tracks [page]</code>, <code>/kitstreak kits [page]</code>, <a href="../plugins/kitstreaks/">+4 more</a></td>
+      <td><code>/kitstreak info</code>, <code>/kitstreak status [track|<wbr />kit:&lt;kit&gt;]</code>, <code>/kitstreak tracks [page]</code>, <code>/kitstreak kits [page]</code>, <a href="../plugins/kitstreaks/">+4 more</a></td>
     </tr>
     <tr>
       <td><a href="../plugins/messagefont/">MessageFont</a></td>
@@ -121,7 +121,7 @@ These are the current player-facing feature guides generated from the synced pro
       <td><a href="../plugins/discordchat/">DiscordChat</a></td>
       <td>Player Fun</td>
       <td>Player guide for DiscordChat, with commands, examples, and basic usage notes.</td>
-      <td><code>/discordchat</code>, <code>/discordchat status</code>, <code>/discordchat top [points|streak|messages|words|emotes]</code>, <code>/discordchat pulse</code>, <a href="../plugins/discordchat/">+9 more</a></td>
+      <td><code>/discordchat</code>, <code>/discordchat status</code>, <code>/discordchat top [points|<wbr />streak|<wbr />messages|<wbr />words|<wbr />emotes]</code>, <code>/discordchat pulse</code>, <a href="../plugins/discordchat/">+9 more</a></td>
     </tr>
     <tr>
       <td><a href="../plugins/gametypes/">GameTypes</a></td>
@@ -133,7 +133,7 @@ These are the current player-facing feature guides generated from the synced pro
       <td><a href="../plugins/birthdaylanterns/">BirthdayLanterns</a></td>
       <td>Player Fun</td>
       <td>Player guide for BirthdayLanterns, with commands, examples, and basic usage notes.</td>
-      <td><code>/birthday</code>, <code>/birthday status</code>, <code>/birthday set &lt;month day|MM-DD|YYYY-MM-DD&gt;</code>, <code>/birthday visibility &lt;private|public&gt;</code>, <a href="../plugins/birthdaylanterns/">+9 more</a></td>
+      <td><code>/birthday</code>, <code>/birthday status</code>, <code>/birthday set &lt;month day|<wbr />MM-DD|<wbr />YYYY-MM-DD&gt;</code>, <code>/birthday visibility &lt;private|<wbr />public&gt;</code>, <a href="../plugins/birthdaylanterns/">+9 more</a></td>
     </tr>
     <tr>
       <td><a href="../plugins/mobhat/">MobHat</a></td>
@@ -145,7 +145,7 @@ These are the current player-facing feature guides generated from the synced pro
       <td><a href="../plugins/todo/">PlayerTodo</a></td>
       <td>Player Fun</td>
       <td>Small per-player todo lists stored in shared playerdata so players do not have to mail notes to themselves.</td>
-      <td><code>/todo</code>, <code>/todo &lt;text&gt;</code>, <code>/todo add &lt;text&gt;</code>, <code>/todo list [open|all|completed] [page] [asc|desc]</code>, <a href="../plugins/todo/">+14 more</a></td>
+      <td><code>/todo</code>, <code>/todo &lt;text&gt;</code>, <code>/todo add &lt;text&gt;</code>, <code>/todo list [open|<wbr />all|<wbr />completed] [page] [asc|<wbr />desc]</code>, <a href="../plugins/todo/">+14 more</a></td>
     </tr>
     <tr>
       <td><a href="../plugins/refer/">Refer</a></td>

src/content/docs/player-guides/features.mdx

@@ -27,7 +27,7 @@ Start in-game with /afkshrine. The sections below explain what AFKShrine is for,
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>
@@ -82,7 +82,7 @@ Start in-game with /afkshrine. The sections below explain what AFKShrine is for,
       <td><code>/afkshrine quests</code></td>
     </tr>
     <tr>
-      <td><code>/afkshrine top [daily|weekly|monthly|lifetime]</code></td>
+      <td><code>/afkshrine top [daily|<wbr />weekly|<wbr />monthly|<wbr />lifetime]</code></td>
       <td>Shows the AFKShrine leaderboard or top list.</td>
       <td><code>/afkshrine top</code></td>
     </tr>

src/content/docs/player-guides/plugins/afkshrine.mdx

@@ -30,7 +30,7 @@ Lantern items are marked with server item data. A normal right-click opens the B
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>
@@ -50,27 +50,27 @@ Lantern items are marked with server item data. A normal right-click opens the B
       <td><code>/birthday status</code></td>
     </tr>
     <tr>
-      <td><code>/birthday set &lt;month day|MM-DD|YYYY-MM-DD&gt;</code></td>
+      <td><code>/birthday set &lt;month day|<wbr />MM-DD|<wbr />YYYY-MM-DD&gt;</code></td>
       <td>Sets one of your BirthdayLanterns preferences.</td>
       <td><code>/birthday set 03-07</code></td>
     </tr>
     <tr>
-      <td><code>/birthday visibility &lt;private|public&gt;</code></td>
+      <td><code>/birthday visibility &lt;private|<wbr />public&gt;</code></td>
       <td>Changes whether this information is private or public.</td>
       <td><code>/birthday visibility public</code></td>
     </tr>
     <tr>
-      <td><code>/birthday effects &lt;on|off&gt;</code></td>
+      <td><code>/birthday effects &lt;on|<wbr />off&gt;</code></td>
       <td>Turns cosmetic effects on or off.</td>
       <td><code>/birthday effects on</code></td>
     </tr>
     <tr>
-      <td><code>/birthday greetings &lt;on|off|send&gt;</code></td>
+      <td><code>/birthday greetings &lt;on|<wbr />off|<wbr />send&gt;</code></td>
       <td>Changes or sends your celebration greetings.</td>
       <td><code>/birthday greetings on</code></td>
     </tr>
     <tr>
-      <td><code>/birthday presets &lt;particle|sound&gt; &lt;preset|default&gt;</code></td>
+      <td><code>/birthday presets &lt;particle|<wbr />sound&gt; &lt;preset|<wbr />default&gt;</code></td>
       <td>Changes your particle or sound preset.</td>
       <td><code>/birthday presets particle sparkle</code></td>
     </tr>
@@ -85,7 +85,7 @@ Lantern items are marked with server item data. A normal right-click opens the B
       <td><code>/birthday mail birthday-1</code></td>
     </tr>
     <tr>
-      <td><code>/birthday guestbook [year|page]</code></td>
+      <td><code>/birthday guestbook [year|<wbr />page]</code></td>
       <td>Views or adds a friendly guestbook message.</td>
       <td><code>/birthday guestbook</code></td>
     </tr>

src/content/docs/player-guides/plugins/birthdaylanterns.mdx

@@ -28,7 +28,7 @@ Start in-game with /rate. The sections below explain what Boosters is for, which
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>

src/content/docs/player-guides/plugins/boosters.mdx

@@ -27,7 +27,7 @@ Start in-game with /discordchat. The sections below explain what DiscordChat is
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>
@@ -47,7 +47,7 @@ Start in-game with /discordchat. The sections below explain what DiscordChat is
       <td><code>/discordchat status</code></td>
     </tr>
     <tr>
-      <td><code>/discordchat top [points|streak|messages|words|emotes]</code></td>
+      <td><code>/discordchat top [points|<wbr />streak|<wbr />messages|<wbr />words|<wbr />emotes]</code></td>
       <td>Shows the top 10 DiscordChat profiles for a public metric.</td>
       <td><code>/discordchat top</code></td>
     </tr>
@@ -92,12 +92,12 @@ Start in-game with /discordchat. The sections below explain what DiscordChat is
       <td><code>/discordchat celebrations</code></td>
     </tr>
     <tr>
-      <td><code>/discordchat prefix &lt;preset|off&gt;</code></td>
+      <td><code>/discordchat prefix &lt;preset|<wbr />off&gt;</code></td>
       <td>Selects an unlocked DiscordChat prefix placeholder preset.</td>
       <td><code>/discordchat prefix sparkle</code></td>
     </tr>
     <tr>
-      <td><code>/discordchat suffix &lt;preset|off&gt;</code></td>
+      <td><code>/discordchat suffix &lt;preset|<wbr />off&gt;</code></td>
       <td>Selects an unlocked DiscordChat suffix placeholder preset.</td>
       <td><code>/discordchat suffix sparkle</code></td>
     </tr>

src/content/docs/player-guides/plugins/discordchat.mdx

@@ -33,7 +33,7 @@ Start in-game with /emotes. The sections below explain what Emotes is for, which
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>

src/content/docs/player-guides/plugins/emotemenu.mdx

@@ -27,7 +27,7 @@ Start in-game with /gametype. The sections below explain what GameTypes is for,
 
 ## Commands
 
-<table>
+<table class="command-table plugin-command-table">
   <thead>
     <tr>
       <th>Command</th>

src/content/docs/player-guides/plugins/gametypes.mdx

@@ -25,7 +25,7 @@ Each page introduces a feature in normal player language, then shows useful comm
       <td><a href="./recordingmode/">RecordingMode</a></td>
       <td>Player Fun</td>
       <td>Quiet selected personal messages and requests while recording or streaming.</td>
-      <td><code>/recording</code>, <code>/recording status</code>, <code>/recording help</code>, <code>/recording set msg &lt;on|off&gt;</code>, <a href="./recordingmode/">+7 more</a></td>
+      <td><code>/recording</code>, <code>/recording status</code>, <code>/recording help</code>, <code>/recording set msg &lt;on|<wbr />off&gt;</code>, <a href="./recordingmode/">+7 more</a></td>
     </tr>
     <tr>
       <td><a href="./sellstreaks/">SellStreaks</a></td>
@@ -67,7 +67,7 @@ Each page introduces a feature in normal player language, then shows useful comm
       <td><a href="./kitstreaks/">KitStreaks</a></td>
       <td>Player Fun</td>
       <td>Track kit claim streaks, milestone calendars, and reward progress.</td>
-      <td><code>/kitstreak info</code>, <code>/kitstreak status [track|kit:&lt;kit&gt;]</code>, <code>/kitstreak tracks [page]</code>, <code>/kitstreak kits [page]</code>, <a href="./kitstreaks/">+4 more</a></td>
+      <td><code>/kitstreak info</code>, <code>/kitstreak status [track|<wbr />kit:&lt;kit&gt;]</code>, <code>/kitstreak tracks [page]</code>, <code>/kitstreak kits [page]</code>, <a href="./kitstreaks/">+4 more</a></td>
     </tr>
     <tr>
       <td><a href="./messagefont/">MessageFont</a></td>
@@ -121,7 +121,7 @@ Each page introduces a feature in normal player language, then shows useful comm
       <td><a href="./discordchat/">DiscordChat</a></td>
       <td>Player Fun</td>
       <td>Player guide for DiscordChat, with commands, examples, and basic usage notes.</td>
-      <td><code>/discordchat</code>, <code>/discordchat status</code>, <code>/discordchat top [points|streak|messages|words|emotes]</code>, <code>/discordchat pulse</code>, <a href="./discordchat/">+9 more</a></td>
+      <td><code>/discordchat</code>, <code>/discordchat status</code>, <code>/discordchat top [points|<wbr />streak|<wbr />messages|<wbr />words|<wbr />emotes]</code>, <code>/discordchat pulse</code>, <a href="./discordchat/">+9 more</a></td>
     </tr>
     <tr>
       <td><a href="./gametypes/">GameTypes</a></td>
@@ -133,7 +133,7 @@ Each page introduces a feature in normal player language, then shows useful comm
       <td><a href="./birthdaylanterns/">BirthdayLanterns</a></td>
       <td>Player Fun</td>
       <td>Player guide for BirthdayLanterns, with commands, examples, and basic usage notes.</td>
-      <td><code>/birthday</code>, <code>/birthday status</code>, <code>/birthday set &lt;month day|MM-DD|YYYY-MM-DD&gt;</code>, <code>/birthday visibility &lt;private|public&gt;</code>, <a href="./birthdaylanterns/">+9 more</a></td>
+      <td><code>/birthday</code>, <code>/birthday status</code>, <code>/birthday set &lt;month day|<wbr />MM-DD|<wbr />YYYY-MM-DD&gt;</code>, <code>/birthday visibility &lt;private|<wbr />public&gt;</code>, <a href="./birthdaylanterns/">+9 more</a></td>
     </tr>
     <tr>
       <td><a href="./mobhat/">MobHat</a></td>
@@ -145,7 +145,7 @@ Each page introduces a feature in normal player language, then shows useful comm
       <td><a href="./todo/">PlayerTodo</a></td>
       <td>Player Fun</td>
       <td>Small per-player todo lists stored in shared playerdata so players do not have to mail notes to themselves.</td>
-      <td><code>/todo</code>, <code>/todo &lt;text&gt;</code>, <code>/todo add &lt;text&gt;</code>, <code>/todo list [open|all|completed] [page] [asc|desc]</code>, <a href="./todo/">+14 more</a></td>
+      <td><code>/todo</code>, <code>/todo &lt;text&gt;</code>, <code>/todo add &lt;text&gt;</code>, <code>/todo list [open|<wbr />all|<wbr />completed] [page] [asc|<wbr />desc]</code>, <a href="./todo/">+14 more</a></td>
     </tr>
     <tr>
       <td><a href="./refer/">Refer</a></td>