allow markup in instructions

src/open/ClientView.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../utils/TemplateView.js";
 import {copy} from "../utils/copy.js";
-import {text} from "../utils/html.js";
+import {text, tag} from "../utils/html.js";
 
 function formatPlatforms(platforms) {
 	return platforms.reduce((str, p, i, all) => {
@@ -26,6 +26,16 @@ function formatPlatforms(platforms) {
 	}, "");
 }
 
+function renderInstructions(parts) {
+    return parts.map(p => {
+        if (p.type === "code") {
+            return tag.code(p.text);
+        } else {
+            return text(p);
+        }
+    });
+}
+
 export class ClientView extends TemplateView {
 
 	render(t, vm) {
@@ -66,7 +76,8 @@ class InstallClientView extends TemplateView {
 	render(t, vm) {
 		const children = [];
 
-		if (vm.textInstructions) {
+        const textInstructions = vm.textInstructions;
+		if (textInstructions) {
             const copyButton = t.button({
                 className: "copy",
                 onClick: evt => {
@@ -78,7 +89,7 @@ class InstallClientView extends TemplateView {
                     }
                 }
             });
-			children.push(t.p({className: "instructions"}, [t.code(vm.textInstructions), copyButton]));
+			children.push(t.p({className: "instructions"}, renderInstructions(textInstructions).concat(copyButton)));
 		}
 
 		const actions = t.div({className: "actions"}, vm.actions.map(a => {

src/open/ClientViewModel.js

@@ -110,7 +110,11 @@ export class ClientViewModel extends ViewModel {
 	}
 
 	get textInstructions() {
-		return this._client.getLinkInstructions(this._proposedPlatform, this._link);
+        let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
+        if (!Array.isArray(instructions)) {
+            instructions = [instructions];
+        }
+		return instructions;
 	}
 
     get copyString() {

src/open/clients/Nheko.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Maturity, Platform, LinkKind, FlathubLink} from "../types.js";
+import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js";
 
 /**
  * Information on how to deep link to a given matrix client.
@@ -33,8 +33,8 @@ export class Nheko {
 
 	getLinkInstructions(platform, link) {
 		switch (link.kind) {
-			case LinkKind.User: return `Type /invite ${link.identifier}`;
-			case LinkKind.Room: return `Type /join ${link.identifier}`;
+			case LinkKind.User: return [`Type `, style.code(`/invite ${link.identifier}`)];
+			case LinkKind.Room: return [`Type `, style.code(`/join ${link.identifier}`)];
 		}
 	}
 

src/open/types.js

@@ -109,3 +109,9 @@ export class WebsiteLink {
         return `Download from ${new URL(this._url).hostname}`;
     }
 }
+
+export const style = {
+    code(text) {
+        return {type: "code", text};
+    }
+}