Add monospace font

lanterndata · Sep 23, 2024 · d648e92 · d648e92
1 parent 6d28bb0
commit d648e92
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 52 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,7 @@
 import type { Metadata } from 'next';
-import { Source_Sans_3 } from 'next/font/google';
 import './globals.css';
 import { Provider } from 'jotai';
 
-const font = Source_Sans_3({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
   title: 'Lantern | Search Postgres Mailing Lists',
   description: 'Postgres mailing list search engine, powered by Lantern',
@@ -16,11 +13,5 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <Provider>
-      <html lang='en'>
-        <body className={font.className}>{children}</body>
-      </html>
-    </Provider>
-  );
+  return <Provider>{children}</Provider>;
 }
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -1,23 +1,45 @@
+'use client';
+import {
+  Fira_Mono,
+  IBM_Plex_Mono,
+  IBM_Plex_Sans,
+  JetBrains_Mono,
+  Source_Sans_3,
+} from 'next/font/google';
 import PageClient from './PageClient';
 import {
   getThreadMessages,
   getThreads,
   searchThreads,
 } from '@/utils/fetch-mail';
+import { useAtom } from 'jotai';
+import { fontAtom } from '@/utils/atoms';
+
+const sourceSans = Source_Sans_3({ subsets: ['latin'] });
+const ibmPlexMono = IBM_Plex_Mono({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+});
 
 interface PageProps {
   list?: string;
 }
 
 const Page = ({ list }: PageProps) => {
   const activeList = list || undefined;
+  const [fontName] = useAtom(fontAtom);
+  const font = fontName === 'ibm-plex-mono' ? ibmPlexMono : sourceSans;
   return (
-    <PageClient
-      list={activeList}
-      getThreads={getThreads}
-      getThreadMessages={getThreadMessages}
-      searchThreads={searchThreads}
-    />
+    <html lang='en'>
+      <body className={font.className}>
+        <PageClient
+          list={activeList}
+          getThreads={getThreads}
+          getThreadMessages={getThreadMessages}
+          searchThreads={searchThreads}
+        />
+      </body>
+    </html>
   );
 };
 

diff --git a/src/components/SettingsButton.tsx b/src/components/SettingsButton.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { FiSettings } from 'react-icons/fi';
 import Modal from './Modal';
 import { useAtom } from 'jotai';
