add SortButtons component

used in /cv to sort repos/papers by date/title/commits/stars/author

src/lib/Footer.svelte

@@ -30,4 +30,9 @@
     border-radius: 50%;
     transform: scale(1.4);
   }
+  @media print {
+    :is(button, footer) {
+      display: none;
+    }
+  }
 </style>

src/lib/SortButtons.svelte

@@ -0,0 +1,47 @@
+<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;
+  }
+  @media print {
+    .sort-buttons {
+      display: none;
+    }
+  }
+</style>

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'

src/lib/oss.yml

@@ -9,8 +9,8 @@ projects:
       - Python
       - Cython
       - Jupyter Notebook
-    stars: 1257
-    commits: 931
+    stars: 1258
+    commits: 932
   - 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: 54
+    commits: 310
   - name: CHGNet
     url: https://chgnet.lbl.gov
     repo: https://github.com/CederGroupHub/chgnet
@@ -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: 300
     commits: 21
     languages:
       - Python
@@ -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

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,7 +34,7 @@
 <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 />
@@ -43,7 +43,7 @@
 
 <style>
   a[href='/'] {
-    font-size: 15pt;
+    font-size: 14pt;
     position: absolute;
     top: 2em;
     left: 2em;
@@ -52,4 +52,9 @@
     border-radius: 3pt;
     transition: 0.2s;
   }
+  @media print {
+    a[href='/'] {
+      display: none;
+    }
+  }
 </style>

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 }}
+      {#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>
@@ -243,6 +273,9 @@
     text-align: center;
     display: block;
   }
+  h2 {
+    position: relative;
+  }
   a {
     color: inherit;
   }
@@ -307,8 +340,14 @@
     margin: 3ex 0 1em;
   }
 
-  /* 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>

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}

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

src/routes/open-source/+page.svelte

@@ -4,16 +4,16 @@
   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) => {
       if (!query) return true
       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]