add post /svelte-highlight-matching-text-action

add text input to ul.projects to filter OSS by query, update readme
remove outdated landing page screenshot
headings use text-wrap: balance;

package.json

@@ -29,32 +29,33 @@
     "@iconify/svelte": "^3.1.6",
     "@rollup/plugin-yaml": "^4.1.2",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "devalue": "^4.3.2",
     "eslint": "^8.56.0",
     "eslint-plugin-svelte": "^2.35.1",
     "hast-util-from-string": "^3.0.0",
     "hast-util-select": "^6.0.2",
-    "hastscript": "^8.0.0",
+    "hastscript": "^9.0.0",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.1.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^6.0.0",
     "remark-math": "3.0.0",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
+    "svelte": "^4.2.9",
+    "svelte-check": "^3.6.3",
     "svelte-multiselect": "^10.2.0",
     "svelte-preprocess": "^5.1.3",
     "svelte-preprocess-import-assets": "^1.1.0",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.27",
+    "svelte-zoo": "^0.4.10",
+    "svelte2tsx": "^0.7.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "vite": "^5.0.12"
   }
 }

readme.md

@@ -1,5 +1,5 @@
+![Planets](src/routes/physics/planets.svg)
+
 # [My Blog](https://janosh.dev)
 
 I write about things I learned in machine learning, data visualization, web development and coding best practices.
