Anime Timeline

Interactive timelines for manga/anime series with per-title layouts, images, wiki links, and helper tools (calendar view, capture to image, etc.).

Live version: https://zohnannor.github.io/anime-timeline/

Usage

• Select a manga/anime title using the series picker button.
• Scroll horizontally with the mouse wheel, trackpad, touch swipe, or the bottom scroller.
• Open helper tools (calendar, info, capture) with the floating buttons. See the info box for more details.
• Use the capture option to export the entire timeline as a PNG image.

Running the project

Install dependencies

yarn

Generate optimized images

yarn optimize

Start the dev server

yarn dev

The app will be available on http://localhost:3000 by default.

Create a production build

yarn build

The static build will be written to the build directory.

Image optimization

Timeline artwork lives under assets/<title> (for example, assets/csm, assets/berserk, etc.). Optimized WebP and thumbnails are generated by bin/optimize-images.py or the with yarn optimize alias script.

See its --help for more details.

usage: optimize-images.py [-h] [--force] [--all] [--cpu CPU] [--color {auto,always,never}] [--log-level {debug,info,warning,error,critical}] [TITLE]

Optimize manga/anime images

positional arguments:
  TITLE                 Manga/Anime title (e.g. `csm`)

options:
  -h, --help            show this help message and exit
  --force               Force reprocessing of all images (default: false)
  --all                 Process all anime titles (default: false)
  --cpu CPU             Number of parallel processes (default: number of CPUs)
  --color {auto,always,never}
                        Control color output (auto, always, never). This program respects the NO_COLOR environment variable. (default: auto)
  --log-level {debug,info,warning,error,critical}
                        Minimum log level to show. Can also be set with LOG_LEVEL.

The script defaults to LOG_LEVEL=debug. Use LOG_LEVEL=info yarn optimize to hide per-file debug output if it's too noisy for you, or LOG_LEVEL=warning yarn optimize to show only warnings and errors. The same filter can be passed as python -m bin.optimize-images --log-level info csm.

Requirements:

• Python 3
• ImageMagick (magick on PATH)
• cwebp (from libwebp/webp tools)

On Arch Linux, install imagemagick and libwebp-utils packages.

Contributing

• Development

  • Use yarn rather than npm for installing and running scripts (see package.json).
  • To add a timeline for a new title, see how other titles are described in src/timelines/registry.ts. Use one of the existing titles (e.g. src/timelines/csm.ts) as a template or run the bin/new-timeline.py script.
  • For wiki links, use a well-maintained wiki that's recognized by the community as the "official" one. Refer to Wiki Buddy's list of wikis if unsure.
  • If you add or change images in assets/<title>, run yarn optimize (or python -m bin.optimize-images <title>) and commit the resulting optimized images.

• Structure

  • Timelines and data live under src/timelines.
  • UI pieces live under src/modules and src/shared/ui.
  • Shared state/settings live under src/app/providers.
  • Hooks live under src/shared/lib/hooks.

• Changes

  • Keep pull requests focused and describe what/why.
  • Call out any new tools, dependencies, or scripts.
  • Use prettier for formatting (yarn fmt).
  • Use GitHub issue forms (Bug report / Feature request) when opening issues.

License

This project is licensed under the MIT License. See the LICENSE file for details.