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

Render the steps before the tour starts. 

By defining the steps as consts in the top level they were
being initialized immediately as the page loads. By having
them initialized in a function it will correctly have access
to everything on the page and not render steps of tours
we aren't going to start.
This commit is contained in:
Bauke 2023-07-03 14:11:46 +02:00
parent e4dbe14e59
commit 548984a6df
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
5 changed files with 529 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,7 +131,7 @@ function startTour(data: TourData, runMainAgainAfterComplete: boolean): void {
// 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
// event handlers to that step. // event handlers to that step.
for (const [stepNumber, stepOptions] of data.steps.entries()) { for (const [stepNumber, stepOptions] of data.steps().entries()) {
// If the final step doesn't have buttons defined, set the "Continue" button // If the final step doesn't have buttons defined, set the "Continue" button
// text to "Finish". // text to "Finish".
if ( if (

26
source/tours/interface/account-settings.tsx
View File

@ -1,18 +1,22 @@
import {type TourData, TourId} from "../types.js"; import {type TourData, TourId} from "../types.js";
import {renderInContainer} from "../utilities.js"; import {renderInContainer} from "../utilities.js";
const step01 = renderInContainer( function renderSteps(): ReturnType<TourData["steps"]> {
<> const step01 = renderInContainer(
<h1>Your Account Settings</h1> <>
</>, <h1>Your Account Settings</h1>
); </>,
);
const steps: TourData["steps"] = [ return [
{ {
id: "account-settings-01", id: "account-settings-01",
text: step01, text: step01,
}, },
]; ];
}
const steps: TourData["steps"] = renderSteps;
const eventHandlers: TourData["eventHandlers"] = []; const eventHandlers: TourData["eventHandlers"] = [];

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

@ -7,431 +7,442 @@ import {
renderInContainer, renderInContainer,
} from "../utilities.js"; } from "../utilities.js";
const step01 = renderInContainer( function renderSteps(): ReturnType<TourData["steps"]> {
<> const step01 = renderInContainer(
<LoggedOutWarning /> <>
<LoggedOutWarning />
<h1>The Homepage</h1> <h1>The Homepage</h1>
<p> <p>
If you plan on staying a while, this is likely the place you'll see the If you plan on staying a while, this is likely the place you'll see the
most. So let's work our way top to bottom, left to right. most. So let's work our way top to bottom, left to right.
</p> </p>
<p>Starting with...</p> <p>Starting with...</p>
</>, </>,
);
const step02 = renderInContainer(
<>
<h1>The Main Header</h1>
<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.
</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{" "}
<a href="#" onClick={toggleMockNotifications}>
click here
</a>{" "}
to toggle a preview of what they look like.
</p>
<p>
At the moment mentions only work in comments, so if you get mentioned in a
topic's text body and don't get a notification,{" "}
<a target="_blank" href="https://gitlab.com/tildes/tildes/-/issues/195">
that's why
</a>
.
</p>
</>,
);
// Toggle mock notifications, based on the code in the following link.
// If the logic for this needs to be updated, also update the permalink to the
// actual Tildes HTML code.
// https://gitlab.com/tildes/tildes/-/blob/0dbb031562cd9297968fec0049af4b833ef77301/tildes/tildes/templates/macros/user.jinja2#L9-20
function toggleMockNotifications(event: Event): void {
// Prevent the click from going through so the anchor isn't removed.
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.
const messageNotification = document.createElement("a");
const count = 1 + Math.ceil(Math.random() * 10);
messageNotification.classList.add("logged-in-user-alert");
messageNotification.dataset.tildesShepherdMock = "true";
messageNotification.href = href;
messageNotification.textContent = `${count} ${text}`;
root?.insertAdjacentElement("beforeend", messageNotification);
} else if (existing.dataset.tildesShepherdMock === "true") {
// If a notification exists and it has our mock attribute, remove it.
existing.remove();
} else {
// A real notification already exists, so we do nothing.
}
}
toggle('[href="/messages/unread"]', "/messages/unread", "new messages");
toggle(
'[href="/notifications/unread"]',
"/notifications/unread",
"new comments",
); );
}
const step03 = renderInContainer( const step02 = renderInContainer(
<> <>
<h1>The Listing Options</h1> <h1>The Main Header</h1>
<p> <p>
Right below the main header are the topic listing options. These determine On the left there is the Tildes logo and title, which you can click to
how the topics in the listing are sorted and from what period topics get back to the homepage, or refresh it if you're already there. If you
should be shown. are in a group, the group name will also be shown next to it.
</p> </p>
<p> <p>
The non-activity sorts are the easiest to explain, so let's start with On the right is the notifications section and your username. When you
them: have unread messages and/or are mentioned, they will show up next to the
</p> left of it. 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.
</p>
<ul> <p>
<li> At the moment mentions only work in comments, so if you get mentioned in
<b>Votes</b> sorts topics with the most votes first. a topic's text body and don't get a notification,{" "}
</li> <a target="_blank" href="https://gitlab.com/tildes/tildes/-/issues/195">
<li> that's why
<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.
</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.
</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
emphasize and de-emphasize comments, similar to votes but with more
specific intention. If you'd like to read more, check out{" "}
<a
target="_blank"
href="https://docs.tildes.net/instructions/commenting-on-tildes#labelling-comments"
>
the documentation
</a>
.
</p>
<p>
And finally <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.
</p>
</>,
);
const step04 = renderInContainer(
<>
<h1>The Topic Listing</h1>
<p>
Next up, just below the listing options is the topic listing itself. We've
only highlighted the first topic here, but you can probably see it
continues all the way down the page.
</p>
<p>Here, we've marked the main elements of a topic:</p>
<ol>
<li>
The topic title, when the topic is a "text topic" it 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>
<li>
The topic metadata, which by default includes the group it's in. If a
topic has specific notable tags and you have the "show tags" setting
enabled in your user settings, they will be shown after the group name.
A "topic type" may also be shown to indicate whether the topic is a text
topic, a video, an "ask" topic for recommendations or a survey, etc.
</li>
<li>
The amount of comments the topic has received. If any new comments have
been posted since you last viewed the topic, in orange a "(X new)" will
be added.
</li>
<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".
</li>
</ol>
<p>The list continues on the next page.</p>
</>,
);
const step05 = renderInContainer(
<>
<h1>The Topic Listing continued</h1>
<ol start={5}>
<li>
The date when the topic was posted. For dates that are pretty recent it
will show something like "X days ago" while for longer dates it will be
the exact date, like "April 26th, 2021".
</li>
<li>
The voting button, clicking it will add your vote to the topic. On
Tildes, once the topic is older than 30 days you can no longer vote on
it and the individual voting data for is removed, with only the total
count kept. You can read more about it in{" "}
<a target="_blank" href="https://tild.es/jhm">
this announcement topic
</a> </a>
. .
</li> </p>
</>,
);
<li> // Toggle mock notifications, based on the code in the following link.
And finally the topic actions. Clicking on the "Actions" button will // If the logic for this needs to be updated, also update the permalink to the
show a dropdown including "Bookmark", "Ignore this topic" and if you // actual Tildes HTML code.
have been granted the permission for it, "Edit title". Ignoring the // https://gitlab.com/tildes/tildes/-/blob/0dbb031562cd9297968fec0049af4b833ef77301/tildes/tildes/templates/macros/user.jinja2#L9-20
topic will remove it from the topic listing and prevent any future function toggleMockNotifications(event: Event): void {
notifications from happening. Both your bookmarked and ignored topics // Prevent the click from going through so the anchor isn't removed.
can be found in their respective sections on your profile. event.preventDefault();
</li>
</ol>
</>,
);
const step06 = renderInContainer( const root = document.querySelector("#site-header .logged-in-user-info");
<>
<h1>The Sidebar</h1>
<p> /* Generic function to toggle a mock notification. */
Let's take a look at the sidebar, where the first thing we're greeted with function toggle(
is the search bar. existingSelector: string,
</p> href: string,
text: string,
): void {
const existing =
root?.querySelector<HTMLElement>(existingSelector) ?? undefined;
if (existing === undefined) {
// If no notification exists, render our mock.
const messageNotification = document.createElement("a");
const count = 1 + Math.ceil(Math.random() * 10);
messageNotification.classList.add("logged-in-user-alert");
messageNotification.dataset.tildesShepherdMock = "true";
messageNotification.href = href;
messageNotification.textContent = `${count} ${text}`;
root?.insertAdjacentElement("beforeend", messageNotification);
} else if (existing.dataset.tildesShepherdMock === "true") {
// If a notification exists and it has our mock attribute, remove it.
existing.remove();
} else {
// A real notification already exists, so we do nothing.
}
}
<p> toggle('[href="/messages/unread"]', "/messages/unread", "new messages");
A quick note for mobile devices, the sidebar is opened via a "Sidebar" toggle(
button that appears in the very top-right of the page. '[href="/notifications/unread"]',
</p> "/notifications/unread",
"new comments",
);
}
<p> const step03 = renderInContainer(
When searching from the homepage, topics will be included from any group. <>
However, searching when inside a group will only include topics from that <h1>The Listing Options</h1>
group and any of its sub-groups.
</p>
{/* TODO: Update the prose once the groups tour is created. */} <p>
<p> Right below the main header are the topic listing options. These
Below the search bar you will also find the title of the page, or name of determine how the topics in the listing are sorted and from what period
the group, and a small description. The sidebar has more elements when in topics should be shown.
you're in a group page, but those will be touched upon in the groups tour. </p>
</p>
</>,
);
const step07 = renderInContainer( <p>
<> The non-activity sorts are the easiest to explain, so let's start with
<h1>The Sidebar: Subscriptions</h1> them:
</p>
<p> <ul>
Moving on, you'll find the list of groups you are subscribed to and a <li>
button below it to go to the groups listing, where you can find all the <b>Votes</b> sorts topics with the most votes first.
that are available. </li>
</p> <li>
<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.
</li>
</ul>
<p> <p>
To post a topic, subscribe or unsubscribe from any group, go to the group Then the first <b>Activity</b> sort will sort topics by bumping topics
page in question and in its sidebar there will be buttons to do all those up as they receive comments, however this sort makes use of comment
things. labels.
</p> </p>
</>,
);
const step08 = renderInContainer( {/* TODO: When the comment labels tour is made, change the prose. */}
<> <p>
<h1>The Sidebar: User Settings</h1> 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
emphasize and de-emphasize comments, similar to votes but with more
specific intention. If you'd like to read more, check out{" "}
<a
target="_blank"
href="https://docs.tildes.net/instructions/commenting-on-tildes#labelling-comments"
>
the documentation
</a>
.
</p>
<p> <p>
At the bottom of the sidebar you will find some user settings. And finally <b>All activity</b> sorts topics the same as Activity, but
Specifically the filtered topics tags you have set and a link to the without taking into account any comment labels.
settings page. </p>
</p>
<p> <p>
When you have filtered topics tags set, topics with any of the tags If you only want to see topics from a certain period, click on the
present will be removed from your listing. You can read more about it by "from" dropdown and select the period you want. Aside from a set of
going to the dedicated page for it by clicking the{" "} predefined options, you can also set a custom one by clicking the "other
<a target="_blank" href="https://tildes.net/settings/filters"> period" option, after which you'll be prompted to input it.
"Edit filtered tags" </p>
</a>{" "} </>,
button. );
</p>
</>,
);
const step09 = renderInContainer( const step04 = renderInContainer(
<> <>
<h1>The Footer</h1> <h1>The Topic Listing</h1>
<p> <p>
And finally, the very last part of the homepage is the footer. Here you Next up, just below the listing options is the topic listing itself.
will find a theme selector (more on that in a moment) and various links to We've only highlighted the first topic here, but you can probably see it
places, such as the Tildes Documentation, Contact page, the source code, continues all the way down the page.
etc. We highly recommend reading through the documentation as it explains </p>
a lot of the how and why Tildes does certain things.
</p>
<p> <p>Here, we've marked the main elements of a topic:</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>
.
</p>
</>,
);
const step10 = renderInContainer( <ol>
<> <li>
<h1>This is the end, beautiful friend</h1> The topic title, when the topic is a "text topic" it 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>
<p>And that's the end of the Homepage tour!</p> <li>
The topic metadata, which by default includes the group it's in. If a
topic has specific notable tags and you have the "show tags" setting
enabled in your user settings, they will be shown after the group
name. A "topic type" may also be shown to indicate whether the topic
is a text topic, a video, an "ask" topic for recommendations or a
survey, etc.
</li>
<p> <li>
As always, if you find any bugs, have feature requests or simply want to The amount of comments the topic has received. If any new comments
ask a question. Please send us a message at{" "} have been posted since you last viewed the topic, in orange a "(X
<a target="_blank" href="https://tildes.net/user/Community/new_message"> new)" will be added.
@Community </li>
</a>
.
</p>
<p>Happy Tildying!~</p> <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".
</li>
</ol>
const steps: TourData["steps"] = [ <p>The list continues on the next page.</p>
{ </>,
id: "homepage-01", );
text: step01,
}, const step05 = renderInContainer(
{ <>
attachTo: { <h1>The Topic Listing continued</h1>
element: "#site-header",
on: "bottom", <ol start={5}>
<li>
The date when the topic was posted. For dates that are pretty recent
it will show something like "X days ago" while for longer dates it
will be the exact date, like "April 26th, 2021".
</li>
<li>
The voting button, clicking it will add your vote to the topic. On
Tildes, once the topic is older than 30 days you can no longer vote on
it and the individual voting data for is removed, with only the total
count kept. You can read more about it in{" "}
<a target="_blank" href="https://tild.es/jhm">
this announcement topic
</a>
.
</li>
<li>
And finally the topic actions. Clicking on the "Actions" button will
show a dropdown including "Bookmark", "Ignore this topic" and if you
have been granted the permission for it, "Edit title". Ignoring the
topic will remove it from the topic listing and prevent any future
notifications from happening. Both your bookmarked and ignored topics
can be found in their respective sections on your profile.
</li>
</ol>
</>,
);
const step06 = renderInContainer(
<>
<h1>The Sidebar</h1>
<p>
Let's take a look at the sidebar, where the first thing we're greeted
with is the search bar.
</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.
</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.
</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.
</p>
</>,
);
const step07 = renderInContainer(
<>
<h1>The Sidebar: Subscriptions</h1>
<p>
Moving on, you'll find the list of groups you are subscribed to and a
button below it to go to the groups listing, where you can find all the
that are available.
</p>
<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.
</p>
</>,
);
const step08 = renderInContainer(
<>
<h1>The Sidebar: User Settings</h1>
<p>
At the bottom of the sidebar you will find some user settings.
Specifically the filtered topics tags you have set and a link to the
settings page.
</p>
<p>
When you have filtered topics tags set, 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>{" "}
button.
</p>
</>,
);
const step09 = renderInContainer(
<>
<h1>The Footer</h1>
<p>
And finally, the very last part of the homepage is the footer. Here you
will find a theme selector (more on that in a moment) and various links
to places, such as the Tildes Documentation, Contact page, the source
code, etc. We highly recommend reading through the documentation as it
explains a lot of the how and why Tildes does certain things.
</p>
<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>
.
</p>
</>,
);
const step10 = renderInContainer(
<>
<h1>This is the end, beautiful friend</h1>
<p>And that's the end of the Homepage tour!</p>
<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">
@Community
</a>
.
</p>
<p>Happy Tildying!~</p>
</>,
);
return [
{
id: "homepage-01",
text: step01,
}, },
canClickTarget: false, {
id: "homepage-02", attachTo: {
scrollTo: true, element: "#site-header",
text: step02, on: "bottom",
}, },
{ canClickTarget: false,
attachTo: { id: "homepage-02",
element: "main > .listing-options", scrollTo: true,
on: "bottom", text: step02,
}, },
canClickTarget: false, {
id: "homepage-03", attachTo: {
text: step03, element: "main > .listing-options",
}, on: "bottom",
{ },
attachTo: { canClickTarget: false,
element: ".topic-listing > li:first-child", id: "homepage-03",
on: "bottom", text: step03,
}, },
canClickTarget: false, {
id: "homepage-04", attachTo: {
text: step04, element: ".topic-listing > li:first-child",
}, on: "bottom",
{ },
attachTo: { canClickTarget: false,
element: ".topic-listing > li:first-child", id: "homepage-04",
on: "bottom", text: step04,
}, },
canClickTarget: false, {
id: "homepage-05", attachTo: {
text: step05, element: ".topic-listing > li:first-child",
}, on: "bottom",
{ },
attachTo: { canClickTarget: false,
element: '#sidebar [data-tildes-shepherd-encapsulated="homepage-06"]', id: "homepage-05",
on: "left-start", text: step05,
}, },
canClickTarget: false, {
id: "homepage-06", attachTo: {
text: step06, element: '#sidebar [data-tildes-shepherd-encapsulated="homepage-06"]',
}, on: "left-start",
{ },
attachTo: { canClickTarget: false,
element: '#sidebar [data-tildes-shepherd-encapsulated="homepage-07"]', id: "homepage-06",
on: "left-start", text: step06,
}, },
canClickTarget: false, {
id: "homepage-07", attachTo: {
scrollTo: true, element: '#sidebar [data-tildes-shepherd-encapsulated="homepage-07"]',
text: step07, on: "left-start",
}, },
{ canClickTarget: false,
attachTo: { id: "homepage-07",
element: "#sidebar .divider + .nav", scrollTo: true,
on: "left-start", text: step07,
}, },
canClickTarget: false, {
id: "homepage-08", attachTo: {
scrollTo: true, element: "#sidebar .divider + .nav",
text: step08, on: "left-start",
}, },
{ canClickTarget: false,
attachTo: { id: "homepage-08",
element: "#site-footer", scrollTo: true,
on: "top", text: step08,
}, },
canClickTarget: false, {
id: "homepage-09", attachTo: {
scrollTo: true, element: "#site-footer",
text: step09, on: "top",
}, },
{ canClickTarget: false,
canClickTarget: false, id: "homepage-09",
id: "homepage-10", scrollTo: true,
text: step10, text: step09,
}, },
]; {
canClickTarget: false,
id: "homepage-10",
text: step10,
},
];
}
const steps: TourData["steps"] = renderSteps;
const eventHandlers: TourData["eventHandlers"] = [ const eventHandlers: TourData["eventHandlers"] = [
{ {

221
source/tours/introduction.tsx
View File

@ -2,128 +2,133 @@ import {fromStorage, StorageKey} from "../storage/common.js";
import {TourId, type TourData} from "./types.js"; import {TourId, type TourData} from "./types.js";
import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js"; import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js";
const step01 = renderInContainer( function renderSteps(): ReturnType<TourData["steps"]> {
<> const step01 = renderInContainer(
<h1>Thank you for installing Tildes Shepherd!</h1> <>
<h1>Thank you for installing Tildes Shepherd!</h1>
<p> <p>
Tildes Shepherd is a set of interactive guided tours for Tildes to show Tildes Shepherd is a set of interactive guided tours for Tildes to show
you around and introduce you to the concepts that make this website great. you around and introduce you to the concepts that make this website
</p> great.
</p>
<p> <p>
To see and start the tours that are available, click on the extension icon To see and start the tours that are available, click on the extension
to go to the options page or{" "} icon to go to the options page or{" "}
<a href="#" onClick={openOptionsPageFromBackground}> <a href="#" onClick={openOptionsPageFromBackground}>
click here now click here now
</a> </a>
. .
</p> </p>
<p> <p>
Each tour will start with a pop-up like this one and have "Continue", Each tour will start with a pop-up like this one and have "Continue",
"Back" and "Exit" buttons at the bottom. They will progress the tour "Back" and "Exit" buttons at the bottom. They will progress the tour
forward, backward or exit it. forward, backward or exit it.
</p> </p>
</>, </>,
); );
const step02 = renderInContainer( const step02 = 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
mainly to prevent you from accidentally going to a different page and them, mainly to prevent you from accidentally going to a different page
interrupting the tour. But also to prevent you from taking actions you and interrupting the tour. But also to prevent you from taking actions
maybe don't want to take, like voting on something you don't necessarily you maybe don't want to take, like voting on something you don't
want to vote on. necessarily want to vote on.
</p> </p>
<p> <p>
Depending on your selected theme, the highlighted areas will have a yellow Depending on your selected theme, the highlighted areas will have a
or orange border and some extra added whitespace. As you can see in this yellow or orange border and some extra added whitespace. As you can see
example where the main site header has been highlighted. in this example where the main site header has been highlighted.
</p> </p>
</>, </>,
); );
const step03 = renderInContainer( const step03 = 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/new_message">
@Community @Community
</a> </a>
. .
</p> </p>
<p> <p>
Also, big shoutout to the people at{" "} Also, big shoutout to the people at{" "}
<a target="_blank" href="https://shipshape.io"> <a target="_blank" href="https://shipshape.io">
Ship Shape Ship Shape
</a>{" "} </a>{" "}
for making{" "} for making{" "}
<a target="_blank" href="https://shepherdjs.dev"> <a target="_blank" href="https://shepherdjs.dev">
Shepherd.js Shepherd.js
</a> </a>
, the software library making this entire project so much easier to , the software library making this entire project so much easier to
create. And the namesake of it, too. create. And the namesake of it, too.
</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 tour 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>
<p>Happy Tildying!~</p> <p>Happy Tildying!~</p>
</>, </>,
); );
const steps: TourData["steps"] = [ return [
{ {
canClickTarget: false, canClickTarget: false,
id: "introduction-01", id: "introduction-01",
text: step01, text: step01,
},
{
attachTo: {
element: "#site-header",
on: "bottom",
}, },
canClickTarget: false, {
id: "introduction-02", attachTo: {
text: step02, element: "#site-header",
}, on: "bottom",
{
buttons: [
{
classes: "btn",
text: "I understand",
async action() {
const introductionUnderstood = await fromStorage(
StorageKey.IntroductionUnderstood,
);
introductionUnderstood.value = true;
await introductionUnderstood.save();
this.complete();
},
}, },
{ canClickTarget: false,
classes: "btn", id: "introduction-02",
text: "Back", text: step02,
action() { },
this.back(); {
buttons: [
{
classes: "btn",
text: "I understand",
async action() {
const introductionUnderstood = await fromStorage(
StorageKey.IntroductionUnderstood,
);
introductionUnderstood.value = true;
await introductionUnderstood.save();
this.complete();
},
}, },
}, {
], classes: "btn",
canClickTarget: false, text: "Back",
id: "introduction-03", action() {
text: step03, this.back();
}, },
]; },
],
canClickTarget: false,
id: "introduction-03",
text: step03,
},
];
}
const steps: TourData["steps"] = renderSteps;
const eventHandlers: TourData["eventHandlers"] = []; const eventHandlers: TourData["eventHandlers"] = [];

4
source/tours/types.ts
View File

@ -50,8 +50,8 @@ export type TourData = {
/** The requirements this tour must match before starting it. */ /** The requirements this tour must match before starting it. */
requirements: TourRequirement; requirements: TourRequirement;
/** All the steps this tour will take. */ /** A function that returns all the steps this tour will take. */
steps: Shepherd.Step.StepOptions[]; steps: () => Shepherd.Step.StepOptions[];
/** The title of the tour for use in the options page. */ /** The title of the tour for use in the options page. */
title: string; title: string;