{"id":21819586,"url":"https://github.com/anoduck/mod-timelinejs","last_synced_at":"2026-04-18T02:05:53.325Z","repository":{"id":262605830,"uuid":"886514621","full_name":"anoduck/mod-timelinejs","owner":"anoduck","description":"Hinode module for adding a more dynamic and robust timeline with KnightLab's TimelineJS3","archived":false,"fork":false,"pushed_at":"2025-03-20T06:01:22.000Z","size":2476,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T06:31:53.607Z","etag":null,"topics":["hinode","hinode-mod","hugo","module","timeline","timelinejs"],"latest_commit_sha":null,"homepage":"https://testhinode.netlify.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anoduck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-11T05:37:47.000Z","updated_at":"2025-03-20T06:01:27.000Z","dependencies_parsed_at":"2024-12-13T22:21:08.746Z","dependency_job_id":"6b950267-f38b-4295-a982-1fbbd26da03e","html_url":"https://github.com/anoduck/mod-timelinejs","commit_stats":null,"previous_names":["anoduck/mod-timelinejs3","anoduck/mod-timelinejs"],"tags_count":73,"template":false,"template_full_name":"gethinode/mod-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoduck%2Fmod-timelinejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoduck%2Fmod-timelinejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoduck%2Fmod-timelinejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoduck%2Fmod-timelinejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anoduck","download_url":"https://codeload.github.com/anoduck/mod-timelinejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244780251,"owners_count":20509321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hinode","hinode-mod","hugo","module","timeline","timelinejs"],"created_at":"2024-11-27T16:20:12.920Z","updated_at":"2026-04-18T02:05:48.282Z","avatar_url":"https://github.com/anoduck.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hinode Module - Timelinejs3\n\n\u003c!-- Tagline --\u003e\n\u003cp align=\"center\"\u003e\n    \u003cb\u003eHinode module for adding a more dynamic and robust timeline with KnightLab's TimelineJS3\u003c/b\u003e\n    \u003cbr /\u003e\n\u003c/p\u003e\n\n\u003c!-- Badges --\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://gohugo.io\" alt=\"Hugo website\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/generator-hugo-brightgreen\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://gethinode.com\" alt=\"Hinode theme\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/theme-hinode-blue\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/anoduck/mod-timelinejs/commits/main\" alt=\"Last commit\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/last-commit/anoduck/mod-timelinejs.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/anoduck/mod-timelinejs/issues\" alt=\"Issues\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/issues/anoduck/mod-timelinejs.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/anoduck/mod-timelinejs/pulls\" alt=\"Pulls\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/issues-pr-raw/anoduck/mod-timelinejs.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/anoduck/mod-timelinejs/blob/main/LICENSE\" alt=\"License\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/license/anoduck/mod-timelinejs\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\n![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)\n\n---\n\nHinode is a clean blog theme for [Hugo][hugo], an open-source static site generator. Hinode is available as a\n[template][repository_template], and a [main theme][repository]. This repository maintains a Hugo module  to add\n[Knight-Lab's timelinejs](https://github.com/NUKnightLab/TimelineJS3) features to a Hinode site. Visit the Hinode\ndocumentation site for [installation instructions][hinode_docs].\n\n## Setup and Usage\n\nBelow is a brief synopsis of how to install, configure, and use the module.\n\n### Dependencies\n\nYou will need to add the module to the Hugo configuration file in your configuration directory\n`config/_default/hugo.toml`. \n\n```toml\n[[module.imports]]\n    path = \"github.com/anoduck/mod-timelinejs\"\n```\n\nThen you will need to install the [TimelineJS package](https://www.npmjs.com/package/@knight-lab/timelinejs) for Node.js\nas a development dependency. This is because the library needs to be present as part of the build process, and not only\nfor the runtime.\n\n```bash\nnpm i --save-dev @knight-lab/timelinejs\n```\n\nOnce this is done, you should be ready to configure the module for use.\n\n### Configuration\n\nThis module has relatively no required configuration except what needs to be done for proper usage. \n\n#### Enable Debugging\n\nThe exception to the above statement would be if the user desires or needs to enable debugging. At which point, an\nadditional configuration parameter will be required in the site parameter file located in the configuration directory\n`config/_default/params.toml`. \n\n```toml\n[params.modules.timelinejs]\n  debug = true\n```\n\nBy default, this variable is set to false. This will generate copious amounts of output.\n\n### Generating Your TimelineJS Data Source\n\nTimelineJS accepts timeline data from two different source types.\n\n1. A Google Sheets Spreadsheet\n2. A Formatted JSON File\n\nThis module was created with the specific intent to allow the user to choose between either of these two source types.\nEither of these two source types can be used, the shortcode will remain the same.\n\n#### Google Sheets Spreadsheet\n\nOf the two options available, by far, using a Google Sheets Spreadsheet is the easiest to work with. To get started\nsimply use [Knight-Lab's own Template\nFile](https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy). Once you are ready to\nuse the spreadsheet in your site strictly follow step 2 in Knight-Labs instructions for [making a\ntimeline](https://timeline.knightlab.com/#make).\n\n\u003e[!WARNING]\n\u003e Do not proceed past step #2, because we follow a different convention than the remainder of the instructions.\n\nBelow is an example of a Google Sheets Spreadsheet public URL. Unfortunately, the exact path to each spreadsheet\nvariates slightly, but it is still easy to identify a proper URL. The important thing to take notice of is the ending\npath of `pubhtml`, which means the URL references a spreadsheet that is shared publicly.\n\nYou will use the entire URL in the shortcode for your timeline element.\n\n```text\nhttps://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml\n```\n\n#### JSON File\n\nIf it is preferred to use a JSON file, you will need to place it in the `static` dir, because it will not be parsed by\nHugo, but rather by the TimelineJS Javascript. As with most JSON files, the format must be strictly followed.\nInformation on the paticularities of the JSON format can be found on on [Knight-Lab's\nwebiste](https://timeline.knightlab.com/docs/json-format.html).\n\nTo make creation and modification of the JSON file easier, effort was invested to create [a primitive JSON\nschema](https://anoduck.github.io/) to aid in validation and completion. To use it, simply add the schema keyword\nfollowed by the URL of the schema to the top of the JSON file after the first bracket. \n\n\u003e[!NOTE]\n\u003e The Schema has passed validation, but had not been thoroughly tested yet.\n\n```json\n{\n    \"$schema\": \"https://anoduck.github.io/timelinejs-json-schema/timelinejs.schema.json\",\n    \"title\": {\n    \"media\": {\n        \"url\": \"http://www.germuska.com/salzburg-album/full/2QVB_022.jpg\",\n        \"caption\": \"The secret passage at Schloss Leopoldskron, Salzburg, Austria\",\n        \"credit\": \"Joe Germuska\"\n    }\n}\n```\n\n### Usage\n\nWith all of the above out of the way, you should be ready to use the module. Which is very beneficial, as your's truly is\nrunning out of steam.\n\n#### Frontmatter\n\nFor usage, it is necessary to designate the module in the frontmatter of the page you desire to render the timeline on.\nThis will allow it to load properly for the page.\n\n```markdown\ntitle: Test page\ndescription: Page to test TimelineJS module.\ndate: 2023-07-10\nmodules: timelinejs\n---\n```\n\n#### Shortcodes\n\nThe shortcode itself takes two arguments; `blockID` and `tlData`. \n\nThe explanation for the existence of the `blockID` argument iss due to the original intent was to allow the use to have\nmore than one timeline element on the page if so desired, but in the latter portion of the development process it became\napparent this would make proper development unnecessarily difficult. So, this parameter should be used, but is not\nnecessarily a requirement, and if left off the shortcode, should not cause an error.\n\nThe `tlData` argument is rather self explanatory, as it defines the source of the data to be used in the generation of\nthe timeline element. As previously stated this can be either a Google Sheet Spreadsheet or a JSON file.\n\n| Shortcode Argument        | Default            | Description                                         |\n|---------------------------|--------------------|-----------------------------------------------------|\n| blockId                   | \"timeline-content\" | The \"id\" attribute assigned to the timeline.        |\n| tlData                    | \"timelinejs.json\"  | The JSON file or Google Sheet containing event data |\n\nThe shortcode can be used with the following labeled arguments, or without them as positional arguments. (...I think.)\n\n```html\n{{\u003c timelinejs blockId=\"timeline-element\" tlData=\"/timelinejs.json\" \u003e}}\n\u003c!-- or --\u003e\n{{\u003c timelinejs \"timeline-element\" \"/timelinejs.json\" \u003e}}\n```\n\n##### Google Sheets Spreadsheet Example\n\nUsing the shortcode in this manner is fairly straight forward. Just use the public URL of the spreadsheet in the\n`tlData` argument.\n\n```markdown\n\n{{\u003c timelinejs blockId=\"timeline-id\" tlData=\"https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml\" \u003e}}\n\n```\n\n##### JSON File Example\n\nBelow is an example of using the shortcode with a JSON file. Due to JSON files not considered to be a \"content\" resource,\nit will be necessary to precede the name of the JSON file with the web path to the file. So, something like `./` or\n`../../` should work.\n\n```markdown\n\n{{\u003c timelinejs blockId=\"timeline-id\" tlData=\"./timelinejs.json\" \u003e}}\n\n```\n\n## Issues\n\nIf you have any issues with use of the modules, please open up an issue, and I will attempt to respond as soon as possible.\n\n## Contributing\n\nThis module uses [semantic-release][semantic-release] to automate the release of new versions. The package uses `husky`\nand `commitlint` to ensure commit messages adhere to the [Conventional Commits] [conventionalcommits] specification. You\ncan run `npx git-cz` from the terminal to help prepare the commit message.\n\n---\n\n\u003c!-- MARKDOWN LINKS --\u003e\n[hugo]: https://gohugo.io\n[hinode_docs]: https://gethinode.com\n[Timelinejs3_Github]: https://github.com/NUKnightLab/TimelineJS3\n[Timelinejs Site]: https://timeline.knightlab.com\n[Timelinejs Docs]: https://timeline.knightlab.com/docs/instantiate-a-timeline.html\n[This Module]: https://github.com/anoduck/mod-timleinejs3\n[SRI Hash]: https://www.srihash.org/\n[Google_CSP_Evaluator]: https://csp-evaluator.withgoogle.com/\n[repository]: https://github.com/gethinode/hinode.git\n[repository_template]: https://github.com/gethinode/template.git\n[conventionalcommits]: https://www.conventionalcommits.org\n[husky]: https://typicode.github.io/husky/\n[semantic-release]: https://semantic-release.gitbook.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanoduck%2Fmod-timelinejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanoduck%2Fmod-timelinejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanoduck%2Fmod-timelinejs/lists"}