feat(website): add traling slash to all URLs

plouc · plouc · commit d7e7926dd456 · 2021-12-23T17:34:26.000+09:00
diff --git a/website/gatsby-node.js 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
@@ -9,9 +9,9 @@ import * as nav from '../data/nav'
 export const HeaderNav = () => {
     return (
         <Container>
-            <HeaderInternalLink to="/about">About</HeaderInternalLink>
-            <HeaderInternalLink to="/references">References</HeaderInternalLink>
-            <HeaderInternalLink to="/components">Components</HeaderInternalLink>
+            <HeaderInternalLink to="/about/">About</HeaderInternalLink>
+            <HeaderInternalLink to="/references/">References</HeaderInternalLink>
+            <HeaderInternalLink to="/components/">Components</HeaderInternalLink>
             <HeaderItem>
                 Guides
                 <HeaderSub>
@@ -22,7 +22,7 @@ export const HeaderNav = () => {
                     ))}
                 </HeaderSub>
             </HeaderItem>
-            <HeaderInternalLink to="/faq">FAQ</HeaderInternalLink>
+            <HeaderInternalLink to="/faq/">FAQ</HeaderInternalLink>
             <HeaderExternalLink
                 href="https://nivo.rocks/storybook/"
                 target="_blank"
diff --git a/website/src/components/components/explorer/ComponentsExplorer.js b/website/src/components/components/explorer/ComponentsExplorer.js
@@ -20,7 +20,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()}`, {
                 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
@@ -18,7 +18,7 @@ const Home = ({ colors, nivoTheme, isHorizontal = false }) => {
         : ['hot dogs', 'burgers', 'sandwich']
 
     return (
-        <HomeItem to="/bar">
+        <HomeItem to="/bar/">
             <ResponsiveBar
                 data={data}
                 indexBy="country"
diff --git a/website/src/components/home/HomeCalendar.js b/website/src/components/home/HomeCalendar.js
@@ -9,7 +9,7 @@ const calendarData = generateDayCounts(calendarFrom, calendarTo)
 
 const HomeCalendar = ({ colors, nivoTheme }) => {
     return (
-        <HomeItem to="/calendar">
+        <HomeItem to="/calendar/">
             <ResponsiveCalendarCanvas
                 margin={{ top: 20, right: 2, bottom: 2, left: 20 }}
                 from={calendarFrom}
diff --git a/website/src/components/home/HomeChord.js b/website/src/components/home/HomeChord.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomeChord = ({ colors }) => {
     return (
-        <HomeItem to="/chord">
+        <HomeItem to="/chord/">
             <ResponsiveChordCanvas
                 colors={colors}
                 padAngle={0.04}
diff --git a/website/src/components/home/HomeCirclePacking.js b/website/src/components/home/HomeCirclePacking.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 export const HomeCirclePacking = ({ reversedColors }) => {
     return (
-        <HomeItem to="/circle-packing">
+        <HomeItem to="/circle-packing/">
             <ResponsiveCirclePackingCanvas
                 data={generateLibTree()}
                 id="name"
diff --git a/website/src/components/home/HomeLine.js b/website/src/components/home/HomeLine.js
@@ -6,7 +6,7 @@ import { commonAxes } from './settings'
 
 const HomeLine = ({ colors, theme, nivoTheme }) => {
     return (
-        <HomeItem to="/line">
+        <HomeItem to="/line/">
             <ResponsiveLine
                 margin={{ top: 10, bottom: 15, left: 24, right: 10 }}
                 data={generateDrinkStats(12)}
diff --git a/website/src/components/home/HomePie.js b/website/src/components/home/HomePie.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomePie = ({ colors, nivoTheme }) => {
     return (
-        <HomeItem to="/pie">
+        <HomeItem to="/pie/">
             <ResponsivePie
                 margin={{
                     top: 26,
diff --git a/website/src/components/home/HomeRadar.js b/website/src/components/home/HomeRadar.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomeRadar = ({ colors, nivoTheme }) => {
     return (
-        <HomeItem to="/radar">
+        <HomeItem to="/radar/">
             <ResponsiveRadar
                 {...generateWinesTastes()}
                 indexBy="taste"
diff --git a/website/src/components/home/HomeSankey.js b/website/src/components/home/HomeSankey.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomeSankey = ({ colors, nivoTheme }) => {
     return (
-        <HomeItem to="/sankey">
+        <HomeItem to="/sankey/">
             <ResponsiveSankey
                 margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 data={generateSankeyData({ nodeCount: 11, maxIterations: 2 })}
diff --git a/website/src/components/home/HomeStream.js b/website/src/components/home/HomeStream.js
@@ -16,7 +16,7 @@ const generateStreamData = () =>
 
 const HomeStream = ({ reversedColors, nivoTheme }) => {
     return (
-        <HomeItem to="/stream">
+        <HomeItem to="/stream/">
             <ResponsiveStream
                 data={generateStreamData()}
                 keys={range(streamDataLayerCount)}
diff --git a/website/src/components/home/HomeSunburst.js b/website/src/components/home/HomeSunburst.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomeSunburst = ({ colors }) => {
     return (
-        <HomeItem to="/sunburst">
+        <HomeItem to="/sunburst/">
             <ResponsiveSunburst
                 data={generateLibTree()}
                 identity="name"
diff --git a/website/src/components/home/HomeSwarmPlot.js b/website/src/components/home/HomeSwarmPlot.js
@@ -7,7 +7,7 @@ const HomeSwarmPlot = ({ reversedColors, nivoTheme }) => {
     const data = generateSwarmPlotData(['thing'], { min: 50, max: 50 })
 
     return (
-        <HomeItem to="/swarmplot">
+        <HomeItem to="/swarmplot/">
             <ResponsiveSwarmPlotCanvas
                 data={data.data}
                 groups={data.groups}
diff --git a/website/src/components/home/HomeTreeMap.js b/website/src/components/home/HomeTreeMap.js
@@ -5,7 +5,7 @@ import { HomeItem, HomeItemLabel } from './styled'
 
 const HomeTreeMap = ({ colors, nivoTheme }) => {
     return (
-        <HomeItem to="/treemap">
+        <HomeItem to="/treemap/">
             <ResponsiveTreeMapCanvas
                 margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 data={generateLibTree()}
diff --git a/website/src/components/home/HomeVoronoi.js b/website/src/components/home/HomeVoronoi.js
@@ -15,7 +15,7 @@ voronoi.data = range(80).map(id => ({
 
 const HomeVoronoi = ({ colors }) => {
     return (
-        <HomeItem to="/voronoi">
+        <HomeItem to="/voronoi/">
             <ResponsiveVoronoi
                 data={voronoi.data}
                 xDomain={voronoi.xDomain}
diff --git a/website/src/data/nav.js b/website/src/data/nav.js
@@ -374,26 +374,26 @@ export const allComponents = sortBy(all, 'label')
 export const guides = [
     {
         label: 'Axes',
-        path: '/guides/axes',
+        path: '/guides/axes/',
     },
     {
         label: 'Colors',
-        path: '/guides/colors',
+        path: '/guides/colors/',
     },
     {
         label: 'Legends',
-        path: '/guides/legends',
+        path: '/guides/legends/',
     },
     {
         label: 'Gradients',
-        path: '/guides/gradients',
+        path: '/guides/gradients/',
     },
     {
         label: 'Patterns',
-        path: '/guides/patterns',
+        path: '/guides/patterns/',
     },
     {
         label: 'Theming',
-        path: '/guides/theming',
+        path: '/guides/theming/',
     },
 ]
diff --git a/website/src/pages/about.tsx b/website/src/pages/about.tsx
@@ -46,13 +46,13 @@ const About = () => {
                         <li>Exhaustive documentation</li>
                         <li>Isomorphic rendering</li>
                         <li>
-                            <Link to="/components?filter=svg">SVG charts</Link>
+                            <Link to="/components/?filter=svg">SVG charts</Link>
                         </li>
                         <li>
-                            <Link to="/components?filter=html">HTML charts</Link>
+                            <Link to="/components/?filter=html">HTML charts</Link>
                         </li>
                         <li>
-                            <Link to="/components?filter=canvas">Canvas charts</Link>
+                            <Link to="/components/?filter=canvas">Canvas charts</Link>
                         </li>
                         <li>
                             <a
@@ -64,16 +64,16 @@ const About = () => {
                             </a>
                         </li>
                         <li>
-                            <Link to="/guides/legends">Legends</Link>
+                            <Link to="/guides/legends/">Legends</Link>
                         </li>
                         <li>
                             <Link to="/guides/annotations">Annotations</Link>
                         </li>
                         <li>
-                            <Link to="/guides/patterns">SVG patterns</Link>
+                            <Link to="/guides/patterns/">SVG patterns</Link>
                         </li>
                         <li>
-                            <Link to="/guides/gradients">Gradients</Link>
+                            <Link to="/guides/gradients/">Gradients</Link>
                         </li>
                         <li>Responsive charts</li>
                     </ul>
diff --git 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 :)
                     <br />
-                    Just make sure to use <Link to="/components?filter=svg">SVG</Link> or{' '}
-                    <Link to="/components?filter=html">HTML</Link> implementations.
+                    Just make sure to use <Link to="/components/?filter=svg">SVG</Link> or{' '}
+                    <Link to="/components/?filter=html">HTML</Link> implementations.
                 </p>
                 <h4>Can I use nivo with very large data set?</h4>
                 <p>
                     Yes you can! SVG/HTML do not perform well when dealing with thousands of nodes,
                     that's why you have some{' '}
-                    <Link to="/components?filter=canvas">canvas based implementations</Link> which
+                    <Link to="/components/?filter=canvas">canvas based implementations</Link> which
                     are able to handle larger quantities of data.
                 </p>
                 <h4>My component isn't rendering</h4>

Original file line number	Diff line number	Diff line change
`@@ -374,26 +374,26 @@ export const allComponents = sortBy(all, 'label')`
`374`	`374`	`export const guides = [`
`375`	`375`	`{`
`376`	`376`	`label: 'Axes',`
`377`		`- path: '/guides/axes',`
	`377`	`+ path: '/guides/axes/',`
`378`	`378`	`},`
`379`	`379`	`{`
`380`	`380`	`label: 'Colors',`
`381`		`- path: '/guides/colors',`
	`381`	`+ path: '/guides/colors/',`
`382`	`382`	`},`
`383`	`383`	`{`
`384`	`384`	`label: 'Legends',`
`385`		`- path: '/guides/legends',`
	`385`	`+ path: '/guides/legends/',`
`386`	`386`	`},`
`387`	`387`	`{`
`388`	`388`	`label: 'Gradients',`
`389`		`- path: '/guides/gradients',`
	`389`	`+ path: '/guides/gradients/',`
`390`	`390`	`},`
`391`	`391`	`{`
`392`	`392`	`label: 'Patterns',`
`393`		`- path: '/guides/patterns',`
	`393`	`+ path: '/guides/patterns/',`
`394`	`394`	`},`
`395`	`395`	`{`
`396`	`396`	`label: 'Theming',`
`397`		`- path: '/guides/theming',`
	`397`	`+ path: '/guides/theming/',`
`398`	`398`	`},`
`399`	`399`	`]`