add titles to pages

src/hooks/useTitle.ts

@@ -0,0 +1,7 @@
+import { useEffect } from 'preact/hooks'
+
+export function useTitle(title: string) {
+  useEffect(() => {
+    document.title = `${title} | Orion Reed`
+  }, [])
+}

src/pages/Home.tsx

@@ -1,7 +1,9 @@
 import { Header } from '@/components/Header'
+import { useTitle } from '@/hooks/useTitle'
 import { Container, Text, Title, Anchor, Space } from '@mantine/core'
 
 export function Home() {
+  useTitle('Home')
   return (
     <>
       <Header />

src/pages/Posts.tsx

@@ -9,24 +9,19 @@ import {
   createStyles,
 } from '@mantine/core'
 import { friendlyDate, getJsonl } from '@/utils'
+import { useTitle } from '@/hooks/useTitle'
 
 const posts = await getJsonl('/posts.jsonl')
 
-type Post = {
-  slug: string
-  title: string
-  date: string
-}
-
 const useStyles = createStyles((theme) => ({
   index: {
     fontFamily: theme.fontFamilyMonospace,
-    fontSize: '0.85em',
+    fontSize: '0.75em',
     alignSelf: 'flex-end',
   },
   date: {
     fontFamily: theme.fontFamilyMonospace,
-    fontSize: '0.85em',
+    fontSize: '0.75em',
     alignSelf: 'flex-end',
   },
 }))
@@ -39,11 +34,11 @@ function PostListItem({ slug, title, date, index }) {
       <Text color="dimmed" className={classes.index}>
         {`${index}`.padStart(3, '0')}
       </Text>
-      <Anchor href={`posts/${slug}`} color={black}>
+      <Anchor href={`posts/${slug}`} td="none" color={black}>
         {title}
       </Anchor>
       <Text color="dimmed" fs="italic" className={classes.date}>
-        {friendlyDate(date, 'dd/MMM/yyyy')}
+        {friendlyDate(date, 'MMM dd')}
       </Text>
     </Group>
   )
@@ -62,6 +57,7 @@ function Frame({ children }) {
 }
 
 export function Posts() {
+  useTitle('Posts')
   return (
     <Frame>
       {posts.map((post, index, array) => {

src/pages/Stream.tsx

@@ -14,6 +14,7 @@ import Markdown from 'markdown-to-jsx'
 import MiniSearch from 'minisearch'
 import { signal } from '@preact/signals'
 import { friendlyDate, getJsonl } from '@/utils'
+import { useTitle } from '@/hooks/useTitle'
 
 const search = signal('')
 
@@ -129,8 +130,12 @@ function Search() {
 }
 
 export default function Stream() {
+  useTitle('Stream')
   const { classes } = useStyles()
   const results = !search.value ? streamItems : miniSearch.search(search.value)
+  console.log(search.value)
+  console.log(results)
+
   return (
     <>
       <Header />