Matt Rothenberg mattrothenberg

I've been working on a new docs site for https://replicate.com/ and we're using Remix as a front-end framework and MDX for all of our technical writing.

We co-locate all of our high-res image assets in the repository itself, and were looking for a way to, at dev and build time:

Convert and resize images on-demand (e.g., to next-gen formats like .webp)
Generate LQIP assets
Extract metadata from the underlying image asset, such as width and height.

The most recent of version of Remix works as a Vite plugin, which means you as the developer have access to the wonderful ecosystem of Vite at your disposal when building your site.

We discovered an awesome library which handles most of the aforementioned functionality: vite-imagetools.

Keybase proof

I hereby claim:

I am mattrothenberg on github.
I am mattrothenberg (https://keybase.io/mattrothenberg) on keybase.
I have a public key whose fingerprint is F7E4 05A6 985E 04C9 7CC5 4C20 9329 272F 2F41 EA0D

To claim this, I am signing this object:

Cloning and Building

git clone [email protected]:pivotal-cf/pivotal-ui.git
cd pivotal-ui/library
npm install
cd .. && ./update-styleguide.sh
cd styleguide
gulp dev
Open http://localhost:8000/ and hack away

	// The module 'vscode' contains the VS Code extensibility API
	// Import the module and reference it with the alias vscode in your code below
	import * as vscode from "vscode";

	// This method is called when your extension is activated
	// Your extension is activated the very first time the command is executed
	export function activate(context: vscode.ExtensionContext) {
	// Add a command that when executed lists all of the diagnostics in the active editor
	const disposable = vscode.commands.registerCommand(
	"yourExtension.listDiagnostics",

	@charset "UTF-8";
	@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");
	/* Custom Stuff Here */
	/@import url("https://fonts.googleapis.com/css?family=Lato");/
	@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");
	@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
	/@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');/

	/*!
	* Bootstrap v4.1.3 (https://getbootstrap.com/)

	#!/usr/bin/env node

	var program = require('commander');
	var colors = require('colors');
	var Spinner = require('cli-spinner').Spinner;
	var spinner = new Spinner('Hot damn, those are some nice styles! Hang tight while we set up your styleguide... %s');
	spinner.setSpinnerString('\|/-\\');

	program
	.command('new-styleguide')

	#!/usr/bin/env node

	var program = require('commander');
	var colors = require('colors');
	var Spinner = require('cli-spinner').Spinner;
	var spinner = new Spinner('Hot damn, those are some nice styles! Hang tight while we set up your styleguide... %s');
	spinner.setSpinnerString('\|/-\\');

	program
	.command('new-styleguide <stylesheet>')

	#!/usr/bin/env node

	var program = require('commander');

	program
	.command('new-styleguide <stylesheet>')
	.description('Creates a new Runway styleguide, given a .CSS or .SCSS file. Returns the URL to your styleguide.')
	.action(newStyleguide);

	function generateRandomNumber(min, max) {

	<table class="table queue-table">
	<thead>
	<tr>
	<th class="score-cell col-sm-2">Score</th>
	<th class="participants-cell col-sm-2">Participants</th>
	<th class="channel-cell col-sm-1">Channel</th>
	<th class="excerpt-cell col-sm-6">Excerpt</th>
	<th class="attachment-cell col-sm-1">Attachment</th>
	</tr>
	</thead>