Add a warning to logged out users that tours will break.

Makefile.toml

@@ -53,7 +53,10 @@ args = ["web-ext", "build", "--config=build/web-ext-${BROWSER}.json"]
 [tasks.run]
 clear = true
 command = "pnpm"
-args = ["web-ext", "run", "--config=build/web-ext-${BROWSER}.json"]
+# Set --target explicitly, since web-ext for some reason doesn't use the target
+# set in the configuration file. https://github.com/mozilla/web-ext/issues/1862
+env = { TARGET = { source = "${BROWSER}", default_value = "${BROWSER}", mapping = { "firefox" = "firefox-desktop" } } }
+args = ["web-ext", "run", "--target=${TARGET}", "--config=build/web-ext-${BROWSER}.json"]
 
 # Alias for `WATCH=true makers build`.
 [tasks.watch]

source/content-scripts/scss/main.scss

@@ -20,3 +20,9 @@
     width: 1rem;
   }
 }
+
+.tish-warning {
+  border: 1px solid var(--alert-color);
+  color: var(--alert-color);
+  padding: 8px;
+}

source/content-scripts/setup.ts

@@ -17,12 +17,20 @@ async function main(): Promise<void> {
   const prefix = "tildes-shepherd-tour=";
   const startsWithPrefix = anchor.startsWith(prefix);
 
+  // Get the tour ID from the anchor by removing the prefix.
+  const anchorTourId = anchor.slice(prefix.length);
+
   // 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);
+    startTour(
+      "introduction",
+      introductionSteps,
+      [],
+      startsWithPrefix && anchorTourId !== "introduction",
+    );
     return;
   }
 
@@ -30,9 +38,6 @@ async function main(): Promise<void> {
     return;
   }
 
-  // Get the tour ID from the anchor by removing the prefix.
-  const anchorTourId = anchor.slice(prefix.length);
-
   // Then run through all of the tours we have and start the first match for the
   // ID.
   for (const [id, steps, eventHandlers] of tourIdsAndSteps) {

source/scss/components/tours.scss

@@ -3,8 +3,16 @@
 .tours {
   display: grid;
   gap: 16px;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--columns, 3), 1fr);
   margin-top: 16px;
+
+  @media (width <= 1200px) {
+    --columns: 2;
+  }
+
+  @media (width <= 800px) {
+    --columns: 1;
+  }
 }
 
 .tour {
@@ -21,7 +29,7 @@
 
     .tour-description,
     .tour-link {
-      grid-column: 1 / 3;
+      grid-column: span 2;
     }
   }
 

source/tours/interface/homepage.tsx

@@ -6,8 +6,30 @@ import {
   renderInContainer,
 } from "../utilities.js";
 
+const userIsLoggedIn =
+  document.querySelector(".logged-in-user-username") !== null;
+
 const step01 = renderInContainer(
   <>
+    {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>
 
     <p>