refactored to use utils

package-lock.json

@@ -9,9 +9,11 @@
 				"@emotion/react": "^11.11.1",
 				"@mantine/core": "^6.0.19",
 				"@mantine/hooks": "^6.0.19",
+				"@preact/signals": "^1.2.1",
 				"date-fns": "^2.30.0",
 				"gray-matter": "file:deps/gray-matter",
 				"jsonlines": "^0.1.1",
+				"minisearch": "^6.1.0",
 				"preact": "^10.13.1",
 				"preact-iso": "^2.3.1",
 				"reading-time-estimator": "^1.9.0"
@@ -1110,6 +1112,30 @@
 				"vite": "2.x || 3.x || 4.x"
 			}
 		},
+		"node_modules/@preact/signals": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.2.1.tgz",
+			"integrity": "sha512-hRPvp1C2ooDzOHqfnhdpHgoIFDbYFAXLhoid3+jSItuPPD/J0r/UsiWKv/8ZO/oEhjRaP0M5niuRYsWqmY2GEA==",
+			"dependencies": {
+				"@preact/signals-core": "^1.4.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			},
+			"peerDependencies": {
+				"preact": "10.x"
+			}
+		},
+		"node_modules/@preact/signals-core": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.4.0.tgz",
+			"integrity": "sha512-5iYoZBhELLIhUQceZI7sDTQWPb+xcVSn2qk8T/aNl/VMh+A4AiPX9YRSh4XO7fZ6pncrVxl1Iln82poVqYVbbw==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			}
+		},
 		"node_modules/@prefresh/babel-plugin": {
 			"version": "0.5.0",
 			"resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.5.0.tgz",
@@ -5022,6 +5048,11 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/minisearch": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/minisearch/-/minisearch-6.1.0.tgz",
+			"integrity": "sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg=="
+		},
 		"node_modules/mixin-deep": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",

public/stream.jsonl

@@ -1,2 +1,2 @@
-{"date":"2023-01-11","markdown":">When asked, “How could you possibly have done the first interactive graphics program, the first non-procedural programming language, the first object oriented software system, all in one year?” Ivan replied: “Well, I didnt know it was hard.”\n\n— via Alan Kay, Doing with Images Makes Symbols, 1987"}
+{"id":0, "date":"2023-01-11","text":">When asked, “How could you possibly have done the first interactive graphics program, the first non-procedural programming language, the first object oriented software system, all in one year?” Ivan replied: “Well, I didnt know it was hard.”\n\n— via Alan Kay, Doing with Images Makes Symbols, 1987"}
-{"date":"2023-05-21","markdown":"**Little excerpt**\n\nAn approach to interfaces in which a network of transformations, constraints, preferences, and other relations connect object(s) of interest to an interface surrogate. The system as a whole is responsible for resolving the arbitrary and complex relationship between an object and surrogate and bridging that surrogate representation to a representation which is observable to users."}
+{"id":1, "date":"2023-05-21","text":"**Little excerpt**\n\nAn approach to interfaces in which a network of transformations, constraints, preferences, and other relations connect object(s) of interest to an interface surrogate. The system as a whole is responsible for resolving the arbitrary and complex relationship between an object and surrogate and bridging that surrogate representation to a representation which is observable to users."}

src/pages/Post.tsx

@@ -12,7 +12,7 @@ import { readingTime } from 'reading-time-estimator'
 import { Header } from '@/components/Header'
 import { useRoute } from 'preact-iso'
 import { useState, useEffect } from 'preact/hooks'
-import { format } from 'date-fns'
+import { friendlyDate } from '@/utils'
 
 const useStyles = createStyles((theme) => ({
   title: {
@@ -32,12 +32,6 @@ const useStyles = createStyles((theme) => ({
   },
 }))
 
-function friendlyDate(dateString: string): string {
-  const inputDate = new Date(dateString)
-  const formattedDate = format(inputDate, 'do MMM yyyy')
-  return formattedDate
-}
-
 async function getPost(name: string) {
   const response = await fetch(`${name}.md?raw`)
   return matter(await response.text())

src/pages/Posts.tsx

@@ -8,19 +8,13 @@ import {
   useMantineTheme,
   createStyles,
 } from '@mantine/core'
-import { format } from 'date-fns'
+import { friendlyDate, getJsonl } from '@/utils'
 import { useEffect, useState } from 'preact/hooks'
 
-function friendlyDate(dateString: string): string {
+type Post = {
-  const inputDate = new Date(dateString)
+  slug: string
-  return format(inputDate, 'do MMM yyyy')
+  title: string
-}
+  date: string
-
-async function getPosts() {
-  const response = await fetch('posts.jsonl')
-  return await (await response.text()).split('\n').map((post) => {
-    return JSON.parse(post)
-  })
 }
 
 const useStyles = createStyles((theme) => ({
@@ -59,16 +53,10 @@ function Frame({ children }) {
   )
 }
 
-type Post = {
-  slug: string
-  title: string
-  date: string
-}
-
 export function Posts() {
   const [posts, setPost] = useState<Array<Post>>(null)
   useEffect(() => {
-    getPosts().then(setPost)
+    getJsonl('posts.jsonl').then(setPost)
   }, [])
 
   if (!posts) {

src/utils.ts

@@ -0,0 +1,13 @@
+import { format } from 'date-fns'
+
+export function friendlyDate(dateString: string): string {
+  const inputDate = new Date(dateString)
+  return format(inputDate, 'do MMM yyyy')
+}
+
+export async function getJsonl(file: string) {
+  const response = await fetch('stream.jsonl')
+  return await (await response.text()).split('\n').map((post) => {
+    return JSON.parse(post)
+  })
+}