Merge pull request #642 from tinacms/add-guides-to-search

Add guides to search

components/DocumentationNavigation/DocsHeaderNav.tsx

@@ -5,11 +5,7 @@ import { DynamicLink } from '../ui/DynamicLink'
 import data from '../../content/docs-navigation.json'
 import { SearchContainer } from '../search/styles'
 import Search from '../search'
-
-const searchIndices = [
-  { name: `Tina-Docs-Next`, title: `Docs`, hitComp: `DocHit` },
-  { name: `Tina-Blogs-Next`, title: `Blog`, hitComp: `BlogHit` },
-]
+import { searchIndices } from '../search/indices'
 
 interface NavProps {
   color?: 'white' | 'secondary' | 'seafoam' | 'light'

components/search/hitComps.tsx

@@ -4,6 +4,7 @@ import { Hit } from 'react-instantsearch-core'
 import path from 'path'
 import { DynamicLink } from '../ui/DynamicLink'
 import { formatDate } from '../../utils'
+import styled from 'styled-components'
 
 const DocHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => (
   <DynamicLink href={path.join('/docs', (hit as any).slug)}>
@@ -18,8 +19,34 @@ const DocHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => (
   </DynamicLink>
 )
 
-const BlogHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => {
+const GuideHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => (
+  <DynamicLink href={path.join('/guides', (hit as any).slug)}>
+    <div onClick={clickHandler}>
+      <h4>
+        {hit.guideTitle && (
+          <GuideTitle>
+            <Highlight attribute="guideTitle" hit={hit} tagName="mark" />
+          </GuideTitle>
+        )}
+        <Highlight attribute="title" hit={hit} tagName="mark" />
+      </h4>
+      {hit['_highlightResult'].excerpt.matchLevel !== 'none' && (
+        <Highlight attribute="excerpt" hit={hit} tagName="mark" />
+      )}
+    </div>
+  </DynamicLink>
+)
+
+const GuideTitle = styled.div`
+  display: inline;
+  &:after {
+    content: ' - ';
+    display: inline-block;
+    margin: 0 0.25rem;
+  }
+`
 
+const BlogHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => {
   return (
     <DynamicLink href={path.join('/blog', (hit as any).slug)}>
       <div onClick={clickHandler}>
@@ -37,5 +64,6 @@ const BlogHit = (clickHandler: any) => ({ hit }: { hit: Hit }) => {
 
 export const hitComponents = {
   ['DocHit']: DocHit,
+  ['GuideHit']: GuideHit,
   ['BlogHit']: BlogHit,
 }

components/search/indices.tsx

@@ -0,0 +1,5 @@
+export const searchIndices = [
+  { name: `Tina-Docs-Next`, title: `Docs`, hitComp: `DocHit` },
+  { name: `Tina-Guides-Next`, title: `Guides`, hitComp: `GuideHit` },
+  { name: `Tina-Blogs-Next`, title: `Blog`, hitComp: `BlogHit` },
+]

components/ui/HeaderNav.tsx

@@ -5,11 +5,7 @@ import { DynamicLink } from './DynamicLink'
 import data from '../../content/navigation.json'
 import { SearchContainer } from '../search/styles'
 import Search from '../search'
-
-const searchIndices = [
-  { name: `Tina-Docs-Next`, title: `Docs`, hitComp: `DocHit` },
-  { name: `Tina-Blogs-Next`, title: `Blog`, hitComp: `BlogHit` },
-]
+import { searchIndices } from '../search/indices'
 
 interface NavProps {
   color?: 'white' | 'secondary' | 'seafoam' | 'light'

data-api/fetchGuides.ts

@@ -8,6 +8,7 @@ export default async function fetchDocs() {
   const files = await fg(directory + '/**/*.md')
 
   return files.map(fileName => {
+    const isIndex = fileName.endsWith('/index.md')
     const fullPath = path.resolve(directory, fileName)
 
     const slug = fullPath
@@ -18,8 +19,15 @@ export default async function fetchDocs() {
 
     const file = fs.readFileSync(fullPath)
     const doc = matter(file)
+    let guideTitle = null
+    if (!isIndex) {
+      const guideMeta = JSON.parse(
+        fs.readFileSync(`${path.dirname(fullPath)}/meta.json`)
+      )
+      guideTitle = guideMeta.title
+    }
     return {
-      data: { ...doc.data, slug },
+      data: { ...doc.data, slug, guideTitle },
       content: doc.content,
     }
   })