wyl/jsonhero-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chrome extension banner (#74)

Browse Source 
* Added chrome extension banner

* Only show the chrome banner when in Chrome

Co-authored-by: James Ritchie <james@jamesritchie.co.uk>
This commit is contained in:
Eric Allam
2022-06-06 14:11:20 +01:00
committed by GitHub
co-authored by James Ritchie
parent 1b42269739
commit fa7010da0b
6 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Home/HomeChromeExtensionPrompt.tsx
+20
View File
@@ -0,0 +1,20 @@
import { ChromeExtensionBadge } from "../Icons/ChromeExtensionBadge";
import { Body } from "../Primitives/Body";
export function HomeChromeExtensionPrompt() {
return (
<div className="flex items-center justify-center w-full py-3 bg-indigo-600">
<div className="flex items-center">
<Body className="mr-3 text-xl text-white">
Try the new Chrome Extension 👉
</Body>
<a
href="https://chrome.google.com/webstore/detail/json-hero/dneionnnnjnofppmhcccbiaklandilch"
target="_blank"
>
<ChromeExtensionBadge />
</a>
</div>
</div>
);
}
app/components/Icons/ChromeExtensionBadge.tsx
+5
View File
@@ -0,0 +1,5 @@
export function ChromeExtensionBadge() {
return (
<img src="../images/chrome-extension-badge.png" className="h-14"></img>
);
}
app/routes/index.tsx
+26 -1
View File
@@ -7,13 +7,38 @@ import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection";
import { HomeSearchSection } from "~/components/Home/HomeSearchSection";
import { HomeFooter } from "~/components/Home/HomeFooter";
import { GithubBanner } from "~/components/Home/HomeGithubBanner";
import { HomeChromeExtensionPrompt } from "~/components/Home/HomeChromeExtensionPrompt";
import { LoaderFunction, useLoaderData } from "remix";
import userAgentParser from "ua-parser-js";
type LoaderData = {
userAgent: ReturnType<typeof userAgentParser>;
};
export const loader: LoaderFunction = async ({
request,
}): Promise<LoaderData> => {
const rawUserAgent = request.headers.get("user-agent") || "";
const userAgent = userAgentParser(rawUserAgent);
return {
userAgent,
};
};
export default function Index() {
const { userAgent } = useLoaderData<LoaderData>();
return (
<div className="overflow-x-hidden">
<HomeHeader fixed={true} />
<HomeHeroSection />
<GithubBanner />
{userAgent.browser.name === "Chrome" ? (
<HomeChromeExtensionPrompt />
) : (
<GithubBanner />
)}
<HomeInfoBoxSection />
<HomeEdgeCasesSection />
<HomeSearchSection />
package-lock.json
Generated
+38 -1
View File
@@ -42,7 +42,8 @@
"remix": "^1.2.3",
"tailwindcss-radix": "^1.6.0",
"tiny-invariant": "^1.2.0",
"ts-pattern": "^3.3.4"
"ts-pattern": "^3.3.4",
"ua-parser-js": "^1.0.2"
},
"devDependencies": {
"@cloudflare/workers-types": "^2.2.2",
@@ -53,6 +54,7 @@
"@types/lodash-es": "^4.17.6",
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"@types/ua-parser-js": "^0.7.36",
"concurrently": "^7.0.0",
"esbuild-visualizer": "^0.3.1",
"jest": "^27.4.7",
@@ -3050,6 +3052,12 @@
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
"dev": true
},
"node_modules/@types/ua-parser-js": {
"version": "0.7.36",
"resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
"integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==",
"dev": true
},
"node_modules/@types/unist": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -12860,6 +12868,24 @@
"node": ">=4.2.0"
}
},
"node_modules/ua-parser-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
"integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/ua-parser-js"
},
{
"type": "paypal",
"url": "https://paypal.me/faisalman"
}
],
"engines": {
"node": "*"
}
},
"node_modules/unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -16018,6 +16044,12 @@
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
"dev": true
},
"@types/ua-parser-js": {
"version": "0.7.36",
"resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
"integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==",
"dev": true
},
"@types/unist": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -23116,6 +23148,11 @@
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
"dev": true
},
"ua-parser-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
"integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg=="
},
"unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
package.json
+4 -2
View File
@@ -62,7 +62,8 @@
"remix": "^1.2.3",
"tailwindcss-radix": "^1.6.0",
"tiny-invariant": "^1.2.0",
"ts-pattern": "^3.3.4"
"ts-pattern": "^3.3.4",
"ua-parser-js": "^1.0.2"
},
"devDependencies": {
"@cloudflare/workers-types": "^2.2.2",
@@ -73,6 +74,7 @@
"@types/lodash-es": "^4.17.6",
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"@types/ua-parser-js": "^0.7.36",
"concurrently": "^7.0.0",
"esbuild-visualizer": "^0.3.1",
"jest": "^27.4.7",
@@ -107,4 +109,4 @@
},
"sideEffects": false,
"main": "dist/worker.js"
}
}
public/images/chrome-extension-badge.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB