From aebeac9112074219bc8d2f64a6d039b3e71afa3e Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Mon, 13 Jun 2022 17:26:53 +1000
Subject: [PATCH] add guided tour to user profile

- adds ids to relevant elements to enable tour
- adds guided tour using Shepherd
---
 .../templates/guided_tour/user_profile.html   | 136 ++++++++++++++++++
 bookwyrm/templates/user/layout.html           |  14 +-
 2 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 bookwyrm/templates/guided_tour/user_profile.html

diff --git a/bookwyrm/templates/guided_tour/user_profile.html b/bookwyrm/templates/guided_tour/user_profile.html
new file mode 100644
index 000000000..3e2bc3f2f
--- /dev/null
+++ b/bookwyrm/templates/guided_tour/user_profile.html
@@ -0,0 +1,136 @@
+{% load i18n %}
+
+<script>
+    const tour = new Shepherd.Tour({
+        exitOnEsc: true,
+    });
+
+    tour.addSteps([
+        {
+            text: "{% trans 'This is your user profile. All your latest activities will be listed here, as well as links to your reading goal, groups, lists, and shelves. Other Bookwyrm users can see this page too - though exactly what they can see depends on your settings.' %}",
+            title: "{% trans 'User Profile' %}",
+            buttons: [
+                {
+                    action() {
+                        return this.cancel();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Cancel' %}",
+                    classes: "is-danger",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'This tab shows everything you have read towards your annual reading goal, or allows you to set one. You do not have to set a reading goal if that\'s not your thing!' %}",
+            title: "{% trans 'Reading Goal' %}",
+            attachTo: {
+                element: "#reading_goal_tab",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'The Books tab shows your books, on various shelves.' %}",
+            title: "{% trans 'Books' %}",
+            attachTo: {
+                element: "#shelves_tab",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Here you can see your lists, or create a new one. A list is a collection of books that have something in common.' %}",
+            title: "{% trans 'Lists' %}",
+            attachTo: {
+                element: "#lists_tab",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Here you can see your groups, or create a new one. A group brings together Bookwyrm users and allows them to curate lists together.' %}",
+            title: "{% trans 'Groups' %}",
+            attachTo: {
+                element: "#groups_tab",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Now that you have seen the basics of your profile page, we\'re going to explore some of these concepts. Start by clicking on' %}<code>{% trans 'Groups' %}</code>.",
+            title: "{% trans 'Groups' %}",
+            buttons: [
+                {
+                    action() {
+                        return this.complete();
+                    },
+                    text: "{% trans 'Ok' %}",
+                },
+            ],
+        },
+    ])
+
+    tour.start()
+</script>
diff --git a/bookwyrm/templates/user/layout.html b/bookwyrm/templates/user/layout.html
index 3dbfc9dcd..c4a71735e 100755
--- a/bookwyrm/templates/user/layout.html
+++ b/bookwyrm/templates/user/layout.html
@@ -69,25 +69,25 @@
         {% if is_self or user.goal.exists %}
         {% now 'Y' as year %}
         {% url 'user-goal' user|username year as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %}>
+        <li{% if url in request.path %} class="is-active"{% endif %} id="reading_goal_tab">
             <a href="{{ url }}">{% trans "Reading Goal" %}</a>
         </li>
         {% endif %}
         {% if is_self or user|has_groups %}
         {% url 'user-groups' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %}>
+        <li{% if url in request.path %} class="is-active"{% endif %} id="groups_tab">
             <a href="{{ url }}">{% trans "Groups" %}</a>
         </li>
         {% endif %}
         {% if is_self or user.list_set.exists %}
         {% url 'user-lists' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %}>
+        <li{% if url in request.path %} class="is-active"{% endif %} id="lists_tab">
             <a href="{{ url }}">{% trans "Lists" %}</a>
         </li>
         {% endif %}
         {% if user.shelf_set.exists %}
         {% url 'user-shelves' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %}>
+        <li{% if url in request.path %} class="is-active"{% endif %} id="shelves_tab">
             <a href="{{ url }}">{% trans "Books" %}</a>
         </li>
         {% endif %}
@@ -99,3 +99,9 @@
 {% block panel %}{% endblock %}
 
 {% endblock %}
+
+{% block scripts %}
+{% if user.show_guided_tour %}
+    {% include 'guided_tour/user_profile.html' %}
+{% endif %}
+{% endblock %}