feed page with bad hack

src/components/InfiniteCustomFeed.tsx

···
   feedUri: string;
   pdsUrl?: string;
   feedServiceDid?: string;
+  authedOverride?: boolean;
+  unauthedfeedurl?: string;
 }
 
 export function InfiniteCustomFeed({
   feedUri,
   pdsUrl,
   feedServiceDid,
+  authedOverride,
+  unauthedfeedurl,
 }: InfiniteCustomFeedProps) {
   const { agent } = useAuth();
-  const authed = !!agent?.did;
+  const authed = authedOverride || !!agent?.did;
 
   // const identityresultmaybe = useQueryIdentity(agent?.did);
   // const identity = identityresultmaybe?.data;
···
     isAuthed: authed ?? false,
     pdsUrl: pdsUrl,
     feedServiceDid: feedServiceDid,
+    unauthedfeedurl: unauthedfeedurl,
   });
   const queryClient = useQueryClient();
 

src/components/UniversalPostRenderer.tsx

···
 
 import defaultpfp from "~/../public/favicon.png";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { FollowButton, Mutual } from "~/routes/profile.$did";
+import { FeedItemRenderAturiLoader, FollowButton, Mutual } from "~/routes/profile.$did";
 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
 // import type {
···
   }
 
   if (AppBskyEmbedRecord.isView(embed)) {
+    // hey im really lazy and im gonna do it the bad way
+    const reallybaduri = (embed?.record as any)?.uri as string | undefined;
+    const reallybadaturi = reallybaduri ? new AtUri(reallybaduri) : undefined;
+
     // custom feed embed (i.e. generator view)
     if (AppBskyFeedDefs.isGeneratorView(embed.record)) {
       // stopgap sorry
···
       //     <MaybeFeedCard view={embed.record} />
       //   </div>
       // )
+    } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.feed.generator") {
+      return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder/></div>
     }
 
     // list embed
···
       //     <MaybeListCard view={embed.record} />
       //   </div>
       // )
+    } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.graph.list") {
+      return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder listmode /></div>
     }
 
     // starter pack embed
···
       //     <StarterPackCard starterPack={embed.record} />
       //   </div>
       // )
+    } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.graph.starterpack") {
+      return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder listmode /></div>
     }
 
     // quote post
···
         </div>
       );
     } else {
+      console.log("what the hell is a ", embed);
       return <>sorry</>;
     }
     //return <QuotePostRenderer record={embed.record} moderation={moderation} />;

src/routeTree.gen.ts

···
 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'
 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'
 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey'
+import { Route as ProfileDidFeedRkeyRouteImport } from './routes/profile.$did/feed.$rkey'
 import { Route as ProfileDidPostRkeyRepostedByRouteImport } from './routes/profile.$did/post.$rkey.reposted-by'
 import { Route as ProfileDidPostRkeyQuotesRouteImport } from './routes/profile.$did/post.$rkey.quotes'
 import { Route as ProfileDidPostRkeyLikedByRouteImport } from './routes/profile.$did/post.$rkey.liked-by'
···
 const ProfileDidPostRkeyRoute = ProfileDidPostRkeyRouteImport.update({
   id: '/profile/$did/post/$rkey',
   path: '/profile/$did/post/$rkey',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ProfileDidFeedRkeyRoute = ProfileDidFeedRkeyRouteImport.update({
+  id: '/profile/$did/feed/$rkey',
+  path: '/profile/$did/feed/$rkey',
   getParentRoute: () => rootRouteImport,
 } as any)
 const ProfileDidPostRkeyRepostedByRoute =
···
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
+  '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
   '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
   '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
···
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
+  '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
   '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
   '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
···
   '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did/': typeof ProfileDidIndexRoute
+  '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
   '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
   '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
···
     | '/route-a'
     | '/route-b'
     | '/profile/$did'
+    | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
     | '/profile/$did/post/$rkey/liked-by'
     | '/profile/$did/post/$rkey/quotes'
···
     | '/route-a'
     | '/route-b'
     | '/profile/$did'
+    | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
     | '/profile/$did/post/$rkey/liked-by'
     | '/profile/$did/post/$rkey/quotes'
···
     | '/_pathlessLayout/_nested-layout/route-a'
     | '/_pathlessLayout/_nested-layout/route-b'
     | '/profile/$did/'
+    | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
     | '/profile/$did/post/$rkey/liked-by'
     | '/profile/$did/post/$rkey/quotes'
···
   SettingsRoute: typeof SettingsRoute
   CallbackIndexRoute: typeof CallbackIndexRoute
   ProfileDidIndexRoute: typeof ProfileDidIndexRoute
+  ProfileDidFeedRkeyRoute: typeof ProfileDidFeedRkeyRoute
   ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren
 }
 
···
       preLoaderRoute: typeof ProfileDidPostRkeyRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/profile/$did/feed/$rkey': {
+      id: '/profile/$did/feed/$rkey'
+      path: '/profile/$did/feed/$rkey'
+      fullPath: '/profile/$did/feed/$rkey'
+      preLoaderRoute: typeof ProfileDidFeedRkeyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/profile/$did/post/$rkey/reposted-by': {
       id: '/profile/$did/post/$rkey/reposted-by'
       path: '/reposted-by'
···
   SettingsRoute: SettingsRoute,
   CallbackIndexRoute: CallbackIndexRoute,
   ProfileDidIndexRoute: ProfileDidIndexRoute,
+  ProfileDidFeedRkeyRoute: ProfileDidFeedRkeyRoute,
   ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren,
 }
 export const routeTree = rootRouteImport

src/routes/profile.$did/feed.$rkey.tsx

···
+import * as ATPAPI from "@atproto/api";
+import { AtUri } from "@atproto/api";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+
+import { Header } from "~/components/Header";
+import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
+import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { quickAuthAtom } from "~/utils/atoms";
+import { useQueryArbitrary, useQueryIdentity } from "~/utils/useQuery";
+
+export const Route = createFileRoute("/profile/$did/feed/$rkey")({
+  component: FeedRoute,
+});
+
+function FeedRoute() {
+  const { did, rkey } = Route.useParams();
+  const { agent, status } = useAuth();
+  const { data: identitydata } = useQueryIdentity(did);
+  const { data: identity } = useQueryIdentity(agent?.did);
+  const uri = `at://${identitydata?.did || did}/app.bsky.feed.generator/${rkey}`;
+  const aturi = new AtUri(uri);
+  const { data: feeddata } = useQueryArbitrary(uri);
+
+  const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom);
+  const isAuthRestoring = quickAuth ? status === "loading" : false;
+
+  const authed = status === "signedIn";
+
+  const feedServiceDid = !isAuthRestoring
+    ? ((feeddata?.value as any)?.did as string | undefined)
+    : undefined;
+
+  // const {
+  //   data: feedData,
+  //   isLoading: isFeedLoading,
+  //   error: feedError,
+  // } = useQueryFeedSkeleton({
+  //   feedUri: selectedFeed!,
+  //   agent: agent ?? undefined,
+  //   isAuthed: authed ?? false,
+  //   pdsUrl: identity?.pds,
+  //   feedServiceDid: feedServiceDid,
+  // });
+
+  // const feed = feedData?.feed || [];
+
+  const isReadyForAuthedFeed =
+    !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid;
+  const isReadyForUnauthedFeed = !isAuthRestoring && !authed;
+
+  const feed: ATPAPI.AppBskyFeedGenerator.Record | undefined = feeddata?.value;
+
+  const web = feedServiceDid?.replace(/^did:web:/, "") || "";
+
+  return (
+    <>
+      <Header
+        title={feed?.displayName || aturi.rkey}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+
+      {isAuthRestoring ||
+        (authed && (!identity?.pds || !feedServiceDid) && (
+          <div className="p-4 text-center text-gray-500">
+            Preparing your feed...
+          </div>
+        ))}
+
+      {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? (
+        <InfiniteCustomFeed
+          key={uri}
+          feedUri={uri}
+          pdsUrl={identity?.pds}
+          feedServiceDid={feedServiceDid}
+          authedOverride={true}
+          unauthedfeedurl={web}
+        />
+      ) : (
+        <div className="p-4 text-center text-gray-500">Loading.......</div>
+      )}
+    </>
+  );
+}

src/routes/profile.$did/index.tsx

···
 import { RichText } from "@atproto/api";
 import * as ATPAPI from "@atproto/api";
 import { useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
 import React, { type ReactNode, useEffect, useState } from "react";
 
···
 } from "~/utils/followState";
 import {
   useInfiniteQueryAuthorFeed,
+  useQueryArbitrary,
   useQueryConstellation,
   useQueryIdentity,
   useQueryProfile,
···
   );
 }
 
