Merge pull request #13 from JaneliaSciComp/t3-website-improvements

Ongoing T3 website improvements

Author: krokicki

.gitignore

@@ -12,6 +12,7 @@ __pycache__
 # Data
 data
 .zarrcade*
+static/ext
 
 # Zarrcade databases
 *.db

docs/Configuration.md

@@ -18,7 +18,8 @@ All of the possible collection settings are listed below.
   * `static` - treat paths as relative to the `./static` folder
   * `absolute` - treat paths as absolute 
   * `relative` - uses paths relative to the `data_url`
-`title_column_name`: The name of the column in the annotations table that contains the title of the image. This is used to display the title of the image in the image gallery and other places. It may contain HTML markup, such as colors and links.
+`title_column_name`: *(DEPRECATED: Use `title_template` instead)* The name of the column in the annotations table that contains the title of the image. This is used to display the title of the image in the image gallery and other places. It may contain HTML markup, such as colors and links.
+`title_template`: String template for building image titles. Can contain references to any column name using curly braces (e.g., `{column_name}`) and can include HTML markup such as `<font>` tags. For example: `<font color="red">{Line}</font> - {Marker}`. If both `title_template` and `title_column_name` are provided, `title_template` takes precedence.
 `filters`: A list of filters to apply to the images. Filters are used to select a subset of the images in the service. Each filter is a dictionary with the following keys:
   * `column_name`: The name of the column in the image annotation table.
   * `data_type`: The type of the data in the column. This can be `string` or `csv`. When `csv`, the filter will be a dropdown with one option per unique value in each CSV value. Default: `string`.

docs/Deployment.md

@@ -10,6 +10,10 @@ The following configuration options are available:
 
 `collection`: Single collection mode. If this collection name is specified, the index page will redirect directly to this collection, and no other collection may be selected.
 
+`header_left_logo_url`: URL or path to the logo image displayed on the left side of the header. Can be a relative path (e.g., `/static/logo.png`) or absolute URL. Default: `/static/zarrcade.png`
+
+`header_right_logo_url`: URL or path to the logo image displayed on the right side of the header. Can be a relative path (e.g., `/static/logo.png`) or absolute URL. Default: `/static/white_janelia_logo.png`
+
 `log_level`: The logging level to use for the Zarrcade service. This can be `DEBUG`, `INFO`, `WARNING`, `ERROR`, or `CRITICAL`. Default: `INFO`
 
 `base_url`: The base URL for the Zarrcade service. This is used to generate URLs for the images and other resources in the service. It's required when using the build-in file proxy. Default: `http://127.0.0.1:8000/`
@@ -21,7 +25,10 @@ The following configuration options are available:
 Example `settings.yaml` file:
 
 ```yaml
-title: Zarrcade 
+title: Zarrcade
+
+header_left_logo_url: /static/zarrcade.png
+header_right_logo_url: /static/white_janelia_logo.png
 
 log_level: INFO
 

static/HHMI_Janelia_Logo_Black_Background.png

@@ -1,11 +1,49 @@
+// Dark mode functionality
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+    document.documentElement.setAttribute('data-theme', theme);
+    const toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+        toggle.checked = theme === 'dark';
+    }
+}
+
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+}
+
+// Listen for system theme changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
+        const toggle = document.getElementById('theme-toggle');
+        if (toggle) {
+            toggle.checked = e.matches;
+        }
+    }
+});
+
+// Initialize theme on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+} else {
+    initTheme();
+}
+
 function showCopied(node) {
     const copied = "Copied!"
-    let tooltip = node.querySelector(".tooltiptext")
-    let curr = tooltip.textContent
-    tooltip.textContent = copied
+    let curr = node.getAttribute("data-tooltip")
+    node.setAttribute("data-tooltip", copied)
     if (curr != copied) {
         setTimeout(function() {
-            tooltip.textContent = curr
+            node.setAttribute("data-tooltip", curr)
         }, 1000)
     }
 }