add zotero bibliography features

daniel-wojahn · Nov 19, 2024 · dc6bf82 · dc6bf82
1 parent 5357f42
commit dc6bf82
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 2 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/docs/.DS_Store b/docs/.DS_Store
diff --git a/docs/admonitions.md b/docs/admonitions.md
@@ -3,4 +3,6 @@
 
 
 ??? info "Did you know that..."
-    Lorem ipsum
+    Lorem ipsum
+
+<zotero-bibliography user-id="8242679" api-key="wfl1lbslylLV0HFAqm65uYTU"></zotero-bibliography>
diff --git a/docs/assets/js/zotero-bibliography.js.js b/docs/assets/js/zotero-bibliography.js.js
@@ -0,0 +1,122 @@
+// zotero-bibliography.js
+class ZoteroBibliography extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const userId = this.getAttribute('user-id');
+        const collectionKey = this.getAttribute('collection-key') || null;
+        const apiKey = this.getAttribute('api-key') || null;
+
+        await this.loadBibliography(userId, collectionKey, apiKey);
+    }
+
+    async loadBibliography(userId, collectionKey, apiKey) {
+        try {
+            let apiUrl = `https://api.zotero.org/users/${userId}/items`;
+            if (collectionKey) {
+                apiUrl = `https://api.zotero.org/users/${userId}/collections/${collectionKey}/items`;
+            }
+
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            if (apiKey) {
+                headers['Zotero-API-Key'] = apiKey;
+            }
+
+            const response = await fetch(apiUrl, {
+                headers,
+                params: {
+                    format: 'json',
+                    include: 'data,bib',
+                    sort: 'dateModified',
+                    direction: 'desc'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.renderBibliography(data);
+        } catch (error) {
+            console.error('Error loading Zotero bibliography:', error);
+            this.shadowRoot.innerHTML = `
+                <div class="error">
+                    Error loading bibliography. Please check your Zotero settings.
+                </div>
+            `;
+        }
+    }
+
+    renderBibliography(items) {
+        const styles = `
+            <style>
+                .bibliography {
+                    font-family: var(--md-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+                    line-height: 1.6;
+                    padding: 1rem;
+                }
+                .bib-item {
+                    margin-bottom: 1rem;
+                    padding-bottom: 1rem;
+                    border-bottom: 1px solid var(--md-default-fg-color--lightest);
+                }
+                .bib-title {
+                    font-weight: bold;
+                    color: var(--md-typeset-color);
+                }
+                .bib-authors {
+                    color: var(--md-default-fg-color--light);
+                    font-style: italic;
+                }
+                .bib-meta {
+                    font-size: 0.9em;
+                    color: var(--md-default-fg-color--light);
+                }
+                .error {
+                    color: var(--md-code-hl-number-color);
+                    padding: 1rem;
+                    border-left: 4px solid var(--md-code-hl-number-color);
+                }
+            </style>
+        `;
+
+        const bibliography = items.map(item => {
+            const itemData = item.data;
+            return `
+                <div class="bib-item">
+                    <div class="bib-title">${itemData.title}</div>
+                    <div class="bib-authors">${this.formatAuthors(itemData.creators)}</div>
+                    <div class="bib-meta">
+                        ${itemData.date ? `(${itemData.date.split('-')[0]})` : ''} 
+                        ${itemData.publicationTitle ? `in ${itemData.publicationTitle}` : ''}
+                        ${itemData.DOI ? `<br>DOI: <a href="https://doi.org/${itemData.DOI}" target="_blank">${itemData.DOI}</a>` : ''}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        this.shadowRoot.innerHTML = `
+            ${styles}
+            <div class="bibliography">
+                ${bibliography}
+            </div>
+        `;
+    }
+
+    formatAuthors(creators) {
+        if (!creators || creators.length === 0) return '';
+
+        return creators
+            .filter(creator => creator.creatorType === 'author')
+            .map(author => `${author.lastName}, ${author.firstName}`)
+            .join('; ');
+    }
+}
+
+customElements.define('zotero-bibliography', ZoteroBibliography);
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -44,4 +44,6 @@ copyright: Copyright &copy; 2024 CSLS, University of Oxford
 extra_css:
   - assets/css/extra.css
 extra_javascript:
-    - assets/js/iiif-viewer.js
+    - assets/js/iiif-viewer.js
+    - assets/js/zotero-bibliography.js
+