add site Footer, add next/prev page links (with wrap-around)

add h1 page titles on /models, /api, /how-to-contribute add figure captions to data/wbm/readme.md
janosh · Jun 20, 2023 · 98a4289 · 98a4289
1 parent 9a59191
commit 98a4289
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 30 deletions.
diff --git a/data/wbm/fetch_process_wbm_dataset.py b/data/wbm/fetch_process_wbm_dataset.py
@@ -440,9 +440,8 @@ def fix_bad_struct_index_mismatch(material_id: str) -> str:
     text=f"<b>dataset cropped to within +/- {e_form_cutoff} eV/atom</b>",
     showarrow=False,
 )
-fig.update_layout(
-    xaxis_title="WBM formation energy (eV/atom)", margin=dict(l=10, r=10, t=40, b=10)
-)
+x_axis_title = "WBM uncorrected formation energy (eV/atom)"
+fig.update_layout(xaxis_title=x_axis_title, margin=dict(l=10, r=10, t=40, b=10))
 
 
 # %%

diff --git a/data/wbm/readme.md b/data/wbm/readme.md
@@ -21,6 +21,7 @@ The full set of processing steps used to curate the WBM test set from the raw da
 - remove 6 pathological structures (with 0 volume)
 - remove formation energy outliers below -5 and above 5 eV/atom (502 and 22 crystals respectively out of 257,487 total, including an anomaly of 500 structures at exactly -10 eV/atom)
 
+  <caption>WBM Formation energy distribution. 524 materials outside green dashed lines were discarded.</caption>
   <slot name="hist-e-form-per-atom">
     <img src="./2022-12-07-hist-e-form-per-atom.svg" alt="WBM formation energy histogram indicating outlier cutoffs">
   </slot>
@@ -71,8 +72,7 @@ materialscloud:2021.68 includes a readme file with a description of the dataset,
 
 ## Data Plots
 
-Heatmap of elemental prevalence in WBM dataset.
-
+<caption>Heatmap of elemental prevalence in WBM dataset.</caption>
 <slot name="wbm-elements-log">
   <img src="./2022-12-30-wbm-elements-log.svg" alt="Periodic table log heatmap of WBM elements">
 </slot>
diff --git a/site/package.json b/site/package.json
@@ -25,7 +25,7 @@
     "@typescript-eslint/parser": "^5.48.0",
     "eslint": "^8.31.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "hastscript": "^7.1.0",
+    "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
     "mdsvex": "^0.10.6",
     "prettier": "^2.8.1",
@@ -34,11 +34,11 @@
     "rehype-slug": "^5.1.0",
     "svelte": "^3.55.0",
     "svelte-check": "^3.0.1",
-    "svelte-github-corner": "^0.1.0",
+    "svelte-github-corner": "^0.2.0",
     "svelte-preprocess": "^5.0.0",
     "svelte-toc": "^0.5.1",
     "svelte2tsx": "^0.6.0",
-    "sveriodic-table": "^0.1.1",
+    "sveriodic-table": "^0.1.2",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.4"

diff --git a/site/src/app.css b/site/src/app.css
@@ -15,11 +15,13 @@
 }
 body {
   background: var(--night);
-  padding: calc(1ex + 2vw);
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   color: var(--text-color);
   line-height: 1.5;
 }
