add /new-dielectric-materials post

move oss.yml and papers.yaml to $lib for cleaner imports
pnpm add --dev elementari

.pre-commit-config.yaml

@@ -34,7 +34,7 @@ repos:
       - id: codespell
         stages: [commit, commit-msg]
         exclude_types: [svg]
-        args: [--ignore-words-list, 'ist,yau', --check-filenames]
+        args: [--ignore-words-list, 'ist,yau,te', --check-filenames]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: v9.0.0-alpha.0

package.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "devalue": "^4.3.2",
+    "elementari": "^0.2.3",
     "eslint": "^8.56.0",
     "eslint-plugin-svelte": "^2.35.1",
     "hast-util-from-string": "^3.0.0",

src/app.css

@@ -198,3 +198,9 @@ input {
   color: mediumaquamarine;
   text-decoration: underline;
 }
+
+img.banner {
+  max-height: 25em;
+  object-fit: cover;
+  width: 100%;
+}

src/routes/open-source/oss.yml → src/lib/oss.yml

@@ -25,7 +25,7 @@ projects:
       - JavaScript
       - HTML
     stars: 52
-    commits: 303
+    commits: 304
   - 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: 291
+    stars: 294
     commits: 21
     languages:
       - Python
@@ -67,7 +67,7 @@ projects:
       - JavaScript
       - HTML
     stars: 103
-    commits: 173
+    commits: 174
   - name: pymatviz
     url: https://pymatviz.janosh.dev
     img_style: 'filter: invert(1);'
@@ -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: 1245
+    stars: 1246
     commits: 72
   - name: atomate2
     repo: https://github.com/materialsproject/atomate2
@@ -111,7 +111,7 @@ projects:
     languages:
       - Python
     stars: 113
-    commits: 348
+    commits: 349
   - name: jobflow
     repo: https://github.com/materialsproject/jobflow
     role: Maintainer
@@ -181,5 +181,5 @@ projects:
       - CSS
       - HTML
       - JavaScript
-    stars: 245
+    stars: 246
     commits: 269

src/routes/+layout.server.ts

@@ -1,5 +1,5 @@
+import type { FrontMatter } from '$lib/types.js'
 import { author } from '$root/package.json'
-import type { FrontMatter } from '../lib/types.js'
 
 export const prerender = true
 

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import GdmSLides from '$lib/2024-01-12-deepmind-interview.pdf'
+  import oss from '$lib/oss.yml'
+  import { references } from '$lib/papers.yaml'
   import Icon from '@iconify/svelte'
-  import { references } from './cv/papers.yaml'
   import OpenSource from './open-source/+page.svelte'
-  import oss from './open-source/oss.yml'
   import Physics from './physics/[email protected]'
   import Posts from './posts/[email protected]'
 

src/routes/cv/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import oss from '$lib/oss.yml'
+  import papers from '$lib/papers.yaml'
   import Icon from '@iconify/svelte'
-  import oss from '../open-source/oss.yml'
   import Papers from './Papers.svelte'
   import cv from './cv.yml'
-  import papers from './papers.yaml'
 
   export let data
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import oss from '$lib/oss.yml'
   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

src/routes/physics/+page@.md

@@ -12,7 +12,7 @@ cover:
   import Icon from '@iconify/svelte'
 </script>
 
-<img src="./planets.svg" alt={cover.caption} style="margin: 2em 0 0;" />
+<img src="./planets.svg" alt={cover.caption} class="banner" />
 
 <h2 class="section-title">
   <Icon inline icon="mdi:atom" />
@@ -21,7 +21,7 @@ cover:
 
 This is a compilation of notes and solutions to problem sheets for some of the physics lectures I took, most of them in [Heidelberg](https://google.com/search?q=Heidelberg). Hopefully, they can be useful to others. If you find errors, please [open an issue]({issues}).
 
-<DocsGrid style="max-width: var(--body-max-width);">
+<DocsGrid style="max-width: var(--body-max-width); margin: 0 0 5em;">
 
 [String Theory ![Cross section of the quintic Calabi–Yau manifold](./string-theory/calabi-yau.png)](physics/string-theory)
 

src/routes/posts/+page@.svelte

@@ -39,7 +39,7 @@
   }
 </script>
 
