| | --- |
| | 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> |
| |
|
