RubyGems - easyfaa - Versions diffs - 0.20.0 - Mend

easyfaa 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

checksums.yaml +7 -0
data/CHANGELOG.md +558 -0
data/MIT-LICENSE +22 -0
data/README.md +256 -0
data/app/views/layouts/easyfaa.html.erb +24 -0
data/app/views/recourses/_head.html.erb +3 -0
data/art/autopilot.svg +9 -0
data/art/cube.svg +9 -0
data/art/design.svg +8 -0
data/art/down.html.erb +95 -0
data/art/easyfaa.svg +7 -0
data/art/fountain.svg +9 -0
data/art/goldrush.svg +7 -0
data/art/houston.svg +8 -0
data/art/icons.txt +185 -0
data/art/index.html.erb +157 -0
data/config/locales/easyfaa.en.yml +7 -0
data/lib/easyfaa/copy.rb +5 -0
data/lib/easyfaa/down.rb +19 -0
data/lib/easyfaa/engine.rb +53 -0
data/lib/easyfaa/helpers/flows.rb +53 -0
data/lib/easyfaa/helpers/heads.rb +60 -0
data/lib/easyfaa/helpers/logos.rb +43 -0
data/lib/easyfaa/helpers.rb +11 -0
data/lib/easyfaa/marks.rb +16 -0
data/lib/easyfaa/version.rb +4 -0
data/lib/easyfaa.rb +39 -0
data/public/404.html +118 -0
data/public/_headers +28 -0
data/public/bh/css/bh.css +1 -0
data/public/bh/js/bh.js +152 -0
data/public/bh/theme/bootstrap.css +10 -0
data/public/bh/theme/dawn.css +189 -0
data/public/bh/theme/dracula.css +189 -0
data/public/bh/theme/gruvbox.css +189 -0
data/public/bh/theme/monokai.css +190 -0
data/public/bh/theme/nord.css +189 -0
data/public/bh/theme/one_dark.css +189 -0
data/public/bh/theme/solarized.css +188 -0
data/public/bh/theme/tokyo_night.css +189 -0
data/public/css/easyfaa.css +1 -0
data/public/down/autopilot.html +87 -0
data/public/down/cube.html +87 -0
data/public/down/design.html +87 -0
data/public/down/easyfaa.html +84 -0
data/public/down/fountain.html +87 -0
data/public/down/goldrush.html +87 -0
data/public/down/houston.html +87 -0
data/public/favicon/autopilot-180.png +0 -0
data/public/favicon/autopilot-192.png +0 -0
data/public/favicon/autopilot-512.png +0 -0
data/public/favicon/autopilot-96.png +0 -0
data/public/favicon/autopilot-dev.svg +9 -0
data/public/favicon/autopilot.ico +0 -0
data/public/favicon/autopilot.svg +9 -0
data/public/favicon/autopilot.webmanifest +12 -0
data/public/favicon/cube-180.png +0 -0
data/public/favicon/cube-192.png +0 -0
data/public/favicon/cube-512.png +0 -0
data/public/favicon/cube-96.png +0 -0
data/public/favicon/cube-dev.svg +9 -0
data/public/favicon/cube.ico +0 -0
data/public/favicon/cube.svg +9 -0
data/public/favicon/cube.webmanifest +12 -0
data/public/favicon/design-180.png +0 -0
data/public/favicon/design-192.png +0 -0
data/public/favicon/design-512.png +0 -0
data/public/favicon/design-96.png +0 -0
data/public/favicon/design-dev.svg +8 -0
data/public/favicon/design.ico +0 -0
data/public/favicon/design.svg +8 -0
data/public/favicon/design.webmanifest +12 -0
data/public/favicon/easyfaa-180.png +0 -0
data/public/favicon/easyfaa-192.png +0 -0
data/public/favicon/easyfaa-512.png +0 -0
data/public/favicon/easyfaa-96.png +0 -0
data/public/favicon/easyfaa-dev.svg +7 -0
data/public/favicon/easyfaa.ico +0 -0
data/public/favicon/easyfaa.svg +7 -0
data/public/favicon/easyfaa.webmanifest +12 -0
data/public/favicon/fountain-180.png +0 -0
data/public/favicon/fountain-192.png +0 -0
data/public/favicon/fountain-512.png +0 -0
data/public/favicon/fountain-96.png +0 -0
data/public/favicon/fountain-dev.svg +9 -0
data/public/favicon/fountain.ico +0 -0
data/public/favicon/fountain.svg +9 -0
data/public/favicon/fountain.webmanifest +12 -0
data/public/favicon/goldrush-180.png +0 -0
data/public/favicon/goldrush-192.png +0 -0
data/public/favicon/goldrush-512.png +0 -0
data/public/favicon/goldrush-96.png +0 -0
data/public/favicon/goldrush-dev.svg +7 -0
data/public/favicon/goldrush.ico +0 -0
data/public/favicon/goldrush.svg +7 -0
data/public/favicon/goldrush.webmanifest +12 -0
data/public/favicon/houston-180.png +0 -0
data/public/favicon/houston-192.png +0 -0
data/public/favicon/houston-512.png +0 -0
data/public/favicon/houston-96.png +0 -0
data/public/favicon/houston-dev.svg +8 -0
data/public/favicon/houston.ico +0 -0
data/public/favicon/houston.svg +8 -0
data/public/favicon/houston.webmanifest +12 -0
data/public/favicon.ico +0 -0
data/public/font/bootstrap-icons-6LILWPE2.woff2 +0 -0
data/public/font/bootstrap-icons-FRBPO3H7.woff2 +0 -0
data/public/font/ibm-plex-sans-500-latin-LA7QXWWL.woff2 +0 -0
data/public/font/ibm-plex-sans-500-latin-ext-X4QHZICY.woff2 +0 -0
data/public/font/ibm-plex-sans-500-latin-ext.woff2 +0 -0
data/public/font/ibm-plex-sans-500-latin.woff2 +0 -0
data/public/font/ibm-plex-sans-500-vietnamese-24B6BSND.woff2 +0 -0
data/public/font/ibm-plex-sans-500-vietnamese.woff2 +0 -0
data/public/index.html +165 -0
data/public/js/easyfaa.js +1 -0
data/public/logo/autopilot.png +0 -0
data/public/logo/autopilot.svg +9 -0
data/public/logo/cube.png +0 -0
data/public/logo/cube.svg +9 -0
data/public/logo/design.png +0 -0
data/public/logo/design.svg +8 -0
data/public/logo/easyfaa.png +0 -0
data/public/logo/easyfaa.svg +7 -0
data/public/logo/fountain.png +0 -0
data/public/logo/fountain.svg +9 -0
data/public/logo/goldrush.png +0 -0
data/public/logo/goldrush.svg +7 -0
data/public/logo/houston.png +0 -0
data/public/logo/houston.svg +8 -0
data/public/page/400.html +118 -0
data/public/page/404.html +118 -0
data/public/page/406-unsupported-browser.html +118 -0
data/public/page/422.html +118 -0
data/public/page/500.html +118 -0
data/public/site.webmanifest +12 -0
data/public/theme/bootstrap.css +10 -0
data/public/theme/dawn.css +189 -0
data/public/theme/dracula.css +189 -0
data/public/theme/gruvbox.css +189 -0
data/public/theme/monokai.css +190 -0
data/public/theme/nord.css +189 -0
data/public/theme/one_dark.css +189 -0
data/public/theme/solarized.css +188 -0
data/public/theme/tokyo_night.css +189 -0
data/public/v0.20.0/bh/css/bh.css +1 -0
data/public/v0.20.0/bh/js/bh.js +152 -0
data/public/v0.20.0/bh/theme/bootstrap.css +10 -0
data/public/v0.20.0/bh/theme/dawn.css +189 -0
data/public/v0.20.0/bh/theme/dracula.css +189 -0
data/public/v0.20.0/bh/theme/gruvbox.css +189 -0
data/public/v0.20.0/bh/theme/monokai.css +190 -0
data/public/v0.20.0/bh/theme/nord.css +189 -0
data/public/v0.20.0/bh/theme/one_dark.css +189 -0
data/public/v0.20.0/bh/theme/solarized.css +188 -0
data/public/v0.20.0/bh/theme/tokyo_night.css +189 -0
data/public/v0.20.0/css/easyfaa.css +1 -0
data/public/v0.20.0/font/bootstrap-icons-FRBPO3H7.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-latin-LA7QXWWL.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-latin-ext-X4QHZICY.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-latin-ext.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-latin.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-vietnamese-24B6BSND.woff2 +0 -0
data/public/v0.20.0/font/ibm-plex-sans-500-vietnamese.woff2 +0 -0
data/public/v0.20.0/js/easyfaa.js +1 -0
metadata +264 -0

