Switch to Link element to accommodate basePath.

lsst-dm · Jun 24, 2024 · 2c98f1e · 2c98f1e
1 parent 3ce1c0e
commit 2c98f1e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/app/collection/[...path]/page.js b/app/collection/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import SelectionDropdown from '../../selectionDropdown'
 import { GetSummary } from '../../summaries'
@@ -81,7 +82,7 @@ export default async function Collection({params}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={process.env.BASE_URL ? process.env.BASE_URL : "/"  }>&lt;- Back to collections</a></div>
+            <div className="text-m m-5"><Link href={"/"}>&lt;- Back to collections</Link></div>
             <div className="text-2xl m-5">{collection}</div>
 
             <div className="">
@@ -96,7 +97,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {tractKeys.map((tract, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/tract/${tract}/${collection}`}>{tract}</a></td>
+                                <td className="p-1"><Link href={`/tract/${tract}/${collection}`}>{tract}</Link></td>
                                 <td className="p-1 text-right">{tractEntries[tract]}</td></tr>
                             )}
                             </tbody>
@@ -111,7 +112,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {visitKeys.map((visit, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/visit/${visit}/${collection}`}>{visit}</a></td>
+                                <td className="p-1"><Link href={`/visit/${visit}/${collection}`}>{visit}</Link></td>
                                 <td className="p-1 text-right">{visitEntries[visit]}</td></tr>
                             )}
                             </tbody>
@@ -131,7 +132,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {plotKeys.map((plot, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/plot/${plot}/${collection}`}>{plot}</a></td>
+                                <td className="p-1"><Link href={`/plot/${plot}/${collection}`}>{plot}</Link></td>
                                 <td className="p-1 text-right">{plotEntries[plot].count}</td></tr>
                             )}
                             </tbody>

diff --git a/app/globals.css b/app/globals.css
@@ -16,6 +16,12 @@
   }
 }
 
+@layer base {
+    a {
+        @apply hover:underline;
+    }
+}
+
 /*
 body {
   color: rgb(var(--foreground-rgb));

diff --git a/app/page.js b/app/page.js
@@ -1,4 +1,5 @@
 
+import Link from 'next/link'
 
 import {ListSummaries, GetSummary, ListReports} from './summaries'
 
@@ -37,7 +38,7 @@ export default async function Collections() {
                 </thead>
                 <tbody>
                     {collections.map((collection, n) =>
-                    (<tr key={n}><td className={cellClassNames}><a href={`/collection/${collection}`}>{collection}</a></td>
+                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${collection}`}>{collection}</Link></td>
                          <td className={cellClassNames}>4321</td>
                          <td className={`text-right ${cellClassNames}`}>2024-05-06</td>
                         </tr>))}
@@ -50,14 +51,14 @@ export default async function Collections() {
                 <table className="divide-y">
                 <thead>
                     <tr>
-                        <td className={cellClassNames}>Collection</td>
+                        <td className={cellClassNames}>Report</td>
                         <td className={cellClassNames}>Plots</td>
                         <td className={cellClassNames}>Last Updated</td>
                     </tr>
                 </thead>
                 <tbody>
                     {reports.map((collection, n) =>
-                    (<tr key={n}><td className={cellClassNames}><a href={`/collection/${collection}`}>{collection}</a></td>
+                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${collection}`}>{collection}</Link></td>
                          <td className={cellClassNames}>4321</td>
                          <td className={`text-right ${cellClassNames}`}>2024-05-06</td>
                         </tr>))}

diff --git a/app/plot/[plotName]/[...path]/page.js b/app/plot/[plotName]/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import { GetSummary } from '../../../summaries'
 
@@ -33,7 +34,7 @@ export default async function Collection({params, searchParams}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={`/collection/${collection}`}>&lt;- Back to collection</a></div>
+            <div className="text-m m-5"><Link href={`/collection/${collection}`}>&lt;- Back to collection</Link></div>
             <div className="text-2xl m-5">{collection}</div>
             <div className="text-2xl m-5">{plotName}</div>
             <div className="">

diff --git a/app/tract/[tract]/[...path]/page.js b/app/tract/[tract]/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import { GetSummary } from '../../../summaries'
 
@@ -49,7 +50,7 @@ export default async function Collection({params, searchParams}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={`/collection/${collection}`}>&lt;- Back to collection</a></div>
+            <div className="text-m m-5"><Link href={`/collection/${collection}`}>&lt;- Back to collection</Link></div>
             <div className="text-2xl m-5">{collection}</div>
             <div className="text-2xl m-5">Tract {tract}</div>
             <div className="">