Skip to content

Commit 6c43d42

Browse files
cttrickscttricks
committed
Added meta tags and og:banner
1 parent 3912006 commit 6c43d42

File tree

2 files changed

+39
-18
lines changed

2 files changed

+39
-18
lines changed

‎docs/assets/img/spotlight-js-banner.png

297 KB
Loading

‎index.html

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,33 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
8-
7+
8+
<!-- Primary Meta Tags -->
99
<title>Spotlight.js</title>
10+
<meta name="title" content="Spotlight.js">
11+
<meta name="description"
12+
content="Interactive walkthroughs, key feature spotlights, in-app guidance, & additional resources to support users in navigating & understanding the product.">
13+
<meta name="keywords"
14+
content="spotlight, popover, overlay, tour, walkthrough, product-tour, features-introduction, javascript-library">
15+
<meta name="robots" content="index, follow">
16+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
17+
<meta name="language" content="English">
18+
<meta name="revisit-after" content="15 days">
19+
<meta name="author" content="Tanish Raj">
20+
21+
<!-- Open Graph / Facebook -->
22+
<meta property="og:type" content="website" />
23+
<meta property="og:url" content="https://cttricks.com/" />
24+
<meta property="og:title" content="Spotlight.js" />
25+
<meta property="og:description"
26+
content="Interactive walkthroughs, key feature spotlights, in-app guidance, & additional resources to support users in navigating & understanding the product." />
27+
<meta property="og:image" content="./docs/assets/img/spotlight-js-banner.png" />
28+
1029
<link rel="icon" href="./docs/assets/img/favicon.png">
30+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
1131
<link rel="stylesheet" href="./docs/assets/css/home.css">
12-
<!-- TODO: Add Meta tags -->
32+
33+
1334
</head>
1435

1536
<body>
@@ -124,12 +145,13 @@ <h2>#Examples</h2>
124145
</div>
125146
<p class="mt-4">
126147
Additional features are planned for future updates. If you have any suggestions, feel free to
127-
<a href="https://github.com/cttricks/spotlight.js/discussions" target="_blank">start a discussion</a> on our GitHub repository.
148+
<a href="https://github.com/cttricks/spotlight.js/discussions" target="_blank">start a discussion</a> on our
149+
GitHub repository.
128150
</p>
129151
</section>
130152

131153
<div class="hr-line"></div>
132-
154+
133155
<section class="container-lg github-starts">
134156
<div class="text-center">
135157
<h2>Unlock the full potential of your web projects</h2>
@@ -182,51 +204,50 @@ <h2>Unlock the full potential of your web projects</h2>
182204
</footer>
183205

184206
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
185-
<!-- <script type="module" src="./dist/spotlight.js" ></script> -->
186207

187208
<script type="module">
188-
209+
189210
// Let's Start with
190211
import { spotlight } from './dist/spotlight.min.js';
191212

192213
const Spotlight = await spotlight();
193214

194215
// Event Handler
195216
Spotlight.addEventListener('exit', (e) => {
196-
Spotlight.setCover({ hex: '#000000', alpha: 0.5});
217+
Spotlight.setCover({ hex: '#000000', alpha: 0.5 });
197218
});
198219

199220
// Below codes are to handel the events of this page Only
200221
document.querySelector('footer span').innerHTML += new Date().getFullYear();
201222

202223
const handelButtonClickWithLinkAttr = (e) => {
203-
window.open((e.getAttribute('link')??'#'), (e.getAttribute('target')??'_self'));
224+
window.open((e.getAttribute('link') ?? '#'), (e.getAttribute('target') ?? '_self'));
204225
};
205226

206227
document.body.addEventListener('click', (e) => {
207-
if((e.target.getAttribute('type')??'') === 'link') return handelButtonClickWithLinkAttr(e.target);
208-
228+
if ((e.target.getAttribute('type') ?? '') === 'link') return handelButtonClickWithLinkAttr(e.target);
229+
209230
let toggle = e.target.getAttribute('data-style');
210231

211-
if(!toggle) return;
212-
e.preventDefault();
232+
if (!toggle) return;
233+
e.preventDefault();
213234

214-
switch(toggle){
235+
switch (toggle) {
215236
case 'highlight-only':
216237
Spotlight.start({ from: 3, highlightOnly: true });
217238
break;
218239

219240
case 'confirm-before-exit':
220241
Spotlight.start({ from: 3, highlightOnly: true, confirmOnExit: true });
221242
break;
222-
243+
223244
case 'change-overlay-color':
224-
Spotlight.setCover({ hex: '#bfff5c', alpha: 0.5});
245+
Spotlight.setCover({ hex: '#bfff5c', alpha: 0.5 });
225246
Spotlight.start({ from: 3, highlightOnly: true });
226247
break;
227248

228249
case 'popover-with-img':
229-
Spotlight.start({ from: 4});
250+
Spotlight.start({ from: 4 });
230251
break;
231252

232253
case 'event-listener':
@@ -236,7 +257,7 @@ <h2>Unlock the full potential of your web projects</h2>
236257
default:
237258
console.log(`${toggle} is not a toggle event`);
238259
}
239-
260+
240261
});
241262

242263
</script>

0 commit comments

Comments
 (0)