add auto-updating MBD metrics table to site landing page

CederGroupHub · Oct 31, 2023 · daf3a4b · daf3a4b
1 parent 9eaf45d
commit daf3a4b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,8 @@ DFT magnetic moments, which carry rich information about both local ionic enviro
 
 Pretrained CHGNet achieves SOTA performance on materials stability prediction from unrelaxed structures according to [Matbench Discovery](https://matbench-discovery.materialsproject.org) [[repo](https://github.com/janosh/matbench-discovery)].
 
+<slot name="metrics-table" />
+
 ## Example notebooks
 
 | Notebooks                                                                                                                                      | Google&nbsp;Colab                                                                                                                                        | Descriptions                                                                                                                                                                                                                                                                                                                                                                                              |

diff --git a/site/.gitignore b/site/.gitignore
@@ -5,3 +5,4 @@ node_modules
 .svelte-kit
 build
 src/routes/api/*.md
+src/MetricsTable.svelte
diff --git a/site/package.json b/site/package.json
@@ -16,19 +16,19 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.25.2",
+    "@sveltejs/kit": "^1.27.2",
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "eslint": "^8.51.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.52.0",
     "eslint-plugin-svelte": "^2.34.0",
     "hastscript": "^8.0.0",
     "mdsvex": "^0.11.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
     "rehype-autolink-headings": "^7.0.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.1",
+    "svelte": "^4.2.2",
     "svelte-check": "^3.5.2",
     "svelte-multiselect": "^10.2.0",
     "svelte-preprocess": "^5.0.4",
@@ -37,7 +37,7 @@
     "svelte2tsx": "^0.6.23",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "prettier": {
     "semi": false,

diff --git a/site/src/app.css b/site/src/app.css
@@ -161,3 +161,10 @@ aside.toc.desktop {
 caption {
   display: block;
 }
+
+table {
+  display: block;
+  max-width: 100%;
+  overflow: scroll;
+  border-collapse: collapse;
+}
diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import Readme from '$root/README.md'
+  import MetricsTable from '$src/MetricsTable.svelte'
 </script>
 
 <main>
-  <Readme />
+  <Readme>
+    <MetricsTable slot="metrics-table" />
+  </Readme>
 </main>
 
 <style>

diff --git a/site/vite.config.ts b/site/vite.config.ts
@@ -1,4 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite'
+import * as fs from 'fs'
 import type { UserConfig } from 'vite'
 
 export default {
@@ -13,3 +14,12 @@ export default {
     port: 3000,
   },
 } satisfies UserConfig
+
+// fetch latest Matbench Discovery metrics table at build time and save src/ dir
+fetch(
+  `https://github.com/janosh/matbench-discovery/raw/main/site/src/figs/metrics-table.svelte`,
+)
+  .then((res) => res.text())
+  .then((text) => {
+    fs.writeFileSync(`src/MetricsTable.svelte`, text)
+  })