From d7e7926dd4561bafb7c6db37ca0f2a74d8304735 Mon Sep 17 00:00:00 2001 From: plouc Date: Thu, 23 Dec 2021 08:33:15 +0900 Subject: [PATCH] feat(website): add traling slash to all URLs --- website/gatsby-node.js | 21 +++++++++++++++++++ website/src/components/HeaderNav.tsx | 8 +++---- .../components/explorer/ComponentsExplorer.js | 4 ++-- website/src/components/home/HomeBar.js | 2 +- website/src/components/home/HomeCalendar.js | 2 +- website/src/components/home/HomeChord.js | 2 +- .../src/components/home/HomeCirclePacking.js | 2 +- website/src/components/home/HomeLine.js | 2 +- website/src/components/home/HomePie.js | 2 +- website/src/components/home/HomeRadar.js | 2 +- website/src/components/home/HomeSankey.js | 2 +- website/src/components/home/HomeStream.js | 2 +- website/src/components/home/HomeSunburst.js | 2 +- website/src/components/home/HomeSwarmPlot.js | 2 +- website/src/components/home/HomeTreeMap.js | 2 +- website/src/components/home/HomeVoronoi.js | 2 +- website/src/data/nav.js | 12 +++++------ website/src/pages/about.tsx | 12 +++++------ website/src/pages/faq.tsx | 6 +++--- 19 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 website/gatsby-node.js diff --git a/website/gatsby-node.js b/website/gatsby-node.js new file mode 100644 index 0000000000..e1b3daa869 --- /dev/null +++ b/website/gatsby-node.js @@ -0,0 +1,21 @@ +const replacePath = (_path) => + _path === `/` ? _path : _path.replace(/\/$|$/, `/`) + +const excludedPaths = [`/404.html`] + +exports.onCreatePage = async ({ page, actions }) => { + const { createPage, deletePage } = actions + + return new Promise(resolve => { + if(!excludedPaths.includes(page.path)) { + const oldPage = Object.assign({}, page) + page.path = replacePath(page.path) + if (page.path !== oldPage.path) { + deletePage(oldPage) + createPage(page) + } + } + + resolve() + }) +} diff --git a/website/src/components/HeaderNav.tsx b/website/src/components/HeaderNav.tsx index 03c45382da..394622a4ef 100644 --- a/website/src/components/HeaderNav.tsx +++ b/website/src/components/HeaderNav.tsx @@ -9,9 +9,9 @@ import * as nav from '../data/nav' export const HeaderNav = () => { return ( - About - References - Components + About + References + Components Guides @@ -22,7 +22,7 @@ export const HeaderNav = () => { ))} - FAQ + FAQ { if (term) params.append('q', term) if (filter) params.append('filter', filter) - navigate(`/components?${params.toString()}`, { + navigate(`/components/?${params.toString()}`, { replace: true, }) }, @@ -32,7 +32,7 @@ const ComponentsExplorer = ({ location, navigate }) => { if (term) params.append('q', term) if (filter) params.append('filter', filter) - navigate(`/components?${params.toString()}`) + navigate(`/components/?${params.toString()}`) }, [term, navigate] ) diff --git a/website/src/components/home/HomeBar.js b/website/src/components/home/HomeBar.js index b2982bd384..ab1b616d93 100644 --- a/website/src/components/home/HomeBar.js +++ b/website/src/components/home/HomeBar.js @@ -18,7 +18,7 @@ const Home = ({ colors, nivoTheme, isHorizontal = false }) => { : ['hot dogs', 'burgers', 'sandwich'] return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + const HomeStream = ({ reversedColors, nivoTheme }) => { return ( - + { return ( - + { const data = generateSwarmPlotData(['thing'], { min: 50, max: 50 }) return ( - + { return ( - + ({ const HomeVoronoi = ({ colors }) => { return ( - + {
  • Exhaustive documentation
  • Isomorphic rendering
  • - SVG charts + SVG charts
  • - HTML charts + HTML charts
  • - Canvas charts + Canvas charts
  • {
  • - Legends + Legends
  • Annotations
  • - SVG patterns + SVG patterns
  • - Gradients + Gradients
  • Responsive charts
    • diff --git a/website/src/pages/faq.tsx b/website/src/pages/faq.tsx index ddddb5c4ac..b783617b99 100644 --- a/website/src/pages/faq.tsx +++ b/website/src/pages/faq.tsx @@ -25,14 +25,14 @@ const Faq = () => ( Yes, sure! nivo was built with this requirement in mind from the very beginning, you even have an HTTP rendering API for most components :)
    - Just make sure to use SVG or{' '} - HTML implementations. + Just make sure to use SVG or{' '} + HTML implementations.

    Can I use nivo with very large data set?

    Yes you can! SVG/HTML do not perform well when dealing with thousands of nodes, that's why you have some{' '} - canvas based implementations which + canvas based implementations which are able to handle larger quantities of data.

    My component isn't rendering