rrix
/
arcology-elixir
1
0
Fork 0
Code Releases Wiki Activity
arcology-elixir/aesthetics.org

4.4 KiB
Raw Permalink Blame History

The Visual Identity of Arcology

This module contains the base HTML templates for the application, as well as the webpack and scss configuration so that it's clear how all this fits together. I am not sure how to manage this reasonably for now. There's not a lot of assets for now, luckily.

Base Template 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="manifest" href="/appmanifest.json">
    <%= csrf_meta_tag() %>
    <title><%= assigns[:page_title] || "Arcology Site Engine" %></title>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/aesthetics.css") %>"/>
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </head>
  <body>
    <header>
      <section class="site-title">
        <h1><%= assigns[:site_title] %></h1>
      </section>

      <section class="header-text">
        <%= assigns[:header_text] || "A web experience brought to you by Ryan Rix." %>
      </section>
    </header>
    
    <main role="main" class="grid-container">
      <p class="grid-x" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="grid-x" role="alert"><%= get_flash(@conn, :error) %></p>
      
      <%= render @view_module, @view_template, assigns %>
    </main>
    
    <footer class="grid-container">
      <hr/>
      <div class="grid-x">
        <p class="text-center cell">
          <em>
            Effort has been made to ensure accurate and
            thoughtful content, but I am one human. Please
            assume good faith and contact me with suggestions
            for improvement or areas of interest.
          </em>
        </p>
        <p class="text-center cell">
          &copy; 02021 Ryan Rix &lt;<a href="mailto:site@whatthfuck.computer">site@whatthefuck.computer</a>&gt;
        </p>
      </div>
    </footer>
  </body>
</html>

CSS

In the base template I have three CSS entrypoints defined, and this is mirrored in webpack.config.js:

JavaScript

There are a few JavaScript entrypoints in the webpack.config.js:

js/app.js – our code goes here.

This is where all of my front end logic will come by loaded or stored. For now there's not much, so I'll pull this out when it gets out of hand.

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import "../css/app.scss"

// import "./live.js"

// if('serviceWorker' in navigator) {
//   navigator.serviceWorker.register('/js/sw.js', {
//     scope: '/'
//   }).then(function() {
//     console.log('Service Worker Registered');
//   });
// }

js/sw.js – Service Worker for Progressive Web App

It's not clear to me how well this will handle offline behavior, I'm not sure I really care for it, though I should. The service worker will let us figure that out later, for now it caches stylesheets.

const cacheName = 'lipu-kasi';
const filesToCache = [
  '/',
  '/css/app.css',
  '/css/foundation.css',
  '/css/aesthetics.css',
];

self.addEventListener('install', function(e) {
  console.log('[lipu kasi Service Worker] Installing');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[lipu kasi Service Worker] Caching files for app');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  if (event.request.method !== 'POST') {
    event.respondWith(
      fetch(event.request).catch(function() {
        return caches.match(event.request);
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
})