Building This Site

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

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.

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

.tc

Text Center

.notice

Creates a notice box to draw attention to something

.button

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

<a class="button">

Simple.css

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.

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 🪚

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:

Toggle Content

🪚

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

As of this post's creation, Prism supports 297 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 (```)

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.