Migrate to djot

.posthtmlrc

@@ -8,13 +8,6 @@
         "components"
       ]
     },
-    "posthtml-markdownit": {
+    "posthtml-djot": {}
-      "plugins": [
-        {
-          "plugin": "markdown-it-sup",
-          "options": {}
-        }
-      ]
-    }
   }
 }

package.json

@@ -9,20 +9,19 @@
   ],
   "scripts": {
     "start": "parcel",
-    "build": "parcel build"
+    "build": "pnpm run -r build; parcel build"
   },
   "devDependencies": {
     "@parcel/compressor-brotli": "^2.15.4",
     "@parcel/compressor-gzip": "^2.15.4",
     "@parcel/config-default": "^2.15.4",
     "@parcel/optimizer-cssnano": "^2.15.4",
-    "markdown-it-sup": "^2.0.0",
     "parcel": "^2.15.4",
     "postcss": "^8.5.6",
     "posthtml": "^0.16.6",
     "posthtml-component": "github:StratusFearMe21/posthtml-components#reorder_processing",
     "posthtml-include": "^2.0.1",
-    "posthtml-markdownit": "^3.1.2",
+    "posthtml-djot": "link:posthtml-djot",
     "sharp": "^0.33.5"
   },
   "dependencies": {

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'posthtml-djot'

posthtml-djot/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

posthtml-djot/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+coverage
+dist/
+*.log

posthtml-djot/LICENSE

@@ -0,0 +1,21 @@
+MIT License (MIT)
+
+Copyright (c) TheComputerM
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

posthtml-djot/README.md

@@ -0,0 +1,230 @@
+<div align="center">
+  <img width="150" height="150" title="PostHTML" src="https://posthtml.github.io/posthtml/logo.svg">
+  <h1>posthtml-markdownit</h1>
+  
+  Transform Markdown to HTML
+
+  [![Version][npm-version-shield]][npm]
+  [![Build][github-ci-shield]][github-ci]
+  [![License][license-shield]][license]
+  [![Downloads][npm-stats-shield]][npm-stats]
+</div>
+
+## Introduction
+
+This PostHTML plugin compiles Markdown to HTML using [markdown-it](https://github.com/markdown-it/markdown-it).
+
+Before:
+
+```xml
+<markdown>
+  # Heading 1
+  ---
+
+  Paragraph with some text
+
+  _Italic_
+  **Bold**
+
+  - List item 1
+  - List item 2
+  - List item 3
+</markdown>
+```
+
+After:
+
+```html
+<h1>Heading 1</h1>
+<hr>
+<p>Paragraph with some text</p>
+<p>
+  <em>Italic</em>
+  <strong>Bold</strong>
+</p>
+<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ul>
+```
+
+## Install
+
+```
+npm i -D posthtml posthtml-markdownit
+```
+
+## Usage
+
+```js
+import posthtml from 'posthtml'
+import markdown from 'posthtml-markdownit'
+
+posthtml([
+  markdown()
+])
+  .process('<markdown># Test</markdown>')
+  .then(result => console.log(result.html))
+
+// <h1>Test</h1>
+```
+
+### Importing files
+
+You can import and render Markdown files:
+
+Before:
+
+```xml
+<markdown src="./README.md">
+  # Imported
+</markdown>
+```
+
+After:
+
+```html
+<!-- Here be the contents of README.md, as HTML -->
+<h1>Imported</h1>
+```
+
+## Syntax
+
+### Tags
+
+Both `<markdown>` and `<md>` tags are supported.
+
+Before:
+
+```xml
+<md>
+  # Heading 1
+</md>
+```
+
+After:
+
+```html
+<h1>Heading 1</h1>
+```
+
+By default, the custom tags like `<md>` are replaced with the compiled Markdown. See the [tag attribute](#tag) if you need a wrapping tag around your Markdown content.
+
+### Attributes
+
+You can also use the `markdown` or `md` attributes on an HTML element:
+
+Before:
+
+```html
+<div md>
+  # Heading 1
+</div>
+```
+
+After:
+
+```html
+<h1>Heading 1</h1>
+```
+
+#### `tag`
+
+You can use a `tag` attribute to wrap the resulting markup in a tag:
+
+Before:
+
+```xml
+<md tag="section">
+  # Heading 1
+</md>
+```
+
+After:
+
+```html
+<section>
+  <h1>Heading 1</h1>
+</section>
+```
+
+#### `inline`
+
+You can mark the content to be rendered inline. This is helpful if you're including a file that will be used as an inline element and don't want the enclosing `p` tags.
+
+Before:
+
+```xml
+<div class="example">
+  <markdown src="./example.md" inline>
+    Imported
+  </markdown>
+</div>
+```
+
+After:
+
+```html
+<p class="example">Imported</p>
+```
+
+Instead of:
+
+```html
+<div class="example">
+  <p>Imported</p>
+</div>
+```
+
+## Options
+
+### `root`
+
+Type: `string`\
+Default: `./`
+
+A path relative to which Markdown files will be [imported](#importing-files).
+
+### `encoding`
+
+Type: `string`\
+Default: `utf8`
+
+Encoding for imported Markdown files.
+
+### `markdownit`
+
+Type: `object`\
+Default: `{}`
+
+Options passed to the `markdown-it` library. See the [available options](https://github.com/markdown-it/markdown-it#init-with-presets-and-options).
+
+### `plugins`
+
+Type: `array`\
+Default: `[]`
+
+Plugins for `markdown-it`.
+
+Example:
+
+```js
+import {light as emoji} from 'markdown-it-emoji'
+
+markdown({
+  plugins: [{
+    plugin: emoji,
+    options: {} // Options for markdown-it-emoji
+  }]
+})
+```
+
+[npm]: https://www.npmjs.com/package/posthtml-markdownit
+[npm-version-shield]: https://img.shields.io/npm/v/posthtml-markdownit.svg
+[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-markdownit
+[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-markdownit.svg
+[github-ci]: https://github.com/posthtml/posthtml-markdownit/actions/workflows/nodejs.yml
+[github-ci-shield]: https://github.com/posthtml/posthtml-markdownit/actions/workflows/nodejs.yml/badge.svg
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/npm/l/posthtml-markdownit.svg

posthtml-djot/build.config.ts

@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  rollup: {
+    emitCJS: true,
+  },
+  rootDir: './lib',
+  outDir: '../dist',
+  entries: ['index.js'],
+  declaration: true,
+})

posthtml-djot/lib/index.d.ts

@@ -0,0 +1,32 @@
+import type { ParseOptions } from '@djot/djot/types/parse';
+import type { HTMLRenderOptions } from '@djot/djot/types/html';
+
+export type DjotConfig = {
+  /**
+  Path relative to which markdown files are imported.
+
+  @default './'
+  */
+  root?: string;
+
+  /**
+  Encoding for imported Markdown files.
+
+  @default 'utf8'
+  */
+  encoding?: string;
+
+  /**
+  Options to pass to the `djot` library.
+
+  @default {}
+  */
+  djot?: ParseOptions;
+
+  /**
+  Options to pass to the `djot` HTML renderer.
+
+  @default {}
+  */
+  djot_html?: HTMLRenderOptions;
+};

posthtml-djot/lib/index.js

@@ -0,0 +1,108 @@
+import {render} from 'posthtml-render'
+import {parser} from 'posthtml-parser'
+import * as djot from '@djot/djot'
+import minIndent from 'min-indent'
+import {resolve} from 'node:path'
+import {readFileSync} from 'node:fs'
+import {match} from 'posthtml/lib/api.js'
+
+const normalize = data => {
+  const indents = minIndent(data)
+
+  // Removing indents
+  if (indents !== 0) {
+    const replaceRegex = new RegExp(`^[ \\t]{${indents}}`, 'gm')
+
+    return data.replace(replaceRegex, '')
+  }
+
+  return data
+}
+
+const parse = (data, settings, html_settings, hasTag) => {
+  // Parsing content
+  const parsed = djot.renderHTML(djot.parse(data, settings), html_settings)
+
+  return hasTag ? `\n${parsed}` : parsed
+}
+
+const importDjot = (src, settings) => {
+  const from = resolve(settings.root, src)
+  const content = readFileSync(from, settings.encoding)
+
+  return normalize(content)
+}
+
+const plugin = options => {
+  const settings = {
+    root: './',
+    encoding: 'utf8',
+    djot: {},
+    djot_html: {},
+    ...options
+  }
+
+  return tree => {
+    tree.match = tree.match || match
+    tree.match([
+      {tag: 'dj'},
+      {tag: 'djot'},
+      {attrs: {dj: ''}},
+      {attrs: {djot: ''}}
+    ], node => {
+      let content = ''
+
+      if (['dj', 'djot'].includes(node.tag)) {
+        node.tag = false
+      }
+
+      if (node.attrs) {
+        // Change tag
+        if (node.attrs.tag) {
+          node.tag = node.attrs.tag
+
+          delete node.attrs.tag
+        }
+
+        for (const attribute of ['dj', 'djot']) {
+          if (attribute in node.attrs) {
+            delete node.attrs[attribute]
+          }
+        }
+
+        // Import djot file if specified
+        const src = node.attrs.src || false
+
+        if (src) {
+          content += importDjot(src, settings)
+
+          if (tree.messages) {
+            const from = resolve(settings.root, src)
+
+            tree.messages.push({
+              type: 'dependency',
+              file: from
+            })
+          }
+
+          delete node.attrs.src
+        }
+      }
+
+      // Converting content to html tree
+      content += normalize(render(node.content))
+
+      // Parsing content
+      const parsed = parse(content, settings.djot, settings.djot_html, node.tag)
+
+      // Converting tree to html content
+      node.content = parser(parsed)
+
+      return node
+    })
+
+    return tree
+  }
+}
+
+export default plugin

posthtml-djot/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "posthtml-djot",
+  "description": "A PostHTML plugin to transform Djot",
+  "version": "3.1.2",
+  "license": "MIT",
+  "author": "TheComputerM",
+  "bugs": "https://github.com/posthtml/posthtml-djot/issues",
+  "homepage": "https://github.com/posthtml/posthtml-djot",
+  "repository": "posthtml/posthtml-djot",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vitest",
+    "build": "unbuild",
+    "prepack": "unbuild",
+    "test": "vitest run --coverage",
+    "lint": "biome lint ./lib ./test",
+    "pretest": "npm run lint",
+    "release": "npx np"
+  },
+  "keywords": [
+    "html",
+    "posthtml",
+    "posthtml-plugin",
+    "djot"
+  ],
+  "dependencies": {
+    "min-indent": "^1.0.0",
+    "posthtml": "^0.16.6",
+    "posthtml-parser": "^0.12.0",
+    "posthtml-render": "^3.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.1.1",
+    "@djot/djot": "^0.3.2",
+    "@vitest/coverage-v8": "^3.0.5",
+    "unbuild": "^2.0.0",
+    "vitest": "^3.0.5"
+  }
+}

posthtml-djot/test/expected/basic.html

@@ -0,0 +1,19 @@
+<h1>Heading 1</h1>
+
+
+<p>Paragraph with some text</p>
+
+
+<div>
+<ul>
+<li>List item 1</li>
+<li>List item 2</li>
+<li>List item 3</li>
+</ul>
+</div>
+
+<section>
+<blockquote>
+<p>A quote</p>
+</blockquote>
+</section>

posthtml-djot/test/expected/change-tag.html

@@ -0,0 +1,3 @@
+<section>
+<h1>A markdown heading</h1>
+</section>

posthtml-djot/test/expected/code.html

@@ -0,0 +1,5 @@
+<h1>Heading</h1>
+<pre><code class="language-js">function () {
+  console.log(&quot;Hello&quot;)
+}
+</code></pre>

posthtml-djot/test/expected/importing-inline.html

@@ -0,0 +1 @@
+Hello <em>there</em>

posthtml-djot/test/expected/importing.html

@@ -0,0 +1,2 @@
+<h1>Hello there</h1>
+<h2>Imported content should be above me</h2>

posthtml-djot/test/expected/md-options.html

@@ -0,0 +1 @@
+<p><a href="https://example.com">https://example.com</a></p>

posthtml-djot/test/expected/md-plugin.html

@@ -0,0 +1 @@
+<p>You can use emojis 😃</p>

posthtml-djot/test/fixtures/basic.html

@@ -0,0 +1,17 @@
+<md>
+  # Heading 1
+</md>
+
+<markdown>
+  Paragraph with some text
+</markdown>
+
+<div md>
+  - List item 1
+  - List item 2
+  - List item 3
+</div>
+
+<section markdown>
+  > A quote
+</section>

posthtml-djot/test/fixtures/change-tag.html

@@ -0,0 +1,3 @@
+<md tag="section">
+  # A markdown heading
+</md>

posthtml-djot/test/fixtures/code.html

@@ -0,0 +1,9 @@
+<md>
+    # Heading
+
+    ```js
+    function () {
+      console.log("Hello")
+    }
+    ```
+</md>

posthtml-djot/test/fixtures/importing-inline.html

@@ -0,0 +1 @@
+<md src="test/fixtures/test-inline.md" inline></md>

posthtml-djot/test/fixtures/importing.html

@@ -0,0 +1,3 @@
+<md src="test/fixtures/test.md">
+  ## Imported content should be above me
+</md>

posthtml-djot/test/fixtures/md-options.html

@@ -0,0 +1,3 @@
+<md>
+  https://example.com
+</md>

posthtml-djot/test/fixtures/md-plugin.html

@@ -0,0 +1,3 @@
+<md>
+  You can use emojis :)
+</md>

posthtml-djot/test/fixtures/test-inline.md

@@ -0,0 +1 @@
+Hello _there_

posthtml-djot/test/fixtures/test.md

@@ -0,0 +1 @@
+# Hello there

posthtml-djot/test/test.js

@@ -0,0 +1,59 @@
+import path from 'node:path'
+import {readFileSync} from 'node:fs'
+import {fileURLToPath} from 'node:url'
+import plugin from '../lib/index.js'
+import {test, expect} from 'vitest'
+import posthtml from 'posthtml'
+import {light as emoji} from 'markdown-it-emoji'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const fixture = file => readFileSync(path.join(__dirname, 'fixtures', `${file}.html`), 'utf8').trim()
+const expected = file => readFileSync(path.join(__dirname, 'expected', `${file}.html`), 'utf8').trim()
+
+const clean = html => html.replace(/[^\S\r\n]+$/gm, '').trim()
+
+const process = (_t, name, options, log = false) => {
+  return posthtml([plugin(options)])
+    .process(fixture(name))
+    .then(result => log ? console.log(result.html) : clean(result.html))
+    .then(html => expect(html).toEqual(expected(name)))
+}
+
+test('Basic', t => {
+  return process(t, 'basic')
+})
+
+test('Fenced code block', t => {
+  return process(t, 'code')
+})
+
+test('Custom tag', t => {
+  return process(t, 'change-tag')
+})
+
+test('Render markdown in imported file', t => {
+  return process(t, 'importing')
+})
+
+test('Render markdown inline from imported file', t => {
+  return process(t, 'importing-inline')
+})
+
+test('Uses markdown-it plugins', t => {
+  return process(t, 'md-plugin', {
+    plugins: [
+      {
+        plugin: emoji
+      }
+    ]
+  })
+})
+
+test('Uses markdown-it options', t => {
+  return process(t, 'md-options', {
+    markdownit: {
+      linkify: true
+    }
+  })
+})

posthtml-djot/vitest.config.js

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['**/*test.{js,ts}'],
+  },
+})