data/README.md ADDED Viewed

@@ -0,0 +1,256 @@
+# easyfaa design
+What makes a page look like easyfaa's: the marks every app is known by, the lockup they
+sit in, the wall a signup flow stands on, the palettes, the pages an app shows when it is down
+or lost, and the one stylesheet and one script that carry all of it.
+The Bootstrap 6 underneath is [`bh`](https://claudiob.github.io/bh/), which this gem depends on
+and draws on top of rather than bundling: a page links bh's stylesheet and script first and this
+one's after, so the house rules win and Bootstrap ships once. **The components are documented
+there, not here** — the form builder, the combobox, the 6-digit code, the phone field, the
+dialog, the toasts, the thread of messages and the twenty-two Stimulus controllers are Bootstrap
+with the markup written once, and are worth the same to any Rails app. This gem is only what is
+the house's.
+Published three ways from this repo:
+| Surface | Where | What it is for |
+| --- | --- | --- |
+| Site | https://design.easyfaa.com (staging: https://design.houseparty.dev) | A stable URL for every asset, and a showcase of them |
+| Gem | `easyfaa` on RubyGems | A Rails engine: serves the same tree from the gem, and the helpers |
+| npm | `easyfaa` | The same built stylesheet and script, for any CDN that carries it |
+## How to install
+### From RubyGems
+```bash
+gem install easyfaa
+```
+```ruby
+# Gemfile
+gem 'easyfaa', '~> 0.15.0'
+```
+bh comes with it; nothing else has to be named.
+`~> 0.15.0` stops short of `0.16`, since below 1.0 a minor release may break whatever it likes.
+Rails 8.1 and Ruby 3.2 are the minimum.
+A page takes the gem's layout, and wears the same head:
+```ruby
+class Unauthenticated::AgentsController < ApplicationController
+  layout 'easyfaa'
+end
+```
+```erb
+<% content_for :title, 'Authenticating as admin' %>
+<% content_for :head, tag.meta(name: 'robots', content: 'noindex') %>
+<h1>Authenticating as admin</h1>
+```
+<p>
+  <img src='screenshot/layout-light.png' width='49%' alt='The page in light mode'>
+  <img src='screenshot/layout-dark.png' width='49%' alt='The page in dark mode'>
+</p>
+The layout is the charset, the title, the CSRF and CSP metas, `easyfaa_head_tags`,
+`yield :head`, then `yield` inside a `main.container-fluid` in the `<body>`, and `notices`
+after it, and nothing else. A host wanting more copies
+it into its own `app/views/layouts/`, which wins on being earlier in the view paths.
+Which of the family an app is, the gem reads off the Rails application's own name: the
+`Goldrush` of `Goldrush::Application`. That is what its tab wears, what `easyfaa_head_tags`
+links without an argument, and whose page the engine answers `/down.html` with — the app's
+mark in the middle and the house's at the foot. An app the family has no mark for wears the
+horizon. The same page stands at `https://design.easyfaa.com/down/fountain` for Heroku's
+`MAINTENANCE_PAGE_URL`, which has to be somewhere the app is not — without the `.html`,
+which Pages redirects away from.
+With the gem in the bundle an app serves `/css/easyfaa.css`, `/js/easyfaa.js`,
+`/theme/*`, `/font/*`, `/logo/*` and `/favicon/*` itself — and its own version's copy under
+`/v0.15.0/`, which is what the head helper links, cached for a year — answers a 400, 404, 406,
+422 or 500 with the house's own page, and answers `/down.html` with this app's.
+## Which app this is
+Read off the Rails application's own name, the `Goldrush` of `Goldrush::Application`. That is
+what its tab wears, what `easyfaa_head_tags` links without an argument, and whose page the
+engine answers `/down.html` with — the app's mark in the middle and the house's at the foot. An
+app the family has no mark for wears the horizon.
+## The helpers
+```erb
+<%# In the <head>: the viewport, color-scheme and Turbo refresh metas, the stylesheet, the
+    script, and the icons a tab, a phone and a manifest ask for — this app's, by its name. %>
+<%= easyfaa_head_tags %>
+<%# The icons alone, for a head of the host's own: this app's unless another of the family is
+    named, the way a page for customers wears the house's horizon rather than the app's. A host of
+    recourse needs no call at all — the gem answers recourse's `recourses/head` with them. %>
+<%= easyfaa_icons :easyfaa %>
+<%# A mark beside its name, as one word and one link. Each drawing fills its 512 grid
+    differently, so equal sizes never align: every mark is rendered at a box of its own and
+    pushed down by its own nudge, and its ink then stands on the baseline. %>
+<%= easyfaa_logo %>
+<%= easyfaa_logo app: :fountain, href: root_path, class: 'fs-3' %>
+<%# An asset on the design site, for a page this app does not serve — a mail, say. %>
+<%= image_tag easyfaa_url('logo/fountain.png') %>
+```
+## The layout
+A page takes the gem's layout and wears the same head:
+```ruby
+class Unauthenticated::AgentsController < ApplicationController
+  layout 'easyfaa'
+end
+```
+```erb
+<% content_for :title, 'Authenticating as admin' %>
+<% content_for :head, tag.meta(name: 'robots', content: 'noindex') %>
+<h1>Authenticating as admin</h1>
+```
+<p>
+  <img src='screenshot/layout-light.png' width='49%' alt='The page in light mode'>
+  <img src='screenshot/layout-dark.png' width='49%' alt='The page in dark mode'>
+</p>
+It is the charset, the title, the CSRF and CSP metas, `easyfaa_head_tags`, `yield :head`,
+then `yield` inside a `main.container-fluid`, and `notices` after it — and nothing else. A host
+wanting more copies it into its own `app/views/layouts/`, which wins on being earlier in the
+view paths.
+## The flow, and the wall it stands on
+`flow` is the page a signup flow lives on: the lockup over the cyanotype, a title, a line, one
+card, and the way out under it. A layout of the app's own calls it and nests on the gem's:
+```erb
+<% content_for :logo, 'easyfaa' %>
+<% content_for :content do %>
+  <%= flow href: root_path, links: [button_to('Sign out', session_path, method: :delete, class: 'btn btn-link')] do %>
+    <%= yield %>
+  <% end %>
+<% end %>
+<%= render template: 'layouts/easyfaa' %>
+```
+`href:` is where the mark links, the house's front door unless said; `links:` the pieces of the
+foot, joined by a middot, none drawing no foot. The mark and the wall are not asked for, being
+what a house flow is. What the page says about itself — `content_for :title`, `:subtitle` and
+`:width` — it says in its own view, and `content_for :logo` is which of the family's marks the
+tab wears, for a page a customer reads rather than the app's own people.
+The wall alone is one attribute, `data-controller='wall'`, on any element that should stand on
+it: fourteen trade tools and the family's five marks drifting up in seven columns, on blueprint
+blues of its own so it reads the same whatever the primary is. Under `prefers-reduced-motion`
+the columns stand still.
+## A code sent to a phone
+The same words from every app, in each voice they are said in. `written` is the sentence a
+person reads and, under it, the `@host #code` line that offers the code above the keyboard on
+the phone it arrived on; `spoken` is the sentence alone, its digits one at a time so a listener
+can write them down.
+```ruby
+Easyfaa.one_time_code(contact.pin).written
+# => "Enter this 6-digit code to proceed: 482913\n\n@easyfaa.com #482913"
+Easyfaa.one_time_code(contact.pin).spoken
+# => "Enter this 6-digit code to proceed: 4, 8, 2, 9, 1, 3"
+```
+## Off the gem
+A page not on the gem links the two files from the site, and nothing else:
+```html
+<link rel='stylesheet' href='https://design.easyfaa.com/css/easyfaa.css'>
+<script type='module' src='https://design.easyfaa.com/js/easyfaa.js'></script>
+```
+Those follow the latest release. Every release is also kept whole under its own version,
+forever and cached for a year, for a page that would rather move on its own terms:
+```html
+<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/css/easyfaa.css'>
+<script type='module' src='https://design.easyfaa.com/v0.20.0/js/easyfaa.js'></script>
+```
+bh's layer goes under the house's, from the same place, since the house is drawn on top of it
+and neither stands alone:
+```html
+<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/bh/css/bh.css'>
+<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/css/easyfaa.css'>
+```
+The palettes are beside it, at `bh/theme/nord.css` and the rest — bh's nine, copied out of the
+gem at build time. A version under `v` is never written again, so that URL is owed its bytes.
+A host with a Content Security Policy allows whichever origin it names for `style-src`,
+`script-src` and `font-src`.
+## What is in the bundle
+`css/easyfaa.css` is the house's layer alone: the rules this gem writes over bh's,
+followed by Bootstrap Icons cut down to the glyphs `art/icons.txt` names (the ones `unicon`
+maps and the few written out by name) and the house's three — the page, the lockup and the
+wall. IBM Plex Sans, the lockup's face, is served from `/font` too; nothing on a page reaches
+another origin. `js/easyfaa.js` is the house's script alone: `wall`, the one controller
+that is its own, registered with the Stimulus application bh's script starts. bh's two files
+are copied beside these at `bh/`, and a page links bh's first. Everything is drawn for light and dark alike: every color is a Bootstrap
+token or a `light-dark()` pair, and `data-bs-theme` on `<html>` forces either. A phone is
+formatted in the browser: the server hands over ten digits and
+`data-controller='phone'`, and the controller decides `555-555-5555`.
+## Development
+```bash
+bin/setup                 # bundle and npm install
+bundle exec rake          # build, test at 100% coverage, RuboCop, the file-length ceiling
+./build-icons.sh          # after editing a drawing under art/
+rake icons                # after editing art/icons.txt, the glyphs the icon font keeps
+cd test/dummy && bin/rails server
+```
+The build reads bh's sources out of the gem — `bundle info bh --path` — rather than out of
+`node_modules`, so the Gemfile is the one place bh's version is pinned. An edit to bh shows in
+this bundle on the next `rake assets`.
+The built `public/css`, `public/js`, `public/font` and `public/theme` are committed: the gem
+serves them, and `spec.files` is `git ls-files`. `rake assets` rebuilds and fails until the
+result is committed, so a source edit cannot ship without its build.
+While the gem is read from a path, an app in development serves every file `no-cache`, so a
+rebuild shows on the next reload; only a production app keeps the versioned copy for a year.
+Every build also writes `public/v<version>/`, whole, with every URL inside pointing under
+that prefix, until the tag `v<version>` exists; from then on the folder is never written
+again, and a page that pinned it is owed the same bytes for good.
+A release, in order: `CHANGELOG.md`, the version in `lib/easyfaa/version.rb` and
+`package.json`, `bundle exec rake` so the versioned copy is the release's, then commit, tag
+`v<version>`, `gem build` and `gem push`, and fast-forward `production` to `main` so the
+site carries both the latest and the versioned copy.
+## Cloudflare
+The site is a Cloudflare Pages project named `design` on this repo: production branch
+`production`, no build command, output directory `public`, custom domain
+`design.easyfaa.com`. `main` deploys as the branch alias `main.design.pages.dev`, which
+`design.houseparty.dev` is a CNAME to. `public/_headers` adds the CORS header a cross-origin
+module script and font need, and marks the hashed fonts immutable; everything else keeps
+Pages' default of revalidating on every load, so a URL never has to change between versions.

data/app/views/layouts/easyfaa.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <title><%= content_for(:title) || Easyfaa.app %></title>
+    <%- if protect_against_forgery? -%>
+    <meta name='csrf-param' content='<%= request_forgery_protection_token %>'>
+    <meta name='csrf-token' content='<%= form_authenticity_token %>'>
+    <%- end -%>
+    <%- if (csp = csp_meta_tag) -%>
+    <%= csp %>
+    <%- end -%>
+    <%= easyfaa_head_tags content_for(:logo).presence || Easyfaa.app %>
+    <%- if content_for?(:head) -%>
+    <%= yield :head %>
+    <%- end -%>
+  </head>
+  <body class='house-page d-flex flex-column'>
+    <main class='container-fluid py-4 flex-grow-1 d-flex flex-column'>
+      <%= content_for?(:content) ? yield(:content) : yield %>
+    </main>
+    <%= toasts %>
+  </body>
+</html>

data/app/views/recourses/_head.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= easyfaa_tags %>
+<%= easyfaa_icons %>

data/art/autopilot.svg ADDED Viewed

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="256" cy="256" r="190"/>
+    <path d="M66 256 L206 256"/>
+    <path d="M306 256 L446 256"/>
+    <path d="M256 306 L256 446"/>
+    <circle cx="256" cy="256" r="50"/>
+  </g>
+</svg>

data/art/cube.svg ADDED Viewed

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M256 302Q256 256 295.8 233L406.2 169.3Q446 146.3 446 192.3V319.7Q446 365.7 406.2 388.7L295.8 452.4Q256 475.4 256 429.4Z" fill="#0b1e3a"/>
+    <path d="M216.2 59.6Q256 36.6 295.8 59.6L406.2 123.3Q446 146.3 446 192.3V319.7Q446 365.7 406.2 388.7L295.8 452.4Q256 475.4 216.2 452.4L105.8 388.7Q66 365.7 66 319.7V192.3Q66 146.3 105.8 123.3Z"/>
+    <path d="M256 256 95.4 163.3"/>
+    <path d="M256 256 416.6 163.3"/>
+    <path d="M256 256V441.4"/>
+  </g>
+</svg>

data/art/design.svg ADDED Viewed

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" transform="rotate(45 256 256)">
+    <path d="M196 60 L316 60 L316 372 L196 372 Z"/>
+    <path d="M196 120 L316 120"/>
+    <path d="M196 372 L256 470 L316 372"/>
+    <path d="M232 431 L256 470 L280 431 Z" fill="#0b1e3a"/>
+  </g>
+</svg>

data/art/down.html.erb ADDED Viewed

@@ -0,0 +1,95 @@
+<%# The page an app shows while it is down: its own mark and name in the middle, the house's
+    at the foot — or the house's alone, for an app not in the family — and nothing that
+    needs the app to be up — IBM Plex Sans and the icons from the design site, the two
+    blues written in. Rendered per app by `rake pages` into
+    public/down/<app>.html, and answered at /down.html by the engine once the host has named
+    itself in `Easyfaa.app`. -%>
+<!doctype html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <title><%= app %></title>
+    <meta name='color-scheme' content='light dark'>
+    <link rel='icon' href='https://design.easyfaa.com/favicon/<%= app %>.svg' type='image/svg+xml'>
+    <link rel='icon' href='https://design.easyfaa.com/favicon/<%= app %>-96.png' type='image/png' sizes='96x96'>
+    <link rel='apple-touch-icon' href='https://design.easyfaa.com/favicon/<%= app %>-180.png'>
+    <style>
+      @font-face {
+        font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('https://design.easyfaa.com/font/ibm-plex-sans-500-vietnamese.woff2') format('woff2');
+        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+      }
+      @font-face {
+        font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('https://design.easyfaa.com/font/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      }
+      @font-face {
+        font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('https://design.easyfaa.com/font/ibm-plex-sans-500-latin.woff2') format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+      :root {
+        --bg: #fbfcfe;
+        --ink: #0b1e3a;
+        --mark: #5aa9e6;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0f1622;
+          --ink: #cfe3f6;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100svh;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg);
+        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+      }
+      main {
+        flex: 1;
+        display: grid;
+        place-items: center;
+      }
+      .lockup {
+        white-space: nowrap;
+        color: var(--ink);
+        line-height: 1;
+      }
+      /* The mark on the text baseline, sized and nudged by its own numbers, in ems so the
+         same pair reads right at both sizes on this page. */
+      .lockup svg {
+        position: relative;
+        vertical-align: baseline;
+        margin-right: 0.29em;
+      }
+      main .lockup { font-size: 48px; }
+      footer {
+        position: sticky;
+        bottom: 0;
+        background: var(--bg);
+        display: flex;
+        justify-content: center;
+        padding: 20px 0 26px;
+      }
+      footer .lockup { font-size: 20px; }
+      footer .easy { color: var(--mark); }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class='lockup'><%= mark[app] %><%= app == :easyfaa ? "<span class='easy'>easy</span>faa" : app %></p>
+    </main>
+<%- unless app == :easyfaa -%>
+    <footer>
+      <p class='lockup'><%= mark[:easyfaa] %><span class='easy'>easy</span>faa</p>
+    </footer>
+<%- end -%>
+  </body>
+</html>

data/art/easyfaa.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M74.5 340H437.5A200 200 0 0 1 74.5 340Z" fill="#0b1e3a" stroke="none"/>
+    <circle cx="256" cy="256" r="200"/>
+    <path d="M150 256H216L256 296L296 256H362"/>
+  </g>
+</svg>

data/art/fountain.svg ADDED Viewed

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round">
+    <path d="M256 472V40"/>
+    <path d="M256 472C234 310 180 202 121 143"/>
+    <path d="M256 472C278 310 332 202 391 143"/>
+    <path d="M256 472C216 348 124 283 51 251"/>
+    <path d="M256 472C296 348 388 283 461 251"/>
+  </g>
+</svg>

data/art/goldrush.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M152 248 L190 128 L322 128 L360 248 Z"/>
+    <path d="M40 384 L78 264 L210 264 L248 384 Z"/>
+    <path d="M264 384 L302 264 L434 264 L472 384 Z"/>
+  </g>
+</svg>

data/art/houston.svg ADDED Viewed

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#5aa9e6" stroke-width="28" stroke-linecap="round">
+    <circle cx="256" cy="256" r="224"/>
+    <path d="M32 256h448"/>
+    <path d="M256 32c142 63 142 385 0 448"/>
+    <path d="M256 32c-142 63-142 385 0 448"/>
+  </g>
+</svg>

data/art/icons.txt ADDED Viewed

@@ -0,0 +1,185 @@
+# Every Bootstrap Icon a easyfaa page may draw: the ones unicon names for its concepts,
+# and the few written out by name in recourse and here. The icon font and its stylesheet
+# are cut down to these by rake icons; a name missing here is a blank box on a page.
+airplane
+alarm
+archive
+arrow-clockwise
+arrow-counterclockwise
+arrow-down
+arrow-left
+arrow-right
+arrow-up
+arrows-angle-contract
+arrows-angle-expand
+award
+bag
+bank
+bar-chart
+battery
+bell
+bicycle
+book
+bookmark
+bookmark-fill
+box
+box-arrow-in-right
+box-arrow-right
+briefcase
+brush
+building
+bus-front
+c-circle
+calendar
+calendar-check
+camera
+camera-video
+car-front
+card-checklist
+cart
+cash
+chat
+check
+check-circle
+check-circle-fill
+check2-square
+chevron-down
+chevron-left
+chevron-right
+chevron-up
+circle
+clipboard
+clock
+cloud
+cloud-rain
+collection-play
+compass
+copy
+credit-card
+dash
+display
+download
+droplet
+emoji-smile
+envelope
+exclamation-triangle
+eye
+eye-slash
+file-earmark
+file-earmark-text
+fingerprint
+fire
+flag
+folder
+funnel
+gear
+geo
+geo-alt
+gift
+globe
+graph-up
+grid
+grip-vertical
+hammer
+hand-thumbs-down
+hand-thumbs-up
+hdd-rack
+headphones
+heart
+hospital
+hourglass
+house
+image
+inbox
+infinity
+info-circle
+key
+keyboard
+laptop
+layout-sidebar
+lightbulb
+lightning
+link
+list
+list-ul
+lock
+magic
+map
+megaphone
+mic
+moon
+moon-fill
+music-note
+palette
+paperclip
+pause
+pen
+pencil
+people
+percent
+person
+person-circle
+person-dash
+person-plus
+person-rolodex
+person-vcard
+phone
+pie-chart
+play
+plus
+power
+printer
+puzzle
+qr-code
+question-circle
+receipt
+repeat
+reply
+rulers
+scissors
+search
+send
+share
+shield
+shop
+shuffle
+signpost-split
+skip-forward
+sliders
+snow
+sort-down
+sort-up
+soundwave
+speedometer
+square
+star
+sticky
+stop
+stopwatch
+sun
+sun-fill
+table
+tag
+telephone
+terminal
+three-dots
+ticket
+tools
+train-front
+trash
+tree
+trophy
+truck
+unlock
+upc
+upload
+volume-up
+wallet
+wifi
+window
+wrench
+x
+x-circle
+x-lg
+zoom-in
+zoom-out