Add Kitchensink, important hydration fix

Author: Josh-Cena

package.json

@@ -22,6 +22,7 @@
     "@types/color": "^3.0.5",
     "@types/express": "^4",
     "@types/node": "^20.8.9",
+    "@types/prismjs": "^1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-helmet-async": "^1.0.3",
@@ -57,6 +58,7 @@
     "github-slugger": "^2.0.0",
     "hast-util-to-text": "^4.0.0",
     "prism-react-renderer": "^2.1.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",

project-words.txt

@@ -8,16 +8,20 @@ huayu
 infty
 joshcena
 katex
+kitchensink
+kwargs
 luo
 mathcal
 mdast
 mdxjs
 metastring
 noninteractive
 noreply
+numpy
 peaceiris
 pipeable
 posix
+randcolor
 rehype
 saturationl
 scrolly
@@ -27,4 +31,5 @@ svgr
 triaging
 tseslint
 wfla
+wordcloud
 zhihu

server/index.ts

@@ -44,13 +44,14 @@ export async function createServer(
       )) as typeof import("../src/server-entry");
 
       const context: Record<string, unknown> = {};
-      const appHtml = await render(url, context);
+      const appHTML = await render(url, context);
 
       const html = template
-        .replace("<!--body-->", appHtml.body)
-        .replace("<!--metaTags-->", appHtml.metaTags)
-        .replace(/(?<=<head[^>]+)(?=>)/, ` ${appHtml.htmlAttributes}`)
-        .replace(/(?<=<body[^>]+)(?=>)/, ` ${appHtml.bodyAttributes}`);
+        // The HTML may contain dollar signs, which should not be special!
+        .replace("<!--body-->", () => appHTML.body)
+        .replace("<!--metaTags-->", () => appHTML.metaTags)
+        .replace(/(?<=<head[^>]+)(?=>)/, () => ` ${appHTML.htmlAttributes}`)
+        .replace(/(?<=<body[^>]+)(?=>)/, () => ` ${appHTML.bodyAttributes}`);
 
       res
         .status(Number(context.status ?? 200))
@@ -63,7 +64,7 @@ export async function createServer(
         throw e;
       }
       viteServer.ssrFixStacktrace(e);
-      console.log(e.stack);
+      console.log(e);
       res.status(500).end(e.stack);
     }
   });

src/components/CodeBlock/index.tsx

@@ -71,7 +71,7 @@ export default function CodeBlock({
                         <span
                           // eslint-disable-next-line react/no-array-index-key
                           key={j}
-                          {...getTokenProps({ token, key: j })}
+                          {...getTokenProps({ token })}
                         />
                       ))}
                       <br />

src/global.css

@@ -46,27 +46,6 @@
   --color-shadow: #ffffff20;
 }
 
-code {
-  font-family: var(--font-code);
-  font-size: small;
-  background-color: var(--color-shadow);
-  padding: 4px;
-  border-radius: 4px;
-  color: var(--color-text);
-}
-
-pre {
-  font-family: var(--font-code);
-  font-size: 1em;
-}
-
-pre code {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-  color: unset;
-}
-
 @font-face {
   font-family: CharisSILW;
   src: url(assets/CharisSIL-Regular.woff2);
@@ -130,6 +109,38 @@ button {
   font-size: 1em;
 }
 
+code {
+  font-family: var(--font-code);
+  font-size: small;
+  background-color: var(--color-shadow);
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--color-text);
+}
+
+pre {
+  font-family: var(--font-code);
+  font-size: 1em;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: unset;
+}
+
+blockquote {
+  padding-left: 1em;
+  border-left: 4px solid var(--color-text-subdued);
+  color: var(--color-text-subdued);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-left: var(--margin-paragraph);
+}
+
 .tooltip {
   --rt-opacity: 1;
   background-color: var(--color-background);

src/pages/index.module.css

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  border: none;
+  color: var(--color-text);
+  margin: 0;
+  margin-top: 2em;
+  padding: 0;
 }
 
 .quote::before,

src/pages/notes/kitchensink.mdx

