siteguide.js 0.2.1-alpha → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -1
- package/dist/css/siteguide.css +1 -1
- package/dist/index.d.ts +485 -53
- package/dist/index.js +3 -3
- package/dist/index.mjs +1054 -175
- package/package.json +9 -4
package/README.md
CHANGED
|
@@ -1 +1,57 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
# Siteguide.js
|
|
3
|
+
|
|
4
|
+
Siteguide.js is an open source library made with vanilla Javascript and CSS to help you build website guides and onboarding tours.
|
|
5
|
+
|
|
6
|
+
Siteguide empowers you to create personalized tours and interactive guides for users within your application or website. With its simple and minimalistic design, Siteguide offers extensive customization options while remaining user-friendly and intuitive.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install siteguide.js --save
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Quick Start Example
|
|
15
|
+
|
|
16
|
+
The following example is a simple tour with two steps.
|
|
17
|
+
|
|
18
|
+
```javascript
|
|
19
|
+
import { Tour } from 'siteguide.js';
|
|
20
|
+
|
|
21
|
+
const tour = new Tour({
|
|
22
|
+
scrollTo: {
|
|
23
|
+
behavior: 'smooth',
|
|
24
|
+
block: 'center',
|
|
25
|
+
inline: 'center',
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const stepList = [
|
|
30
|
+
{
|
|
31
|
+
id: '1',
|
|
32
|
+
host: '.step-1',
|
|
33
|
+
popup: {
|
|
34
|
+
text: "I'm step 1",
|
|
35
|
+
title: 'Step 1',
|
|
36
|
+
type: 'text',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
id: '2',
|
|
41
|
+
host: '.step-2',
|
|
42
|
+
popup: {
|
|
43
|
+
title: 'Step 2',
|
|
44
|
+
text: "I'm step 2",
|
|
45
|
+
type: 'text',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
];
|
|
49
|
+
|
|
50
|
+
tour.addSteps(stepList);
|
|
51
|
+
|
|
52
|
+
tour.start();
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
Siteguide.js is open source and free to use under the MIT license. See the [LICENSE](LICENSE) file for more information.
|
package/dist/css/siteguide.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.siteguide{box-sizing:border-box;width:280px;background-color:
|
|
1
|
+
:root{--sg-bg: var(--sg-mono-100);--sg-text: var(--sg-mono-900);--sg-line: var(--sg-mono-500);--primary: #2e62d9;--primary-hover: #2ca2fd;--secondary: #2ca2fd;--secondary-hover: #2ca2fd;--sg-mono-900: #101828;--sg-mono-800: #4c525e;--sg-mono-700: #7c8089;--sg-mono-600: #acaeb5;--sg-mono-500: #d5d6d9;--sg-mono-400: #e6e7e8;--sg-mono-300: #f4f4f5;--sg-mono-200: #f9f9fa;--sg-mono-100: #fff;--padding-s: 8px;--padding-m: 12px;--padding-l: 16px;--padding-2l: 20px;--sg-text-m: 16px;--sg-text-l: 18px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.siteguide{color:var(--sg-text);box-sizing:border-box;font-family:Inter,sans-serif;font-size:var(--sg-text-m);width:280px;min-height:150px;background-color:var(--sg-bg);border-radius:8px;border:1px solid var(--sg-line);display:flex;flex-direction:column;position:absolute;box-shadow:0 10px 10px #0001;z-index:1000001;max-height:400px}.siteguide-animation{animation:fadeIn .3s ease-out}.siteguide-highlight{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px solid var(--sg-mono-900);border-radius:4px;opacity:1;z-index:1000000;position:absolute;transition:all .3s ease-out;pointer-events:none}.siteguide-header{display:flex;align-items:center;width:100%;padding:var(--padding-m) var(--padding-2l) 0}.siteguide-content{width:100%;padding:var(--padding-m) var(--padding-2l);overflow-y:auto}.siteguide-content::-webkit-scrollbar{width:4px}.siteguide-content::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:4px}.siteguide-title{display:block;font-size:var(--sg-text-l);font-weight:800;color:var(--sg-text)}.siteguide-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:var(--padding-m)}.siteguide-description{font-size:14px;font-weight:400;color:var(--sg-text)}.siteguide-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--padding-m);border-top:1px solid var(--sg-line);gap:var(--padding-l);margin-top:auto}.siteguide-button{padding:var(--padding-s) var(--padding-l);border-radius:4px;cursor:pointer;font-size:14px;line-height:20px;transition:background-color .3s ease-out;color:var(--sg-mono-100)}.siteguide-button-secondary{background-color:var(--secondary)}.siteguide-button-secondary:hover{background-color:var(--secondary-hover)}.siteguide-button-primary{background-color:var(--primary)}.siteguide-button-primary:hover{background-color:var(--primary-hover)}.siteguide-button-link{color:var(--primary);background-color:transparent;cursor:pointer;transition:color .3s ease-out}.siteguide-button-link:hover{color:var(--primary-hover)}.siteguide-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:4px;cursor:pointer;position:absolute;top:10px;right:10px;transition:background-color .3s ease-out}.siteguide-close:hover{background-color:var(--secondary-hover);color:#fff}.siteguide-close-icon{height:10px}
|