Copy demo site from math-blocks repo (#1)

* Copy demo site from math-blocks repo * remove unused files * fix typo in filename
math-blocks · Dec 28, 2024 · 1f5333d · 1f5333d
1 parent 032f8b3
commit 1f5333d
Show file tree

Hide file tree

Showing 29 changed files with 3,444 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.vscode
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # math-blocks.github.io
+
 MathBlocks website
diff --git a/assets/STIX2Math.otf b/assets/STIX2Math.otf
diff --git a/assets/STIXTwoMath.otf b/assets/STIXTwoMath.otf
diff --git a/assets/index.css b/assets/index.css
@@ -0,0 +1,79 @@
+@font-face {
+  font-family: STIX2;
+  src: url(/STIX2Math.otf);
+}
+
+@font-face {
+  font-family: LM-Math;
+  src: url(/latinmodern-math.otf);
+}
+
+@font-face {
+  font-family: Bonum-Math;
+  src: url(/texgyrebonum-math.otf);
+}
+
+@font-face {
+  font-family: Pagella-Math;
+  src: url(/texgyrepagella-math.otf);
+}
+
+@font-face {
+  font-family: Schola-Math;
+  src: url(/texgyreschola-math.otf);
+}
+
+@font-face {
+  font-family: Termes-Math;
+  src: url(/texgyretermes-math.otf);
+}
+
+:root {
+  --bg-color: #fff;
+}
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #1f1f1f;
+  }
+}
+
+html,
+body {
+  /* overflow: hidden; */
+  touch-action: none;
+}
+canvas {
+  touch-action: none;
+}
+div {
+  touch-action: none;
+}
+
+a {
+  font-family: sans-serif;
+  color: navy;
+}
+body {
+  background-color: #fff;
+  color: #1f1f1f;
+}
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    background-color: #1f1f1f;
+    color: #e0e0e0;
+  }
+
+  a {
+    color: lightskyblue;
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.blink {
+  animation: blink 1s steps(1) infinite;
+}
diff --git a/assets/latinmodern-math.otf b/assets/latinmodern-math.otf
diff --git a/assets/texgyrebonum-math.otf b/assets/texgyrebonum-math.otf
diff --git a/assets/texgyrepagella-math.otf b/assets/texgyrepagella-math.otf
diff --git a/assets/texgyreschola-math.otf b/assets/texgyreschola-math.otf
diff --git a/assets/texgyretermes-math.otf b/assets/texgyretermes-math.otf
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/assets/index.css" />
+    <title>MathBlocks</title>
+  </head>
+  <body>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "math-blocks.github.io",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@math-blocks/core": "^0.0.12",
+    "@math-blocks/editor": "^0.0.12",
+    "@math-blocks/opentype": "^0.0.12",
+    "@math-blocks/react": "^0.0.12",
+    "@math-blocks/solver": "^0.0.12",
+    "@math-blocks/testing": "^0.0.12",
+    "@math-blocks/typesetter": "^0.0.12",
+    "@types/node": "^22.10.2",
+    "classnames": "^2.5.1",
+    "fraction.js": "^5.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-json-view": "^1.21.3",
+    "react-router-dom": "6.28.0",
+    "utility-types": "^3.11.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "typescript": "5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}
diff --git a/src/baseline/baseline-page.tsx b/src/baseline/baseline-page.tsx
@@ -0,0 +1,99 @@
+import * as React from "react";
+import type { Blob } from "buffer";
+
+import { builders as b } from "@math-blocks/editor";
+import { MathRenderer, FontDataContext } from "@math-blocks/react";
+import { parse, getFontData } from "@math-blocks/opentype";
+import type { FontData } from "@math-blocks/opentype";
+import {
+  RadicalDegreeAlgorithm,
+  MathStyle,
+  RenderMode,
+} from "@math-blocks/typesetter";
+
+import stix2 from "../../assets/STIX2Math.otf";
+
+const simpleRow = b.row([
+  b.char("2"),
+  b.char("x"),
+  b.char("+"),
+  b.frac(
+    [b.char("t"), b.subsup([b.char("n"), b.char("-"), b.char("j")], undefined)],
+    [b.char("b"), b.subsup(undefined, [b.char("2")]), b.char("+"), b.char("x")]
+  ),
+  b.char("="),
+  b.char("1"),
+  b.char("0"),
+]);
+
+const BaselinePage: React.FunctionComponent = () => {
+  const [stixFontData, setStixFontData] = React.useState<FontData | null>(null);
+
+  React.useEffect(() => {
+    const loadFont = async (): Promise<void> => {
+      const res = await fetch(stix2);
+      const blob = await res.blob();
+      const font = await parse(blob as Blob);
+      setStixFontData(getFontData(font, "STIX2"));
+    };
+
+    loadFont();
+  }, []);
+
+  if (!stixFontData) {
+    return null;
+  }
+
+  const fontSize = 34;
+
+  return (
+    <FontDataContext.Provider value={stixFontData}>
+      <div
+        style={{ fontFamily: "sans-serif", fontSize: 32, lineHeight: "48px" }}
+      >
+        <h1>Baseline Alignment Demo</h1>
+        <p>Hello, world!</p>
+        <p>
+          Hello,{" "}
+          <MathRenderer
+            fontSize={fontSize}
+            row={simpleRow}
+            radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
+            showHitboxes={false}
+            mathStyle={MathStyle.Text}
+            renderMode={RenderMode.Static}
+          />{" "}
+          world!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation{" "}
+          <MathRenderer
+            fontSize={fontSize}
+            row={simpleRow}
+            radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
+            showHitboxes={false}
+            mathStyle={MathStyle.Text}
+            renderMode={RenderMode.Static}
+          />{" "}
+          ullamco laboris nisi ut aliquip ex{" "}
+          <MathRenderer
+            fontSize={fontSize}
+            row={simpleRow}
+            radicalDegreeAlgorithm={RadicalDegreeAlgorithm.OpenType}
+            showHitboxes={false}
+            mathStyle={MathStyle.Text}
+            renderMode={RenderMode.Static}
+          />{" "}
+          ea commodo consequat. Duis aute irure dolor in reprehenderit in
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia
+          deserunt mollit anim id est laborum.
+        </p>
+      </div>
+    </FontDataContext.Provider>
+  );
+};
+
+export default BaselinePage;