customPatternLibFiles

_customPatternLibNodeSide.js

var config = require('../config')
if (!config.tasks.html) return

var browserSync = require('browser-sync')
	//var data         = require('gulp-data')
var gulp = require('gulp')
var handleErrors = require('../lib/handleErrors')
var htmlmin = require('gulp-htmlmin')
var path = require('path')
var render = require('gulp-nunjucks-render')
var fs = require('fs')
var glob = require("glob");

var paths = {
	src: path.join(config.root.src, config.tasks.html.src),
	src_components: path.join(config.root.src, config.tasks.html.src),
	dest: path.join(config.root.dest, config.tasks.html.dest),
	patternlibSrc: path.join(config.root.src, config.tasks.patternlib.src)
}

var getDirectories = function (src, callback) {
  glob(src + '/**/*', callback);
};

const patternlib = function() {
	
	let jumpNav = '';
	let componentHTML = '';
	//const componentFolders = fs.readdirSync(paths.src_components, 'utf8');

	//this is a shallow array of strings

	//node doesNt really want to do recursive searches. Need manual loop or a 'walk' method from something like https://github.com/mikeal/node-utils

	const componentFolders = fs.readdirSync(paths.patternlibSrc, 'utf8');
	const subItemsOfComponentsFolder = componentFolders.filter(function(thisComponentFolder){
		return !thisComponentFolder.startsWith('.');
	})
	
	var patternFilesFullPathStringsFromAllFolders;

	getDirectories(`${paths.src_components}`, function (err, theResult) {

	  	patternFilesFullPathStringsFromAllFolders = theResult.filter(function(thisFileName){
	  		return thisFileName.includes('_pattern');
	  	});
	    
	  	//MAP FUNCTION HERE
	  	patternFilesFullPathStringsFromAllFolders.map(function(thisPatternFullPathString){
	  		let thisPatternAbbrPathString = thisPatternFullPathString.replace('src/components/', '');
			let elementBlockOrComponent = thisPatternAbbrPathString.substring(0,thisPatternAbbrPathString.indexOf('/')).replace('_', 'pattern__');
			let justTheFileName = thisPatternFullPathString.substring(thisPatternFullPathString.lastIndexOf('/') + 1).replace('.html', '').replace('_pattern', '');

			jumpNav = `${jumpNav}<span class="interior-nav__link__wrapper ${elementBlockOrComponent}__link__wrapper"><a data-scroll href="#${justTheFileName}" class="PL-NAV__link interior-nav__link" data-scroll>${justTheFileName}</a></span>`;

			componentHTML = `${componentHTML}<div class="pl__component__wrapper"><header class="pattern__header"><h2 class="pattern__headline anchor" id="${justTheFileName}">${justTheFileName}</h2></header><div class="component-container ${elementBlockOrComponent}">{% include "${thisPatternAbbrPathString}" %}</div><div class="pre__wrapper--outer"><pre><code id="${justTheFileName}_clip"></code></pre></div><button class="pl__button--copy" data-clipboard-action="copy" data-clipboard-target="#${justTheFileName}_clip">copy</button></div>`;
		});

	  	writeStuff(jumpNav, componentHTML);
	});

	function writeStuff(jumpNav, componentHTML){
		fs.readFile(paths.src + '/__layouts/pttrn-template.html', 'utf8', function(err, data) {

			let resultHTML = data.replace(/{{{patternLib}}}/g, componentHTML);
			let result = resultHTML.replace(/{{{patternNav}}}/g, jumpNav);

			fs.writeFile(paths.src + '/pattern-library.html', result, 'utf8', function(err) {
				if (err) return console.log(err);
			});
		});
	}

	return gulp.src(paths.src);
}

gulp.task('patternlib', patternlib)
module.exports = patternlib

customPatternLibClientSide.js

//clientSide patternLib

'use strict';
(function() {

  var componentBox = document.querySelectorAll('.component-container');
  var codeBoxes = document.querySelectorAll('code');

  //zips these together
  for (var i = 0; i < componentBox.length; i++) {
    var thisCodeBox = codeBoxes[i];
    var componentHTML = componentBox[i].innerHTML;
    thisCodeBox.innerHTML = componentHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

})();

customPatternLibStyles.scss

.pattern__headline {
	padding: 1.8rem;
}

.PL-HEADER {
	height: 26rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $turquoise;
	//background: linear-gradient(135deg, $royalblue 0%, $asis-blue 100%);
	color: white;
	h1 {
		font-size: 3.6rem;
		text-transform: none;
		font-weight: 800;
	}
}
.PL-NAV__HEADLINE {
	font-size:1.6rem;
	padding-left: 2rem;
	line-height:1;
}
.PL-NAV {
	width: 20rem;
	position: fixed;
	font-size:1.6rem;
	background: white;
	height: 100%;
	box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.1);
	left: 0;
	overflow: auto;
	z-index: 3;
	.PL-NAV__link {
		display: block;
		font-weight: 400;
		text-decoration: none;
		padding: .6rem;
		border-bottom: 1px solid #eee;
		transition: all 300ms ease-in;
		&:hover,
		&:focus {
			color: $peacock;
		}
		&[link-selected="true"] {
			//box-shadow:inset -5px 0 darken($gold, 25);
			//border-right: 6px solid gold;
			background-color: $turquoise;
			color: #fff;
			transition: all 300ms ease-in;
		}
	}
}

