fix searching

packages/next/assets/util.ts

@@ -1,8 +0,0 @@
-export function formatDate (s: string | number) {
-  return new Date(s).toLocaleDateString([], {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    weekday: 'short'
-  })
-}

packages/next/components/Layout.tsx

@@ -1,14 +1,19 @@
 import { THEME } from '~/assets/global'
+import styles from '~/styles/Layout.module.css'
 import Link from 'next/link'
-import { ReactNode } from 'react'
+import { useRouter } from 'next/router'
+import { ReactNode, useState } from 'react'
+
+const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
+  const router = useRouter()
+  const [q, setQ] = useState(router.query.q as string)
 
-const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <main>
-      <header>
+      <header className={styles.Header}>
         <h1>{THEME.title}</h1>
 
-        <nav>
+        <nav className={styles.Nav}>
           <ul>
             <li>
               <Link href="/">
@@ -34,35 +39,28 @@ const Layout = ({ children }: { children: ReactNode }) => {
             )}
           </ul>
 
-          <form>
-            <input name="q" type="search" placeholder="Search..." />
-            <div className="icon">🔎</div>
+          <form
+            className={styles.Form}
+            onSubmit={(ev) => {
+              if (router.pathname.startsWith('/post/')) {
+                ev.preventDefault()
+                router.push(`/blog?q=${encodeURIComponent(q)}`)
+              }
+            }}
+          >
+            <input
+              name="q"
+              type="search"
+              placeholder="Search..."
+              value={q}
+              onInput={(ev) => setQ((ev.target as HTMLInputElement).value)}
+            />
+            <div className={styles.icon}>🔎</div>
           </form>
         </nav>
       </header>
+
       {children}
-
-      <style jsx>{`
-        nav ul {
-          display: inline-block;
-        }
-
-        form {
-          float: right;
-          max-width: 300px;
-          position: relative;
-        }
-
-        form .icon {
-          position: absolute;
-          right: 5px;
-          top: 5px;
-        }
-
-        input {
-          padding-right: 1.5em;
-        }
-      `}</style>
     </main>
   )
 }

packages/next/components/PostQuery.tsx

