{"id":13555834,"url":"https://github.com/kartikprabhu/marginalia","last_synced_at":"2025-07-20T15:33:16.002Z","repository":{"id":148686412,"uuid":"21331326","full_name":"kartikprabhu/marginalia","owner":"kartikprabhu","description":"javascript implementation of annotations using fragmention","archived":false,"fork":false,"pushed_at":"2023-03-14T01:40:35.000Z","size":14,"stargazers_count":30,"open_issues_count":2,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T20:11:06.398Z","etag":null,"topics":["annotation","indieweb","marginalia"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kartikprabhu.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}},"created_at":"2014-06-29T20:10:56.000Z","updated_at":"2024-09-15T20:46:51.000Z","dependencies_parsed_at":"2023-05-28T16:15:25.198Z","dependency_job_id":null,"html_url":"https://github.com/kartikprabhu/marginalia","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kartikprabhu/marginalia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikprabhu%2Fmarginalia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikprabhu%2Fmarginalia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikprabhu%2Fmarginalia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikprabhu%2Fmarginalia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kartikprabhu","download_url":"https://codeload.github.com/kartikprabhu/marginalia/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikprabhu%2Fmarginalia/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266151524,"owners_count":23884436,"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":["annotation","indieweb","marginalia"],"created_at":"2024-08-01T12:03:26.895Z","updated_at":"2025-07-20T15:33:15.984Z","avatar_url":"https://github.com/kartikprabhu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# Marginalia\n\nMarginalia (or annotations) are comments addressed to a particular part of a webpage (or blog post) instead of the entire page. This is a javascript to implement an indieweb-style marginalia system using [fragmention](http://www.kevinmarks.com/fragmentions.html). See example post using this code: [Marginalia](https://www.kartikprabhu.com/article/marginalia)\n\n## Customisation\n\nThe script has a few variables in the beginning that you can set to customise some of the HTML added by marginalia.js. These are:\n\n```CONTAINER_EXTRA_CLASS``` is a space-separated string of classes you want to add to the container of the marginalia. defaults to ```\"\"``` empty string.\n\n```BTN_EXTRA_CLASS``` is a space-separated string of classes you want to add to the button toggling the marginlaia. defaults to ```\"\"``` empty string.\n\n```BTN_HTML_SHOW``` is the HTML inside the button element when marginalia is hidden. defaults to ```\"\u003cspan\u003eShow\u003c/span\u003e\"```.\n\n```BTN_HTML_HIDE``` is the HTML inside the button element when marginalia is visible. defaults to ```\"\u003cspan\u003eHide\u003c/span\u003e\"```.\n\n\n## Usage Example\n\nThe marginalia script uses certain mark-up in the HTML to identify marginalia. The container for all comments should have an ```id=response-list ``` while each marginalia-comment element should have a data attribute containing the fragmention. The next example uses the custom variables ```CONTAINER_EXTRA_CLASS = \"my-container\"``` and ```BTN_EXTRA_CLASS = \"my-button\"```:\n\n```html\n\u003carticle\u003e\n\t\u003cp\u003eOne morning, when Gregor Samsa woke from troubled dreams, he found\nhimself transformed in his bed into a horrible vermin.  He lay on\nhis armour-like back, and if he lifted his head a little he could\nsee his brown belly, slightly domed and divided by arches into stiff\nsections.  The bedding was hardly able to cover it and seemed ready\nto slide off any moment.  His many legs, pitifully thin compared\nwith the size of the rest of him, waved about helplessly as he\nlooked.\u003c/p\u003e\n\n\t\u003cp\u003e\"What's happened to me?\" he thought.  It wasn't a dream.  His room,\na proper human room although a little too small, lay peacefully\nbetween its four familiar walls.  A collection of textile samples\nlay spread out on the table - Samsa was a travelling salesman - and\nabove it there hung a picture that he had recently cut out of an\nillustrated magazine and housed in a nice, gilded frame.  It showed\na lady fitted out with a fur hat and fur boa who sat upright,\nraising a heavy fur muff that covered the whole of her lower arm\ntowards the viewer.\u003c/p\u003e\n\n\t\u003col id=\"response-list\"\u003e\n\t\t\u003cli\u003eThis is a normal comment.\u003c/li\u003e\n\t\t\u003cli data-fragmention=\"##Samsa+woke+from+troubled+dreams\"\u003eThis is a marginalia-comment.\u003c/li\u003e\n\t\u003c/ol\u003e\n\u003c/article\u003e\n```\n\nOn execution, the marginalia.js _moves_ the marginalia-comments _right after_ the appropriate element inside a container of the same tag name (in this case ```ol```) with ``` class=\"marginalia-list\" ```\n\n```html\n\u003col class=\"marginalia-list my-container\"\u003e\n\t\u003cli data-fragmention=\"##Samsa+woke+from+troubled+dreams\"\u003eThis is a marginalia-comment.\u003c/li\u003e\n\u003c/ol\u003e\n```\n\nIt also adds a button to toggle marginalia visibility _inside_ the referenced element. The button is marked up as:\n\n```html\n\u003cbutton class=\"marginalia-button my-button\"\u003e\u003cspan\u003eShow\u003c/span\u003e\u003c/button\u003e\n```\nwhen the marginalia is hidden and with text \"Hide\" when marginalia are visible. So the relevant paragraph looks like this:\n\n```html\n\t\u003cp\u003eOne morning, when Gregor Samsa woke from troubled dreams, he found\nhimself transformed in his bed into a horrible vermin.  He lay on\nhis armour-like back, and if he lifted his head a little he could\nsee his brown belly, slightly domed and divided by arches into stiff\nsections.  The bedding was hardly able to cover it and seemed ready\nto slide off any moment.  His many legs, pitifully thin compared\nwith the size of the rest of him, waved about helplessly as he\nlooked.\u003cbutton class=\"marginalia-button my-button\"\u003e\u003cspan\u003eShow\u003c/span\u003e\u003c/button\u003e\u003c/p\u003e\n\u003col class=\"marginalia-list my-container\"\u003e\n\t\u003cli data-fragmention=\"##Samsa+woke+from+troubled+dreams\"\u003eThis is a marginalia-comment.\u003c/li\u003e\n\u003c/ol\u003e\n```\n\nOn click the button adds an attribute ``` data-marginalia-active ``` to the parent element like so ```\u003cp data-marginalia-active=\"\"\u003eOne morning, when Gregor Samsa...\u003c/p\u003e```\n\nAll styling can be done using these classes as CSS hooks.\n\n\n\n\n## Go forth\n\nNow [use this yourself](https://github.com/kartikprabhu/marginalia) and [give feedback](https://github.com/kartikprabhu/marginalia/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikprabhu%2Fmarginalia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkartikprabhu%2Fmarginalia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikprabhu%2Fmarginalia/lists"}