.pattern__atoms__link__wrapper {
	&:first-of-type {
		&:before {
			content: 'Atoms';
			display: block;
			background:$text-slate;
			color: #fff;
			padding:.6rem;
			line-height: 1;
		}
	}
	+ .pattern__molecules__link__wrapper {
		&:before {
			content: 'Molecules';
			display: block;
			background:$text-slate;
			color: #fff;
			padding:.6rem;
			line-height: 1;
		}
	}
}

.pattern__molecules__link__wrapper {
	+ .pattern__organisms__link__wrapper {
		&:before {
			content: 'Organisms';
			display: block;
			background:$text-slate;
			color: #fff;
			padding:.6rem;
			line-height: 1;
		}
	}
}




.PL__ROW {
	padding: 0 !important;
	margin: 0 !important;

}

.PL__COLUMN {
	margin: 0;
	&.PL__COLUMN--hasNav {
		width:20rem;
		max-width:20rem;
		padding: 0;
	}
	&.PL__COLUMN--hasComponents {
		width:calc(100% - 20rem);
		padding-right: 0;
		padding-left: 0;
	}
}





// .back-to-top {
// 	z-index: 4;
// }

.pl__component__wrapper {
	position:relative;
}


.pl__button--copy {
	position:absolute;
	bottom:0;
	right: 0;
	font-family: monospace;
	font-size:16px;
	background: $turquoise;
	border: none;
	box-shadow:none;
	color:#fff;
	border-radius:8px 0 0 0;
	cursor: pointer;
	&:hover,
	&:focus,
	&:active {
		outline: none !important;
		cursor: pointer;
	}


}
.component-container {
	margin: auto;
	overflow:hidden;
	&.pattern__atoms {
		padding: $padding-universal;
	}
}



// // Un-fix positions
// .primary-nav,
// .utility,
// .interior-nav[scrolled] {
// 	position: static;
// }

// .utility {
// 	width: 80vw;
// 	margin-left: -5vw;
// }

// .interior-nav {
// 	position: static;
// 	margin: 0;
// }

// .upcoming-events {
// 	margin: 0;
// }

.pattern__header {
	display: block;
	clear: both;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid lightgrey;
	//background: whitesmoke;
	word-break: break-word;
}

.pattern__headline {
	margin: 0;
	padding: 1rem;
}

// .article {
// 	overflow: hidden;
// 	&.article--speakers,
// 	&.article--events,
// 	&.article--accordion {
// 		> .row {
// 			flex-direction: column;
// 		}
// 	}
// }

.pre__wrapper--outer {
	background: #f3f3f3;
	padding:$padding-universal / 2;
	border: none;
	border-top: 1px solid #efe1ef;
	border-bottom: 1px solid #efe1ef;
	position: relative;
	max-height: 100vh;
	overflow-y: auto;
	box-shadow: inset -2px -2px 2px rgba($dark-blue, .25), inset 2px 2px 2px rgba($dark-blue, .25);
}

pre {
	font-size: 12px;
	//causes overflow if there is padding on pre
	padding: 0;
	background:transparent;
	color: #666;
	
	margin: 0;
	float: none;
	border-radius: 0;
	width: 100%;
	max-width:100%;
	
	overflow-x: hidden;
	letter-spacing: -.5px;
	code {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: auto;
		white-space: pre-wrap;
		//overflow: scroll;
	}
}

pre:after {
	content: 'html';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 16px;
	padding: 0 14px;
	border-radius: 0 0 8px 0;
	background: $turquoise;
	color:#fff;
	height: 24px;
}

customPatternLibTemplate.html

{% set project = "ASIS" %}
{% set page = {title:"Pattern Library", siteSection:"Site Section"} %}

<!doctype html>
<html lang="en">
	{% include "_molecules/_docHead.html" %}
	<body id="bodyTop">
		<a class="skip-nav" href="#main">Skip to content</a>
		
		{% include "_molecules/_svgDefs.html" %}

		<div class="PL__WRAPPER--outer">
			<div class="row PL__ROW">
				<div class="column column--auto PL__COLUMN PL__COLUMN--hasNav">
					<nav class="PL-NAV" id="jumpNav">
					{{{patternNav}}}
					</nav>
				</div>
				<div class="column column--auto PL__COLUMN PL__COLUMN--hasComponents">
					<main class="PL-MAIN">
						<header class="PL-HEADER">
							<h1>ASIS Pattern Library</h1>
						</header>
						{{{patternLib}}}
					</main>
				</div>
			</div>
		</div>
		{% include "_organisms/back_to_top/back_to_top.html" %}

		<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script>
		<script src="js/app.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>
		<script src="js/vendor/patternlibClientSide.js"></script>
		<script>
			var clipboard = new Clipboard('.pl__button--copy');
		</script>
	</body>
</html>