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..064e1b6e28 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() } - // 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 (
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..113d09c09e 100644 --- a/src/utils/parentTitle.ts +++ b/src/utils/parentTitle.ts @@ -21,3 +21,4 @@ export const getParentTitle = (slug: string, allMdx?: any) => { return allContent?.find((mdx: any) => mdx.slug === slug).parentTitle.slice(0, -2) } +