mirror of
https://github.com/kamranahmedse/driver.js.git
synced 2026-08-30 17:05:33 +08:00
Redesign landing page
This commit is contained in:
Kamran Ahmed
+1
-1
@@ -1,3 +1,3 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [kamranahmedse]
|
||||
github: [nilbuild]
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="#FF6A00" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Alibaba Cloud</title><path d="M3.996 4.517h5.291L8.01 6.324 4.153 7.506a1.668 1.668 0 0 0-1.165 1.601v5.786a1.668 1.668 0 0 0 1.165 1.6l3.857 1.183 1.277 1.807H3.996A3.996 3.996 0 0 1 0 15.487V8.513a3.996 3.996 0 0 1 3.996-3.996m16.008 0h-5.291l1.277 1.807 3.857 1.182c.715.227 1.17.889 1.165 1.601v5.786a1.668 1.668 0 0 1-1.165 1.6l-3.857 1.183-1.277 1.807h5.291A3.996 3.996 0 0 0 24 15.487V8.513a3.996 3.996 0 0 0-3.996-3.996m-4.007 8.345H8.002v-1.804h7.995Z"/></svg>
|
||||
|
After Width: | Height: | Size: 562 B |
@@ -0,0 +1 @@
|
||||
<svg fill="#D22128" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apache</title><path d="M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Directus</title><path d="M19.187 13.909a1.74 1.74 0 0 1-.286-.092.657.657 0 0 1-.203-.139c.056-.488 0-.912.047-1.392.184-1.862 1.355-1.272 2.406-1.577.655-.184 1.31-.562 1.475-1.336a13.528 13.528 0 0 0-2.397-2.204c-2.85-2.028-6.574-2.84-9.958-2.277a5.113 5.113 0 0 0 2.238 2.074s-.917 0-1.703-.587c-.23.092-.692.274-.913.384a5.094 5.094 0 0 0 6.63.37c-.01.017-.185.285-.397 1.4-.47 2.38-1.826 2.195-3.504 1.596-3.485-1.264-5.403-.093-7.145-2.49-.507.286-.82.82-.82 1.402 0 .599.331 1.106.81 1.383.262-.348.38-.446.836-.446-.706.4-.79.75-1.094 1.718-.368 1.171-.212 2.37-1.936 2.683-.913.046-.894.664-1.226 1.586-.415 1.199-.968 1.678-2.047 2.812.443.535.904.6 1.374.406.968-.406 1.715-1.66 2.415-2.471.784-.904 2.665-.517 4.085-1.402.977-.599 1.457-1.41.811-2.784a2.72 2.72 0 0 1 .701 1.66c1.641-.213 3.836 1.788 5.836 2.12a3.574 3.574 0 0 1-.488-.82c-.23-.554-.304-1.06-.258-1.503.184 1.097 1.29 2.507 3.07 2.637.452.036.95-.019 1.466-.176.618-.184 1.19-.424 1.872-.295.507.093.977.35 1.272.784.443.645 1.41.784 1.844-.009-.977-2.554-3.67-2.72-4.813-3.015z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="#627EEA" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ethereum</title><path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 243 B |
@@ -0,0 +1 @@
|
||||
<svg fill="#1DBF73" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Fiverr</title><path d="M23.004 15.588a.995.995 0 1 0 .002-1.99.995.995 0 0 0-.002 1.99zm-.996-3.705h-.85c-.546 0-.84.41-.84 1.092v2.466h-1.61v-3.558h-.684c-.547 0-.84.41-.84 1.092v2.466h-1.61v-4.874h1.61v.74c.264-.574.626-.74 1.163-.74h1.972v.74c.264-.574.625-.74 1.162-.74h.527v1.316zm-6.786 1.501h-3.359c.088.546.43.858 1.006.858.43 0 .732-.175.83-.487l1.425.4c-.351.848-1.22 1.364-2.255 1.364-1.748 0-2.549-1.355-2.549-2.515 0-1.14.703-2.505 2.45-2.505 1.856 0 2.471 1.384 2.471 2.408 0 .224-.01.37-.02.477zm-1.562-.945c-.04-.42-.342-.81-.889-.81-.508 0-.81.225-.908.81h1.797zM7.508 15.44h1.416l1.767-4.874h-1.62l-.86 2.837-.878-2.837H5.72l1.787 4.874zm-6.6 0H2.51v-3.558h1.524v3.558h1.591v-4.874H2.51v-.302c0-.332.235-.536.606-.536h.918V8.412H2.85c-1.162 0-1.943.712-1.943 1.755v.4H0v1.316h.908v3.558z"/></svg>
|
||||
|
After Width: | Height: | Size: 907 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Frappe</title><path d="M2.88 0C1.29 0 0 1.29 0 2.88v18.24C0 22.71 1.29 24 2.88 24h18.24c1.59 0 2.88-1.29 2.88-2.88V2.88C24 1.29 22.71 0 21.12 0H2.88zM8.4 6h8.024v2.111H8.4V6zm0 5.385h7.49v2.113h-4.93V18H8.4v-6.615z"/></svg>
|
||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1 @@
|
||||
<svg fill="#179287" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitKraken</title><path d="M23.225 6.252a.478.478 0 00-.923.171c0 .053.013.119.026.171 2.15 5.71-.751 12.077-6.46 14.226a10.9 10.9 0 01-2.426.607v-5.155c.33-.066.646-.158.962-.264v4.338c5.445-1.332 8.794-6.817 7.463-12.262a10.147 10.147 0 00-4.958-6.487.472.472 0 00-.646.185.472.472 0 00.185.646c4.443 2.452 6.051 8.056 3.6 12.499a9.13 9.13 0 01-4.681 4.1v-3.836a1.472 1.472 0 001.028-1.398c0-.527-.264-1.002-.725-1.266.343-3.309 1.859-2.439 1.859-3.493v-.62c0-1.582-3.665-6.737-5.38-6.856h-.316c-1.714.119-5.379 5.274-5.379 6.856v.62c0 1.054 1.503.184 1.859 3.493a1.461 1.461 0 00-.725 1.266c0 .646.422 1.2 1.028 1.398v3.836C3.91 17.168 1.59 11.83 3.448 7.11a9.24 9.24 0 014.1-4.68.479.479 0 00.185-.66.487.487 0 00-.422-.237.444.444 0 00-.224.065 10.142 10.142 0 00-3.982 13.791 10.147 10.147 0 006.487 4.958V16.02c.316.106.633.198.962.264v5.155C4.503 20.636.257 15.085 1.062 9.034a10.9 10.9 0 01.606-2.426.489.489 0 00-.277-.62.494.494 0 00-.62.277c-2.333 6.21.805 13.131 7.015 15.452 1.2.448 2.452.699 3.73.751v-6.09c.172.012.489.012.489.012s.316 0 .488-.013v6.078c6.631-.277 11.773-5.867 11.496-12.499a12.458 12.458 0 00-.764-3.704zm-9.019 6.842a.995.995 0 011.398 0 .995.995 0 010 1.398.995.995 0 01-1.398 0 .988.988 0 010-1.398zm-4.43 1.398a.979.979 0 01-1.384 0 .995.995 0 010-1.398.995.995 0 011.398 0 .983.983 0 01-.013 1.398z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="#0071C5" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Intel</title><path d="M20.42 7.345v9.18h1.651v-9.18zM0 7.475v1.737h1.737V7.474zm9.78.352v6.053c0 .513.044.945.13 1.292.087.34.235.618.44.828.203.21.475.359.803.451.334.093.754.136 1.255.136h.216v-1.533c-.24 0-.445-.012-.593-.037a.672.672 0 0 1-.39-.173.693.693 0 0 1-.173-.377 4.002 4.002 0 0 1-.037-.606v-2.182h1.193v-1.416h-1.193V7.827zm-3.505 2.312c-.396 0-.76.08-1.082.241-.327.161-.6.384-.822.668l-.087.117v-.902H2.658v6.256h1.639v-3.214c.018-.588.16-1.02.433-1.299.29-.297.642-.445 1.044-.445.476 0 .841.149 1.082.433.235.284.359.686.359 1.2v3.324h1.663V12.97c.006-.89-.229-1.595-.686-2.09-.458-.495-1.1-.742-1.917-.742zm10.065.006a3.252 3.252 0 0 0-2.306.946c-.29.29-.525.637-.692 1.033a3.145 3.145 0 0 0-.254 1.273c0 .452.08.878.241 1.274.161.395.39.742.674 1.032.284.29.637.526 1.045.693.408.173.86.26 1.342.26 1.397 0 2.262-.637 2.782-1.23l-1.187-.904c-.248.297-.841.699-1.583.699-.464 0-.847-.105-1.138-.321a1.588 1.588 0 0 1-.593-.872l-.019-.056h4.915v-.587c0-.451-.08-.872-.235-1.267a3.393 3.393 0 0 0-.661-1.033 3.013 3.013 0 0 0-1.02-.692 3.345 3.345 0 0 0-1.311-.248zm-16.297.118v6.256h1.651v-6.256zm16.278 1.286c1.132 0 1.664.797 1.664 1.255l-3.32.006c0-.458.525-1.255 1.656-1.261zm7.073 3.814a.606.606 0 0 0-.606.606.606.606 0 0 0 .606.606.606.606 0 0 0 .606-.606.606.606 0 0 0-.606-.606zm-.008.105a.5.5 0 0 1 .002 0 .5.5 0 0 1 .5.501.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .498-.5zm-.233.155v.699h.13v-.285h.093l.173.285h.136l-.18-.297a.191.191 0 0 0 .118-.056c.03-.03.05-.074.05-.136 0-.068-.02-.117-.063-.154-.037-.038-.105-.056-.185-.056zm.13.099h.154c.019 0 .037.006.056.012a.064.064 0 0 1 .037.031c.013.013.012.031.012.056a.124.124 0 0 1-.012.055.164.164 0 0 1-.037.031c-.019.006-.037.013-.056.013h-.154Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="#FFCD00" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Kakao</title><path d="M3.0743 10.4403l.655.4728-1.6101 2.0192 1.8647 2.2373-.646.5004-2.201-2.6924zm-2.2376 5.102H0V8.5121l.8367-.182zm20.944-4.3837c-.4364 0-.7715.1637-1.0049.4912-.2338.3274-.3505.8064-.3505 1.437 0 .6247.1167 1.096.3505 1.4143.2334.3183.5685.4775 1.0049.4775.4423 0 .7804-.1593 1.0143-.4775.2332-.3182.35-.7896.35-1.4142 0-.6307-.1168-1.1097-.35-1.4371-.234-.3275-.572-.4912-1.0143-.4912m0-.673c.691 0 1.234.2245 1.6277.673.3944.4488.5916 1.0915.5916 1.9283 0 .8244-.1955 1.4583-.5868 1.901-.3909.4422-.9356.6637-1.6325.6637-.691 0-1.234-.2215-1.6277-.6638-.3944-.4426-.5916-1.0765-.5916-1.901 0-.8367.1984-1.4794.5957-1.9282.3973-.4485.9385-.673 1.6236-.673m-5.534 4.4658a1.496 1.496 0 0 0 .3576-.0456 2.8804 2.8804 0 0 0 .3713-.1181 2.0066 2.0066 0 0 0 .3488-.1774 2.0778 2.0778 0 0 0 .2895-.2229v-1.1641h-.8693c-.441 0-.7626.0758-.9645.2274-.2025.1516-.3031.391-.3031.7185 0 .5214.2563.7822.7697.7822m-1.5704-.7458c0-.5032.1682-.887.5045-1.1504.337-.2638.826-.396 1.4691-.396h.964v-.3182c0-.77-.3393-1.155-1.0185-1.155-.2184 0-.447.0304-.6869.091-.2398.0608-.4594.1365-.659.2274l-.2457-.5913c.2487-.1394.517-.2469.8047-.323.2878-.0754.5685-.1136.8414-.1136 1.176 0 1.7646.6276 1.7646 1.8826v3.1833h-.6188l-.1-.5457c-.2488.2001-.5134.3547-.796.464-.2817.1092-.55.1637-.8046.1637-.4429 0-.7899-.1258-1.0416-.3775-.2515-.2517-.3772-.5987-.3772-1.0413m-1.6508-3.7653l.655.4728-1.6095 2.0192 1.864 2.2373-.6454.5004-2.201-2.6924zm-2.237 5.102h-.8367V8.5121l.8368-.182zm-4.4936-.5909c.1148 0 .2339-.0151.3576-.0456a2.8794 2.8794 0 0 0 .3713-.1181 1.9842 1.9842 0 0 0 .3488-.1774 2.0477 2.0477 0 0 0 .29-.2229v-1.1641h-.8698c-.4404 0-.762.0758-.9645.2274-.202.1516-.3031.391-.3031.7185 0 .5214.2563.7822.7697.7822m-1.5704-.7458c0-.5032.1682-.887.5052-1.1504.3363-.2638.826-.396 1.4684-.396h.9646v-.3182c0-.77-.3399-1.155-1.019-1.155-.218 0-.4471.0304-.6863.091-.2398.0608-.4595.1365-.6597.2274l-.2457-.5913c.2487-.1394.517-.2469.8053-.323.2878-.0754.5684-.1136.8408-.1136 1.1766 0 1.7646.6276 1.7646 1.8826v3.1833h-.6182l-.1001-.5457c-.2487.2001-.514.3547-.7958.464-.282.1092-.5501.1637-.8053.1637-.4423 0-.7893-.1258-1.041-.3775-.2516-.2517-.3778-.5987-.3778-1.0413Z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="#A31F34" role="img" viewBox="0 0 52 24" xmlns="http://www.w3.org/2000/svg"><title>MIT</title><text x="26" y="19" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="21" font-weight="600" letter-spacing="0.5">MIT</text></svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Qgis</title><path d="M12.879 13.006v3.65l-3.004-3.048v-3.495h3.582l2.852 2.893h-3.43zm10.886 7.606V24h-3.654l-5.73-5.9v-3.55h3.354l6.03 6.062zm-10.828-1.448l3.372 3.371c-1.309.442-2.557.726-4.325.726C5.136 23.26 0 18.243 0 11.565 0 4.92 5.136 0 11.984 0 18.864 0 24 4.952 24 11.565c0 2.12-.523 4.076-1.457 5.759l-3.625-3.725a8.393 8.393 0 0 0 .24-2.005c0-4.291-3.148-7.527-7.1-7.527-3.954 0-7.248 3.236-7.248 7.527s3.33 7.6 7.247 7.6c.548 0 .661.017.88-.03z"/></svg>
|
||||
|
After Width: | Height: | Size: 564 B |
@@ -0,0 +1 @@
|
||||
<svg fill="#EE0000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Red Hat</title><path d="M16.009 13.386c1.577 0 3.86-.326 3.86-2.202a1.765 1.765 0 0 0-.04-.431l-.94-4.08c-.216-.898-.406-1.305-1.982-2.093-1.223-.625-3.888-1.658-4.676-1.658-.733 0-.947.946-1.822.946-.842 0-1.467-.706-2.255-.706-.757 0-1.25.515-1.63 1.576 0 0-1.06 2.99-1.197 3.424a.81.81 0 0 0-.028.245c0 1.162 4.577 4.974 10.71 4.974m4.101-1.435c.218 1.032.218 1.14.218 1.277 0 1.765-1.984 2.745-4.593 2.745-5.895.004-11.06-3.451-11.06-5.734a2.326 2.326 0 0 1 .19-.925C2.746 9.415 0 9.794 0 12.217c0 3.969 9.405 8.861 16.851 8.861 5.71 0 7.149-2.582 7.149-4.62 0-1.605-1.387-3.425-3.887-4.512"/></svg>
|
||||
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 128 128"><linearGradient id="a" x1="14.704" x2="110.985" y1="46.27" y2="92.024" gradientTransform="matrix(1 0 0 -1 0 130)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e40035"/><stop offset=".24" stop-color="#f60a48"/><stop offset=".352" stop-color="#f20755"/><stop offset=".494" stop-color="#dc087d"/><stop offset=".745" stop-color="#9717e7"/><stop offset="1" stop-color="#6c00f5"/></linearGradient><path fill="url(#a)" d="m124.5 21.3-4.4 68.6L78.3 0l46.2 21.3zm-29 88.7L64 128l-31.5-18 6.4-15.5h50.3l6.3 15.5zM64 34.1l16.5 40.2h-33L64 34.1zM7.9 89.9 3.5 21.3 49.7 0 7.9 89.9z"/><linearGradient id="b" x1="28.733" x2="91.742" y1="117.071" y2="45.195" gradientTransform="matrix(1 0 0 -1 0 130)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff31d9"/><stop offset="1" stop-color="#ff5be1" stop-opacity="0"/></linearGradient><path fill="url(#b)" d="m124.5 21.3-4.4 68.6L78.3 0l46.2 21.3zm-29 88.7L64 128l-31.5-18 6.4-15.5h50.3l6.3 15.5zM64 34.1l16.5 40.2h-33L64 34.1zM7.9 89.9 3.5 21.3 49.7 0 7.9 89.9z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185H1.408z"/><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle cx="64" cy="64" r="64"/><path fill="url(#a)" d="M106.317 112.014 49.167 38.4H38.4v51.179h8.614v-40.24l52.54 67.884a64.216 64.216 0 0 0 6.763-5.209z"/><path fill="url(#b)" d="M81.778 38.4h8.533v51.2h-8.533z"/><defs><linearGradient id="a" x1="109" x2="144.5" y1="116.5" y2="160.5" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="121" x2="120.799" y1="54" y2="106.875" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 749 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"/><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><linearGradient id="a" x1="27.5" x2="152" y1="3" y2="63.5" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="b" x1="95.8" x2="74" y1="32.6" y2="105.2" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="c" x1="18.4" x2="144.3" y1="64.2" y2="149.8" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="d" x1="75.2" x2="24.4" y1="74.5" y2="260.8" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient></defs><path fill="#76b3e1" d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"/><path fill="url(#a)" d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z" opacity=".3"/><path fill="#518ac8" d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z"/><path fill="url(#b)" d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z" opacity=".3"/><path fill="url(#c)" d="M104.654 65.91a36.226 36.226 0 0 0-38.641-12.076L16.1 69.934 0 98.111l90.164 15.295 16.1-28.981c3.22-5.635 2.415-12.075-1.61-18.516z"/><path fill="url(#d)" d="M88.553 94.085A36.226 36.226 0 0 0 49.912 82.01L0 98.11s42.667 32.202 75.673 24.152l2.415-.806c13.686-4.025 18.516-16.905 10.465-27.37z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M 110.43093,16.935847 C 98.552474,-0.076153 75.089104,-5.118154 58.130818,5.695846 l -29.793,19.000001 c -4.030441,2.529 -7.488786,5.871 -10.15468,9.814 -2.665895,3.943 -4.479469,8.399 -5.325138,13.083 a 25.478172,30.64 0 0 0 -0.572094,6.396 c 0.0183,5.831 1.446866,11.571 4.163485,16.729995 -2.546986,3.87201 -4.285721,8.22 -5.110602,12.78201 a 25.347621,30.483 0 0 0 0.345086,14.41199 c 1.072679,4.732998 3.078336,9.203998 5.900559,13.151998 11.877618,17.011 35.393374,22.053 52.299272,11.24 l 29.762238,-19.001 c 4.027946,-2.532 7.482126,-5.877998 10.141386,-9.824998 2.65841,-3.947 4.46282,-8.40699 5.29686,-13.093 0.3825,-2.107 0.57458,-4.244 0.5721,-6.386 -0.007,-5.81999 -1.41778,-11.550995 -4.11194,-16.708995 2.54616,-3.869 4.28489,-8.213 5.11143,-12.771 0.36921,-2.109 0.55713,-4.245 0.56212,-6.386 0.002,-7.595 -2.37152,-15 -6.78697,-21.178 z" fill="#ff3e00" id="path598" style="stroke-width:0.911885" /><path d="m 55.218941,112.66204 a 28.463375,34.23 0 0 1 -5.953776,0.76 c -3.820895,0.001 -7.585244,-0.925 -10.970416,-2.7 -3.384341,-1.774 -6.288887,-4.343 -8.464177,-7.487 -2.655917,-3.716 -4.082827,-8.171 -4.080332,-12.74 a 15.657767,18.83 0 0 1 0.332613,-3.833 15.424937,18.55 0 0 1 0.719276,-2.782 l 0.562116,-1.708 1.51921,1.156 c 3.528195,2.591 7.470493,4.564 11.658097,5.834 l 1.104275,0.333 -0.103941,1.104 v 0.573 c -0.0025,1.381 0.427408,2.73 1.228174,3.854 0.646933,0.958 1.51838,1.744 2.537839,2.288 a 8.2621121,9.936 0 0 0 3.311997,0.837 8.2513022,9.923 0 0 0 1.79029,-0.229 7.2717563,8.745 0 0 0 1.832699,-0.802 l 29.760566,-19.094 c 0.892236,-0.566 1.627311,-1.349 2.135377,-2.276 0.507236,-0.927 0.771662,-1.968 0.768337,-3.026 -0.0084,-1.381 -0.449027,-2.725 -1.259773,-3.844 -0.656912,-0.946 -1.533347,-1.718 -2.553637,-2.252 a 8.3128357,9.997 0 0 0 -3.307008,-0.81 8.246313,9.917 0 0 0 -1.79029,0.23 6.9383115,8.344 0 0 0 -1.821058,0.801 l -11.346268,7.25 a 24.375558,29.314 0 0 1 -6.04774,2.656 c -1.945787,0.502 -3.945624,0.758 -5.954608,0.76 -3.820063,0 -7.582749,-0.926 -10.967089,-2.698 -3.384341,-1.772 -6.289718,-4.338 -8.467502,-7.478 -2.652591,-3.718 -4.079502,-8.172 -4.080334,-12.74 0.0016,-1.285 0.113089,-2.567 0.332615,-3.833 0.509728,-2.816 1.597374,-5.495 3.196411,-7.867 1.598207,-2.373 3.67205,-4.387 6.089317,-5.914 l 29.792168,-18.99 c 1.869286,-1.19 3.908205,-2.09 6.04774,-2.667 1.945787,-0.499 3.945625,-0.75 5.953776,-0.75 3.82921,-0.01 7.603538,0.91 10.999519,2.681 3.395981,1.77 6.311338,4.34 8.497439,7.486 2.636787,3.727 4.045417,8.184 4.028777,12.75 a 15.748404,18.939 0 0 1 -0.33344,3.844 15.407475,18.529 0 0 1 -0.71845,2.781 l -0.56211,1.708 -1.519216,-1.114 c -3.525699,-2.595 -7.468833,-4.568 -11.658096,-5.834 l -1.104275,-0.343 0.103941,-1.105 v -0.572 c 0,-1.385 -0.429072,-2.735 -1.228174,-3.865 -0.65608,-0.945 -1.530022,-1.716 -2.549481,-2.25 a 8.3086779,9.992 0 0 0 -3.301186,-0.813 8.2213671,9.887 0 0 0 -1.768671,0.271 6.8185708,8.2 0 0 0 -1.831867,0.802 l -29.792165,18.99 a 5.8797701,7.071 0 0 0 -1.836857,1.79 4.7505482,5.713 0 0 0 -0.962914,2.377 5.0365955,6.057 0 0 0 -0.135541,1.104 c -8.31e-4,1.378 0.42824,2.722 1.228174,3.844 0.655248,0.945 1.530021,1.717 2.548649,2.25 a 8.2986996,9.98 0 0 0 3.301186,0.812 8.2471446,9.918 0 0 0 1.79029,-0.23 6.9433007,8.35 0 0 0 1.832699,-0.801 l 11.367057,-7.292 a 24.218399,29.125 0 0 1 6.04774,-2.656 28.52574,34.305 0 0 1 5.953776,-0.76 c 3.821727,0 7.586076,0.925 10.972078,2.697 3.386003,1.772 6.293877,4.339 8.473325,7.48 2.652591,3.717 4.079498,8.171 4.080338,12.74 0.003,1.299 -0.11226,2.596 -0.34343,3.874 -0.506403,2.817 -1.594046,5.497 -3.192254,7.87 -1.599037,2.372 -3.673715,4.385 -6.093476,5.911 l -29.739779,18.99 a 24.308205,29.233 0 0 1 -6.057719,2.667 z" fill="#ffffff" id="path600" style="stroke-width:0.911885" /></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M0 8.934l49.854.158 14.167 24.47 14.432-24.47L128 8.935l-63.834 110.14zm126.98.637l-24.36.02-38.476 66.053L25.691 9.592.942 9.572l63.211 107.89zm-25.149-.008l-22.745.168-15.053 24.647L49.216 9.73l-22.794-.168 37.731 64.476zm-75.834-.17l23.002.009m-23.002-.01l23.002.01" fill="none"/><path d="M25.997 9.393l23.002.009L64.035 34.36 79.018 9.404 102 9.398 64.15 75.053z" fill="#35495e"/><path d="M.91 9.569l25.067-.172 38.15 65.659L101.98 9.401l25.11.026-62.966 108.06z" fill="#41b883"/></svg>
|
||||
|
After Width: | Height: | Size: 561 B |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
@@ -0,0 +1,45 @@
|
||||
---
|
||||
import Container from "./Container.astro";
|
||||
---
|
||||
|
||||
<div class="bg-yellow-300/80">
|
||||
<Container>
|
||||
<div class="flex flex-col items-center text-center pb-14 md:pb-20">
|
||||
<img
|
||||
src="/rocket-fox.png"
|
||||
alt="driver.js mascot riding a rocket"
|
||||
width="901"
|
||||
height="1189"
|
||||
class="-mt-8 md:-mt-10 lg:-mt-7 h-48 w-auto md:h-60 lg:h-80"
|
||||
/>
|
||||
|
||||
<h2 class="mt-6 md:mt-8 text-3xl md:text-5xl font-bold text-black max-w-xl !leading-tight">
|
||||
Ship your first tour today
|
||||
</h2>
|
||||
<p class="mt-3 md:mt-4 text-base md:text-xl text-black/70 max-w-lg">
|
||||
A few lines of code and ~5kb is all it takes. No dependencies, no build step, just driver.js.
|
||||
</p>
|
||||
|
||||
<div class="mt-7 md:mt-9 flex flex-col sm:flex-row gap-4 items-stretch">
|
||||
<a
|
||||
href="/docs/installation"
|
||||
class="cursor-pointer rounded-2xl border-2 border-black bg-white px-7 py-2.5 md:py-3 text-center text-lg md:text-xl font-semibold text-black shadow-[5px_5px_0_0_#000] transition-all hover:bg-gray-100 active:translate-x-[3px] active:translate-y-[3px] active:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:outline-none"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/nilbuild/driver.js"
|
||||
target="_blank"
|
||||
class="flex cursor-pointer items-center justify-center gap-2 rounded-2xl border-2 border-black bg-gray-800 px-7 py-2.5 md:py-3 text-center text-lg md:text-xl font-semibold text-white shadow-[5px_5px_0_0_#000] transition-all hover:bg-gray-700 active:translate-x-[3px] active:translate-y-[3px] active:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:outline-none"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" class="h-3.5 w-3.5 md:h-4 md:w-4">
|
||||
<path
|
||||
d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.785 1.401 8.166L12 18.896l-7.335 3.866 1.401-8.166L.132 9.21l8.2-1.192z"
|
||||
></path>
|
||||
</svg>
|
||||
Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
import { Code } from "astro:components";
|
||||
import Container from "./Container.astro";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Product Tour",
|
||||
code: `import { driver } from "driver.js";
|
||||
import "driver.js/dist/driver.css";
|
||||
|
||||
const driverObj = driver({
|
||||
showProgress: true,
|
||||
steps: [
|
||||
{
|
||||
element: "#search",
|
||||
popover: { title: "Search", description: "Find anything in seconds." },
|
||||
},
|
||||
{
|
||||
element: "#notifications",
|
||||
popover: { title: "Stay updated", description: "All your alerts live here." },
|
||||
},
|
||||
{
|
||||
element: "#profile",
|
||||
popover: { title: "Your account", description: "Manage settings and billing." },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
driverObj.drive();`,
|
||||
},
|
||||
{
|
||||
name: "Single Highlight",
|
||||
code: `import { driver } from "driver.js";
|
||||
import "driver.js/dist/driver.css";
|
||||
|
||||
const driverObj = driver();
|
||||
|
||||
driverObj.highlight({
|
||||
element: "#new-feature",
|
||||
popover: {
|
||||
title: "New: Dark Mode 🌙",
|
||||
description: "Toggle the theme right from the toolbar.",
|
||||
},
|
||||
});`,
|
||||
},
|
||||
{
|
||||
name: "Customize",
|
||||
code: `import { driver } from "driver.js";
|
||||
|
||||
const driverObj = driver({
|
||||
animate: true,
|
||||
smoothScroll: true,
|
||||
allowClose: true,
|
||||
stagePadding: 4,
|
||||
popoverClass: "my-popover",
|
||||
nextBtnText: "Next →",
|
||||
prevBtnText: "← Back",
|
||||
doneBtnText: "Finish",
|
||||
});
|
||||
|
||||
driverObj.drive();`,
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="bg-white border-t border-gray-200 py-12 md:py-20">
|
||||
<Container>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-2 md:mb-3">Your first tour in seconds 🦊</h2>
|
||||
<p class="text-base text-black/70 md:text-lg mb-8 md:mb-10">
|
||||
Import driver.js, describe your steps, and call <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm text-black">drive()</code>. That's the whole setup.
|
||||
</p>
|
||||
|
||||
<div id="code-showcase" class="overflow-hidden rounded-2xl bg-[#272822] shadow-[6px_6px_0_0_#000]">
|
||||
<div class="flex flex-wrap gap-2 p-3 pb-5 md:gap-3 md:p-4 md:pb-6">
|
||||
{
|
||||
tabs.map((tab, i) => (
|
||||
<button
|
||||
type="button"
|
||||
data-code-tab={i}
|
||||
class:list={[
|
||||
"code-tab cursor-pointer rounded-lg border-2 px-4 py-2 text-sm font-medium transition-colors md:px-5 md:py-2 md:text-base",
|
||||
i === 0
|
||||
? "border-black bg-yellow-300 text-black"
|
||||
: "border-transparent bg-white/5 text-gray-400 hover:bg-white/10 hover:text-gray-200",
|
||||
]}
|
||||
>
|
||||
{tab.name}
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto px-3 pb-4 md:px-5 md:pb-5">
|
||||
{
|
||||
tabs.map((tab, i) => (
|
||||
<div data-code-panel={i} class:list={[i === 0 ? "block" : "hidden"]}>
|
||||
<Code code={tab.code} lang="js" theme="monokai" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
#code-showcase pre.astro-code {
|
||||
margin: 0;
|
||||
background: transparent !important;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#code-showcase pre.astro-code {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const root = document.getElementById("code-showcase");
|
||||
|
||||
if (root) {
|
||||
const activeClasses = ["border-black", "bg-yellow-300", "text-black"];
|
||||
const inactiveClasses = ["border-transparent", "bg-white/5", "text-gray-400", "hover:bg-white/10", "hover:text-gray-200"];
|
||||
|
||||
const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>("[data-code-tab]"));
|
||||
const panels = Array.from(root.querySelectorAll<HTMLElement>("[data-code-panel]"));
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
const index = tab.dataset.codeTab;
|
||||
|
||||
tabs.forEach((other) => {
|
||||
const active = other.dataset.codeTab === index;
|
||||
other.classList.remove(...activeClasses, ...inactiveClasses);
|
||||
other.classList.add(...(active ? activeClasses : inactiveClasses));
|
||||
});
|
||||
|
||||
panels.forEach((panel) => {
|
||||
const active = panel.dataset.codePanel === index;
|
||||
panel.classList.toggle("block", active);
|
||||
panel.classList.toggle("hidden", !active);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -15,7 +15,7 @@ export function DocsHeader(props: DocsHeaderProps) {
|
||||
<div className="border-b border-gray-200 flex items-center justify-between">
|
||||
<div className="text-right flex justify-end py-3 px-6">
|
||||
<a href="/" className="flex items-center justify-end text-xl font-bold">
|
||||
<img src="/driver-head.svg" alt="Astro" className="w-10 h-10 mr-2" />
|
||||
<img src="/mascot-head.png" alt="driver.js logo" width={639} height={534} className="h-10 w-auto mr-2" />
|
||||
driver.js
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ export function ExampleButton(props: ExampleButtonProps) {
|
||||
<button
|
||||
id={id}
|
||||
onClick={onClick}
|
||||
className="bg-transparent rounded-lg lg:rounded-xl py-2 px-4 font-medium text-black border-2 border-black md:text-base lg:text-lg hover:bg-yellow-300 hover:text-black transition-colors duration-100">
|
||||
className="cursor-pointer rounded-xl border-2 border-black bg-white px-4 py-2 font-medium text-black md:text-base lg:text-lg shadow-[3px_3px_0_0_#000] transition-all duration-100 hover:bg-yellow-300 active:translate-x-[2px] active:translate-y-[2px] active:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:outline-none">
|
||||
{ text }
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import { ExampleButton } from "./ExampleButton";
|
||||
---
|
||||
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-3 md:mb-4 lg:mb-6" data-examples-heading>Examples</h2>
|
||||
<p class="text-base md:text-xl lg:text-2xl text-black leading-6" data-examples-tagline>Here are just a few examples; find more <a
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-2 md:mb-3" data-examples-heading>Examples</h2>
|
||||
<p class="text-base md:text-lg text-black/70 leading-relaxed" data-examples-tagline>Click an example below to see driver.js in action, or find more <a
|
||||
class="text-black underline underline-offset-4" href="/docs/installation">in the documentation</a>.</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2 md:gap-2 lg:gap-3 my-6 md:my-8 lg:my-12" data-example-btns>
|
||||
<div class="flex flex-wrap gap-3 md:gap-3 lg:gap-4 mt-6 md:mt-8" data-example-btns>
|
||||
<ExampleButton id="animated-tour" text="Animated Tour" />
|
||||
<ExampleButton id="static-tour" text="Non-Animated Tour" />
|
||||
<ExampleButton id="async-tour" text="Async Tour" />
|
||||
@@ -20,7 +20,7 @@ import { ExampleButton } from "./ExampleButton";
|
||||
<ExampleButton id="customizing-popover" text="Customizing Popover" />
|
||||
<ExampleButton id="hooks-everything" text="Hooks for Everything" />
|
||||
<a href="/docs/installation"
|
||||
class="items-center flex text-base md:text-base lg:text-lg text-gray-900 bg-yellow-300 rounded-lg lg:rounded-xl px-5 py-2 hover:bg-yellow-500 hover:text-black">
|
||||
class="cursor-pointer flex items-center rounded-xl border-2 border-black bg-yellow-300 px-5 py-2 text-base lg:text-lg font-medium text-black shadow-[3px_3px_0_0_#000] transition-all duration-100 hover:bg-yellow-400 active:translate-x-[2px] active:translate-y-[2px] active:shadow-[1px_1px_0_0_#000]">
|
||||
and much more ...
|
||||
</a>
|
||||
</div>
|
||||
@@ -97,17 +97,17 @@ import { ExampleButton } from "./ExampleButton";
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "[data-github-link]",
|
||||
element: "[data-driver-license]",
|
||||
popover: {
|
||||
title: "MIT Licensed",
|
||||
description: "Driver.js is MIT licensed and is used by thousands of companies around the world.",
|
||||
description: "Driver.js is MIT licensed and is used by tens thousands of companies around the world.",
|
||||
side: "top",
|
||||
align: "start"
|
||||
}
|
||||
},
|
||||
{
|
||||
popover: {
|
||||
description: "<img style='width: 270px; height: 206.65px; margin-bottom: 10px; border-radius: 5px;' src='/animated-example.webp' />That's it for now, make sure to <a class='underline font-medium' href='/docs/installation'>visit the docs</a> for more examples and use-cases.",
|
||||
description: "<img style='width: 270px; margin-bottom: 10px; border-radius: 5px;' src='/fox-gif.gif' />That's it for now, make sure to <a class='underline font-medium outline-0' href='/docs/installation'>visit the docs</a> for more examples and use-cases.",
|
||||
side: "bottom",
|
||||
align: "start",
|
||||
showButtons: [],
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
const featureList = [
|
||||
const features = [
|
||||
"Supports all Major Browsers",
|
||||
"Works on Mobile Devices",
|
||||
"Highly Customizable",
|
||||
@@ -15,25 +15,26 @@ const featureList = [
|
||||
];
|
||||
---
|
||||
|
||||
<div class="marquee-track flex h-full w-max items-center">
|
||||
{
|
||||
// The list is rendered twice so the animation can loop seamlessly.
|
||||
[0, 1].map(copy => (
|
||||
<p class="flex items-center text-lg whitespace-nowrap md:text-xl lg:text-2xl" aria-hidden={copy === 1}>
|
||||
{featureList.map(feature => (
|
||||
<span class="flex items-center">
|
||||
{feature}
|
||||
<span class="mx-2 md:mx-3">·</span>
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<div class="bg-black overflow-hidden">
|
||||
<div class="marquee-track flex h-12 w-max items-center md:h-14">
|
||||
{
|
||||
[0, 1].map(copy => (
|
||||
<div class="flex items-center" aria-hidden={copy === 1}>
|
||||
{features.map(feature => (
|
||||
<span class="flex items-center">
|
||||
<span class="whitespace-nowrap px-5 text-sm font-medium text-white md:text-base">{feature}</span>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-yellow-400" />
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.marquee-track {
|
||||
animation: marquee-scroll 30s linear infinite;
|
||||
animation: marquee-scroll 32s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,50 +2,54 @@
|
||||
import Container from "./Container.astro";
|
||||
---
|
||||
|
||||
<div class="bg-white border-b border-gray-100 select-none">
|
||||
<div class="bg-white border-b border-gray-200 select-none">
|
||||
<Container>
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="/" class="flex items-center justify-end text-xl font-bold text-gray-900 font-semibold gap-2.5">
|
||||
<img src="/favicon.svg" alt="driver.js logo" class="h-10" />
|
||||
<img src="/mascot-head.png" alt="driver.js logo" width="639" height="534" class="h-10 w-auto" />
|
||||
driver.js
|
||||
</a>
|
||||
<span class="flex items-center gap-7">
|
||||
<a href="/docs/installation" class="hover:underline underline-offset-4 text-lg font-medium text-gray-900">
|
||||
<span class="flex items-center gap-3">
|
||||
<a href="/docs/installation" class="rounded-lg px-3 py-1.5 text-base font-medium text-gray-900 transition-colors hover:bg-gray-100">
|
||||
<span class="hidden sm:inline">Documentation</span>
|
||||
<span class="inline sm:hidden">Docs</span>
|
||||
</a>
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="hover:underline underline-offset-4 text-lg font-medium text-gray-900">GitHub</a>
|
||||
<a href="https://github.com/nilbuild/driver.js" target="_blank" aria-label="GitHub" class="text-gray-900 hover:text-gray-600">
|
||||
<svg viewBox="0 0 496 512" fill="currentColor" class="h-6 w-6" aria-hidden="true">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<div class="bg-yellow-300/80 overflow-hidden via-transparent">
|
||||
<Container>
|
||||
<div class="py-10 md:py-14 lg:py-20 flex justify-start items-center gap-4">
|
||||
<div class="py-10 md:py-14 lg:py-25 flex justify-start items-center gap-4">
|
||||
<div class="flex-grow" data-hero-text>
|
||||
<h1 data-driver-name class="text-7xl md:text-8xl lg:text-9xl mb-2 md:mb-3 lg:mb-4 font-bold">driver.js</h1>
|
||||
<p data-driver-tagline class="text-base md:text-2xl lg:text-3xl !leading-normal">
|
||||
Lightweight JavaScript library for product tours, highlights, and contextual help to guide users through your
|
||||
Lightweight JavaScript library for product tours, highlights, and contextual help for your
|
||||
product.
|
||||
</p>
|
||||
<div class="mt-4 md:mt-8 lg:mt-10 flex flex-col sm:flex-row gap-2 items-stretch">
|
||||
<div class="mt-4 md:mt-8 lg:mt-10 flex flex-col sm:flex-row gap-4 items-stretch">
|
||||
<button
|
||||
data-demo-tour
|
||||
class="bg-black rounded-xl py-2 md:py-3 px-6 font-medium text-white text-lg md:text-xl focus:outline-0 hover:bg-gray-800 focus:bg-gray-800"
|
||||
class="cursor-pointer rounded-2xl border-2 border-black bg-gray-800 px-7 py-2.5 md:py-3 text-lg md:text-xl font-semibold text-white shadow-[5px_5px_0_0_#000] transition-all hover:bg-gray-700 active:translate-x-[3px] active:translate-y-[3px] active:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:outline-none"
|
||||
>
|
||||
Show Demo
|
||||
</button>
|
||||
<a
|
||||
href="/docs/installation"
|
||||
data-docs-link
|
||||
class="bg-white rounded-xl py-2 md:py-3 px-6 font-medium text-black text-lg md:text-xl focus:outline-0 border-2 border-black text-center hover:bg-gray-200 focus:bg-gray-200"
|
||||
class="cursor-pointer rounded-2xl border-2 border-black bg-white px-7 py-2.5 md:py-3 text-center text-lg md:text-xl font-semibold text-black shadow-[5px_5px_0_0_#000] transition-all hover:bg-gray-100 active:translate-x-[3px] active:translate-y-[3px] active:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:outline-none"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 hidden sm:flex">
|
||||
<img src="/driver.svg" alt="driver.js image" class="sm:h-48 md:h-60 lg:h-72" />
|
||||
<img src="/fox-mascot.png" alt="driver.js mascot" width="672" height="916" class="w-auto sm:h-64 md:h-80 lg:h-[380px] relative top-[12px]" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
import Container from "./Container.astro";
|
||||
|
||||
const permissions = [
|
||||
"Personal projects",
|
||||
"Commercial products",
|
||||
"Unlimited projects",
|
||||
"No attribution required",
|
||||
];
|
||||
|
||||
const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M5 12l5 5L20 7"/></svg>`;
|
||||
---
|
||||
|
||||
<div class="bg-white border-t border-gray-200 pt-20 pb-28">
|
||||
<Container>
|
||||
<div class="mx-auto max-w-2xl text-center" data-driver-license="MIT">
|
||||
<span class="inline-flex items-center gap-2 rounded-full border-2 border-black bg-yellow-300 px-4 py-1.5 text-sm font-semibold text-black shadow-[3px_3px_0_0_#000]">
|
||||
MIT Licensed
|
||||
</span>
|
||||
|
||||
<h2 class="mt-5 text-3xl md:text-5xl font-bold tracking-tight text-black !leading-tight">
|
||||
Free for everyone, <span class="marker">forever</span>
|
||||
</h2>
|
||||
<p class="mx-auto mt-4 max-w-lg text-base md:text-lg text-black/60 mb-8">
|
||||
driver.js is open source under the MIT license. Use it in your side
|
||||
projects, your startup, or your client work.
|
||||
</p>
|
||||
|
||||
<ul class="mx-auto mt-8 grid w-fit grid-cols-1 gap-x-10 gap-y-3 text-left sm:grid-cols-2">
|
||||
{
|
||||
permissions.map((item) => (
|
||||
<li class="flex items-center gap-2.5 text-sm md:text-base font-medium text-black/80">
|
||||
<span class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-yellow-300 text-black">
|
||||
<Fragment set:html={checkIcon} />
|
||||
</span>
|
||||
{item}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.marker {
|
||||
background-color: #fef08a;
|
||||
border-radius: 0.4em 0.7em 0.45em 0.65em;
|
||||
padding: 0.02em 0.3em;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
</style>
|
||||
@@ -2,9 +2,9 @@
|
||||
import Container from "./Container.astro";
|
||||
import { getFormattedStars } from "../lib/github";
|
||||
|
||||
const starCount = getFormattedStars('kamranahmedse/driver.js');
|
||||
const starCount = getFormattedStars('nilbuild/driver.js');
|
||||
---
|
||||
<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t">
|
||||
<div class="pt-10 md:pt-12 lg:pt-24 pb-16 md:pb-20 lg:pb-28 bg-white text-black border-t border-gray-200">
|
||||
<Container>
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
@@ -15,7 +15,7 @@ const starCount = getFormattedStars('kamranahmedse/driver.js');
|
||||
thousands of companies around the world.</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-2 md:gap-3">
|
||||
<a href="https://github.com/kamranahmedse/driver.js"
|
||||
<a href="https://github.com/nilbuild/driver.js"
|
||||
data-github-link
|
||||
target="_blank"
|
||||
class="flex justify-center items-center font-medium text-lg md:text-xl lg:text-2xl rounded-lg lg:rounded-xl py-2 lg:py-3 px-5 bg-yellow-300 border-black hover:bg-yellow-400">
|
||||
|
||||
@@ -13,7 +13,7 @@ const { activePath, groupedGuides, activeGuideTitle } = Astro.props;
|
||||
<div class="relative sh:sticky top-0">
|
||||
<div class="justify-end flex pt-10 pb-5 px-5">
|
||||
<a href="/" class="block items-center justify-end mb-2">
|
||||
<img src="/driver-head.svg" alt="Astro" class="w-16 h-16" />
|
||||
<img src="/mascot-head.png" alt="driver.js logo" width="639" height="534" class="h-16 w-auto" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
import Container from "./Container.astro";
|
||||
import { getFormattedStars } from "../lib/github";
|
||||
|
||||
const stars = await getFormattedStars("nilbuild/driver.js");
|
||||
|
||||
const npmIcon = `<svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path d="M20.001 3C20.5533 3 21.001 3.44772 21.001 4V20C21.001 20.5523 20.5533 21 20.001 21H4.00098C3.44869 21 3.00098 20.5523 3.00098 20V4C3.00098 3.44772 3.44869 3 4.00098 3H20.001ZM17.001 7H7.00098V17H12.001V9.5H14.501V17H17.001V7Z"/></svg>`;
|
||||
const githubIcon = `<svg viewBox="0 0 496 512" fill="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>`;
|
||||
const boltIcon = `<svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path d="M13 2L3 14h7v8l10-12h-7z"/></svg>`;
|
||||
|
||||
const stats = [
|
||||
{ value: "4.3M", label: "downloads / month", icon: npmIcon },
|
||||
{ value: `${stars}+`, label: "github stars", icon: githubIcon },
|
||||
{ value: "286M", label: "cdn hits / month", icon: boltIcon },
|
||||
];
|
||||
|
||||
const frameworks = [
|
||||
{ name: "React", logo: "/frameworks/react.svg" },
|
||||
{ name: "Vue", logo: "/frameworks/vue.svg" },
|
||||
{ name: "Angular", logo: "/frameworks/angular.svg" },
|
||||
{ name: "Svelte", logo: "/frameworks/svelte.svg" },
|
||||
{ name: "Solid", logo: "/frameworks/solid.svg" },
|
||||
{ name: "Next.js", logo: "/frameworks/nextjs.svg" },
|
||||
{ name: "Vanilla JS", logo: "/frameworks/javascript.svg" },
|
||||
];
|
||||
|
||||
const marqueeItems = [...frameworks, ...frameworks, ...frameworks];
|
||||
---
|
||||
|
||||
<div class="bg-white border-t border-gray-200 py-14 md:py-20">
|
||||
<Container>
|
||||
<div class="grid grid-cols-1 gap-10 text-center sm:grid-cols-3 sm:gap-6">
|
||||
{
|
||||
stats.map((stat) => (
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-5xl md:text-6xl font-bold tracking-tight text-black tabular-nums">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-2 text-sm md:text-base text-black/50">
|
||||
<Fragment set:html={stat.icon} />
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<p class="mt-14 text-center text-base text-black/40">
|
||||
Works with any framework or library, or even with vanilla JavaScript.
|
||||
</p>
|
||||
</Container>
|
||||
|
||||
<div class="marquee-mask mt-6 overflow-hidden py-2">
|
||||
<div class="marquee-track flex w-max items-center gap-5">
|
||||
{
|
||||
marqueeItems.map((framework) => (
|
||||
<span class="flex items-center gap-2.5 rounded-2xl border-2 border-black bg-white px-5 py-3 shadow-[3px_3px_0_0_#000]">
|
||||
<img src={framework.logo} alt={framework.name} width="28" height="28" class="h-7 w-7" />
|
||||
<span class="text-base font-semibold whitespace-nowrap">{framework.name}</span>
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.marquee-mask {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
|
||||
mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
|
||||
}
|
||||
.marquee-track {
|
||||
animation: marquee-scroll 30s linear infinite;
|
||||
}
|
||||
@keyframes marquee-scroll {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-33.333%);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
import Container from "./Container.astro";
|
||||
|
||||
const companies = [
|
||||
{ name: "Red Hat", logo: "/companies/redhat.svg", ratio: "1 / 1" },
|
||||
{ name: "Alibaba", logo: "/companies/alibaba.svg", ratio: "1 / 1" },
|
||||
{ name: "MIT", logo: "/companies/mit.svg", wordmark: true, ratio: "52 / 24" },
|
||||
{ name: "Ethereum", logo: "/companies/ethereum.svg", ratio: "1 / 1" },
|
||||
{ name: "GitKraken", logo: "/companies/gitkraken.svg", ratio: "1 / 1" },
|
||||
{ name: "Apache", logo: "/companies/apache.svg", ratio: "1 / 1" },
|
||||
{ name: "Intel", logo: "/companies/intel.svg", ratio: "1 / 1" },
|
||||
{ name: "Fiverr", logo: "/companies/fiverr.svg", ratio: "1 / 1" },
|
||||
];
|
||||
---
|
||||
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<Container>
|
||||
<div class="py-7 md:py-9">
|
||||
<div class="flex flex-wrap items-center justify-center gap-2.5">
|
||||
{
|
||||
companies.map(c => (
|
||||
<span class="group flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200">
|
||||
<img
|
||||
src={c.logo}
|
||||
alt={c.name}
|
||||
style={`aspect-ratio: ${c.ratio}`}
|
||||
class={`w-auto opacity-70 grayscale transition duration-200 group-hover:opacity-100 group-hover:grayscale-0 ${c.wordmark ? "h-3.5" : "h-4"}`}
|
||||
/>
|
||||
{!c.wordmark && c.name}
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<p class="mx-auto mt-5 max-w-2xl text-center text-sm text-gray-500">
|
||||
<span class="marker">4M+</span> monthly downloads, used by <span class="marker">tens of thousands of projects</span>.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.marker {
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
padding: 0.06em 0.4em;
|
||||
background-color: #fef08a;
|
||||
border-radius: 0.4em 0.7em 0.45em 0.65em;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
</style>
|
||||
@@ -7,12 +7,12 @@ export interface Props {
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="flex flex-col gap-2 md:gap-2 lg:gap-4 pt-2">
|
||||
<span class="border-b-2 border-b-black block w-[30px] md:w-[40px] lg:w-[50px]"></span>
|
||||
<h3 class="text-xl md:text-2xl lg:text-3xl mt-2 md:mt-3 lg:mt-0 font-bold text-black">
|
||||
{ title }
|
||||
<div>
|
||||
<span class="block h-1 w-8 rounded-full bg-yellow-400"></span>
|
||||
<h3 class="mt-3 text-lg md:text-xl font-semibold text-black">
|
||||
{title}
|
||||
</h3>
|
||||
<p class="md:text-lg lg:text-xl text-black">
|
||||
{ description }
|
||||
<p class="mt-1.5 text-sm md:text-base text-black/60">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,40 @@
|
||||
---
|
||||
import Container from "./Container.astro";
|
||||
import UsecaseItem from "./UsecaseItem.astro";
|
||||
---
|
||||
<p class="text-base md:text-xl lg:text-2xl text-black">Due to its extensive API, driver.js can be used for a wide range of use
|
||||
cases.</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-12 mt-10">
|
||||
<UsecaseItem
|
||||
title="Onboard Users"
|
||||
description="Onboard your users by explaining how to use your product and answer common questions."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Remove Distractions"
|
||||
description="With highlight feature, you can remove distractions and focus your users attention on what matters."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Contextual Help"
|
||||
description="Provide contextual help for your users, explain how to use your product and answer common questions."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Feature Adoption"
|
||||
description="Highlight new features, explain how to use them and make sure your users don't miss them."
|
||||
/>
|
||||
|
||||
<div class="bg-white border-t border-gray-200 py-12 md:py-20">
|
||||
<Container>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-2 md:mb-3">Use Cases</h2>
|
||||
<p class="text-base text-black/70 md:text-lg mb-14">
|
||||
Due to its extensive API, driver.js can be used for a wide range of use cases.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 grid grid-cols-1 gap-x-8 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-10">
|
||||
<UsecaseItem
|
||||
title="Onboard Users"
|
||||
description="Explain how to use your product and answer common questions."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Interactive Tutorials"
|
||||
description="Walk users through tasks step by step, letting them act as they learn."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Feature Adoption"
|
||||
description="Spotlight new features so your users don't miss them."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Contextual Help"
|
||||
description="Provide in-context guidance right where your users need it."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Form Guidance"
|
||||
description="Guide users field by field and point straight to inputs that need fixing."
|
||||
/>
|
||||
<UsecaseItem
|
||||
title="Remove Distractions"
|
||||
description="Highlight what matters and focus your users' attention."
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,10 @@ heading.
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Fixed
|
||||
|
||||
- Popover no longer jumps when its content has images that load after render.
|
||||
|
||||
## 1.6.0
|
||||
|
||||
### Added
|
||||
|
||||
@@ -29,7 +29,7 @@ const canonical = new URL(permalink, Astro.site ?? "https://driverjs.com").href;
|
||||
|
||||
<meta content="Kamran Ahmed" name="author" />
|
||||
<meta content="summary_large_image" name="twitter:card" />
|
||||
<meta content="@kamrify" name="twitter:creator" />
|
||||
<meta content="@nilbuild" name="twitter:creator" />
|
||||
<meta content={title} name="twitter:title" />
|
||||
<meta content={description} name="twitter:description" />
|
||||
<meta content="https://driverjs.com/og-img.png" name="twitter:image" />
|
||||
@@ -45,7 +45,10 @@ const canonical = new URL(permalink, Astro.site ?? "https://driverjs.com").href;
|
||||
<meta content={canonical} property="og:url" />
|
||||
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
|
||||
<style is:global>
|
||||
.driver-popover.driverjs-theme {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
const formatter = Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
});
|
||||
|
||||
const defaultStarCount = 17000;
|
||||
const defaultStarCount = 25800;
|
||||
let starCount: number | undefined = undefined;
|
||||
|
||||
export async function countStars(repo = "kamranahmedse/driver.js"): Promise<number> {
|
||||
export async function countStars(repo = "nilbuild/driver.js"): Promise<number> {
|
||||
if (starCount) {
|
||||
return starCount;
|
||||
}
|
||||
@@ -23,7 +24,7 @@ export async function countStars(repo = "kamranahmedse/driver.js"): Promise<numb
|
||||
return starCount;
|
||||
}
|
||||
|
||||
export async function getFormattedStars(repo = "kamranahmedse/driver.js"): Promise<string> {
|
||||
export async function getFormattedStars(repo = "nilbuild/driver.js"): Promise<string> {
|
||||
const stars = import.meta.env.DEV ? defaultStarCount : await countStars(repo);
|
||||
|
||||
return formatter.format(stars);
|
||||
|
||||
+26
-16
@@ -1,53 +1,63 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import FeatureMarquee from "../components/FeatureMarquee.astro";
|
||||
import TrustedBy from "../components/TrustedBy.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import UsecaseItem from "../components/UsecaseItem.astro";
|
||||
import { ExampleButton } from "../components/ExampleButton";
|
||||
import HeroSection from "../components/HeroSection.astro";
|
||||
import Examples from "../components/Examples.astro";
|
||||
import UsecaseList from "../components/UsecaseList.astro";
|
||||
import OpenSourceLove from "../components/OpenSourceLove.astro";
|
||||
import CodeShowcase from "../components/CodeShowcase.astro";
|
||||
import Stats from "../components/Stats.astro";
|
||||
import License from "../components/License.astro";
|
||||
import CallToAction from "../components/CallToAction.astro";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
<BaseLayout
|
||||
title="Driver.js — Product Tours & Highlights in Vanilla JS"
|
||||
description="Driver.js is a lightweight, no-dependency JavaScript library for building product tours, feature highlights and contextual help — just ~5kb and MIT licensed."
|
||||
title="Driver.js - Product Tours & Highlights in Vanilla JS"
|
||||
description="Driver.js is a lightweight, no-dependency JavaScript library for building product tours, feature highlights and contextual help. It is just ~5kb and MIT licensed."
|
||||
permalink="/"
|
||||
>
|
||||
<HeroSection />
|
||||
<div
|
||||
class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"
|
||||
data-feat-marquee>
|
||||
<FeatureMarquee />
|
||||
</div>
|
||||
|
||||
<div class="py-10 md:py-12 lg:py-24 bg-white text-black">
|
||||
<FeatureMarquee />
|
||||
|
||||
<TrustedBy />
|
||||
|
||||
<div class="pt-10 md:pt-12 lg:pt-20 pb-12 md:pb-20 bg-white text-black">
|
||||
<Container>
|
||||
<Examples />
|
||||
<UsecaseList />
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<OpenSourceLove />
|
||||
<UsecaseList />
|
||||
|
||||
<CodeShowcase />
|
||||
|
||||
<Stats />
|
||||
|
||||
<License />
|
||||
|
||||
<CallToAction />
|
||||
|
||||
<div class="py-8 bg-black text-white">
|
||||
<Container>
|
||||
<p class="text-lg text-white text-center">
|
||||
MIT Licensed © {currentYear}
|
||||
<span class="hidden sm:inline">
|
||||
<span class="mx-3">·</span>
|
||||
<span class="mx-7">·</span>
|
||||
<a href="/docs/installation" class="">
|
||||
Docs
|
||||
</a>
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="ml-5">
|
||||
<a href="https://github.com/nilbuild/driver.js" target="_blank" class="ml-5">
|
||||
GitHub
|
||||
<img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
|
||||
<img src="/arrow.svg" width="16" height="16" class="h-3 w-3 inline-block ml-2" alt="" />
|
||||
</a>
|
||||
<a href="https://twitter.com/kamrify" target="_blank" class=" ml-5">
|
||||
<a href="https://twitter.com/nilbuild" target="_blank" class=" ml-5">
|
||||
Twitter
|
||||
<img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
|
||||
<img src="/arrow.svg" width="16" height="16" class="h-3 w-3 inline-block ml-2" alt="" />
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<h1 align="center"><img height="150" src="https://driverjs.com/driver.svg" /><br> Driver.js</h1>
|
||||
<h1 align="center"><img height="150" src="https://driverjs.com/mascot-head.png" /><br> Driver.js</h1>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/kamranahmedse/driver.js/blob/master/license">
|
||||
<a href="https://github.com/nilbuild/driver.js/blob/master/license">
|
||||
<img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
|
||||
</a>
|
||||
<a href="https://www.jsdelivr.com/package/npm/driver.js">
|
||||
@@ -53,9 +53,9 @@ Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly
|
||||
The library lives in `src/`. To try your changes against a set of live examples, run the playground — an Astro app in `playground/` that imports the library straight from source, so edits hot-reload instantly:
|
||||
|
||||
```sh
|
||||
pnpm install # install the library's dev dependencies
|
||||
pnpm run playground:install # one-time install of the playground's dependencies
|
||||
pnpm dev # start the playground
|
||||
pnpm install
|
||||
pnpm run playground:install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Each example lives in its own file under `playground/src/examples/` and shows up as a page in the sidebar. To add one, drop an entry into the relevant group (`highlight.ts`, `popover.ts`, `tour.ts`, `api.ts`).
|
||||
@@ -63,8 +63,8 @@ Each example lives in its own file under `playground/src/examples/` and shows up
|
||||
Other useful scripts:
|
||||
|
||||
```sh
|
||||
pnpm build # type-check and build the distributable library into dist/
|
||||
pnpm test # run the unit tests (Vitest)
|
||||
pnpm build
|
||||
pnpm test
|
||||
```
|
||||
|
||||
## Contributions
|
||||
|
||||
@@ -248,6 +248,7 @@ export function renderPopover(element: Element, step: DriveStep) {
|
||||
}
|
||||
|
||||
repositionPopover(element, step);
|
||||
repositionOnImagesLoad(popover, element, step);
|
||||
bringInView(popoverWrapper);
|
||||
|
||||
// Focus on the first focusable element in active element or popover
|
||||
@@ -258,6 +259,21 @@ export function renderPopover(element: Element, step: DriveStep) {
|
||||
}
|
||||
}
|
||||
|
||||
function repositionOnImagesLoad(popover: PopoverDOM, element: Element, step: DriveStep) {
|
||||
const images = popover.wrapper.querySelectorAll("img");
|
||||
|
||||
images.forEach(image => {
|
||||
if (image.complete) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reposition = () => repositionPopover(element, step);
|
||||
|
||||
image.addEventListener("load", reposition, { once: true });
|
||||
image.addEventListener("error", reposition, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
function createPopover(): PopoverDOM {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.classList.add("driver-popover");
|
||||
|
||||
Reference in New Issue
Block a user