search issues

content/01-getting-started/04-example.mdx

@@ -2,152 +2,144 @@
 title: 'Example'
 metaTitle: 'Example metaTitle'
 metaDescription: 'Example meta desc'
-
+staticLink: false
+experimental: false
+duration: '2 min'
 ---
 
 ## Overview
 
-This page won't be shown in sidebar. <FileWithIcon text="schema.ts" icon="file"/> For now, h2 tags cannot be written inside `SwitchTech` block. But still can include headings using `<h3>, <h4>` tags and not using `### headings`.
-`<h2>` tags  wont be shown in TOC yet.
+This page won't be shown in sidebar.
 
+## TOC
 
-<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>
+Will be auto-generated from h2 headings
 
-<tab>
 
-| **id** | **email**           | **name**  |
-| :----- | :------------------ | :-------- |
-| `1`    | `"sarah@prisma.io"` | `"Sarah"` |
-| `2`    | `"maria@prisma.io"` | `"Maria"` |
+## MDX blocks
 
-</tab>
+### Paragraph
 
-<tab>
+Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
 
-```copy bash-symbol
-npm run dev
-```
-</tab>
-
-</TabbedContent>
 
+### List
+  - one 
+  - two
+  - three
 
-
-```javascript line-number copy
-// some comment
-async function main() { 
-+ const allUsers = await prisma.user.findMany() 
-+ console.log(allUsers)
-- const allUsers = prisma.user.findMany() 
-- console.log(allUsers!)
-| const allUsers = prisma.user.findMany() 
-| console.log(allUsers!)
-}
-```
+### Code blocks
 
 ```js
-
-interface User {
-  nau: String;
+async function main() {
+  const allUsers = await prisma.user.findMany()
+  console.log(allUsers)
 }
-interface Some {
-  +++ nau: User;
-}
-
-```
-
-```js
-null
-false
-1
 ```
 
-```prisma copy line-number
-// prisma/schema.prisma
-// A Prisma Schema is usually generated by introspecting a database
-
+```prisma
 datasource db {
   provider = "sqlite"
-  url      = env("file:./dev.db")
+  url      = env("DATABASE_URL")
 }
-
 generator client {
   provider = "prisma-client-js"
 }
-
-model User {
-  id        Int      @default(autoincrement()) @id
-  createdAt DateTime @default(now())
-  email     String   @unique
-  name      String
-  role      Role     @default(USER)
-  posts     Post[]
-  profile   Profile?
-}
-
-model Profile {
-  id     Int    @default(autoincrement()) @id
-  bio    String
-  user   User   @relation(fields: [userId], references: [id])
-  userId Int
-}
-
 model Post {
-  id         Int        @default(autoincrement()) @id
-|  createdAt  DateTime   @default(now())
-|  title      String
-|  published  Boolean    @default(false)
-|  categories Category[] @relation(references: [id])
-|  author     User       @relation(fields: [authorId], references: [id])
-  authorId   Int
+  id        Int     @id @default(autoincrement())
+  title     String
+  content   String?
+  published Boolean @default(false)
+  author    User?   @relation(fields: [authorId], references: [id])
+  authorId  Int?
 }
-
-model Category {
-  id    Int    @default(autoincrement()) @id
-  name  String
-  posts Post[] @relation(references: [id])
-}
-
-enum Role {
-+  USER
-+  ADMIN
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+  posts Post[]
 }
+```
 
-@@id([po, ls])
+### Code block with copy
+
+```js copy
+async function main() {
+  const allUsers = await prisma.user.findMany()
+  console.log(allUsers)
+}
 ```
 
-<SwitchTech technologies={['*', 'mysql']}>
+### Code block with line number
 
-```js
-// comment here
-js postgresql {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+```js line-number
+async function main() {
+  const allUsers = await prisma.user.findMany()
+  console.log(allUsers)
 }
 ```
 
-```prisma
-// comment here
-prisma postgresql {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+### Code block with highlighted code
+
+```js line-number
+async function main() {
++  added code
+-  deleted code
+|  neutral highlight
 }
 ```
 
-</SwitchTech>
+#### Inline code
 
-<SwitchTech technologies={['node', 'postgres']}>
+`inlineCode`
 
-<ButtonLink color="dark" type="primary" href="/" target="_blank">
-  Quickstart (5 min)
-</ButtonLink>
-<ButtonLink
-  color="dark"
-  type="primary"
-  href="https://prisma2.netlify.com/getting-started/quickstart"
-  target="_blank"
->
-  Quickstart (5 min)
-</ButtonLink>
+### File name with icon
+
+4 different icons available
+- <FileWithIcon text="file.pdf" icon="file"/>
+- <FileWithIcon text="dev.db" icon="database"/>
+- <FileWithIcon text="Windows" icon="display"/>
+- <FileWithIcon text="schema.ts" icon="code"/>
+
+### Tabbed blocks
 
-</SwitchTech>
+<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>
+
+<tab>
+
+| **id** | **email**           | **name**  |
+| :----- | :------------------ | :-------- |
+| `1`    | `"sarah@prisma.io"` | `"Sarah"` |
+| `2`    | `"maria@prisma.io"` | `"Maria"` |
+
+</tab>
+
+<tab>
+
+```copy bash-symbol
+npm run dev
+```
+</tab>
+
+</TabbedContent>
+
+### Expand/Collapse section
+
+<details><summary>Expand if you want to view more</summary>
+
+More :)
+
+</details>
+
+### Table
+
+| **id** | **email**           | **name**  |
+| :----- | :------------------ | :-------- |
+| `1`    | `"sarah@prisma.io"` | `"Sarah"` |
+| `2`    | `"maria@prisma.io"` | `"Maria"` |
+
+### Fancy button
+
+<ButtonLink color="dark" type="primary" href="/to/path">
+  Button text
+</ButtonLink>

gatsby-config.js

@@ -18,19 +18,6 @@ const gatsbyRemarkPlugins = [
   {
     resolve: `gatsby-remark-images`,
   },
-  // {
-  //   resolve: `gatsby-remark-highlights`,
-  //   options: {
-  //       // Additional languages, no need to add it 
-  //       // if you don't wish to use additional languages
-  //       // additionalLangs: [`language-groovy`],
-  //       // scope prefix to use, defaults to ''
-  //       scopePrefix: 'syntax--',
-  //       codeWrap: {
-  //         className: 'midnight'
-  //       }
-  //     }
-  // },
 ]
 
 module.exports = {

src/components/search/hitComps.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Snippet } from 'react-instantsearch-dom'
 import Link from '../link'
-import { urlGenerator } from '../../utils/urlGenerator'
 import styled from 'styled-components'
 import ParentTitle from '../parentTitleComp'
 
@@ -50,10 +49,15 @@ const DocHit = ({ hit }: any) => (
   <HitComp>
     <Link
       style={{ boxShadow: `none`, textDecoration: 'none' }}
-      to={hit.slug.includes('index') ? null : urlGenerator(hit.slug)}
+      to={hit.slug.includes('index') ? null : hit.path}
     >
       <ParentTitle slug={hit.slug} />
-      <h3>{hit.title}</h3>
+      <h3>
+        <Snippet hit={hit} attribute="title" tagName="mark" /> /{' '}
+        <span style={{ color: 'var(--code-inner-color)' }}>
+          <Snippet hit={hit} attribute="heading" tagName="mark" />
+        </span>
+      </h3>
       <Snippet hit={hit} attribute="content" tagName="mark" />
     </Link>
   </HitComp>

src/components/search/index.tsx

@@ -74,6 +74,8 @@ export default function Search({ hitsStatus }: any) {
     hitsStatus(query.length > 0 && showHits)
   }, [showHits, query])
 
+  const emptySearchBox = () => setQuery('')
+
   return (
     <InstantSearch
       searchClient={searchClient}
@@ -82,7 +84,10 @@ export default function Search({ hitsStatus }: any) {
     >
       <Overlay visible={query.length > 0 && showHits} hideSearch={hideSearch} />
       <CustomSearchBox onFocus={showSearch} />
-      <HitsWrapper className={`${query.length > 0 && showHits ? 'show' : ''}`}>
+      <HitsWrapper
+        className={`${query.length > 0 && showHits ? 'show' : ''}`}
+        onClick={emptySearchBox}
+      >
         <Index key={indexName} indexName={indexName}>
           <Results>
             <Hits hitComponent={DocHit} />

src/components/search/input.tsx

@@ -68,7 +68,6 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => {
     if (newValue === '') {
       return clearInput()
     }
-
     // Otherwise, debounce the search to avoid triggering many queries at once, which could also
     // make the UI freeze.
     window.clearTimeout(timeoutId.current)
@@ -82,6 +81,7 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => {
     refine('')
   }
 
+  // Explore SearchBox from react-instant-search
   return (
     <Form>
       <Input

src/components/sidebar/index.tsx

@@ -64,6 +64,7 @@ const getGuides = (allEdges: any) =>
 
 const SidebarLayout = ({ isMobile }: any) => {
   const { allMdx }: AllArticles = useAllArticlesQuery()
+
   return !isMobile ? (
     <StickyContainer>
       <SidebarContainer>

src/components/topSection.tsx

@@ -70,7 +70,7 @@ const TopSection = ({ location, title, slug, langSwitcher, dbSwitcher, navigate,
       dbSwitcher ? `${dbSelected}` : ''
     }`
     if (!pathTechParams.includes(newParams)) {
-      navigate(withPrefix(`${urlGenerator(slug)}-${newParams}`), {
+      navigate(withPrefix(`${urlGenerator(slug)}-${newParams}${location.hash}`), {
         replace: location.pathname === urlGenerator(slug),
       })
     }