[docs] Beta header & footer

Author: jamesgpearce

site/less/footer.less

@@ -16,6 +16,10 @@ body > header {
       font-size: 2.8rem;
       line-height: 1em;
       letter-spacing: -0.03rem;
+      em {
+        font-style: normal;
+        color: #d81b60;
+      }
     }
   }
   > nav {

site/less/header.less

@@ -1,16 +1,18 @@
 /* eslint-disable react/jsx-no-target-blank */
 import {NoPropComponent} from 'tinydocs';
 import React from 'react';
+import {useMetadata} from './BuildContext';
 
 export const Footer: NoPropComponent = () => {
+  const {version} = useMetadata();
   return (
     <footer>
       <nav>
         <a id="tw" href="https://twitter.com/tinybasejs" target="_blank" />
         <a id="fb" href="https://facebook.com/tinybasejs" target="_blank" />
       </nav>
       <nav>
-        <a href="/">TinyBase</a> © 2021- All Rights Reserved
+        <a href="/">TinyBase {version}</a> © 2021- All Rights Reserved
       </nav>
     </footer>
   );

site/ui/Footer.tsx

@@ -1,14 +1,24 @@
 import {NoPropComponent, NodeChildren, useRootNode} from 'tinydocs';
 import React from 'react';
+import {useMetadata} from './BuildContext';
 
 export const Header: NoPropComponent = () => {
+  const {version} = useMetadata();
   const rootNode = useRootNode();
 
   return (
     <header>
       <a href="/">
         <img src="/favicon.svg" />
-        <span>TinyBase</span>
+        <span>
+          TinyBase
+          {version.includes('beta') && (
+            <>
+              {' '}
+              <em title={version}>beta</em>
+            </>
+          )}
+        </span>
       </a>
       <nav>
         <ul>