@knight-lab/timelinejs 3.9.8 → 3.9.10

package/.claude/settings.local.json

@@ -0,0 +1,24 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(do mv \"$f\" \"tl-$f\")",
+      "Bash(pyftsubset:*)",
+      "Bash(pip install brotli)",
+      "Bash(python3:*)",
+      "Bash(curl:*)",
+      "Bash(npm run stage:*)",
+      "Bash(npm install:*)",
+      "Bash(npm ls:*)",
+      "Bash(npm run build:*)",
+      "Bash(touch:*)",
+      "Bash(npm run clean:*)",
+      "Bash(md5:*)",
+      "Bash(ls:*)",
+      "Bash(grep:*)",
+      "Bash(wc:*)",
+      "Bash(cat:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/.nvmrc

@@ -1 +1 @@
-v16.13.0
+v23.3.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
+3.9.10 (2026-03-04)
+-------------------------
+* Fix mapping bug introduced with updated icon fonts.
+
+3.9.9 (2026-03-03)
+-------------------------
+* #895 Fixes for pt-BR locale
+* a11y: add empty alt attribute to thumbnail images
+* New embeds for TikTok and Bluesky
+
 3.9.8 (2025-05-23)
 -------------------------
-#894 Fixes previous/next button positioning when a timeline is a child of an element with dir="rtl"
+* #894 Fixes previous/next button positioning when a timeline is a child of an element with dir="rtl"
 
 3.9.7 (2025-03-11)
 -------------------------

package/DEPLOYING.md

@@ -7,8 +7,6 @@ TimelineJS3 has two independent products which can be "deployed". The deployment
 
 To deploy updates to the javascript, you must have a local copy of the [cdn.knightlab.com](https://github.com/NUKnightLab/cdn.knightlab.com) repository checked out on your filesystem, "next to" your TimelineJS3 repository.
 
-To deploy the website, or updates to the Wordpress plugin, you must have local copies of the [fablib](https://github.com/NUKnightLab/fablib) and, for the plugin, [TimelineJS-Wordpress-Plugin](https://github.com/NUKnightLab/TimelineJS-Wordpress-Plugin) repositories checked out on your filesystem, "next to" your TimelineJS3 repository.
-
 "Next to" means that the TimelineJS3 repository and the other repositories should have the same parent directory. Of course, you must also have authorization to write to the appropriate S3 buckets, or, for the Wordpress plugin, to the Wordpress SVN server.
 
 ## Deploying changes to the JavaScript
@@ -17,8 +15,8 @@ Before beginning to deploy, make sure all changes are thoroughly tested. Update
 
 Deploying the JavaScript library uses `npm` scripts defined in `package.json`. To deploy to the Knight Lab CDN, use the following scripts:
 
+* npm run stage_latest (most common)
 * npm run stage
-* npm run stage_latest
 * npm run stage_dev
 
 To stage a new release of TimelineJS, use `npm run stage_latest`. This will ask you for a version number (tag), build the code, and copy it to the appropriate versioned subdirectory of the `cdn.knightlab.com` repository, as well as copying it to the `/latest/` directory.  In the rare case when you want to tag a version, but not change `latest`, use `npm run stage` although then copying that to `/latest/` is outside the scope of these tools. 
@@ -29,19 +27,15 @@ When a new version is deployed to the CDN, it should also be published to the np
 
 ### Updating the Wordpress plugin
 
-The TimelineJS plugin for Wordpress is distributed with a copy of the TimelineJS code. For now, use `fab stage_wp` to copy the relevant contents of `dist` to the Wordpress plugin. It's up to you to make sure the version in `dist` is what you want to copy. More details on deploying that change are in the plugin repository.
+We no longer actively maintain the Wordpress plugin, because recent versions of Wordpress (since the "Gutenberg" redesign) support "Custom HTML" blocks into which TimelineJS embed code can be pasted.
 
 
 ## Deploying changes to the website
 
-To deploy changes to the website which explains TimelineJS3 and hosts the "authoring tool," use the command
+To deploy changes to the website which explains TimelineJS3 and hosts the "authoring tool":
 ```
-fab deploy:prd
+cd website/
+./deploy.sh prd
 ```
 
-This will compile the website templates and push them to the S3 buckets. It is unrelated to the javascript, so can be done independently. Or, contrariwise, if you are intending to change both, be sure to follow both processes.
-
-There is a variant for deploying a version of the site which can be reached on the open internet but which is not yet ready for regular public consumption:
-```
-fab deploy:stg
-```
+This will build the website and copy the files to the timeline.knightlab.com server.

package/DOCUMENTATION.md

@@ -0,0 +1,17 @@
+The TimelineJS website
+----------------------
+The content of the TimelineJS website is generated from the `website` directory in the repository. The website is built using `eleventy`, a static site generator.
+
+To build the website, you need to have `node.js` and `npm` installed. Once you have those, you can run the following commands in the `website` directory:
+```bash
+npm install
+npm run start
+```
+
+This will install the necessary dependencies and start a local development server. You can then view the website at `http://localhost:8080`
+
+When working on the website locally, the server will load the most recently built version of TimelineJS from the `dist` directory. If you've never built TimelineJS before, the authoring tool may not work as expected. If this comes up, run the following command in **the root directory** of the repository:
+```bash
+npm run build
+```
+This will build the TimelineJS library and place the output in the `dist` directory, which the website will then use.

package/ICONS.md

@@ -0,0 +1,167 @@
+# Icon Font Management
+
+TimelineJS uses [IcoMoon](https://icomoon.io/app) to manage its icon font. This document explains how to update the icon font when you've made changes on the IcoMoon website.
+
+Generally, you would begin at icomoon.io by either restoring an old project from local storage or importing `selection.json` (in `src/css/icons`) to get a baseline. You can then add new icons and download the generated font as a ZIP file.
+
+## Overview
+
+**Icon Font Name:** `tl-icons`
+**Icon Class Prefix:** `tl-icon-`
+**Icon Font Files Location:** `src/css/icons/`
+**Icon CSS/LESS Location:** `src/less/icons/Icons.less`
+
+## Updating Icons from IcoMoon Export
+
+When you export a new icon set from IcoMoon, you'll receive a ZIP file containing:
+- `fonts/` directory with font files
+- `style.css` with icon class definitions
+- `selection.json` (your project file - **keep this safe!**)
+- `demo.html` to preview icons
+
+### Step-by-Step Update Process
+
+#### 1. Extract the IcoMoon Download
+
+Extract the downloaded ZIP file to a temporary location (e.g., `~/Downloads/icons-v1.0/`)
+
+#### 2. Rename Font Files
+
+The icomoon export names files `icons.*` but TimelineJS needs them as `tl-icons.*`.
+
+```bash
+cd /path/to/icomoon-download/fonts/
+
+# Rename all font files
+mv icons.eot tl-icons.eot
+mv icons.svg tl-icons.svg
+mv icons.ttf tl-icons.ttf
+mv icons.woff tl-icons.woff
+```
+
+#### 3. Generate WOFF2 (if not included)
+
+IcoMoon may not include WOFF2 format. Generate it from the TTF file:
+
+**Option A: Using online converter**
+- Visit https://cloudconvert.com/ttf-to-woff2
+- Upload `tl-icons.ttf`
+- Download `tl-icons.woff2`
+
+**Option B: Using fonttools (if installed)**
+```bash
+pip install fonttools brotli
+pyftsubset tl-icons.ttf --output-file=tl-icons.woff2 --flavor=woff2
+```
+
+#### 4. Copy Font Files to Project
+
+```bash
+# From the icomoon download fonts directory:
+cp tl-icons.* /path/to/TimelineJS3/src/css/icons/
+
+# Verify files were copied
+ls -lh /path/to/TimelineJS3/src/css/icons/tl-icons.*
+```
+
+You should see all 5 files:
+- `tl-icons.eot` (~27K)
+- `tl-icons.svg` (~76K)
+- `tl-icons.ttf` (~26K)
+- `tl-icons.woff` (~27K)
+- `tl-icons.woff2` (~7K)
+
+#### 5. Update Icons.less
+
+Open `src/less/icons/Icons.less` and add CSS classes for any new icons.
+
+For each new icon in the icomoon `style.css` file, add a corresponding class:
+
+**Example from icomoon style.css:**
+```css
+.icon-tiktok:before {
+  content: "\e908";
+}
+```
+
+**Add to Icons.less (change prefix and use :after):**
+```less
+.tl-icon-tiktok:after {
+	content: "\e908";
+}
+```
+
+**Important differences:**
+- Change `.icon-` prefix to `.tl-icon-`
+- Change `:before` to `:after`
+- Use tabs for indentation (to match existing style)
+
+#### 6. Build and Test
+
+```bash
+npm run build
+```
+
+Test in the browser to verify icons display correctly.
+
+#### 7. Backup Your IcoMoon Project
+
+**IMPORTANT:** Copy `selection.json` from the download to `src/css/icons/selection.json` in this repository. This file is required to import your project back into IcoMoon for future edits.
+
+## Common Tasks
+
+### Adding a Single New Icon
+
+1. Go to https://icomoon.io/app
+2. Click "Import Icons" and upload your `selection.json`
+3. Search for and add the new icon you want
+4. Click "Generate Font" → "Download"
+5. Follow the update process above
+
+### Checking Which Icons Are Available
+
+Open `src/css/icons/icons.html` in a browser to see all available icons with their character codes.
+
+Or check `src/less/icons/Icons.less` for the list of `.tl-icon-*` classes.
+
+### Troubleshooting
+
+**Icons not displaying:**
+- Check that all 5 font files were copied correctly
+- Verify file permissions (should be readable)
+- Check browser console for 404 errors on font files
+- Clear browser cache and rebuild
+
+**Wrong icon appears:**
+- Double-check the unicode value (e.g., `\e908`) matches between icomoon and Icons.less
+- Ensure you changed `:before` to `:after`
+
+**Font files too large:**
+- Consider removing unused icons in IcoMoon to reduce file size
+- WOFF2 is the most compressed format (modern browsers)
+
+## File Locations Reference
+
+```
+TimelineJS3/
+├── src/
+│   ├── css/
+│   │   └── icons/
+│   │       ├── tl-icons.eot      # Font files (5 formats)
+│   │       ├── tl-icons.svg
+│   │       ├── tl-icons.ttf
+│   │       ├── tl-icons.woff
+│   │       ├── tl-icons.woff2
+│   │       └── selection.json                 # IcoMoon project file
+│   │       └── icons.html        # Icon preview (optional)
+│   └── less/
+│       └── icons/
+│           └── Icons.less         # Icon class definitions
+```
+
+## Notes
+
+- The `@font-face` declaration is in `Icons.less` and should not need updating
+- Icons use the `@{icon-path}` variable which resolves to the correct path during build
+- The project uses LESS, not pure CSS, so syntax differences matter
+- All icon classes use `:after` pseudo-elements (not `:before` like standard IcoMoon exports)

package/dist/css/fonts/font.abril-droidsans.css

@@ -25,7 +25,7 @@ https://fonts.google.com/noto/specimen/Noto+Sans
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/abrilfatface/v23/zOL64pLDlL1D99S8g8PtiKchm-A.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/abrilfatface/v25/zOL64pLDlL1D99S8g8PtiKchm-A.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Noto Sans';
@@ -33,7 +33,7 @@ https://fonts.google.com/noto/specimen/Noto+Sans
   font-weight: 400;
   font-stretch: normal;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosans/v39/o-0kIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevHtVtX57DGjDU1QDce6Vc.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosans/v42/o-0kIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevHtVtX57DGjDU1QDce6Vc.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Noto Sans';
@@ -41,7 +41,7 @@ https://fonts.google.com/noto/specimen/Noto+Sans
   font-weight: 400;
   font-stretch: normal;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosans/v42/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.amatic-andika.css

@@ -25,28 +25,28 @@ https://fonts.google.com/specimen/Andika
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/amaticsc/v26/TUZyzwprpvBS1izr_vO0DQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/amaticsc/v28/TUZyzwprpvBS1izr_vO0DQ.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Amatic SC';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/amaticsc/v26/TUZ3zwprpvBS1izr_vOMscG6eQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/amaticsc/v28/TUZ3zwprpvBS1izr_vOMscG6eQ.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Andika';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/andika/v26/mem9Ya6iyW-Lwqgwb7YV.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/andika/v27/mem9Ya6iyW-Lwqgwb7YV.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Andika';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgAbQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/andika/v27/mem_Ya6iyW-LwqgAbQ.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.bevan-pontanosans.css

@@ -25,49 +25,49 @@ https://fonts.google.com/specimen/Pontano+Sans
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/bevan/v24/4iCt6KZ0a9NXjG8YWC4.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/bevan/v26/4iCt6KZ0a9NXjG8YWC4.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Bevan';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/bevan/v24/4iCj6KZ0a9NXjF8a.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/bevan/v26/4iCj6KZ0a9NXjF8a.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/pontanosans/v17/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOSzMncY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/pontanosans/v19/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOSzMncY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/pontanosans/v17/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOXLMncY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/pontanosans/v19/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOXLMncY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/pontanosans/v17/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOUDMncY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/pontanosans/v19/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOUDMncY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/pontanosans/v17/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOazLncY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/pontanosans/v19/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOazLncY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/pontanosans/v17/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOZXLncY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/pontanosans/v19/qFdW35GdgYR8EzR6oBLDHa3wyRf8W8eBM6XLOZXLncY.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */