adding version numbers to docs (#747)

Author: stephiescastle

apps/vue-storybook/vite.config.ts

@@ -1,8 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import packageVersions from '@explorer-1/common-storybook/src/plugins/package-versions.js'
+
 // import Components from 'unplugin-vue-components/vite'
 
 export default defineConfig({
+  define: {
+    ...packageVersions
+  },
   plugins: [
     vue()
     // TODO: Doesn't work

packages/common-storybook/src/plugins/package-versions.js

@@ -0,0 +1,39 @@
+import { fileURLToPath } from 'url'
+import path from 'path'
+import fs from 'fs'
+
+// Helper function to read versions from all packages
+function getPackageVersions() {
+  const versions = {}
+
+  // Resolve the absolute path to the 'packages' directory from the root of the monorepo
+  const __dirname = path.dirname(fileURLToPath(import.meta.url))
+  const packagesDir = path.resolve(__dirname, '../../../../', 'packages')
+
+  // Loop through all directories in 'packages'
+  const packageFolders = fs.readdirSync(packagesDir)
+
+  for (const folder of packageFolders) {
+    const packagePath = path.join(packagesDir, folder, 'package.json')
+
+    // Check if package.json exists
+    if (fs.existsSync(packagePath)) {
+      const { name, version } = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
+
+      // Create a global constant name, e.g., 'VERSION_LIBRARY_A'
+      // Replace non-alphanumeric characters for a valid constant name
+      const constName = name.toUpperCase().replace(/[^A-Z0-9]/g, '_')
+
+      versions[`__VERSION_${constName}__`] = version
+    }
+  }
+  console.log(versions)
+  return versions
+}
+
+export const packageVersions = getPackageVersions()
+// Example result:
+// {
+//   "__VERSION_REPO_LIBRARY_A__": "\"1.2.3\"",
+//   "__VERSION_REPO_LIBRARY_B__": "\"4.5.6\""
+// }

packages/common/package.json

@@ -9,7 +9,7 @@
   "author": "DesignLab",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nasa-jpl/explorer-1"
+    "url": "https://github.com/nasa-jpl/explorer-1/tree/main/packages/common"
   },
   "prettier": "@explorer-1/prettier-config",
   "devDependencies": {

packages/html/package.json

@@ -3,6 +3,10 @@
   "private": true,
   "version": "0.0.3",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nasa-jpl/explorer-1/"
+  },
   "scripts": {
     "dev": "vite",
     "build": "pnpm build:fontfiles && pnpm build:vite && pnpm build:fontcss",

packages/vue/package.json

@@ -8,7 +8,7 @@
   "author": "DesignLab",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nasa-jpl/explorer-1"
+    "url": "https://github.com/nasa-jpl/explorer-1/tree/main/packages/vue"
   },
   "type": "module",
   "scripts": {

packages/vue/src/docs/introduction.docs.mdx

@@ -40,3 +40,31 @@ This website uses [Storybook](https://storybook.js.org/) to display our document
 ---
 
 Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
+
+<div>
+  <table
+    class="w-auto text-left"
+    style={{ width: 'unset' }}
+  >
+    <thead>
+      <tr class="text-left">
+        <th>Package</th>
+        <th>Version</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>[@explorer-1/common](https://www.npmjs.com/package/@explorer-1/common)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_COMMON__}</code>
+        </td>
+      </tr>
+      <tr>
+        <td>[@explorer-1/vue](https://www.npmjs.com/package/@explorer-1/vue)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_VUE__}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>