scott.ee

Status: ✅ Active
Contributors: @scottsweb
Description: My personal website
Author: Scott Evans
Author URI: https://scott.ee

About

This is the repo for my personal website created with nuxt.js. The site is statically generated from a remotely hosted WordPress API. A full write up of how it is put together can be found on my journal.

The site is hosted on GitHub pages and on the peer to peer web, using dat (dat://scott.ee).

Development / Building

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# generate static project
$ npm run generate

# generate content only (use when new content is posted to WP)
$ npm run generate-content

# push the dist branch to GitHub pages
$ npm run deploy-gh

WordPress Images

To enable lazyload compatability add the following code to your WordPress site:

function add_lazyload( $content ) {
	// exit early if not API request
	if ( ! defined( 'REST_REQUEST' ) ) {
		return $content;
	}

	$content = mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' );
	$dom = new DOMDocument();
	@$dom->loadHTML( $content );

	$div = $dom->createElement( 'div' );
	$div->setAttribute( 'class', 'lazy' );

	// Convert Images
	$images = [];

	foreach ( $dom->getElementsByTagName( 'img' ) as $node ) {
		$images[] = $node;
	}

	foreach ( $images as $node ) {
		$fallback = $node->cloneNode( true );
		$wrapper = $div->cloneNode();

		$oldsrc = $node->getAttribute( 'src' );
		$node->setAttribute( 'data-src', $oldsrc );
		$node->setAttribute( 'src', '' );

		// extract dimensions from src and calculate an aspect ratio
		$regex = '/resize=([0-9]*)%2C([0-9]*)/m';
		preg_match( $regex, $oldsrc, $matches );
		if ( is_array( $matches ) && ! empty( $matches ) ) {
			$wrapper->setAttribute( 'data-width', $matches[1] );
			$wrapper->setAttribute( 'data-height', $matches[2] );
			$wrapper->setAttribute( 'style', '--ratio:' . round( ( $matches[2] / $matches[1] ) * 100, 2 ) . '%;' );
		} else {
			$wrapper->setAttribute( 'style', '--ratio: 50%;' );
		}

		$oldsrcset = $node->getAttribute( 'srcset' );
		$node->setAttribute( 'data-srcset', $oldsrcset );
		$node->setAttribute( 'srcset', '' );

		$noscript = $dom->createElement( 'noscript', '' );
		$node->parentNode->insertBefore( $noscript, $node );
		$noscript->appendChild( $fallback );

		$node->parentNode->replaceChild( $wrapper, $node );
		$wrapper->appendChild( $node );
	}

	$newhtml = preg_replace( '/^<!DOCTYPE.+?>/', '', str_replace( array( '<html>', '</html>', '<body>', '</body>' ), array( '', '', '', '' ), $dom->saveHTML() ) );
	return $newhtml;
}
add_filter( 'the_content', 'add_lazyload', 100 );
add_filter( 'post_thumbnail_html', 'add_lazyload', 100 );

WordPress Redirect Functionality

To redirect your WordPress site / API to production you can use this snippet. It might be an idea not to redirect logged in users in order to preserve the post preview functionality in WordPress.

function add_redirects() {
	global $wp;
	if ( ! is_admin() && ! is_feed() ) {
		wp_redirect( str_replace( 'api.', '', home_url( $wp->request ) ), 301 );
		exit;
	}
}
add_filter( 'template_redirect', 'add_redirects' );

WordPress Feed URLs

I am also experimenting with changing the URLs within the RSS feed to reduce redirects. The RSS feed is still currently being served from the WordPress side at api.scott.ee/feed/.

function fix_feed_home_url( $home ) {
	if ( is_feed() ) {
		return str_replace( 'api.', '', $home );
	}
	return $home;
}
add_filter( 'home_url', 'fix_feed_home_url' );

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

scottsweb / v1.scott.ee

Programming Languages

Labels