[site] Dynamic version number

Author: jamesgpearce

site/build.ts

@@ -1,11 +1,11 @@
 import {createDocs, getSorter} from 'tinydocs';
+import {readFileSync, writeFileSync} from 'fs';
 import {ArticleInner} from './ui/ArticleInner.tsx';
 import type {Docs} from 'tinydocs';
 import {ExecutablePen} from './ui/ExecutablePen.tsx';
 import {NavJson} from './ui/NavJson.tsx';
 import {Page} from './ui/Page.tsx';
 import {Readme} from './ui/Readme.tsx';
-import {readFileSync} from 'fs';
 
 const GROUPS = ['Interfaces', '*', 'Type aliases'];
 const CATEGORIES = [
@@ -85,6 +85,11 @@ export const build = async (
   const baseUrl = version.includes('beta')
     ? 'https://beta.tinybase.org'
     : 'https://tinybase.org';
+  writeFileSync(
+    'site/js/version.ts',
+    `export const thisVersion = 'v${version}';`,
+    'utf-8',
+  );
 
   const docs = createDocs(baseUrl, outDir, !api && !pages)
     .addJsFile('site/js/home.ts')
@@ -104,6 +109,7 @@ export const build = async (
       )}}, {}]`,
       'assets/countries.json',
     );
+
   [
     '',
     '/store',

site/js/app.ts

@@ -1,17 +1,17 @@
 import {
   addClass,
+  commonLoad,
   createElement,
   delClass,
   doc,
-  preLoad,
   query,
   queryById,
   queryElement,
   toggleClass,
 } from './common.ts';
 import type {NavNode} from '../ui/NavJson.tsx';
 
-preLoad();
+commonLoad();
 
 addEventListener('load', () => {
   const nav: HTMLElement = query('body > main > nav');

site/js/common.ts

@@ -1,5 +1,16 @@
+import {thisVersion} from './version.ts';
+
 export const doc = document;
 
+export const commonLoad = () => {
+  darkMode();
+  addEventListener('load', () => {
+    const version: HTMLElement = query('#version');
+    version.innerText = thisVersion;
+    version.style.width = version.scrollWidth + 'px';
+  });
+};
+
 export const query = (query: string): HTMLElement =>
   doc.querySelector(query) as HTMLElement;
 export const queryElement = (
@@ -60,8 +71,6 @@ const DARK = 'dark';
 const LIGHT = 'light';
 const AUTO = 'auto';
 
-export const preLoad = () => darkMode();
-
 const darkMode = () => {
   const pref = matchMedia('(prefers-color-scheme: dark)');
   const update = () => {

site/js/home.ts

@@ -1,3 +1,3 @@
-import {preLoad} from './common.ts';
+import {commonLoad} from './common.ts';
 
-preLoad();
+commonLoad();

site/js/single.ts

@@ -1,6 +1,6 @@
-import {addClass, delClass, preLoad, query, queryById} from './common.ts';
+import {addClass, commonLoad, delClass, query, queryById} from './common.ts';
 
-preLoad();
+commonLoad();
 
 addEventListener('load', () => {
   const nav: HTMLElement = query('body > main > nav');

site/js/version.ts

@@ -0,0 +1 @@
+export const thisVersion = 'v5.1.2';

site/less/layout.less

@@ -69,6 +69,12 @@ body {
       &:last-child {
         text-align: right;
       }
+      #version {
+        width: 0;
+        display: inline-block;
+        transition: width 1s;
+        overflow: clip;
+      }
     }
     #tw,
     #fb {

site/ui/Footer.tsx

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