Improve search index, index page, add wiki link.

web/components/Search.tsx

@@ -17,10 +17,10 @@ interface SearchResultProps {
 
 const SearchResult: React.FunctionComponent<SearchResultProps> = (props) => {
   const excerpt = (s: string) => {
-    if (s.length < 100) {
+    if (s.length < 120) {
       return <>{s}</>
     } else {
-      return <>{s.substring(0, 100)}&hellip;</>
+      return <>{s.substring(0, 120)}&hellip;</>
     }
   }
   const bg_for = (s: string) => {

web/pages/index.tsx

@@ -4,6 +4,7 @@ import Layout from '../components/Layout'
 import ArrowIcon from '../components/ArrowIcon'
 import SEO from '../components/SEO'
 import { getSearchIndex, SearchIndex } from '../utils/search'
+import { Url } from 'url'
 
 const pages = [
   {
@@ -23,6 +24,29 @@ const pages = [
   },
 ]
 
+interface IndexItemProps {
+  href: string
+  as?: string
+  title: string
+  desc?: string
+}
+
+const IndexItem: React.FunctionComponent<IndexItemProps> = (props) => {
+  return (
+    <div className="md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg bg-slate-300 dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-30 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-b-0 last:border-b hover:border-b hovered-sibling:border-t-0">
+      <Link as={props.as} href={props.href}>
+        <a className="py-2 lg:py-4 px-2 lg:px-4 block focus:outline-none focus:ring-4">
+          <h2 className="text-xl md:text-2xl">{props.title}</h2>
+          {props.desc && (
+            <p className="mt-3 text-lg opacity-60">{props.desc}</p>
+          )}
+          <ArrowIcon className="mt-4" />
+        </a>
+      </Link>
+    </div>
+  )
+}
+
 interface IndexProps {
   documents: Document[]
   searchIndex: SearchIndex
@@ -35,42 +59,27 @@ export default function Index({ documents, searchIndex }: IndexProps) {
       <main className="w-full">
         <div className="w-full">
           {pages.map((p) => (
-            <div
+            <IndexItem
               key={p.slug}
-              className="md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg bg-slate-300 dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-30 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-b-0 last:border-b hover:border-b hovered-sibling:border-t-0"
+              href={p.slug}
-            >
+              title={p.title}
-              <Link as={p.slug} href={p.slug}>
+              desc={p.desc}
-                <a className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4">
+            />
-                  <h2 className="text-2xl md:text-3xl">{p.title}</h2>
-                  <p className="mt-3 text-lg opacity-60">{p.desc}</p>
-                  <ArrowIcon className="mt-4" />
-                </a>
-              </Link>
-            </div>
           ))}
           {documents.map((document) => (
-            <div
+            <IndexItem
               key={document.filePath}
-              className="md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg bg-slate-300 dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-30 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-b-0 last:border-b hover:border-b hovered-sibling:border-t-0"
+              as={`/documents/${document.filePath.replace(/\.mdx?$/, '')}`}
-            >
+              href={`/documents/[slug]`}
-              <Link
+              title={document.data.title}
-                as={`/documents/${document.filePath.replace(/\.mdx?$/, '')}`}
+              desc={document.data.description}
-                href={`/documents/[slug]`}
+            />
-              >
-                <a className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4">
-                  <h2 className="text-2xl md:text-3xl">
-                    {document.data.title}
-                  </h2>
-                  {document.data.description && (
-                    <p className="mt-3 text-lg opacity-60">
-                      {document.data.description}
-                    </p>
-                  )}
-                  <ArrowIcon className="mt-4" />
-                </a>
-              </Link>
-            </div>
           ))}
+          <IndexItem
+            href="https://github.com/brndnmtthws/conky/wiki"
+            title="Wiki"
+            desc="The Wiki (hosted on GitHub) contains a number of user configs, Lua scripts, FAQs and more."
+          />
         </div>
       </main>
     </Layout>

web/utils/search.ts

@@ -17,22 +17,25 @@ export function getSearchIndex() {
   const cs: SearchItem[] = getConfigSettings().values.map((v) => ({
     kind: 'config',
     name: v.name,
-    desc: v.desc.substring(0, 200),
+    desc: v.desc,
   }))
   const vars: SearchItem[] = getVariables().values.map((v) => ({
     kind: 'var',
     name: v.name,
-    desc: v.desc.substring(0, 200),
+    desc: v.desc,
   }))
   const lua: SearchItem[] = getLua().values.map((v) => ({
     kind: 'lua',
     name: v.name,
-    desc: v.desc.substring(0, 200),
+    desc: v.desc,
   }))
   const list: SearchItem[] = [...cs, ...vars, ...lua]
 
   return {
-    list,
+    list: list.map((item) => ({
+      ...item,
+      desc: item.desc.substring(0, 121),
+    })),
     index: Fuse.createIndex<SearchItem>(['name', 'desc'], list).toJSON(),
   }
 }