Skip to content

Instantly share code, notes, and snippets.

View Munter's full-sized avatar

Peter Müller Munter

View GitHub Profile
@Munter
Munter / magivpen.d.ts
Created May 28, 2020 07:57
Typings for unexpected
declare module "magicpen" {
function magicpen(): magicpen.MagicPen;
namespace magicpen {
interface MagicPen {
/**
* @see https://github.com/sunesimonsen/magicpen#textcontent-stylestring
*/
text(content: string, ...style: Array<string>): this;
@Munter
Munter / getEntrypointsFromWebpackConfig.js
Created May 14, 2020 15:58
Get all entrypoints referenced by a webpack configuration
// @ts-check
const { resolve } = require('path');
/** @typedef {import('webpack/declarations/WebpackOptions').WebpackOptions} WebpackOptions */
/** @typedef {import('webpack/declarations/WebpackOptions').Entry} Entry */
/**
* @param {string} webpackConfigPath
*/
module.exports = async function getEntrypointsFromWebpackConfig(
const AssetGraph = require('assetgraph');
async function everythingIsRelative(graphInstance) {
const relations = graphInstance.findRelations({hrefType: {$not: 'inline'}});
for (const relation of relations) {
relation.hrefType = 'relative';
}
}
/**
* A graph model of a website, consisting of [Assets]{@link Asset} (edges) and [Relations]{@link Relation}.
*
*
* @extends EventEmitter
*/
declare class AssetGraph extends EventEmitter {
constructor(options: {
root?: string;
canonicalRoot?: string;
$ hyperlink https://glasvaeg.dk/ -r | tap-spot
Guessing --root from input files: https://glasvaeg.dk/
×.×............................×.............××........................................×...........×......×.....................×....................................×.....×.×.×..×.×.×..×.......××××××××..
✖ FAIL Failed loading inline Css in https://glasvaeg.dk/
| operator: error
| actual: inline Css in https://glasvaeg.dk/: Parse error in inline Css in https://glasvaeg.dk/(line 1, column 57):
https://glasvaeg.dk/:1:57: Unclosed bracket
✖ FAIL Failed loading https://glasvaeg.dk/wp-content/themes/glasvaeg/css/responsive.css
munter at Peters-MacBook-Air-4 in ~/git/mntr.dk on master
$ npm run build && tree dist
> mntr.dk@1.0.0 prebuild /Users/munter/git/mntr.dk
> rm -rf build dist
> mntr.dk@1.0.0 build /Users/munter/git/mntr.dk
> bundle exec jekyll build && subfont build/index.html --inline-css -i
var request = require('request');
console.log('Checking availability of https://jspm.io');
request({
method: 'head',
url: 'https://jspm.io',
strictSSL: true,
gzip: true,
headers: {
TAP version 13
# Crawling internal assets
ok 1 loading build/index.html
ok 2 loading build/assets/favicon.ico
ok 3 loading build/1f737bdd5ea6caa2c40e.css
ok 4 loading build/6bc5d8cf78d442a984e70195db059b69.svg
ok 5 loading build/153b55d74abe6a90d881645d7691ef7a.js
ok 6 loading build/guides/get-started/index.html
ok 7 loading build/contribute/index.html
ok 8 loading build/organization/index.html
@Munter
Munter / inline.js
Last active December 19, 2016 08:54
var Assetgraph = require('assetgraph');
new Assetgraph({
root: 'myProject'
})
.logEvents()
.lodAssets('index.html')
.populate({
followRelations: { crossorigin: false }
})
/*
* This transform works on an assumption about browser loading and rendering behavior of CSS:
* When a browser loads CSS in <head> it render blocks untill all CSS in <head> has loaded.
*
* That might be slow.
*
* To appear faster, browsers will render what they have in buffer already if they meet a style <link> in <body>
* before they dive into the render blocking load.
* This lets you potentially inline critical css in <head> and put the bulk of your CSS "below the fold".
* The effect will be a quick render with critical styles applied, just before the render blockign starts.