cortex-js / cortexjs.io Goto Github PK

View Code? Open in Web Editor NEW

47.0 2.0 16.0 29.44 MB

Source for the cortexjs.io website

Home Page: http://cortexjs.io/

HTML 35.22% JavaScript 19.31% Shell 2.81% Liquid 1.12% SCSS 41.53%

scientific-computing cortexjs documentation components

cortexjs.io's Introduction

This repo contains the source files for the "cortexjs.io" website.

TL;DR

First time after cloning the project or after making some source changes

git submodule init

git submodule update

# Setup, make a dev build and start a server
npm start

To update the documentation after a new release

# Pick-up changes in the dependent modules
npm run update

# Generate .md files for API and launch local server
npm start

To stage and deploy an update

npm run stage
# Make a clean production build.
# Output goes inside submodules/cortex-js.github.io

npm run restart
# Validate that everything works well in the browser then...

npm run deploy
# submodules/cortex-js.github.io (a git submodule) gets pushed to cortex-js.github.io

Architecture

The site is published using GitHub Pages. The main benefit of using GH Pages is the workflow integration (pubshing to GH triggers an automatic update of the site being served)

The content of the sites are authored primarily as Markdown files, processed with eleventy to turn them into HTML/CSS.

The main eleventy configuration is in the config/eleventy.js file, including the definition of the Markdown to use.

The Markdown engine is markdown-it which implements CommonMark.

The mardown-it-attrs plugin allows the styling of paragraphs, e.g.

This is a notice. {.notice--info}

The markdown-it-deflist plugin supports pandc style definition lists:

Term 1
:   Definition 1
:   Second definition

The output is in the submodules/cortex-js.github.io directory. That directory is a Git submodule which is linked to the cortex-js.github.io repo. That repo is the one published by GH Pages (for organization, only an entire repo can be published, for projects, the contents can be contained in a /docs directory).

Content

The npm run build command generates the documentation for the APIs from the TypeScript .d.ts file into the build/ directory.

The build process uses the typedoc tool to parse the API header files and output a json files in the build/ directory.

Note: To debug the converter, use the VSCode debugger. Select Debug > Start Debugging to start a debugging session right in VSCode.

The build-guides script then converts the json file into markdown in the ./src/build directory, which can then be processed by eleventy with npm run build or npm start.

The CSS styling information is defined in src/_sass/.

