Add banner for non-default version pages

apollographql · Feb 16, 2022 · c1a042f · c1a042f
1 parent 9435833
commit c1a042f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/@chakra-ui/gatsby-plugin/theme.js b/src/@chakra-ui/gatsby-plugin/theme.js
@@ -7,7 +7,7 @@ import {
 } from '@apollo/chakra-helpers';
 import {extendTheme} from '@chakra-ui/react';
 
-const {grey, silver, indigo, teal, blilet, midnight} = colors;
+const {grey, silver, indigo, teal, blilet, midnight, yellow} = colors;
 
 const theme = extendTheme({
   config: {
@@ -41,7 +41,8 @@ const theme = extendTheme({
     gray: createGrayPalette(silver, grey, midnight),
     indigo: createColorPalette(indigo),
     teal: createColorPalette(teal),
-    blue: createColorPalette(blilet)
+    blue: createColorPalette(blilet),
+    yellow: createColorPalette(yellow)
   }
 });
 

diff --git a/src/templates/page.js b/src/templates/page.js
@@ -44,18 +44,19 @@ import {
   Tr,
   UnorderedList,
   chakra,
+  useColorModeValue,
   useToken
 } from '@chakra-ui/react';
 import {FaDiscourse, FaGithub} from 'react-icons/fa';
 import {FiChevronsRight, FiStar} from 'react-icons/fi';
+import {Link as GatsbyLink, graphql} from 'gatsby';
 import {GatsbySeo} from 'gatsby-plugin-next-seo';
 import {Global} from '@emotion/react';
 import {MDXProvider} from '@mdx-js/react';
 import {MDXRenderer} from 'gatsby-plugin-mdx';
 import {PathContext} from '../utils';
 import {YouTube} from 'mdx-embed';
 import {default as getShareImage} from '@jlengstorf/get-share-image';
-import {graphql} from 'gatsby';
 import {rehype} from 'rehype';
 import {useMermaidStyles} from '../utils/mermaid';
 
@@ -124,6 +125,8 @@ const {processSync} = rehype()
 
 export default function PageTemplate({data, uri, pageContext}) {
   const sidebarWidth = useSidebarWidth();
+  const versionBannerBgColor = useColorModeValue('yellow.100', 'yellow.700');
+  const versionBannerTextColor = useColorModeValue('yellow.900', 'yellow.50');
   const paddingTop = useToken('space', 10);
   const paddingBottom = useToken('space', 12);
   const scrollPaddingTop = useMemo(
@@ -227,6 +230,28 @@ export default function PageTemplate({data, uri, pageContext}) {
           transitionProperty="margin-left"
           transitionDuration="normal"
         >
+          {basePath.includes('/') && basePath !== '/' && (
+            <Box
+              textAlign="center"
+              w="full"
+              py="4"
+              px="8"
+              bgColor={versionBannerBgColor}
+              color={versionBannerTextColor}
+            >
+              You&apos;re viewing documentation for a previous version of this
+              software.{' '}
+              <Flex
+                as={GatsbyLink}
+                to={'/' + basePath.split('/')[0]}
+                display="inline-flex"
+                textDecoration="underline"
+                fontWeight="semibold"
+              >
+                Switch to the latest stable version
+              </Flex>
+            </Box>
+          )}
           <Flex
             maxW="7xl"
             mx="auto"