+main {
+  padding: calc(1ex + 2vw);
+}
 button {
   color: var(--text-color);
   cursor: pointer;
@@ -37,6 +39,15 @@ a {
 a:hover {
   color: orange;
 }
+a.link {
+  padding: 0 4pt;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 3pt;
+  transition: 0.2s;
+}
+a.link[aria-current='page'] {
+  color: mediumseagreen;
+}
 code {
   overflow-wrap: break-word;
   padding: 1pt 3pt;
@@ -81,11 +92,7 @@ tbody tr:nth-child(odd) {
 }
 
 h1 {
-  display: flex;
-  font-size: clamp(2rem, 2rem + 2vw, 3rem);
-  place-items: center;
-  place-content: center;
-  margin: 1.2em 0;
+  text-align: center;
 }
 
 :where(h2, h3, h4, h5, h6) {
@@ -128,3 +135,7 @@ aside.toc.desktop {
   left: calc(50vw + 50em / 2);
   max-width: 16em;
 }
+
+caption {
+  display: block;
+}
diff --git a/site/src/lib/Footer.svelte b/site/src/lib/Footer.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { repository } from '$site/package.json'
+  import Icon from '@iconify/svelte'
+</script>
+
+<footer>
+  Maintained by <a href="https://github.com/janosh">Janosh Riebesell</a>
+  <a href="mailto:janosh@lbl.gov"><Icon icon="mdi:email" inline /></a>
+  on
+  <a href={repository}><Icon icon="octicon:mark-github" inline /></a>
+</footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: 1ex;
+    place-content: center;
+    place-items: center;
+    padding: 3vh 3vw;
+    background: #00061a;
+  }
+</style>
diff --git a/site/src/lib/Nav.svelte b/site/src/lib/Nav.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <nav>
-  {#each routes as route, idx}
+  {#each routes as href, idx}
     {#if idx > 0}<strong>&bull;</strong>{/if}
-    <a href={route} aria-current={is_current(route)}>{route}</a>
+    <a {href} aria-current={is_current(href)} class="link">{href}</a>
   {/each}
 </nav>
 
@@ -27,13 +27,4 @@
     flex-wrap: wrap;
     font-size: 1.1em;
   }
-  nav > a {
-    padding: 0 4pt;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 3pt;
-    transition: 0.2s;
-  }
-  nav > a[aria-current='page'] {
-    color: mediumseagreen;
-  }
 </style>
diff --git a/site/src/routes/+layout.svelte b/site/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores'
+  import Footer from '$lib/Footer.svelte'
   import Nav from '$lib/Nav.svelte'
   import { repository } from '$site/package.json'
   import { onMount } from 'svelte'
@@ -23,6 +24,11 @@
   $: headingSelector = `main :is(${
     $page.url.pathname === `/api` ? `h1, ` : ``
   }h2, h3, h4):not(.toc-exclude)`
+
+  $: current_route_idx = routes.findIndex((route) => route === $page.url.pathname)
+  // get prev/next route with wrap-around
+  $: next_route = routes[(current_route_idx + 1) % routes.length]
+  $: prev_route = routes[(current_route_idx - 1 + routes.length) % routes.length]
 </script>
 
 <Toc {headingSelector} breakpoint={1250} warnOnEmpty={false} />
@@ -33,12 +39,19 @@
 
 <GitHubCorner href={repository} />
 
-<Nav {routes} />
-
 <main>
+  <Nav {routes} />
+
   <slot />
+
+  <section>
+    <a href={prev_route} class="link">&laquo; {prev_route}</a>
+    <a href={next_route} class="link">{next_route} &raquo;</a>
+  </section>
 </main>
 
+<Footer />
+
 <style>
   main {
     margin: auto;
@@ -59,4 +72,9 @@
   a[href='/']:hover {
     background-color: rgba(255, 255, 255, 0.2);
   }
+  section {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 4em;
+  }
 </style>
diff --git a/site/src/routes/about-the-test-set/+page.svelte b/site/src/routes/about-the-test-set/+page.svelte
@@ -43,7 +43,7 @@
     gap: 1ex;
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(100%);
     z-index: 1;
   }
   strong {

diff --git a/site/src/routes/api/+page.svelte b/site/src/routes/api/+page.svelte
@@ -1,11 +1,16 @@
+<h1>API</h1>
+
 {#each Object.values(import.meta.glob(`./*.md`, { eager: true })) as file}
   <svelte:component this={file?.default} />
 {/each}
 
 <style>
+  /* select all but first module h1s */
+  :global(h1[id^='module-']:not(:nth-of-type(2))) {
+    margin: 4em 0 0;
+  }
   :global(hr) {
     border: none;
-    margin: 3em;
   }
   :global(code) {
     line-height: 1em;

diff --git a/site/src/routes/how-to-contribute/+page.md b/site/src/routes/how-to-contribute/+page.md
@@ -1,3 +1,5 @@
+# How to contribute
+
 ## 🔨 &thinsp; Installation
 
 The recommended way to acquire the train and test data for this benchmark is through its Python package [available onPyPI](https://pypi.org/project/matbench-discovery):
@@ -165,3 +167,7 @@ git commit -m 'add <model_name> to Matbench Discovery leaderboard'
 ```
 
 And you're done! Once tests pass and the PR is merged, your model will be added to the leaderboard! 🎉
+
+## Troubleshooting
+
+Having problems using or contributing to the project? Please [open an issue on GitHub](https://github.com/janosh/matbench-discovery/issues). We're happy to help!
diff --git a/site/src/routes/models/+page.svelte b/site/src/routes/models/+page.svelte
@@ -6,6 +6,8 @@
   export let data: PageData
 </script>
 
+<h1>Models</h1>
+
 <ol>
   {#each data.model_metas as [key, meta], idx}
     {@const { repo, doi, preprint, url, date_added } = meta}
@@ -20,7 +22,7 @@
         {/each}
       </nav>
       <p>
-        Date added: {new Date().toISOString().split(`T`)[0]}
+        Date added: {new Date(date_added).toISOString().split(`T`)[0]}
         &nbsp;&bull;&nbsp; Benchmark version: {meta.matbench_discovery_version}
       </p>
       <strong>Authors</strong>