make posts tag-filterable, add GDM slides

src/app.css

@@ -28,12 +28,12 @@ body > div {
   min-height: 100vh;
   flex-direction: column;
   position: relative;
+  place-content: center;
+  place-items: center;
 }
 main {
   padding: calc(1ex + 2vw);
   flex: 1;
-  max-width: 55em;
-  margin: auto;
 }
 button {
   color: var(--text-color);
@@ -173,5 +173,4 @@ h2.section-title {
 section.landing {
   flex: 1;
   max-width: 60em;
-  margin: auto;
 }

src/lib/types.ts

@@ -10,6 +10,7 @@ export type FrontMatter = {
     origin?: string
   }
   path: string
+  file: string
   tags: string[]
 }
 

src/routes/+layout.server.ts

@@ -1,3 +1,5 @@
+import type { FrontMatter } from '../lib/types.js'
+
 export const prerender = true
 
 export const load = async ({ url }) => {
@@ -9,7 +11,7 @@ export const load = async ({ url }) => {
     slug: file.split(`/`)[2],
     path: `/` + file.split(`/`).slice(1, -1).join(`/`),
     file,
-  }))
+  })) as FrontMatter[]
 
   const post = posts.find((post) => post.path === url.pathname)
 

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import GdmSLides from '$lib/2024-01-12-deepmind-interview.pdf'
   import Icon from '@iconify/svelte'
   import { references } from './cv/papers.yaml'
   import OpenSource from './open-source/+page.svelte'
@@ -47,8 +48,8 @@
 </p>
 
 <h2 class="section-title" style="margin: 1em auto 0;">
-  <Icon inline icon="octicon:repo" />
-  &nbsp;Recent Projects
+  <Icon inline icon="mdi:newspaper" />
+  &nbsp;Recent
 </h2>
 <ul class="recent grid">
   {#each oss.projects.filter((p) => p.paper) as { name, repo, logo, paper: id, description } (name)}
@@ -65,10 +66,23 @@
         </a>
         <small>[<a href={paper?.URL}>Paper</a>]</small>
       </h3>
-      <time datetime="">{date}</time>
+      <time>{date}</time>
       {description}
     </li>
   {/each}
+  <li>
+    <h3>
+      <img
+        src="https://github.com/janosh/blog/assets/30958850/f545ac6e-255f-4242-a23a-7516df80c8e7"
+        alt="DeepMind Logo"
+      />
+      DeepMind Talk
+      <small>[<a href={GdmSLides} type="application/pdf">Slides</a>]</small>
+    </h3>
+    <time>2024-01-12</time>
+    1h talk covering 3 PhD projects on ML-guided materials discovery & synthesis to SF+London
+    DeepMind team.
+  </li>
 </ul>
 
 <OpenSource />

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

@@ -57,7 +57,7 @@
           </a>
         {/if}
         <a href="{repo}/graphs/contributors">
-          <Icon inline icon="carbon:user-admin" />
+          <Icon inline icon="octicon:people-16" />
           {role ?? (repo.includes(`/janosh/`) ? `Lead` : `Contributor`)}
         </a>
       </section>

src/routes/open-source/oss.yml

@@ -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: 265
+    stars: 266
     commits: 21
     languages:
       - Python
@@ -122,7 +122,7 @@ projects:
     languages:
       - Python
       - TeX
-    stars: 70
+    stars: 73
     commits: 100
   - name: Aviary
     repo: https://github.com/CompRhys/aviary
@@ -182,4 +182,4 @@ projects:
       - HTML
       - JavaScript
     stars: 241
-    commits: 268
+    commits: 269

src/routes/physics/+page@.md

@@ -14,7 +14,7 @@ cover:
 
 <section class="landing">
 
-<img src="./planets.svg" alt={cover.caption} />
+<img src="./planets.svg" alt={cover.caption} style="margin: 2em 0 0;" />
 
 <h2 class="section-title">
   <Icon inline icon="mdi:atom" />

src/routes/posts/+page@.svelte

@@ -1,25 +1,55 @@
 <script lang="ts">
   import { dev } from '$app/environment'
   import { page } from '$app/stores'
+  import type { FrontMatter } from '$lib'
   import { repository } from '$root/package.json'
   import Icon from '@iconify/svelte'
+  import Select from 'svelte-multiselect'
+  import { flip } from 'svelte/animate'
+
+  let active_tags: string[] = []
+
+  const tag_counts = $page.data?.posts
+    ?.flatMap((post) => post.tags)
+    .reduce((acc, tag) => {
+      acc[tag] = (acc[tag] ?? 0) + 1
+      return acc
+    }, {})
+  // keep only most frequent tags
+  const all_tags = (Object.entries(tag_counts) as [string, number][])
+    .sort(([, count_1], [, count_2]) => count_2 - count_1)
+    .slice(0, 15)
+    .map(([tag]) => tag)
+    .sort()
+  const has_active_tags = (active_tags: string[]) => (post: FrontMatter) => {
+    return active_tags.length === 0 || post.tags?.some((tag) => active_tags.includes(tag))
+  }
 </script>
 
 <section class="landing">
-  <img src="./blog-banner.svg" alt="Banner" />
+  <img src="./blog-banner.svg" alt="Banner" style="margin: 2em 0 0;" />
 
   <h2 class="section-title">
     <Icon inline icon="ri:article-line" />
     Posts
   </h2>
 
+  <Select
+    options={all_tags}
+    placeholder="Filter by tag"
+    bind:selected={active_tags}
+    closeDropdownOnSelect
+  />
+
   <ul>
-    {#each $page.data?.posts?.sort((post_1, post_2) => {
-      return post_2.date.localeCompare(post_1.date) // sort by date descending
-    }) ?? [] as post}
+    {#each $page.data?.posts
+      ?.filter(has_active_tags(active_tags))
+      .sort((post_1, post_2) => {
+        return post_2.date.localeCompare(post_1.date) // sort by date descending
+      }) ?? [] as post (post.title)}
       {@const { cover, slug, title, tags, date } = post}
       {@const href = `/posts/${slug}`}
-      <li>
+      <li animate:flip={{ duration: 400 }}>
         <h3><a {href}>{title}</a></h3>
         <a {href}>
           {#if dev}
@@ -53,7 +83,7 @@
     grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
     list-style: none;
     max-width: min(90vw, 65em);
-    margin: 4em auto;
+    margin: 4em 0;
   }
   ul > li {
     display: grid;
@@ -73,4 +103,9 @@
     width: 100%;
     background: linear-gradient(-45deg, #5a6323, #2a355e, #642626);
   }
+  :global(div.multiselect) {
+    max-width: 20em !important;
+    margin: 0 auto -1em !important;
+    border: 1pt solid #666 !important;
+  }
 </style>