Skip to content

Commit 1f5333d

Browse files
kevinbarabashkevinbarabash
authored
Copy demo site from math-blocks repo (#1)
* Copy demo site from math-blocks repo * remove unused files * fix typo in filename
1 parent 032f8b3 commit 1f5333d

29 files changed

+3444
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
.vscode
4+
.DS_Store

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# math-blocks.github.io
2+
23
MathBlocks website

‎assets/STIX2Math.otf

789 KB
Binary file not shown.

‎assets/STIXTwoMath.otf

819 KB
Binary file not shown.

‎assets/index.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@font-face {
2+
font-family: STIX2;
3+
src: url(/STIX2Math.otf);
4+
}
5+
6+
@font-face {
7+
font-family: LM-Math;
8+
src: url(/latinmodern-math.otf);
9+
}
10+
11+
@font-face {
12+
font-family: Bonum-Math;
13+
src: url(/texgyrebonum-math.otf);
14+
}
15+
16+
@font-face {
17+
font-family: Pagella-Math;
18+
src: url(/texgyrepagella-math.otf);
19+
}
20+
21+
@font-face {
22+
font-family: Schola-Math;
23+
src: url(/texgyreschola-math.otf);
24+
}
25+
26+
@font-face {
27+
font-family: Termes-Math;
28+
src: url(/texgyretermes-math.otf);
29+
}
30+
31+
:root {
32+
--bg-color: #fff;
33+
}
34+
@media screen and (prefers-color-scheme: dark) {
35+
:root {
36+
--bg-color: #1f1f1f;
37+
}
38+
}
39+
40+
html,
41+
body {
42+
/* overflow: hidden; */
43+
touch-action: none;
44+
}
45+
canvas {
46+
touch-action: none;
47+
}
48+
div {
49+
touch-action: none;
50+
}
51+
52+
a {
53+
font-family: sans-serif;
54+
color: navy;
55+
}
56+
body {
57+
background-color: #fff;
58+
color: #1f1f1f;
59+
}
60+
@media screen and (prefers-color-scheme: dark) {
61+
body {
62+
background-color: #1f1f1f;
63+
color: #e0e0e0;
64+
}
65+
66+
a {
67+
color: lightskyblue;
68+
}
69+
}
70+
71+
@keyframes blink {
72+
50% {
73+
opacity: 0;
74+
}
75+
}
76+
77+
.blink {
78+
animation: blink 1s steps(1) infinite;
79+
}

‎assets/latinmodern-math.otf

717 KB
Binary file not shown.

‎assets/texgyrebonum-math.otf

515 KB
Binary file not shown.

‎assets/texgyrepagella-math.otf

587 KB
Binary file not shown.

‎assets/texgyreschola-math.otf

583 KB
Binary file not shown.

‎assets/texgyretermes-math.otf

520 KB
Binary file not shown.

‎eslint.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="/assets/index.css" />
7+
<title>MathBlocks</title>
8+
</head>
9+
<body>
10+
<script type="module" src="/src/index.tsx"></script>
11+
</body>
12+
</html>

‎package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "math-blocks.github.io",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@math-blocks/core": "^0.0.12",
14+
"@math-blocks/editor": "^0.0.12",
15+
"@math-blocks/opentype": "^0.0.12",
16+
"@math-blocks/react": "^0.0.12",
17+
"@math-blocks/solver": "^0.0.12",
18+
"@math-blocks/testing": "^0.0.12",
19+
"@math-blocks/typesetter": "^0.0.12",
20+
"@types/node": "^22.10.2",
21+
"classnames": "^2.5.1",
22+
"fraction.js": "^5.2.1",
23+
"react": "^18.3.1",
24+
"react-dom": "^18.3.1",
25+
"react-json-view": "^1.21.3",
26+
"react-router-dom": "6.28.0",
27+
"utility-types": "^3.11.0"
28+
},
29+
"devDependencies": {
30+
"@eslint/js": "^9.17.0",
31+
"@types/react": "^18.3.18",
32+
"@types/react-dom": "^18.3.5",
33+
"@vitejs/plugin-react": "^4.3.4",
34+
"eslint": "^9.17.0",
35+
"eslint-plugin-react-hooks": "^5.0.0",
36+
"eslint-plugin-react-refresh": "^0.4.16",
37+
"globals": "^15.14.0",
38+
"typescript": "5.7.2",
39+
"typescript-eslint": "^8.18.2",
40+
"vite": "^6.0.5"
41+
}
42+
}