-import { sortByAtom } from '@/utils/atoms';
+import { fontAtom, sortByAtom } from '@/utils/atoms';
 
 interface ListItemProps {
   id: string;
@@ -33,11 +33,12 @@ const ListItem = ({ id, name, checked, onChange }: ListItemProps) => (
 const SettingsButton = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [font, setFont] = useAtom(fontAtom);
   return (
     <>
       <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title='Settings'>
         <p className='font-medium mb-1'>Sort by algorithm</p>
-        <ul>
+        <ul className='flex gap-x-8'>
           <ListItem
             id='default'
             name='Default'
@@ -57,6 +58,22 @@ const SettingsButton = () => {
             onChange={() => setSortBy('Postgres FTS')}
           />
         </ul>
+
+        <p className='font-medium mt-4 mb-1'>Font</p>
+        <ul className='flex gap-x-9'>
+          <ListItem
+            id='source-sans-3'
+            name='Source Sans 3'
+            checked={font === 'source-sans-3'}
+            onChange={() => setFont('source-sans-3')}
+          />
+          <ListItem
+            id='ibm-plex-mono'
+            name='IBM Plex Mono'
+            checked={font === 'ibm-plex-mono'}
+            onChange={() => setFont('ibm-plex-mono')}
+          />
+        </ul>
       </Modal>
       <div
         className='py-1 px-5 hover:bg-slate-900 flex items-center gap-x-2 hover:cursor-pointer'

diff --git a/src/components/ThreadPreview.tsx b/src/components/ThreadPreview.tsx
@@ -1,6 +1,8 @@
+import { fontAtom } from '@/utils/atoms';
 import { Thread } from '@/utils/types';
 import classNames from 'classnames';
 import DOMPurify from 'isomorphic-dompurify';
+import { useAtom } from 'jotai';
 
 function formatDateAsYYYYMMDD(date: Date) {
   const year = date.getFullYear();
@@ -21,45 +23,56 @@ const ThreadPreview = ({
   list,
   onClick,
   isActive,
-}: ThreadPreviewProps) => (
-  <div
-    id={'preview-' + thread.id}
-    className={classNames(
-      'px-4 py-3 rounded border shadow-sm border-slate-600 cursor-pointer',
-      isActive
-        ? 'bg-slate-600 text-stone-100'
-        : 'bg-slate-800 text-stone-400 hover:bg-slate-700 hover:text-stone-300'
-    )}
-    onClick={onClick}
-  >
-    {list && (
+}: ThreadPreviewProps) => {
+  const [font] = useAtom(fontAtom);
+  return (
+    <div
+      id={'preview-' + thread.id}
+      className={classNames(
+        'px-4 py-3 rounded border shadow-sm border-slate-600 cursor-pointer',
+        isActive
+          ? 'bg-slate-600 text-stone-100'
+          : 'bg-slate-800 text-stone-400 hover:bg-slate-700 hover:text-stone-300'
+      )}
+      onClick={onClick}
+    >
+      {list && (
+        <div
+          className={classNames(
+            'text-xs',
+            isActive ? 'text-white' : 'text-stone-300',
+            font === 'ibm-plex-mono' ? 'mb-1.5' : 'mb-1'
+          )}
+        >
+          {list ? '#' + list : ''}
+        </div>
+      )}
       <div
         className={classNames(
-          'text-xs mb-1',
-          isActive ? 'text-white' : 'text-stone-300'
+          'flex text-xs',
+          font === 'ibm-plex-mono' ? 'mb-1.5' : 'mb-1'
         )}
       >
-        {list ? '#' + list : ''}
+        <p>{thread.fromName || thread.fromAddress}</p>
+        {thread.count > 1 && (
+          <p className='ml-2 text-stone-400'>{thread.count}</p>
+        )}
+        <p className='ml-auto'>{formatDateAsYYYYMMDD(thread.ts)}</p>
       </div>
-    )}
-    <div className='flex mb-1 text-xs'>
-      <p>{thread.fromName || thread.fromAddress}</p>
-      {thread.count > 1 && (
-        <p className='ml-2 text-stone-400'>{thread.count}</p>
+      <p className='font-medium text-sm'>{thread.subject}</p>
+      {thread.preview && (
+        <p
+          className={classNames(
+            'text-xs mt-2',
+            isActive ? 'text-stone-200' : 'text-stone-500'
+          )}
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(thread.preview),
+          }}
+        />
       )}
-      <p className='ml-auto'>{formatDateAsYYYYMMDD(thread.ts)}</p>
     </div>
-    <p className='font-medium text-sm'>{thread.subject}</p>
-    {thread.preview && (
-      <p
-        className={classNames(
-          'text-xs mt-2',
-          isActive ? 'text-stone-200' : 'text-stone-500'
-        )}
-        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(thread.preview) }}
-      />
-    )}
-  </div>
-);
+  );
+};
 
 export default ThreadPreview;
diff --git a/src/utils/atoms.ts b/src/utils/atoms.ts
@@ -1,7 +1,12 @@
-import { SortByType } from './types';
+import { FontType, SortByType } from './types';
 import { atomWithStorage } from 'jotai/utils';
 
 export const sortByAtom = atomWithStorage<SortByType>(
   'sort-by-atom',
   'default'
 );
+
+export const fontAtom = atomWithStorage<FontType>(
+  'font-family',
+  'source-sans-3'
+);
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -1,3 +1,5 @@
+export type FontType = 'source-sans-3' | 'ibm-plex-mono';
+
 export type SortByType = 'default' | 'vector search' | 'Postgres FTS';
 
 export interface Thread {