Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
kamrify commited on
Commit
e2a780e
·
1 Parent(s): be9e7e5

Improve UI

Browse files
Files changed (2) hide show
  1. docs/src/layouts/BaseLayout.astro +107 -104
  2. docs/src/pages/index.astro +1 -1
docs/src/layouts/BaseLayout.astro CHANGED
@@ -1,112 +1,115 @@
1
  ---
2
  import Analytics from "../components/Analytics/Analytics.astro";
3
  export interface Props {
4
- title: string;
 
 
5
  }
6
 
7
- export interface BaseLayoutProps extends Props {
8
- permalink?: string;
9
- title?: string;
10
- description?: string;
11
- }
12
-
13
- const { permalink = '', title = "Driver.js", description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." } = Astro.props;
14
-
15
  ---
16
 
17
- <!DOCTYPE html>
18
  <html lang="en">
19
- <head>
20
- <meta charset="UTF-8" />
21
-
22
- <title>{ title }</title>
23
- <meta name="robots" content="index,follow"/>
24
- <meta name="description" itemprop="description" content={description}/>
25
-
26
- <link href={`https://driverjs.com${permalink}`} rel="canonical">
27
-
28
- <meta content="Kamran Ahmed" name=author>
29
- <meta content="summary_large_image" name="twitter:card">
30
- <meta content="@kamrify" name="twitter:creator">
31
- <meta content="1200" property="og:image:width">
32
- <meta content="630" property="og:image:height">
33
- <meta content="https://driverjs.com/og-img.png" property="og:image">
34
- <meta content="driverjs.com" property="og:image:alt">
35
- <meta content="driverjs.com" property="og:site_name">
36
- <meta content="Driver.js" property="og:title">
37
- <meta content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." property=og:description>
38
- <meta content="website" property="og:type">
39
- <meta content="https://driverjs.com/" property="og:url">
40
-
41
- <meta name="viewport" content="width=device-width" />
42
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
43
-
44
- <style is:global>
45
- .driver-popover.driverjs-theme {
46
- background-color: #fde047;
47
- color: #000;
48
- }
49
-
50
- .driver-popover.driverjs-theme .driver-popover-title {
51
- font-size: 20px;
52
- }
53
-
54
- .driver-popover.driverjs-theme .driver-popover-title,
55
- .driver-popover.driverjs-theme .driver-popover-description,
56
- .driver-popover.driverjs-theme .driver-popover-progress-text {
57
- color: #000;
58
- }
59
-
60
- .driver-popover.driverjs-theme button {
61
- flex: 1;
62
- text-align: center;
63
- background-color: #000;
64
- color: #ffffff;
65
- border: 1px solid #000;
66
- text-shadow: none;
67
- font-size: 14px;
68
- padding: 5px 8px;
69
- border-radius: 6px;
70
- }
71
-
72
- .driver-popover.driverjs-theme button:focus, .driver-popover.driverjs-theme button:hover {
73
- background-color: #000;
74
- opacity: 0.8;
75
- color: #ffffff;
76
- }
77
-
78
- .driver-popover.driverjs-theme .driver-popover-navigation-btns {
79
- justify-content: space-between;
80
- gap: 3px;
81
- }
82
-
83
- .driver-popover.driverjs-theme .driver-popover-close-btn {
84
- color: #9b9b9b;
85
- }
86
-
87
- .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
88
- color: #000;
89
- }
90
-
91
- .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
92
- border-left-color: #fde047;
93
- }
94
-
95
- .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
96
- border-right-color: #fde047;
97
- }
98
-
99
- .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
100
- border-top-color: #fde047;
101
- }
102
-
103
- .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
104
- border-bottom-color: #fde047;
105
- }
106
- </style>
107
- </head>
108
- <body>
109
- <slot />
110
- <Analytics />
111
- </body>
112
- </html>
 
 
 
 
 
1
  ---
2
  import Analytics from "../components/Analytics/Analytics.astro";
3
  export interface Props {
4
+ permalink?: string;
5
+ title?: string;
6
+ description?: string;
7
  }