‎src/baseline/baseline-page.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import * as React from "react";
2+
import type { Blob } from "buffer";
3+
4+
import { builders as b } from "@math-blocks/editor";
5+
import { MathRenderer, FontDataContext } from "@math-blocks/react";
6+
import { parse, getFontData } from "@math-blocks/opentype";
7+
import type { FontData } from "@math-blocks/opentype";
8+
import {
9+
RadicalDegreeAlgorithm,
10+
MathStyle,
11+
RenderMode,
12+
} from "@math-blocks/typesetter";
13+
14+
import stix2 from "../../assets/STIX2Math.otf";
15+
16+
const simpleRow = b.row([
17+
b.char("2"),
18+
b.char("x"),
19+
b.char("+"),
20+
b.frac(
21+
[b.char("t"), b.subsup([b.char("n"), b.char("-"), b.char("j")], undefined)],
22+
[b.char("b"), b.subsup(undefined, [b.char("2")]), b.char("+"), b.char("x")]
23+
),
24+
b.char("="),
25+
b.char("1"),
26+
b.char("0"),
27+
]);
28+
29+
const BaselinePage: React.FunctionComponent = () => {
30+
const [stixFontData, setStixFontData] = React.useState<FontData | null>(null);
31+
32+
React.useEffect(() => {
33+
const loadFont = async (): Promise<void> => {
34+
const res = await fetch(stix2);
35+
const blob = await res.blob();
36+
const font = await parse(blob as Blob);
37+
setStixFontData(getFontData(font, "STIX2"));
38+
};
39+
40+
loadFont();
41+
}, []);
42+
43+
if (!stixFontData) {
44+
return null;
45+
}
46+
47+
const fontSize = 34;
48+
49+
return (
50+
<FontDataContext.Provider value={stixFontData}>
51+
<div
52+
style={{ fontFamily: "sans-serif", fontSize: 32, lineHeight: "48px" }}
53+
>
54+
<h1>Baseline Alignment Demo</h1>
55+
<p>Hello, world!</p>
56+
<p>
57+
Hello,{" "}
58+
<MathRenderer
59+
fontSize={fontSize}
60+
row={simpleRow}
61+
radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
62+
showHitboxes={false}
63+
mathStyle={MathStyle.Text}
64+
renderMode={RenderMode.Static}
65+
/>{" "}
66+
world!
67+
</p>
68+
<p>
69+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
70+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
71+
minim veniam, quis nostrud exercitation{" "}
72+
<MathRenderer
73+
fontSize={fontSize}
74+
row={simpleRow}
75+
radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
76+
showHitboxes={false}
77+
mathStyle={MathStyle.Text}
78+
renderMode={RenderMode.Static}
79+
/>{" "}
80+
ullamco laboris nisi ut aliquip ex{" "}
81+
<MathRenderer
82+
fontSize={fontSize}
83+
row={simpleRow}
84+
radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
85+
showHitboxes={false}
86+
mathStyle={MathStyle.Text}
87+
renderMode={RenderMode.Static}
88+
/>{" "}
89+
ea commodo consequat. Duis aute irure dolor in reprehenderit in
90+
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
91+
sint occaecat cupidatat non proident, sunt in culpa qui officia
92+
deserunt mollit anim id est laborum.
93+
</p>
94+
</div>
95+
</FontDataContext.Provider>
96+
);
97+
};
98+
99+
export default BaselinePage;

0 commit comments

Comments
 (0)