|
--- |
|
import Analytics from "../components/Analytics/Analytics.astro"; |
|
export interface Props { |
|
permalink?: string; |
|
title?: string; |
|
description?: string; |
|
} |
|
|
|
const { |
|
permalink = "", |
|
title = "driver.js", |
|
description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.", |
|
} = Astro.props; |
|
--- |
|
|
|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
|
|
<title>{title}</title> |
|
<meta name="robots" content="index,follow" /> |
|
<meta name="description" itemprop="description" content={description} /> |
|
|
|
<link href={`https://driverjs.com${permalink}`} rel="canonical" /> |
|
|
|
<meta content="Kamran Ahmed" name="author" /> |
|
<meta content="summary_large_image" name="twitter:card" /> |
|
<meta content="@kamrify" name="twitter:creator" /> |
|
<meta content="1200" property="og:image:width" /> |
|
<meta content="630" property="og:image:height" /> |
|
<meta content="https://driverjs.com/og-img.png" property="og:image" /> |
|
<meta content="driverjs.com" property="og:image:alt" /> |
|
<meta content="driverjs.com" property="og:site_name" /> |
|
<meta content="Driver.js" property="og:title" /> |
|
<meta |
|
content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." |
|
property="og:description" |
|
/> |
|
<meta content="website" property="og:type" /> |
|
<meta content="https://driverjs.com/" property="og:url" /> |
|
|
|
<meta name="viewport" content="width=device-width" /> |
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
|
|
|
<style is:global> |
|
.driver-popover.driverjs-theme { |
|
background-color: #fde047; |
|
color: #000; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-title { |
|
font-size: 20px; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-title, |
|
.driver-popover.driverjs-theme .driver-popover-description, |
|
.driver-popover.driverjs-theme .driver-popover-progress-text { |
|
color: #000; |
|
} |
|
|
|
.driver-popover.driverjs-theme button { |
|
flex: 1; |
|
text-align: center; |
|
background-color: #000; |
|
color: #ffffff; |
|
border: 1px solid #000; |
|
text-shadow: none; |
|
font-size: 14px; |
|
padding: 5px 8px; |
|
border-radius: 6px; |
|
} |
|
|
|
.driver-popover.driverjs-theme button:focus, |
|
.driver-popover.driverjs-theme button:hover { |
|
background-color: #000; |
|
opacity: 0.8; |
|
color: #ffffff; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-navigation-btns { |
|
justify-content: space-between; |
|
gap: 3px; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-close-btn { |
|
color: #9b9b9b; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-close-btn:hover { |
|
color: #000; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow { |
|
border-left-color: #fde047; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow { |
|
border-right-color: #fde047; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow { |
|
border-top-color: #fde047; |
|
} |
|
|
|
.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { |
|
border-bottom-color: #fde047; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<slot /> |
|
<Analytics /> |
|
</body> |
|
</html> |
|
|
