🔄 Rebrand to curvenote

README.md

@@ -1,14 +1,14 @@
-<p align="center"><a href="https://iooxa.dev"><img src="https://iooxa.dev/images/logo.png" alt="iooxa.dev" width="150"></a></p>
+<p align="center"><a href="https://curvenote.dev"><img src="https://curvenote.dev/images/logo.png" alt="curvenote.dev" width="150"></a></p>
 
-# @iooxa/article
+# @curvenote/article
 
-[![iooxa/article on npm](https://img.shields.io/npm/v/@iooxa/article.svg)](https://www.npmjs.com/package/@iooxa/article)
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/article/blob/master/LICENSE)
-[![Documentation](https://img.shields.io/badge/iooxa.dev-Docs-green)](https://iooxa.dev)
+[![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 `@iooxa/article` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). `@iooxa/article` provides reactive components, equations, and charts as well as layouts for creating interactive scientific articles.
+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 [iooxa/article](https://iooxa.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/)!
+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.
 
@@ -31,28 +31,28 @@ To get an idea of what that looks like, let's take the canonical example of *Tan
 
 ## Getting Started
 
-`@iooxa/article` is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
+`@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
-<link rel="stylesheet" href="https://unpkg.com/@iooxa/article/dist/iooxa.css">
-<script async src="https://unpkg.com/@iooxa/article"></script>
+<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](https://github.com/iooxa/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/@iooxa/article):
+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 @iooxa/article
+>> npm install @curvenote/article
 ```
 
 You should then be able to extend the package as you see fit:
 
 ```javascript
-import components from '@iooxa/article';
+import components from '@curvenote/article';
 ```
 
-Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [iooxa.ts](/iooxa.ts) file for what the built package does to `setup` the store and `register` the components.
+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://iooxa.dev for full documentation.
+See https://curvenote.dev for full documentation.

iooxa.ts → curvenote.ts

@@ -1,20 +1,20 @@
 import { applyMiddleware, createStore, combineReducers } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import runtime, { types, actions, selectors } from '@iooxa/runtime';
-import { register as basicRegister } from '@iooxa/components';
-import { register as svgRegister } from '@iooxa/svg';
+import runtime, { types, actions, selectors } from '@curvenote/runtime';
+import { register as basicRegister } from '@curvenote/components';
+import { register as svgRegister } from '@curvenote/svg';
 import * as components from './src/components';
 import setupArticle from './src/components/article';
 
-interface Iooxa {
+interface Curvenote {
   store: types.Store;
   getVariableByName: (name: string) => types.VariableShortcut | null;
   createVariable: (...args: Parameters<typeof actions.createVariable>) => types.VariableShortcut;
 }
 
 declare global {
   interface Window {
-    iooxa: Iooxa;
+    curvenote: Curvenote;
   }
 }
 
@@ -33,14 +33,14 @@ function getVariableByName(name: string) {
   return actions.variableShortcut(store.dispatch, store.getState, variable.id);
 }
 
-window.iooxa = {
-  ...window.iooxa,
+window.curvenote = {
+  ...window.curvenote,
   store,
   getVariableByName,
   createVariable: (...args) => store.dispatch(actions.createVariable(...args)),
-} as Iooxa;
+} as Curvenote;
 
-basicRegister(window.iooxa.store);
-svgRegister(window.iooxa.store);
-components.register(window.iooxa.store);
+basicRegister(window.curvenote.store);
+svgRegister(window.curvenote.store);
+components.register(window.curvenote.store);
 setupArticle();

index.html

@@ -6,13 +6,13 @@
 </head>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif:400,400i,700,700i&display=swap" type="text/css" />
-<link rel="stylesheet" href="iooxa.css" type="text/css">
+<link rel="stylesheet" href="curvenote.css" type="text/css">
 <link rel="stylesheet" href="theme.css" type="text/css">
 <body>
 <nav class="popout centered">
   <div>Documentation</div>
   <ul>
-    <li><a href="/">iooxa.dev</a></li>
+    <li><a href="/">curvenote.dev</a></li>
     <li><a href="/introduction">Introduction</a></li>
     <li><a href="/article">Article</a></li>
     <li class="section">
@@ -29,7 +29,7 @@
 </nav>
 
 <article id="myArticle" class="centered">
-    <h1 id="welcome">Welcome to @iooxa/article</h1>
+    <h1 id="welcome">Welcome to @curvenote/article</h1>
     <r-outline class="popout" for="myArticle"></r-outline>
     <p>This is a paragraph, kinda simple. <code>code</code></p>
     <aside class="callout">Hello world</aside>

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@iooxa/article",
+  "name": "@curvenote/article",
   "version": "0.2.8",
   "description": "Scientific web components for interactive scientific writing, reactive documents and explorable explanations.",
   "main": "dist/index.js",
-  "unpkg": "dist/iooxa.min.js",
+  "unpkg": "dist/curvenote.min.js",
   "types": "dist/index.d.ts",
   "keywords": [
     "explorable explanations",
@@ -15,6 +15,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/curvenote/article.git"
+  },
+  "bugs": {
+    "url": "https://github.com/curvenote/article/issues"
+  },
+  "homepage": "https://curvenote.dev/article",
   "files": [
     "dist"
   ],
@@ -23,71 +31,63 @@
     "lint": "eslint \"src/**/*.ts\" -c .eslintrc.json",
     "start": "yarn run build-css; webpack serve  --config webpack.dev.js",
     "clean": "rm -rf dist || true; rm -f styles/index.css*;",
-    "link": "yarn unlink; yarn link; yarn link @iooxa/runtime;yarn link @iooxa/components;yarn link @iooxa/svg",
+    "link": "yarn unlink; yarn link; yarn link @curvenote/runtime;yarn link @curvenote/components;yarn link @curvenote/svg",
     "size": "yarn run build && size-limit",
     "size-why": "webpack-bundle-analyzer stats.json -p 8005",
-    "copy-css": "mkdir -p dist; cp theme.css dist/theme.css; cp node_modules/@iooxa/components/dist/iooxa.css styles/_components.scss;",
-    "watch-css": "yarn run copy-css; sass --watch styles/index.scss dist/iooxa.css",
-    "build-css": "yarn run copy-css; sass styles/index.scss dist/iooxa.css;",
+    "copy-css": "mkdir -p dist; cp theme.css dist/theme.css; cp node_modules/@curvenote/components/dist/curvenote.css styles/_components.scss;",
+    "watch-css": "yarn run copy-css; sass --watch styles/index.scss dist/curvenote.css",
+    "build-css": "yarn run copy-css; sass styles/index.scss dist/curvenote.css;",
     "build-dev": "webpack --config webpack.dev.js",
     "build": "yarn run build-css; webpack --config webpack.prod.js --profile --json > stats.json; tsc; rm -rf dist/src",
     "prepublishOnly": "yarn run clean; yarn run build;"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/iooxa/article.git"
-  },
   "devDependencies": {
-    "@size-limit/preset-app": "^4.9.1",
+    "@size-limit/preset-app": "^4.9.2",
     "@types/highlight.js": "^10.1.0",
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.20",
     "@types/katex": "^0.11.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.1",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
+    "css-loader": "^5.0.2",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "express": "^4.17.1",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.1.0",
     "jest": "^26.6.3",
     "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.0",
-    "size-limit": "^4.9.1",
+    "sass-loader": "^11.0.1",
+    "size-limit": "^4.9.2",
     "style-loader": "^2.0.0",
-    "ts-jest": "^26.4.4",
-    "ts-loader": "^8.0.11",
-    "typescript": "^4.1.2",
-    "webpack": "^5.9.0",
-    "webpack-bundle-analyzer": "^4.2.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.4.0"
+    "ts-jest": "^26.5.1",
+    "ts-loader": "^8.0.17",
+    "typescript": "^4.1.5",
+    "webpack": "^5.22.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "@iooxa/components": "^0.2.7",
-    "@iooxa/runtime": "^0.2.7",
-    "@iooxa/svg": "^0.0.6",
-    "copy-webpack-plugin": "^6.3.2",
-    "highlight.js": "^10.4.1",
+    "@curvenote/components": "^0.2.8",
+    "@curvenote/runtime": "^0.2.7",
+    "@curvenote/svg": "^0.0.7",
+    "copy-webpack-plugin": "^7.0.0",
+    "highlight.js": "^10.6.0",
     "katex": "^0.12.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "scroll-into-view-if-needed": "^2.2.26"
   },
-  "bugs": {
-    "url": "https://github.com/iooxa/article/issues"
-  },
-  "homepage": "https://iooxa.dev/article",
   "sideEffects": false,
   "size-limit": [
     {
-      "path": "dist/iooxa.min.js",
+      "path": "dist/curvenote.min.js",
       "limit": "10 KB"
     }
   ]

src/components/article.ts

@@ -1,7 +1,5 @@
-import { renderHTML } from '@iooxa/components';
-import scrollIntoView from 'scroll-into-view-if-needed';
+import { renderHTML } from '@curvenote/components';
 import { katexCSS } from './equation';
-import { title2name } from './utils';
 
 const renderMathInElement = require('katex/contrib/auto-render/auto-render.js').default;
 
@@ -38,20 +36,6 @@ export function setupNav() {
   });
 }
 
-export function gotoHash() {
-  const headers = document.querySelectorAll('H1, H2, H3, H4, H5, H6');
-  const hash = window.location.hash.slice(1);
-  if (headers == null || headers.length <= 1 || hash.length === 0) return;
-
-  headers.forEach((header) => {
-    if (header.getAttribute('data-outline') === 'none') return;
-    const id = header.id || title2name(header.textContent ?? '');
-    if (id === hash) {
-      scrollIntoView(header, { behavior: 'smooth', block: 'center', inline: 'nearest' });
-    }
-  });
-}
-
 export default function setup() {
   const katexFragment = document.createDocumentFragment();
   renderHTML(katexCSS, katexFragment);
@@ -60,6 +44,4 @@ export default function setup() {
     document.querySelectorAll('article'),
   ).forEach((element) => renderMath(element));
   setupNav();
-  // This should give the code enough time to render
-  setTimeout(gotoHash, 250);
 }

src/components/card.ts

@@ -1,6 +1,6 @@
 import {
   withRuntime, BaseComponent, html, css,
-} from '@iooxa/components';
+} from '@curvenote/components';
 
 function isLinkExternal(url: string) {
   return url && (url.startsWith('http') || url.startsWith('//'));

src/components/code.ts

@@ -1,6 +1,6 @@
 import {
   BaseComponent, withRuntime, html, css, unsafeHTML,
-} from '@iooxa/components';
+} from '@curvenote/components';
 import hljs from './codeHighlightjs';
 
 function trim(content: string) {

src/components/demo.ts

@@ -1,6 +1,6 @@
 import {
   BaseComponent, withRuntime, html, css,
-} from '@iooxa/components';
+} from '@curvenote/components';
 
 export const DemoSpec = {
   name: 'demo',

src/components/equation.ts

@@ -1,7 +1,7 @@
 import {
   BaseComponent, withRuntime, html, css, unsafeHTML,
-} from '@iooxa/components';
-import { types, provider } from '@iooxa/runtime';
+} from '@curvenote/components';
+import { types, provider } from '@curvenote/runtime';
 import katex from 'katex';
 
 export const katexCSS = html`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css" integrity="sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin="anonymous" />`;

src/components/index.ts

@@ -1,5 +1,5 @@
-import { types, setup } from '@iooxa/runtime';
-import { registerComponent } from '@iooxa/components';
+import { types, setup } from '@curvenote/runtime';
+import { registerComponent } from '@curvenote/components';
 import Equation from './equation';
 import Code from './code';
 import Demo from './demo';

src/components/outline.ts

@@ -1,6 +1,6 @@
 import {
   BaseComponent, withRuntime, html, css, throttle, THROTTLE_SKIP,
-} from '@iooxa/components';
+} from '@curvenote/components';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { title2name } from './utils';
 
@@ -79,9 +79,9 @@ class Outline extends BaseComponent<typeof OutlineSpec> {
         element: header,
       };
       headerData.push(data);
-      const func = () => handleClick(data);
-      header.addEventListener('click', func);
-      this.#headerUnsubscribe.push(() => header.removeEventListener('click', func));
+      // const func = () => handleClick(data);
+      // header.addEventListener('click', func);
+      // this.#headerUnsubscribe.push(() => header.removeEventListener('click', func));
     });
     // If there are not enough, don't show it.
     this.#headers = headerData.length <= 1 ? [] : headerData;
@@ -126,7 +126,7 @@ class Outline extends BaseComponent<typeof OutlineSpec> {
       width: 150px;
       text-overflow: ellipsis;
       overflow: hidden;
-      font-family: var(--iooxa-font, sans-serif);
+      font-family: var(--curvenote-font, sans-serif);
       white-space: nowrap;
       opacity: 0;
       transition: all 200ms;

styles/_article.scss

@@ -14,7 +14,7 @@ article {
   }
 
   h1, h2, h3, h4, h5, h6{
-    font-family: var(--iooxa-font-headers, serif);
+    font-family: var(--curvenote-font-headers, serif);
   }
 
   p code{
@@ -32,7 +32,7 @@ article {
 
   dl {
     color: #4D4D4D;
-    font-family: var(--iooxa-font, sans-serif);
+    font-family: var(--curvenote-font, sans-serif);
     line-height: 1.4;
   }
   dl dt{
@@ -71,7 +71,7 @@ article {
     margin-top: 20px;
     margin-bottom: 20px;
     color: #4D4D4D;
-    font-family: var(--iooxa-font, sans-serif);
+    font-family: var(--curvenote-font, sans-serif);
     font-weight: 300;
   }
   @media screen and (max-width: 800px) {