Support serif display font

lumen-notes · Jan 8, 2025 · 7fa15ab · 7fa15ab
1 parent 5bc312b
commit 7fa15ab
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@codemirror/lang-yaml": "^6.1.1",
     "@codemirror/state": "^6.1.0",
     "@codemirror/view": "^6.34.2",
+    "@fontsource-variable/literata": "^5.1.1",
     "@isomorphic-git/cors-proxy": "^2.7.1",
     "@isomorphic-git/lightning-fs": "^4.6.0",
     "@lezer/highlight": "^1.2.0",

diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx
@@ -83,13 +83,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
             <Keys keys={shortcut} />
           </div>
         ) : null}
-        {selected !== undefined ? (
-          selected ? (
-            <CheckIcon16 className="text-text-secondary" />
-          ) : (
-            <div className="h-4 w-4" />
-          )
-        ) : null}
+        {selected !== undefined ? selected ? <CheckIcon16 /> : <div className="h-4 w-4" /> : null}
       </>
     )
 

diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -12,7 +12,7 @@ import rehypeKatex from "rehype-katex"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 import { z } from "zod"
-import { notesAtom } from "../global-state"
+import { fontAtom, notesAtom } from "../global-state"
 import { UPLOADS_DIR } from "../hooks/attach-file"
 import { useNoteById } from "../hooks/note"
 import { useSearchNotes } from "../hooks/search"
@@ -71,6 +71,7 @@ const MarkdownContext = React.createContext<{
 export const Markdown = React.memo(
   ({ children, hideFrontmatter = false, onChange }: MarkdownProps) => {
     const { online } = useNetworkState()
+    const font = useAtomValue(fontAtom)
     const { frontmatter, content } = React.useMemo(() => parseFrontmatter(children), [children])
 
     // Split the content into title and body so we can display
@@ -96,7 +97,7 @@ export const Markdown = React.memo(
 
     return (
       <MarkdownContext.Provider value={contextValue}>
-        <div>
+        <div className={cx(font === "serif" && "font-serif")}>
           {parsedTemplate.success ? (
             <div className="flex flex-col gap-4">
               <div className="flex flex-wrap items-center gap-2">
@@ -450,8 +451,8 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
               {MONTH_NAMES[month].slice(0, 3)} {day}
             </span>
           )}
+          <span className="mx-2 text-text-secondary">·</span>
           <span className="text-text-secondary">
-            {" · "}
             {nextAge ? `${withSuffix(nextAge)} birthday` : "Birthday"} is{" "}
             <Link
               className="link"

diff --git a/src/components/note-preview.tsx b/src/components/note-preview.tsx
@@ -1,3 +1,5 @@
+import { useAtomValue } from "jotai"
+import { fontAtom } from "../global-state"
 import { Note } from "../schema"
 import { cx } from "../utils/cx"
 import { formatDateDistance, formatWeekDistance } from "../utils/date"
@@ -8,16 +10,17 @@ const NUM_VISIBLE_TAGS = 4
 
 export function NotePreview({ note }: { note: Note }) {
   const highlightedHrefs = useLinkHighlight()
+  const font = useAtomValue(fontAtom)
 
   return (
     <div
       {...{ inert: "" }}
       className="flex aspect-[5/3] w-full flex-col gap-1.5 overflow-hidden p-3 [contain:layout_paint]"
     >
       {(note.type === "daily" || note.type === "weekly") && !note.title ? (
-        <div className="mb-1 flex items-baseline gap-2.5">
+        <div className={cx("mb-1 flex items-baseline gap-2.5", font === "serif" && "font-serif")}>
           <span className="truncate font-bold">{note.displayName}</span>
-          <span className="truncate text-sm text-text-secondary">
+          <span className="truncate text-sm italic text-text-secondary">
             {note.type === "daily" ? formatDateDistance(note.id) : formatWeekDistance(note.id)}
           </span>
         </div>

diff --git a/src/global-state.ts b/src/global-state.ts
@@ -720,9 +720,11 @@ export const weeklyTemplateAtom = selectAtom(templatesAtom, (templates) =>
 )
 
 // -----------------------------------------------------------------------------
-// Layout
+// Appearance
 // -----------------------------------------------------------------------------
 
 export const sidebarAtom = atomWithStorage<"expanded" | "collapsed">("sidebar", "expanded")
 
 export const widthAtom = atomWithStorage<"fixed" | "fill">("width", "fixed")
+
+export const fontAtom = atomWithStorage<"sans-serif" | "serif">("content-font", "sans-serif")
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,5 @@
+import "@fontsource-variable/literata/wght-italic.css"
+import "@fontsource-variable/literata/wght.css"
 import * as Tooltip from "@radix-ui/react-tooltip"
 import { RouterProvider, createRouter } from "@tanstack/react-router"
 import "@total-typescript/ts-reset"

diff --git a/src/routes/notes_.$.tsx b/src/routes/notes_.$.tsx
@@ -40,6 +40,7 @@ import { NoteList } from "../components/note-list"
 import { SegmentedControl } from "../components/segmented-control"
 import {
   dailyTemplateAtom,
+  fontAtom,
   githubRepoAtom,
   githubUserAtom,
   globalStateMachineAtom,
@@ -140,6 +141,7 @@ function NotePage() {
   const dailyTemplate = useAtomValue(dailyTemplateAtom)
   const weeklyTemplate = useAtomValue(weeklyTemplateAtom)
   const [width, setWidth] = useAtom(widthAtom)
+  const [font, setFont] = useAtom(fontAtom)
 
   // Note data
   const note = useNoteById(noteId)
@@ -405,6 +407,38 @@ function NotePage() {
                     <DropdownMenu.Separator />
                   </>
                 )}
+                {mode === "read" ? (
+                  <>
+                    <DropdownMenu.Item
+                      icon={
+                        <div className="relative size-4">
+                          <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                            Aa
+                          </span>
+                        </div>
+                      }
+                      selected={font === "sans-serif"}
+                      onSelect={() => setFont("sans-serif")}
+                    >
+                      Sans-serif
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                      className="font-serif"
+                      icon={
+                        <div className="relative size-4">
+                          <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-serif">
+                            Aa
+                          </span>
+                        </div>
+                      }
+                      selected={font === "serif"}
+                      onSelect={() => setFont("serif")}
+                    >
+                      Serif
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                  </>
+                ) : null}
                 <DropdownMenu.Item icon={<CopyIcon16 />} onSelect={() => copy(editorValue)}>
                   Copy markdown
                 </DropdownMenu.Item>

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -20,6 +20,7 @@ module.exports = {
     fontFamily: {
       body: ['"iA Writer Quattro"', "system-ui", "sans-serif"],
       mono: ['"iA Writer Mono"', "monospace"],
+      serif: ['"Literata Variable"', "Georgia", "serif"],
     },
     fontSize: {
       sm: "var(--font-size-sm)",