Building This Site

JXDV was an information repository built to document the nuances of an ecommerce website. It has since evolved into Unit Mag's design system. Unit Mag is built with Lume, the fast & flexible static site generator for Deno.

Simple CSS from Kev Quirk is used as a styling baseline. Mostly classless, it is lightweight (under 10KB), and makes semantic HTML look good. It includes useful features like automatic light/dark mode and responsiveness.

Styling is managed using @import rules in /static/styles/style.css. Utility-class frameworks are avoided though a few custom and imported classes are available:

.three-cg

Creates a three column grid that never breaks. It may include photos of Colorado fourteeners.

colorado 14er blue sky formerly evans colorado 14er belford, oxford, missouri colorado 14er missouri

.tc

Text Center

.notice

In building JXDV, a pull request was merged to Simple.css updating the .notice (this box's) utility class border-radius from 5px to var(--standard-border-radius) to promote consistency in the design system 🪚

.button

Add a link styled like a button, or simply use the button element without the class:

<a class="button">

Alpine.js

Alpine is a rugged, minimal tool for composing behavior directly in markup. It includes 15 attributes, 6 properties, and 2 methods. Everything in Alpine starts with the x-data directive which defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference. Here's an example of a contrived dropdown component:

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle Content</button>
    <div x-show="open">
    Content...
    </div>
</div>
🪚

However, instead of invoking JavaScript, or a slew of divs with excess styling, it's often best to use plain HTML:

Toggle Content

🪚

Prism.js & Prism.css

Prism, a lightweight syntax highlighter built with modern web standards, is included to format displayed script and code snippets on this website. Prism includes a javascript and CSS file, which are generated and exported based on elected language and styling preferences on Prism's downloads page. When authoring a page with syntax highlighting in markdown, a language class is added to a <div> element:

<div class="language-html">
<!-- here's some html "language" highlighting 😉  -->

Within this div we can add code using markdown's specification, by indenting lines by four spaces or one tab. Otherwise, use fenced code blocks between three backticks (```)

And to be particularly meta, here's what it looks like in this post's markdown editor:

<div class="language-clike">

    <div class="language-html">
    <!-- here's some html "language" highlighting 😉  -->

Within this div we can add code using markdown's specification, by indenting lines by four spaces or one tab. Otherwise, use fenced code blocks between three backticks (```)

Build & Deploy

Using Vercel, deployments are automatic, triggered for any commits pushed to the main branch of this site's Git repository. Currenlty Vercel does not have a framework preset for Lume in the build and deploy settings. So a build command is specified:

curl -fsSL https://deno.land/x/install/install.sh | sh && /vercel/.deno/bin/deno task build

and the output directory is specified as that assigned in _config.ts, in this case, public

const site = lume({
  dest: "./public",
  });