{"id":13564959,"url":"https://github.com/molly/annotate","last_synced_at":"2025-04-09T20:08:27.271Z","repository":{"id":60678735,"uuid":"544626114","full_name":"molly/annotate","owner":"molly","description":"Annotate text and publish it on the web","archived":false,"fork":false,"pushed_at":"2023-01-26T00:37:39.000Z","size":7092,"stargazers_count":304,"open_issues_count":0,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-09T20:08:21.178Z","etag":null,"topics":["annotations","website"],"latest_commit_sha":null,"homepage":"","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/molly.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}},"created_at":"2022-10-02T23:37:56.000Z","updated_at":"2025-03-02T18:20:37.000Z","dependencies_parsed_at":"2023-01-31T20:31:20.818Z","dependency_job_id":null,"html_url":"https://github.com/molly/annotate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molly%2Fannotate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molly%2Fannotate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molly%2Fannotate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molly%2Fannotate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/molly","download_url":"https://codeload.github.com/molly/annotate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103873,"owners_count":21048245,"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":["annotations","website"],"created_at":"2024-08-01T13:01:38.543Z","updated_at":"2025-04-09T20:08:27.249Z","avatar_url":"https://github.com/molly.png","language":"HTML","readme":"# Annotate\n\nAnnotate and publish text on the web! This project was created for [\"The (Edited) Latecomer's Guide to Crypto\"](https://www.mollywhite.net/annotations/latecomers-guide-to-crypto), but can be used to annotate any text document.\n\nView a live demo at https://molly.github.io/annotate/.\n\n![](./screenshots/latecomers-desktop.png)\n\n## How to use\nCopy the `index.html`, `styles.css`, and `annotate.js` files to your project. You should only need to edit the `index.html` file, unless you want to change the styling or JavaScript behavior. This project does not *require* the JavaScript, so if you want to leave it out, just omit the `annotate.js` file and remove the `\u003cscript src=\"./annotate.js\"\u003e\u003c/script\u003e` tag from the HTML file. The `screenshots` folder has full-size screenshots of the index page in both desktop ([`index-desktop.png`](https://github.com/molly/annotate/blob/main/screenshots/index-desktop.png)) and mobile ([`index-mobile.png`](https://github.com/molly/annotate/blob/main/screenshots/index-mobile.png)) views, so you can see what the HTML produces.\n\nEach section of the document follows this basic structure:\n\n```html\n\u003csection class=\"group\"\u003e\n  \u003cdiv class=\"content quote\"\u003e\n    Text that's being \u003cmark data-annotation-id=\"1\" aria-details=\"unique-comment-id\"\u003eannotated\u003c/mark\u003e.\n  \u003c/div\u003e\n  \u003cdiv class=\"content note\"\u003e\n    \u003cdiv class=\"annotation\" role=\"comment\" data-annotation-id=\"1\" id=\"unique-comment-id\"\u003e\n      \u003cdiv class=\"commenter\"\u003eCommenter name\u003c/div\u003e\n      Comment text.\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\nand produces:\n\n![](./screenshots/small-example.png)\n\n## Details\n\nEach section of text is captured in a row with left- and right-hand sections. The `\u003csection class=\"group\"\u003e` element represents this row. Each side then has a div with the `content` class and either the `quote` or `note` classes. `quote` is the text being annotated, `note` is for the annotations.\n\nEach portion of highlighted text in the original source (left-hand side) is marked with `\u003cmark\u003e` tags. These must have a unique `aria-details` attribute that will correspond to the `id` of the annotation, which will enable visual focus highlighting on click. It can also optionally have a `data-annotation-id` to number the annotation, to help distinguish annotations when there are multiple in a section.\n\nCorresponding to the `\u003cmark\u003e` tag will be a div with either the `annotation` or `annotation-group` class on the right-hand side (the former for single annotations, the latter for grouped annotations). These must have `role=\"comment\"` and an `id` that exactly matches the unique `aria-details` value of the highlighted text to which it corresponds. As with the highlighted text, it can have a `data-annotation-id` to number the annotation.\n\n### Grouped annotations\nWithin an annotation group, there will be one or more divs with the `annotation` class. These can contain a div with the class `commenter` to identify the writer, if there are multiple annotators working on the document. These do *not* need `role=\"comment`, `data-annotation-id`, or `id` since they're nested within an `annotation-group` with those attributes.\n\nIn the case of multiple annotations within an annotation group, they can appear directly stacked, or threaded (rendering with increasing levels of indentation, to indicate that they are replies to one another). To thread comments, include the `thread` class on the second comment (the first reply). Any subsequent replies should be marked with the `thread-x` class, where `x` is the level of indentation from 2–10: `thread-2`, `thread-3`, ..., `thread-10`. Omit the `thread` classes to render multiple annotations in a stack without indentation.\n\n```html\n\u003csection class=\"group\"\u003e\n  \u003cdiv class=\"content quote\"\u003e\n    Text that's being \u003cmark data-annotation-id=\"1\" aria-details=\"unique-comment-id\"\u003eannotated\u003c/mark\u003e.\n  \u003c/div\u003e\n  \u003cdiv class=\"content note\"\u003e\n    \u003cdiv class=\"annotation-group\" role=\"comment\" data-annotation-id=\"1\" id=\"unique-comment-id\"\u003e\n      \u003cdiv class=\"annotation\"\u003e\n        A comment with indented responses.\n      \u003c/div\u003e\n      \u003cdiv class=\"annotation thread\"\u003e \n        A reply\n      \u003c/div\u003e\n      \u003cdiv class=\"annotation thread-2\"\u003e \n        A second reply\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n![](./screenshots/small-example-thread.png)\n\n## Other source formats\n\nThe original Latecomer's Guide project was created using [Pug](https://pugjs.org/) and [Sass](https://sass-lang.com). If you'd rather work with those, that source code lives over with my [website source](https://github.com/molly/website-v2):\n* [Pug](https://github.com/molly/website-v2/blob/master/src/pug/pages/annotations/latecomers-guide-to-crypto.pug) file\n* [Sass](https://github.com/molly/website-v2/blob/master/src/sass/reviews.sass) file\n\n## Mobile display\n\nThis is how the annotations display on mobile:\n\n\u003cimg src=\"./screenshots/latecomers-mobile.png\" width=\"400\" /\u003e\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolly%2Fannotate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmolly%2Fannotate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolly%2Fannotate/lists"}