curvenote/article

Components for interactive scientific writing, reactive documents and explorable explanations.

@curvenote/article

The goal of @curvenote/article is to provide web-components for interactive scientific writing, reactive documents and explorable explanations. @curvenote/article provides reactive components, equations, and charts as well as layouts for creating interactive scientific articles.

The curvenote/article project is heavily inspired by tangle.js, re-imagined to use web-components! 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.

<r-var name="cookies" value="3" format=".4"></r-var>
<r-var name="caloriesPerCookie" value="50"></r-var>
<r-var name="dailyCalories" value="2100"></r-var>

<r-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></r-var>
<r-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></r-var>

<p>
  When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>, you consume
  <r-display bind="calories"></r-display> calories.<br />
  That's <r-display bind="dailyPercent"></r-display> of your recommended daily calories.
</p>

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:

<link rel="stylesheet" href="https://unpkg.com/@curvenote/article/dist/curvenote.css" />
<script async src="https://unpkg.com/@curvenote/article"></script>

You can also download the latest release 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:

>> npm install @curvenote/article

You should then be able to extend the package as you see fit:

import components from '@curvenote/article';

Note that the npm module does not setup the @curvenote/runtime store, nor does it register the components. See the 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.

article's Issues

Polymer docs inheritance

Silly work around:
https://github.com/Polymer/polymer-analyzer/issues/717#issuecomment-341096900

MyClass extends (class extends Polymer.Element {}){

}

Controlling interactive ink-elements with a function

Hi there,

this is really an impressive library! I have already tried a lot with it and wonder whether it is also possible to change the value of the ink-var with a javascript function. By that I mean, if for example you can control the slider (ink-range) from the outside with a function call instead of the mouse.

Regards,
Jaro

Ink cards should resize

r-code example/docs should include attributes

on iooxa.dev the r-code example does not show the attributes that can be used including language, when the following are possible:

  language: { type: String },
  copy: { type: Boolean },
  compact: { type: Boolean },

Drawing vectors with arrow-heads.

Hi. This is really neat! I thought I'd try re-doing in @iooxa/article an RLC circuit simulator that I once wrote in Java.
Here's an image of the UI I had:
.
I've been able to set up the sliders, the displayed variables and the graphs.
My question is, how do we draw vectors, i.e. lines with arrows on the ends?
Thanks. (I tried defining defs and marker but couldn't get it to work.)

PS- While we're at it: Logarithmic axes for graphs?

move math rendering in body to ink-article

Calling a user defined javascript function?

Is it possible to make an ink-component such as ink-range callback a user-defined javascript function?

I tried to do something like this but this doesn't work:

<ink-range :value="x" bind="{x: value, display_alert()}"></ink-range>

Can not load iooxa.min.js

Hello,
I'm very curious about iooxa. I was going to replace ink-components with it today, but I got a bug. Here is the basic index.html

I keep getting the error

I have also already downloaded iooxa.min.js locally but still get the error.

It would be great if you could help me out, thanks!

Many Greetings,
J2thearo

Table of contents in safari is not looking good. :(

Redesign for 1.0

Initial Braindump for re-architecture for ink-components 1.0

• Minimal (if any) syntax changes for HTML elements
• Move to typescript
• Move to a more pluggable redux system that includes allowing it to be used in a larger application
  • This also means that cross-variable scope access should be relatively easy
• Remove the IFrame creation by default and move to centralized redux
  • This means that by default execution of variables should happen in the same window, which is fine in most developed applications where the source is trusted
  • This is not ok with user-generated content, however, the pluggable redux system should be able to handle the abstraction in those cases
  • Provide the execution library for the functions, this could be replaced in the future.
• Remove as many opinionated styles as possible and move to JSS and/or the lit element style updates
  • Regardless these should be pluggable
• Remove boilerplate from the property creation if possible. Maybe through wrappers or post-processing the class?
  • Right now there is a ton of redundancy that is just setting up class properties, this could be done after the class is created? Object.defineProperties or similar?
  • Another goal of this is to express the properties as data so they can be used in other places
• This will likely mean breaking up into a few different libraries that could be used independently (CV, Chart, etc.) which is hopefully more maintainable. Have a single repo of these packages.

New Component: Dropdown Selector

Mentioned recently by @lrq3000 and @bsmithyman.

Comparing iooxa.dev and Idyll

I wrote a rather lengthy document to try and justify this project to myself, as I started it before knowing about both Idyll and Svelte. Both of these seem to serve a similar purpose. Ink uses web-components rather than compile time magic or language parsing.

I would be very curious to hear from @mathisonian on my mini-review/comparison of Idyll and Ink:

https://row1.ca/ink-2019

At the end of the document there are a number of features/comparisons that could be useful thinking for improving Idyll. Looking forward to opening the conversation. :)

What's the relationship between this and ink components?

Just trying to get a feel for how the tools relate to one another. I saw that components.ink now redirects to iooxa...is ink.components now entirely a part of iooxa? Is there a plan to have an organization-independent package, or is it all going to be branded ioxxa?

Better author byline

Better resizing of ink-cards

Needs to be reactive when compressed. This will help on mobile views.

Print Preview

This should probably be done by an media css for the print options.

How to use runtime state?

Hi @rowanc1,

I have recently been working with iooxa again in more detail and have come across a few questions.
Most of all it is about the access to components. In your answer to #10 you finally mentioned two ways to manipulate component values:

The second option was the most suitable and intuitive for me in this case. I also tried to understand the first option, but was not even able to access the iooxa variable. You mentioned in the last release that iooxa is available in the window. Which modules do I have to import for this? And can you please explain what the command

const v = iooxa.createVariable('scope.name', 3);

does exactly? I thought at first that I would specify the variable from the html document in the argument of this function but that doesn't seem to be the case. But I do not create a new html element with it either. How does this help me when I try to manipulate the value of an iooxa html component?

Thanks a lot!

Download as latex has (non-critical) compile errors

I downloaded a very simple Article (contains a single block of text, no images, no interactive, or anything fancy), see v1.AelWbQuHSmO3VWhgAZk2Gk6XWQ52.latex.zip

Then on compiling on Mac with pdfTeX 3.14159265-2.6-1.40.19 (TeX Live 2018), I saw the following errors:

pressing ENTER through them and the document compiled in the end, but most people might freak out about these errors and not know how to continue, so I'd recommend fixing them (and testing with MikTeX which is the commonly used TeX distribution by windowls people).

pro-tip: if you want to ignore all non-critical errors and make LaTeX very tolerant, you can add this to the document preamble and it will do it's best to compile the document even if it encounters errors:

\scrollmode
\nonstopmode

(generally not good move, since you will not get warnings/errors right away when you add errors, but good hack to avoid people filing issues ;)