Convert the Unsplash to the new ExampleDoc

app/components/ExampleDoc.tsx

@@ -0,0 +1,20 @@
+import { Link } from "remix";
+
+export function ExampleDoc({
+  id,
+  title,
+  path,
+}: {
+  id: string;
+  title: string;
+  path?: string;
+}) {
+  return (
+    <Link
+      to={`/j/${id}${path ? `?path=${path}` : ""}`}
+      className="bg-slate-900 px-4 py-2 rounded-md whitespace-nowrap text-lime-300 transition hover:text-lime-500"
+    >
+      {title}
+    </Link>
+  );
+}

app/components/SampleUrls.tsx

@@ -1,12 +1,13 @@
+import { ExampleDoc } from "./ExampleDoc";
 import { ExampleUrl } from "./ExampleUrl";
 
 export function SampleUrls() {
   return (
     <div className="flex justify-start flex-wrap gap-2">
-      <ExampleUrl
-        url="https://gist.githubusercontent.com/ericallam/332aca65c34dbc0fdb1b3cffbdf3f7a4/raw/4c6e264c3afd3432b608bad628290a7d71035253/unsplash.json"
-        title="Unsplash API Example"
-        displayTitle="Unsplash API"
+      <ExampleDoc
+        id="xW6aDgcbKgwC"
+        title="Unsplash API"
+        path="4.urls.regular"
       />
 
       <ExampleUrl