TOURS.md

@@ -4,7 +4,7 @@
 
 If you'd like to create a new tour or add/edit any of the existing tours, but don't know how to set up a development environment, please feel free to describe it in whatever way works for you. Show what you think should be highlighted, how it should be explained, etc. in whatever way you want.
 
-Draw it in GIMP, sketch it on paper and take a picture, as long as you can show it to us! Send all your ideas to [@Community](https://tildes.net/user/Community/new_message) and we'll take care of the beeps and boops to get it into the WebExtension. Thank you!
+Draw it in GIMP, sketch it on paper and take a picture, as long as you can show it to us! Send all your ideas to [@Community](https://tildes.net/user/Community) and we'll take care of the beeps and boops to get it into the WebExtension. Thank you!
 
 ## Completion Status
 

source/content-scripts/setup.ts

@@ -8,25 +8,20 @@ import {tourIdsAndSteps} from "../tours/exports.js";
 
 /** The main entry point for the content script. */
 async function main(): Promise<void> {
+  // Automatically start the introduction tour if the person hasn't already been
+  // through it and only when on the Tildes homepage.
   const introductionUnderstood = await createIntroductionUnderstood();
+  if (!introductionUnderstood.value && window.location.pathname === "/") {
+    startTour("introduction", introductionSteps, []);
+    return;
+  }
 
   // Get the anchor without the leading #.
   const anchor = window.location.hash.slice(1);
 
   // We only care about anchors with our prefix.
   const prefix = "tildes-shepherd-tour=";
-  const startsWithPrefix = anchor.startsWith(prefix);
-
-  // Automatically start the introduction tour if the person hasn't already
-  // been through it and only when on the Tildes homepage.
-  if (!introductionUnderstood.value && window.location.pathname === "/") {
-    // If a different tour is selected but the introduction hasn't happened yet,
-    // then the main function will be rerun once this tour finishes.
-    startTour("introduction", introductionSteps, [], startsWithPrefix);
-    return;
-  }
-
-  if (!startsWithPrefix) {
+  if (!anchor.startsWith(prefix)) {
     return;
   }
 
@@ -37,7 +32,7 @@ async function main(): Promise<void> {
   // ID.
   for (const [id, steps, eventHandlers] of tourIdsAndSteps) {
     if (anchorTourId === id) {
-      startTour(id, steps, eventHandlers, false);
+      startTour(id, steps, eventHandlers);
       return;
     }
   }
@@ -55,7 +50,6 @@ function startTour(
   tourId: TourId,
   steps: TourStepOptions[],
   eventHandlers: TourStepEventHandler[],
-  runMainAgainAfterComplete: boolean,
 ): void {
   const tour = new Shepherd.Tour({
     defaultStepOptions: {
@@ -78,7 +72,7 @@ function startTour(
           classes: "btn",
           text: "Exit",
           action() {
-            this.cancel();
+            this.complete();
           },
         },
       ],
@@ -98,10 +92,6 @@ function startTour(
 
     // Mark the tour as completed.
     await addCompletedTour(tourId);
-
-    if (runMainAgainAfterComplete) {
-      await main();
-    }
   });
 
   // For every step we have, add it to the tour and subsequently add all the

source/tours/interface/homepage.tsx

@@ -26,17 +26,17 @@ const step02 = renderInContainer(
     <p>
       On the left there is the Tildes logo and title, which you can click to get
       back to the homepage, or refresh it if you're already there. If you are in
-      a group, the group name will also be shown next to it.
+      a group, the group name will also be shown.
     </p>
 
     <p>
       On the right is the notifications section and your username. When you have
-      unread messages and/or are mentioned, they will show up next to the left
-      of it. If you don't have any notifications right now, you can{" "}
+      unread messages and/or are mentioned, they will show up next to your
+      username. If you don't have any notifications right now, you can{" "}
       <a href="#" onClick={toggleMockNotifications}>
         click here
       </a>{" "}
-      to toggle a preview of what they look like.
+      to show a preview of what they look like.
     </p>
 
     <p>
@@ -59,13 +59,11 @@ function toggleMockNotifications(event: Event): void {
   event.preventDefault();
 
   const root = document.querySelector("#site-header .logged-in-user-info");
-
-  /* Generic function to toggle a mock notification. */
   function toggle(existingSelector: string, href: string, text: string): void {
     const existing =
       root?.querySelector<HTMLElement>(existingSelector) ?? undefined;
     if (existing === undefined) {
-      // If no notification exists, render our mock.
+      // If no notifiaction exists, render our mock.
       const messageNotification = document.createElement("a");
       const count = 1 + Math.ceil(Math.random() * 10);
       messageNotification.classList.add("logged-in-user-alert");
@@ -77,7 +75,7 @@ function toggleMockNotifications(event: Event): void {
       // If a notification exists and it has our mock attribute, remove it.
       existing.remove();
     } else {
-      // A real notification already exists, so we do nothing.
+      // A real message notification already exists, so we do nothing.
     }
   }
 
@@ -95,8 +93,11 @@ const step03 = renderInContainer(
 
     <p>
       Right below the main header are the topic listing options. These determine
-      how the topics in the listing are sorted and from what period topics
-      should be shown.
+      how the topics in the listing are sorted and{" "}
+      <em>
+        <b>from</b> what period
+      </em>{" "}
+      topics should be shown.
     </p>
 
     <p>
@@ -112,20 +113,18 @@ const step03 = renderInContainer(
         <b>Comments</b> sorts them with the most comments first.
       </li>
       <li>
-        And <b>New</b> sorts them by their date, so the newest topics come
-        first.
+        And <b>New</b> sorts them by their date, so newest topics first.
       </li>
     </ul>
 
     <p>
-      Then the first <b>Activity</b> sort will sort topics by bumping topics up
-      as they receive comments, however this sort makes use of comment labels.
+      Then the first <b>Activity</b> will sort topics by bumping topics up as
+      they receive comments, however this sort makes use of comment labels.
     </p>
 
-    {/* TODO: When the comment labels tour is made, change the prose. */}
     <p>
-      If you don't know what comment labels are yet, don't worry, there will be
-      a tour that explains them. But in short they are a community tool to
+      If you don't know what comment labels are yet, don't worry, there is a
+      tour that explains them. But in short they are a community tool to
       emphasize and de-emphasize comments, similar to votes but with more
       specific intention. If you'd like to read more, check out{" "}
       <a
@@ -138,15 +137,15 @@ const step03 = renderInContainer(
     </p>
 
     <p>
-      And finally <b>All activity</b> sorts topics the same as Activity, but
+      And finally the <b>All activity</b> sorts topics the same as Activity, but
       without taking into account any comment labels.
     </p>
 
     <p>
       If you only want to see topics from a certain period, click on the "from"
-      dropdown and select the period you want. Aside from a set of predefined
-      options, you can also set a custom one by clicking the "other period"
-      option, after which you'll be prompted to input it.
+      dropdown and select your period. Aside from a set of predefined options,
+      you can also set a custom one by clicking the "other period" option, after
+      which you'll be prompted for it.
     </p>
   </>,
 );
@@ -161,11 +160,11 @@ const step04 = renderInContainer(
       continues all the way down the page.
     </p>
 
-    <p>Here, we've marked the main elements of a topic:</p>
+    <p>Here, we've marked the main elements of the topic:</p>
 
     <ol>
       <li>
-        The topic title, when the topic is a "text topic" it links to the same
+        The topic title, when the topic is a "text topic" links to the same
         place as the comments link does. Otherwise when it's a "link topic", it
         will link to an external site.
       </li>
@@ -187,8 +186,8 @@ const step04 = renderInContainer(
       <li>
         The topic source. For text topics this is always the poster of the
         topic, but for link topics in certain groups it will be the domain name
-        together with that website's icon. For topics automatically posted by
-        Tildes itself, it will say "Scheduled topic".
+        together with that website's icon. For topics posted automatically by
+        Tildes itself, it will be "Scheduled topic".
       </li>
     </ol>
 
@@ -240,28 +239,27 @@ const step06 = renderInContainer(
     </p>
 
     <p>
-      A quick note for mobile devices, the sidebar is opened via a "Sidebar"
-      button that appears in the very top-right of the page.
+      A quick note for mobile use, the sidebar can opened via a button that
+      appears in the very top-right of the page.
     </p>
 
     <p>
       When searching from the homepage, topics will be included from any group.
       However, searching when inside a group will only include topics from that
-      group and any of its sub-groups.
+      group and any sub-groups.
     </p>
 
-    {/* TODO: Update the prose once the groups tour is created. */}
     <p>
       Below the search bar you will also find the title of the page, or name of
       the group, and a small description. The sidebar has more elements when in
-      you're in a group page, but those will be touched upon in the groups tour.
+      you're in a group page, but those are touched upon in the groups tour.
     </p>
   </>,
 );
 
 const step07 = renderInContainer(
   <>
-    <h1>The Sidebar: Subscriptions</h1>
+    <h1>The Sidebar Subscriptions</h1>
 
     <p>
       Moving on, you'll find the list of groups you are subscribed to and a
@@ -271,15 +269,14 @@ const step07 = renderInContainer(
 
     <p>
       To post a topic, subscribe or unsubscribe from any group, go to the group
-      page in question and in its sidebar there will be buttons to do all those
-      things.
+      in question and in the sidebar there will be buttons to do so.
     </p>
   </>,
 );
 
 const step08 = renderInContainer(
   <>
-    <h1>The Sidebar: User Settings</h1>
+    <h1>The Sidebar User Settings</h1>
 
     <p>
       At the bottom of the sidebar you will find some user settings.
@@ -288,12 +285,9 @@ const step08 = renderInContainer(
     </p>
 
     <p>
-      When you have filtered topics tags set, topics with any of the tags
+      When you have filtered topics tags set, any topics with any of the tags
       present will be removed from your listing. You can read more about it by
-      going to the dedicated page for it by clicking the{" "}
-      <a target="_blank" href="https://tildes.net/settings/filters">
-        "Edit filtered tags"
-      </a>{" "}
+      going to the dedicated page for it by clicking the "Edit filtered tags"
       button.
     </p>
   </>,
@@ -314,11 +308,8 @@ const step09 = renderInContainer(
     <p>
       As for the theme selector, you can change your theme with a number of
       options. When you change it here, it will only change for the current
-      device, if you'd like to set an account default for all devices, head to{" "}
-      <a target="_blank" href="https://tildes.net/settings">
-        your account settings
-      </a>
-      .
+      device, if you'd like to set an account default for all devices, head to
+      your account settings.
     </p>
   </>,
 );
@@ -332,7 +323,7 @@ const step10 = renderInContainer(
     <p>
       As always, if you find any bugs, have feature requests or simply want to
       ask a question. Please send us a message at{" "}
-      <a target="_blank" href="https://tildes.net/user/Community/new_message">
+      <a target="_blank" href="https://tildes.net/user/Community">
         @Community
       </a>
       .

source/tours/introduction.tsx

@@ -2,7 +2,7 @@ import type Shepherd from "shepherd.js";
 import {createIntroductionUnderstood} from "../storage/common.js";
 import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js";
 
-const step01 = renderInContainer(
+const stepOne = renderInContainer(
   <>
     <h1>Thank you for installing Tildes Shepherd!</h1>
 
@@ -28,12 +28,12 @@ const step01 = renderInContainer(
   </>,
 );
 
-const step02 = renderInContainer(
+const stepTwo = renderInContainer(
   <>
     <h1>Tour Mechanics</h1>
 
     <p>
-      During the tours at various points we will want to highlight specific
+      During the tours, at various points we will want to highlight specific
       areas. When that happens you won't be able to click anything inside them,
       mainly to prevent you from accidentally going to a different page and
       interrupting the tour. But also to prevent you from taking actions you
@@ -49,12 +49,12 @@ const step02 = renderInContainer(
   </>,
 );
 
-const step03 = renderInContainer(
+const stepThree = renderInContainer(
   <>
     <p>
       If you find any bugs, have feature requests or simply want to ask a
       question. Please send us a message at{" "}
-      <a target="_blank" href="https://tildes.net/user/Community/new_message">
+      <a target="_blank" href="https://tildes.net/user/Community">
         @Community
       </a>
       .
@@ -74,7 +74,7 @@ const step03 = renderInContainer(
     </p>
 
     <p>
-      Once you click the "I understand" button below, this tour won't pop up
+      Once you click the "I understand" button below, this message won't pop up
       again, so remember the extension icon is how you get to the tours.
     </p>
 
@@ -84,9 +84,8 @@ const step03 = renderInContainer(
 
 export const introductionSteps: Shepherd.Step.StepOptions[] = [
   {
-    canClickTarget: false,
-    id: "introduction-01",
-    text: step01,
+    id: "introduction-1",
+    text: stepOne,
   },
   {
     attachTo: {
@@ -94,8 +93,8 @@ export const introductionSteps: Shepherd.Step.StepOptions[] = [
       on: "bottom",
     },
     canClickTarget: false,
-    id: "introduction-02",
-    text: step02,
+    id: "introduction-2",
+    text: stepTwo,
   },
   {
     buttons: [
@@ -117,8 +116,7 @@ export const introductionSteps: Shepherd.Step.StepOptions[] = [
         },
       },
     ],
-    canClickTarget: false,
-    id: "introduction-03",
-    text: step03,
+    id: "introduction-3",
+    text: stepThree,
   },
 ];