@@ -0,0 +1,165 @@
+---
+description: A collection of all Markdown syntaxes — for testing
+---
+
+# Kitchensink
+
+import text from "./kitchensink.mdx?raw";
+import CodeBlock from "@/components/CodeBlock";
+
+<details>
+  <summary>Markdown source</summary>
+  <CodeBlock language="md">{text}</CodeBlock>
+</details>
+
+## Basic Markdown
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+- _Italic_
+- **Bold**
+- **_Bold and italic_**
+- ~~Strikethrough~~
+- `Inline code`
+- [Link](https://www.example.com)
+- [Link with title](https://www.example.com "Example")
+
+A normal paragraph:
+
+> Blockquote
+>
+> > Nested blockquote
+>
+> Yes
+
+Another normal paragraph:
+
+1. `ol`
+   - `ol > ul`
+     - `ol > ul > ul`
+     - ...
+   - ...
+2. ...
+   1. `ol > ol`
+   2. ...
+
+- [x] Task list
+- [ ] Task
+- [ ] Task
+  - [ ] Nested
+  - [ ] Nested
+
+![Local image](assets/yale-logo.png)
+
+This is a rule:
+
+---
+
+Footnote[^1]
+
+Named footnote[^named]
+
+[^named]: This is a named footnote.
+[^1]: This is a footnote.
+
+## Math
+
+Inline: $x^2 + y^2 = z^2$
+
+Block:
+
+$$
+\begin{aligned}
+  x^2 + y^2 &= z^2 \\
+  x^2 &= z^2 - y^2 \\
+  x &= \sqrt{z^2 - y^2}
+\end{aligned}
+$$
+
+## Code snippets
+
+```plain
+  ___________________________
+< I'm an expert in my field. >
+  ---------------------------
+         \   ^__^
+          \  (oo)\_______
+             (__)\       )\/\
+                 ||----w |
+                 ||     ||
+```
+
+```html
+<pre></pre>
+```
+
+```js
+const f = () => {
+  return Math.random();
+};
+```
+
+```css
+:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+```
+
+```rust
+#[cfg(test)]
+mod tests {
+    #[test]
+    fn it_works() {
+        assert_eq!(2 + 2, 4);
+    }
+}
+```
+
+```python
+from wordcloud import WordCloud
+import pandas as pd
+import numpy as np
+
+color1 = np.array([69, 61, 59])
+color2 = np.array([38, 90, 77])
+
+name = 'song'
+df = pd.read_csv(f'{name}_count.csv', names=['name', 'count'])
+freq = dict(zip(df['name'], df['count']))
+
+def color_func(word, font_size, position, orientation, random_state=None, **kwargs):
+    randcolor = color1 + np.floor((color2 - color1) * np.random.random())
+    return("rgb(%d, %d, %d)" % tuple(randcolor))
+```
+
+## Tables
+
+### Markdown table
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+## HTML
+
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>_Works_! **HTML** <em>works</em> too.</dd>
+</dl>

yarn.lock

@@ -1598,7 +1598,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prismjs@npm:^1.26.0":
+"@types/prismjs@npm:^1, @types/prismjs@npm:^1.26.0":
   version: 1.26.3
   resolution: "@types/prismjs@npm:1.26.3"
   checksum: 3e8a64bcf0ab5f9a47ec2590938c5a8a20ac849b4949a95ed96e73e64cb890fc56e9c9b724286914717458267b28405f965709e1b9f80db5d68817a7ce5a18a9
@@ -7038,6 +7038,7 @@ __metadata:
     "@types/color": "npm:^3.0.5"
     "@types/express": "npm:^4"
     "@types/node": "npm:^20.8.9"
+    "@types/prismjs": "npm:^1"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18"
     "@types/react-helmet-async": "npm:^1.0.3"
@@ -7065,6 +7066,7 @@ __metadata:
     prettier: "npm:^3.0.3"
     prettier-config-jc: "npm:^2.3.0"
     prism-react-renderer: "npm:^2.1.0"
+    prismjs: "npm:^1.29.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-helmet-async: "npm:^1.3.0"
@@ -7228,6 +7230,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.29.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: d906c4c4d01b446db549b4f57f72d5d7e6ccaca04ecc670fb85cea4d4b1acc1283e945a9cbc3d81819084a699b382f970e02f9d1378e14af9808d366d9ed7ec6
+  languageName: node
+  linkType: hard
+
 "promise-retry@npm:^2.0.1":
   version: 2.0.1
   resolution: "promise-retry@npm:2.0.1"