client-web: improve link preview handling with optional user-provided…

… proxy

client-web/src/components/event.tsx

@@ -33,9 +33,10 @@ import { ZapModal } from "./event/zap-modal";
 export interface EventProps {
  data: LightProcessedEvent;
  level: number;
+ linkPreviewProxyUrl?: string;
 }
 
-export function Event({ data, level }: EventProps) {
+export function Event({ data, level, linkPreviewProxyUrl }: EventProps) {
  const [isReady] = useNClient((state) => [
  (state.status === "offline" || state.status === "online") &&
  state.keystore !== "none",
@@ -264,6 +265,7 @@ export function Event({ data, level }: EventProps) {
  content={
  properties.isLoaded ? properties.text : data.event.content
  }
+ linkPreviewProxyUrl={linkPreviewProxyUrl}
  />
  </Skeleton>
  </CardBody>

client-web/src/components/event/clickable-links.tsx

@@ -6,9 +6,13 @@ import { LinkPreview } from "./link-preview";
 
 interface EventContentWithLinksProps {
  text: string;
+ linkPreviewProxyUrl?: string;
 }
 
-export function EventContentWithLinks({ text }: EventContentWithLinksProps) {
+export function EventContentWithLinks({
+ text,
+ linkPreviewProxyUrl,
+}: EventContentWithLinksProps) {
  if (!text) return null;
 
  const urlRegex = /(https?:\/\/[^\s]+)/g;
@@ -24,7 +28,13 @@ export function EventContentWithLinks({ text }: EventContentWithLinksProps) {
  <>
  {tokens.map((token, index) => {
  if (urlRegex.test(token)) {
- return <LinkPreview url={token} key={index} />;
+ return (
+ <LinkPreview
+ url={token}
+ proxyUrl={linkPreviewProxyUrl}
+ key={index}
+ />
+ );
  }
  if (noteRegex.test(token)) {
  const noteId = token.split(":").pop();

client-web/src/components/event/content.tsx

@@ -3,9 +3,13 @@ import { EventContentWithLinks } from "./clickable-links";
 
 interface EventContentProps {
  content: string | undefined;
+ linkPreviewProxyUrl?: string;
 }
 
-export function EventContent({ content }: EventContentProps) {
+export function EventContent({
+ content,
+ linkPreviewProxyUrl,
+}: EventContentProps) {
  return (
  <>
  {content && content !== "" && (
@@ -20,7 +24,10 @@ export function EventContent({ content }: EventContentProps) {
  borderRadius={4}
  style={{ overflowWrap: "anywhere" }}
  >
- <EventContentWithLinks text={content} />
+ <EventContentWithLinks
+ text={content}
+ linkPreviewProxyUrl={linkPreviewProxyUrl}
+ />
  </Box>
  )}
  </>

client-web/src/components/event/link-preview.tsx

@@ -6,19 +6,17 @@ import {
  LinkBox,
  LinkOverlay,
  Flex,
+ Link,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { excerpt } from "../../lib/excerpt";
 
-const fetchProxyData = async (url: string) => {
- const response = await fetch(
- `https://p1.nostrop.com/fea11fdd-6073-4a6f-b45a-31559c41f9f1?url=${url}`,
- {
- headers: {
- client: "nostrop",
- },
- }
- );
+const fetchProxyData = async (url: string, proxyUrl?: string) => {
+ if (proxyUrl === undefined) {
+ throw new Error("Proxy URL is not defined");
+ }
+
+ const response = await fetch(`${proxyUrl}${url}`);
 
  if (!response.ok) {
  throw new Error("Failed to fetch data");
@@ -41,9 +39,10 @@ const fetchProxyData = async (url: string) => {
 
 interface LinkPreviewProps {
  url: string;
+ proxyUrl?: string;
 }
 
-export function LinkPreview({ url }: LinkPreviewProps) {
+export function LinkPreview({ url, proxyUrl }: LinkPreviewProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);
  const [data, setData] = useState<{
@@ -55,9 +54,12 @@ export function LinkPreview({ url }: LinkPreviewProps) {
  } | null>(null);
 
  const fetchData = async () => {
+ if (proxyUrl === undefined) {
+ return;
+ }
  setIsLoading(true);
  try {
- const result = await fetchProxyData(url);
+ const result = await fetchProxyData(url, proxyUrl);
  setData(result);
  } catch (err) {
  setHasError(true);
@@ -94,7 +96,7 @@ export function LinkPreview({ url }: LinkPreviewProps) {
  </LinkBox>
  </Box>
  ) : (
- <Text>{url}</Text>
+ <Link target={url}>{url}</Link>
  )}
  </>
  );

client-web/src/components/events.tsx

@@ -15,6 +15,8 @@ export function Events({ view, changingView }: EventsProps) {
  state.eventsNewer[view]?.length || 0,
  ]);
  const throttleTimestamp = useRef(Date.now());
+ const linkPreviewProxyUrl =
+ localStorage.getItem("linkPreviewProxyUrl") || undefined;
 
  const loadEvents = async () => {
  if (
@@ -59,34 +61,6 @@ export function Events({ view, changingView }: EventsProps) {
  }
  }, []);
 
- // useEffect(() => {
- // if (hasNewerEvents && hasNewerEvents.count > 0 && !isLoading) {
- // loadEvents();
- // }
- // }, [hasNewerEvents, isLoading]);
-
- // const loadNewerEvents = async () => {
- // setIsLoading(true);
- // throttleTimestamp.current = Date.now();
- // const nextQuery = useNClient.getState().nextQuery;
- // if (!nextQuery) return;
- // await useNClient.getState().getEvents(
- // {
- // token: nextQuery.token,
- // query: {
- // ...nextQuery.next,
- // filters: {
- // ...nextQuery.next.filters,
- // until: Math.round(Date.now() / 1000),
- // since: Math.round((Date.now() - 2 * 24 * 60 * 60 * 1000) / 1000),
- // },
- // },
- // },
- // "replace"
- // );
- // setIsLoading(false);
- // };
-
  const mergeNewerEvents = () => {
  useNClient.getState().mergeNewerEvents(view);
  };
@@ -110,7 +84,12 @@ export function Events({ view, changingView }: EventsProps) {
  data={events}
  itemContent={(index, data) => (
  <Box mb={2}>
- <Event key={index} data={data} level={0} />
+ <Event
+ key={index}
+ data={data}
+ level={0}
+ linkPreviewProxyUrl={linkPreviewProxyUrl}
+ />
  </Box>
  )}
  endReached={() => {

client-web/src/routes/account.tsx

@@ -253,6 +253,14 @@ export function AccountRoute() {
  setLoadKeyFromQr(!loadKeyFromQr);
  };
 
+ const [linkPreviewProxyUrl, setLinkPreviewProxyUrl] = useState<string>(
+ localStorage.getItem("linkPreviewProxyUrl") || ""
+ );
+
+ const saveLinkPreviewProxyUrl = () => {
+ localStorage.setItem("linkPreviewProxyUrl", linkPreviewProxyUrl);
+ };
+
  return (
  <Box>
  <Heading size="lg">Account</Heading>
@@ -392,6 +400,22 @@ export function AccountRoute() {
  <AccountsList />
  </>
  )}
+
+ <Heading size="md" mt={6}>
+ Link Previews
+ </Heading>
+ <FormControl marginBottom={4}>
+ <FormLabel>To see link previews, you can use a proxy:</FormLabel>
+ <Input
+ type="text"
+ value={linkPreviewProxyUrl}
+ onChange={(e) => setLinkPreviewProxyUrl(e.target.value)}
+ placeholder="https://proxy.com/?url="
+ />
+ <Button onClick={saveLinkPreviewProxyUrl} mt={2}>
+ Save
+ </Button>
+ </FormControl>
  </Box>
  );
 }