UX: Do not use Lorem Ipsum for wizard preview text

Lipsum looks ugly and techy, let's use some actual
category names and topic titles instead.

app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js

@@ -1,5 +1,6 @@
 import { action } from "@ember/object";
-import { drawHeader, LOREM } from "../../../lib/preview";
+import { i18n } from "discourse-i18n";
+import { drawHeader } from "../../../lib/preview";
 import PreviewBaseComponent from "../styling-preview/-preview-base";
 
 export default class LogoSmall extends PreviewBaseComponent {
@@ -34,10 +35,10 @@ export default class LogoSmall extends PreviewBaseComponent {
 
     const image = this.image;
     const headerMargin = headerHeight * 0.2;
-
     const maxWidth = headerHeight - headerMargin * 2.0;
     let imageWidth = image.width;
     let ratio = 1.0;
+
     if (imageWidth > maxWidth) {
       ratio = maxWidth / imageWidth;
       imageWidth = maxWidth;
@@ -52,38 +53,42 @@ export default class LogoSmall extends PreviewBaseComponent {
     );
 
     const afterLogo = headerMargin * 1.7 + imageWidth;
-    const fontSize = Math.round(headerHeight * 0.4);
+    const fontSize = Math.round(headerHeight * 0.3);
 
     ctx.font = `Bold ${fontSize}px '${headingFont}'`;
     ctx.fillStyle = colors.primary;
-    const title = LOREM.substring(0, 27);
+    const title = i18n("wizard.homepage_preview.topic_titles.what_books");
     ctx.fillText(
       title,
-      headerMargin + imageWidth,
+      headerMargin + imageWidth + 10,
-      headerHeight - fontSize * 1.1
+      headerHeight - fontSize * 1.8
     );
 
     const category = this.categories()[0];
     const badgeSize = height / 13.0;
     ctx.beginPath();
     ctx.fillStyle = category.color;
-    ctx.rect(afterLogo, headerHeight * 0.7, badgeSize, badgeSize);
+    ctx.rect(afterLogo + 2, headerHeight * 0.6, badgeSize, badgeSize);
     ctx.fill();
 
     ctx.font = `Bold ${badgeSize * 1.2}px '${font}'`;
     ctx.fillStyle = colors.primary;
     ctx.fillText(
-      category.displayName,
+      category.name,
       afterLogo + badgeSize * 1.5,
-      headerHeight * 0.7 + badgeSize * 0.9
+      headerHeight * 0.6 + badgeSize * 0.9
     );
 
     const LINE_HEIGHT = 12;
     ctx.font = `${LINE_HEIGHT}px '${font}'`;
-    const lines = LOREM.split("\n");
+    const opFirstSentenceLines = i18n(
-    for (let i = 0; i < 10; i++) {
+      "wizard.homepage_preview.topic_ops.what_books"
-      const line = height * 0.55 + i * (LINE_HEIGHT * 1.5);
+    )
-      ctx.fillText(lines[i], afterLogo, line);
+      .split(".")[0]
+      .split("\n");
+    for (let i = 0; i < 2; i++) {
+      const line = height * 0.7 + i * (LINE_HEIGHT * 1.5);
+      ctx.fillText(opFirstSentenceLines[i], afterLogo, line);
     }
   }
 }

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js

@@ -1,4 +1,5 @@
-import { darkLightDiff, LOREM } from "../../../lib/preview";
+import { i18n } from "discourse-i18n";
+import { darkLightDiff } from "../../../lib/preview";
 import PreviewBaseComponent from "./-preview-base";
 
 export default class HomepagePreview extends PreviewBaseComponent {
@@ -85,11 +86,7 @@ export default class HomepagePreview extends PreviewBaseComponent {
       ctx.font = `Bold ${bodyFontSize * 1.3}em '${font}'`;
       ctx.fillStyle = colors.primary;
       ctx.textAlign = "center";
-      ctx.fillText(
+      ctx.fillText(category.name, boxStartX + boxWidth / 2, boxStartY + 25);
-        category.displayName,
-        boxStartX + boxWidth / 2,
-        boxStartY + 25
-      );
       ctx.textAlign = "left";
 
       if (opts.topics) {
@@ -167,16 +164,16 @@ export default class HomepagePreview extends PreviewBaseComponent {
     drawLine(width / 2, y);
 
     // Categories
-    this.categories().forEach((category) => {
+    this.categories().forEach((category, idx) => {
       const textPos = y + categoryHeight * 0.35;
       ctx.font = `Bold ${bodyFontSize * 1.1}em '${font}'`;
       ctx.fillStyle = colors.primary;
-      ctx.fillText(category.displayName, cols[0], textPos);
+      ctx.fillText(category.name, cols[0], textPos);
 
       ctx.font = `${bodyFontSize * 0.8}em '${font}'`;
       ctx.fillStyle = textColor;
       ctx.fillText(
-        titles[0],
+        titles[idx],
         cols[0] - margin * 0.25,
         textPos + categoryHeight * 0.36
       );
@@ -263,16 +260,16 @@ export default class HomepagePreview extends PreviewBaseComponent {
     const titles = this.getTitles();
 
     // Categories
-    this.categories().forEach((category) => {
+    this.categories().forEach((category, idx) => {
       const textPos = y + categoryHeight * 0.35;
       ctx.font = `Bold ${bodyFontSize * 1.1}em '${font}'`;
       ctx.fillStyle = colors.primary;
-      ctx.fillText(category.displayName, cols[0], textPos);
+      ctx.fillText(category.name, cols[0], textPos);
 
       ctx.font = `${bodyFontSize * 0.8}em '${font}'`;
       ctx.fillStyle = textColor;
       ctx.fillText(
-        titles[0],
+        titles[idx],
         cols[0] - margin * 0.25,
         textPos + categoryHeight * 0.36
       );
@@ -332,7 +329,7 @@ export default class HomepagePreview extends PreviewBaseComponent {
 
       ctx.fillStyle = colors.primary;
       ctx.fillText(
-        category.displayName,
+        category.name,
         cols[3] + badgeSize * 3,
         y + topicHeight * 0.76
       );
@@ -347,13 +344,20 @@ export default class HomepagePreview extends PreviewBaseComponent {
   }
 
   getTitles() {
-    return LOREM.split(".")
+    return [
-      .slice(0, 8)
+      i18n("wizard.homepage_preview.topic_titles.what_books"),
-      .map((t) => t.substring(0, 40));
+      i18n("wizard.homepage_preview.topic_titles.what_movies"),
+      i18n("wizard.homepage_preview.topic_titles.random_fact"),
+      i18n("wizard.homepage_preview.topic_titles.tv_show"),
+    ];
   }
 
   getDescriptions() {
-    return LOREM.split(".");
+    return [
+      i18n("wizard.homepage_preview.category_descriptions.icebreakers"),
+      i18n("wizard.homepage_preview.category_descriptions.news"),
+      i18n("wizard.homepage_preview.category_descriptions.site_feedback"),
+    ];
   }
 
   renderLatest(ctx, colors, font, width, height) {

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js

@@ -6,18 +6,9 @@ import { htmlSafe } from "@ember/template";
 import { Promise } from "rsvp";
 import PreloadStore from "discourse/lib/preload-store";
 import getUrl from "discourse-common/lib/get-url";
+import { i18n } from "discourse-i18n";
 import { darkLightDiff, drawHeader } from "../../../lib/preview";
 
-export const LOREM = `
-Lorem ipsum dolor sit amet,
-consectetur adipiscing elit.
-Nullam eget sem non elit
-tincidunt rhoncus. Fusce
-velit nisl, porttitor sed
-nisl ac, consectetur interdum
-metus. Fusce in consequat
-augue, vel facilisis felis.`;
-
 const scaled = {};
 
 function canvasFor(image, w, h) {
@@ -219,9 +210,18 @@ export default class PreviewBase extends Component {
 
   categories() {
     return [
-      { name: "consecteteur", color: "#652D90" },
+      {
-      { name: "ultrices", color: "#3AB54A" },
+        name: i18n("wizard.homepage_preview.category_names.icebreakers"),
-      { name: "placerat", color: "#25AAE2" },
+        color: "#652D90",
+      },
+      {
+        name: i18n("wizard.homepage_preview.category_names.news"),
+        color: "#3AB54A",
+      },
+      {
+        name: i18n("wizard.homepage_preview.category_names.site_feedback"),
+        color: "#25AAE2",
+      },
     ];
   }
 

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js

@@ -6,12 +6,6 @@ import { chooseDarker, darkLightDiff } from "../../../lib/preview";
 import HomepagePreview from "./-homepage-preview";
 import PreviewBaseComponent from "./-preview-base";
 
-const LOREM = `
-Lorem ipsum dolor sit amet, consectetur adipiscing.
-Nullam eget sem non elit tincidunt rhoncus. Fusce
-velit nisl, porttitor sed nisl ac, consectetur interdum
-metus. Fusce in consequat augue, vel facilisis felis.`;
-
 export default class Index extends PreviewBaseComponent {
   width = 628;
   height = 322;
@@ -145,8 +139,10 @@ export default class Index extends PreviewBaseComponent {
     ctx.font = `${bodyFontSize}em '${font}'`;
 
     let line = 0;
-    const lines = LOREM.split("\n");
+    const lines = i18n("wizard.homepage_preview.topic_ops.what_books").split(
-    for (let i = 0; i < 5; i++) {
+      "\n"
+    );
+    for (let i = 0; i < lines.length; i++) {
       line = height * 0.35 + i * lineHeight;
       ctx.fillText(lines[i], margin + avatarSize + margin, line);
     }

app/assets/javascripts/discourse/app/static/wizard/lib/preview.js

@@ -1,15 +1,5 @@
 /*eslint no-bitwise:0 */
 
-export const LOREM = `
-Lorem ipsum dolor sit amet,
-consectetur adipiscing elit.
-Nullam eget sem non elit
-tincidunt rhoncus. Fusce
-velit nisl, porttitor sed
-nisl ac, consectetur interdum
-metus. Fusce in consequat
-augue, vel facilisis felis.`;
-
 export function parseColor(color) {
   const m = color.match(/^#([0-9a-f]{6})$/i);
   if (m) {

app/assets/stylesheets/wizard.scss

@@ -165,6 +165,12 @@ body.wizard {
     }
   }
 
+  &__field.dropdown-field.dropdown-homepage-style {
+    .wizard-container__dropdown {
+      height: auto;
+    }
+  }
+
   &__step-form {
     display: flex;
   }

config/locales/client.en.yml

@@ -7377,8 +7377,29 @@ en:
           regular: "Regular User"
 
       previews:
-        topic_title: "A discussion topic heading"
+        topic_title: "What books are you reading?"
         share_button: "Share"
         reply_button: "Reply"
         topic_preview: "Topic preview"
         homepage_preview: "Homepage preview"
+
+      homepage_preview:
+        topic_titles:
+          what_books: "What books are you reading?"
+          what_movies: "What movies have you seen recently?"
+          random_fact: "Random fact of the day"
+          tv_show: "Recommend a TV show"
+        topic_ops:
+          what_books: |
+            We all love to read, let's use this topic to share our
+            current or recent reads. I'm a fantasy fan and I've been
+            re-reading The Lord of the Rings for the 100th time.
+            What about you?
+        category_descriptions:
+          icebreakers: "Get to know your fellow community members with fun questions."
+          news: "Discuss the latest news and events."
+          site_feedback: "Share your thoughts on the community and suggest improvements."
+        category_names:
+          icebreakers: "Icebreakers"
+          news: "News"
+          site_feedback: "Site Feedback"