From b6c847e2c11e26ab3ff918e7f9dda2e776f0fe02 Mon Sep 17 00:00:00 2001 From: Bauke Date: Sat, 17 Jun 2023 14:39:45 +0200 Subject: [PATCH] Proofread the Homepage tour and make some minor adjustments. --- source/tours/interface/homepage.tsx | 79 ++++++++++++++++------------- 1 file changed, 44 insertions(+), 35 deletions(-) diff --git a/source/tours/interface/homepage.tsx b/source/tours/interface/homepage.tsx index a08ee65..befb326 100644 --- a/source/tours/interface/homepage.tsx +++ b/source/tours/interface/homepage.tsx @@ -26,17 +26,17 @@ const step02 = renderInContainer(

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. + a group, the group name will also be shown next to it.

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 your - username. If you don't have any notifications right now, you can{" "} + 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{" "} click here {" "} - to show a preview of what they look like. + to toggle a preview of what they look like.

@@ -59,11 +59,13 @@ 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(existingSelector) ?? undefined; if (existing === undefined) { - // If no notifiaction exists, render our mock. + // 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"); @@ -75,7 +77,7 @@ function toggleMockNotifications(event: Event): void { // If a notification exists and it has our mock attribute, remove it. existing.remove(); } else { - // A real message notification already exists, so we do nothing. + // A real notification already exists, so we do nothing. } } @@ -93,11 +95,8 @@ const step03 = renderInContainer(

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 from what period topics + should be shown.

@@ -113,18 +112,20 @@ const step03 = renderInContainer( Comments sorts them with the most comments first.

  • - And New sorts them by their date, so newest topics first. + And New sorts them by their date, so the newest topics come + first.

    • - Then the first Activity will sort topics by bumping topics up as - they receive comments, however this sort makes use of comment labels. + Then the first Activity sort will sort topics by bumping topics up + as they receive comments, however this sort makes use of comment labels.

    + {/* TODO: When the comment labels tour is made, change the prose. */}

    - 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 + 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{" "}

    - And finally the All activity sorts topics the same as Activity, but + And finally All activity sorts topics the same as Activity, but without taking into account any comment labels.

    If you only want to see topics from a certain period, click on the "from" - 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. + 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.

    , ); @@ -160,11 +161,11 @@ const step04 = renderInContainer( continues all the way down the page.

    -

    Here, we've marked the main elements of the topic:

    +

    Here, we've marked the main elements of a topic:

    1. - The topic title, when the topic is a "text topic" links to the same + 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.
      2. @@ -186,8 +187,8 @@ const step04 = renderInContainer(
    2. 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 posted automatically by - Tildes itself, it will be "Scheduled topic". + together with that website's icon. For topics automatically posted by + Tildes itself, it will say "Scheduled topic".
    @@ -239,27 +240,28 @@ const step06 = renderInContainer(

    - A quick note for mobile use, the sidebar can opened via a button that - appears in the very top-right of the page. + A quick note for mobile devices, the sidebar is opened via a "Sidebar" + button that appears in the very top-right of the page.

    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 sub-groups. + group and any of its sub-groups.

    + {/* TODO: Update the prose once the groups tour is created. */}

    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 are touched upon in the groups tour. + you're in a group page, but those will be touched upon in the groups tour.

    , ); const step07 = renderInContainer( <> -

    The Sidebar Subscriptions

    +

    The Sidebar: Subscriptions

    Moving on, you'll find the list of groups you are subscribed to and a @@ -269,14 +271,15 @@ const step07 = renderInContainer(

    To post a topic, subscribe or unsubscribe from any group, go to the group - in question and in the sidebar there will be buttons to do so. + page in question and in its sidebar there will be buttons to do all those + things.

    , ); const step08 = renderInContainer( <> -

    The Sidebar User Settings

    +

    The Sidebar: User Settings

    At the bottom of the sidebar you will find some user settings. @@ -285,9 +288,12 @@ const step08 = renderInContainer(

    - When you have filtered topics tags set, any topics with any of the tags + 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 "Edit filtered tags" + going to the dedicated page for it by clicking the{" "} + + "Edit filtered tags" + {" "} button.

    , @@ -308,8 +314,11 @@ const step09 = renderInContainer(

    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 - your account settings. + device, if you'd like to set an account default for all devices, head to{" "} + + your account settings + + .

    , );