{"id":13760583,"url":"https://github.com/curvenote/article","last_synced_at":"2025-04-07T12:06:25.331Z","repository":{"id":39088932,"uuid":"96701162","full_name":"curvenote/article","owner":"curvenote","description":"Components for interactive scientific writing, reactive documents and explorable explanations.","archived":false,"fork":false,"pushed_at":"2023-03-05T00:21:23.000Z","size":3210,"stargazers_count":181,"open_issues_count":19,"forks_count":11,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-31T11:01:47.252Z","etag":null,"topics":["explorable-explanations","exploratory-data-visualizations","interactive-storytelling","interactive-visualizations","katex","reactive-documents","scientific-writing","tangle","webcomponents","writing"],"latest_commit_sha":null,"homepage":"https://curvenote.dev","language":"TypeScript","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/curvenote.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}},"created_at":"2017-07-09T17:51:06.000Z","updated_at":"2025-02-02T18:34:13.000Z","dependencies_parsed_at":"2023-07-17T16:19:57.664Z","dependency_job_id":null,"html_url":"https://github.com/curvenote/article","commit_stats":{"total_commits":223,"total_committers":4,"mean_commits":55.75,"dds":0.06278026905829592,"last_synced_commit":"d9f25449ba96d38ff76e43043ebd63e995932366"},"previous_names":["ink-components/ink-components","iooxa/article"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Farticle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Farticle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Farticle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Farticle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curvenote","download_url":"https://codeload.github.com/curvenote/article/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"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":["explorable-explanations","exploratory-data-visualizations","interactive-storytelling","interactive-visualizations","katex","reactive-documents","scientific-writing","tangle","webcomponents","writing"],"created_at":"2024-08-03T13:01:13.408Z","updated_at":"2025-04-07T12:06:25.311Z","avatar_url":"https://github.com/curvenote.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Misc","Real World","Component Libraries"],"sub_categories":["Other","Component Libraries"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://curvenote.dev\"\u003e\u003cimg src=\"https://curvenote.dev/images/logo.png\" alt=\"curvenote.dev\" width=\"150\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# @curvenote/article\n\n[![curvenote/article on npm](https://img.shields.io/npm/v/@curvenote/article.svg)](https://www.npmjs.com/package/@curvenote/article)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/article/blob/master/LICENSE)\n[![Documentation](https://img.shields.io/badge/curvenote.dev-Docs-green)](https://curvenote.dev)\n\nThe goal of `@curvenote/article` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). `@curvenote/article` provides reactive components, equations, and charts as well as layouts for creating interactive scientific articles.\n\nThe [curvenote/article](https://curvenote.dev/article) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!\nThis means you can declaratively write your variables and how to display them in `html` markup.\nTo get an idea of what that looks like, let's take the canonical example of _Tangled Cookies_ - a simple reactive document.\n\n![How many calories in that cookie?](images/tangle.gif)\n\n```html\n\u003cr-var name=\"cookies\" value=\"3\" format=\".4\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"caloriesPerCookie\" value=\"50\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"dailyCalories\" value=\"2100\"\u003e\u003c/r-var\u003e\n\n\u003cr-var name=\"calories\" :value=\"cookies * caloriesPerCookie\" format=\".0f\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"dailyPercent\" :value=\"calories / dailyCalories\" format=\".0%\"\u003e\u003c/r-var\u003e\n\n\u003cp\u003e\n  When you eat \u003cr-dynamic bind=\"cookies\" min=\"2\" max=\"100\"\u003ecookies\u003c/r-dynamic\u003e, you consume\n  \u003cr-display bind=\"calories\"\u003e\u003c/r-display\u003e calories.\u003cbr /\u003e\n  That's \u003cr-display bind=\"dailyPercent\"\u003e\u003c/r-display\u003e of your recommended daily calories.\n\u003c/p\u003e\n```\n\n## Getting Started\n\n`@curvenote/article` is based on web-components, which creates custom HTML tags so that they can make writing documents easier.\nTo get started, copy the built javascript file to the head of your page:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@curvenote/article/dist/curvenote.css\" /\u003e\n\u003cscript async src=\"https://unpkg.com/@curvenote/article\"\u003e\u003c/script\u003e\n```\n\nYou can also download the [latest release](https://github.com/curvenote/article/releases) from GitHub. If you are running this without a web server, ensure the script has `charset=\"utf-8\"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@curvenote/article):\n\n```bash\n\u003e\u003e npm install @curvenote/article\n```\n\nYou should then be able to extend the package as you see fit:\n\n```javascript\nimport components from '@curvenote/article';\n```\n\nNote that the npm module does not setup the [@curvenote/runtime](https://github.com/curvenote/runtime) store, nor does it register the components. See the [curvenote.ts](/curvenote.ts) file for what the built package does to `setup` the store and `register` the components.\n\n## Documentation\n\nSee https://curvenote.dev for full documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurvenote%2Farticle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcurvenote%2Farticle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurvenote%2Farticle/lists"}