tildes-community/tildes-shepherd
tildes-community
/
tildes-shepherd
1
Fork 0
Code

Compare commits

base: tildes-community:76a86eacff072e1da3efcf27b37205ef0cdabe36
Branches Tags
tildes-community:main
tildes-community:0.1.2
tildes-community:0.1.1
tildes-community:0.1.0
..
compare: tildes-community:0f21f29eb925258ef3c59cb5c643de5e0b426a5d
Branches Tags
tildes-community:main
tildes-community:0.1.2
tildes-community:0.1.1
tildes-community:0.1.0

No commits in common. "76a86eacff072e1da3efcf27b37205ef0cdabe36" and "0f21f29eb925258ef3c59cb5c643de5e0b426a5d" have entirely different histories.
76a86eacff ... 0f21f29eb9

4 changed files with 58 additions and 79 deletions
Show Stats Expand all files Collapse all files

2
TOURS.md
View File

@ -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. 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 ## Completion Status

28
source/content-scripts/setup.ts
View File

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

81
source/tours/interface/homepage.tsx
View File

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

26
source/tours/introduction.tsx
View File

@ -2,7 +2,7 @@ import type Shepherd from "shepherd.js";
import {createIntroductionUnderstood} from "../storage/common.js"; import {createIntroductionUnderstood} from "../storage/common.js";
import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js"; import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js";
const step01 = renderInContainer( const stepOne = renderInContainer(
<> <>
<h1>Thank you for installing Tildes Shepherd!</h1> <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> <h1>Tour Mechanics</h1>
<p> <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, 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 mainly to prevent you from accidentally going to a different page and
interrupting the tour. But also to prevent you from taking actions you 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> <p>
If you find any bugs, have feature requests or simply want to ask a If you find any bugs, have feature requests or simply want to ask a
question. Please send us a message at{" "} 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 @Community
</a> </a>
. .
@ -74,7 +74,7 @@ const step03 = renderInContainer(
</p> </p>
<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. again, so remember the extension icon is how you get to the tours.
</p> </p>
@ -84,9 +84,8 @@ const step03 = renderInContainer(
export const introductionSteps: Shepherd.Step.StepOptions[] = [ export const introductionSteps: Shepherd.Step.StepOptions[] = [
{ {
canClickTarget: false, id: "introduction-1",
id: "introduction-01", text: stepOne,
text: step01,
}, },
{ {
attachTo: { attachTo: {
@ -94,8 +93,8 @@ export const introductionSteps: Shepherd.Step.StepOptions[] = [
on: "bottom", on: "bottom",
}, },
canClickTarget: false, canClickTarget: false,
id: "introduction-02", id: "introduction-2",
text: step02, text: stepTwo,
}, },
{ {
buttons: [ buttons: [
@ -117,8 +116,7 @@ export const introductionSteps: Shepherd.Step.StepOptions[] = [
}, },
}, },
], ],
canClickTarget: false, id: "introduction-3",
id: "introduction-03", text: stepThree,
text: step03,
}, },
]; ];