Merge pull request react-bootstrap#5318 from react-bootstrap/feat/netlify-docs-alert

feat(netlify): more resilient docs alert implementation

Author: bpas247

www/config.js

@@ -13,11 +13,21 @@ const bootstrapVersion = require('bootstrap/package.json').version;
 
 const shortVersion = bootstrapVersion.split('.').slice(0, 2).join('.');
 
+const netlify =
+  process.env.NETLIFY === 'true'
+    ? {
+        pullRequest: process.env.PULL_REQUEST,
+        reviewId: process.env.REVIEW_ID,
+        branch: process.env.BRANCH,
+      }
+    : null;
+
 const config = {
   bootstrapVersion,
   docsUrl: `https://getbootstrap.com/docs/${shortVersion}`,
   version: require('../package.json').version,
   cssHash: getIntegrity('bootstrap/dist/css/bootstrap.min.css'),
+  netlify,
 };
 
 module.exports = config;

www/src/components/DocsAlert.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Alert from 'react-bootstrap/Alert';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+export default function DocsAlert() {
+  const { netlify } = config;
+  return (
+    netlify && (
+      <Container fluid>
+        <Row>
+          <Alert variant="warning" className="w-100">
+            You are currently viewing the auto-generated docs from{' '}
+            {netlify.pullRequest ? (
+              <span>
+                a{' '}
+                <Alert.Link
+                  href={`https://github.com/react-bootstrap/react-bootstrap/pull/${netlify.reviewId}`}
+                >
+                  pull request
+                </Alert.Link>
+              </span>
+            ) : (
+              <span>the {netlify.branch} branch</span>
+            )}
+            . The docs for the current release are available at{' '}
+            <Alert.Link href="https://react-bootstrap.github.io/">
+              https://react-bootstrap.github.io/
+            </Alert.Link>
+          </Alert>
+        </Row>
+      </Container>
+    )
+  );
+}

www/src/layouts/index.js

@@ -7,6 +7,7 @@ import NavMain from '../components/NavMain';
 import Heading from '../components/Heading';
 import CodeBlock from '../components/CodeBlock';
 import LinkedHeading from '../components/LinkedHeading';
+import DocsAlert from '../components/DocsAlert';
 
 const styles = css`
   .gray > :not(:first-child) {
@@ -46,6 +47,7 @@ function DefaultLayout({ children, location, grayscale = true }) {
   return (
     <div className={grayscale ? styles.gray : undefined}>
       <NavMain activePage={location.pathname} />
+      <DocsAlert />
       <MDXProvider components={components}>{children}</MDXProvider>
     </div>
   );