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",
@@ -55,6 +56,7 @@
     "svelte-preprocess-import-assets": "^1.1.0",
     "svelte-zoo": "^0.4.10",
     "svelte2tsx": "^0.7.0",
+    "three": "^0.160.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   }

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

@@ -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);'
@@ -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/posts/new-dielectric-materials/+page.md

@@ -0,0 +1,67 @@
+---
+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
+
+from pymatgen.core import Structure
+
+for cif in glob("*.cif"):
+    structure = Structure.from_file(cif)
+    structure.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.

src/routes/posts/new-dielectric-materials/Bi2Zr2O7-Fm3m.cif

@@ -0,0 +1,226 @@
+
+data_
+_chemical_name_mineral ?Flourite?
+_cell_length_a  5.3485(10)
+_cell_length_b  5.3485(10)
+_cell_length_c  5.3485(10)
+_cell_angle_alpha 90
+_cell_angle_beta  90
+_cell_angle_gamma 90
+_cell_volume 153.00(9)
+_space_group Fm-3m
+loop_
+_symmetry_equiv_pos_as_xyz
+	 'x, y, z '
+	 '-x, -y, z '
+	 '-x, -z, -y '
+	 '-x, -z, y '
+	 '-x, z, -y '
+	 '-x, z, y '
+	 '-x, y, -z '
+	 '-x, y, z '
+	 '-y, -x, -z '
+	 '-y, -x, z '
+	 '-y, -z, -x '
+	 '-y, -z, x '
+	 '-y, z, -x '
+	 '-y, z, x '
+	 '-y, x, -z '
+	 '-y, x, z '
+	 '-z, -x, -y '
+	 '-z, -x, y '
+	 '-z, -y, -x '
+	 '-z, -y, x '
+	 '-z, y, -x '
+	 '-z, y, x '
+	 '-z, x, -y '
+	 '-z, x, y '
+	 'z, -x, -y '
+	 'z, -x, y '
+	 'z, -y, -x '
+	 'z, -y, x '
+	 'z, y, -x '
+	 'z, y, x '
+	 'z, x, -y '
+	 'z, x, y '
+	 'y, -x, -z '
+	 'y, -x, z '
+	 'y, -z, -x '
+	 'y, -z, x '
+	 'y, z, -x '
+	 'y, z, x '
+	 'y, x, -z '
+	 'y, x, z '
+	 'x, -y, -z '
+	 'x, -y, z '
+	 'x, -z, -y '
+	 'x, -z, y '
+	 'x, z, -y '
+	 'x, z, y '
+	 'x, y, -z '
+	 '-x, -y, -z '
+	 'x+1/2, y+1/2, z '
+	 '-x+1/2, -y+1/2, z '
+	 '-x+1/2, -z+1/2, -y '
+	 '-x+1/2, -z+1/2, y '
+	 '-x+1/2, z+1/2, -y '
+	 '-x+1/2, z+1/2, y '
+	 '-x+1/2, y+1/2, -z '
+	 '-x+1/2, y+1/2, z '
+	 '-y+1/2, -x+1/2, -z '
+	 '-y+1/2, -x+1/2, z '
+	 '-y+1/2, -z+1/2, -x '
+	 '-y+1/2, -z+1/2, x '
+	 '-y+1/2, z+1/2, -x '
+	 '-y+1/2, z+1/2, x '
+	 '-y+1/2, x+1/2, -z '
+	 '-y+1/2, x+1/2, z '
+	 '-z+1/2, -x+1/2, -y '
+	 '-z+1/2, -x+1/2, y '
+	 '-z+1/2, -y+1/2, -x '
+	 '-z+1/2, -y+1/2, x '
+	 '-z+1/2, y+1/2, -x '
+	 '-z+1/2, y+1/2, x '
+	 '-z+1/2, x+1/2, -y '
+	 '-z+1/2, x+1/2, y '
+	 'z+1/2, -x+1/2, -y '
+	 'z+1/2, -x+1/2, y '
+	 'z+1/2, -y+1/2, -x '
+	 'z+1/2, -y+1/2, x '
+	 'z+1/2, y+1/2, -x '
+	 'z+1/2, y+1/2, x '
+	 'z+1/2, x+1/2, -y '
+	 'z+1/2, x+1/2, y '
+	 'y+1/2, -x+1/2, -z '
+	 'y+1/2, -x+1/2, z '
+	 'y+1/2, -z+1/2, -x '
+	 'y+1/2, -z+1/2, x '
+	 'y+1/2, z+1/2, -x '
+	 'y+1/2, z+1/2, x '
+	 'y+1/2, x+1/2, -z '
+	 'y+1/2, x+1/2, z '
+	 'x+1/2, -y+1/2, -z '
+	 'x+1/2, -y+1/2, z '
+	 'x+1/2, -z+1/2, -y '
+	 'x+1/2, -z+1/2, y '
+	 'x+1/2, z+1/2, -y '
+	 'x+1/2, z+1/2, y '
+	 'x+1/2, y+1/2, -z '
+	 '-x+1/2, -y+1/2, -z '
+	 'x+1/2, y, z+1/2 '
+	 '-x+1/2, -y, z+1/2 '
+	 '-x+1/2, -z, -y+1/2 '
+	 '-x+1/2, -z, y+1/2 '
+	 '-x+1/2, z, -y+1/2 '
+	 '-x+1/2, z, y+1/2 '
+	 '-x+1/2, y, -z+1/2 '
+	 '-x+1/2, y, z+1/2 '
+	 '-y+1/2, -x, -z+1/2 '
+	 '-y+1/2, -x, z+1/2 '
+	 '-y+1/2, -z, -x+1/2 '
+	 '-y+1/2, -z, x+1/2 '
+	 '-y+1/2, z, -x+1/2 '
+	 '-y+1/2, z, x+1/2 '
+	 '-y+1/2, x, -z+1/2 '
+	 '-y+1/2, x, z+1/2 '
+	 '-z+1/2, -x, -y+1/2 '
+	 '-z+1/2, -x, y+1/2 '
+	 '-z+1/2, -y, -x+1/2 '
+	 '-z+1/2, -y, x+1/2 '
+	 '-z+1/2, y, -x+1/2 '
+	 '-z+1/2, y, x+1/2 '
+	 '-z+1/2, x, -y+1/2 '
+	 '-z+1/2, x, y+1/2 '
+	 'z+1/2, -x, -y+1/2 '
+	 'z+1/2, -x, y+1/2 '
+	 'z+1/2, -y, -x+1/2 '
+	 'z+1/2, -y, x+1/2 '
+	 'z+1/2, y, -x+1/2 '
+	 'z+1/2, y, x+1/2 '
+	 'z+1/2, x, -y+1/2 '
+	 'z+1/2, x, y+1/2 '
+	 'y+1/2, -x, -z+1/2 '
+	 'y+1/2, -x, z+1/2 '
+	 'y+1/2, -z, -x+1/2 '
+	 'y+1/2, -z, x+1/2 '
+	 'y+1/2, z, -x+1/2 '
+	 'y+1/2, z, x+1/2 '
+	 'y+1/2, x, -z+1/2 '
+	 'y+1/2, x, z+1/2 '
+	 'x+1/2, -y, -z+1/2 '
+	 'x+1/2, -y, z+1/2 '
+	 'x+1/2, -z, -y+1/2 '
+	 'x+1/2, -z, y+1/2 '
+	 'x+1/2, z, -y+1/2 '
+	 'x+1/2, z, y+1/2 '
+	 'x+1/2, y, -z+1/2 '
+	 '-x+1/2, -y, -z+1/2 '
+	 'x, y+1/2, z+1/2 '
+	 '-x, -y+1/2, z+1/2 '
+	 '-x, -z+1/2, -y+1/2 '
+	 '-x, -z+1/2, y+1/2 '
+	 '-x, z+1/2, -y+1/2 '
+	 '-x, z+1/2, y+1/2 '
+	 '-x, y+1/2, -z+1/2 '
+	 '-x, y+1/2, z+1/2 '
+	 '-y, -x+1/2, -z+1/2 '
+	 '-y, -x+1/2, z+1/2 '
+	 '-y, -z+1/2, -x+1/2 '
+	 '-y, -z+1/2, x+1/2 '
+	 '-y, z+1/2, -x+1/2 '
+	 '-y, z+1/2, x+1/2 '
+	 '-y, x+1/2, -z+1/2 '
+	 '-y, x+1/2, z+1/2 '
+	 '-z, -x+1/2, -y+1/2 '
+	 '-z, -x+1/2, y+1/2 '
+	 '-z, -y+1/2, -x+1/2 '
+	 '-z, -y+1/2, x+1/2 '
+	 '-z, y+1/2, -x+1/2 '
+	 '-z, y+1/2, x+1/2 '
+	 '-z, x+1/2, -y+1/2 '
+	 '-z, x+1/2, y+1/2 '
+	 'z, -x+1/2, -y+1/2 '
+	 'z, -x+1/2, y+1/2 '
+	 'z, -y+1/2, -x+1/2 '
+	 'z, -y+1/2, x+1/2 '
+	 'z, y+1/2, -x+1/2 '
+	 'z, y+1/2, x+1/2 '
+	 'z, x+1/2, -y+1/2 '
+	 'z, x+1/2, y+1/2 '
+	 'y, -x+1/2, -z+1/2 '
+	 'y, -x+1/2, z+1/2 '
+	 'y, -z+1/2, -x+1/2 '
+	 'y, -z+1/2, x+1/2 '
+	 'y, z+1/2, -x+1/2 '
+	 'y, z+1/2, x+1/2 '
+	 'y, x+1/2, -z+1/2 '
+	 'y, x+1/2, z+1/2 '
+	 'x, -y+1/2, -z+1/2 '
+	 'x, -y+1/2, z+1/2 '
+	 'x, -z+1/2, -y+1/2 '
+	 'x, -z+1/2, y+1/2 '
+	 'x, z+1/2, -y+1/2 '
+	 'x, z+1/2, y+1/2 '
+	 'x, y+1/2, -z+1/2 '
+	 '-x, -y+1/2, -z+1/2 '
+loop_
+_atom_site_label
+_atom_site_fract_x
+_atom_site_fract_y
+_atom_site_fract_z
+_atom_site_occupancy
+_atom_site_B_iso_or_equiv
+Bi 0 0 0 0.5 3.30(17)
+Zr 0 0 0 0.5 3.30(17)
+O 0.25 0.25 0.25 0.875 8.1(4)
+loop_
+_atom_site_aniso_label
+_atom_site_aniso_U_11
+_atom_site_aniso_U_22
+_atom_site_aniso_U_33
+_atom_site_aniso_U_12
+_atom_site_aniso_U_13
+_atom_site_aniso_U_23
+Bi 0 0 0 0 0 0
+Zr 0 0 0 0 0 0
+O 0 0 0 0 0 0