From be3036519a8b936f0d7ca3aea74c3c61ca025e7a Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Wed, 7 Feb 2024 15:39:43 +0100
Subject: [PATCH] add SortButtons component

used in /cv to sort repos/papers by date/title/commits/stars/author
---
 src/lib/Footer.svelte               |   5 ++
 src/lib/SortButtons.svelte          |  50 +++++++++++
 src/lib/index.ts                    |   1 +
 src/lib/oss.yml                     |  22 ++---
 src/lib/papers.yaml                 |   2 +-
 src/routes/+layout.svelte           |  15 +++-
 src/routes/cv/+page.svelte          | 127 ++++++++++++++++------------
 src/routes/cv/Papers.svelte         |  25 ++++--
 src/routes/cv/cv.yml                |   5 ++
 src/routes/open-source/+page.svelte |   6 +-
 10 files changed, 181 insertions(+), 77 deletions(-)
 create mode 100644 src/lib/SortButtons.svelte

diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index 31b69220..959dc3c8 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -30,4 +30,9 @@
     border-radius: 50%;
     transform: scale(1.4);
   }
+  @media print {
+    :is(button, footer) {
+      display: none;
+    }
+  }
 </style>
diff --git a/src/lib/SortButtons.svelte b/src/lib/SortButtons.svelte
new file mode 100644
index 00000000..01f21a6c
--- /dev/null
+++ b/src/lib/SortButtons.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  export let label: string = `Sort by`
+  export { className as class }
+  export let sort_by: string | undefined = undefined
+  export let sort_keys: readonly string[] = []
+  export let sort_order: 'asc' | 'desc' = `asc`
+  export let as: string = `small`
+  export let style: string | null = null
+
+  let className: string | null = null
+</script>
+
+<svelte:element this={as} class="sort-buttons {className}" {style}>
+  {label}
+  {#each sort_keys as key}
+    <button on:click={() => (sort_by = key)} class:active={sort_by === key}>
+      {key}
+    </button>
+  {/each}
+  <button on:click={() => (sort_order = sort_order === `asc` ? `desc` : `asc`)}>
+    {sort_order === `asc` ? `↑` : `↓`}
+  </button>
+</svelte:element>
+
+<style>
+  .sort-buttons {
+    display: flex;
+    gap: 2pt;
+    position: absolute;
+    right: 0;
+    bottom: 4pt;
+    font-weight: 100;
+    font-size: 9pt;
+  }
+  .sort-buttons button {
+    font-size: 9pt;
+    padding: 1pt 2pt;
+    border: none;
+    color: gray;
+    background-color: #f0f0f0;
+  }
+  .sort-buttons button.active {
+    background-color: #e0e0e0;
+  }
+  @media print {
+    .sort-buttons {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 1dc080c7..264115b1 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,6 @@
 export { default as DocsGrid } from './DocsGrid.svelte'
 export { default as Footer } from './Footer.svelte'
 export { default as Nav } from './Nav.svelte'
+export { default as SortButtons } from './SortButtons.svelte'
 
 export type * from './types'
diff --git a/src/lib/oss.yml b/src/lib/oss.yml
index 3763813d..18e43577 100644
--- a/src/lib/oss.yml
+++ b/src/lib/oss.yml
@@ -9,8 +9,8 @@ projects:
       - Python
       - Cython
       - Jupyter Notebook
-    stars: 1257
-    commits: 931
+    stars: 1259
+    commits: 937
   - name: Matbench Discovery
     url: https://matbench-discovery.materialsproject.org
     img_style: 'filter: invert(1);'
@@ -24,8 +24,8 @@ projects:
       - TypeScript
       - JavaScript
       - HTML
-    stars: 52
-    commits: 308
+    stars: 55
+    commits: 313
   - name: CHGNet
     url: https://chgnet.lbl.gov
     repo: https://github.com/CederGroupHub/chgnet
@@ -41,8 +41,8 @@ projects:
       - HTML
       - JavaScript
       - TypeScript
-    stars: 164
-    commits: 167
+    stars: 166
+    commits: 168
   - name: MACE
     url: https://mace-docs.readthedocs.io
     repo: https://github.com/ACEsuit/mace
@@ -50,7 +50,7 @@ projects:
     paper: riebesell_foundation_2023
     description: Fast and accurate machine learning interatomic potentials with higher order equivariant message passing.
     logo: https://avatars.githubusercontent.com/u/68508620
-    stars: 296
+    stars: 302
     commits: 21
     languages:
       - Python
@@ -80,7 +80,7 @@ projects:
       - TypeScript
       - HTML
       - JavaScript
-    stars: 101
+    stars: 102
     commits: 235
   - name: Tensorboard Reducer
     repo: https://github.com/janosh/tensorboard-reducer
@@ -98,7 +98,7 @@ projects:
     description: Curated list of resources for learning and using normalizing flows, a powerful tool in ML for modeling probability distributions.
     languages:
       - Python
-    stars: 1252
+    stars: 1253
     commits: 72
   - name: atomate2
     repo: https://github.com/materialsproject/atomate2
@@ -110,7 +110,7 @@ projects:
       potential-powered structure relaxation workflows.
     languages:
       - Python
-    stars: 113
+    stars: 114
     commits: 349
   - name: jobflow
     repo: https://github.com/materialsproject/jobflow
@@ -133,7 +133,7 @@ projects:
     languages:
       - Python
     stars: 36
-    commits: 233
+    commits: 234
   - name: MatCalc
     url: https://materialsvirtuallab.github.io/matcalc
     logo: https://github.com/materialsvirtuallab/matcalc/assets/30958850/89486f2f-73fb-40fb-803a-dfafe510eb6d
diff --git a/src/lib/papers.yaml b/src/lib/papers.yaml
index 0716e1da..275af948 100644
--- a/src/lib/papers.yaml
+++ b/src/lib/papers.yaml
@@ -459,7 +459,7 @@ references:
     publisher: arXiv
     source: arXiv.org
     title: >-
-      Matbench Discovery -- An evaluation framework for machine learning crystal
+      Matbench Discovery - An evaluation framework for machine learning crystal
       stability prediction
     URL: http://arxiv.org/abs/2308.14920
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5a67e690..09301759 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
       const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
       const route = `/${parts.slice(1, -1).join(`/`)}`
       return { label: route, action: () => goto(route) }
-    }
+    },
   )
 
   afterNavigate(() => {
@@ -34,16 +34,18 @@
 <CmdPalette {actions} placeholder="Go to..." />
 
 {#if $page.url.pathname !== `/`}
-  <a href="/" aria-label="Back to index page">&laquo; home</a>
+  <a href="/" aria-label="Back to index page">&larr; home</a>
 {/if}
 
 <slot />
 
-<Footer />
+{#if $page.url.pathname !== `/cv`}
+  <Footer />
+{/if}
 
 <style>
   a[href='/'] {
-    font-size: 15pt;
+    font-size: 14pt;
     position: absolute;
     top: 2em;
     left: 2em;
@@ -52,4 +54,9 @@
     border-radius: 3pt;
     transition: 0.2s;
   }
+  @media print {
+    a[href='/'] {
+      display: none;
+    }
+  }
 </style>
diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte
index e9713779..38ca8f51 100644
--- a/src/routes/cv/+page.svelte
+++ b/src/routes/cv/+page.svelte
@@ -1,14 +1,23 @@
 <script lang="ts">
+  import { SortButtons } from '$lib'
   import oss from '$lib/oss.yml'
   import papers from '$lib/papers.yaml'
   import Icon from '@iconify/svelte'
+  import type { ComponentProps } from 'svelte'
   import { Toggle } from 'svelte-zoo'
+  import { flip } from 'svelte/animate'
   import Papers from './Papers.svelte'
   import cv from './cv.yml'
 
   export let data
   export let show_sidebar = true
+  export let sort_papers_by: ComponentProps<Papers>['sort_by'] = `date`
+  export let sort_papers_order: `asc` | `desc` = `desc`
+  export let sort_oss_by: `commits` | `stars` | `title` = `commits`
+  export let sort_oss_order: `asc` | `desc` = `desc`
+  export let sort_oss_keys = [`commits`, `stars`, `title`] as const
 
+  const paper_sort_keys = [`date`, `title`, `author`] as const
   const links = { target: `_blank`, rel: `noreferrer` }
 
   const social: [string, string][] = [
@@ -46,33 +55,39 @@
       of high-quality open source software that enables new capabilities for scaling
       computational materials science.
     </small>
-    <h2>
-      <Icon inline icon="zondicons:education" />&nbsp; Education
-    </h2>
-    <ul>
-      {#each cv.education as { title, thesis_title, date, href, uni }}
-        <li>
-          <h4>
-            <a {href}>{title}</a>
-            <small style="font-weight: 200;">{uni}{date ? ` &bull; ${date}` : ``}</small>
-          </h4>
-          <p>Thesis title: {thesis_title}</p>
-        </li>
-      {/each}
-    </ul>
 
     <h2>
       <Icon inline icon="iconoir:journal" />&nbsp; Selected Publications
+      <SortButtons
+        bind:sort_by={sort_papers_by}
+        sort_keys={paper_sort_keys}
+        bind:sort_order={sort_papers_order}
+      />
     </h2>
-    <Papers {...papers} />
+    <Papers {...papers} sort_by={sort_papers_by} sort_order={sort_papers_order} />
 
     <h2>
       <Icon inline icon="ri:open-source-line" />&nbsp; Open Source
+      <SortButtons
+        bind:sort_by={sort_oss_by}
+        sort_keys={sort_oss_keys}
+        bind:sort_order={sort_oss_order}
+      />
     </h2>
-    <ul>
-      {#each oss.projects as { url, img_style, repo, name, description, stars, logo, languages, commits }}
+    <ul class="oss">
+      {#each oss.projects.sort((p1, p2) => {
+        const dir = sort_oss_order === `asc` ? -1 : 1
+
+        if (sort_oss_by === `title`) {
+          return p1.name.localeCompare(p2.name) * dir
+        } else if ([`commits`, `stars`].includes(sort_oss_by)) {
+          return (p2[sort_oss_by] - p1[sort_oss_by]) * dir
+        } else {
+          throw new Error(`Unknown sort_oss_by: ${sort_oss_by}`)
+        }
+      }) as { url, img_style, repo, name, description, stars, logo, languages, commits } (name)}
         {@const logo_url = logo ?? `${url}/favicon.svg`}
-        <li>
+        <li animate:flip={{ duration: 400 }}>
           <h4>
             <a href={url ?? repo} {...links}>
               <img src={logo_url} alt="{name} Logo" style={img_style} />
@@ -102,6 +117,21 @@
       {/each}
     </ul>
 
+    <h2>
+      <Icon inline icon="zondicons:education" />&nbsp; Education
+    </h2>
+    <ul>
+      {#each cv.education as { title, thesis_title, date, href, uni }}
+        <li>
+          <h4>
+            <a {href}>{title}</a>
+            <small style="font-weight: 200;">{uni}{date ? ` &bull; ${date}` : ``}</small>
+          </h4>
+          <p>Thesis title: {thesis_title}</p>
+        </li>
+      {/each}
+    </ul>
+
     <h2>
       <Icon inline icon="mdi:trophy" />&nbsp; Awards
     </h2>
@@ -201,14 +231,13 @@
       </ul>
     </aside>
   {/if}
-
-  <Toggle
-    bind:checked={show_sidebar}
-    style="transform: scale(0.9); margin: 1em auto 0; font-weight: lighter; gap: 1ex;"
-  >
-    Toggle Sidebar
-  </Toggle>
 </main>
+<Toggle
+  bind:checked={show_sidebar}
+  style="transform: scale(0.9); margin: 1em auto 2em; font-weight: lighter;"
+>
+  Toggle Sidebar&ensp;
+</Toggle>
 
 <style>
   main {
@@ -219,15 +248,11 @@
     padding: 3em;
     display: grid;
     gap: 0 1em;
-    border-radius: 2px;
+    border-radius: 2pt;
   }
   main :global(a) {
     color: darkblue;
   }
-  h4 a {
-    display: flex;
-    place-items: center;
-  }
   h4 img {
     width: 3ex;
     height: 3ex;
@@ -243,6 +268,9 @@
     text-align: center;
     display: block;
   }
+  h2 {
+    position: relative;
+  }
   a {
     color: inherit;
   }
@@ -251,48 +279,34 @@
     place-content: center;
     gap: 12pt;
     font-style: normal;
-    font-weight: 200;
     margin: 1ex;
   }
-  address a {
-    display: flex;
-    gap: 4pt;
-    place-items: center;
-  }
-  h2::after {
-    content: '';
-    display: block;
-    height: 0.5px;
-    background-color: #bbb;
-  }
   ul {
     list-style: none;
-    padding: 0 0 0 4pt;
+    padding: 0;
     margin: 0;
-    place-items: center;
-    container-type: inline-size;
   }
-  ul > li > h4 {
+  ul.oss > li > h4 {
     margin: 8pt 0 4pt;
     display: flex;
     gap: 8pt;
     place-items: center;
     font-size: smaller;
   }
-  ul > li > h4 > small.langs {
+  ul.oss > li > h4 > small.langs {
     margin-left: 2ex;
     font-weight: 200;
     font-size: 9pt;
   }
+  ul.oss > li > h4 a {
+    display: flex;
+    place-items: center;
+  }
   p {
     margin: 0;
     font-size: 10pt;
     font-weight: 300;
   }
-  img[alt$='Logo'] {
-    height: 3ex;
-    width: 3ex;
-  }
   ul.skills {
     display: flex;
     gap: 4pt 8pt;
@@ -306,9 +320,18 @@
     white-space: nowrap;
     margin: 3ex 0 1em;
   }
+  aside > h3:first-of-type {
+    margin-top: 0;
+  }
 
-  /* convert to CSS prop with next svelte-zoo release */
+  /* TODO convert to CSS prop with next svelte-zoo release */
   main :global(input:checked + span) {
     background-color: #f0f0f0 !important;
   }
+  @media print {
+    /* hide sidebar toggle when printing */
+    main :global(label) {
+      display: none !important;
+    }
+  }
 </style>
diff --git a/src/routes/cv/Papers.svelte b/src/routes/cv/Papers.svelte
index 251af184..5654a5c1 100644
--- a/src/routes/cv/Papers.svelte
+++ b/src/routes/cv/Papers.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { Reference } from '$lib'
   import { highlight_matches } from 'svelte-zoo'
+  import { flip } from 'svelte/animate'
   import { truncate_authors } from '.'
 
   export let references: Reference[]
   export let first_name_mode: 'initial' | 'full' | 'none' = `initial`
   export let target_author: string = `J. Riebesell`
+  export let sort_by: 'title' | 'date' | 'author' = `title`
+  export let sort_order: 'asc' | 'desc' = `asc`
 </script>
 
 <ol
@@ -14,8 +17,20 @@
     css_class: `highlight-match`,
   }}
 >
-  {#each references.sort(({ author }) => {
-    return -(author[0].family == target_author.split(` `)[1])
+  {#each references.sort((ref1, ref2) => {
+    const dir = sort_order === `asc` ? 1 : -1
+    if (sort_by === `title`) {
+      return ref1.title.localeCompare(ref2.title) * dir
+    } else if (sort_by === `date`) {
+      const { year: y1, month: m1 } = ref1.issued[0]
+      const { year: y2, month: m2 } = ref2.issued[0]
+      return dir * (100 * (y1 - y2) + (m1 - m2))
+    } else if (sort_by === `author`) {
+      // papers with target_author first/last
+      const idx1 = ref1.author.findIndex((auth) => auth.family === target_author.split(` `)[1])
+      const idx2 = ref2.author.findIndex((auth) => auth.family === target_author.split(` `)[1])
+      return (idx1 - idx2) * dir
+    } else throw `Unknown sort_by: ${sort_by}`
   }) as { title, id, author, DOI, URL: href, issued } (id)}
     {@const author_str = author
       .map(({ given, family }) => {
@@ -27,11 +42,9 @@
         return `${first_name ?? ``}${family}`
       })
       .join(`, `)}
-    <li>
+    <li animate:flip={{ duration: 400 }}>
       <h3 {id}>{title}</h3>
-      <span>
-        {@html truncate_authors(author_str, target_author)}
-      </span>
+      {truncate_authors(author_str, target_author)}
       <small>
         &mdash;
         {#if DOI}
diff --git a/src/routes/cv/cv.yml b/src/routes/cv/cv.yml
index 71804702..852a08fa 100644
--- a/src/routes/cv/cv.yml
+++ b/src/routes/cv/cv.yml
@@ -122,9 +122,11 @@ hobbies:
   - name: drones
     icon: carbon:drone
     href: https://youtube.com/@jrib
+
 nationality:
   - 🇨🇦 Canadian
   - 🇩🇪 German
+
 languages:
   - name: 🇺🇸 English
     level: advanced
@@ -134,6 +136,7 @@ languages:
     level: intermediate
   - name: 🇪🇸 Spanish
     level: basic
+
 volunteer:
   - name: Studenten bilden Schüler
     description: Non-profit student initiative that connects University student volunteers with children from underprivileged families for free tutoring.
@@ -147,11 +150,13 @@ volunteer:
     href: https://afara.foundation
     logo: https://afara.foundation/favicon.svg
     role: Board member and head of IT
+
 awards:
   - name: Studienstiftung des deutschen Volkes
     description: Full scholarship for outstanding students (German Academic Scholarship Foundation)
     date: 2015 - 2023
     href: https://studienstiftung.de
+
 memberships:
   - name: Cambridge Physical Society
     date: 2019 - present
diff --git a/src/routes/open-source/+page.svelte b/src/routes/open-source/+page.svelte
index d767e55b..6a0a2ce2 100644
--- a/src/routes/open-source/+page.svelte
+++ b/src/routes/open-source/+page.svelte
@@ -4,8 +4,8 @@
   import { highlight_matches } from 'svelte-zoo'
   import { flip } from 'svelte/animate'
 
-  let sort_by: 'commits' | 'stars' | 'alphabetical' = `commits`
-  const sort_by_options = [`commits`, `stars`, `alphabetical`] as const
+  let sort_by: 'commits' | 'stars' | 'title' = `commits`
+  const sort_by_options = [`commits`, `stars`, `title`] as const
 
   $: projects = oss.projects
     .filter((proj) => {
@@ -13,7 +13,7 @@
       return JSON.stringify(proj).toLowerCase().includes(query.toLowerCase())
     })
     .sort((p1, p2) => {
-      if (sort_by === `alphabetical`) {
+      if (sort_by === `title`) {
         return p1.name.localeCompare(p2.name)
       } else if ([`commits`, `stars`].includes(sort_by)) {
         return p2[sort_by] - p1[sort_by]