Merge pull request #5 from thoughtis/day-five

Day Five
thoughtis · Aug 14, 2019 · 6107f6e · 6107f6e
2 parents 7938916 + 18ab40d
commit 6107f6e
Show file tree

Hide file tree

Showing 22 changed files with 8,681 additions and 8 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+	"exclude": "node_modules/**",
+	"comments": false,
+	"presets":[
+		[
+			"@babel/env", {
+				"modules": false
+			}
+		],
+		[
+			"minify"
+		]
+	]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+	"extends": ["plugin:@wordpress/eslint-plugin/recommended"]
+}
diff --git a/.gitignore b/.gitignore
@@ -17,5 +17,5 @@ wp-content/plugins/hello.php
 /sitemap.xml
 /sitemap.xml.gz
 
-
 /vendor/
+node_modules
diff --git a/assets/dist/css/critical.css b/assets/dist/css/critical.css
diff --git a/assets/dist/css/presentational.css b/assets/dist/css/presentational.css
diff --git a/assets/dist/js/lazy-load-css.js b/assets/dist/js/lazy-load-css.js
@@ -0,0 +1,6 @@
+(function () {
+	'use strict';
+
+	var files=window.cataLazyCSSFiles,head=document.querySelector("head");Array===files.constructor&&files.forEach(appendFileToHead.bind(null,head));function appendFileToHead(a,b){var c=document.createElement("link");c.setAttribute("href",b.href),c.setAttribute("media",b.media),c.setAttribute("rel","stylesheet"),c.setAttribute("type","text/css"),a.append(c);}
+
+}());
diff --git a/assets/src/js/lazy-load-css.js b/assets/src/js/lazy-load-css.js
@@ -0,0 +1,27 @@
+/**
+ * Lazy Load CSS
+ */
+
+const files = window.cataLazyCSSFiles;
+const head = document.querySelector( 'head' );
+
+if ( Array === files.constructor ) {
+	files.forEach( appendFileToHead.bind( null, head ) );
+}
+
+/**
+ * Append File To Head
+ *
+ * @param {HTMLHeadElement} _head
+ * @param {string} fileURL
+ */
+function appendFileToHead( _head, fileObject ) {
+	const link = document.createElement( 'link' );
+
+	link.setAttribute( 'href', fileObject.href );
+	link.setAttribute( 'media', fileObject.media );
+	link.setAttribute( 'rel', 'stylesheet' );
+	link.setAttribute( 'type', 'text/css' );
+
+	_head.append( link );
+}
diff --git a/assets/src/less/critical.less b/assets/src/less/critical.less
@@ -0,0 +1,9 @@
+/**
+ * Critical CSS
+ * We'll let this be load blocking in the <head>.
+ */
+
+@import (inline) "../../../node_modules/normalize.css/normalize.css";
+@import "reset/**";
+@import "utilities/**";
+@import "wordpress/**";
diff --git a/assets/src/less/presentational.less b/assets/src/less/presentational.less
@@ -0,0 +1,4 @@
+/**
+ * Presentational CSS
+ * We'll lazy load this.
+ */
diff --git a/assets/src/less/reset/reset.less b/assets/src/less/reset/reset.less
@@ -0,0 +1,39 @@
+/**
+ * Reset
+ * The stuff we always always do, but isn't in normalize.css
+ */
+
+*,
+*:after,
+*:before {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+	line-height: 1.5;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	font-family: -system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+figure {
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+code, pre {
+	max-width: 100%;
+	overflow: auto;
+}
+
+pre {
+	padding-block-end: 1.5em;
+}
diff --git a/assets/src/less/utilities/clearfix.less b/assets/src/less/utilities/clearfix.less
@@ -0,0 +1,28 @@
+/**
+ * Clearfix
+ */
+
+.clearfix {
+	&:before,
+	&:after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+}
+
+.clearfix-before {
+	&:before {
+		content: "";
+		display: block;
+		clear: both;
+	}
+}
+
+.clearfix-after {
+	&:after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+}
diff --git a/assets/src/less/wordpress/alignment.less b/assets/src/less/wordpress/alignment.less
@@ -0,0 +1,17 @@
+/**
+ * Alignment
+ */
+.aligncenter {
+	margin-inline-end: auto;
+	margin-inline-start: auto;
+}
+
+.alignleft {
+	margin-inline-end: auto;
+}
+
+.alignright {
+	margin-inline-start: auto;
+}
+
+/* .alignnone {} */
diff --git a/assets/src/less/wordpress/site.less b/assets/src/less/wordpress/site.less
@@ -0,0 +1,10 @@
+/**
+ * Site
+ * .site wraps everything. It is the first visible block
+ * after the screen-reader only skip link.
+ */
+
+ .site {
+	padding-inline-end: 1em;
+	padding-inline-start: 1em;
+}
diff --git a/assets/src/less/wordpress/wp-caption.less b/assets/src/less/wordpress/wp-caption.less
@@ -0,0 +1,7 @@
+/**
+ * WP Caption
+ */
+
+.wp-caption {
+	max-width: 100%;
+}
diff --git a/comments.php b/comments.php
@@ -0,0 +1,33 @@
+<?php 
+/**
+ * Comments
+ * 
+ * @package Cata
+ */
+
+/*
+ * If the current post is protected by a password and
+ * the visitor has not yet entered the password we will
+ * return early without loading the comments.
+ */
+if ( post_password_required() ) {
+	return;
+}
+?>
+<div class="area--comments comments" id="comments">
+	<h2 class="comments__title"><?php esc_html_e( 'Comments', 'cata' ); ?></h2>
+	<?php if ( have_comments() ) : ?>
+		<ol>
+		<?php
+			wp_list_comments(
+				array(
+					'style' => 'ol',
+					'type'  => 'comment',
+				)
+			);
+		?>
+		</ol>
+		<?php the_comments_navigation(); ?>
+	<?php endif; ?>
+	<?php comment_form(); ?>
+</div>
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,146 @@
+/**
+ * Gulpfile
+ * 
+ * @package Cata
+ */
+
+const autoprefixer = require( 'autoprefixer' );
+const browserSync  = require( 'browser-sync' );
+const cssnano      = require( 'cssnano' );
+const eslint       = require( 'gulp-eslint' );
+const gulp         = require( 'gulp' );
+const less         = require( 'gulp-less' );
+const lessGlob     = require( 'less-plugin-glob' );
+const path         = require( 'path' );
+const postcss      = require( 'gulp-postcss' );
+const postcssClean = require( 'postcss-clean' );
+const rollup       = require( 'gulp-better-rollup' );
+const rollupBabel  = require( 'rollup-plugin-babel' );
+
+/**
+ * Task: LESS
+ * 
+ * @param {function} done
+ */
+function taskLess( done ) {
+
+	const lessOptions = {
+		paths: [ path.resolve( __dirname, 'assets/src/less' ) ],
+		plugins: [ lessGlob ]
+	};
+
+	const postcssCleanOptions = {
+		level: 2,
+		keepSpecialComments: 0
+	};
+
+	const postcssPlugins = [
+		postcssClean( postcssCleanOptions ),
+		autoprefixer(),
+		cssnano( { safe: true } )
+	];
+
+	gulp
+		.src( './assets/src/less/*.less' )
+		.pipe( less( lessOptions ) )
+		.pipe( postcss( postcssPlugins ) )
+		.pipe( gulp.dest( './assets/dist/css' ) )
+		.pipe( browserSync.stream() );
+
+	done();
+
+}
+gulp.task( 'less', taskLess );
+
+/**
+ * Task: Less Watch
+ */
+function taskLessWatch( done ) {
+	gulp.watch( './assets/src/less/**/*.less', gulp.series( 'less' ) );
+	done();
+}
+gulp.task( 'lessWatch', taskLessWatch )
+
+/**
+ * Task: BrowserSync
+ * Sync with browser
+ * The host will be wrapped with a proxy URL http://localhost:3000/
+ * 
+ * @param {function} done
+ */
+function taskBrowserSync( done ) {
+
+	var options = {
+		proxy: 'dev.test',
+		open: false
+	};
+
+	browserSync.init( options );
+
+	done();
+
+}
+gulp.task( 'browserSync', taskBrowserSync );
+
+/**
+ * Task Scripts
+ * 
+ * @param {function} done 
+ */
+async function taskScripts( done ) {
+
+	const inputSettings = {
+		plugins: [
+			rollupBabel()
+		]
+	};
+
+	const outputSettings = {
+		format: 'iife'
+	};
+
+	gulp
+		.src( './assets/src/js/*.js' )
+		.pipe( rollup( inputSettings, outputSettings ) )
+		.pipe( gulp.dest( './assets/dist/js/' ) );
+
+	done();
+
+}
+gulp.task( 'scripts', taskScripts );
+
+/**
+ * Task Scripts Watch
+ * 
+ * @param {function} done 
+ */
+function taskScriptsWatch( done ) {
+
+	gulp
+		.watch( './assets/src/js/**/*.js', gulp.series( 'scripts' ) )
+		.on( 'change', scriptsOnChange );
+
+	done();
+
+}
+gulp.task( 'scriptsWatch', taskScriptsWatch );
+
+/**
+ * On Change
+ * 
+ * @param {string} pathToChangedFile 
+ */
+function scriptsOnChange( pathToChangedFile ) {
+
+	// ESLint
+	gulp
+		.src( pathToChangedFile )
+		.pipe( eslint() )
+		.pipe( eslint.formatEach( 'table', process.stderr ) );
+
+}
+
+/**
+ * Default
+ */
+gulp.task( 'default', gulp.series( 'browserSync', 'less', 'lessWatch', 'scripts', 'scriptsWatch' ) );
diff --git a/header.php b/header.php
@@ -12,11 +12,11 @@
 ?>
 <header class="site__header" id="header" role="banner">
 	<hgroup>
-		<h1>
+		<h1 class="site__title">
 			<a href="<?php echo esc_url( home_url() ); ?>"><?php bloginfo( 'name' ); ?></a>
 		</h1>
 		<?php if ( get_bloginfo( 'description' ) ) : ?>
-		<span><?php bloginfo( 'description', 'display' ); ?></span>
+		<span class="site__description"><?php bloginfo( 'description', 'display' ); ?></span>
 		<?php endif; ?>
 	</hgroup>
 	<nav class="site__navigation" id="siteNav">

diff --git a/includes/bootstrap.php b/includes/bootstrap.php
@@ -5,6 +5,9 @@
  * @package Cata
  */
 
-new Cata\Languages();
-new Cata\Nav_Menus();
-new Cata\Sidebar();
+namespace Cata;
+
+new Enqueue_Assets();
+new Languages();
+new Nav_Menus();
+new Sidebar();