The API documentation should follow the Google Documentation Style Guide (https://developers.google.com/style/api-reference-comments) and https://developers.google.com/style

In addition, the TypeScript code should follow the Google Style Guide: https://google.github.io/styleguide/jsguide.html#naming

Setup and scripts

The project follows the GitHub standard for naming project scripts.

To do a local build:

npm start

To do a build ready to be staged:

npm run stage

Test

The "testing" of the generated site consist of checking links, and that the generated HTML is valid.

cortexjs.io's People

Contributors

Stargazers

Watchers

Forkers

xrmx taptapit rajneeshaggarwal cccaowenyue sanyuesiyuewuyue ravivgitte turner-eng sritchie qq69154565 albertchae myforkrepos andrew-murdza rheehot kvas-damian olegmozhei ahmad-a0

cortexjs.io's Issues

strange simplification with simple product

Hello,
When I try to simplify 2x\times x \times 3 \times x for example, the simplification give me 2\times3 xxx

Thanks for this very usefull tool !

The text box on the demo page doesn't show LaTeX

After the April 05, 2022 update, on firefox version 99.0.1 (64-bit) macOS, the text box on the demo page doesn't show LaTeX.

Legacy React Doc link in "Using MathLive with React" Section

When you are checking out MathLive and navigate to the "Using MathLive with React" section. At the bottom of the page, there is a link to React docs with the text "Learn more about React and Web Components" which links to legacy react docs for Web Component.
I would love to update it to the latest react documentation if no one has any objections.
Thanks.
PS: Adding an ss for reference.

Error when talking about float range in MathJSON docs

https://github.com/cortex-js/cortex-js.github.io/blob/2cdfc0e0c6bcf84aa090f4cddd9d7367e19e5e81/math-json/index.html#L1913-L1914

<li>the number is in the range \([-(2^{53})+1, (2^{53})-1]\) so it fits in a
64-bit float (<strong>IEEE 754-2008</strong>, 52-bit, about 15 digits of precision).</li>

The example unescaped number given (-234.534e-46) is beyond -2^53+1 - which is around 1e16

Errors in simple quiz

The simple quiz does not work as written. I found the following issues:

Step 2
The virtual keyboard doesn't load. Firefox says Uncaught TypeError: window.mathVirtualKeyboard is null. Edge says Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). I was able to fix this by loading MathLive as a module. I'm not sure what the intended fix for this is.

Step 3
mathfield is not defined. Fixed by adding const mathfield = document.getElementById('answer'); Combining the issues from Steps 2 and 3, the code looks like this:

<!doctype html>
<html>
<head>
    <title>Math Quiz</title>
    <!-- Include MathLive and CortexJS Compute Engine -->
    <script src="https://unpkg.com/@cortex-js/compute-engine"></script>
    <script type="module">
        import "https://unpkg.com/mathlive?module";
        const expectedAnswer = "2x^2+x-1";

        function checkAnswer() {
            const mathfield = document.getElementById('answer');
            const studentInput = mathfield.value;

            // Compare the expressions as strings
            const feedback = studentInput === expectedAnswer ?
                'Correct! 😃' : 'Try again. 😞';

            document.getElementById('feedback').textContent = feedback;
        }

        const answerButton = document.getElementById('submitAnswer');
        answerButton.addEventListener('click', checkAnswer);
    </script>
</head>
<body>
    <div>Simplify the expression: (x+1)(2x -1)</div>
    <math-field id="answer"></math-field>
    <button id="submitAnswer">Check Answer</button>
    <div id="feedback"></div>
</body>
</html>

Step 4
Again, mathfield is undefined.

Step 6
In the first part, the div should have id "question". Additionally, since I am using the module due to the issue in Step 2, I needed to directly import the required functions:

import { renderMathInElement, convertLatexToMarkup } from "https://unpkg.com/mathlive?module";

but I suspect that a different fix to the issue in Step 2 wouldn't require this.

In the second part of Step 6, the code tries to set the htmlContent property of the span tag, which doesn't do anything. I think innerHTML was meant here.

Step 7
Again, I think innerHTML was meant instead of htmlContent.

For the life of me, I cannot get ce.add or ce.mul to work (or at least it did not work in Firefox or Edge, where it kept saying Uncaught TypeError: e.every is not a function). I don't understand what the inputs to ce.add and ce.mul are supposed to be. Instead, I just replaced it with

return ce.box(["Multiply", 
    ["Add", ["Multiply", a, "x"], b], 
    ["Add", ["Multiply", c, "x"], d]]).evaluate();

and then everything worked fine.

Aria-label missing for Cypress tests

Good day @arnog - I hope you are well. I have been using this library for a while now and have no complaints, it has really been outstanding, thank you. I want to find out if the aria-label ([aria-label="math input field"]) has been removed from the math-field, as I use this for Cypress tests, and it can no longer find it anymore. Is there an alternative solution I can try if it has been removed? I am currently using the aria label to find the 'input' field and 'paste' latex mathematics in it to test some of my personal work.

z-index on the virtual keyboard

I get an issue when I have the virtual keyboard which pops up over a bootstrap accordion.
The zindex of the different items are not correct and the accordion comes over the keyboard.
I would need to change the zindex attribute of the keyboard but I can't find it...
Can you point me to the right direction please?

Math live demo on iOS dark screen

When in dark screen mode and viewing the main page demo, you cannot see the text in a selected area.

Apologies in advance as it looks like I opened this on the wrong repo.

Typos in Interacting with a Mathfield

Hi guys,

there seem to be two typos in

cortexjs.io/src/_pages/mathlive-guide-interacting.md

Lines 280 to 284 in 1f9833f

 ```js 

 mf.setOptions({onExport: (mf, latex, range) => 

 "`" + mg.getValue(range, 'ascii-math') + "`". 

 }); 

 ```

For one, the . at the end of the line is incorrect syntax, second, the variable mg is not defined.
I believe the correct code should be:

mf.setOptions({onExport: (mg, latex, range) => 
  "`" + mg.getValue(range, 'ascii-math') + "`"
});

This also applies to the above two code snippets.

Double negation in Compute Engine output

While playing with https://cortexjs.io/compute-engine/demo/ randomly got this for sin(999deg):

Mathlive Docs SDK reference 'FocusOutEvent' not working

the custom event 'focus-out' seems no longer supported since 0.90.0, but the 'FocusOutEvent' is still on the web page. by the way, the types in mathfield-element.d.ts should also be updated.

declare global {
    /**
     * Map the custom event names to types
     * @internal
     */
    interface HTMLElementEventMap {
        'focus-out': CustomEvent<FocusOutEvent>;
        'mode-change': Event;
        'mount': Event;
        'move-out': CustomEvent<MoveOutEvent>;
        'unmount': Event;
        'read-aloud-status-change': Event;
        'selection-change': Event;
        'undo-state-change': Event;
        'before-virtual-keyboard-toggle': Event;
        'virtual-keyboard-toggle': Event;
    }
}

Compute Engine issues with rational expressions

There seems to be some problems with simple rational expressions that have sums/differences in the numerator or denominator. Interestingly, our use involves numerical substitution, which also fails.

Below are some screenshots from our use, and below that are some tests I did on the demo page. I suspect if the demo page starts to work properly, then our use will work too.

Our examples (these should all be equivalent to the expected answer):

Examples from demo page (these should all simplify/evaluate to zero):
Success:

Success:

Fail:

frac{12}

Why if math field \frac{1}{2} return \frac12?
If \sqrt{\frac{1}{2}} return \sqrt{\frac{12}}

Broken link in Canonical Form guide

On this page there is a link to docs for ce.jsonSerializationOptions, but it is a broken link leading here when it should actually lead to this documentation instead, I think. I would fix it with a small pull request, but I'm not sure the syntax for the doc system.

MathLive demo is difficult to read in dark mode

Problem:
When my device's dark mode is on the MathLive demo at the bottom of the page https://cortexjs.io/mathlive/demo/ shows the text in a light gray color which makes it difficult to read.

Proposed Solution:
Within the css for .result on line 96 of code-playground.ts add a color: black; to that style so that it becomes:

.result {
    width: calc(50% - .5em);
    margin-left: .5em;
+    color: black;
  }

I tried my fix using chrome devtools and it seemed to fix the issue:

option power in canonicalform is still available ?

console.log( engine.parse('3^2', { canonical: ['Power'] }).json) gives me [ "Square", 3 ].

But in the documentation on https://cortexjs.io/compute-engine/reference/core/#CanonicalForm, I can read :

Curly brackets place the contents outside.

To reproduce:

Open https://cortexjs.io/mathlive/demo/
Remove everything from the first box.
Type "{", "1", "}"

Expected result: "{1}"
Actual result: "{}1"

The latex code is consistent with the result in the box, "\left\lbrace\right\rbrace1" (in other words, the problem is not a discrepancy between the boxes.)

The problem does not occur with hard brackets, for example "[1]".

In addition, I'm wondering if there is something else wrong with the version of MathLive in the demo. When adding parentheses, they are simply added as "(...)", the standard non-scaling parentheses in latex. I would have expected them to use "\left(...\right)". Consider the visual difference between "(\frac{1}{2})" and "\left(\frac{1}{2}\right)".

Mathlive Docs SDK reference link is broken

Clicking on SDK reference in the mathlive menu brings me to the 404 page

Basic use of simplify

Hi, here is my code :

const engine = new ComputeEngine()
expression = '2+\\frac{2+x}{2}'
expression2 = engine.parse(expression).simplify().latex

After printing expression = expression2 the result is :

What is wrong ? Have I missed some basic stuff ?

Writing matrixes using math-field?

wondering whether it is possible to write matrix with this library?

not possible to define separate buttons in html without mathlive's built-in keyboard buttons

Is there a function to introduce several buttons in HTML and click on them to enter a mathematical expression without using the mathlive keyboard?

MathJSON confused

Hi,

I have used demo with expression: x = abs(-10).
I received the math JSON expression [ "Equal", "x", ["Multiply", "abs", ["Delimiter", -10]] ]

What is the "Delimiter"?
Why do you add multiplication?
The "ceil" function has the same issue as the "abs", but the "round" and "floor" function is good.
Do I miss something?

Thanks

Lack of keyboard support

Although the documentation implies this library offers keyboard support with and without the use of a screen reader, I can't find any markup that supports that claim. Even the demo on your site is not keyboard accessible. I don't see any options to configure that on my end. Is there a specific version of the library that we need to loand to get a keyboard accessible keyboard?

Flatten option seems to be not functional

For example,

function customCanonical(expr) {
  if (typeof expr.value === 'number') {
    if (expr.head === 'Divide' || expr.head === 'Rational') {
      if (expr.engine.box(['GCD', expr.op1, expr.op2]).value !== 1) return expr;
    }
    return expr.engine.number(expr.value);
  }

  if (expr.ops)
    return expr.engine.box([expr.head, ...expr.ops.map(customCanonical)], {
      canonical: ['InvisibleOperator', 'Order', 'Flatten'],
    });

  return expr.canonical;
}
console.log(customCanonical(engine.parse('\lparen2y+2\rparen\div7', { canonical: false })).toString())
// -> Divide(Delimiter(Add(Multiply(2, y), 2)), 7)
console.log(customCanonical(engine.parse('\dfrac{2y+2}{7}', { canonical: false })).toString())
// -> Divide(Add(Multiply(2, y), 2), 7)

CortexJS onine tool: how to write on several lines?

I find CortexJS really nice and I would like to use it more, but the problem is I can't find a way to write a new line... When I'm thinking through a problem, I kind of need to see the previous steps, it's a problem if I have to erase what I've done before everytime I need to write a new line...

Is there a way? And if there is not, would you implement it?

Mathlive math-field editor error - urgent

Hello,
Thank you for making THE BEST latex editor. I have used this library in multiple project but today I got a very weird bug that makes the entire project unusable.

You can even find this bug in your own home page here
https://cortexjs.io/mathlive/guides/getting-started/

Go to try it out. You will see a mathlive instance with quadratic equation as placeholder. Try to delete the b^2. No matter how you try, you can't delete the b^2 under the square root. But that is not all. If you try to rewrite the quadratic equation, you will see that once you are under squareroot no styled element works. So b^2 just writes as b2 and you get the following error:

mathlive:2254 Uncaught TypeError: Cannot destructure property 'parent' of 'r' as it is undefined.
at Ro.getSiblingsRange (mathlive:2254:62355)
at Y0 (mathlive:2256:23545)
at Object.moveToSuperscript [as fn] (mathlive:2258:6466)
at K0 (mathlive:2167:7101)
at Ea.executeCommand (mathlive:2402:12267)
at Wh (mathlive:2258:16053)
at Vo (mathlive:2258:15686)
at Ea.onInput (mathlive:2402:22123)
at Z0.e.addEventListener.signal (mathlive:2256:19651)

Please let me know if you need any more info or how i can help. I am planning on using this project in product but being unable to even write a quadratic is not good. 

Thank a lot in advance

programicaly insert divide '/' not working

inserting divide symbol / doesn't work programmatically like \sqrt{} works

<button on:click={()=>m.insert('/')}>insert divide</button>

Custom layout switcher label not clickable

Hi, i have created a custom layout, defined label, tooltip and rows but when the virtual keyboard is displayed, the switcher label is not being clickable, i got a forced solution displaying this custom layout as the first pos layout between default layouts like "greek", "alphabetic" etc but after switch on another layout i cant to do click at custom layout again.

Thanks!

Suggestion to add a competitive comparison matrix

I have work colleague that are asking "why use MathLive, and not Katex or MathJax". I realize one of the reasons is that MathLive comes with a compute engine that is closely tied in but I think there are probably also a lot of other advantages in using it.

I would like to suggest you add to the web site a comparison matrix that will guide those who know nothing about MathLIve and stress the advantages of using MathLive. These days people use what is best and what offers the most features. My team mates are suggesting the other products, and having something like this to show them would I think be a good idea.

How works Applying Rewrite Rules ? Example in the doc is wrong.

In the documentation https://cortexjs.io/compute-engine/guides/patterns-and-rules/, I read :

So, to test, I'm doing the same like this :

But the result is null.

I can't imagine you're wrong. So what am I doing wrong ?

Math fields not rendering correctly on home page

Tested on Firefox and chrome, OSX 12.6. Was fine yesterday.

Network shows no attempt to fetch https://unpkg.com/mathlive/dist/mathlive.mjs

Demo page works fine

Mathlive Docs update: Controling the Menu Visibility should mention that menuItems = [] should be done after "mount" event.

The new contextMenu looks awesome! But for inline editors this might be too much.

The documentation now states that you can disable the contextMenu by doing: mf.menuItems = [];. However, this needs to be done after the mathFieldElement is "mounted", otherwise the menuItems property will be overwritten again with the default list of menuItems.

I propose to add this in the documentation where it is explained how to disable the contextMenu: https://cortexjs.io/mathlive/guides/menu/

	```js
	mf.setOptions({onExport: (mf, latex, range) =>
	"`" + mg.getValue(range, 'ascii-math') + "`".
	});
	```