-
-![Landing Page](https://github.com/janosh/blog/assets/30958850/b74a301b-d25c-46bd-b1b0-b6478b1672e6)

src/app.css

@@ -126,6 +126,9 @@ h1 {
   text-align: center;
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+}
 :where(h2, h3, h4, h5, h6) {
   scroll-margin-top: 50px;
   transition: 0.3s;
@@ -175,11 +178,23 @@ img + em {
 }
 
 h2.section-title {
-  text-align: center;
-  margin: 1em auto;
   font-size: 2em;
 }
 section.landing {
   flex: 1;
   max-width: 60em;
 }
+
+input {
+  background-color: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: 4pt;
+  padding: 3pt 6pt;
+  color: inherit;
+  font-size: 11pt;
+  transition: background-color 0.2s ease-in-out;
+}
+::highlight(highlight-match) {
+  color: mediumaquamarine;
+  text-decoration: underline;
+}

src/lib/DocsGrid.svelte

@@ -12,13 +12,16 @@
     grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
     gap: 2em;
     margin: 1em 0;
+    text-wrap: balance;
   }
   :global(div.grid p) {
     margin: 0;
   }
   :global(div.grid a) {
     text-align: center;
     display: grid;
+    font-size: larger;
+    font-weight: bolder;
   }
   :global(div.grid img) {
     width: 100%;

src/routes/+page.svelte

@@ -50,7 +50,7 @@
   <!-- Outside of work, I enjoy hiking 🧗 and cycling 🚲. The rougher the terrain, the better! ⛰️ -->
 </p>
 
-<h2 class="section-title" style="margin: 1em auto 0;">
+<h2 class="section-title">
   <Icon inline icon="mdi:newspaper" />
   &nbsp;Recent
 </h2>

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

@@ -1,20 +1,27 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
+  import { highlight_matches } from 'svelte-zoo'
   import { flip } from 'svelte/animate'
   import oss from './oss.yml'
 
   let sort_by: 'commits' | 'stars' | 'alphabetical' = `commits`
   const sort_by_options = [`commits`, `stars`, `alphabetical`] as const
 
-  $: projects = oss.projects.sort((p1, p2) => {
-    if (sort_by === `alphabetical`) {
-      return p1.name.localeCompare(p2.name)
-    } else if ([`commits`, `stars`].includes(sort_by)) {
-      return p2[sort_by] - p1[sort_by]
-    } else {
-      throw new Error(`Unknown sort_by: ${sort_by}`)
-    }
-  })
+  $: projects = oss.projects
+    .filter((proj) => {
+      if (!query) return true
+      return JSON.stringify(proj).toLowerCase().includes(query.toLowerCase())
+    })
+    .sort((p1, p2) => {
+      if (sort_by === `alphabetical`) {
+        return p1.name.localeCompare(p2.name)
+      } else if ([`commits`, `stars`].includes(sort_by)) {
+        return p2[sort_by] - p1[sort_by]
+      } else {
+        throw new Error(`Unknown sort_by: ${sort_by}`)
+      }
+    })
+  let query = ``
 </script>
 
 <h2 class="section-title">
@@ -28,9 +35,10 @@
       {title}
     </button>
   {/each}
+  <input type="text" placeholder="Search..." bind:value={query} />
 </ul>
 
-<ul class="projects grid">
+<ul class="projects grid" use:highlight_matches={{ query, css_class: `highlight-match` }}>
   {#each projects as { url, repo, name, description, stars, logo, commits, role } (name)}
     {@const logo_url = logo ?? `${url}/favicon.svg`}
     <li animate:flip={{ duration: 400 }}>
@@ -65,6 +73,8 @@
       <p>{description}</p>
     </li>
   {/each}
+  <li style="visibility: hidden;"></li>
+  <li style="visibility: hidden;"></li>
 </ul>
 
 <style>

src/routes/open-source/oss.yml

@@ -9,8 +9,8 @@ projects:
       - Python
       - Cython
       - Jupyter Notebook
-    stars: 1234
-    commits: 914
+    stars: 1254
+    commits: 928
   - name: Matbench Discovery
     url: https://matbench-discovery.materialsproject.org
     img_style: 'filter: invert(1);'
@@ -25,7 +25,7 @@ projects:
       - JavaScript
       - HTML
     stars: 52
-    commits: 298
+    commits: 303
   - name: CHGNet
     url: https://chgnet.lbl.gov
     repo: https://github.com/CederGroupHub/chgnet
@@ -41,16 +41,16 @@ projects:
       - HTML
       - JavaScript
       - TypeScript
-    stars: 161
-    commits: 163
+    stars: 163
+    commits: 167
   - 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: 285
+    stars: 291
     commits: 21
     languages:
       - Python
@@ -66,7 +66,7 @@ projects:
       - Python
       - JavaScript
       - HTML
-    stars: 102
+    stars: 103
     commits: 173
   - name: pymatviz
     url: https://pymatviz.janosh.dev
@@ -80,8 +80,8 @@ projects:
       - TypeScript
       - HTML
       - JavaScript
-    stars: 97
-    commits: 234
+    stars: 100
+    commits: 235
   - name: Tensorboard Reducer
     repo: https://github.com/janosh/tensorboard-reducer
     logo: https://raw.githubusercontent.com/janosh/tensorboard-reducer/main/assets/tensorboard-reducer-square.svg
@@ -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: 1244
+    stars: 1245
     commits: 72
   - name: atomate2
     repo: https://github.com/materialsproject/atomate2
@@ -110,8 +110,8 @@ projects:
       potential-powered structure relaxation workflows.
     languages:
       - Python
-    stars: 112
-    commits: 347
+    stars: 113
+    commits: 348
   - name: jobflow
     repo: https://github.com/materialsproject/jobflow
     role: Maintainer
@@ -122,7 +122,7 @@ projects:
     languages:
       - Python
       - TeX
-    stars: 75
+    stars: 76
     commits: 100
   - name: Aviary
     repo: https://github.com/CompRhys/aviary
@@ -142,22 +142,22 @@ projects:
     description: A Python library for calculating materials properties from ML force field potential energy surfaces.
     languages:
       - Python
-    stars: 36
+    stars: 37
     commits: 66
   - name: TikZ
     url: https://tikz.janosh.dev
     repo: https://github.com/janosh/tikz
     description: Collection TikZ figures for concepts in physics/chemistry/ML.
-    stars: 168
-    commits: 185
+    stars: 170
+    commits: 187
     languages:
       - TeX
       - Svelte
       - Python
       - TypeScript
       - Shell
-      - HTML
       - CSS
+      - HTML
       - JavaScript
   - name: Dielectrics
     url: https://janosh.github.io/dielectrics
@@ -181,5 +181,5 @@ projects:
       - CSS
       - HTML
       - JavaScript
-    stars: 243
+    stars: 245
     commits: 269

src/routes/physics/+layout.svelte

@@ -19,7 +19,8 @@
 <style>
   img {
     margin: 0;
-    height: 50vh;
+    height: 30vh;
     object-fit: cover;
+    width: 100%;
   }
 </style>

src/routes/posts/+layout.svelte

@@ -25,7 +25,7 @@
   <Icon icon="carbon:calendar" inline />
   {date?.split(`T`)[0]}
 </time>
-<main>
+<main style="max-width: 50em;">
   <slot />
 
   <br />

src/routes/posts/+page@.svelte

@@ -7,7 +7,8 @@
   import Select from 'svelte-multiselect'
   import { flip } from 'svelte/animate'
 
-  let active_tags: string[] = []
+  type Option = { label: string; count: number }
+  let active_tags: Option[] = []
 
   const tag_counts = $page.data?.posts
     ?.flatMap((post) => post.tags)
@@ -16,13 +17,25 @@
       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))
+  const all_tags = (Object.entries(tag_counts) as [string, number][]).sort(
+    ([, count_1], [, count_2]) => count_2 - count_1,
+  )
+  // check if any tag appear with different casing (start inner loop at i + 1)
+  for (let ii = 0; ii < all_tags.length; ii++) {
+    const [tag_1] = all_tags[ii]
+    for (let jj = ii + 1; jj < all_tags.length; jj++) {
+      const [tag_2] = all_tags[jj]
+      if (tag_1.toLowerCase() === tag_2.toLowerCase()) {
+        console.error(`Tag "${tag_1}" appears with different casing`)
+      }
+    }
+  }
+  const top_tags = all_tags.slice(0, 15).sort()
+  const has_active_tags = (active_tags: Option[]) => (post: FrontMatter) => {
+    return (
+      active_tags.length === 0 ||
+      active_tags.some(({ label }) => post.tags?.includes(label))
+    )
   }
 </script>
 
@@ -34,11 +47,16 @@
 </h2>
 
 <Select
-  options={all_tags}
+  options={top_tags.map(([label, count]) => ({ label, count }))}
   placeholder="Filter by tag"
   bind:selected={active_tags}
   closeDropdownOnSelect
-/>
+>
+  <span slot="option" let:option style="display: flex; gap: 5pt; align-items: center;">
+    {option.label} <span style="flex: 1;" />
+    {option.count}
+  </span>
+</Select>
 
 <ul class="grid" style="margin: 4em auto; gap: 3ex;">
   {#each $page.data?.posts
@@ -71,6 +89,8 @@
       <small><Icon icon="carbon:tag" inline /> {tags?.join(`, `)}</small>
     </li>
   {/each}
+  <li style="visibility: hidden;"></li>
+  <li style="visibility: hidden;"></li>
 </ul>
 
 <style>
@@ -85,8 +105,8 @@
     margin: 0;
     font-size: 14pt;
     text-overflow: ellipsis;
-    white-space: nowrap;
     overflow: hidden;
+    text-align: center;
   }
   ul > li > a > img {
     border-radius: 2pt;