Building This Site

JXDV was an informational and note-taking site built by and for an ecommerce web developer. It has since evolved into Unit Mag's design system, as Unit Mag's technical architecture was based on JXDV.

Unit Mag is built with Lume, the fast & flexible static site generator for Deno.

Simple CSS from Kev Quirk is used as a styling framework for this site. Mostly classless, Simple.css is lightweight (under 10KB), and makes semantic HTML look good including useful features like automatic light/dark mode and viewport responsiveness. It also comes with a couple of classes.

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, sometimes including photos of Colorado fourteeners.

.tc

Text Center

.notice

.button

Add a link styled like a button, or just use the button element

<a class="button">

<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 old HTML:

Prism.js & Prism.css

Prism, a lightweight syntax highlighter built with modern web standards, is included to format readable scripts 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 😉  -->

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 😉  -->

As of this post's creation, Prism supports [297 languages](https://prismjs.com/index.html#supported-languages). Each has a corresponding alias to use in place of xxxx in the language-xxxx (or lang-xxxx) class.

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",
  });

Feel free to get in touch with any questions.