Skip to content

Commit 0c38236

Browse files
Got17Jooseppi12
Got17
and
Jooseppi12
authored
Upgrade/mathjax 3.2.2 (#5)
* finished updating mathjax with draft sample project by using cdn * change class to config * Add Library project for configuration resource; testing SPA project * add sitelets project for testing * add ghpages.yml * remove MathJaxV3.fs * update README.md and specify mathjax version * ci: Add packaging for ConfigResource docs: Update README to reflect correct version * chore: convert from nuget * chore: fix deps * chore: Convert to nuget --------- Co-authored-by: Jooseppi12 <[email protected]>
1 parent 468250c commit 0c38236

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2284
-1205
lines changed

‎.github/workflows/ghpages.yml

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
name: Build and Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
workflow_dispatch:
8+
9+
jobs:
10+
build-and-deploy:
11+
runs-on: windows-latest
12+
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v2
16+
17+
- name: Set up Node.js
18+
uses: actions/setup-node@v3
19+
with:
20+
node-version: 'lts/*'
21+
22+
- name: Setup .NET 8
23+
uses: actions/setup-dotnet@v1
24+
with:
25+
dotnet-version: '8.0.x'
26+
27+
- name: Install dependencies
28+
run: npm install
29+
working-directory: ./WebSharper.MathJax.Sample
30+
31+
- name: Install Paket as a .NET Tool
32+
run: dotnet tool restore
33+
34+
- name: Add credentials for Paket
35+
run:
36+
dotnet tool run paket config
37+
add-credentials https://nuget.pkg.github.com/dotnet-websharper/index.json
38+
--username intellifactory-gh
39+
--password ${{ secrets.PAT_PACKAGE }}
40+
41+
- name: Restore Dependencies Using Paket
42+
run: dotnet tool run paket restore
43+
44+
- name: Add GitHub registry NuGet source
45+
run:
46+
dotnet nuget
47+
add source https://nuget.pkg.github.com/dotnet-websharper/index.json
48+
--name github
49+
--username intellifactory-gh
50+
--password ${{ secrets.PAT_PACKAGE }}
51+
--store-password-in-clear-text
52+
53+
- name: Build WebSharper.MathJax.ConfigResource
54+
run: dotnet build WebSharper.MathJax.ConfigResource/WebSharper.MathJax.ConfigResource.fsproj
55+
56+
- name: Build WebSharper.MathJax
57+
run: dotnet build WebSharper.MathJax/WebSharper.MathJax.fsproj
58+
59+
- name: Build Sample Project in Release mode
60+
run: dotnet build --configuration Release
61+
working-directory: ./WebSharper.MathJax.Sample
62+
63+
- name: Run Vite build
64+
run: npx vite build
65+
working-directory: ./WebSharper.MathJax.Sample
66+
67+
- name: Copy missing static assets
68+
run: |
69+
mkdir -p WebSharper.MathJax.Sample/wwwroot/dist/Scripts
70+
cp WebSharper.MathJax.Sample/wwwroot/Scripts/*.css WebSharper.MathJax.Sample/wwwroot/dist/Scripts/
71+
cp WebSharper.MathJax.Sample/wwwroot/Scripts/*.head.js WebSharper.MathJax.Sample/wwwroot/dist/Scripts/
72+
73+
- name: Deploy 🚀
74+
uses: peaceiris/actions-gh-pages@v3
75+
with:
76+
github_token: ${{ secrets.GITHUB_TOKEN }}
77+
publish_dir: WebSharper.MathJax.Sample/wwwroot/dist

‎.gitignore

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
/.vs/
22
/*.suo
3-
/*.Sample/Content/
4-
/*.Sample/Scripts/
3+
/*/build/
4+
/*/Content/
5+
/*/Scripts/
6+
/*/wwwroot/Scripts/
7+
/*/wwwroot/dist/
8+
/*/.vs
9+
/*/node_modules
510
/build/
611
/*/bin/
712
/*/obj/

‎README.md

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,126 @@
11
# WebSharper.MathJax
22

3-
WebSharper Extensions for MathJax 2.7.1
3+
WebSharper Extensions for MathJax 3.2.2
44

5-
* [Source Repository](https://github.com/intellifactory/websharper.mathjax)
5+
[MathJax](https://www.mathjax.org/) is a JavaScript tool to render math expression from TeX, MathML and AsciiMath formated text. It can be configured to render into one of many output formats. It can be used not to just to render static text into a formated math formula, but can be used to render dynamically changing text too.
6+
7+
## Version 3 Overview
8+
9+
MathJax v3 introduces a modern, modular API that replaces the older `Hub.Queue` system. Configuration must now happen **before** loading the library. WebSharper supports this setup for both **SPA** and **Sitelets** projects.
10+
11+
12+
## Configuring MathJax
13+
14+
### SPA Projects
15+
16+
For SPA projects:
17+
18+
- Set the global MathJax configuration in a `<script>` tag **before** importing the MathJax library which is done inside `Scripts/WebSharper.MathJax.Sample.head.js`. It is important to add before that script:
19+
20+
```html
21+
<script>
22+
MathJax = {
23+
loader: {
24+
load: ['input/tex', 'input/asciimath', 'input/mml', 'output/chtml']
25+
},
26+
tex: {
27+
inlineMath: [['$', '$'], ['\\(', '\\)']]
28+
}
29+
};
30+
</script>
31+
<script src="Scripts/WebSharper.MathJax.Sample.head.js"></script>
32+
```
33+
34+
### Sitelets Projects
35+
36+
For Sitelets projects:
37+
38+
- Place the configuration inside `appsettings.json`:
39+
40+
```json
41+
{
42+
"websharper": {
43+
"mathjaxConfig": "MathJax = { \"loader\": { \"load\": [\"input/tex\",\"input/asciimath\",\"input/mml\",\"output/chtml\"] }, \"tex\": { \"inlineMath\": [[\"$\",\"$\"], [\"\\\\(\",\"\\\\)\"]] } }"
44+
}
45+
}
46+
```
47+
48+
> This will inject the configuration **before** the MathJax script tag automatically.
49+
50+
with these basic configuration we're ready to render TeX strings on the screen. We simply have to have the formula in the `html` file, for example:
51+
52+
```html
53+
<p>This is inline math: $a \ne 0$ or \(a \ne 0\)</p>
54+
<p>This is display math: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</p>
55+
```
56+
57+
## Supported input formats
58+
59+
| Format | Loader Module |
60+
|-----------|---------------------|
61+
| TeX | `"input/tex"` |
62+
| MathML | `"input/mml"` |
63+
| AsciiMath | `"input/asciimath"` |
64+
65+
66+
## Supported output formats
67+
68+
| Format | Output Module |
69+
|-------------|------------------------|
70+
| CHTML | `"output/chtml"` |
71+
| SVG | `"output/svg"` |
72+
73+
## Using the MathJax API (WebSharper Bindings)
74+
75+
WebSharper provides convenient bindings for dynamic rendering using MathJax v3 API:
76+
77+
`MathJax.Typeset()`
78+
79+
Rerun typesetting on the whole page.
80+
81+
`MathJax.TypesetPromise()`
82+
83+
Like `Typeset()`, but returns a JavaScript `Promise`.
84+
85+
`MathJax.Tex2chtml(tex: string)`
86+
87+
Convert TeX string into HTML (CHTML DOM node).
88+
89+
`MathJax.Tex2mml(tex: string)`
90+
91+
Convert TeX string into MathML (as text).
92+
93+
`MathJax.Mathml2chtml(mml: string)`
94+
95+
Convert MathML string into HTML (CHTML DOM node).
96+
97+
`MathJax.Mathml2mml(mml: string)`
98+
99+
Convert MathML string into cleaned-up MathML (as text).
100+
101+
## Dynamic math content
102+
103+
Most of the time, you'll want to render a math expression that changes while the application is running. In MathJax v3, instead of using `Hub.Queue`, you simply:
104+
105+
- You update the DOM content manually
106+
107+
- Call `MathJax.Typeset()` to re-render the expression
108+
109+
This pattern works well when binding expressions to `Var` and updating them with `View.Sink`. You can typeset either specific elements or the entire page with `MathJax.Typeset()` or `MathJax.TypesetPromise()`.
110+
111+
```fsharp
112+
let asciiMathPage() =
113+
let rvExpression = Var.Create @"sum_(i=1)^n i^3=((n(n+1))/2)^2"
114+
115+
// Re-render on input change
116+
rvExpression.View
117+
|> View.Sink (fun ascii ->
118+
let el = JS.Document.GetElementById("tex")
119+
el.InnerHTML <- "`" + ascii + "`"
120+
MathJax.Typeset()
121+
)
122+
123+
IndexTemplate.AsciiMath()
124+
.Expression(rvExpression)
125+
.Doc()
126+
```

‎WebSharper.MathJax.ConfigResource/Library.fs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
namespace WebSharper.MathJax.Extension
2+
3+
open WebSharper.Core.Resources
4+
5+
type ConfigResource() =
6+
interface IResource with
7+
member this.Render ctx =
8+
fun writer ->
9+
let html = writer Scripts
10+
11+
let configJson =
12+
ctx.GetSetting("MathjaxConfig")
13+
|> Option.defaultValue ""
14+
15+
html.RenderBeginTag "script"
16+
17+
html.WriteLine()
18+
// write the configuration code
19+
html.WriteLine(configJson.Trim())
20+
21+
html.RenderEndTag()

‎WebSharper.MathJax.ConfigResource/WebSharper.MathJax.ConfigResource.fsproj

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netstandard2.0</TargetFramework>
5+
<GenerateDocumentationFile>true</GenerateDocumentationFile>
6+
</PropertyGroup>
7+
8+
<ItemGroup>
9+
<Compile Include="Library.fs" />
10+
<None Include="wsconfig.json" />
11+
</ItemGroup>
12+
13+
<Import Project="..\paket-files\wsbuild\github.com\dotnet-websharper\build-script\WebSharper.Fake.targets" Condition="Exists('..\paket-files\wsbuild\github.com\dotnet-websharper\build-script\WebSharper.Fake.targets')" />
14+
<Import Project="..\.paket\Paket.Restore.targets" />
15+
</Project>

‎WebSharper.MathJax.ConfigResource/paket.references

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
WebSharper
2+
WebSharper.FSharp
3+
FSharp.Core

‎WebSharper.MathJax.ConfigResource/wsconfig.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"$schema": "https://websharper.com/wsconfig.schema.json",
3+
"project": "library",
4+
"jsOutput": null
5+
}

‎WebSharper.MathJax.Sample/AssemblyInfo.fs

Lines changed: 0 additions & 60 deletions
This file was deleted.

0 commit comments

Comments
 (0)