-function FeedItemRender({
+export function FeedItemRenderAturiLoader({
+  aturi,
+  listmode,
+  disableBottomBorder,
+}: {
+  aturi: string;
+  listmode?: boolean;
+  disableBottomBorder?: boolean;
+}) {
+  const { data: record } = useQueryArbitrary(aturi);
+
+  if (!record) return;
+  return (
+    <FeedItemRender
+      listmode={listmode}
+      feed={record}
+      disableBottomBorder={disableBottomBorder}
+    />
+  );
+}
+
+export function FeedItemRender({
   feed,
-  listmode
+  listmode,
+  disableBottomBorder,
 }: {
-  feed: { uri: string; cid: string; value: ATPAPI.AppBskyFeedGenerator.Record };
+  feed: { uri: string; cid: string; value: any };
   listmode?: boolean;
+  disableBottomBorder?: boolean;
 }) {
-  const name = listmode ? feed.value?.name as string : feed.value?.displayName as string;
+  const name = listmode
+    ? (feed.value?.name as string)
+    : (feed.value?.displayName as string);
   const aturi = new ATPAPI.AtUri(feed.uri);
-  const {data: identity} = useQueryIdentity(aturi.host);
+  const { data: identity } = useQueryIdentity(aturi.host);
   const resolvedDid = identity?.did;
   const [imgcdn] = useAtom(imgCDNAtom);
 
···
     return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`;
   }
 
+  const { data: likes } = useQueryConstellation(
   // @ts-expect-error overloads sucks
-  const {data: likes} = useQueryConstellation(!listmode ? {
-    target: feed.uri,
-    method: "/links/count",
-    collection: "app.bsky.feed.like",
-    path: ".subject.uri"
-  } : undefined)
+    !listmode
+      ? {
+          target: feed.uri,
+          method: "/links/count",
+          collection: "app.bsky.feed.like",
+          path: ".subject.uri",
+        }
+      : undefined
+  );
 
   return (
-    <div className="px-4 py-4 border-b flex flex-col gap-1">
+    <Link
+      className={`px-4 py-4 ${!disableBottomBorder && "border-b"} flex flex-col gap-1`}
+      to="/profile/$did/feed/$rkey"
+      params={{ did: aturi.host, rkey: aturi.rkey }}
+    >
       <div className="flex flex-row gap-3">
         <div className="min-w-10 min-h-10">
-          <img src={getAvatarThumbnailUrl(feed) || defaultpfp} className="h-10 w-10 rounded border" />
+          <img
+            src={getAvatarThumbnailUrl(feed) || defaultpfp}
+            className="h-10 w-10 rounded border"
+          />
         </div>
         <div className="flex flex-col">
           <span className="">{name}</span>
-          <span className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center">{feed.value.did || aturi.rkey}</span>
+          <span className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center">
+            {feed.value.did || aturi.rkey}
+          </span>
         </div>
         <div className="flex-1" />
         {/* <div className="button bg-red-500 rounded-full min-w-[60px]" /> */}
       </div>
       <span className=" text-sm">{feed.value?.description}</span>
-      {!listmode && (<span className=" text-sm dark:text-gray-400 text-gray-500">Liked by {(likes as unknown as any)?.total as number || 0} users</span>)}
-    </div>
+      {!listmode && (
+        <span className=" text-sm dark:text-gray-400 text-gray-500">
+          Liked by {((likes as unknown as any)?.total as number) || 0} users
+        </span>
+      )}
+    </Link>
   );
 }
-
 
 function ListsTab({ did }: { did: string }) {
   useReusableTabScrollRestore(`Profile` + did);
···
           if (!feed || !feed?.value) return;
           const feedGenRecord =
             feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record;
-          return <FeedItemRender listmode={true} feed={feed as any} key={feed.uri} />;
+          return (
+            <FeedItemRender listmode={true} feed={feed as any} key={feed.uri} />
+          );
         })}
       </div>
 

src/utils/useQuery.ts

···
   isAuthed: boolean;
   pdsUrl?: string;
   feedServiceDid?: string;
+  // todo the hell is a unauthedfeedurl
+  unauthedfeedurl?: string;
 }) {
-  const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options;
+  const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = options;
   
   return queryOptions({
     queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }],
···
     queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => {
       const cursorParam = pageParam ? `&cursor=${pageParam}` : "";
       
-      if (isAuthed) {
+      if (isAuthed && !unauthedfeedurl) {
         if (!agent || !pdsUrl || !feedServiceDid) {
           throw new Error("Missing required info for authenticated feed fetch.");
         }
···
         if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`);
         return (await res.json()) as FeedSkeletonPage;
       } else {
-        const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`;
+        const url = `https://${unauthedfeedurl ? unauthedfeedurl : "discover.bsky.app"}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`;
         const res = await fetch(url);
         if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`);
         return (await res.json()) as FeedSkeletonPage;
···
   isAuthed: boolean;
   pdsUrl?: string;
   feedServiceDid?: string;
+  unauthedfeedurl?: string;
 }) {
   const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options);
   
···
     getNextPageParam: (lastPage) => lastPage.cursor as null | undefined,
     staleTime: Infinity,
     refetchOnWindowFocus: false,
-    enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
+    enabled: !!options.feedUri && (options.isAuthed ? (!!options.agent && !!options.pdsUrl || !!options.unauthedfeedurl) && !!options.feedServiceDid : true),
   }), queryKey: queryKey};
 }