source/content-scripts/setup.ts

@@ -4,7 +4,7 @@ import {
   createIntroductionUnderstood,
 } from "../storage/common.js";
 import {introductionSteps} from "../tours/introduction.js";
-import {TourId, tourIdsAndSteps} from "../tours/exports.js";
+import {tourIdsAndSteps} from "../tours/exports.js";
 
 /** The main entry point for the content script. */
 async function main(): Promise<void> {
@@ -26,7 +26,7 @@ async function main(): Promise<void> {
     // 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(
-      TourId.Introduction,
+      "introduction",
       introductionSteps,
       [],
       startsWithPrefix && anchorTourId !== "introduction",

source/options/components/tour.tsx

@@ -1,5 +1,4 @@
 import {Component, type JSX} from "preact";
-import {TourId} from "../../tours/exports.js";
 
 type Props = {
   hasBeenCompleted: boolean;
@@ -8,7 +7,7 @@ type Props = {
 };
 
 function tourDescription(tourId: Props["tourId"]): JSX.Element {
-  if (tourId === TourId.Introduction) {
+  if (tourId === "introduction") {
     return (
       <p class="tour-description">
         A short introduction to Tildes Shepherd and how the tours work. Normally
@@ -17,7 +16,7 @@ function tourDescription(tourId: Props["tourId"]): JSX.Element {
     );
   }
 
-  if (tourId === TourId.InterfaceHomepage) {
+  if (tourId === "interface-homepage") {
     return (
       <p class="tour-description">
         Let's take a look at the home page and all we can do there.
@@ -39,8 +38,8 @@ function tourLink(tourId: Props["tourId"]): string {
   let path = "";
 
   switch (tourId) {
-    case TourId.InterfaceHomepage:
+    case "interface-homepage":
-    case TourId.Introduction: {
+    case "introduction": {
       path = "/";
       break;
     }

source/options/components/tours.tsx

@@ -1,6 +1,5 @@
 import {Component, type JSX} from "preact";
 import {createToursCompleted} from "../../storage/common.js";
-import {TourId} from "../../tours/exports.js";
 import {Tour} from "./tour.js";
 
 type Props = Record<string, unknown>;
@@ -35,8 +34,8 @@ export class Tours extends Component<Props, State> {
     };
 
     const tourProps: Array<Tour["props"]> = [
-      createTour(TourId.Introduction, "Introduction"),
+      createTour("introduction", "Introduction"),
-      createTour(TourId.InterfaceHomepage, "The Homepage"),
+      createTour("interface-homepage", "The Homepage"),
     ];
 
     return (

source/storage/common.ts

@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 import {createValue} from "@holllo/webextension-storage";
-import {type TourId} from "../tours/exports.js";
 
 export enum StorageKey {
   IntroductionUnderstood = "introduction-understood",

source/tours/exports.ts

@@ -1,14 +1,11 @@
-import {homepageEventHandlers, homepageSteps} from "./interface/exports.js";
+import {homepageSteps, homepageEventHandlers} from "./interface/exports.js";
 import {introductionSteps} from "./introduction.js";
 
-export enum TourId {
+export const tourIds = ["introduction", "interface-homepage"] as const;
-  InterfaceHomepage = "interface-homepage",
-  Introduction = "introduction",
-}
 
 export const tourIdsAndSteps: Array<
   [TourId, TourStepOptions[], TourStepEventHandler[]]
 > = [
-  [TourId.Introduction, introductionSteps, []],
+  ["introduction", introductionSteps, []],
-  [TourId.InterfaceHomepage, homepageSteps, homepageEventHandlers],
+  ["interface-homepage", homepageSteps, homepageEventHandlers],
 ];

source/tours/interface/homepage.tsx

@@ -5,11 +5,30 @@ import {
   removeAllDatasetCounters,
   renderInContainer,
 } from "../utilities.js";
-import {LoggedOutWarning} from "../shared/logged-out-warning.js";
+
+const userIsLoggedIn =
+  document.querySelector(".logged-in-user-username") !== null;
 
 const step01 = renderInContainer(
   <>
-    <LoggedOutWarning />
+    {userIsLoggedIn ? (
+      ""
+    ) : (
+      <p class="tish-warning">
+        It looks like you aren't logged in to Tildes. Tildes Shepherd assumes
+        that you are logged in as a lot of the Tildes interface isn't shown to
+        logged out users.
+        <br />
+        To still let anyone without an account benefit from the extension you
+        may continue, however, know that certain parts of the tour <b>
+          will
+        </b>{" "}
+        break and look weird.
+        <br />
+        It's highly recommended that you exit the tour, log in and start it
+        again.
+      </p>
+    )}
 
     <h1>The Homepage</h1>
 

source/tours/shared/exports.ts

@@ -1 +0,0 @@
-export * from "./logged-out-warning.js";

source/tours/shared/logged-out-warning.tsx

@@ -1,24 +0,0 @@
-import {type JSX} from "preact";
-
-export function LoggedOutWarning(): JSX.Element {
-  const userIsLoggedIn =
-    document.querySelector(".logged-in-user-username") !== null;
-
-  if (userIsLoggedIn) {
-    return <></>;
-  }
-
-  return (
-    <p class="tish-warning">
-      It looks like you aren't logged in to Tildes. Tildes Shepherd assumes that
-      you are logged in as a lot of the Tildes interface isn't shown to logged
-      out users.
-      <br />
-      To still let anyone without an account benefit from the extension you may
-      continue, however, know that certain parts of the tour <b>will</b> break
-      and look weird.
-      <br />
-      It's highly recommended that you exit the tour, log in and start it again.
-    </p>
-  );
-}

source/types.d.ts

@@ -1,10 +1,12 @@
 import type Shepherd from "shepherd.js";
+import type {tourIds} from "./tours/exports.js";
 
 declare global {
   const $browser: "chromium" | "firefox";
   const $dev: boolean;
   const $test: boolean;
 
+  type TourId = (typeof tourIds)[number];
   type TourStepEvent = "show" | "destroy";
   type TourStepEventFunction = Parameters<Shepherd.Step["on"]>[1];
   type TourStepEventHandler = [string, [TourStepEvent, TourStepEventFunction]];