fix lib/References.svelte mixing authors and titles on page reloads

sync references.yaml with Zotero collection
janosh · Jul 27, 2023 · 3aad858 · 3aad858
1 parent a549532
commit 3aad858
Show file tree

Hide file tree

Showing 2 changed files with 680 additions and 26 deletions.
diff --git a/site/src/lib/References.svelte b/site/src/lib/References.svelte
@@ -3,38 +3,40 @@
   import type { Reference } from '.'
 
   export let references: Reference[]
-  export let ref_selector: string = `a[href^='#']`
+  export let ref_selector: string = `a.ref[href^='#']`
   export let found_on_page: Reference[] = references
 
   function filter_refs() {
     const ref_links = document.querySelectorAll<HTMLAnchorElement>(ref_selector)
-    const hrefs = Array.from(ref_links).map((ref) => ref.hash)
-    found_on_page = references.filter((ref) => hrefs.includes(`#${ref.id}`))
+    const hashes = Array.from(ref_links).map((ref) => ref.hash)
+    found_on_page = references.filter((ref) => hashes.includes(`#${ref.id}`))
   }
   beforeUpdate(filter_refs)
 </script>
 
-<ol>
-  {#each found_on_page as { title, id, author, DOI, URL, issued }}
-    <li>
-      <strong {id}>{title}</strong>
-      <span>
-        {@html author.map((a) => `${a.given} ${a.family}`).join(`, &thinsp; `)}
-      </span>
-      &mdash;
-      <small>
-        {#if DOI}
-          DOI: <a href="https://doi.org/{DOI}">{DOI}</a>
-        {:else if URL}
-          preprint: <a href={URL}>{URL}</a>
-        {/if}
-        {#if issued}
-          &mdash; {issued[0].year}
-        {/if}
-      </small>
-    </li>
-  {/each}
-</ol>
+{#key found_on_page}
+  <ol>
+    {#each found_on_page as { title, id, author, DOI, URL: href, issued } (id)}
+      <li>
+        <strong {id}>{title}</strong>
+        <span>
+          {@html author.map((a) => `${a.given} ${a.family}`).join(`, &thinsp; `)}
+        </span>
+        &mdash;
+        <small>
+          {#if DOI}
+            DOI: <a href="https://doi.org/{DOI}">{DOI}</a>
+          {:else if href}
+            preprint: <a {href}>{href}</a>
+          {/if}
+          {#if issued}
+            &mdash; {issued[0].year}
+          {/if}
+        </small>
+      </li>
+    {/each}
+  </ol>
+{/key}
 
 <style>
   ol > li {