From 83ef94ef7e7f30efcd7f9bbe9bf1c840196d774e Mon Sep 17 00:00:00 2001 From: aswanson-nr Date: Fri, 21 Jan 2022 16:11:21 -0800 Subject: [PATCH] feat: add path prefix part 1 --- gatsby-config.js | 1 + gatsby-node.js | 31 +- package.json | 2 + src/layouts/index.js | 6 +- src/pages/instant-observability.js | 652 ----------------------------- src/templates/QuickstartDetails.js | 2 +- src/utils/resolveQuickstartSlug.js | 2 +- 7 files changed, 23 insertions(+), 673 deletions(-) delete mode 100644 src/pages/instant-observability.js diff --git a/gatsby-config.js b/gatsby-config.js index 197235bc..4e46fb8b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -2,6 +2,7 @@ const quote = (str) => `"${str}"`; const resolveQuickstartSlug = require('./src/utils/resolveQuickstartSlug'); module.exports = { + pathPrefix: `/instant-observability`, flags: { DEV_SSR: true, PRESERVE_WEBPACK_CACHE: true, diff --git a/gatsby-node.js b/gatsby-node.js index 869f8af1..40135d2a 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,5 @@ const path = require(`path`); -const resolveQuickstartSlug = require("./src/utils/resolveQuickstartSlug.js"); +const resolveQuickstartSlug = require('./src/utils/resolveQuickstartSlug.js'); exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions; @@ -33,34 +33,33 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } = node; createPage({ - path: path.join(slug, "/"), - component: path.resolve("./src/templates/QuickstartDetails.js"), + path: path.join(slug, '/'), + component: path.resolve('./src/templates/QuickstartDetails.js'), context: { id, - layout: "QuickStartLayout", + layout: 'QuickStartLayout', }, }); }); }; exports.onCreatePage = async ({ page, actions }) => { - const { createPage, deletePage } = actions; - const oldPage = { ...page }; - - if (page.path === "/instant-observability/") { - page.context.layout = "QuickStartLayout"; - } - deletePage(oldPage); - createPage(page); + //const { createPage, deletePage } = actions; + //const oldPage = { ...page }; + //if (page.path === '/instant-observability/') { + //page.context.layout = 'QuickStartLayout'; + //} + //deletePage(oldPage); + //createPage(page); }; exports.onCreateNode = ({ node, actions }) => { const { createNodeField } = actions; - if (node.internal.type === "Quickstarts") { + if (node.internal.type === 'Quickstarts') { createNodeField({ node, - name: "slug", + name: 'slug', value: `${resolveQuickstartSlug(node.name, node.id)}`, }); } @@ -73,9 +72,9 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => { // source instead of the node source. See the following issue for this // recommendation: // https://github.com/escaladesports/legacy-gatsby-plugin-prefetch-google-fonts/issues/18 - plugins: [plugins.normalModuleReplacement(/^\.\/node\.js/, "./browser.js")], + plugins: [plugins.normalModuleReplacement(/^\.\/node\.js/, './browser.js')], externals: { - tessen: "Tessen", + tessen: 'Tessen', }, }); }; diff --git a/package.json b/package.json index f7151c6b..30f5c9e1 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "develop": "GATSBY_NEWRELIC_ENV=development gatsby develop", "start": "gatsby develop", "build": "GATSBY_NEWRELIC_ENV=production gatsby build", + "build:production": "yarn build --prefix-paths", "serve": "gatsby serve", + "serve:production": "yarn serve --prefix-paths", "clean": "gatsby clean", "fetch-quickstarts": "node ./scripts/actions/fetch-quickstarts.js", "build:related-content": "BUILD_RELATED_CONTENT=true yarn run build" diff --git a/src/layouts/index.js b/src/layouts/index.js index 18517fc8..14bae758 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -3,9 +3,9 @@ import QuickStartLayout from './QuickStartLayout'; import PropTypes from 'prop-types'; const Layout = ({ children, pageContext }) => { - if (pageContext.fileRelativePath.match(/404/)) { - return children; - } + //if (pageContext.fileRelativePath.match(/404/)) { + //return children; + //} return {children}; }; diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js deleted file mode 100644 index 1f2fbba9..00000000 --- a/src/pages/instant-observability.js +++ /dev/null @@ -1,652 +0,0 @@ -import PropTypes from 'prop-types'; -import { graphql } from 'gatsby'; -import React, { useState, useEffect } from 'react'; -import IOSeo from '../components/IOSeo'; -import { css } from '@emotion/react'; -import SegmentedControl from '../components/SegmentedControl'; -import Overlay from '../components/Overlay'; -import QuickstartTile from '../components/QuickstartTile'; -import IOBanner from '../components/IOBanner'; -import { - SearchInput, - useTessen, - Button, -} from '@newrelic/gatsby-theme-newrelic'; -import { navigate } from '@reach/router'; - -import BUILD_YOUR_OWN from '../images/build-your-own.svg'; -import { useDebounce } from 'react-use'; -import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; -import { - QUICKSTARTS_REPO, - RESERVED_QUICKSTART_IDS, - QUICKSTARTS_COLLAPSE_BREAKPOINT, - LISTVIEW_BREAKPOINT, -} from '../data/constants'; -import CATEGORIES from '../data/instant-observability-categories'; - -import SuperTiles from '../components/SuperTiles'; - -const VIEWS = { - GRID: 'Grid view', - LIST: 'List view', -}; - -const DOUBLE_COLUMN_BREAKPOINT = '1180px'; -const TRIPLE_COLUMN_BREAKPOINT = '1350px'; -const SINGLE_COLUMN_BREAKPOINT = LISTVIEW_BREAKPOINT; - -/** - * Determines if one string is a substring of the other, case insensitive - * @param {String} substring the substring to test against - * @returns {(Function) => Boolean} Callback function that determines if the argument has the substring - */ -const stringIncludes = (substring) => (fullstring) => - fullstring.toLowerCase().includes(substring.toLowerCase()); - -/** - * Filters a quickstart based on a provided search term. - * @param {String} search Search term. - * @returns {(Function) => Boolean} Callback function to be used by filter. - */ -const filterBySearch = (search) => ({ - title, - summary, - description, - keywords, -}) => { - if (!search) { - return true; - } - - const searchIncludes = stringIncludes(search); - return ( - searchIncludes(title) || - searchIncludes(summary) || - searchIncludes(description) || - keywords.some(searchIncludes) - ); -}; - -/** - * Filters a quickstart based on a category. - * @param {String} category The category type (e.g. 'featured'). - * @returns {(Function) => Boolean} Callback function to be used by filter. - */ -const filterByCategory = (category) => { - const { associatedKeywords = [] } = - CATEGORIES.find(({ value }) => value === category) || {}; - - return (quickstart) => - !category || - (quickstart.keywords && - quickstart.keywords.find((k) => associatedKeywords.includes(k))); -}; - -const QuickstartsPage = ({ data, location }) => { - const [view, setView] = useState(VIEWS.GRID); - const tessen = useTessen(); - - const [search, setSearch] = useState(''); - const [category, setCategory] = useState(''); - - const [isCategoriesOverlayOpen, setIsCategoriesOverlayOpen] = useState(false); - - useEffect(() => { - const params = new URLSearchParams(location.search); - const searchParam = params.get('search'); - const categoryParam = params.get('category'); - - setSearch(searchParam); - setCategory(categoryParam || ''); - if (searchParam || categoryParam) { - tessen.track({ - eventName: 'instantObservability', - category: 'QuickstartCatalogSearch', - search: searchParam, - quickstartCategory: categoryParam, - }); - } - }, [location.search, tessen]); - - const closeCategoriesOverlay = () => { - setIsCategoriesOverlayOpen(false); - }; - - const handleSearch = (value) => { - if (value !== null && value !== undefined) { - const params = new URLSearchParams(location.search); - params.set('search', value); - - navigate(`?${params.toString()}`); - } - }; - - const handleCategory = (value) => { - if (value !== null && value !== undefined) { - const params = new URLSearchParams(location.search); - params.set('category', value); - - navigate(`?${params.toString()}`); - } - - closeCategoriesOverlay(); - }; - - useDebounce( - () => { - handleSearch(search); - }, - 400, - [search] - ); - - const quickstarts = data.allQuickstarts.nodes; - - const alphaSort = quickstarts.sort((a, b) => a.title.localeCompare(b.title)); - let sortedQuickstarts = sortFeaturedQuickstarts(alphaSort); - - // Hard-code for moving codestream object to front of sortedQuickstarts array - CM - if ((!category && !search) || (category === 'featured' && !search)) { - // uuid is codestream id specifically - CM - const codestreamIndex = sortedQuickstarts.findIndex( - ({ id }) => id === '29bd9a4a-1c19-4219-9694-0942f6411ce7' - ); - - if (codestreamIndex > -1) { - const codestreamObject = sortedQuickstarts[codestreamIndex]; - sortedQuickstarts = [ - codestreamObject, - ...sortedQuickstarts.slice(0, codestreamIndex), - ...sortedQuickstarts.slice(codestreamIndex + 1), - ]; - } - } - - const filteredQuickstarts = sortedQuickstarts - .filter(filterBySearch(search)) - .filter(filterByCategory(category)); - - const categoriesWithCount = CATEGORIES.map((cat) => ({ - ...cat, - count: quickstarts - .filter(filterBySearch(search)) - .filter(filterByCategory(cat.value)).length, - })); - - /** - * Finds display name for selected category. - * @returns {String} Display name for results found. - */ - const getDisplayName = (defaultName = 'All quickstarts') => { - const found = CATEGORIES.find((cat) => cat.value === category); - - if (!found.value) return defaultName; - - return found.displayName; - }; - - return ( - <> - - -
- -
-
- -
-
- setSearch('')} - onChange={(e) => setSearch(e.target.value)} - css={css` - --svg-color: var(--color-neutrals-700); - box-shadow: none; - max-width: 630px; - svg { - width: 16px; - height: 16px; - color: var(--svg-color); - } - - .dark-mode & { - --svg-color: var(--primary-text-color); - } - - @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { - font-size: 11px; - max-width: 100%; - } - `} - /> - { - setView(view); - - tessen.track({ - eventName: 'instantObservability', - category: 'QuickstartViewToggle', - quickstartViewState: view, - }); - }} - css={css` - @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) { - display: none; - } - `} - /> -
-
- - -
-

