markdown testing

2024-07-07 23:46:35 +01:00 · 2024-07-07 23:46:35 +01:00 · c76b25caf2
parent 9b6339a8aa
commit c76b25caf2
9 changed files with 211 additions and 80 deletions
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
 		"@vitejs/plugin-react": "^4.0.3",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.5",
+		"vite-plugin-static-copy": "^1.0.6",
 		"vite-plugin-top-level-await": "^1.3.1",
 		"vite-plugin-wasm": "^3.2.2"
 	}
--- a/src/components/Default.tsx
+++ b/src/components/Default.tsx
@ -4,7 +4,7 @@ export function Default() {
      <header>
        Orion Reed
      </header>
-      <h1>Hello! 👋</h1>
+      <h2>Hello! 👋</h2>
      <p>
        My research investigates the intersection of computing, human-system
        interfaces, and emancipatory politics. I am interested in the
@ -20,14 +20,14 @@ export function Default() {
        and computational artifacts.
      </p>

-      <h1>My work</h1>
+      <h2>My work</h2>
      <p>
        Alongside my independent work I am a researcher at <a href="https://block.science/">Block Science</a> building{' '}
        <i>knowledge organisation infrastructure</i> and an engineer-in-residence at <a href="https://tldraw.com">tldraw</a>. I am also part of the nascent <a href="https://libcomp.org/">Liberatory Computing</a>{' '}
        collective, occasional collaborator with <a href="https://economicspace.agency/">ECSA</a> and a co-organiser of the <a href="https://canvasprotocol.org/">OCWG</a>.
      </p>

-      <h1>Get in touch</h1>
+      <h2>Get in touch</h2>
      <p>
        I am on Twitter <a href="https://twitter.com/OrionReedOne">@OrionReedOne</a>,
        Mastodon <a href="https://hci.social/@orion">@orion@hci.social</a> and GitHub <a href="https://github.com/orionreed">@orionreed</a>. You can also shoot me an email <a href="mailto:me@orionreed.com">me@orionreed.com</a>
@ -35,28 +35,23 @@ export function Default() {

      <span className="dinkus">***</span>

-      <h1>Talks</h1>
+      <h2>Talks</h2>
      <ol reversed>
        <li><a
          href="https://www.youtube.com/watch?v=csGNVaB83Rk">Spatial
-          Canvases: Towards an Integration Domain for HCI @ TfT Rocks 2024</a>
-          <p>
-            <small>
-              <a href="artifact/tft-rocks-integration-domain.pdf">See the slides here.</a> This talk was originally presented at Causal Islands LA (older slides <a href="artifact/causal-islands-integration-domain.pdf">here)</a>
-            </small>
-          </p>
+          Canvases: Towards an Integration Domain for HCI @ TfT Rocks 2024</a> (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
        </li>
        <li><a
          href="https://www.youtube.com/watch?v=-q-kk-NMFbA">Knowledge Organisation Infrastructure Demo @ NPC
          Denver</a></li>
      </ol>
-      <h1>Writing</h1>
+      <h2>Writing</h2>
      <ol reversed>
        <li><a
          href="https://blog.block.science/objects-as-reference-toward-robust-first-principles-of-digital-organization/">Objects
          as Reference: Toward Robust First Principles of Digital Organization</a></li>
      </ol>
-      <h1>Things I made recently</h1>
+      <h2>Things I made recently</h2>
      <ol reversed>
        <li><a
          href="https://twitter.com/OrionReedOne/status/1772934478421188620">Tiny 3D HTML/DOM viewer (you can paste it into your console)</a>
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@ -22,6 +22,9 @@ export function Post() {

  return (
    <main>
+      <header>
+        <a href="/" style={{ textDecoration: 'none' }}>Orion Reed</a>
+      </header>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </main>
--- a/src/css/style.css
+++ b/src/css/style.css
@ -9,36 +9,11 @@ body {
  height: 100%;
 }

-.canvas-mode {
-  overflow: hidden;
-  & #toggle-physics {
-    display: block;
-  }
+video {
+  width: 100%;
+  height: auto;
 }

-.tldraw__editor {
-  overscroll-behavior: none;
-  position: fixed;
-  inset: 0px;
-  overflow: hidden;
-}
-
-.tl-background {
-  background-color: transparent;
-}
-
-.tlui-debug-panel {
-  display: none;
-}
-
-.overflowing {
-  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  background-color: white;
-}
-
-/* Non-tldraw stuff */
-
 main {
  max-width: 60em;
  margin: 0 auto;
@ -53,8 +28,19 @@ main {
 }

 h1 {
+  font-size: 2rem;
+}
+h2 {
  font-size: 1.5rem;
-  margin-top: 1em;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
 }

 header {
@ -68,14 +54,58 @@ i {
  font-variation-settings: "slnt" -15;
 }

+code {
+  background-color: #38424c;
+  width: 100%;
+  color: white;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+}
+
+blockquote {
+  margin: -1em;
+  padding: 1em;
+  background-color: #f1f1f1;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-radius: 4px;
+  & p {
+    font-variation-settings: "CASL" 1;
+    margin: 0;
+  }
+}
+
 p {
  font-family: Recursive;
  margin-top: 0;
-  margin-bottom: 0.6em;
+  margin-bottom: 1.5em;
  font-size: 1.1em;
  font-variation-settings: "wght" 350;
 }

+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  margin-bottom: 1em;
+  font-variation-settings: "mono" 1;
+  font-variation-settings: "casl" 0;
+  th,
+  td {
+    padding: 0.5em;
+    border: 1px solid #ddd;
+  }
+
+  th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+}
+
 a {
  font-variation-settings: "CASL" 0;
  &:hover {
@ -124,7 +154,8 @@ p a {
  margin-bottom: 0em;
 }

-ol {
+ol,
+ul {
  padding-left: 0;
  font-size: 1rem;
  & li::marker {
@ -132,6 +163,19 @@ ol {
  }
 }

+@media (max-width: 600px) {
+  main {
+    padding: 2em;
+  }
+  header {
+    margin-bottom: 1em;
+  }
+  ol {
+    list-style-position: inside;
+  }
+}
+
+/* CANVAS SHENANIGANS */
 #toggle-physics,
 #toggle-canvas {
  position: fixed;
@ -159,18 +203,6 @@ ol {
  display: none;
 }

-@media (max-width: 600px) {
-  main {
-    padding: 2em;
-  }
-  header {
-    margin-bottom: 1em;
-  }
-  ol {
-    list-style-position: inside;
-  }
-}
-
 .tl-html-layer {
  font-family: "Recursive";
  font-variation-settings: "MONO" 1;
@ -196,3 +228,31 @@ ol {
  opacity: 0 !important;
  transition: opacity 0.25s ease-in-out;
 }
+
+.canvas-mode {
+  overflow: hidden;
+  & #toggle-physics {
+    display: block;
+  }
+}
+
+.tldraw__editor {
+  overscroll-behavior: none;
+  position: fixed;
+  inset: 0px;
+  overflow: hidden;
+}
+
+.tl-background {
+  background-color: transparent;
+}
+
+.tlui-debug-panel {
+  display: none;
+}
+
+.overflowing {
+  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  background-color: white;
+}
--- a/src/posts/test.md
+++ b/src/posts/test.md
@ -1,10 +1,45 @@
-# This is a title
+# Scoped Propagators
 this is some text under the title

+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 ullamco laboris nisi ut aliquip ex 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.
+
+## Subheading Example
+Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. [Here us a link](https://google.com). nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
+
+### Sub-subheading Example
+Phasellus et lorem id felis nonummy placerat. Fusce aliquam vestibulum ipsum. Integer id sapien. Praesent id justo in neque elementum ultrices. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nam aliquam sem et tortor. Quisque sed augue a felis congue aliquam. Aliquam erat volutpat. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+
+> This is a blockquote. It should be rendered in a special way to highlight the quoted text.
+> 
+> — Author Name
+
+A code block:
+```ts
+console.log('hello world');
+```
+
+**Bold text example** and *italic text example*.
+
 here is an image:
-![image](image.png)
+![paintbrush](paintbrush.mp4)

 requirements:
 - basic html (headings, quotes, italics, bold...)
 - images and videos (easy authoring, what are the vercel limits too?)
- static gen, we don't want SPA pop-in, we want 100% prerendered html
+- static gen, we don't want SPA pop-in, we want 100% prerendered html
+
+## Another Subheading
+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 ullamco laboris nisi ut aliquip ex 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.
+
+## Table Example
+
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Row 1    | Data 1   | Data 2   |
+| Row 2    | Data 3   | Data 4   |
+| Row 3    | Data 5   | Data 6   |
+
+### Another Sub-subheading
+Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
+
+Phasellus et lorem id felis nonummy placerat. Fusce aliquam vestibulum ipsum. Integer id sapien. Praesent id justo in neque elementum ultrices. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nam aliquam sem et tortor. Quisque sed augue a felis congue aliquam. Aliquam erat volutpat. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
--- a/src/posts/test/paintbrush.mp4
+++ b/src/posts/test/paintbrush.mp4
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff39095ae53921e6317c37ed5da3670983b10f593ce20e3ec0ad307b64462735
+size 432695
--- a/src/utils/markdownPlugin.ts
+++ b/src/utils/markdownPlugin.ts
@ -0,0 +1,18 @@
+import { Plugin } from 'vite'
+import matter from 'gray-matter';
+import { markdownToHtml } from './markdownToHtml';
+import path from 'path';
+
+export const markdownPlugin: Plugin = {
+  name: 'markdown-plugin',
+  enforce: 'pre',
+  transform(code, id) {
+    if (id.endsWith('.md')) {
+      const { data, content } = matter(code);
+      const filename = path.basename(id, '.md');
+      const html = markdownToHtml(filename, content);
+      const htmlString = JSON.stringify({ html });
+      return `export default ${htmlString};`;
+    }
+  },
+};
--- a/src/utils/markdownToHtml.ts
+++ b/src/utils/markdownToHtml.ts
@ -6,15 +6,35 @@ const md = new MarkdownIt({
  linkify: true,
 });

+const mediaSrc = (folderName: string, fileName: string) => {
+  return `/posts/${folderName}/${fileName}`
+}
+
 // Customize Markdown-to-HTML mapping here
-md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
+// md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
+md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
+  console.log('tokens', tokens)
+  return `<code>${tokens[idx].content}</code>`;
+}
 md.renderer.rules.image = (tokens, idx, options, env, self) => {
+  // console.log('env', env)
  const token = tokens[idx];
  const src = token.attrGet('src');
-  const alt = token.content;
-  return `<img src="${src}" alt="${alt}" class="custom-image" />`;
+  const alt = token.content
+  const postName = env.postName
+  const formattedSrc = mediaSrc(postName, src)
+
+  if (src.endsWith('.mp4')) {
+    return `<video controls>
+              <source src="${formattedSrc}" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>`;
+  }
+
+  return `<img src="${formattedSrc}" alt="${alt}" />`;
+
 };

-export function markdownToHtml(content: string): string {
-  return md.render(content);
+export function markdownToHtml(postName: string, content: string): string {
+  return md.render(content, { postName: postName });
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,32 +1,28 @@
-import { defineConfig, Plugin } from 'vite'
+import { markdownPlugin } from './src/utils/markdownPlugin';
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
-import matter from 'gray-matter';
-import { markdownToHtml } from './src/utils/markdownToHtml';
+import { viteStaticCopy } from 'vite-plugin-static-copy';

-const markdownPlugin: Plugin = {
-  name: 'markdown-plugin',
-  enforce: 'pre',
-  transform(code, id) {
-    if (id.endsWith('.md')) {
-      const { data, content } = matter(code);
-      const html = markdownToHtml(content);
-      const jsonContent = JSON.stringify({ ...data, html });
-      return `export default ${jsonContent};`;
-    }
-  },
-};

 export default defineConfig({
  plugins: [
    react(),
    wasm(),
    topLevelAwait(),
-    markdownPlugin
+    markdownPlugin,
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'src/posts/!(*.md)', // Copy all files except .md files
+          dest: 'posts'
+        }
+      ]
+    })
  ],
  build: {
-    sourcemap: true, // Enable source maps for production
+    sourcemap: true,
  },
  publicDir: 'src/public',
  resolve: {