Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/curvenote/article
Components for interactive scientific writing, reactive documents and explorable explanations.
https://github.com/curvenote/article
explorable-explanations exploratory-data-visualizations interactive-storytelling interactive-visualizations katex reactive-documents scientific-writing tangle webcomponents writing
Last synced: 9 days ago
JSON representation
Components for interactive scientific writing, reactive documents and explorable explanations.
- Host: GitHub
- URL: https://github.com/curvenote/article
- Owner: curvenote
- License: mit
- Created: 2017-07-09T17:51:06.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T00:21:23.000Z (over 1 year ago)
- Last Synced: 2024-10-15T02:20:19.068Z (25 days ago)
- Topics: explorable-explanations, exploratory-data-visualizations, interactive-storytelling, interactive-visualizations, katex, reactive-documents, scientific-writing, tangle, webcomponents, writing
- Language: TypeScript
- Homepage: https://curvenote.dev
- Size: 3.06 MB
- Stars: 179
- Watchers: 7
- Forks: 11
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-lit - Curvenote - Web components for creating interactive scientific articles. (Component Libraries)
- awesome-web-components - Curvenote - Web components for creating interactive scientific articles. (Real World / Component Libraries)
README
# @curvenote/article
[![curvenote/article on npm](https://img.shields.io/npm/v/@curvenote/article.svg)](https://www.npmjs.com/package/@curvenote/article)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/article/blob/master/LICENSE)
[![Documentation](https://img.shields.io/badge/curvenote.dev-Docs-green)](https://curvenote.dev)The 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.
The [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/)!
This means you can declaratively write your variables and how to display them in `html` markup.
To get an idea of what that looks like, let's take the canonical example of _Tangled Cookies_ - a simple reactive document.![How many calories in that cookie?](images/tangle.gif)
```html
When you eat cookies, you consume
calories.
That's of your recommended daily calories.
```## Getting Started
`@curvenote/article` is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
To get started, copy the built javascript file to the head of your page:```html
```
You 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):
```bash
>> npm install @curvenote/article
```You should then be able to extend the package as you see fit:
```javascript
import components from '@curvenote/article';
```Note 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.
## Documentation
See https://curvenote.dev for full documentation.