add k-space.typ

auto-add tags cetz/tikz to diagram.metadata.tags based on file extension

assets/bose-einstein-distribution/bose-einstein-distribution.typ

@@ -12,7 +12,6 @@
 }
 
 #canvas({
-  // Set up the plot
   draw.set-style(axes: (y: (label: (anchor: "south-east", angle: 90deg)), x: (label: (anchor: "north-east"))))
 
   plot.plot(

assets/fermi-dirac-vs-temp/fermi-dirac-vs-temp.typ

@@ -10,7 +10,6 @@
 }
 
 #canvas({
-  // Set up the plot
   draw.set-style(
     axes: (
       y: (label: (anchor: "south-west")),

assets/isotherms/isotherms.typ

@@ -16,7 +16,6 @@
 #let p2(v) = p1(v) + B2 / calc.pow(v, 3)
 
 #canvas({
-  // Set up the plot
   draw.set-style(
     axes: (
       y: (label: (anchor: "north-west", offset: -0.2)),

assets/k-space/k-space.typ

@@ -0,0 +1,61 @@
+#import "@preview/cetz:0.3.1": canvas, draw
+
+#set page(width: auto, height: auto, margin: 8pt)
+
+#let x-range = 3
+#let y-range = 3
+#let ratio = 3 / 4
+
+#canvas({
+  // Set up coordinate system
+  import draw: circle, content, line
+
+  // Draw blue circle with fill in background
+  circle(
+    (0, 0),
+    radius: 2 / 3 * y-range,
+    stroke: blue,
+    fill: blue.lighten(80%),
+    fill-opacity: 0.2,
+    name: "fermi-circle",
+  )
+
+  // Draw dot grid
+  for x in range(-x-range, x-range + 1) {
+    for y in range(-y-range, y-range + 1) {
+      circle((x, ratio * y), radius: 2pt, fill: black)
+    }
+  }
+
+  // Draw axes with arrows
+  let arrow-style = (mark: (end: "stealth", fill: black))
+  let x-end = (x-range + 0.5, 0)
+  let y-end = (0, ratio * y-range + 0.5)
+
+  line((-x-range - 0.5, 0), x-end, ..arrow-style)
+  line((0, -ratio * y-range - 0.5), y-end, ..arrow-style, name: "y-axis")
+
+  // Add axis labels
+  content(x-end, $k_x$, anchor: "south-west")
+  content((rel: (.55, 0), to: "y-axis.end"), $k_y$, anchor: "north-east")
+
+  // Draw lattice spacing indicators with arrows
+  let spacing-arrow = (mark: (start: "stealth", end: "stealth", fill: black, scale: .3, offset: 0.1), stroke: 0.7pt)
+  let x-start = (x-range - 1, -ratio * y-range)
+  let x-end = (x-range, -ratio * y-range)
+  let x-mid = ((x-start.at(0) + x-end.at(0)) / 2, x-start.at(1))
+
+  line(x-start, x-end, ..spacing-arrow, name: "x-spacing")
+  content("x-spacing.mid", $(2pi) / L_x$, anchor: "north", padding: 0.2)
+
+  let y-start = (x-range, -ratio * y-range)
+  let y-end = (x-range, -ratio * y-range + ratio)
+
+  line(y-start, y-end, ..spacing-arrow, name: "y-spacing")
+  content("y-spacing.mid", $(2pi) / L_y$, anchor: "west", padding: 0.2)
+
+  // Add N(k) label
+  let angle = 130deg
+  let label-pos = (calc.cos(angle) * 2.4, calc.sin(angle) * 2.4)
+  content(label-pos, text(blue)[$N(k)$])
+})

assets/light/light.typ

@@ -5,7 +5,7 @@
 #set page(width: auto, height: auto, margin: .5cm)
 
 #canvas({
-  import draw: *
+  import draw: set-transform, scale, content, line, grid, group, rotate
 
   // Set up the transformation matrix
   set-transform(matrix.transform-rotate-dir((1, 1, -1.3), (0, 1, .4)))

site/src/lib/Card.svelte

@@ -12,7 +12,7 @@
 
 <a href={slug} transition:fade={{ duration: 200 }} {style}>
   <h2 id={slug}>{title}</h2>
-  <Tags {tags} />
+  <Tags {tags} margin="0 1em" style="color: var(--text-color)" />
   <enhanced:img src={item.images.sd} alt={title} class="diagram" />
   {#if description && format === `full`}
     <p class="description">{@html description}</p>
@@ -46,6 +46,7 @@
     height: auto;
   }
   p.description {
+    color: var(--text-color);
     padding: 1ex 1em;
     position: absolute;
     bottom: 0;

site/src/lib/Tags.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   export let tags: string[]
-  export let font_size = `9pt`
-  export let margin = `auto`
+  export let font_size: string = `9pt`
+  export let margin: string = `auto`
+  export let style: string | null = null
 </script>
 
-<p class="tags" style:margin>
+<p class="tags" style:margin {style}>
   {#each tags ?? [] as tag}
     <small style:font-size={font_size} style:line-height={font_size}>{tag}</small>
   {/each}

site/src/lib/index.ts

@@ -1,3 +1,10 @@
+import rehype_katex from 'rehype-katex'
+import rehype_stringify from 'rehype-stringify'
+import remark_math from 'remark-math'
+import remark_parse from 'remark-parse'
+import remark_rehype from 'remark-rehype'
+import { unified } from 'unified'
+
 export { default as Card } from './Card.svelte'
 export { default as CodeBlock } from './CodeBlock.svelte'
 export { default as Tags } from './Tags.svelte'
@@ -21,3 +28,72 @@ export type YamlMetadata = {
   url?: string
   date?: string
 }
+
+// Load all YAML files from assets directory
+const yaml_data = import.meta.glob(`$assets/**/*.yml`, {
+  eager: true,
+  import: `default`,
+}) as Record<string, YamlMetadata>
+const code_files = import.meta.glob([`$assets/**/*.tex`, `$assets/**/*.typ`], {
+  eager: true,
+  query: `?raw`,
+  import: `default`,
+})
+const asset_files = import.meta.glob(
+  [`$assets/**/*.png`, `$assets/**/*.pdf`, `$assets/**/*.svg`],
+  { eager: true, query: `?url`, import: `default` },
+)
+const image_files = import.meta.glob(`$assets/**/*.png`, {
+  eager: true,
+  query: { enhanced: true },
+  import: `default`,
+})
+
+// Process YAML files to create figure data
+export const diagrams = Object.entries(yaml_data).map(([path, metadata]) => {
+  const slug = path.split(`/`)[2] // get directory name
+  const figure_basename = `../assets/${slug}/${slug}`
+
+  // Check if .tex or .typ file exists and get its content
+  const tex_path = `${figure_basename}.tex`
+  const typ_path = `${figure_basename}.typ`
+  const code = code_files[tex_path] ?? code_files[typ_path] ?? ``
+
+  let { tags = [] } = metadata
+  // Add typst and cetz tags if applicable
+  if (typ_path in code_files) {
+    tags = [...new Set([...tags, `cetz`])]
+  }
+  if (tex_path in code_files) {
+    tags = [...new Set([...tags, `tikz`])]
+  }
+
+  // Create new metadata object with updated tags
+  metadata.tags = tags
+
+  // Process description with remark/rehype if needed
+  if (metadata.description) {
+    metadata.description = unified()
+      .use(remark_parse)
+      .use(remark_math)
+      .use(remark_rehype)
+      .use(rehype_katex)
+      .use(rehype_stringify)
+      .processSync(metadata.description)
+      .toString()
+  }
+
+  const downloads = [
+    asset_files[`${figure_basename}-hd.png`],
+    asset_files[`${figure_basename}.png`],
+    asset_files[`${figure_basename}.pdf`],
+    asset_files[`${figure_basename}.svg`],
+  ].filter(Boolean)
+
+  const images = {
+    hd: image_files[`${figure_basename}-hd.png`],
+    sd: image_files[`${figure_basename}.png`],
+  }
+
+  return { ...metadata, slug, code, downloads, images }
+})

site/src/lib/stores.ts

@@ -1,12 +1,6 @@
-import rehype_katex from 'rehype-katex'
-import rehype_stringify from 'rehype-stringify'
-import remark_math from 'remark-math'
-import remark_parse from 'remark-parse'
-import remark_rehype from 'remark-rehype'
+import { diagrams } from '$lib'
 import { session_store, url_param_store } from 'svelte-zoo/stores'
 import { writable } from 'svelte/store'
-import { unified } from 'unified'
-import type { YamlMetadata } from '.'
 
 export const search = url_param_store(`search`, ``)
 
@@ -20,68 +14,4 @@ export const filter_tags = session_store<{ label: string; count: number }[]>(
   [],
 )
 
-// Load all YAML files from assets directory
-const yaml_data = import.meta.glob(`$assets/**/*.yml`, {
-  eager: true,
-  import: `default`,
-}) as Record<string, YamlMetadata>
-const code_files = import.meta.glob([`$assets/**/*.tex`, `$assets/**/*.typ`], {
-  eager: true,
-  query: `?raw`,
-  import: `default`,
-})
-const asset_files = import.meta.glob(
-  [`$assets/**/*.png`, `$assets/**/*.pdf`, `$assets/**/*.svg`],
-  { eager: true, query: `?url`, import: `default` },
-)
-const image_files = import.meta.glob(`$assets/**/*.png`, {
-  eager: true,
-  query: { enhanced: true },
-  import: `default`,
-})
-
-// Process YAML files to create figure data
-export const diagrams = Object.entries(yaml_data).map(([path, metadata]) => {
-  const slug = path.split(`/`)[2] // get directory name
-  const figure_basename = `../assets/${slug}/${slug}`
-
-  // Check if .tex or .typ file exists and get its content
-  const tex_path = `${figure_basename}.tex`
-  const typ_path = `${figure_basename}.typ`
-  const code = code_files[tex_path] ?? code_files[typ_path] ?? ``
-
-  // Add typst and cetz tags if applicable
-  if (!metadata.tags) metadata.tags = []
-
-  if (code_files[typ_path]) {
-    if (!metadata.tags.includes(`typst`)) metadata.tags.push(`typst`)
-  }
-
-  // Process description with remark/rehype if needed
-  if (metadata.description) {
-    metadata.description = unified()
-      .use(remark_parse)
-      .use(remark_math)
-      .use(remark_rehype)
-      .use(rehype_katex)
-      .use(rehype_stringify)
-      .processSync(metadata.description)
-      .toString()
-  }
-
-  const downloads = [
-    asset_files[`${figure_basename}-hd.png`],
-    asset_files[`${figure_basename}.png`],
-    asset_files[`${figure_basename}.pdf`],
-    asset_files[`${figure_basename}.svg`],
-  ].filter(Boolean)
-
-  const images = {
-    hd: image_files[`${figure_basename}-hd.png`],
-    sd: image_files[`${figure_basename}.png`],
-  }
-
-  return { ...metadata, slug, code, downloads, images }
-})
-
 export const filtered_diagrams = writable(diagrams)

site/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
-  import { diagrams } from '$lib/stores'
+  import { diagrams } from '$lib'
   import { repository } from '$root/package.json'
   import Icon from '@iconify/svelte'
   import { CmdPalette } from 'svelte-multiselect'

site/src/routes/+page.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
   import { building } from '$app/environment'
   import { goto } from '$app/navigation'
-  import { Card } from '$lib'
-  import {
-    diagrams,
-    filter_tags,
-    filtered_diagrams,
-    search,
-    tag_filter_mode,
-  } from '$lib/stores'
+  import { Card, diagrams } from '$lib'
+  import { filter_tags, filtered_diagrams, search, tag_filter_mode } from '$lib/stores'
   import { homepage, repository } from '$root/package.json'
   import Icon from '@iconify/svelte'
   import MultiSelect from 'svelte-multiselect'
@@ -17,18 +11,19 @@
   let innerWidth: number
   $: cols = clamp(Math.floor(innerWidth / 300), 1, 6)
 
-  const tags = Object.entries(
+  $: tags = Object.entries(
     diagrams
-      ?.flatMap((file) => file.tags)
+      ?.flatMap((diagram) => diagram.tags)
       .reduce(
         (acc, el) => {
           acc[el] = (acc[el] ?? 0) + 1
           return acc
         },
         {} as Record<string, number>,
       ),
-  ).filter(([, count]) => count > 2)
-  tags.sort(([t1], [t2]) => t1.localeCompare(t2))
+  )
+    .filter(([, count]) => count > 2)
+    .sort(([t1], [t2]) => t1.localeCompare(t2))
 
   const clamp = (num: number, min: number, max: number) =>
     Math.min(Math.max(num, min), max)