switch to next/link

thingbomb · Oct 13, 2024 · 679e213 · 679e213
1 parent 77f323d
commit 679e213
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 24 deletions.
diff --git a/src/app/discover/page.jsx b/src/app/discover/page.jsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { ModeToggle } from "@/components/ui/dark-toggle";
 import { Home } from "lucide-react";
 import { SettingsIcon } from "lucide-react";
+import Link from "next/link";
 
 let data = {
   tech: [
@@ -260,11 +261,11 @@ export default function Discover() {
         </div>
         <div className="flex gap-2 items-center">
           <ModeToggle />
-          <a href="/settings" className="text-black dark:text-white">
+          <Link href="/settings" className="text-black dark:text-white">
             <Button variant="outline" size="icon">
               <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
             </Button>
-          </a>
+          </Link>
         </div>
       </header>
       <main className="p-4 pt-2">
@@ -283,7 +284,9 @@ export default function Discover() {
               <ul>
                 {data[category].map((feed, index) => (
                   <li key={index}>
-                    <a href={"/addFeed?feedURL=" + feed.url}>{feed.title}</a>
+                    <Link href={"/addFeed?feedURL=" + feed.url}>
+                      {feed.title}
+                    </Link>
                   </li>
                 ))}
               </ul>

diff --git a/src/app/onboarding/page.jsx b/src/app/onboarding/page.jsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Link } from "lucide-react";
 
 export default function App() {
   function shuffleArray(array) {
@@ -122,7 +123,7 @@ export default function App() {
                   id={index}
                 />
                 <label htmlFor={index} className="select-none">
-                  {feed.title} <a href={feed.visitURL}>(visit)</a>
+                  {feed.title} <Link href={feed.visitURL}>(visit)</Link>
                 </label>
               </div>
             ))}

diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -23,6 +23,7 @@ import {
 import { History } from "lucide-react";
 import { ChevronRight } from "lucide-react";
 import { Sidebar } from "lucide-react";
+import Link from "next/link";
 
 export default function Home() {
   const [feedsJSON, setFeedsJSON] = useState([]);
@@ -384,11 +385,11 @@ export default function Home() {
           </div>
           <div className="flex gap-2 items-center">
             <ModeToggle />
-            <a href="/settings" className="text-black dark:text-white">
+            <Link href="/settings" className="text-black dark:text-white">
               <Button variant="outline" size="icon">
                 <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
               </Button>
-            </a>
+            </Link>
           </div>
         </header>
         <div
@@ -496,7 +497,7 @@ export default function Home() {
                           />
                         </div>
                       </div>
-                      <a href="/discover">Discover more feeds</a>
+                      <Link href="/discover">Discover more feeds</Link>
                       <DialogFooter>
                         <Button onClick={handleAddFeed}>Add Feed</Button>
                       </DialogFooter>
@@ -566,7 +567,7 @@ export default function Home() {
                     })
                     .map((item, index) => (
                       <div key={index} className="mb-4">
-                        <a
+                        <Link
                           href={"/read/" + btoa(item.link).replaceAll("/", "-")}
                           className="text-black dark:text-white grid grid-cols-[150px_calc(100%_-_150px)] gap-4 hover:bg-[#f5f5f5] active:bg-[#e5e5e5] dark:hover:bg-[#FFFFFF14] dark:active:bg-[#FFFFFF1A] p-3 rounded-lg visited:text-[gray] "
                         >
@@ -590,7 +591,7 @@ export default function Home() {
                               {item.description}
                             </span>
                           </div>
-                        </a>
+                        </Link>
                       </div>
                     ))}
                 </ul>

diff --git a/src/app/read/[articleUrl]/page.jsx b/src/app/read/[articleUrl]/page.jsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import ReadHistory from "@/components/ui/read-history";
 import { extract } from "@extractus/article-extractor";
+import Link from "next/link";
 
 const ArticlePage = async ({ params }) => {
   let content = "";
@@ -73,12 +74,12 @@ const ArticlePage = async ({ params }) => {
             <br />
             <br />
             <div className="flex gap-2">
-              <a href={decodedUrl}>
+              <Link href={decodedUrl}>
                 <Button>Read on original site</Button>
-              </a>
-              <a href="/" className="text-black dark:text-white">
+              </Link>
+              <Link href="/" className="text-black dark:text-white">
                 <Button variant="outline">Back to home</Button>
-              </a>
+              </Link>
             </div>
           </>
         ) : (
@@ -89,9 +90,9 @@ const ArticlePage = async ({ params }) => {
               <em>{new Date(datePublished).toLocaleString()}</em>
               {ttr > 60 ? ` | ${(ttr - (ttr % 60)) / 60} min read` : ""}
             </p>
-            <a href={decodedUrl}>
+            <Link href={decodedUrl}>
               <Button>Read on original site</Button>
-            </a>
+            </Link>
             <br />
             <br />
             <article

diff --git a/src/app/read/layout.js b/src/app/read/layout.js
@@ -9,6 +9,7 @@ import { ModeToggle } from "@/components/ui/dark-toggle";
 import { SettingsIcon } from "lucide-react";
 import { ShareOptions } from "@/components/ui/share-options";
 import { usePathname } from "next/navigation";
+import Link from "next/link";
 
 const geistSans = localFont({
   src: "../fonts/GeistVF.woff",
@@ -40,17 +41,17 @@ export default function RootLayout({ children }) {
         >
           <header className="p-2 pl-4 pr-4 flex justify-between gap-4 items-center select-none">
             <div className="flex gap-4 items-center">
-              <a href="/" className="text-black dark:text-white">
+              <Link href="/" className="text-black dark:text-white">
                 <Button variant="outline" size="icon">
                   <ChevronLeft className="h-[1.2rem] w-[1.2rem]" />
                 </Button>
-              </a>
+              </Link>
             </div>
             <div className="flex gap-2 items-center">
               <ModeToggle />
               <ShareOptions
                 url={`${
-                  atob(pathname.split("/")[2]).replaceAll("-", "/") ||
+                  atob(pathname.split("/")[2].replaceAll("-", "/")) ||
                   `https://feedbomb.app${pathname}`
                 }`}
               />

diff --git a/src/app/reader/page.jsx b/src/app/reader/page.jsx
@@ -5,6 +5,7 @@ import { ModeToggle } from "@/components/ui/dark-toggle";
 import { Input } from "@/components/ui/input";
 import { SettingsIcon } from "lucide-react";
 import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 
 export default function Read() {
@@ -13,19 +14,19 @@ export default function Read() {
     <>
       <header className="p-2 pl-4 pr-4 flex justify-between gap-4 items-center select-none absolute left-0 right-0 top-0 z-10">
         <div className="flex gap-4 items-center">
-          <a href="/" className="text-black dark:text-white">
+          <Link href="/" className="text-black dark:text-white">
             <Button variant="outline" size="icon">
               <ChevronLeft className="h-[1.2rem] w-[1.2rem]" />
             </Button>
-          </a>
+          </Link>
         </div>
         <div className="flex gap-2 items-center">
           <ModeToggle />
-          <a href="/settings" className="text-black dark:text-white">
+          <Link href="/settings" className="text-black dark:text-white">
             <Button variant="outline" size="icon">
               <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
             </Button>
-          </a>
+          </Link>
         </div>
       </header>
       <div className="p-8 fixed inset-0 flex justify-center items-center z-5">
@@ -51,7 +52,7 @@ export default function Read() {
                   }
                 }}
               />
-              <a
+              <Link
                 href={`/read/${btoa(articleUrl).replaceAll("/", "-")}`}
                 className={
                   articleUrl.length == 0
@@ -60,7 +61,7 @@ export default function Read() {
                 }
               >
                 <Button disabled={articleUrl.length == 0}>Read</Button>
-              </a>
+              </Link>
             </div>
           </section>
         </article>

diff --git a/src/components/ui/share-options.jsx b/src/components/ui/share-options.jsx
@@ -46,6 +46,13 @@ export function ShareOptions(props) {
         >
           Hacker News
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            navigator.clipboard.writeText(props.url);
+          }}
+        >
+          Copy
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );