From 5f8c1a91e5f50356a18149c0c8a8cc60007c7840 Mon Sep 17 00:00:00 2001 From: Nilu Date: Wed, 6 May 2020 19:38:30 +0200 Subject: [PATCH 1/4] search issues --- content/01-getting-started/04-example.mdx | 210 +++++++++++----------- gatsby-config.js | 13 -- src/components/search/hitComps.tsx | 10 +- src/components/search/index.tsx | 7 +- src/components/search/input.tsx | 3 +- src/components/sidebar/index.tsx | 1 + src/components/topSection.tsx | 2 +- src/utils/algolia.js | 90 ++++++---- src/utils/parentTitle.ts | 2 + 9 files changed, 177 insertions(+), 161 deletions(-) diff --git a/content/01-getting-started/04-example.mdx b/content/01-getting-started/04-example.mdx index d7a83304e4..2a7a262a85 100644 --- a/content/01-getting-started/04-example.mdx +++ b/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. For now, h2 tags cannot be written inside `SwitchTech` block. But still can include headings using `

,

` tags and not using `### headings`. -`

` tags wont be shown in TOC yet. +This page won't be shown in sidebar. +## TOC -, ]}> +Will be auto-generated from h2 headings - -| **id** | **email** | **name** | -| :----- | :------------------ | :-------- | -| `1` | `"sarah@prisma.io"` | `"Sarah"` | -| `2` | `"maria@prisma.io"` | `"Maria"` | +## MDX blocks - +### Paragraph - +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 -``` - - - +### 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) +} ``` - +### 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 } ``` - +#### Inline code - +`inlineCode` - - Quickstart (5 min) - - - Quickstart (5 min) - +### File name with icon + +4 different icons available +- +- +- +- + +### Tabbed blocks - +, ]}> + + + +| **id** | **email** | **name** | +| :----- | :------------------ | :-------- | +| `1` | `"sarah@prisma.io"` | `"Sarah"` | +| `2` | `"maria@prisma.io"` | `"Maria"` | + + + + + +```copy bash-symbol +npm run dev +``` + + + + +### Expand/Collapse section + +
Expand if you want to view more + +More :) + +
+ +### Table + +| **id** | **email** | **name** | +| :----- | :------------------ | :-------- | +| `1` | `"sarah@prisma.io"` | `"Sarah"` | +| `2` | `"maria@prisma.io"` | `"Maria"` | + +### Fancy button + + + Button text + diff --git a/gatsby-config.js b/gatsby-config.js index 4e1717562d..85eda2472c 100644 --- a/gatsby-config.js +++ b/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 = { diff --git a/src/components/search/hitComps.tsx b/src/components/search/hitComps.tsx index 939d73aac6..d94c1bbf40 100644 --- a/src/components/search/hitComps.tsx +++ b/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) => ( -

{hit.title}

+

+ /{' '} + + + +

diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index b1777af240..50cc4d59e6 100644 --- a/src/components/search/index.tsx +++ b/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 ( 0 && showHits} hideSearch={hideSearch} /> - 0 && showHits ? 'show' : ''}`}> + 0 && showHits ? 'show' : ''}`} + onClick={emptySearchBox} + > diff --git a/src/components/search/input.tsx b/src/components/search/input.tsx index a47ad3d906..11e9b9dfaa 100644 --- a/src/components/search/input.tsx +++ b/src/components/search/input.tsx @@ -68,7 +68,7 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => { if (newValue === '') { return clearInput() } - + console.log(newValue) // Otherwise, debounce the search to avoid triggering many queries at once, which could also // make the UI freeze. window.clearTimeout(timeoutId.current) @@ -91,6 +91,7 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => { onChange={onChange} onFocus={onFocus} value={value} + focusShortcuts={['/']} {...rest} /> diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 6368372f99..e950069894 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -64,6 +64,7 @@ const getGuides = (allEdges: any) => const SidebarLayout = ({ isMobile }: any) => { const { allMdx }: AllArticles = useAllArticlesQuery() + return !isMobile ? ( diff --git a/src/components/topSection.tsx b/src/components/topSection.tsx index 377ba5dc22..8612d3c3cb 100644 --- a/src/components/topSection.tsx +++ b/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), }) } diff --git a/src/utils/algolia.js b/src/utils/algolia.js index 6932eabd55..2b57cd33ee 100644 --- a/src/utils/algolia.js +++ b/src/utils/algolia.js @@ -1,51 +1,74 @@ require('dotenv').config({ path: `.env`, -}); +}) const handleRawBody = node => { - const { rawBody, ...rest } = node; - rawBodyWithoutFrontmatter = rawBody + const { rawBody, ...rest } = node + const rawBodyWithoutFrontmatter = rawBody .split('---') .slice(2) - .join('---'); - const sections = rawBodyWithoutFrontmatter.split('\n\n'); - const filteredSections = sections.filter( - section => - section !== ' ' && - section !== '' && - !section.includes('##') && - !section.includes('') && - !section.includes(' ({ + .join('---') + const blocks = rawBodyWithoutFrontmatter + .split(/#{3,}/i) + .join(' ') + .split('##') + const headingWithcontent = blocks + .filter(block => block !== '\n\n') + .map(block => { + const parts = block.split('\n\n') + return { heading: parts[0].trim(), content: parts.splice(1).join('\n\n') } + }) + let finalSections = [] + headingWithcontent.map(fSec => { + const sections = fSec.content.split('\n\n') + const filteredSections = sections.filter( + section => + section !== ' ' && + section !== '' && + !section.includes('') + ) + filteredSections.map( + para => (para !== '\n' || para !== '') && finalSections.push({ para, heading: fSec.heading }) + ) + }) + + const records = finalSections.map(fSection => ({ ...rest, - content: fSection - .replace(/[^a-zA-Z0-9]/g, ' ') - .replace(/\s\s+/g, ' ') - .trim(), - })); + heading: fSection.heading, + content: fSection.para.replace(/[\*\/\n/{\}\|\-\`\<\>\[\]]+/g, ' ').trim(), + path: `${rest.slug.replace(/\d+-/g, '')}${ + rest.tableOfContents && + rest.tableOfContents.items && + rest.tableOfContents.items.find(t => t.title === fSection.heading) + ? rest.tableOfContents.items.find(t => t.title === fSection.heading).url + : '' + }`, + })) - return records; -}; + return records +} const unnestFrontmatter = node => { - const { fields, frontmatter, ...rest } = node; + const { fields, frontmatter, ...rest } = node return { ...fields, ...frontmatter, ...rest, - }; -}; + } +} const settings = { - searchableAttributes: ['content'], - attributesToSnippet: ['content:25'], -}; + searchableAttributes: ['title', 'heading', 'content'], + attributesToHighlight: ['*'], + attributesToSnippet: ['*:25'], + hitsPerPage: 20, +} const queries = [ { @@ -61,6 +84,7 @@ const queries = [ frontmatter { title } + tableOfContents } } } @@ -75,11 +99,11 @@ const queries = [ indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME, settings, }, -]; +] module.exports = { appId: process.env.GATSBY_ALGOLIA_APP_ID, apiKey: process.env.GATSBY_ALGOLIA_ADMIN_API_KEY, indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME, queries, -}; +} diff --git a/src/utils/parentTitle.ts b/src/utils/parentTitle.ts index 750ff0302e..31eddd7c55 100644 --- a/src/utils/parentTitle.ts +++ b/src/utils/parentTitle.ts @@ -21,3 +21,5 @@ export const getParentTitle = (slug: string, allMdx?: any) => { return allContent?.find((mdx: any) => mdx.slug === slug).parentTitle.slice(0, -2) } + +export const testEx = () => {} From d8d53a41f56833f0b2eabb7ea2247544f93c4caf Mon Sep 17 00:00:00 2001 From: Nilu Date: Wed, 6 May 2020 19:39:42 +0200 Subject: [PATCH 2/4] search issues --- src/components/search/input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/search/input.tsx b/src/components/search/input.tsx index 11e9b9dfaa..270d8373d3 100644 --- a/src/components/search/input.tsx +++ b/src/components/search/input.tsx @@ -68,7 +68,6 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => { if (newValue === '') { return clearInput() } - console.log(newValue) // Otherwise, debounce the search to avoid triggering many queries at once, which could also // make the UI freeze. window.clearTimeout(timeoutId.current) From 0c743fca7f96b00c3e8cadbc5e80606387e4560d Mon Sep 17 00:00:00 2001 From: Nilu Date: Wed, 6 May 2020 19:40:35 +0200 Subject: [PATCH 3/4] input --- src/components/search/input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search/input.tsx b/src/components/search/input.tsx index 270d8373d3..064e1b6e28 100644 --- a/src/components/search/input.tsx +++ b/src/components/search/input.tsx @@ -81,6 +81,7 @@ const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => { refine('') } + // Explore SearchBox from react-instant-search return (
{ onChange={onChange} onFocus={onFocus} value={value} - focusShortcuts={['/']} {...rest} /> From 2fee52f44c2871fdc3482d676c492a402d8a9888 Mon Sep 17 00:00:00 2001 From: Nilu Date: Wed, 6 May 2020 19:41:38 +0200 Subject: [PATCH 4/4] rmoved unneceassary code --- src/utils/parentTitle.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/parentTitle.ts b/src/utils/parentTitle.ts index 31eddd7c55..113d09c09e 100644 --- a/src/utils/parentTitle.ts +++ b/src/utils/parentTitle.ts @@ -22,4 +22,3 @@ export const getParentTitle = (slug: string, allMdx?: any) => { return allContent?.find((mdx: any) => mdx.slug === slug).parentTitle.slice(0, -2) } -export const testEx = () => {}