Skip to content

Commit

Permalink
add SortButtons component
Browse files Browse the repository at this point in the history
used in /cv to sort repos/papers by date/title/commits/stars/author
  • Loading branch information
janosh committed Feb 10, 2024
1 parent c59cd12 commit be30365
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 77 deletions.
5 changes: 5 additions & 0 deletions src/lib/Footer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,9 @@
border-radius: 50%;
transform: scale(1.4);
}
@media print {
:is(button, footer) {
display: none;
}
}
</style>
50 changes: 50 additions & 0 deletions src/lib/SortButtons.svelte
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions src/lib/index.ts
Original file line number Diff line number Diff line change
@@ -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'
22 changes: 11 additions & 11 deletions src/lib/oss.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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);'
Expand All @@ -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
Expand All @@ -41,16 +41,16 @@ 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
role: Contributor
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
Expand Down Expand Up @@ -80,7 +80,7 @@ projects:
- TypeScript
- HTML
- JavaScript
stars: 101
stars: 102
commits: 235
- name: Tensorboard Reducer
repo: https://github.com/janosh/tensorboard-reducer
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/lib/papers.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
15 changes: 11 additions & 4 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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;
Expand All @@ -52,4 +54,9 @@
border-radius: 3pt;
transition: 0.2s;
}
@media print {
a[href='/'] {
display: none;
}
}
</style>
Loading

0 comments on commit be30365

Please sign in to comment.