Skip to content

Convert images to webp and update build processes #351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
36 changes: 33 additions & 3 deletions .eleventy.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const markdownItAnchor = require("markdown-it-anchor");
const markdownItHighlightJS = require('markdown-it-highlightjs')
const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
const packageVersion = require("./package.json").version;
const htmlmin = require("html-minifier-terser");
const CleanCSS = require("clean-css");

const mdOptions = {
html: true,
Expand All @@ -30,6 +32,30 @@ const mdAnchorOpts = {
}

module.exports = function (eleventyConfig) {

eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
if (outputPath && outputPath.endsWith(".html")) {
let minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
// You can add more options from the html-minifier-terser documentation
// For example, to minify CSS and JS within HTML:
// minifyCSS: true,
// minifyJS: true,
ignoreCustomComments: true,
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
});
return minified;
}
return content; // If not an HTML output, return content as-is
});

eleventyConfig.addFilter("cssmin", function (code) {
return new CleanCSS({}).minify(code).styles;
});

if (process.env.ELEVENTY_ENV === "prod") {
eleventyConfig.ignores.add("./src/posts/");
};
Expand All @@ -55,9 +81,13 @@ module.exports = function (eleventyConfig) {

eleventyConfig.addPlugin(emojiReadTime);

eleventyConfig.addWatchTarget("src/sass/*.scss");
eleventyConfig.addWatchTarget("src/css/*.css");

eleventyConfig.addPassthroughCopy("src/img");
eleventyConfig.addPassthroughCopy("src/img/*.webp");
eleventyConfig.addPassthroughCopy("src/img/**/*.webp");
eleventyConfig.addPassthroughCopy("src/img/touch/**");
eleventyConfig.addPassthroughCopy("src/img/*.svg");
eleventyConfig.addPassthroughCopy("src/css/**");
eleventyConfig.addPassthroughCopy("src/webfonts");
eleventyConfig.addPassthroughCopy("src/cache-polyfill.js");
eleventyConfig.addPassthroughCopy("src/CNAME");
Expand Down Expand Up @@ -126,7 +156,7 @@ module.exports = function (eleventyConfig) {
tags: ["h2", "h3", "h4"],
wrapper: "div",
wrapperClass: "toc markdown-toc",
ul: true,
ul: false,
flat: true
});
eleventyConfig.addPlugin(
Expand Down
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
],
"cSpell.words": [
"Alfredlogo",
"ASBX",
"Brookfield",
"Codepen",
"cssnano",
Expand Down Expand Up @@ -35,6 +36,7 @@
"RHDM",
"Roadmapping",
"Saylent",
"Scryfall",
"Shortcode",
"Shriners",
"Spiceworks",
Expand All @@ -47,6 +49,7 @@
"Timetrak",
"Trak",
"UXPA",
"Vite",
"webfonts",
"Westborough",
"Westford",
Expand Down
160 changes: 2 additions & 158 deletions docs/404.html
Original file line number Diff line number Diff line change
@@ -1,163 +1,7 @@
<!DOCTYPE html>
<html lang="en"><head>
<!-- Generated from the 11ty Netlify Jumpstart: https://github.com/5t3ph/11ty-netlify-jumpstart -->
<!-- Modified for usage/content provided by Adam J. Jolicoeur: https://github.com/AdamJ -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="@Adam, Adam Jolicoeur, Adam J. Jolicoeur, AdamJ, Jolicoeur, adamjolicoeur.com, www.adamjolicoeur.com, mindreeper2420, Portfolio, Design, UXD, UX Designer, UX Developer, UX Engineer, Design Technologist, CSS" />
<title>Adam Jolicoeur</title>
<meta
name="description"
content="The portfolio site for Adam Jolicoeur, User Experience Designer and Developer"
/>
<meta name="generator" content="Eleventy">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" size="48x48" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" size="48x48" href="/android-chrome-512x512.png">
<link rel="icon" type="image/png" size="48x48" href="/favicon.ico">
<link rel="icon" type="image/png" size="72x72" href="/favicon-16x16.png">
<link rel="icon" type="image/png" size="72x72" href="/favicon-32x32.png">
<link rel="icon" type="image/png" size="72x72" href="/favicon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#333333">
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=PT+Sans&family=Work+Sans&display=swap');
</style>
<link
rel="stylesheet"
media="(prefers-color-scheme:light)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme:dark)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace.js" ></script>
<link href="/css/style.css" rel="stylesheet" />
<meta
name="og:title"
content="Adam Jolicoeur"
/>
<meta
name="og:description"
content="The portfolio site for Adam Jolicoeur, User Experience Designer and Developer"
/>
<meta property="og:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" />

<link
rel="alternate"
type="application/rss+xml"
title="RSS Feed for Adam Jolicoeur"
href="/feed/"
/>
</head>
<body>
<container>
<div class="nav">
<input type="checkbox" id="check" name="navigationCheckbox" aria-label="menu checkbox" />
<label for="check" class="menu">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-list"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
</label>
<a href="/">
<div class="logo">
<svg width="32" height="32" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.29 89.4546L96.1838 82.1483L101.709 89.4546H91.29Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M45.8939 89.1937L95.7557 13L145.915 89.1937C145.915 91.2812 143.385 95.3857 139.813 98.3266C136.804 100.804 134.693 101.892 130.882 103.284C126.925 104.73 124.184 105.372 120.166 105.372H56.4616L23.5677 156.124H13L50.8057 97.8047H91.2905H115.849C125.375 97.8047 130.882 92.1945 130.882 92.1945C130.882 92.1945 134.743 89.1937 130.882 83.4531C119.124 65.9703 95.7557 29.0477 95.7557 29.0477L56.4616 89.1937H45.8939Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M64.7966 112.548H105.281H136.24C145.766 112.548 151.72 108.895 154.548 107.068C158.239 104.684 161.99 99.1094 161.99 99.1094H173.004C173.004 100.414 168.224 106.618 163.627 110.199C152.911 118.549 144.575 120.115 140.557 120.115H70.4526L46.4891 156.255H35.9214L64.7966 112.548Z" fill="#ffffff"/>
<path d="M157.674 89.7157L127.905 45.6172H138.324L168.39 89.7157H157.674Z" fill="#ffffff"/>
<path d="M64.7966 112.548H105.281H136.24C145.766 112.548 151.72 108.895 154.548 107.068C158.239 104.684 161.99 99.1094 161.99 99.1094H173.004C173.004 100.414 168.224 106.618 163.627 110.199C152.911 118.549 144.575 120.115 140.557 120.115H70.4526L46.4891 156.255H35.9214L64.7966 112.548Z" stroke="#ffffff" stroke-width="4"/>
<path d="M157.674 89.7157L127.905 45.6172H138.324L168.39 89.7157H157.674Z" stroke="#ffffff" stroke-width="4"/>
<path d="M34.1356 89.7157L63.9038 45.6172H53.4849L23.419 89.7157H34.1356Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M146.362 156.516L127.608 128.595H138.027L156.781 156.516H146.362Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M30.4144 116.331L18.0605 98.8485H28.4794L35.6238 109.025L30.4144 116.331Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M169.581 156.377L149.19 126.899L157.525 123.768L180 156.377H169.581Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M77.8945 136.554L72.6851 144.121L96.3508 180L122.525 140.598L117.04 132.118L96.3508 164.474L77.8945 136.554Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M80.4247 87.4976H70.0059L95.6066 48.4874L117.04 80.9496C118.082 82.9312 119.868 84.6273 116.593 87.4976C113.319 90.3679 112.128 89.0632 111.086 87.4976L95.6066 64.4046L80.4247 87.4976Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
<path d="M108.556 128.204H92.6351L87.7183 135.51H103.45L108.556 128.204Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
</svg>
</div>
</a>
<div class="nav-items">
<ul class="overview">
<li>
<a href="/about" class="nav-link" alt="Link to my About page">
About
</a>
</li>
<li>
<a href="/designs" class="nav-link" alt="Link to my Designs examples">
Designs
</a>
</li>
<li>
<a href="/development" class="nav-link" alt="Link to my Development examples">
Development
</a>
</li>
</ul>
<ul class="account">
<li>
<a href="/testimonials" class="nav-link" alt="Link to testimonials for former coworkers">
Testimonials
</a>
</li>
<li>
<a href="/connect" class="nav-link" alt="Connect with my through my social channels">
Connect
</a>
</li>
</ul>
</div>
</div>
</container>
<main class="content">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin: 24px 0;">
<img src="/img/404_outdoors.svg" alt="Lost in the mountains" height="400" width="400" loading="lazy">
</div>
<h1>Looks like you lost your way...</h1>
<p>Go back to the home page by clicking the button below.</p>
<sl-button variant="primary" size="large" href="/">Take me home</sl-button>
</div>
</main>
<sl-include src="/footer"></sl-include>
<script>
const include = document.querySelector('sl-include');

include.addEventListener('sl-load', event => {
if (event.eventPhase === Event.AT_TARGET) {
console.log('Success');
}
});

include.addEventListener('sl-error', event => {
if (event.eventPhase === Event.AT_TARGET) {
console.log('Error', event.detail.status);
}
});
</script>
<script>
if ('serviceWorker' in navigator) {
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="@Adam, Adam Jolicoeur, Adam J. Jolicoeur, AdamJ, Jolicoeur, adamjolicoeur.com, www.adamjolicoeur.com, mindreeper2420, Portfolio, Design, UXD, UX Designer, UX Developer, UX Engineer, Design Technologist, CSS"><title>Adam Jolicoeur</title><meta name="description" content="The portfolio site for Adam Jolicoeur, User Experience Designer and Developer"><meta name="generator" content="Eleventy"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" size="48x48" href="/android-chrome-192x192.png"><link rel="icon" type="image/png" size="48x48" href="/android-chrome-512x512.png"><link rel="icon" type="image/png" size="48x48" href="/favicon.ico"><link rel="icon" type="image/png" size="72x72" href="/favicon-16x16.png"><link rel="icon" type="image/png" size="72x72" href="/favicon-32x32.png"><link rel="icon" type="image/png" size="72x72" href="/favicon.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#333333"><link href="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.css" rel="stylesheet"><script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css"><script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace-autoloader.js"></script><link type="text/css" href="/css/style.css" rel="stylesheet"><meta name="og:title" content="Adam Jolicoeur"><meta name="og:description" content="The portfolio site for Adam Jolicoeur, User Experience Designer and Developer"><meta property="og:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png"><link rel="alternate" type="application/rss+xml" title="RSS Feed for Adam Jolicoeur" href="/feed/"></head><body><nav id="nav" class="l max top"><header><nav><a href="/" alt="Link to home"><span class="display-none">Link to home</span><img src="/img/Jolicoeur_iOS-small.webp" class="circle" alt="Site logo"></a></nav></header><div class="max"></div><a href="/about" class="active secondary" alt="Link to my About page"><i>info</i><span>About</span></a><a href="/designs" class="active secondary" alt="Link to my Design examples"><i>palette</i><span>Designs</span></a><a href="/development" class="active secondary" alt="Link to my Development examples"><i>code</i><span>Code</span></a><div class="medium-space"></div><button class="fill circle" color-theme-toggle aria-label="Change theme"><i>light_mode</i></button></nav><nav class="bottom s m max"><header><nav><a href="/" alt="Link to home"><img src="/img/Jolicoeur_iOS-small.webp" class="circle" alt="Site logo"></a></nav></header><div class="max"></div><a href="/about" class="active secondary" alt="Link to my About page"><i>info</i><span>About</span></a><a href="/designs" class="active secondary" alt="Link to my Design examples"><i>palette</i><span>Designs</span></a><a href="/development" class="active secondary" alt="Link to my Development examples"><i>code</i><span>Code</span></a><div class="max"></div><button class="fill circle" color-theme-toggle aria-label="Change theme"><i>light_mode</i></button></nav><main><article class="absolute fill center middle"><div><img src="/img/404_outdoors.svg" alt="Lost in the mountains" class="responsive" loading="lazy"><h5 class="center-align">Looks like you lost your way...</h5><p class="center-align">Go back to the home page by clicking the button below.</p><div class="space"></div><nav class="center-align"><a href="/" alt="Link to go back to the home page"><button class="responsive round large small-elevate primary"><i>home</i><span>Go home</span></button></a></nav></div></article></main><script>if ('serviceWorker' in navigator) {
window.onload = () => {
navigator.serviceWorker.register(
'/sw.js'
);
}
}
</script>
</body>
</html>
}</script><script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script><script type="application/javascript" src="/js/jolicoeur.js"></script></body></html>
Loading
Loading