From 43edfb60d4451aa74f74d298f657bfe9f16348d8 Mon Sep 17 00:00:00 2001 From: Pacharapol Withayasakpunt Date: Fri, 18 Dec 2020 09:37:43 +0700 Subject: [PATCH] fix searching --- packages/next/assets/util.ts | 8 --- packages/next/components/Layout.tsx | 56 +++++++++---------- packages/next/components/PostQuery.tsx | 9 ++- packages/next/components/PostTeaser.tsx | 31 ++-------- packages/next/components/TitleDesciption.tsx | 32 +++++++++++ packages/next/pages/post/[...path].tsx | 51 +++++++---------- packages/next/server/db.ts | 4 +- packages/next/server/index.ts | 4 +- packages/next/styles/Layout.module.css | 23 ++++++++ .../next/styles/TitleDescription.module.css | 10 ++++ 10 files changed, 126 insertions(+), 102 deletions(-) delete mode 100644 packages/next/assets/util.ts create mode 100644 packages/next/components/TitleDesciption.tsx create mode 100644 packages/next/styles/TitleDescription.module.css diff --git a/packages/next/assets/util.ts b/packages/next/assets/util.ts deleted file mode 100644 index 1702322..0000000 --- a/packages/next/assets/util.ts +++ /dev/null @@ -1,8 +0,0 @@ -export function formatDate (s: string | number) { - return new Date(s).toLocaleDateString([], { - year: 'numeric', - month: 'long', - day: 'numeric', - weekday: 'short' - }) -} diff --git a/packages/next/components/Layout.tsx b/packages/next/components/Layout.tsx index 5469d27..167e1a1 100644 --- a/packages/next/components/Layout.tsx +++ b/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 (
-
+

{THEME.title}

-
+ {children} - -
) } diff --git a/packages/next/components/PostQuery.tsx b/packages/next/components/PostQuery.tsx index 8b56d74..e61968c 100644 --- a/packages/next/components/PostQuery.tsx +++ b/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 (
- {posts.length ? ( + {isLoading ? null : posts.length ? ( posts.map((p) => ) ) : (

No posts found.

diff --git a/packages/next/components/PostTeaser.tsx b/packages/next/components/PostTeaser.tsx index 57286a8..aeae30a 100644 --- a/packages/next/components/PostTeaser.tsx +++ b/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 (
@@ -12,31 +12,8 @@ const PostTeaser = ({ post }: { post: IPost }) => { - - - by  - {THEME.author.url ? ( - - {THEME.author.name} - - ) : ( - {THEME.author.name} - )} - - - {post.date ? ( - {formatDate(post.date)} - ) : null} - - -
+ +
) } diff --git a/packages/next/components/TitleDesciption.tsx b/packages/next/components/TitleDesciption.tsx new file mode 100644 index 0000000..42ee915 --- /dev/null +++ b/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 ( + + + by  + {THEME.author.url ? ( + + {THEME.author.name} + + ) : ( + {THEME.author.name} + )} + + + {date ? ( + + {new Date(date).toLocaleDateString([], { + year: 'numeric', + month: 'long', + day: 'numeric', + weekday: 'short' + })} + + ) : null} + + ) +} + +export default TitleDescription diff --git a/packages/next/pages/post/[...path].tsx b/packages/next/pages/post/[...path].tsx index 3c019f8..59b1f28 100644 --- a/packages/next/pages/post/[...path].tsx +++ b/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) => {

{post.title}

- - - by{' '} - {THEME.author.url ? ( - - {THEME.author.name} - - ) : ( - {THEME.author.name} - )} - - - {post.date ? ( - {formatDate(post.date)} - ) : null} - +
@@ -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 } } diff --git a/packages/next/server/db.ts b/packages/next/server/db.ts index 1614b31..57e40e7 100644 --- a/packages/next/server/db.ts +++ b/packages/next/server/db.ts @@ -58,9 +58,9 @@ export let db: Loki export let dbPost: Collection -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')) } diff --git a/packages/next/server/index.ts b/packages/next/server/index.ts index a2fbbb3..b39e53f 100644 --- a/packages/next/server/index.ts +++ b/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 diff --git a/packages/next/styles/Layout.module.css b/packages/next/styles/Layout.module.css index e69de29..0ae7635 100644 --- a/packages/next/styles/Layout.module.css +++ b/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; +} diff --git a/packages/next/styles/TitleDescription.module.css b/packages/next/styles/TitleDescription.module.css new file mode 100644 index 0000000..d0e17eb --- /dev/null +++ b/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; +}