Fixed bugs and updated structure

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)