- Category -

-
- {categoriesWithCount.map(({ displayName, value, count }) => ( - - ))} -
-
- -
-
- -
-
- - Showing {filteredQuickstarts.length} results - for: - {search || getDisplayName()} - -
-
- - {filteredQuickstarts.map((pack) => ( - - ))} -
-
-
- - ); -}; - -QuickstartsPage.propTypes = { - data: PropTypes.object.isRequired, - location: PropTypes.object, -}; - -export const pageQuery = graphql` - query { - allQuickstarts { - nodes { - fields { - slug - } - id - title - name - websiteUrl - logoUrl - packUrl - level - keywords - dashboards { - description - name - screenshots - url - } - alerts { - details - name - url - type - } - documentation { - name - url - description - } - authors - description - summary - installPlans { - id - name - } - } - } - } -`; - -const Label = ({ children, htmlFor }) => ( - -); - -Label.propTypes = { - children: PropTypes.node, - htmlFor: PropTypes.string, -}; - -const FormControl = ({ children }) => ( -
- {children} -
-); - -FormControl.propTypes = { - children: PropTypes.node, -}; - -export default QuickstartsPage; diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js index bf0c4baa..c41c109a 100644 --- a/src/templates/QuickstartDetails.js +++ b/src/templates/QuickstartDetails.js @@ -37,7 +37,7 @@ const QuickstartDetails = ({ data, location }) => { const breadcrumbs = [ { name: 'Instant Observability (I/O)', - url: '/instant-observability/', + url: '/', }, { name: quickstart.title, diff --git a/src/utils/resolveQuickstartSlug.js b/src/utils/resolveQuickstartSlug.js index 04508440..b6e4f060 100644 --- a/src/utils/resolveQuickstartSlug.js +++ b/src/utils/resolveQuickstartSlug.js @@ -1,7 +1,7 @@ const slugify = require('./slugify.js'); const resolveQuickstartSlug = (name, id) => { - return `/instant-observability/${slugify(name)}/${id}`; + return `/${slugify(name)}/${id}`; }; module.exports = resolveQuickstartSlug;