jacobrask

import enhance from "@enhance/ssr";
import postProcess from "next/dist/server/post-process.js";
import MyButton from "./src/elements/my-button.mjs";
import MyIcon from "./src/elements/my-icon.mjs";
import styleTransform from "@enhance/enhance-style-transform";

const _postProcessHTML = postProcess.postProcessHTML;
postProcess.postProcessHTML = async function postProcessHTML(
  pathname,
  content,

jacobrask

/**
 * PoC using recursive proxies to maintain a typed interface for your CSS variable themes.
 *
 * See https://www.joshwcomeau.com/css/css-variables-for-react-devs/ for an excellent intro to CSS variables.
 *
 * Using CSS variables as plain strings in TypeScript is not great though.
 * It's prone to typos, difficult to refactor and you can't easily deprecate properties or add aliases.
 * One solution is to create a JavaScript object of your theme, with the CSS variable as the value, but
 * if users are already downloading your theme as CSS variables, why make them download it again as a JS object?
 */

jacobrask

import React from 'react';

// Composes any number of props transforms and applies them in a HOC.
const transform = (...transforms) =>
  WrappedComponent =>
    props =>
      <WrappedComponent {...transforms.reduce((ps, t) => t(ps), props)} />;

// Example reusable transforms.
const addClass = className => props => ({ ...props, className });

jacobrask

#!/bin/bash

function install {
  # Stop and clean up existing containers
  docker ps -a | grep critic | awk '{print $1}' | xargs docker rm -f

  # Run a postgres container based on the standard Docker postgres image
  docker run --name critic-postgres -d postgres

  # Build a Critic image based on Debian

jacobrask

function test (name, fn) {
  console.group(name);
  var args = [ console.assert.bind(console) ];
  // Async
  if (fn.length > 1) {
    var timeout = setTimeout(function(){ console.error(name+' timed out'); }, 2000);
    args.push(clearTimeout.bind(null, timeout));
  }
  fn.apply(null, args);
  console.groupEnd();

jacobrask

// Proof of concept DOM utility library
//
// Usage
// ------------------------------------------------------------------
//     var html = window.domchain;
//     html().p('.foo#bar').span().text("Hello World").render();
//     => <p class="foo" id="bar"><span>Hello World</span></p>
//
// Inspired by [htmlutils](https://github.com/jensl/critic/blob/master/htmlutils.py),
// [domo](https://github.com/jed/domo) and [Sugared DOM](https://gist.github.com/1532562);

jacobrask

// DOM sugar
// ==================================================================
// Modified version of Neil Jenkins' "Sugared DOM" <https://gist.github.com/3524145>
//
// Usage
// ------------------------------------------------------------------
// var make = domsugar(document);
//
// make( 'p.foo#bar', { hidden: true }, [ make( 'span' ) ] );
// => <p class="foo" id="bar" hidden><span></span></p>

jacobrask

%test {
  foo: bar;
}

jacobrask

/*
Fadeout and marquee
*/
.fadeout-text {
  overflow: hidden;
  width: 130px;
  /* Fallback solution for browsers that 
     doesn't support the next set of rules. */
  text-overflow: ellipsis;
  white-space: nowrap;

jacobrask

*.png diff=xpm