@@ -36,8 +36,9 @@ const PostQuery = ({
     return pathname
   }
 
-  const [posts, setPosts] = useState(defaults.posts)
-  const [count, setCount] = useState(defaults.count)
+  const [posts, setPosts] = useState([] as IPost[])
+  const [count, setCount] = useState(0)
+  const [isLoading, setLoading] = useState(true)
 
   useEffect(() => {
     if (router.query.q) {
@@ -62,13 +63,15 @@ const PostQuery = ({
       setPosts(defaults.posts)
       setCount(defaults.count)
     }
+
+    setLoading(false)
   }, [router.query.q, router.query.page, router.query.tag])
 
   const totalPages = Math.ceil(count / 5)
 
   return (
     <article>
-      {posts.length ? (
+      {isLoading ? null : posts.length ? (
         posts.map((p) => <PostTeaser post={p} key={p.path} />)
       ) : (
         <p>No posts found.</p>

packages/next/components/PostTeaser.tsx

@@ -1,8 +1,8 @@
-import { THEME } from '~/assets/global'
-import { formatDate } from '~/assets/util'
 import { IPost } from '~/server/db'
 import Link from 'next/link'
 
+import TitleDescription from './TitleDesciption'
+
 const PostTeaser = ({ post }: { post: IPost }) => {
   return (
     <section>
@@ -12,31 +12,8 @@ const PostTeaser = ({ post }: { post: IPost }) => {
         </Link>
       </h2>
 
-      <small>
-        <span>
-          by&nbsp;
-          {THEME.author.url ? (
-            <a
-              href={THEME.author.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {THEME.author.name}
-            </a>
-          ) : (
-            <span>{THEME.author.name}</span>
-          )}
-        </span>
-
-        {post.date ? (
-          <span style={{ float: 'right' }}>{formatDate(post.date)}</span>
-        ) : null}
-      </small>
-
-      <article
-        style={{ marginTop: '2rem' }}
-        dangerouslySetInnerHTML={{ __html: post.excerptHtml }}
-      ></article>
+      <TitleDescription date={post.date} />
+      <article dangerouslySetInnerHTML={{ __html: post.excerptHtml }}></article>
     </section>
   )
 }

packages/next/components/TitleDesciption.tsx

@@ -0,0 +1,32 @@
+import { THEME } from '~/assets/global'
+import styles from '~/styles/TitleDescription.module.css'
+
+const TitleDescription = ({ date }: { date?: number }) => {
+  return (
+    <small className={styles.Small}>
+      <span>
+        by&nbsp;
+        {THEME.author.url ? (
+          <a href={THEME.author.url} target="_blank" rel="noopener noreferrer">
+            {THEME.author.name}
+          </a>
+        ) : (
+          <span>{THEME.author.name}</span>
+        )}
+      </span>
+
+      {date ? (
+        <span className={styles.date}>
+          {new Date(date).toLocaleDateString([], {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'short'
+          })}
+        </span>
+      ) : null}
+    </small>
+  )
+}
+
+export default TitleDescription

packages/next/pages/post/[...path].tsx

@@ -1,7 +1,7 @@
 import '~/assets/remark42'
 
 import { THEME } from '~/assets/global'
-import { formatDate } from '~/assets/util'
+import TitleDescription from '~/components/TitleDesciption'
 import { IPost, dbPost, initDatabase } from '~/server/db'
 import styles from '~/styles/PostPage.module.css'
 import { GetStaticPaths, GetStaticProps } from 'next'
@@ -18,11 +18,21 @@ const PostPage = (post: IPost) => {
         window.remark42Instance.destroy()
       }
 
-      window.remark42Instance = window.REMARK42.createInstance({
-        node: remark42Ref.current,
-        host: THEME.comment.remark42.host,
-        site_id: THEME.comment.remark42.siteId
-      })
+      const initRemark42 = () => {
+        window.remark42Instance = window.REMARK42.createInstance({
+          node: remark42Ref.current,
+          host: THEME.comment.remark42.host,
+          site_id: THEME.comment.remark42.siteId
+        })
+      }
+
+      if (window.REMARK42) {
+        initRemark42()
+      } else {
+        window.addEventListener('REMARK42::ready', () => {
+          initRemark42()
+        })
+      }
     }
   }, [remark42Ref.current])
 
@@ -53,26 +63,7 @@ const PostPage = (post: IPost) => {
       <section>
         <h2>{post.title}</h2>
 
-        <small>
-          <span>
-            by{' '}
-            {THEME.author.url ? (
-              <a
-                href={THEME.author.url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {THEME.author.name}
-              </a>
-            ) : (
-              <span>{THEME.author.name}</span>
-            )}
-          </span>
-
-          {post.date ? (
-            <span style={{ float: 'right' }}>{formatDate(post.date)}</span>
-          ) : null}
-        </small>
+        <TitleDescription date={post.date} />
       </section>
 
       <section dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
@@ -105,11 +96,9 @@ export const getStaticPaths: GetStaticPaths = async () => {
   await initDatabase()
 
   return {
-    paths: dbPost
-      .find()
-      .map(({ path }) => ({
-        params: { path: path.split(/\//g).map(encodeURIComponent) }
-      })),
+    paths: dbPost.find().map(({ path }) => ({
+      params: { path: path.split(/\//g).map(encodeURIComponent) }
+    })),
     fallback: false
   }
 }

packages/next/server/db.ts

@@ -58,9 +58,9 @@ export let db: Loki
 
 export let dbPost: Collection<IPost>
 
-export let idx: lunr.Index
+let idx: lunr.Index
 
-export async function initLunr () {
+export async function getLunr () {
   return idx || lunr.Index.load(require('../build/idx.json'))
 }
 

packages/next/server/index.ts

@@ -1,4 +1,4 @@
-import { dbPost, idx, initDatabase, initLunr } from './db'
+import { dbPost, getLunr, initDatabase } from './db'
 
 export async function doSearch ({
   q,
@@ -10,7 +10,7 @@ export async function doSearch ({
   page?: number
 }) {
   await initDatabase()
-  await initLunr()
+  const idx = await getLunr()
 
   const perPage = 5
   const offset = (page - 1) * perPage

packages/next/styles/Layout.module.css

@@ -0,0 +1,23 @@
+.Header {
+  margin-bottom: 4rem;
+}
+
+.Nav ul {
+  display: inline-block;
+}
+
+.Form {
+  float: right;
+  max-width: 300px;
+  position: relative;
+}
+
+.Form input {
+  padding-right: 1.5em;
+}
+
+.Form .icon {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}

packages/next/styles/TitleDescription.module.css

@@ -0,0 +1,10 @@
+.Small {
+  display: block;
+  min-height: 4em;
+}
+
+.Small .date {
+  float: right;
+  min-width: 15em;
+  text-align: right;
+}