Skip to content

Commit fca007c

Browse files
arnogarnog
committed
feat: improved redirect, 404
1 parent 8751279 commit fca007c

File tree

13 files changed

+371
-37
lines changed

13 files changed

+371
-37
lines changed

‎docs/compute-engine/50-math-json.md

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,32 @@ description: MathJSON is a lightweight data interchange format for mathematical
55
hide_title: true
66
sidebar_class_name: "sdk-icon"
77
---
8-
98
import Mathfield from '@site/src/components/Mathfield';
109
import ConsoleMarkup from '@site/src/components/ConsoleMarkup';
1110
import {useState, useEffect} from 'react';
1211
import {BrowserOnly} from '@docusaurus/BrowserOnly';
1312

13+
export function setupComputeEngine() {
14+
if (window.ce !== undefined) return;
15+
// If we're not ready, try again in 50ms
16+
if (!("ComputeEngine" in window)) {
17+
setTimeout(setupComputeEngine, 50);
18+
return;
19+
}
20+
const [value, setValue] = useState(children);
21+
const [json, setJson] = useState({});
22+
window.ce = new ComputeEngine.ComputeEngine();
23+
setJson(window.ce?.parse(value).json);
24+
}
1425
export function MathJSONOutput({children}) {
1526
const [value, setValue] = useState(children);
1627
const [json, setJson] = useState({});
28+
useEffect(setupComputeEngine, []);
1729
// We need to use useEffect so that the MathfieldElement is available
1830
// when this code runs (in the client).
1931
useEffect(() => {
20-
setJson(window.MathfieldElement.computeEngine.parse(value).json);
32+
setupComputeEngine();
33+
setJson(window.ce?.parse(value).json);
2134
}, [value]);
2235
return<>
2336
<Mathfield
@@ -28,6 +41,7 @@ export function MathJSONOutput({children}) {
2841
</>;
2942
}
3043

44+
3145
<HeroImage path="/img/hero/math-json.jpg" >
3246
# MathJSON
3347
</HeroImage>

‎docusaurus.config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ const config: Config = {
2929
trailingSlash: false,
3030

3131
onBrokenLinks: 'warn',
32+
onBrokenAnchors: 'warn',
3233
onBrokenMarkdownLinks: 'warn',
34+
onDuplicateRoutes: 'warn',
3335

3436
i18n: {
3537
defaultLocale: 'en',

‎package-lock.json

Lines changed: 17 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"@docusaurus/theme-search-algolia": "^3.7.0",
3737
"@mdx-js/react": "^3.1.0",
3838
"clsx": "^2.1.1",
39-
"mathlive": "^0.103.0",
39+
"mathlive": "^0.104.0",
4040
"prism-react-renderer": "^2.4.1",
4141
"react": "^19.0.0",
4242
"react-dom": "^19.0.0",

‎plugins/code-playground/index.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,6 @@ async function toJsxNode(node) {
8888
// "style" is for inline styles
8989
let style = value.match(/:::style\s*\n([\s\S]*?)(\n:::|$)/)?.[1];
9090

91-
/** @fixme: temporary: should be able to use CSS variables instead*/
92-
style = `
93-
math-field {
94-
border: 1px solid var(--neutral-400);
95-
background: var(--neutral-200);
96-
border-radius: 8px;
97-
padding: 8px;
98-
}
99-
` + style;
10091
// "html" and "js" are for editable blocks
10192
const html = value.match(/:::html\s*\n([\s\S]*?)(\n:::|$)/)?.[1];
10293
let js = value.match(

‎plugins/load-scripts/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ loadScripts([
5656
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js",
5757
"https://unpkg.com/@cortex-js/compute-engine",
5858
"https://unpkg.com/mathlive/dist/mathlive.min.js",
59-
"https://unpkg.com/@ui-js/code-playground@module",
59+
"https://unpkg.com/@ui-js/code-playground/dist/code-playground.js@module",
6060
]
6161
);
6262
})();

‎src/components/HeroImage/styles.module.css

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
color: var(--text-color);
3939
text-shadow: 0 0 8px #3335;
4040
position: absolute;
41+
top: 20%;
4142
bottom: 0;
4243
left: 0;
4344
padding-bottom: 1em;
@@ -46,10 +47,25 @@
4647
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0 0 0 / .6) 100%) repeat scroll 0 0;
4748
}
4849