src/components/blockquote.html

@@ -5,11 +5,11 @@
 </script>
 <div class="blockquote">
   <blockquote>
-    <markdown>
+    <djot>
       <yield></yield>
-    </markdown>
+    </djot>
   </blockquote>
   <if condition="cite != ''">
-    <p>—{{cite}}</p>
+    <p>{{cite}}</p>
   </if>
 </div>

src/components/head.html

@@ -7,73 +7,12 @@
   <meta name="color-scheme" content="dark">
   <title>The SANDWICH</title>
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="apex.css">
   <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
   <stack name="head"></stack>
   <script type="module" src="index.js"></script>
   <meta name="htmx-config" content='{"responseHandling": [{"code":"204", "swap": false},{"code":"...", "swap": true}]}'>
-  <style>
-    .flex-container {
-      display: flex;
-
-      justify-content: center;
-      align-items: center;
-      /* flex-flow: column; */
-      flex-direction: column;
-
-      height: 100%;
-      gap: 5px;
-
-    }
-
-    /* From https://codepen.io/Knovour/pen/boJNPN */
-    .marquee {
-      margin: 0;
-      padding: 0;
-      color: #343434;
-      font-size: 72px;
-      font-weight: bold;
-      position: relative;
-      width: 100vw;
-      max-width: 100%;
-      height: 80px;
-      line-height: 1.0;
-      overflow-x: hidden;
-    }
-
-    .track {
-      position: absolute;
-      white-space: nowrap;
-      will-change: transform;
-      animation: marquee 32s linear infinite;
-    }
-
-    @keyframes marquee {
-      from {
-        transform: translateX(0);
-      }
-
-      to {
-        transform: translateX(-50%);
-      }
-    }
-
-    .htmx-indicator {
-      animation: spin 2s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  </style>
 </head>
 
 

src/components/project.html

@@ -2,7 +2,6 @@
   module.exports = {
     onclick: props.onclick || '',
     titlestyle: props.titlestyle || '',
-    headerstyle: props.headerstyle || '',
   }
 </script>
 <div class="project">
@@ -14,19 +13,9 @@
         </div>
       </if>
       <slot:title></slot:title>
-      <if condition="$slots.links?.filled">
-        <div class="links">
-          <slot:links></slot:links>
-        </div>
-      </if>
     </div>
   </if>
   <if condition="$slots.description?.filled || $slots.subtitle?.filled">
-    <div class="description">
-      <div onclick="{{onclick}}" style="{{headerstyle}}">
-        <slot:subtitle></slot:subtitle>
-      </div>
     <slot:description></slot:description>
-    </div>
   </if>
 </div>

src/components/section-head.html

@@ -5,7 +5,7 @@
 </script>
 <div class="section-header">
   <div>
-    <markdown># {{header}}</markdown>
+    <h1>{{header}}</h1>
   </div>
   <div>
     <yield></yield>

src/firacode.css

@@ -1,18 +0,0 @@
-@font-face {
-    font-family: 'Fira Code';
-    src: url('FiraCode-Regular.woff2') format('woff2'),
-        url('FiraCode-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('FiraCode-Bold.woff2') format('woff2'),
-        url('FiraCode-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-

src/partials/interests.html

@@ -6,13 +6,18 @@
   </x-section-head>
   <x-interest person="isaac">
     <fill:description>
-      <markdown>
+      <section>
-        I love listening to the **works** albums from **Diverse System** while I'm working! Here's a 24-hour livestream
+        <djot>
+          I love listening to the *works* albums from *Diverse System* while I'm working! Here's a 24-hour livestream
           from them
-      </markdown>
+
+          ``` =html
           <iframe src="https://www.youtube-nocookie.com/embed/HXB5A7Psifk" title="YouTube video player" frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          ```
+        </djot>
+      </section>
     </fill:description>
   </x-interest>
   <x-interest class="project-alt" person="richard">
@@ -20,19 +25,19 @@
       <x-img src="/assets/dancerush.png">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Dance Rush
-      </markdown>
+      </djot>
     </fill:title>
     <fill:subtitle>
-      <markdown>
+      <djot>
         ## Very good game
-      </markdown>
+      </djot>
     </fill:subtitle>
     <fill:description>
-      <!-- <markdown> -->
+      <!-- <djot> -->
       <!-- I love going over to Round One in Provo, Utah and tearing it up on the dance floor! -->
-      <!-- </markdown> -->
+      <!-- </djot> -->
     </fill:description>
   </x-interest>
   <x-interest person="tyson">
@@ -40,31 +45,33 @@
       <x-img src="/assets/rimworld.jpg">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # [Rimworld](https://store.steampowered.com/app/294100/RimWorld/)
-      </markdown>
+      </djot>
     </fill:title>
-    <fill:subtitle>
-      <markdown>
-        ## My favorite game
-      </markdown>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <djot>
+        ## My favorite game
+
         I like committing war-crimes in Rimworld
-      </markdown>
+      </djot>
     </fill:description>
   </x-interest>
   <x-interest class="project-alt" person="isaac">
     <fill:description>
-      <markdown>
+      <section>
-        I also love listening to Diverse System's **AD:** albums in my free time as well. This is a highlight reel of
+        <djot>
+          I also love listening to Diverse System's *AD:* albums in my free time as well. This is a highlight reel of
           one of my
           favorites.
-      </markdown>
+
+          ```=html
           <iframe src="https://www.youtube-nocookie.com/embed/gNGcEwi2e5M" title="YouTube video player" frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          ```
+        </djot>
+      </section>
     </fill:description>
   </x-interest>
   <x-interest person="tyson">
@@ -72,24 +79,21 @@
       <x-img src="/assets/h1000.webp">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # NVIDIA H1000
-      </markdown>
+      </djot>
     </fill:title>
-    <fill:subtitle>
-      <markdown>
-        ## I want one
-      </markdown>
-    </fill:subtitle>
     <fill:description>
       <a href="mailto:tysoncloud.barbecue794@passinbox.com">
-        <markdown>
+        <djot>
+          ## I want one
+
           Give one to me!! HMU:
 
           tysoncloud.barbecue794
 
           @passinbox.com
-        </markdown>
+        </djot>
       </a>
     </fill:description>
   </x-interest>
@@ -98,14 +102,19 @@
       <x-img src="/assets/isaac.jpg" class="person">
     </fill:person>
     <fill:description>
-      <markdown>
+      <section>
-        My favorite artist under Diverse System has gotta be **xi**. This is a highlight reel of my favorite album
+        <djot>
+          My favorite artist under Diverse System has gotta be *xi*. This is a highlight reel of my favorite album
           by them.
-      </markdown>
+
-      <iframe src="https://www.youtube-nocookie.com/embed/ii8t_TZluvA?si=-PrfEwqZqAbMeFWS" title="YouTube video player"
+          ```=html
-        frameborder="0"
+          <iframe src="https://www.youtube-nocookie.com/embed/ii8t_TZluvA?si=-PrfEwqZqAbMeFWS"
+            title="YouTube video player" frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          ```
+        </djot>
+      </section>
     </fill:description>
   </x-interest>
 </x-tab.content>

src/partials/page_four.html

@@ -9,16 +9,15 @@
       <x-project.text>🤷‍♂️</x-project.text>
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Uuuuuhhhhh
-      </markdown>
+      </djot>
     </fill:title>
-    <fill:subtitle>
-      <markdown>
-        ## I don't know what to put on this page
-      </markdown>
-    </fill:subtitle>
     <fill:description>
+      <djot>
+        ## I don't know what to put on this page
+
+        ```=html
         <form hx-post="/api/page-idea" hx-target="#page-idea-result" hx-indicator="#page-idea-indicator">
           <label for="page-idea">
             What should we put on page 4 of The SANDWICH?
@@ -28,6 +27,8 @@
         </form>
         <img id="page-idea-indicator" class="htmx-indicator" width="32" height="32" src="/assets/spinner.svg">
         <div id="page-idea-result"></div>
+        ```
+      </djot>
     </fill:description>
   </x-project>
 </x-tab.content>

src/partials/projects.html

@@ -9,61 +9,69 @@
       <img src="/assets/tysoncloud.svg">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # TYSONCLOUD
-      </markdown>
+
-    </fill:title>
+        ::: links
-    <fill:links>
+
+        ```=html
         <x-link.github href="timmyjinks/TYSONCLOUD"></x-link.github>
         <x-link.website href="https://tysoncloud.tysonjenkins.dev/" referencing="TYSONCLOUD"></x-link.website>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <markdown>
+        :::
-        ## Dockering your containers since 2025
+      </djot>
-      </markdown>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <djot>
+        ## Dockering your containers since 2025
+
         Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
-        AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
+        AWS Console, and just gone "...what? What am I even looking at? _Huh_?"
 
         No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
-        cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!^1^
+        cloud, with *TYSONCLOUD*. Just input a docker container, and hit go!^1^
-      </markdown>
+      </djot>
     </fill:description>
   </x-project>
-  <x-project onclick="spaghetti()" class="project-alt" titlestyle="font-family: 'Apex Mk2'"
+  <x-project onclick="spaghetti()" class="project-alt" titlestyle="font-family: 'Apex Mk2'" id="simulo">
-    headerstyle="font-family: 'Apex Mk2'" id="simulo">
     <fill:img>
       <img src="/assets/simulo.svg">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Simulo
-      </markdown>
+
-    </fill:title>
+        ::: links
-    <fill:links>
+
+        ```=html
         <x-link.github href="richgrov/simulo"></x-link.github>
         <x-link.website href="https://simulo.tech" referencing="Simulo"></x-link.website>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <markdown>
+        :::
-        ## Roblox for the real world!
+      </djot>
-        #### (what could go wrong?)
+    </fill:title>
-      </markdown>
-    </fill:subtitle>
     <fill:description>
-      <div style="font-family: monospace;">
+      <djot>
-        <markdown>
+        {style="font-family: 'Apex Mk2'"}
+        ## Roblox for the real world!
+        {style="font-family: 'Apex Mk2'"}
+        #### (what could go wrong?)
+
+        {style="font-family: monospace;"}
+        :::
+
         Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? Bring your IRL game ideas to
         life
-          with **Simulo**! It's like using the *Earth* as your game engine! You
+        with *Simulo*! It's like using the *Earth* as your game engine! You
         don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
         come to life!
 
         Simulo is the most accessible game engine by a longshot^2^! Anyone can use Simulo, try it out today!.
-        </markdown>
+
-      </div>
+        :::
+      </djot>
     </fill:description>
   </x-project>
   <x-project id="c0re">
@@ -71,25 +79,28 @@
       <include src="assets/c0re.svg"></include>
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # c0re
         #### So shiny!
-      </markdown>
+
-    </fill:title>
+        ::: links
-    <fill:links>
+
+        ```=html
         <x-link.website href="https://c0re.com" referencing="c0re"></x-link.website>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <markdown>
+        :::
-        ## Git gud scrub!
+      </djot>
-      </markdown>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <djot>
-        Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
+        ## Git gud scrub!
+
+        Crush your friends in the game of life and get receipts using *c0re*! Gamify the effort of surpassing your
         peers in every possible area and become objectively and quantifiably the _best_ person.
-      </markdown>
+
-      <p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
+        Join the fray, and become your best self []{id="c0re-countup"} ago!
+      </djot>
       <script>
         // Code from https://www.w3schools.com/howto/howto_js_countdown.asp
         // Set the date we're counting down to
@@ -132,23 +143,25 @@
       <img src="/assets/braindance.svg">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Braindance
-      </markdown>
+
-    </fill:title>
+        ::: links
-    <fill:links>
+
+        ```=html
         <x-link.website href="https://braindance.live" referencing="Braindance"></x-link.website>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <markdown>
+        :::
-        ## Bringing the Coachella to you!
+      </djot>
-      </markdown>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <djot>
-        Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
+        ## Bringing the Coachella to you!
+
+        Ever wanted to vibe to some skibidicore with the boys, but without actually being _with_ the boys? Now
         you can with Braindance! No better way exists to transmit concert vibes directly into your home^3^
-      </markdown>
+      </djot>
     </fill:description>
   </x-project>
   <x-project id="grezi">
@@ -156,20 +169,22 @@
       <x-project.text>e</x-project.text>
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Grezi
-      </markdown>
+
-    </fill:title>
+        ::: links
-    <fill:links>
+
+        ```=html
         <x-link.github href="StratusFearMe21/grezi-next"></x-link.github>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <markdown>
+        :::
-        ## When the power is point
+      </djot>
-      </markdown>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <djot>
+        ## When the power is point
+
         Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
         presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
         markup
@@ -178,7 +193,7 @@
         Instead of dragging elements around on your slides, you can open your notepad and make silly
         text move
         on the screen with plain text. What an incredible innovation!
-      </markdown>
+      </djot>
     </fill:description>
   </x-project>
   <x-project class="project-alt" id="mystery">
@@ -186,17 +201,21 @@
       <x-project.text>?</x-project.text>
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Mystery
-      </markdown>
+      </djot>
     </fill:title>
     <fill:subtitle>
-      <markdown>
+      <djot>
-        ## _Oooooooo_
+      </djot>
-      </markdown>
     </fill:subtitle>
     <fill:description>
-      <markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
+      <djot>
+        ## _Oooooooo_
+
+        Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.
+
+        ```=html
         <form hx-post="/api/speculate" hx-target="#speculation-result" hx-indicator="#speculation-indicator">
           <label for="speculation">
             Speculate about the <i>secret</i> project below:
@@ -206,6 +225,8 @@
         </form>
         <img id="speculation-indicator" class="htmx-indicator" width="32" height="32" src="/assets/spinner.svg">
         <div id="speculation-result"></div>
+        ```
+      </djot>
     </fill:description>
   </x-project>
   <fill:footer>
@@ -231,6 +252,5 @@
 </x-tab.content>
 <push name="head">
   <link rel="preload" href="/assets/ApexMk2-Regular.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="/assets/ApexMk2-LightCondensed.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/assets/ApexMk2-BoldExtended.woff2" as="font" type="font/woff2" crossorigin>
 </push>

src/partials/who_we_are.html

@@ -9,31 +9,44 @@
       <x-img src="/assets/richard.jpg" class="person">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Richard Grover
-      </markdown>
+
+        ```=html
         <x-link href="projects.html" show="simulo">
-        <markdown>
+          <djot>
             #### CEO of Simulo (same thing)
-        </markdown>
+          </djot>
         </x-link>
-    </fill:title>
+        ```
-    <fill:links>
+
+        ::: links
+
+        ```=html
         <x-link.github href="richgrov"></x-link.github>
         <x-link.website href="https://grover.sh/" referencing="Richard"></x-link.website>
         <x-link.linkedin href="richgrov"></x-link.linkedin>
         <x-link.x href="richgrov"></x-link.x>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <x-blockquote cite="Richard">
+        :::
-        Tyson, let's get out of here
+      </djot>
-      </x-blockquote>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <section>
+        <djot>
+          ::: blockquote
+
+          > Tyson, let's get out of here
+
+          Richard
+
+          :::
+
           I think the rest of the card explains enough about me ngl. I don't think another bit of text would add much
           value
-      </markdown>
+        </djot>
+      </section>
     </fill:description>
   </x-project>
   <x-project class="project-alt" id="tyson">
@@ -41,97 +54,134 @@
       <x-img src="/assets/tyson.jpg" class="person">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Tyson Jenkins
-      </markdown>
+
+        ```=html
         <x-link href="projects.html" show="tysoncloud">
-        <markdown>
+          <djot>
             #### CEO of TYSONCLOUD (same thing)
-        </markdown>
+          </djot>
         </x-link>
-    </fill:title>
+        ```
-    <fill:links>
+
+        ::: links
+
+        ```=html
         <x-link.github href="timmyjinks"></x-link.github>
         <x-link.website href="https://tysonjenkins.dev/" referencing="Tyson"></x-link.website>
         <x-link.linkedin href="tyson-jenkins"></x-link.linkedin>
         <x-link.x href="chimp2600"></x-link.x>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <x-blockquote cite="Tyson">
+        :::
-        Step on it, Richard!
+      </djot>
-      </x-blockquote>
+    </fill:title>
-    </fill:subtitle>
+    <fill:description>
-    <!-- <fill:description> -->
+      <section>
-    <!-- <markdown> -->
+        <djot>
-    <!-- I love everything from making distributed systems, to physically building them. I'm in my element when I'm -->
+          ::: blockquote
-    <!-- making software with Python, and deploying it via Docker. -->
+
-    <!-- </markdown> -->
+          > Step on it, Richard!
-    <!-- </fill:description> -->
+
+          Tyson
+
+          :::
+        </djot>
+        <!-- {% I love everything from making distributed systems, to physically building them. I'm in my element when I'm making software with Python, and deploying it via Docker. %} -->
+      </section>
+    </fill:description>
   </x-project>
   <x-project id="gunnar">
     <fill:img>
       <x-img src="/assets/gunnar.jpg" class="person">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Gunnar Huscroft
-      </markdown>
+
+        ```=html
         <x-link href="projects.html" show="c0re">
-        <markdown>
+          <djot>
             #### CEO of c0re (same thing)
-        </markdown>
+          </djot>
         </x-link>
-    </fill:title>
+        ```
-    <fill:links>
+
+        ::: links
+
+        ```=html
         <x-link.github href="Ghussy"></x-link.github>
         <!-- <x-link.website href="https://churchofjesuschrist.org/" referencing="Gunnar"></x-link.website> -->
         <x-link.youtube href="UCApj2bfCQRDWym4684z2TXQ"></x-link.youtube>
         <x-link.linkedin href="gunnarhuscroft"></x-link.linkedin>
         <x-link.x href="ChEEEky_SCRUB"></x-link.x>
         <x-link.instagram href=""></x-link.instagram>
-    </fill:links>
+        ```
+
+        :::
+      </djot>
+    </fill:title>
     <fill:subtitle>
-      <x-blockquote cite="Steve Jobs">
+      <fill:description>
-        Replace the heaviness of being successful, with the lightness of being a beginner again, less sure about
+        <section>
+          <djot>
+            ::: blockquote
+
+            > Replace the heaviness of being successful, with the lightness of being a beginner again, less sure about
             everything. It freed me to enter one of the most creative periods of my life.
-      </x-blockquote>
+
-    </fill:subtitle>
+            Steve Jobs
-    <!-- <fill:description> -->
+
-    <!-- <markdown> -->
+            :::
+          </djot>
+          <!-- <djot> -->
           <!-- Some people believe in test-driven development, or compiler-driven development. But I believe in values-driven -->
           <!-- development. My passion lies in using my skills to help lift other people up, and leave the world better than I -->
           <!-- found it. -->
-    <!-- </markdown> -->
+          <!-- </djot> -->
-    <!-- </fill:description> -->
+        </section>
+      </fill:description>
   </x-project>
   <x-project class="project-alt" id="khayden">
     <fill:img>
       <x-img src="/assets/khayden.jpg" class="person">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Khayden Roberts
-      </markdown>
+
+        ```=html
         <x-link href="projects.html" show="braindance">
-        <markdown>
+          <djot>
             #### CEO of Braindance (same thing)
-        </markdown>
+          </djot>
         </x-link>
-    </fill:title>
+        ```
-    <fill:links>
+
+        ::: links
+
+        ```=html
         <x-link.github href="Hoochymoochy"></x-link.github>
         <x-link.website href="https://www.khaydenroberts.com/" referencing="Khayden"></x-link.website>
         <x-link.linkedin href="khayden-roberts-5783b32b5"></x-link.linkedin>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <x-blockquote>
+        :::
-        You only live once, die trying
+      </djot>
-      </x-blockquote>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <section>
+        <djot>
+          ::: blockquote
+
+          > You only live once, die trying
+
+          :::
+
           Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️
-      </markdown>
+        </djot>
+      </section>
     </fill:description>
   </x-project>
   <x-project id="isaac">
@@ -139,32 +189,45 @@
       <x-img src="/assets/isaac.jpg" class="person">
     </fill:img>
     <fill:title>
-      <markdown>
+      <djot>
         # Isaac Mills
-      </markdown>
+
+        ```=html
         <x-link href="projects.html" show="grezi">
-        <markdown>
+          <djot>
             #### CEO of Grezi (same thing)
-        </markdown>
+          </djot>
         </x-link>
-    </fill:title>
+        ```
-    <fill:links>
+
+        ::: links
+
+        ```=html
         <x-link.github href="StratusFearMe21"></x-link.github>
         <x-link.website href="https://portfolio.nations.lol/" referencing="Isaac"></x-link.website>
         <x-link.linkedin href="isaac-mills-8b1a77336"></x-link.linkedin>
         <x-link.listenbrainz href="StratusFearMe21"></x-link.listenbrainz>
-    </fill:links>
+        ```
-    <fill:subtitle>
+
-      <x-blockquote cite="Isaac">
+        :::
-        Pog
+      </djot>
-      </x-blockquote>
+    </fill:title>
-    </fill:subtitle>
     <fill:description>
-      <markdown>
+      <section>
+        <djot>
+          ::: blockquote
+
+          > Pog
+
+          Isaac
+
+          :::
+
           I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems!
           Ever since I was 7, I've specialized in finding problems to solve, and working with people
           to solve them. Streamlining systems and maximizing efficiency is what I do best!
-      </markdown>
+        </djot>
+      </section>
     </fill:description>
   </x-project>
 </x-tab.content>

src/style.css

@@ -1,3 +1,5 @@
+@import 'apex.css';
+
 @custom-media --tablet only screen and (max-width: 1200px);
 @custom-media --phone only screen and (max-width: 800px);
 @custom-media --smaller-phone only screen and (max-width: 500px);
@@ -58,6 +60,10 @@ blockquote {
     text-align: right;
   }
 
+  &+p::before {
+    content: "—";
+  }
+
   @media (--phone) {
     margin: 0px auto;
   }
@@ -111,7 +117,8 @@ blockquote {
     margin: 16pt 0;
   }
 
-  &>div {
+  &>div,
+  &>section {
     padding: 16px;
   }
 
@@ -119,7 +126,8 @@ blockquote {
     flex-direction: column;
     padding: 32px;
 
-    &>div {
+    &>div,
+    &>section {
       padding-top: 0;
       padding-bottom: 0;
     }
@@ -184,14 +192,6 @@ blockquote {
   }
 }
 
-.description {
-  width: 100%;
-
-  @media (--phone) {
-    width: unset;
-  }
-}
-
 .links {
   display: flex;
   justify-content: space-evenly;
@@ -252,10 +252,77 @@ blockquote {
   margin: 15px 0;
 }
 
+.flex-container {
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+  /* flex-flow: column; */
+  flex-direction: column;
+
+  height: 100%;
+  gap: 5px;
+
+}
+
+/* From https://codepen.io/Knovour/pen/boJNPN */
+.marquee {
+  margin: 0;
+  padding: 0;
+  color: #343434;
+  font-size: 72px;
+  font-weight: bold;
+  position: relative;
+  width: 100vw;
+  max-width: 100%;
+  height: 80px;
+  line-height: 1.0;
+  overflow-x: hidden;
+}
+
+.track {
+  position: absolute;
+  white-space: nowrap;
+  will-change: transform;
+  animation: marquee 32s linear infinite;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.htmx-indicator {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 body {
   margin: 0;
 }
 
+section {
+  width: 100%;
+
+  @media (--phone) {
+    width: unset;
+  }
+}
+
 h1 {
   font-size: 32pt;
   /* margin: 0; */