diff --git a/packages/static/content/index.mdx b/packages/static/content/index.mdx index 7e2f9d90..cb034b2f 100644 --- a/packages/static/content/index.mdx +++ b/packages/static/content/index.mdx @@ -17,15 +17,3 @@ Scene/Engine/Canvas. [![NPM version](http://img.shields.io/npm/v/react-babylonjs.svg?style=flat-square)](https://www.npmjs.com/package/react-babylonjs) [![NPM downloads](http://img.shields.io/npm/dm/react-babylonjs.svg?style=flat-square)](https://www.npmjs.com/package/react-babylonjs) - -# Quickstart - -``` -npx create-react-babylon-js-app MyFirstApp -``` - -or - -``` -yarn create react-babylon-js-app MyFirstApp -``` diff --git a/packages/static/content/introduction.md b/packages/static/content/introduction.md deleted file mode 100644 index 46a8282d..00000000 --- a/packages/static/content/introduction.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 'Introduction' -metaTitle: 'This is the title tag of this page' -metaDescription: 'This is the meta description' ---- - -Testing diff --git a/packages/static/content/nav.js b/packages/static/content/nav.js index 0519acca..8087d5f9 100644 --- a/packages/static/content/nav.js +++ b/packages/static/content/nav.js @@ -1,11 +1,12 @@ const toc = [ '/', - '/introduction', + '/quickstart', '/guides/index', '/guides/react-boilerplate/index', '/guides/react-with-imperitive-babylonjs/index', '/guides/react-with-declarative-babylonjs/index', '/guides/animation/index', + '/guides/debugging/index', '/guides/getting-even-more-reactive/index', '/guides/hoc/index', '/guides/adding-animation-and-color/index', @@ -17,7 +18,20 @@ const navSortMap = toc.reduce((c, slug, i) => { }, {}) const sortPages = (allMdx) => { - allMdx.edges.sort((a, b) => navSortMap[a.node.fields.slug] - navSortMap[b.node.fields.slug]) + // console.log('nav sort map:', navSortMap); + allMdx.edges.sort((a, b) => { + const aIndex = navSortMap[a.node.fields.slug] + const bIndex = navSortMap[b.node.fields.slug] + if (aIndex === undefined) { + console.error('slug not found:', a.node.fields.slug) + return -1 + } + if (bIndex === undefined) { + console.error('slug not found:', b.node.fields.slug) + return -1 + } + return aIndex - bIndex + }) // console.log(JSON.stringify(allMdx, null, 2)) const slugs = allMdx.edges.map((e) => e.node.fields.slug) diff --git a/packages/static/content/quickstart.md b/packages/static/content/quickstart.md new file mode 100644 index 00000000..a734b021 --- /dev/null +++ b/packages/static/content/quickstart.md @@ -0,0 +1,34 @@ +--- +title: 'Quickstart' +metaTitle: 'Quickstart' +metaDescription: 'Guide to get started' +--- + +# Getting Started + +When starting a Create React App (CRA) you optionally choose a template like: +`npx create-react-app my-app --template typescript` + +> ```sh +> npx create-react-app my-app +> cd my-app +> ``` +> +> or +> +> ```sh +> yarn create react-app my-app +> cd my-app +> ``` + +With that empty project, you just need to add the babylon dependencies: + +> ```sh +> npm i react-babylonjs @babylonjs/core @babylonjs/gui +> ``` +> +> or +> +> ```sh +> yarn add react-babylonjs @babylonjs/core @babylonjs/gui +> ``` diff --git a/packages/static/gatsby-config.js b/packages/static/gatsby-config.js index 45d06a59..bef77e74 100755 --- a/packages/static/gatsby-config.js +++ b/packages/static/gatsby-config.js @@ -43,6 +43,48 @@ const plugins = [ extensions: ['.mdx', '.md'], }, }, + { + resolve: 'gatsby-plugin-local-search', + options: { + name: 'pages', + engine: 'flexsearch', + engineOptions: { + encode: 'icase', + tokenize: 'forward', + async: false, + }, + query: ` + { + allMdx { + edges { + node { + id + fields { slug } + excerpt + rawBody + frontmatter { + title + } + } + } + } + } + `, + ref: 'id', + index: ['title', 'rawBody'], + store: ['id', 'slug', 'description', 'title', 'excerpt', 'title'], + normalizer: ({ data }) => { + // console.log('check data', JSON.stringify(data)); + return data.allMdx.edges.map((edge) => ({ + id: edge.node.id, + slug: edge.node.fields.slug, + rawBody: edge.node.rawBody, + excerpt: edge.node.excerpt, + title: edge.node.frontmatter.title, + })) + }, + }, + }, { resolve: `gatsby-plugin-gtag`, options: { diff --git a/packages/static/package.json b/packages/static/package.json index fc221828..e8f87d73 100755 --- a/packages/static/package.json +++ b/packages/static/package.json @@ -30,6 +30,7 @@ "gatsby-plugin-emotion": "^7.0.0", "gatsby-plugin-gtag": "^1.0.13", "gatsby-plugin-layout": "^3.0.0", + "gatsby-plugin-local-search": "^2.0.1", "gatsby-plugin-manifest": "^4.0.0", "gatsby-plugin-mdx": "^3.0.0", "gatsby-plugin-offline": "^5.0.0", @@ -46,6 +47,7 @@ "lodash.flatten": "^4.4.0", "lodash.startcase": "^4.4.0", "prismjs": "^1.23.0", + "query-string": "^7.1.1", "react": "^17.0.2", "react-babylonjs": "^3.0.31", "react-dom": "^17.0.2", @@ -56,6 +58,7 @@ "react-instantsearch-dom": "^6.11.0", "react-live": "^2.2.3", "react-loadable": "^5.5.0", + "react-use-flexsearch": "^0.1.1", "styled-components": "^5.3.0", "type-fest": "^2.9.0" }, diff --git a/packages/static/src/components/flexSearch/index.js b/packages/static/src/components/flexSearch/index.js new file mode 100644 index 00000000..6aa7bb0b --- /dev/null +++ b/packages/static/src/components/flexSearch/index.js @@ -0,0 +1,144 @@ +import { css } from '@emotion/core' +import { Link } from 'gatsby' +import * as queryString from 'query-string' +import React, { useState } from 'react' +import { useFlexSearch } from 'react-use-flexsearch' +import styled from 'styled-components' +import sortPages from '../../../content/nav' + +const isBrowser = typeof window !== 'undefined' + +const SearchBar = styled.div` + display: flex; + border: 1px solid #dfe1e5; + border-radius: 10px; + width: 100%; + height: 3rem; + background: #fdfdfd; + svg { + margin: auto 1rem; + height: 20px; + width: 20px; + color: #9aa0a6; + fill: #9aa0a6; + } + input { + display: flex; + flex: 100%; + height: 100%; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', + Arial, sans-serif; + font-size: 16px; + background-color: transparent; + border: none; + margin: 0; + padding: 0; + padding-right: 0.5rem; + color: rgb(55, 53, 47); + word-wrap: break-word; + outline: none; + } +` + +const SearchedResults = ({ results }) => + results.length > 0 ? ( + results.map((result) => { + // console.log('rendering result', result); + const node = { + node: { + fields: { + title: result.title, + slug: result.slug, + }, + }, + } + return + }) + ) : ( +

Sorry, couldn't find any posts matching this search.

+ ) + +// node: { +// fields: { +// slug: string +// title: string +// } +// } +const SidebarItem = ({ node }) => { + const { fields } = node.node + const { slug, title } = fields + if (slug === '/') return null + const indent = (() => { + const parts = slug.slice(1).split('/') + // console.log(JSON.stringify(parts)) + let level = parts.length - 1 + // console.log(level) + if (parts.pop() === 'index') level-- + // console.log(JSON.stringify(parts)) + // console.log(level) + return level * 10 + })() + const isSlugActive = isBrowser && window.location.href.endsWith(slug) + return ( + + {title} + + ) +} + +const SidebarList = ({ nodes }) => { + return nodes.map((node) => ) +} + +const FlexSearch = ({ localSearchPages: { index, store }, location, allMdx }) => { + const { search } = queryString.parse(location.search) + const [query, setQuery] = useState(search || '') + + const results = useFlexSearch(query, index, store) + + sortPages(allMdx) + + return ( + <> + + + + + { + // navigate( + // e.target.value ? `/blog/?search=${e.target.value}` : "/blog/" + // ) + setQuery(e.target.value) + }} + /> + + {query ? : } + + ) +} + +export default FlexSearch diff --git a/packages/static/src/components/sidebar/index.js b/packages/static/src/components/sidebar/index.js index a75be12f..3ff70a91 100644 --- a/packages/static/src/components/sidebar/index.js +++ b/packages/static/src/components/sidebar/index.js @@ -1,10 +1,7 @@ -import { css } from '@emotion/core' import styled from '@emotion/styled' -import { graphql, Link, StaticQuery } from 'gatsby' +import { graphql, StaticQuery } from 'gatsby' import config from '../../../config' -import sortPages from '../../../content/nav' - -const isBrowser = typeof window !== 'undefined' +import FlexSearch from '../flexSearch' // eslint-disable-next-line no-unused-vars const ListItem = styled(({ className, active, level, ...props }) => { @@ -91,51 +88,6 @@ const Divider = styled((props) => ( } ` -const SidebarItem = ({ node }) => { - const { fields } = node.node - const { label, slug, title } = fields - if (slug === '/') return null - const indent = (() => { - const parts = slug.slice(1).split('/') - // console.log(JSON.stringify(parts)) - let level = parts.length - 1 - // console.log(level) - if (parts.pop() === 'index') level-- - // console.log(JSON.stringify(parts)) - // console.log(level) - return level * 10 - })() - const isSlugActive = isBrowser && window.location.href.endsWith(slug) - return ( - - {title} - - ) -} - -const SidebarList = ({ nodes }) => { - return nodes.map((node) => ) -} - const SidebarLayout = ({ location }) => ( ( } } } + localSearchPages { + index + store + } } `} - render={({ allMdx }) => { - // console.log(2) - sortPages(allMdx) - // console.log('allMdx', JSON.stringify(allMdx, null, 2)) - + render={({ allMdx, localSearchPages }) => { return ( {config.sidebar.title ? ( @@ -165,7 +117,7 @@ const SidebarLayout = ({ location }) => ( dangerouslySetInnerHTML={{ __html: config.sidebar.title }} /> ) : null} - + ) }} diff --git a/packages/static/src/templates/docs.js b/packages/static/src/templates/docs.js index 3d9b7c22..4fc88997 100644 --- a/packages/static/src/templates/docs.js +++ b/packages/static/src/templates/docs.js @@ -138,6 +138,10 @@ export const pageQuery = graphql` metaDescription } } + localSearchPages { + index + store + } allMdx { edges { node {