diff --git a/public/home/JsonHero2.mp4 b/app/assets/home/JsonHero2.mp4 similarity index 100% rename from public/home/JsonHero2.mp4 rename to app/assets/home/JsonHero2.mp4 diff --git a/public/home/JsonHeroSearch.mp4 b/app/assets/home/JsonHeroSearch.mp4 similarity index 100% rename from public/home/JsonHeroSearch.mp4 rename to app/assets/home/JsonHeroSearch.mp4 diff --git a/public/home/JsonHeroShare.mp4 b/app/assets/home/JsonHeroShare.mp4 similarity index 100% rename from public/home/JsonHeroShare.mp4 rename to app/assets/home/JsonHeroShare.mp4 diff --git a/public/home/UncoverEdgeCases.mp4 b/app/assets/home/UncoverEdgeCases.mp4 similarity index 100% rename from public/home/UncoverEdgeCases.mp4 rename to app/assets/home/UncoverEdgeCases.mp4 diff --git a/public/images/chrome-extension-badge.png b/app/assets/images/chrome-extension-badge.png similarity index 100% rename from public/images/chrome-extension-badge.png rename to app/assets/images/chrome-extension-badge.png diff --git a/public/images/opengraph.png b/app/assets/images/opengraph.png similarity index 100% rename from public/images/opengraph.png rename to app/assets/images/opengraph.png diff --git a/public/svgs/CopyIcon.svg b/app/assets/svgs/CopyIcon.svg similarity index 100% rename from public/svgs/CopyIcon.svg rename to app/assets/svgs/CopyIcon.svg diff --git a/public/svgs/EyeIcon.svg b/app/assets/svgs/EyeIcon.svg similarity index 100% rename from public/svgs/EyeIcon.svg rename to app/assets/svgs/EyeIcon.svg diff --git a/public/svgs/TickIcon.svg b/app/assets/svgs/TickIcon.svg similarity index 100% rename from public/svgs/TickIcon.svg rename to app/assets/svgs/TickIcon.svg diff --git a/app/components/Home/HomeCollaborateSection.tsx b/app/components/Home/HomeCollaborateSection.tsx index a9b43cd..8f0d816 100644 --- a/app/components/Home/HomeCollaborateSection.tsx +++ b/app/components/Home/HomeCollaborateSection.tsx @@ -3,6 +3,8 @@ import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle"; import { SmallSubtitle } from "../Primitives/SmallSubtitle"; import { HomeSection } from "./HomeSection"; +import shareVideo from "~/assets/home/JsonHeroShare.mp4"; + export function HomeCollaborateSection() { return (
- +
); diff --git a/app/components/Home/HomeEdgeCasesSection.tsx b/app/components/Home/HomeEdgeCasesSection.tsx index 1cf85b1..cd345e4 100644 --- a/app/components/Home/HomeEdgeCasesSection.tsx +++ b/app/components/Home/HomeEdgeCasesSection.tsx @@ -3,6 +3,8 @@ import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle"; import { SmallSubtitle } from "../Primitives/SmallSubtitle"; import { HomeSection } from "./HomeSection"; +import edgeCasesVideo from "~/assets/home/UncoverEdgeCases.mp4"; + export function HomeEdgeCasesSection() { return (
- +
); diff --git a/app/components/Home/HomeHeroSection.tsx b/app/components/Home/HomeHeroSection.tsx index 40c8eb6..1a6bd58 100644 --- a/app/components/Home/HomeHeroSection.tsx +++ b/app/components/Home/HomeHeroSection.tsx @@ -2,7 +2,8 @@ import { AutoplayVideo } from "../AutoplayVideo"; import { NewFile } from "../NewFile"; import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle"; import { SmallSubtitle } from "../Primitives/SmallSubtitle"; -import { HomeSection } from "./HomeSection"; + +import heroVideo from "~/assets/home/JsonHero2.mp4"; const jsonHeroTitle = "JSON sucks."; const jsonHeroSlogan = "But we're making it better."; @@ -14,7 +15,7 @@ export function HomeHeroSection() { >
- +
diff --git a/app/components/Home/HomeSearchSection.tsx b/app/components/Home/HomeSearchSection.tsx index af9bec7..f9843af 100644 --- a/app/components/Home/HomeSearchSection.tsx +++ b/app/components/Home/HomeSearchSection.tsx @@ -3,6 +3,8 @@ import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle"; import { SmallSubtitle } from "../Primitives/SmallSubtitle"; import { HomeSection } from "./HomeSection"; +import searchVideo from "~/assets/home/JsonHeroSearch.mp4"; + export function HomeSearchSection() { return ( @@ -17,7 +19,7 @@ export function HomeSearchSection() {
- +
); diff --git a/app/components/Icons/ChromeExtensionBadge.tsx b/app/components/Icons/ChromeExtensionBadge.tsx index 1f308c2..8f1ea43 100644 --- a/app/components/Icons/ChromeExtensionBadge.tsx +++ b/app/components/Icons/ChromeExtensionBadge.tsx @@ -1,5 +1,5 @@ +import chromeExtensionBadge from "~/assets/images/chrome-extension-badge.png"; + export function ChromeExtensionBadge() { - return ( - - ); + return ; } diff --git a/app/components/PathPreview.tsx b/app/components/PathPreview.tsx index 6635325..eb51f26 100644 --- a/app/components/PathPreview.tsx +++ b/app/components/PathPreview.tsx @@ -4,6 +4,8 @@ import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView"; import { ColumnViewNode, IconComponent } from "~/useColumnView"; import { Body } from "./Primitives/Body"; +import eyeIcon from "~/assets/svgs/EyeIcon.svg"; + export type PathPreviewProps = { nodes: ColumnViewNode[]; maxComponents?: number; @@ -77,7 +79,7 @@ export function PathPreview({
diff --git a/app/root.tsx b/app/root.tsx index bfc5ae2..b8d51af 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -18,6 +18,8 @@ import { useTheme, } from "~/components/ThemeProvider"; +import openGraphImage from "~/assets/images/opengraph.png"; + export const meta: MetaFunction = ({ location }) => { const description = "JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features."; @@ -25,11 +27,11 @@ export const meta: MetaFunction = ({ location }) => { title: "JSON Viewer - JSON Hero", viewport: "width=device-width,initial-scale=1", description, - "og:image": `https://jsonhero.io/images/opengraph.png`, + "og:image": `https://jsonhero.io${openGraphImage}`, "og:url": `https://jsonhero.io${location.pathname}`, "og:title": "JSON Hero - A beautiful JSON viewer", "og:description": description, - "twitter:image": "https://jsonhero.io/images/opengraph.png", + "twitter:image": `https://jsonhero.io${openGraphImage}`, "twitter:card": "summary_large_image", "twitter:creator": "@json_hero", "twitter:site": "@json_hero",