From c76b25caf28e86794168856b623cd872f3a89f15 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Sun, 7 Jul 2024 23:46:35 +0100 Subject: [PATCH] markdown testing --- package.json | 1 + src/components/Default.tsx | 19 ++--- src/components/Post.tsx | 3 + src/css/style.css | 146 ++++++++++++++++++++++++---------- src/posts/test.md | 41 +++++++++- src/posts/test/paintbrush.mp4 | 3 + src/utils/markdownPlugin.ts | 18 +++++ src/utils/markdownToHtml.ts | 30 +++++-- vite.config.ts | 30 +++---- 9 files changed, 211 insertions(+), 80 deletions(-) create mode 100644 src/posts/test/paintbrush.mp4 create mode 100644 src/utils/markdownPlugin.ts diff --git a/package.json b/package.json index fe8f8af..4080fc6 100644 --- 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" } diff --git a/src/components/Default.tsx b/src/components/Default.tsx index 5c5022b..01db0b4 100644 --- a/src/components/Default.tsx +++ b/src/components/Default.tsx @@ -4,7 +4,7 @@ export function Default() {
Orion Reed
-

Hello! 👋

+

Hello! 👋

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.

-

My work

+

My work

Alongside my independent work I am a researcher at Block Science building{' '} knowledge organisation infrastructure and an engineer-in-residence at tldraw. I am also part of the nascent Liberatory Computing{' '} collective, occasional collaborator with ECSA and a co-organiser of the OCWG.

-

Get in touch

+

Get in touch

I am on Twitter @OrionReedOne, Mastodon @orion@hci.social and GitHub @orionreed. You can also shoot me an email me@orionreed.com @@ -35,28 +35,23 @@ export function Default() { *** -

Talks

+

Talks

  1. Spatial - Canvases: Towards an Integration Domain for HCI @ TfT Rocks 2024 -

    - - See the slides here. This talk was originally presented at Causal Islands LA (older slides here) - -

    + Canvases: Towards an Integration Domain for HCI @ TfT Rocks 2024 (slides)
  2. Knowledge Organisation Infrastructure Demo @ NPC Denver
-

Writing

+

Writing

  1. Objects as Reference: Toward Robust First Principles of Digital Organization
-

Things I made recently

+

Things I made recently

  1. Tiny 3D HTML/DOM viewer (you can paste it into your console) diff --git a/src/components/Post.tsx b/src/components/Post.tsx index d9f6754..0642af1 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -22,6 +22,9 @@ export function Post() { return (
    +
    + Orion Reed +

    {post.title}

    diff --git a/src/css/style.css b/src/css/style.css index 6196927..e475795 100644 --- 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; +} diff --git a/src/posts/test.md b/src/posts/test.md index 11aaa28..9779918 100644 --- 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 \ No newline at end of file +- 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. \ No newline at end of file diff --git a/src/posts/test/paintbrush.mp4 b/src/posts/test/paintbrush.mp4 new file mode 100644 index 0000000..3f56bf0 --- /dev/null +++ b/src/posts/test/paintbrush.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ff39095ae53921e6317c37ed5da3670983b10f593ce20e3ec0ad307b64462735 +size 432695 diff --git a/src/utils/markdownPlugin.ts b/src/utils/markdownPlugin.ts new file mode 100644 index 0000000..17d45c1 --- /dev/null +++ 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};`; + } + }, +}; \ No newline at end of file diff --git a/src/utils/markdownToHtml.ts b/src/utils/markdownToHtml.ts index 857eabb..6396d85 100644 --- 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 = () => '

    '; +// md.renderer.rules.paragraph_open = () => '

    '; +md.renderer.rules.code_block = (tokens, idx, options, env, self) => { + console.log('tokens', tokens) + return `${tokens[idx].content}`; +} 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 `${alt}`; + const alt = token.content + const postName = env.postName + const formattedSrc = mediaSrc(postName, src) + + if (src.endsWith('.mp4')) { + return ``; + } + + return `${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 }); } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 77bb315..4f297d4 100644 --- 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: {