Fixed bugs and updated structure

src/js/core/_core.js

@@ -1,16 +1,25 @@
+const getDate = function(){
+	var d = new Date();
+	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
+}
 String.prototype.toTitleCase = function() {
 	return this.replace(/\w\S*/g, function(txt) {
-		return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-	});
+     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+   });
 }
-
 String.prototype.toSentenceCase = function() {
 	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
 }
-
 String.prototype.toContent = function() {
 	return this.replace(/-/g, " ");
 }
+String.prototype.toPath = function() {
+	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+}
+
+const font = {
+	size: 0
+}
 
 const copyColourFallback = (copyInfo, attr) => {
 	console.log("fallback")
@@ -50,13 +59,16 @@ const copyColourFallback = (copyInfo, attr) => {
 const showMessage = (m, s) => {
 	s = s == undefined ? true : s;
 	console.log("Copy success (navigator.clipboard)");
-	$("body").prepend("<div id='copystatus' style='display: none;'><div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div></div>");
-	$("#copystatus > div").css("top", (window.scrollY + 100)+ "px");
-	$("#copystatus").fadeIn(1000, function(){
-		$(this).fadeOut( 1000, function() {
-			$(this).remove();
-		});
-	})
+	let status = document.createElement("div");
+	status.setAttribute("id", "copystatus");
+	// status.style.display = "none";
+	status.innerHTML = "<div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div>";
+	document.querySelector("body").prepend(status)
+
+	status.querySelector("div").style.top = (window.scrollY + 100)+ "px";
+	setTimeout( () => {
+		status.remove();
+	}, 1000); 
 }
 
 const oneClickSelect = (e, t = e.currentTarget) => {
@@ -126,9 +138,7 @@ module.exports = {
 		},
 	},
 	colour: {
-		// showMessage: (m, s) => {
-		// 	showMessage(m, s);
-		// },
+
 		copy:  (w, t) => {
 			let c = t.parentNode.getAttribute("data-" + (w=="var" ? "token" : w));
 			c = w == "var" ? `var(${c})` : c;
@@ -143,36 +153,44 @@ module.exports = {
 				copyColourFallback(c, w);
 			}
 		},
+
 		positionTooltip: () => {
-			$("color-pill > span").each(function(){
-				if ((Number($("p").css('font-size').replace("px","")) * 10)  > $(this).offset().left) {
-					$(this).children("div.tooltip-tc").attr("tip-position", "right");
-				} else {
-					$(this).children("div.tooltip-tc").attr("tip-position", "bottom");
-				}
+			document.querySelectorAll("color-pill > span").forEach((ps) =>  {
+				ps.querySelectorAll("div.tooltip-tc").forEach((tip) => {
+					if ( (font.size * 10) > ps.offsetLeft ) {
+						tip.setAttribute("tip-position", "right");
+					} else {
+						tip.setAttribute("tip-position", "bottom");
+					}
+				});
 			})
 		}
 	},
 	init: (args = {}) => {
 		const url = getURLVars();
-
+		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
 		if (url.p !== undefined) {
 			document.querySelectorAll("main article:not([data-path^='" + url.p + "'])").forEach((a) => {
 				a.remove();
 			});
 
 			if (url.p == -1) {
-				document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`;
+				document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`;
 			} else {
-				document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`
+				document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`
 			}
 		}
 
-		if (typeof args.page == "function") args.page(a);
+		if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad(a);
 
 		document.querySelectorAll("article").forEach((a) => {
 			if ( a.getAttribute("data-template") != "none" ) {
-				let path = "patterns/" + (a.getAttribute("data-core") == "true" ? "core/" : "") + a.getAttribute("data-path") + "/index.html";
+				let path = a.getAttribute("data-path");
+				path = "patterns/" + 
+				 		(a.getAttribute("data-core") == "true" ? 
+				 		"core/" + path.substring(path.lastIndexOf("/") + 1) : 
+				 		a.getAttribute("data-path")) 
+				 		+ "/index.html";
 				const ASYNC = true;
 				let ajx = new XMLHttpRequest();
 				ajx.onreadystatechange = () => {
@@ -194,6 +212,7 @@ module.exports = {
 								 		})
 								 	break;
 								}
+
 								a.querySelectorAll("code").forEach((c)=> {
 									c.classList.add("line-numbers");
 									c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
@@ -234,17 +253,23 @@ module.exports = {
 							break;
 
 							case 404: 
+
 								if (typeof args.notFound == "function") args.notFound(a, path);
 							break;
 
 							default:
 								console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
 						}
+
+						if (typeof args.done == "function") args.done(a);
+
 					}
 				};
 				ajx.open("GET", path, ASYNC);
 				ajx.send();
 			}
 		})
+
+		if (typeof args.afterArticleLoad == "function") args.afterArticleLoad(a);
 	}
 };

src/js/scaffolding.js

@@ -1,16 +1,16 @@
 // core and prism
 import * as core from './core/_core.js';
 import * as Prism from "../../node_modules/prismjs/prism";
+import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
+import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
 import '../../node_modules/prismjs/components/prism-json';
 import '../../node_modules/prismjs/components/prism-pug';
 import '../../node_modules/prismjs/components/prism-sass';
-import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
-import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
 
 // import pattern stuff.
-import * as swtch from "../pg/patterns/core/components/switch/_switch.js";
-import * as stickynote from "../pg/patterns/core/components/sticky-note/_sticky-note.js";
-import * as tabs from "../pg/patterns/core/layouts/tabs/_tabs.js";
+import * as stickynote from "../pg/patterns/core/sticky-note/_sticky-note.js";
+import * as swtch      from "../pg/patterns/core/switch/_switch.js";
+import * as tabs       from "../pg/patterns/core/tabs/_tabs.js";
 
 // init core
 core.init({
@@ -24,30 +24,33 @@ core.init({
 	}
 });
 
-jQuery(document).ready(function($){
-	// show deprecated switch
-	function flipDeprecated() {
-		setTimeout(function(){
-			if ($("#deprecated").attr("aria-checked") == "false") {
-				$(".status-deprecated").closest("article").addClass("status-deprecated");
-				core.cookie.set("show-deprecated", false, 30, "/");
-			} else {
-				$("article.status-deprecated").removeClass("status-deprecated");
-				core.cookie.set("show-deprecated", true, 30, "/");
-			}
-		}, 50);
-	}
 
-	$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
-	setTimeout( function() {
-		if (core.cookie.get("show-deprecated") == "true") {
-			$("#deprecated").attr("aria-checked", "true");
-			flipDeprecated();
-		}
-	}, 200);
-	console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
-	// /hide deprecated switch
 
-})
+// deprecated switch handler
+const flipDeprecated = (e, s = e.currentTarget) => {
+	core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
+	document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => {
+		a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
+	});
+}
 
-	// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
+// create a pure JS mouse click event
+const click = new MouseEvent('click', {
+	view: window,
+	bubbles: false,
+	cancelable: true
+});
+
+// get the switch, initialize it and add the handler
+let deprecated = document.querySelector("#deprecated");
+swtch.init(deprecated.parentNode)
+deprecated.onclick = flipDeprecated;
+deprecated.keypress = flipDeprecated;
+
+// check a cookie to get the switch's state
+if (core.cookie.get("show-deprecated") == "true") {
+	deprecated.dispatchEvent(click);
+}
+
+// just for fun... We'll show deprecated if they match the path
+// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");

src/pg/_config.pug

@@ -7,7 +7,7 @@
 - 
 	var content = [ 
 		{
-			name: "this-pattern-doesn't-exist",
+			name: "this pattern doesn't exist",
 			status: "deprecated",
 		},
 		{	
@@ -22,7 +22,7 @@
 			files: [
 				{
 					name: "sticky-note",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 				{
@@ -55,7 +55,7 @@
 				},
 				{
 					name: "tabs",
-					status: "complete",
+					status: "in-progress",
 					core: true,
 				},
 			]

src/pg/core/_master-index.pug

@@ -1,7 +1,8 @@
-include ../_config
-block config
+//-		
+	DS2 core (c) 2024 Alexander McIlwraith 
+	Core licensed under CC BY-SA 4.0 
 
-- var getDate = function(){
+- const getDate = function(){
 -	var d = new Date();
 -	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
 - }
@@ -16,23 +17,27 @@ block config
 - String.prototype.toContent = function() {
 -	return this.replace(/-/g, " ");
 - }
+- String.prototype.toPath = function() {
+-	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+- }
+
+include ../_config
+block config
+
 
 mixin show-content(items, path)
-	- path = (path == "" ? "" : path + "/") + items.name
-	- if (items.status == "deprecated") {
-		- articlestatus = "status-deprecated"
-	- } else {
-		- articlestatus = ""
-	- }
-	
-	article(id=path.replace(/\//g, "-")
-		class=articlestatus 
-		data-path=path
-		data-template=(items.template == undefined ? "pug" : items.template) 
-		data-pattern=items.name
+
+	- path = (path == "" ? "" : path +  "/") + items.name.toPath()
+
+	article(id=path.replace(/\//g, "-").toPath()
+		data-name=items.name
 		data-status=items.status
+		data-display=items.display
+		data-template=(items.template == undefined ? "pug" : items.template) 
 		data-core= (items.core ? "true" : "false")
+		data-path=path
 		)
+
 		h1(class="status-" + items.status )
 			span= items.name.toSentenceCase().toContent()
 				tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
@@ -52,9 +57,13 @@ html(lang= lang )
 
 		block head
 		link( href="assets/scaffolding.css" rel="stylesheet" )
-		script(src="assets/jquery-min.js")
 
 	body
+		//		
+			DS2 core (c) 2024 Alexander McIlwraith 
+			Core licensed under CC BY-SA 4.0 
+
+
 		a.skip(href="#main") Skip to main content
 		div.container
 

src/pg/core/_master-pattern.pug

@@ -1,3 +1,7 @@
+//-		
+	DS2 core (c) 2024 Alexander McIlwraith 
+	Core licensed under CC BY-SA 4.0 
+
 include ../_config
 block config
 
@@ -5,7 +9,7 @@ mixin h(h)
 	if headings[h]
 		h2= headings[h]
 
-- var getDate = function(){
+- const getDate = function(){
 -	var d = new Date();
 -	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
 - }
@@ -20,6 +24,9 @@ mixin h(h)
 - String.prototype.toContent = function() {
 -	return this.replace(/-/g, " ");
 - }
+- String.prototype.toPath = function() {
+-	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+- }
 
 
 html 

src/pg/index.pug

@@ -8,15 +8,13 @@ block head
 	link(rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)")
 
 block header
-	include patterns/core/layouts/header/_header.pug
+	include patterns/core/header/_header.pug
 	
 	nav
 		ul
-			li 
-				a(href="./") Home
 			each first in content
 				li(class= navClass)
-					a(href="./?p=" + first.name )= first.name.toContent().toSentenceCase()
+					a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
 
 	p.deprecated-switch
 		span

src/pg/patterns/core/breakpoints/index.pug

@@ -1,5 +1,7 @@
-extends ../../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 	
 	+h(0)

src/pg/patterns/core/colours/index.pug

@@ -1,7 +1,20 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
+
 extends ../../../core/_master-pattern
-
-
 block content
+
+	+h(0)
+	p Colours are used to represent your site and are an implementation of your brand's visual identity. 
+
+	+h(1)
+	p Colours are used throughout your patterns. 
+
+	+h(2)
+	p Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. 
+
+	p Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option ⌥ key) will copy the colour token, and the meta key (Windows key or Mac command ⌘ key) will copy a CSS colour var. 
+
 	include ../../../core/_colour-samples
-	h2 Primary colours
+	h3 Primary colours
 	+colour-samples(colours, "colors")

src/pg/patterns/core/components/sticky-note/index.pug

@@ -1,24 +0,0 @@
-extends ../../../../core/_master-pattern.pug
-block content
-	+h(0)
-	+h(1)
-	+h(2)
-	p Uses absolute positioning. 
-		sticky-note(float="right").blue This #[strong is] a test
-		| You might need to add relative positioning to it's container. 
-
-	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
-
-	sticky-note another one
-
-	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 
-
-
-
-	div#sticky-note.tab-group
-		pre.language-css(data-tab="css") 
-			include sticky-note.css
-		pre.language-css(data-tab="scss") 
-			include _sticky-note.scss
-		pre.language-js(data-tab="js") 
-			include _sticky-note.js

src/pg/patterns/core/components/switch/_switch.js

@@ -1,28 +0,0 @@
-//-		DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
-
-function flip(e) {
-	let sw = e.currentTarget;
-	switch(sw.getAttribute("aria-checked")) {
-		case "true": 
-			sw.setAttribute("aria-checked", "false");
-		break;
-		case "false": 
-			sw.setAttribute("aria-checked", "true");
-		break;
-	}
-};
-
-
-function init(callback){
-	let sw = document.querySelectorAll("[role='switch']");
-	for (let i=0; i < sw.length; i++) {
-		sw[i].innerHTML = "<span></span>";
-		sw[i].setAttribute("aria-checked", "false");
-		sw[i].setAttribute("tabindex", "0");
-		sw[i].addEventListener("click", flip, false);
-		sw[i].addEventListener("keypress", flip, false);
-	}
-}
-
-export {init};

src/pg/patterns/core/header/_header.pug

@@ -12,5 +12,5 @@ header
 	div
 		div.header-title
 			h1 
-				a(href= root )= site
+				a(href="./")= site
 		// Other sections can go here, such as search and directory

src/pg/patterns/core/header/index.pug

@@ -1,8 +1,13 @@
-extends ../../../../core/_master-pattern.pug
-	
-	
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
+
+extends ../../../core/_master-pattern
 block content
 
+	+h(0)
+	+h(1)
+	+h(2)
+
 	div.tab-group#header
 		pre.language-html(data-tab="html")
 			// create temp variables and store the design system values

src/pg/patterns/core/status/index.pug

@@ -1,5 +1,7 @@
-extends ../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 	- 
 	- let list = []

src/pg/patterns/core/sticky-note/index.pug

@@ -0,0 +1,31 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
+
+extends ../../../core/_master-pattern
+block content
+	+h(0)
+	p Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. 
+	+h(1)
+	p Use a sticky when you want to make a note without adding it to the content. 
+	+h(2)
+	p Uses absolute positioning. 
+		sticky-note(float="right").blue This #[strong is] a sample sticky. 
+			| You can drag it out of the way if you need to see the content under it.
+
+	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
+
+	sticky-note You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
+
+	tabset#sticky-note
+		pre.language-html(tab="html")
+			sticky-note(float="right").blue This #[strong is] a sample sticky. 
+				| You can drag it out of the way if you need to see the content under it.
+		pre.language-pug(tab="pug").
+			sticky-note(float="right").blue This #[strong is] a sample sticky. 
+				| You can drag it out of the way if you need to see the content under it.
+		pre.language-css(data-tab="css") 
+			include sticky-note.css
+		pre.language-css(data-tab="scss") 
+			include _sticky-note.scss
+		pre.language-js(data-tab="js") 
+			include _sticky-note.js

src/pg/patterns/core/switch/_switch.js

@@ -0,0 +1,26 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+function flip(e) {
+	let sw = e.currentTarget;
+	switch(sw.getAttribute("aria-checked")) {
+		case "true": 
+			sw.setAttribute("aria-checked", "false");
+		break;
+		case "false": 
+			sw.setAttribute("aria-checked", "true");
+		break;
+	}
+};
+
+module.exports = {
+	init: (p = document) => {
+		p.querySelectorAll("[role='switch']").forEach((sw) => {
+			sw.innerHTML = "<span></span>";
+			sw.setAttribute("aria-checked", "false");
+			sw.setAttribute("tabindex", "0");
+			sw.addEventListener("click", flip, false);
+			sw.addEventListener("keypress", flip, false);
+		})
+	}
+}

src/pg/patterns/core/switch/index.pug

@@ -1,9 +1,11 @@
-extends ../../../../core/_master-pattern.pug
-
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)
+	p Switches are used to toggle application state between two mutually exlusive values. 
 	+h(1)
 	+h(2)
 

src/pg/patterns/core/tabs/index.pug

@@ -1,9 +1,7 @@
 //-		DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
-
-extends ../../../../core/_master-pattern.pug
-
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)

src/pg/patterns/core/tooltip/index.pug

@@ -1,5 +1,7 @@
-extends ../../../../core/_master-pattern
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)

src/scss/scaffolding.scss

@@ -12,21 +12,18 @@ $tooltip-dark-allow: false;
 
 @use 'sass:math';
 
-
 // We recommend explicitly using the underscore when referring to pattern scss 
 // as you may have also created a version that compiles to css to display in 
 // your pattern. 
 @import "core";
 
-@import "../pg/patterns/components/sticky-note-core/_sticky-note";
-@import "../pg/patterns/components/tooltip-core/_tooltip";
-@import "../pg/patterns/components/switch-core/_switch";
-
-@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
-@import "../pg/patterns/layouts/header-core/_header";
-@import "../pg/patterns/layouts/tabs-core/_tabs"; 
-
-@import "../pg/patterns/status-core/_status";
+@import "../pg/patterns/core/sticky-note/_sticky-note";
+@import "../pg/patterns/core/switch/_switch";
+@import "../pg/patterns/core/tooltip/_tooltip";
+@import "../pg/patterns/core/breakpoints/_breakpoints";
+@import "../pg/patterns/core/header/_header";
+@import "../pg/patterns/core/tabs/_tabs"; 
+@import "../pg/patterns/core/status/_status";
 
 * {
 	box-sizing: border-box;
@@ -46,6 +43,10 @@ html {
 @include sticky-note;
 @include status;
 
+article[data-status=deprecated]:not(.show-deprecated) {
+	display: none;
+}
+
 body {
 	margin: 0;
 	padding: 0;
@@ -97,7 +98,6 @@ body {
 			display: block;
 			grid-column: 1 / -1;
 			grid-row: 4;
-			padding: 0 1rem;
 
 			@include break(-md) {
 				grid-row: 3;