Feat: add branch display to dev builds (#468)

* add branch name for local builds

* update display

.gitignore

@@ -21,6 +21,8 @@ yarn-error.log*
 
 .markdownlint.json
 
+.branch-name
+
 # Use yarn.lock
 package-lock.json
 

docusaurus.config.js

@@ -4,6 +4,9 @@ import math from 'remark-math'
 import katex from 'rehype-katex'
 import { themes as prismThemes } from 'prism-react-renderer'
 
+const branchName = process.env.BRANCH_NAME || 'unknown'
+const isDev = process.env.IS_DEV === 'true'
+
 export default {
   title: 'Yearn Docs',
   tagline: 'DeFi made simple',
@@ -17,6 +20,10 @@ export default {
   markdown: {
     mermaid: true,
   },
+  customFields: {
+    branchName,
+    isDev,
+  },
   themes: ['@docusaurus/theme-mermaid'],
   themeConfig: {
     docs: {

package.json

@@ -3,7 +3,8 @@
   "version": "0.4.3",
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "get-branch-name": "git rev-parse --abbrev-ref HEAD > .branch-name",
+    "start": "yarn get-branch-name && BRANCH_NAME=$(cat .branch-name) IS_DEV=true docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

src/theme/Layout/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Layout from '@theme-original/Layout'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+export default function LayoutWrapper(props) {
+  const { siteConfig } = useDocusaurusContext()
+  const { branchName, isDev } = siteConfig.customFields
+
+  return (
+    <>
+      {isDev && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            background: 'yellow',
+            padding: '5px',
+          }}
+        >
+          {branchName}
+        </div>
+      )}
+      <Layout {...props} />
+    </>
+  )
+}