perf: use kumiko styling for benchmarks site

aidenybai · Nov 24, 2021 · 270e367 · 270e367
1 parent dd695b0
commit 270e367
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 186 deletions.
diff --git a/benchmarks/index.html b/benchmarks/index.html
@@ -14,7 +14,7 @@
         width="80"
         height="80"
         viewBox="0 0 250 250"
-        style="fill: #70b7fd; color: #fff; position: absolute; top: 0; border: 0; right: 0"
+        style="fill: #4e2372; color: #fff; position: absolute; top: 0; border: 0; right: 0"
         aria-hidden="true"
       >
         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
@@ -31,7 +31,7 @@
         ></path></svg
     ></a>
 
-    <h1>Million Benchmarks</h1>
+    <h4>Million Benchmarks</h4>
     <p>
       These benchmarks are now 100% compliant with the
       <a href="/~https://github.com/krausest/js-framework-benchmark" target="_blank"
@@ -56,8 +56,6 @@ <h1>Million Benchmarks</h1>
         ><b>→ Click to check out the benchmark source code!</b></a
       >
     </p>
-    <small>Empty result for benchmark test means the library doesn't work</small>
-    <hr />
 
     <script src="./main.jsx" type="module"></script>
   </body>

diff --git a/benchmarks/main.jsx b/benchmarks/main.jsx
@@ -1,4 +1,4 @@
-import 'github-markdown-css/github-markdown.css';
+import 'kumiko/dist/kumiko.css';
 import './style.css';
 
 import { createElement, patch } from '../src/index';
@@ -38,20 +38,6 @@ const suites = [
       localStorage.logs = JSON.stringify([...logs, ...history]);
     }),
 );
-
-const generateLogMarkdown = () =>
-  `Benchmarks compiled on \`${new Date().toLocaleString()}\`\n\n**UA:** ${
-    navigator.userAgent
-  }\n\n---\n\n${[...logs]
-    .map((logGroup) => {
-      const logGroupCopy = [...logGroup];
-      const title = logGroupCopy.shift();
-      return `${title.replace('Running: ', '').split(' - ')[0]}\n\n\`\`\`\n${logGroupCopy.join(
-        '\n',
-      )}\n\`\`\`\n`;
-    })
-    .join('\n')}`;
-
 const vnode = () => (
   <div>
     {suites.map((suite) => {
@@ -72,70 +58,18 @@ const vnode = () => (
       );
     })}
     <details open={!!logs.length} style={{ paddingTop: '20px' }}>
-      <summary key="logs">
-        Logs{' '}
-        <button
-          onclick={() => {
-            logs.length = 0;
-            localStorage.logs = JSON.stringify(history);
-            patch(el, vnode());
-          }}
-        >
-          🗑️
-        </button>{' '}
-        <button
-          onclick={async () => {
-            navigator.clipboard.writeText(generateLogMarkdown());
-          }}
-        >
-          📋
-        </button>
-      </summary>
+      <summary key="logs">Logs</summary>
 
       <div style={{ paddingTop: '20px' }}>
-        {logs.map(
-          (logGroup) =>
-            logGroup.length && (
-              <pre>
-                <code>{logGroup.join('\n')}</code>
-              </pre>
-            ),
-        )}
+        {logs.map((logGroup) => logGroup.length && <pre>{logGroup.join('\n')}</pre>)}
       </div>
     </details>
 
     {history.length ? (
       <details style={{ paddingTop: '20px', opacity: 0.5 }}>
-        <summary key="history">
-          History{' '}
-          <button
-            onclick={() => {
-              history.length = 0;
-              delete localStorage.logs;
-              patch(el, vnode());
-            }}
-          >
-            🗑️
-          </button>{' '}
-          <button
-            onclick={async () => {
-              navigator.clipboard.writeText(generateLogMarkdown());
-            }}
-          >
-            📋
-          </button>
-        </summary>
+        <summary key="history">History</summary>
 
-        <div>
-          {history.map(
-            (logGroup) =>
-              logGroup.length && (
-                <pre>
-                  <code>{logGroup.join('\n')}</code>
-                </pre>
-              ),
-          )}
-        </div>
+        <div>{history.map((logGroup) => logGroup.length && <pre>{logGroup.join('\n')}</pre>)}</div>
       </details>
     ) : (
       ''

diff --git a/benchmarks/style.css b/benchmarks/style.css
@@ -37,3 +37,7 @@
     padding: 15px;
   }
 }
+:root {
+  --color-accent: #4e2372;
+  --links: #4e2372;
+}
diff --git a/package.json b/package.json
@@ -80,16 +80,16 @@
     "@testing-library/dom": "^8.11.1",
     "@types/glob": "^7.2.0",
     "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.9",
+    "@types/node": "^16.11.10",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "benchmark": "^2.1.4",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
-    "github-markdown-css": "^5.0.0",
     "glob": "^7.2.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
+    "kumiko": "^0.0.1",
     "lint-staged": "^12.1.2",
     "lodash": "^4.17.21",
     "ora": "^6.0.1",