50+
.heroText > div {
51+
display: flex;
52+
flex-direction: row; /* Default, but can be explicit */
53+
align-items: stretch; /* Makes all children take the height of the tallest */
54+
}
55+
56+
.heroText a {
57+
flex: 1;
58+
}
59+
60+
.heroText a div {
61+
height: 100%;
62+
}
63+
64+
4965
@media screen and (max-width: 1024px) {
5066
.heroText {
51-
top: 0;
52-
bottom: auto;
67+
top: 2em;
68+
bottom: 0;
5369
padding: 0;
5470
}
5571

‎src/css/custom.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ math-field {
5050
padding: 8px;
5151
}
5252

53+
:root[data-theme="dark"] math-field {
54+
background: var(--neutral-200);
55+
color: var(--neutral-900);
56+
border-color: var(--neutral-400);
57+
}
58+
5359

5460
.table-of-contents {
5561
/* Do not display scrollbars: */

‎src/theme/NotFound/Content/index.tsx

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import React, {type ReactNode} from 'react';
2+
import clsx from 'clsx';
3+
import type {Props} from '@theme/NotFound/Content';
4+
5+
export default function NotFoundContent({className}: Props): ReactNode {
6+
return (
7+
<main className={clsx('container margin-vert--xl', className)}>
8+
<style>
9+
{`
10+
html {
11+
font-family: system-ui,-apple-system,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
12+
font-display: swap;
13+
text-align: center;
14+
color: #555;
15+
fill: currentColor;
16+
}
17+
18+
p {
19+
margin: 0;
20+
}
21+
22+
h1 {
23+
font-size: 32px;
24+
line-height: 1.125;
25+
font-weight: 600;
26+
letter-spacing: 0.004em;
27+
margin: 0 0 1em 0;
28+
width: 420px;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
}
33+
34+
h2 {
35+
font-size: 112px;
36+
font-weight: 600;
37+
line-height: .7;
38+
}
39+
h3 {
40+
font-size: 100px;
41+
font-weight: 600;
42+
line-height: .7;
43+
}
44+
h2, h3 {
45+
color: hsl(210, 50%, 20%);
46+
margin: 0;
47+
}
48+
/* h2, h3 {
49+
background: linear-gradient(#eee, #333);
50+
-webkit-background-clip: text;
51+
background-clip: text;
52+
-webkit-text-fill-color: transparent;
53+
} */
54+
.card404 {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
flex-flow: column wrap;
59+
}
60+
61+
.cols {
62+
display: flex;
63+
width: min-content;
64+
flex-flow: row;
65+
}
66+
67+
.rows {
68+
display: flex;
69+
flex-flow: row wrap;
70+
width: min-content;
71+
}
72+
73+
.rows * {
74+
width: 100%;
75+
}
76+
77+
.fa-w-8 {
78+
width: 8px;
79+
vertical-align: -5px;
80+
}
81+
82+
svg[data-icon='compass'] {
83+
width: 188px;
84+
padding: 32px;
85+
fill: url(#gradient) #447799;
86+
animation: 3s infinite alternate cubic-bezier(0.5, 0, 0.32, 0.67) wiggle
87+
}
88+
89+
@keyframes wiggle {
90+
from { transform: rotate(0); }
91+
20% { transform: rotate(5deg); }
92+
45% { transform: rotate(-10deg); }
93+
70% { transform: rotate(15deg); }
94+
to { transform: rotate(0); }
95+
}
96+
97+
a, a:visited, a:active {
98+
font-size: 24px;
99+
text-decoration: none;
100+
color: #0066ce;
101+
}
102+
103+
a:hover {
104+
text-decoration: underline;
105+
}
106+
107+
@media only screen and (max-width: 600px) {
108+
109+
h1 {
110+
max-width: 320px;
111+
width: auto;
112+
}
113+
h2 {
114+
font-size: 64px;
115+
}
116+
h3 {
117+
font-size: 50px;
118+
}
119+
svg[data-icon='compass'] {
120+
width: 94px;
121+
}
122+
}
123+
124+
@media (prefers-color-scheme: dark) {
125+
body {
126+
background-color: hsl(210, 50%, 16%);
127+
color: #fffff0;
128+
}
129+
h2, h3 {
130+
color: hsl(210, 50%, 90%);
131+
}
132+
svg[data-icon='compass'] {
133+
fill: url(#gradient-dark) #447799;
134+
}
135+
}
136+
137+
`}
138+
</style>
139+
<svg style={{width:0,height:0,position:"absolute"}} aria-hidden="true" focusable="false">
140+
<linearGradient id="gradient" x2="1" y2="1">
141+
<stop offset="0%" stop-color="hsl(210, 60%, 40%)" />
142+
<stop offset="50%" stop-color="hsl(210, 50%, 30%)" />
143+
<stop offset="100%" stop-color="hsl(210, 50%, 20%)" />
144+
</linearGradient>
145+
<linearGradient id="gradient-dark" x2="1" y2="1">
146+
<stop offset="0%" stop-color="hsl(210, 60%, 60%)" />
147+
<stop offset="50%" stop-color="hsl(210, 50%, 40%)" />
148+
<stop offset="100%" stop-color="hsl(210, 50%, 35%)" />
149+
</linearGradient>
150+
</svg>
151+
<div className="card404">
152+
<div className="cols">
153+
<div className="rows">
154+
<h2>404</h2>
155+
<h3>error</h3>
156+
</div>
157+
<p><svg aria-hidden="true" data-prefix="fal" data-icon="compass" className="svg-inline--fa fa-compass fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M264.97 272.97c9.38-9.37 9.38-24.57 0-33.94-9.37-9.37-24.57-9.37-33.94 0-9.38 9.37-9.38 24.57 0 33.94 9.37 9.37 24.57 9.37 33.94 0zM351.44 125c-2.26 0-4.51.37-6.71 1.16l-154.9 55.85c-7.49 2.7-13.1 8.31-15.8 15.8l-55.85 154.91c-5.65 15.67 10.33 34.27 26.4 34.27 2.26 0 4.51-.37 6.71-1.16l154.9-55.85c7.49-2.7 13.1-8.31 15.8-15.8l55.85-154.9c5.64-15.67-10.33-34.28-26.4-34.28zm-58.65 175.79l-140.1 50.51 50.51-140.11 140.11-50.51-50.52 140.11zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216z"></path></svg>
158+
</p>
159+
</div>
160+
<h1>The page you’re looking for can’t be found</h1>
161+
</div>
162+
</main>
163+
);
164+
}

0 commit comments

Comments
 (0)