migrated to vite and vite-plugin-ssr

src/components/note/base.tsx

@@ -4,11 +4,10 @@ import { UserExtend } from '@components/user/extend';
 
 import { contentParser } from '@utils/parser';
 
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
-  const router = useRouter();
   const content = contentParser(event.content, event.tags);
 
   const parentNote = () => {
@@ -22,13 +21,13 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
 
   const openUserPage = (e) => {
     e.stopPropagation();
-    router.push(`/nostr/user?pubkey=${event.pubkey}`, { forceOptimisticNavigation: true });
+    navigate(`/user?pubkey=${event.pubkey}`);
   };
 
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      router.push(`/nostr/newsfeed/note?id=${event.parent_id}`, { forceOptimisticNavigation: true });
+      navigate(`/newsfeed/note?id=${event.parent_id}`);
     } else {
       e.stopPropagation();
     }

src/components/note/meta/comment.tsx

@@ -1,4 +1,3 @@
-import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
@@ -7,9 +6,9 @@ import { dateToUnix } from '@utils/getDate';
 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
 import { ChatLines, OpenNewWindow } from 'iconoir-react';
-import { useRouter } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const NoteComment = ({
   count,
@@ -24,7 +23,6 @@ export const NoteComment = ({
   eventTime: number;
   eventContent: any;
 }) => {
-  const router = useRouter();
   const [pool, relays]: any = useContext(RelayContext);
 
   const [open, setOpen] = useState(false);
@@ -34,7 +32,7 @@ export const NoteComment = ({
   const profile = activeAccount.metadata ? JSON.parse(activeAccount.metadata) : null;
 
   const openThread = () => {
-    router.push(`/nostr/newsfeed/note?id=${eventID}`, { forceOptimisticNavigation: true });
+    navigate(`/newsfeed/note?id=${eventID}`);
   };
 
   const submitEvent = () => {
@@ -84,12 +82,7 @@ export const NoteComment = ({
               <div className="flex gap-2">
                 <div>
                   <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
-                    <ImageWithFallback
-                      src={profile?.picture}
-                      alt="user's avatar"
-                      fill={true}
-                      className="rounded-md object-cover"
-                    />
+                    <img src={profile?.picture} alt="user's avatar" className="h-11 w-11 rounded-md object-cover" />
                   </div>
                 </div>
                 <div className="relative h-36 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">

src/components/note/preview/image.tsx

@@ -1,18 +1,9 @@
-import Image from 'next/image';
 import { memo } from 'react';
 
 export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
   return (
     <div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
-      <Image
-        src={url}
-        alt={url}
-        width="0"
-        height="0"
-        sizes="100vw"
-        className="h-auto w-full rounded-lg object-cover"
-        priority
-      />
+      <img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" />
     </div>
   );
 });

src/components/note/preview/link.tsx

@@ -1,23 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-export default function LinkCard({ data }: { data: any }) {
-  return (
-    <Link
-      href={data['url']}
-      target={'_blank'}
-      className="relative flex flex-col overflow-hidden rounded-lg border border-zinc-700"
-    >
-      <div className="relative aspect-video h-auto w-full">
-        <Image src={data['image']} alt="image preview" fill={true} className="object-cover" />
-      </div>
-      <div className="flex flex-col gap-2 p-4">
-        <div>
-          <h5 className="font-semibold leading-tight">{data['title']}</h5>
-          <p className="text-sm text-zinc-300">{data['description']}</p>
-        </div>
-        <span className="text-sm text-zinc-500">{data['url']}</span>
-      </div>
-    </Link>
-  );
-}

src/components/note/rootNote.tsx

@@ -4,11 +4,10 @@ import { UserExtend } from '@components/user/extend';
 
 import { contentParser } from '@utils/parser';
 
-import { useRouter } from 'next/navigation';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const RootNote = memo(function RootNote({ event }: { event: any }) {
-  const router = useRouter();
   const [pool, relays]: any = useContext(RelayContext);
 
   const [data, setData] = useState(null);
@@ -16,13 +15,13 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
 
   const openUserPage = (e) => {
     e.stopPropagation();
-    router.push(`/nostr/user?pubkey=${event.pubkey}`, { forceOptimisticNavigation: true });
+    navigate(`/user?pubkey=${event.pubkey}`);
   };
 
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      router.push(`/nostr/newsfeed/note?id=${event.parent_id}`, { forceOptimisticNavigation: true });
+      navigate(`/newsfeed/note?id=${event.parent_id}`);
     } else {
       e.stopPropagation();
     }