many style updates

src/app/author/[author]/AuthorDisplay.tsx

@@ -5,7 +5,6 @@ import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import DocumentCard from '@/app/components/DocumentCard'
 import findDocumentsByAuthor from './findDocumentsByAuthor'
-import { redirect } from 'next/navigation' // for server side
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -40,13 +39,13 @@ export default function AuthorDisplay({
             </a>
           </div>
         ) : null}
-        <div className='my-4 max-h-12 flex flex-wrap'>
+        <div className='my-4 max-h-12 flex flex-wrap gap-2'>
           {affiliation.map((a: string) => (
             <Link key={a} href={`/affiliation/${a.split('@')[1]}`}>
               <img
                 src={affiliations[a.split('@')[1]].image}
                 alt={affiliations[a.split('@')[1]].name}
-                className='h-12 mr-3 shadow-md shadow-slate-300'
+                className='h-12 shadow-sm shadow-slate-400 rounded-md'
               />
             </Link>
           ))}

src/app/components/DataDisplay.tsx

@@ -59,9 +59,7 @@ export const Topics = ({
       {showTitle ? <span className='font-bold'>Topics: </span> : null}
       {topics.map((t: string, i) => (
         <Fragment key={t}>
-          <Link href={topicList[t].wiki} target='_blank'>
-            {topicList[t].name}
-          </Link>
+          <Link href={`/topic/${t}`}>{topicList[t].name}</Link>
           {i !== topics.length - 1 ? ', ' : null}
         </Fragment>
       ))}

src/app/components/DataDisplayClient.tsx

@@ -57,9 +57,7 @@ export const Topics = ({
       {showTitle ? <span className='font-bold'>Topics: </span> : null}
       {topics.map((t: string, i) => (
         <Fragment key={t}>
-          <Link href={topicList[t].wiki} target='_blank'>
-            {topicList[t].name}
-          </Link>
+          <Link href={`/topic/${t}`}>{topicList[t].name}</Link>
           {i !== topics.length - 1 ? ', ' : null}
         </Fragment>
       ))}

src/app/components/DocumentCard.tsx

@@ -4,6 +4,7 @@ import { Authors, Topics } from './DataDisplay'
 import { ItemBadge, Status } from './Badges'
 import { epoch2datestring } from '@/app/utils/epoch2datestring'
 import Link from 'next/link'
+import cardEffects from '@/app/styles/cardEffects.module.css'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -13,7 +14,7 @@ const DocumentCard = ({ doc, href }: { doc: Document; href: string }) => {
   return (
     <Link href={href} className='no-link-style'>
       <div
-        className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
+        className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md`}
         role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
       >
         <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>

src/app/components/News.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { Inter, Zilla_Slab } from 'next/font/google'
 
 const zillaSlab = Zilla_Slab({ weight: '600', subsets: ['latin'] })
-const inter = Inter({ weight: '400', subsets: ['latin'] })
+const inter = Inter({ weight: ['400', '500'], subsets: ['latin'] })
 
 export default function News() {
   return (
@@ -12,9 +12,7 @@ export default function News() {
         ' mt-6 bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-slate-500 shadow-sm'
       }
     >
-      <div
-        className={zillaSlab.className + ' font-serif text-3xl text-slate-200'}
-      >
+      <div className={zillaSlab.className + ' text-3xl text-slate-200'}>
         eeXiv News
       </div>
       <div className='text-lg text-slate-400 mb-4'>

src/app/components/RandomDocs.tsx

@@ -52,7 +52,11 @@ const RandomDocs = (): React.ReactNode[] => {
     return (
       <div key={key}>
         <Link href={`/document/view/${key}`}>{title}</Link>, a {typeString}{' '}
-        about {topicsList[topics[0]]['name']} published on {dateString}
+        about{' '}
+        <Link href={`/topic/${topics[0]}`}>
+          {topicsList[topics[0]]['name']}
+        </Link>{' '}
+        published on {dateString}
         .
         <br />
       </div>

src/app/components/RecentDocuments.tsx

@@ -59,7 +59,11 @@ const RecentDocuments = (): React.ReactNode[] => {
     return (
       <div key={key}>
         <Link href={`/document/view/${key}`}>{title}</Link>, a {typeString}{' '}
-        about {topicsList[topics[0]]['name']} published on {dateString}
+        about{' '}
+        <Link href={`/topic/${topics[0]}`}>
+          {topicsList[topics[0]]['name']}
+        </Link>{' '}
+        published on {dateString}
         .
         <br />
       </div>

src/app/db/data.ts

@@ -524,6 +524,16 @@ export const authors: Readonly<{ [key: string]: Author }> = {
     image: '/img/profiles/default.png',
     website: 'https://futureinspireacademy.com',
   },
+  cbordalo: {
+    name: {
+      first: 'Christian',
+      last: 'Bordalo',
+      nickname: 'CB12',
+    },
+    affiliation: ['Wage Slave@primos', 'Student@srvhs'],
+    image: '/img/profiles/cbordalo.jpg',
+    nationality: ['stateless', 'unknown'],
+  },
 }
 
 export interface Affiliation {
@@ -682,6 +692,19 @@ Raid Zero's influence extends beyond the technical achievements in robotics comp
       Our organization not only impacts our members from around the world but also our partners as we help promote their business and improve their products. Our new vision has been to help develop companies that would contribute to the future of game development and promote accessibility. Recently, we launched exclusive early access to Rosebud’s game maker platform for all of our members to try. In the future, we plan to host more exclusive events that revolve around our partners. 
     `,
   },
+  primos: {
+    name: `Primo's Pizzeria & Pub`,
+    short: 'Primos',
+    image: '/img/logos/primos.png',
+    description: `
+    Welcoming, family-run restaurant pairs straightforward pizzas, pasta & sandwiches with beers on tap.
+    [linebreak]
+      Service options: Serves happy hour food · Serves vegetarian dishes · Good for watching sports
+      [linebreak]
+      Address: 298 Hartz Ave, Danville, CA 94526
+      [linebreak]
+      Phone: (925) 838-8214`,
+  },
 }
 
 export interface Nationality {
@@ -735,4 +758,19 @@ export const nationalities: Readonly<{ [key: string]: Nationality }> = {
     demonym: 'Japanese',
     flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png',
   },
+  isr: {
+    name: 'State of Israel',
+    demonym: 'Israeli',
+    flag: 'https://upload.wikimedia.org/wikipedia/commons/5/5c/Israel_flag_300.png?20050629023821',
+  },
+  unknown: {
+    name: 'Undetermined',
+    demonym: 'Undetermined',
+    flag: '/img/flags/unknown.png',
+  },
+  stateless: {
+    name: 'Stateless',
+    demonym: 'Stateless',
+    flag: '/img/flags/stateless.png',
+  },
 }

src/app/document/view/[slug]/DocumentViewer.tsx

@@ -36,7 +36,7 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
         className={`
             text-slate-800 text-5xl mb-4
             ${zillaSlab.className}
-            text-wrap
+            text-wrap break-words hyphens-auto
           `}
       >
         {title}

src/app/globals.css

@@ -13,7 +13,7 @@
 }
 
 a {
-  color: #2563eb; /* Tailwind's blue-600 */
+  @apply text-blue-600;
 }
 
 a:hover {

src/app/help/help.module.css

@@ -1,5 +0,0 @@
-.content {
-  margin-top: 40px;
-  padding: 35px;
-  border-radius: 15px;
-}

src/app/layout.tsx

@@ -60,11 +60,12 @@ export default function RootLayout({
             className={`${styles.banner} w-full h-[100px] mb-[50px] shadow-md shadow-slate-400`}
           >
             <div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
-              <h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
-                <Link href='/' className='no-link-style'>
+              <Link
+                href='/'
+                className={`${zillaSlab.className} no-link-style ${styles.title} mx-10`}
+              >
                 eeXiv
               </Link>
-              </h1>
               <div className='hidden md:inline'>
                 <SearchBar />
               </div>

src/app/search/page.tsx

@@ -6,6 +6,7 @@ import { Status, ItemBadge } from '@/app/components/Badges'
 import { epoch2datestring } from '../utils/epoch2datestring'
 import searchDocs, { CustomSearchResult } from '@/app/utils/searchDocs'
 import { useSuspenseQuery } from '@tanstack/react-query'
+import cardEffects from '@/app/styles/cardEffects.module.css'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
 
@@ -41,7 +42,7 @@ const SearchResult = ({
 
   return (
     <div
-      className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
+      className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer`}
       onClick={handleClick}
       role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
     >

src/app/styles/cardEffects.module.css

@@ -0,0 +1,28 @@
+/* creates a 3D card effect using a pseudo element for performance reasons */
+
+.card {
+  @apply shadow-sm shadow-slate-300;
+  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: relative;
+}
+.card::after {
+  @apply shadow-lg shadow-slate-500;
+  content: '';
+  z-index: -1;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.card:hover {
+  transform: scale(1.02, 1.02);
+}
+
+.card:hover::after {
+  opacity: 1;
+}

src/app/topic/[slug]/page.tsx

@@ -0,0 +1,29 @@
+import { Zilla_Slab } from 'next/font/google'
+import { topics } from '@/app/db/data'
+import { notFound } from 'next/navigation'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+export function generateStaticParams() {
+  const topicsList = Object.keys(topics)
+  return topicsList.map((topic) => ({ topic }))
+}
+
+export default function Page({
+  params,
+}: Readonly<{ params: { slug: string } }>) {
+  const topic = topics[params.slug]
+  if (!topic) notFound()
+  const { name, description, wiki } = topic
+
+  return (
+    <div className='flex p-4 lg:p-8 mx-auto bg-slate-200 shadow-slate-300 shadow-sm rounded-md max-w-2xl flex-col gap-4'>
+      <h1 className={`${zillaSlab.className} text-5xl`}>{name}</h1>
+      <p className='text-slate-700 text-lg'>{description}</p>
+      <p>
+        <span className='text-slate-800'>Read more at:</span>{' '}
+        <a href={wiki}>{wiki}</a>
+      </p>
+    </div>
+  )
+}