-<img src="./blog-banner.svg" alt="Banner" style="margin: 2em 0 0;" />
+<img src="./blog-banner.svg" alt="Banner" class="banner" />
 
 <h2 class="section-title">
   <Icon inline icon="ri:article-line" />

src/routes/posts/new-dielectric-materials/+page.md

@@ -0,0 +1,70 @@
+---
+title: New Dielectric Materials
+date: 2024-01-29
+cover:
+  img: dielectric-banner.svg
+  origin: Vecteezy
+  url: https://vecteezy.com/vector-art/192230-robot-character-design
+tags:
+  - Tutorial
+  - Python
+---
+
+<script>
+  import { references } from '$lib/papers.yaml'
+  import { projects } from '$lib/oss.yml'
+  import { Structure, StructureCard } from 'elementari'
+
+  const diel_paper = references.find((ref) => ref.id === `riebesell_pushing_2024`)
+  const elementari = projects.find((proj) => proj.name === `Elementari`)
+
+  const structs = import.meta.glob(`./*.json`, { as: `raw`, eager: true })
+</script>
+
+[We just published data on two materials]({diel_paper.URL}), Zr<sub>2</sub>Bi<sub>2</sub>O<sub>7</sub> and CsTaTeO<sub>6</sub>, which were the result of a workflow to discover new dielectric materials. Dielectrics are in used CPUs and SSDs among many other electronic devices. We managed to experimentally synthesize both these materials and measure their dielectric properties (thanks Wes!), so I wanted to take the opportunity of having two crystal structures that are special to me to write a short tutorial on how to render 3D crystal structures in a browser using one of my side-projects called [`elementari`]({elementari.repo}).
+
+`elementari` currently only understands `pymatgen`'s JSON-like structure representation. Converting the CIF files you get from (of the structures we verified with [XRD](https://wikipedia.org/wiki/X-ray_crystallography) to have made in the lab) to this format is easy:
+
+```py
+from glob import glob
+
+import pymatgen.transformations.advanced_transformations as pat
+from pymatgen.core import Structure
+
+for cif in glob("*.cif"):
+    struct = Structure.from_file(cif).add_oxidation_state_by_guess()
+    # remove partial occupancies, elementari does not support them (yet)
+    ordered = pat.OrderDisorderedStructureTransformation().apply_transformation(struct)
+    ordered.to(cif.replace(".cif", ".json"))
+```
+
+The resulting JSON files can then be visualized with `elementari` using the `Structure` component which again takes only half a dozen lines of code:
+
+```svelte
+<script>
+  import { Structure, StructureCard } from 'elementari'
+
+  const structs = import.meta.glob(`./*.json`, { as: `raw`, eager: true })
+</script>
+
+{#each Object.entries(structs) as [name, json_struct]}
+  {@const structure = JSON.parse(json_struct)}
+  <StructureCard {structure} />
+  <Structure {structure} />
+{/each}
+```
+
+Here's what this code renders:
+
+<div style="display: grid; gap: 1em;">
+  {#each Object.entries(structs) as [name, json_struct]}
+    {@const structure = JSON.parse(json_struct)}
+    {@const [formula, spacegroup] = name.match(/\.\/(.+)-(.+)\.json/).slice(1)}
+    <section>
+      <StructureCard {structure} title="{formula} (<small>{spacegroup}</small>)" />
+      <Structure {structure} show_bonds={false} show_site_labels />
+    </section>
+  {/each}
+</div>
+
+Note that the converted CIFs give us `pymatgen` `Structures`, not `StructureGraphs` which contain adjacency matrices to convey bond information. `elementari` can render bonds but `StructureGraph` support is still WIP and the JS code I wrote for on-the-fly bond detection is terrible (don't use it). Hopefully, something I'll fix in the coming months.