template-playground/src/components/Tour.ts at ecefd34247645d8f3ee22f05d46db3e14697a307 · nitro56565/template-playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import Shepherd from "shepherd.js";
import "shepherd.js/dist/css/shepherd.css";

const style = document.createElement("style");
style.textContent = `
  .shepherd-button {
    background-color: #050c40 !important;
    color: white !important;
  }
`;
document.head.appendChild(style);

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: "shepherd-theme-arrows",
    scrollTo: true,
  },
  useModalOverlay: true,
});

tour.addStep({
  id: "intro",
  text: "Welcome to the Template Playground! This brief tour will help you get acquainted with the key features of the platform.",
  buttons: [
    {
      text: "Next",
      action: tour.next,
    },
  ],
});

tour.addStep({
  id: "samples",
  text: "Here is the 'Templates' dropdown. This dropdown contains various templates that you can edit and experiment with. Select a template to see and modify its details.",
  attachTo: {
    element: ".samples-element",
    on: "bottom",
  },
  buttons: [
    {
      text: "Next",
      action: tour.next,
    },
  ],
});

tour.addStep({
  id: "share",
  text: "Use this 'Share' button to generate and share a link for any created or edited templates. Share your work with others easily.",
  attachTo: {
    element: ".share-element",
    on: "bottom",
  },
  buttons: [
    {
      text: "Next",
      action: tour.next,
    },
  ],
});

tour.addStep({
  id: "preview",
  text: "This section shows the live preview of your template. View the results of your edits and see how your template renders.",
  attachTo: {
    element: ".preview-component",
    on: "bottom",
  },
  buttons: [
    {
      text: "Next",
      action: tour.next,
    },
  ],
});

tour.addStep({
  id: "darkmode",
  text: "Toggle between light and dark mode for a comfortable viewing experience. Switch themes to suit your preference while working on your template.",
  attachTo: {
    element: ".dark-mode-toggle",
    on: "bottom",
  },
  buttons: [
    {
      text: "Next",
      action: tour.next,
    },
  ],
});

tour.addStep({
  id: "learnNow",
  text: 'Click the "Learn Now" button to access the Learning Pathway. Here, you will find comprehensive documentation and tutorials to help you create templates effectively.',
  attachTo: {
    element: ".learnNow-button",
    on: "bottom",
  },
  buttons: [
    {
      text: "Finish Tour",
      action: tour.cancel,
    },
  ],
});

export default tour;