From e233c6645b29da035d60739d9cbf698ab572df03 Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Sat, 5 Jul 2025 17:01:36 +0200 Subject: [PATCH 1/2] add PaperGrid/PaperTimeline to /cv page - update app.html: use data-sveltekit-preload-data for preloading - add PaperGrid and PaperTimeline components for better publication history visualization - cv/+page.svelte add toggle to switch between grid and timeline views - Papers.svelte: modify sorting functionality to utilize PAPER_SORT_KEYS for consistency - cv/+page.svelte: add single-page PDF export option --- src/app.css | 2 +- src/app.html | 4 +- src/lib/PaperGrid.svelte | 262 ++++++++++++++++++++++++++++++++++ src/lib/PaperTimeline.svelte | 186 ++++++++++++++++++++++++ src/lib/index.ts | 2 + src/lib/oss.yml | 10 +- src/lib/types.ts | 13 ++ src/routes/cv/+page.server.ts | 12 ++ src/routes/cv/+page.svelte | 178 +++++++++++++++++++---- src/routes/cv/Papers.svelte | 11 +- 10 files changed, 641 insertions(+), 39 deletions(-) create mode 100644 src/lib/PaperGrid.svelte create mode 100644 src/lib/PaperTimeline.svelte create mode 100644 src/routes/cv/+page.server.ts diff --git a/src/app.css b/src/app.css index 9c26cf62..7fe38d08 100644 --- a/src/app.css +++ b/src/app.css @@ -1,7 +1,7 @@ :root { --night: #061e25; --text-color: rgb(208, 208, 208); - --text-secondary: rgb(160, 160, 160); + --text-secondary: rgb(140, 140, 140); --link-default: #7bb3d9; --link-primary: cornflowerblue; --link-hover: orange; diff --git a/src/app.html b/src/app.html index 042f58c8..71f8f512 100644 --- a/src/app.html +++ b/src/app.html @@ -41,7 +41,7 @@ %sveltekit.head% - + @@ -51,6 +51,6 @@ -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/lib/PaperGrid.svelte b/src/lib/PaperGrid.svelte new file mode 100644 index 00000000..1016cbfa --- /dev/null +++ b/src/lib/PaperGrid.svelte @@ -0,0 +1,262 @@ + + +
+
+ Less +
+ {#each [0, 0.25, 0.5, 0.75, 1] as intensity (intensity)} +
+ {/each} +
+ More +
+ +
+ {#each years as year (year)} +
{year}
+ {/each} +
+ +
+ {#each grid_data as year_data, year_idx (year_idx)} +
+ {#each year_data as week_data (JSON.stringify(week_data))} +
handle_hover(e, week_data)} + onmouseleave={() => handle_hover(new MouseEvent(`mouseleave`))} + onmousemove={(e) => tooltip.data && handle_hover(e, week_data)} + > +
+ {/each} +
+ {/each} +
+
+ +{#if tooltip.data} +
+ {#if tooltip.data.count === 0} +
+ W{tooltip.data.week} - {format_week(tooltip.data)} +
+ {:else} +
+ {tooltip.data.count} publication{ + tooltip.data.count !== 1 ? `s` : `` + } +
{format_week(tooltip.data)}
+
+ {#each tooltip.data.papers as paper (paper.id)} +
+
{paper.title}
+
+ { + paper.author?.slice(0, 3).map((a) => `${a.given} ${a.family}`).join( + `, `, + ) + } + {#if paper.author && paper.author.length > 3}et al.{/if} +
+
+ {/each} + {/if} +
+{/if} + + diff --git a/src/lib/PaperTimeline.svelte b/src/lib/PaperTimeline.svelte new file mode 100644 index 00000000..7d5e51f8 --- /dev/null +++ b/src/lib/PaperTimeline.svelte @@ -0,0 +1,186 @@ + + +
+ {#each timeline_data as paper_data (paper_data.paper.id)} +
handle_hover(e, paper_data)} + onmouseleave={() => handle_hover(new MouseEvent(`mouseleave`))} + onmousemove={(e) => tooltip.data && handle_hover(e, paper_data)} + > +
+
{paper_data.year}
+
+ {/each} +
+ +{#if tooltip.data} +
+
{tooltip.data.title}
+
{format_authors(tooltip.data.authors)}
+
{tooltip.data.journal}
+
+ { + tooltip.data.date.toLocaleDateString(`en-US`, { + year: `numeric`, + month: `long`, + day: `numeric`, + }) + } +
+
+{/if} + + diff --git a/src/lib/index.ts b/src/lib/index.ts index 264115b1..21823f26 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,6 +1,8 @@ export { default as DocsGrid } from './DocsGrid.svelte' export { default as Footer } from './Footer.svelte' export { default as Nav } from './Nav.svelte' +export { default as PaperGrid } from './PaperGrid.svelte' +export { default as PaperTimeline } from './PaperTimeline.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 ea4dde4c..04476109 100644 --- a/src/lib/oss.yml +++ b/src/lib/oss.yml @@ -47,7 +47,7 @@ projects: - JavaScript - HTML - TypeScript - stars: 313 + stars: 314 commits: 196 - name: TorchSim url: https://radical-ai.github.io/torch-sim @@ -84,7 +84,7 @@ projects: - Python - HTML stars: 158 - commits: 241 + commits: 243 - name: pymatviz url: https://pymatviz.janosh.dev img_style: 'filter: invert(1);' @@ -108,7 +108,7 @@ projects: - Python - TeX stars: 74 - commits: 85 + commits: 86 - name: Normalizing Flows repo: https://github.com/janosh/awesome-normalizing-flows logo: https://api.iconify.design/logos:awesome.svg?color=%23888888 @@ -127,7 +127,7 @@ projects: - Python - Jupyter Notebook - Shell - stars: 223 + stars: 224 commits: 379 paper_key: ganose_atomate2_2025 featured: true @@ -168,7 +168,7 @@ projects: url: https://diagrams.janosh.dev repo: https://github.com/janosh/diagrams description: '[Typst](https://typst.app) and [LaTeX](https://www.latex-project.org) diagrams of concepts in physics/chemistry/ML.' - stars: 325 + stars: 326 commits: 251 languages: - Typst diff --git a/src/lib/types.ts b/src/lib/types.ts index 77ae71fe..4039e90f 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -110,3 +110,16 @@ export type Social = { url: string style?: string } + +export const PAPER_SORT_KEYS = { + date: `date`, + title: `title`, + author: `author`, + first_author: `first author`, +} as const + +export const OSS_SORT_KEYS = { + commits: `commits`, + stars: `stars`, + name: `name`, +} as const diff --git a/src/routes/cv/+page.server.ts b/src/routes/cv/+page.server.ts new file mode 100644 index 00000000..1730b9d7 --- /dev/null +++ b/src/routes/cv/+page.server.ts @@ -0,0 +1,12 @@ +import oss from '$lib/oss.yml' +import { compile } from 'mdsvex' + +export async function load() { + for (const project of oss.projects) { + // deno-lint-ignore no-await-in-loop + const { code } = await compile(project.description) ?? {} + if (!code) throw new Error(`Failed to compile description for ${project.name}`) + project.description = code + } + return { oss } +} diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte index 12f87837..6a8ed66d 100644 --- a/src/routes/cv/+page.svelte +++ b/src/routes/cv/+page.svelte @@ -1,28 +1,63 @@
@@ -47,18 +82,35 @@ bind:sort_order={sort_papers_order} /> - +
+ {#each [ + [PaperGrid, `mdi:grid`, `Grid`], + [PaperTimeline, `mdi:timeline`, `Line`], + ] as const as + [Component, icon, label] + (icon) + } + + {/each} +
+ +

  Open Source

    - {#each oss.projects.sort((p1, p2) => { + {#each data.oss.projects.sort((p1, p2) => { const dir = sort_oss_order === `asc` ? -1 : 1 if (sort_oss_by === `name`) { return p1.name.localeCompare(p2.name) * dir @@ -98,7 +150,7 @@ {/if} {languages.slice(0, 3).join(`, `)} -

    {description}

    +

    {@html description}

    {/each}
@@ -208,10 +260,17 @@
- +
+ +
+ + +
+
diff --git a/src/routes/cv/Papers.svelte b/src/routes/cv/Papers.svelte index 6a85ca99..bfcf9449 100644 --- a/src/routes/cv/Papers.svelte +++ b/src/routes/cv/Papers.svelte @@ -1,5 +1,6 @@