curvenote / article

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

curvenote

Create, edit, share and publish scientific documents.

Overview

curvenote is an open source library and command line interface (CLI) to create share and publish technical documents.

• Write papers and reports in Markdown and Jupyter (docs)
• Create and share interactive websites (docs)
• Export to Word, LaTeX, and PDF with any template (docs)

In addition to being completely local, curvenote can optionally sync content to https://curvenote.com to allow you to work with collaborators who enjoy WYSIWYG editing, commenting & real time collaboration for technical documents.

Get Started

Curvenote is available through Node and NPM. Unless you already have this on your system you will have to install NodeJS. See full install instructions in the docs!

npm install -g curvenote
curvenote init
curvenote start
curvenote deploy

Built with Curvenote

Curvenote allows you to easily create, edit, and publish content to the web as a fast, optimized site with interactive citations, cross-referencing, math, and dynamic figures from Jupyter Notebooks.

Curvenote can be used to create all sorts of open-access content, click the links below to see some examples!

• Courses & books
• Seminar & conference websites
• Blogs & technical websites
• Papers & reports
• Documentation
• Sharing Jupyter Notebooks

Interactive and Linked

The default website you create can have interactive Jupyter Notebook features, and live-preview of cross-references and citations.

PhD Thesis with linked references, equations, and export to PDF.

Interactive Papers with Jupyter Notebooks and interactive visualizations.

These interactive scientific sites can be easily deployed on a hosting service called curve.space or can also be hosted on your own custom domain.

Work locally with Live Reload

The client library is entirely local, and rebuilds in ~50ms for most projects. Meaning you can preview your content as you are writing!

Direct export from Curvenote

First login, see authorization docs to get an API token.

curvenote token set
> YOUR_API_TOKEN

Then you can directly export your curvenote documents to:

• Microsoft Word (.docx)
• Markdown (.md) - using MyST
• LaTeX (.tex)
• PDF (.pdf)

curvenote export docx https://curvenote.com/@curvenote/blog/communicating-science communicating-science.docx
curvenote export md https://curvenote.com/@curvenote/blog/version-control-for-scientists version-control.md
curvenote export tex https://curvenote.com/@curvenote/blog/version-control-for-scientists version-control.tex -template plain_latex
curvenote export pdf https://curvenote.com/@curvenote/blog/version-control-for-scientists version-control.pdf -template arxiv_nips

LaTeX and PDF Dependencies

Exporting to:

• LaTeX (latex|tex) with a template option specified
• or to PDF

Requires the jtex python package to be installed and available on the user's PATH.

With python 3.7 or greater installed, install jtex via pip:

python -m pip install jtex

Development

All dependencies for curvenote are included in this repository (a monorepo!).

What's inside?

curvenote uses npm as a package manager. It includes the following packages/apps:

Apps:

• curvenote: the Curvenote command line interface (CLI)
• curvespace: the web-experience for Curvenote sites, using Remix

Packages:

• ui-providers: React providers for references and site configuration
• myst-to-react: expose MyST content as an article, built with React
• site: components and utilities for building React and Remix sites
• icons: icons used throughout our projects, built for React
• citation-js-utils: utilities for using the citation-js library
• eslint-config-custom: eslint configurations
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package and app is 100% TypeScript.

Versioning & Publishing

Curvenote uses changesets to document changes to this monorepo, call npx changeset and follow the prompts. Later, npm run version will be called and then npm run publish.

Utilities

curvenote is built and developed using:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Build

To build all apps and packages, run the following command:

cd curvenote
npm run build

Develop

To develop all apps and packages, run the following command:

cd curvenote
npm run dev

article's Issues

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?

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. :)

Better resizing of ink-cards

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

Better author byline

New Component: Dropdown Selector

Mentioned recently by @lrq3000 and @bsmithyman.

Print Preview

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

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 ;)

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

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?

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!

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 },

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

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

Polymer docs inheritance

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

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

}

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.

Ink cards should resize

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>