Merge pull request #112 from wcarhart/feature/bug-fixes-and-performan…

…ce-enhancements

Small bug fixes and performance improvements

config.json

@@ -1,3 +1,3 @@
 {
-	"cdn": "https://storage.googleapis.com/willcarh-art/"
+	"cdn": "https://cdn.willcarh.art/"
 }

generator/builder.js

@@ -28,6 +28,7 @@ Support dynamic asset tags:
   {{sys:header}}         --> generated header for HTML files
   {{sys:headerjs}}       --> generated header for JS files
   {{sys:charizard}}      --> Charizard ascii art
+  {{sys:preload}}        --> list of all images to preload
 */
 
 /*
@@ -597,8 +598,12 @@ const buildProjSpec = async (projects, page) => {
 	let technologiesMetadataHtml = technologiesMetadataSnippet.replace('{{technologies}}', project.languages.concat(project.technologies).filter(p => p !== '').join(' · '))
 	// TODO: implement github stars
 	let githubStarsMetadataHtml = githubStarsMetadataSnippet.replace('{{github-stars}}', '-')
-	// TODO: if install is empty, should not use color nor monospace font
-	let installMetadataHtml = installMetadataSnippet.replace('{{install}}', project.install === '' ? '-' : project.install)
+	let installMetadataHtml = ''
+	if (project.install === '') {
+		installMetadataHtml = installMetadataSnippet.replace('{{install}}', '-')
+	} else {
+		installMetadataHtml = installMetadataSnippet.replace('{{install}}', `<code class="inline-code">${project.install}</code>`)
+	}
 	let latestReleaseMetadataHtml = latestReleaseMetadataSnippet.replace('{{version}}', project.latest_version === '' ? '-' : project.latest_version)
 	let dateText = '-'
 	if (project.published !== '') {
@@ -726,6 +731,7 @@ const buildProjSuper = async (projects) => {
 	return html
 }
 
+// attempt to remove unsafe characters from HTML IDs, classnames, and sometimes routing
 const htmlSafify = async (string) => {
 	return string.toLowerCase().replace(/\./g, '----').replace(/#/g, '').replace(/ /g, '_').replace(/,/g, '').replace(/'/g, '')
 }
@@ -825,7 +831,7 @@ const buildProjAll = async (projects) => {
 		rowHtml = rowHtml.replace('{{project-container-featured}}', featuredContainer)
 
 		// build additional tile containers to fit in row
-		// TODO: this is not DRY - repeated for featured, tile, and regular - should be function
+		// this could probably be more DRY....but I am lazy
 		for (let i = 0; i < 4; i++) {
 			let tileProject = null
 			if (featuredProjects.length !== 0) {
@@ -988,8 +994,7 @@ const buildVaultRows = async (experiences, projects, blogs) => {
 			r.githubName = ''
 			r.linkUrl = experience.url
 			r.blogPost = experience.blogPost
-			// TODO: this should redirect to the actual exp-tab, not just the page scroll location
-			r.vaultLink = '{{src:about}}#experience'
+			r.vaultLink = `{{src:about}}?exp=${experience.companyId}#experience`
 
 			rows.push(r)
 		}
@@ -1012,7 +1017,7 @@ const buildVaultRows = async (experiences, projects, blogs) => {
 		r.githubName = project.repo
 		r.linkUrl = project.link
 		r.blogPost = project.blogPost
-		r.vaultLink = `{{src:project/${await htmlSafify(project.name)}}}`
+		r.vaultLink = `{{src:project/${project.id}}}`
 
 		rows.push(r)
 	}
@@ -1030,7 +1035,7 @@ const buildVaultRows = async (experiences, projects, blogs) => {
 		r.docsName = ''
 		r.githubName = ''
 		r.linkUrl = ''
-		r.blogPost = `{{src:blog/${await htmlSafify(blog.title.toLowerCase().replace(/ /g, '-'))}}}`
+		r.blogPost = `{{src:blog/${blog.id}}}`
 		r.vaultLink = r.blogPost
 
 		rows.push(r)

generator/core.js

@@ -13,6 +13,7 @@ const config = require('../config.json')
 const package = require('../package.json')
 
 const builder = require('./builder.js')
+const parser = require('./parser.js')
 
 const readdirPromise = util.promisify(fs.readdir)
 const readFilePromise = util.promisify(fs.readFile)
@@ -21,8 +22,6 @@ const mkdirPromise = util.promisify(fs.mkdir)
 const truncatePromise = util.promisify(fs.truncate)
 const copyFilePromise = util.promisify(fs.copyFile)
 
-// TODO: add verbose comments
-
 // generate HTML files based on page type
 const generate = async (page, develop) => {
 	// set up file structure
@@ -135,7 +134,7 @@ const buildScripts = async (develop) => {
 	}
 }
 
-// build style elements
+// build style elements: css/*, ico/*, font/*
 const buildStyles = async () => {
 	try {
 		await fs.promises.access('src/css')
@@ -239,6 +238,7 @@ const buildDynamicAsset = async (data, match, asset, level, develop) => {
 	let resolvedData = data
 	const now = Date().toLocaleString()
 	let headerData = null, headerjsData = null, charizard = null, message = null
+	let projects = null, blogs = null, img = null, icofiles = null
 	switch (asset) {
 		case 'develop':
 			resolvedData = resolvedData.replace(match, develop)
@@ -272,6 +272,26 @@ const buildDynamicAsset = async (data, match, asset, level, develop) => {
 			message += '\n-->\n'
 			resolvedData = resolvedData.replace(match, message)
 			break
+		case 'preload':
+			projects = await parser.parse('project')
+			blogs = await parser.parse('blog')
+			img = []
+			for (let p of projects) {
+				if (p.visibility !== 'none') {
+					img.push(p.img)
+				}
+			}
+			for (let b of blogs) {
+				img.push(b.cover)
+			}
+			icofiles = await readdirPromise('ico')
+			for (let ico of icofiles) {
+				if (ico.endsWith('.png')) {
+					img.push(`{{ico:${ico}}}`)
+				}
+			}
+			resolvedData = resolvedData.replace(match, await resolveAssets(`[${img.map(i => `'${i}'`).join(',')}]`, 1, develop))
+			break
 		default:
 			throw new Error(`Unknown system asset: '${asset}'`)
 	}

generator/generator.js

@@ -37,6 +37,7 @@ const generateFileTree = async () => {
 	console.log(tree)
 }
 
+// recursive function for pretty printing file trees
 const buildTree = async (dir, indent, isTail, result) => {
 	let stats = await statPromise(dir)
 	let files = []
@@ -91,6 +92,7 @@ const parseArgs = async (args) => {
 	return parsedArgs
 }
 
+// run generator
 const main = async () => {
 	try {
 		const args = await parseArgs(process.argv.slice(2))
@@ -104,9 +106,8 @@ const main = async () => {
 		// clear out source directory
 		await rmdirPromise('src/', { recursive: true })
 
-		// TODO: this shouldn't matter
 		// asset order is essential, due to how linking occurs:
-		//  - scripts must be built first
+		//  - scripts must be built first and styles must be first
 		//  - vault must be built before projects
 		const assets = ['scripts', 'style', 'home', 'vault', 'demo', 'about', 'blog', 'projects', 'etc']
 		for (let asset of assets) {

generator/parser.js

@@ -5,6 +5,7 @@ const entities = require('./entities.js')
 
 const readFilePromise = util.promisify(fs.readFile)
 
+// define validation strategies for each entity
 const SUPPORTED_ENTITIES = {
 	experience: {
 		content: 'content/experience.md',

js/expselector.js

@@ -4,33 +4,46 @@
 
 // init tabs
 $(document).ready(async () => {
+	// if URL contains query parameter 'exp', we want to switch to that experience tab
+	let urlParams = new URLSearchParams(window.location.search)
+	if (urlParams.has('exp')) {
+		selectExperience({'override': urlParams.get('exp')})
+	}
+
+	// dynamically update div height after selecting experience
 	$('#exp-content-container').css('height', $('.exp-active').height())
 })
 
 // handle new click on experience
 $(document).ready(async () => {
-	$('.exp-selector').click(function() {
-
-		// get our selected experience
-		const exp = this.id.split('-').pop()
-
-		// toggle selectors
-		const selectors = $('.exp-selector')
-		for (let s of selectors) {
-			$(s).removeClass('exp-selector-active')
-		}
-		$(this).addClass('exp-selector-active')
-
-		// toggle content
-		const content = $('.exp-content')
-		for (let c of content) {
-			$(c).removeClass('exp-active')
-			$(c).addClass('exp-hidden')
-		}
-		$(`#exp-details-${exp}`).removeClass('exp-hidden')
-		$(`#exp-details-${exp}`).addClass('exp-active')
-
-		// set height of content container
-		$('#exp-content-container').css('height', $(`#exp-details-${exp}`).height())
-	})
-})
+	$('.exp-selector').click(selectExperience)
+})
+
+function selectExperience({override=''}) {
+	// get our selected experience
+	let exp = ''
+	if (override === '') {
+		exp = this.id.split('-').pop()
+	} else {
+		exp = override
+	}
+
+	// toggle selectors
+	const selectors = $('.exp-selector')
+	for (let s of selectors) {
+		$(s).removeClass('exp-selector-active')
+	}
+	$(`#exp-selector-${exp}`).addClass('exp-selector-active')
+
+	// toggle content
+	const content = $('.exp-content')
+	for (let c of content) {
+		$(c).removeClass('exp-active')
+		$(c).addClass('exp-hidden')
+	}
+	$(`#exp-details-${exp}`).removeClass('exp-hidden')
+	$(`#exp-details-${exp}`).addClass('exp-active')
+
+	// set height of content container
+	$('#exp-content-container').css('height', $(`#exp-details-${exp}`).height())
+}

js/preload.js

@@ -0,0 +1,10 @@
+{{sys:headerjs}}
+
+// images to preload
+const photos = {{sys:preload}}
+
+// preload images from CDN
+for (const photo of photos) {
+	let img = new Image()
+	img.src = photo
+}

js/profilephoto.js

@@ -3,7 +3,7 @@
 // rotate profile pictures on about page
 $(document).ready(async () => {
 
-	// TODO: add more pictures?
+	// registered photos
 	const photos = [
 		'{{cdn:img/profile.jpg}}',
 		'{{cdn:img/profile4.jpeg}}',

snippets/project-spec/metadata/install-project-metadata.html

@@ -1,2 +1,2 @@
 <p class="project-metadata-label">INSTALL</p>
-<p class="project-metadata-value"><code class="inline-code">{{install}}</code></p>
+<p class="project-metadata-value">{{install}}</p>

templates/about.html

@@ -45,6 +45,7 @@
 		<script src="{{js:anchorjump.js}}"></script>
 		<script src="{{js:expselector.js}}"></script>
 		<script src="{{js:aboutpagetidbit.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 	</head>
 	<body>
 

templates/blog_index.html

@@ -38,6 +38,7 @@
 		<!-- willcarh.art scripts -->
 		<script src="{{js:darkmode.js}}"></script>
 		<script src="{{js:year.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 		<!-- blogcards script is loaded after body for performance reasons -->
 	</head>
 	<body>

templates/demo_index.html

@@ -39,6 +39,7 @@
 		<script src="{{js:darkmode.js}}"></script>
 		<script src="{{js:year.js}}"></script>
 		<script src="{{js:demorows.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 	</head>
 	<body>
 

templates/etc.html

@@ -40,6 +40,7 @@
 		<script src="{{js:year.js}}"></script>
 		<script src="{{js:anchorjump.js}}"></script>
 		<script src="{{js:etc.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 	</head>
 	<body>
 		<!-- text content -->

templates/home.html

@@ -43,6 +43,7 @@
 		<script src="{{js:email.js}}"></script>
 		<script src="{{js:homepagetidbit.js}}"></script>
 		<script src="{{js:data.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 	</head>
 	<body>
 

templates/project_index.html

@@ -40,6 +40,7 @@
 		<script src="{{js:darkmode.js}}"></script>
 		<script src="{{js:year.js}}"></script>
 		<script src="{{js:linkicons.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 		<!-- projectcards script is loaded after body for performance reasons -->
 	</head>
 	<body>

templates/vault.html

@@ -41,6 +41,7 @@
 		<script src="{{js:year.js}}"></script>
 		<script src="{{js:linkicons.js}}"></script>
 		<script src="{{js:vaultrows.js}}"></script>
+		<script async src="{{js:preload.js}}"></script>
 	</head>
 	<body>