Cache static assets in the browser using remix asset imports

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 (
     <HomeSection
@@ -20,7 +22,7 @@ export function HomeCollaborateSection() {
         </SmallSubtitle>
       </div>
       <div className="w-full md:w-1/2">
-        <AutoplayVideo src="/home/JsonHeroShare.mp4" />
+        <AutoplayVideo src={shareVideo} />
       </div>
     </HomeSection>
   );

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 (
     <HomeSection
@@ -21,7 +23,7 @@ export function HomeEdgeCasesSection() {
         </SmallSubtitle>
       </div>
       <div className="w-full md:w-1/2">
-        <AutoplayVideo src="/home/UncoverEdgeCases.mp4" />
+        <AutoplayVideo src={edgeCasesVideo} />
       </div>
     </HomeSection>
   );

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() {
     >
       <div className="self-center md:w-1/2 md:pr-10 flex justify-end">
         <div className=" max-w-3xl">
-          <AutoplayVideo src="/home/JsonHero2.mp4" />
+          <AutoplayVideo src={heroVideo} />
         </div>
       </div>
       <div className="self-center flex align-center md:w-1/2 px-6 pb-8 mt-8 lg:mt-0">

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 (
     <HomeSection containerClassName="py-10 px-6 bg-black md:py-36 lg:py-20">
@@ -17,7 +19,7 @@ export function HomeSearchSection() {
         </SmallSubtitle>
       </div>
       <div className="w-full md:w-1/2">
-        <AutoplayVideo src="/home/JsonHeroSearch.mp4" />
+        <AutoplayVideo src={searchVideo} />
       </div>
     </HomeSection>
   );

app/components/Icons/ChromeExtensionBadge.tsx

@@ -1,5 +1,5 @@
+import chromeExtensionBadge from "~/assets/images/chrome-extension-badge.png";
+
 export function ChromeExtensionBadge() {
-  return (
-    <img src="../images/chrome-extension-badge.png" className="h-14"></img>
-  );
+  return <img src={chromeExtensionBadge} className="h-14"></img>;
 }

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({
     <div
       className={`flex select-none pl-7 ${
         isEnabled
-          ? "relative transition hover:bg-slate-200 hover:cursor-pointer dark:hover:bg-slate-600 after:transition after:absolute after:h-3 after:w-3 after:opacity-0 hover:after:opacity-100 after:top-1 after:left-1 after:content-[''] after:bg-[url('/svgs/EyeIcon.svg')] after:bg-no-repeat"
+          ? `relative transition hover:bg-slate-200 hover:cursor-pointer dark:hover:bg-slate-600 after:transition after:absolute after:h-3 after:w-3 after:opacity-0 hover:after:opacity-100 after:top-1 after:left-1 after:content-[''] after:bg-[url('${eyeIcon}')] after:bg-no-repeat`
           : "disabled"
       }`}
       onClick={() =>

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