8
 
9
+ const {
10
+ permalink = "",
11
+ title = "driver.js",
12
+ description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.",
13
+ } = Astro.props;
 
 
 
14
  ---
15
 
16
+ <!doctype html>
17
  <html lang="en">
18
+ <head>
19
+ <meta charset="UTF-8" />
20
+
21
+ <title>{title}</title>
22
+ <meta name="robots" content="index,follow" />
23
+ <meta name="description" itemprop="description" content={description} />
24
+
25
+ <link href={`https://driverjs.com${permalink}`} rel="canonical" />
26
+
27
+ <meta content="Kamran Ahmed" name="author" />
28
+ <meta content="summary_large_image" name="twitter:card" />
29
+ <meta content="@kamrify" name="twitter:creator" />
30
+ <meta content="1200" property="og:image:width" />
31
+ <meta content="630" property="og:image:height" />
32
+ <meta content="https://driverjs.com/og-img.png" property="og:image" />
33
+ <meta content="driverjs.com" property="og:image:alt" />
34
+ <meta content="driverjs.com" property="og:site_name" />
35
+ <meta content="Driver.js" property="og:title" />
36
+ <meta
37
+ content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page."
38
+ property="og:description"
39
+ />
40
+ <meta content="website" property="og:type" />
41
+ <meta content="https://driverjs.com/" property="og:url" />
42
+
43
+ <meta name="viewport" content="width=device-width" />
44
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
45
+
46
+ <style is:global>
47
+ .driver-popover.driverjs-theme {
48
+ background-color: #fde047;
49
+ color: #000;
50
+ }
51
+
52
+ .driver-popover.driverjs-theme .driver-popover-title {
53
+ font-size: 20px;
54
+ }
55
+
56
+ .driver-popover.driverjs-theme .driver-popover-title,
57
+ .driver-popover.driverjs-theme .driver-popover-description,
58
+ .driver-popover.driverjs-theme .driver-popover-progress-text {
59
+ color: #000;
60
+ }
61
+
62
+ .driver-popover.driverjs-theme button {
63
+ flex: 1;
64
+ text-align: center;
65
+ background-color: #000;
66
+ color: #ffffff;
67
+ border: 1px solid #000;
68
+ text-shadow: none;
69
+ font-size: 14px;
70
+ padding: 5px 8px;
71
+ border-radius: 6px;
72
+ }
73
+
74
+ .driver-popover.driverjs-theme button:focus,
75
+ .driver-popover.driverjs-theme button:hover {
76
+ background-color: #000;
77
+ opacity: 0.8;
78
+ color: #ffffff;
79
+ }
80
+
81
+ .driver-popover.driverjs-theme .driver-popover-navigation-btns {
82
+ justify-content: space-between;
83
+ gap: 3px;
84
+ }
85
+
86
+ .driver-popover.driverjs-theme .driver-popover-close-btn {
87
+ color: #9b9b9b;
88
+ }
89
+
90
+ .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
91
+ color: #000;
92
+ }
93
+
94
+ .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
95
+ border-left-color: #fde047;
96
+ }
97
+
98
+ .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
99
+ border-right-color: #fde047;
100
+ }
101
+
102
+ .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
103
+ border-top-color: #fde047;
104
+ }
105
+
106
+ .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
107
+ border-bottom-color: #fde047;
108
+ }
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <slot />
113
+ <Analytics />
114
+ </body>
115
+ </html>
docs/src/pages/index.astro CHANGED
@@ -9,7 +9,7 @@ import Examples from "../components/Examples.astro";
9
  import UsecaseList from "../components/UsecaseList.astro";
10
  import OpenSourceLove from "../components/OpenSourceLove.astro";
11
  ---
12
- <BaseLayout>
13
  <HeroSection />
14
  <div
15
  class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"
 
9
  import UsecaseList from "../components/UsecaseList.astro";
10
  import OpenSourceLove from "../components/OpenSourceLove.astro";
11
  ---
12
+ <BaseLayout title="driver.js">
13
  <HeroSection />
14
  <div
15
  class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"