Move pug pattern files to .pp, check tab order

ds2 core.sublime-project

@@ -2,7 +2,11 @@
 	"folders":
 	[
 		{
-			"path": "."
+			"path": ".",
+			"folder_exclude_patterns": ["src/pg/patterns"]
 		},
+		{
+			"path": "./src/pg/patterns"
+		}
 	],
 }

prepros.config

@@ -492,6 +492,9 @@
         "resolveJsonModule": false,
         "esModuleInterop": false,
         "useDefineForClassFields": false
+      },
+      "custom-gzg6caunrh": {
+        "command": "cp {{input}} {{output}}"
       }
     },
     "fileTypes": {
@@ -955,6 +958,26 @@
           "type": "SOURCE_RELATIVE",
           "relativePath": ""
         }
+      },
+      "custom-sm9kzo2npr": {
+        "autoCompile": true,
+        "label": "Pug pattern to pug file",
+        "extensions": [
+          ".pp"
+        ],
+        "tasks": [
+          {
+            "task": "custom-gzg6caunrh",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".pug",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": "",
+          "suffix": "-dist",
+          "alwaysSuffix": false
+        }
       }
     },
     "files": [
@@ -1346,6 +1369,30 @@
           }
         }
       },
+      {
+        "file": "src/pg/patterns/core/sticky-note/_sticky-note.pp",
+        "config": {
+          "autoCompile": true
+        }
+      },
+      {
+        "file": "src/pg/patterns/core/switch/_switch.pp",
+        "config": {
+          "autoCompile": true
+        }
+      },
+      {
+        "file": "src/pg/patterns/core/tabs/_tabs.pp",
+        "config": {
+          "autoCompile": true
+        }
+      },
+      {
+        "file": "src/pg/patterns/core/tooltip/_tooltip.pp",
+        "config": {
+          "autoCompile": true
+        }
+      },
       {
         "file": "src/pg/patterns/layouts/header-core/header.scss",
         "config": {

public/patterns/core/header/index.html

@@ -22,6 +22,89 @@
             <!-- Other sections can go here, such as search and directory-->
           </div>
         </header></pre>
+      <pre class="language-html" data-tab="html">
+        <header>
+          <!-- The headline banner area -->
+          <svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <text>DS2 core</text>
+          </svg>
+          <div>
+            <div class="header-title">
+              <h1> <a href="./">DS2 core</a></h1>
+            </div>
+            <!-- Other sections can go here, such as search and directory-->
+          </div>
+        </header></pre>
+      <pre class="language-pug" data-tab="pug">//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+//- required variables
+//- site - the site name that goes in the site title
+//- root - the path to the root of the site
+
+header
+	// The headline banner area 
+	svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
+		text= site
+	div
+		div.header-title
+			h1 
+				a(href="./")= site
+		// Other sections can go here, such as search and directory
+</pre>
+      <pre class="language-css" data-tab="css">header {
+	display: -ms-grid;
+	display: grid;
+	-ms-grid-rows: 1.75rem 3.5rem;
+	grid-template-rows: 1.75rem 3.5rem;
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 2;
+	grid-column: 2/4;
+	overflow: hidden;
+}
+header svg {
+	grid-column: 1/-1;
+	grid-row: 1/-1;
+	-ms-grid-row-align: stretch;
+	-ms-grid-column-align: stretch;
+	place-self: stretch;
+}
+header svg text {
+	-webkit-transform: translate(-1rem, 7.25rem);
+	    -ms-transform: translate(-1rem, 7.25rem);
+	        transform: translate(-1rem, 7.25rem);
+	font-size: 10rem;
+	font-weight: 1000;
+	font-family: sans-serif;
+	fill: var(--colour-grey-xxl);
+}
+header > div {
+	-ms-grid-row: 2;
+	grid-row: 2;
+	grid-column: 1/-1;
+	display: -ms-grid;
+	display: grid;
+	grid-column-gap: 1rem;
+	-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
+	-ms-grid-columns: auto max-content max-content;
+	grid-template-columns: auto -webkit-max-content -webkit-max-content;
+	grid-template-columns: auto max-content max-content;
+}
+header > div .header-title h1 {
+	margin: 0;
+	padding: 0 1rem;
+}
+header > div .header-title h1 a, header > div .header-title h1 a:visited {
+	border-bottom: none;
+	color: var(--colour-black);
+	font-family: sans-serif;
+	font-size: 2.5rem;
+	font-size: 32px;
+	font-weight: 700;
+	margin: 0;
+	padding: 0;
+	text-decoration: none;
+}</pre>
       <pre class="language-sass" data-tab="scss">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
@@ -75,59 +158,6 @@ $font-weight: 700 !default;
 			}
 		}
 	}
-}</pre>
-      <pre class="language-css" data-tab="css">header {
-	display: -ms-grid;
-	display: grid;
-	-ms-grid-rows: 1.75rem 3.5rem;
-	grid-template-rows: 1.75rem 3.5rem;
-	-ms-grid-column: 2;
-	-ms-grid-column-span: 2;
-	grid-column: 2/4;
-	overflow: hidden;
-}
-header svg {
-	grid-column: 1/-1;
-	grid-row: 1/-1;
-	-ms-grid-row-align: stretch;
-	-ms-grid-column-align: stretch;
-	place-self: stretch;
-}
-header svg text {
-	-webkit-transform: translate(-1rem, 7.25rem);
-	    -ms-transform: translate(-1rem, 7.25rem);
-	        transform: translate(-1rem, 7.25rem);
-	font-size: 10rem;
-	font-weight: 1000;
-	font-family: sans-serif;
-	fill: var(--colour-grey-xxl);
-}
-header > div {
-	-ms-grid-row: 2;
-	grid-row: 2;
-	grid-column: 1/-1;
-	display: -ms-grid;
-	display: grid;
-	grid-column-gap: 1rem;
-	-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-	-ms-grid-columns: auto max-content max-content;
-	grid-template-columns: auto -webkit-max-content -webkit-max-content;
-	grid-template-columns: auto max-content max-content;
-}
-header > div .header-title h1 {
-	margin: 0;
-	padding: 0 1rem;
-}
-header > div .header-title h1 a, header > div .header-title h1 a:visited {
-	border-bottom: none;
-	color: var(--colour-black);
-	font-family: sans-serif;
-	font-size: 2.5rem;
-	font-size: 32px;
-	font-weight: 700;
-	margin: 0;
-	padding: 0;
-	text-decoration: none;
 }</pre>
     </div>
   </body>

public/patterns/core/sticky-note/index.html

@@ -17,7 +17,7 @@
     <tabset id="sticky-note">
       <pre class="language-html" tab="html">
         <sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
-      <pre class="language-pug" tab="pug">sticky-note(float="right").blue This <strong>is</strong> a sample sticky. 
+      <pre class="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>
       <pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
 sticky-note-wrapper {

public/patterns/core/tabs/index.html

@@ -22,6 +22,10 @@
           <div data-tab="[tab title]"></div>
           <div data-tab="[tab title]"></div>
         </div></pre>
+      <pre class="language-pug" tab="pug">div#uniqueID.tab-group
+	div(data-tab="[tab title]")
+	div(data-tab="[tab title]")
+		</pre>
       <pre class="language-css" tab="css">tabset, .tab-group {
 	margin: 2rem 0 1rem 0;
 }
@@ -77,9 +81,9 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
       <pre class="language-css" tab="scss">//		DS2 core (c) 2024 Alexander McIlwraith 
 //		Licensed under CC BY-SA 4.0 
 
-$tab-border: var(--colour-grey) !default; 
+$tab-border: #7f7f7f !default; 
-$tab-selected: var(--colour-white) !default;
+$tab-selected: #FFF !default;
-$tab-notselected: var(--colour-grey-xxl) !default;
+$tab-notselected: #f0f0f0 !default;
 
 @mixin tabs {
 	tabset, .tab-group {

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

@@ -0,0 +1,16 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+//- required variables
+//- site - the site name that goes in the site title
+//- root - the path to the root of the site
+
+header
+	// The headline banner area 
+	svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
+		text= site
+	div
+		div.header-title
+			h1 
+				a(href="./")= site
+		// Other sections can go here, such as search and directory

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

@@ -22,7 +22,11 @@ block content
 			- site= tmpsite 
 			- root= tmproot 
 
-		pre.language-sass(data-tab="scss")
+		pre.language-html(data-tab="html")
-			include _header.scss
+			include _header.pug
+		pre.language-pug(data-tab="pug")
+			include _header.pp
 		pre.language-css(data-tab="css")
-			include header.css
+			include header.css
+		pre.language-sass(data-tab="scss")
+			include _header.scss

src/pg/patterns/core/sticky-note/_sticky-note.pp

@@ -0,0 +1,2 @@
+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.

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

@@ -0,0 +1,2 @@
+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.

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

@@ -18,11 +18,9 @@ block content
 
 	tabset#sticky-note
 		pre.language-html(tab="html")
-			sticky-note(float="right").blue This #[strong is] a sample sticky. 
+			include _sticky-note.pug
-				| You can drag it out of the way if you need to see the content under it.
+		pre.language-pug(tab="pug")
-		pre.language-pug(tab="pug").
+			include _sticky-note.pp
-			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") 

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

@@ -0,0 +1 @@
+span#example-id(role="switch")

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

@@ -1,2 +0,0 @@
-.
-	span#example-id(role="switch")

src/pg/patterns/core/tabs/_tabs.pp

@@ -0,0 +1,4 @@
+div#uniqueID.tab-group
+	div(data-tab="[tab title]")
+	div(data-tab="[tab title]")
+		

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

@@ -27,16 +27,12 @@ block content
 	tabset#tabs
 		pre.language-html(tab="html")
 			include _tabs.pug
-
+		pre.language-pug(tab="pug")
-		//- pre.language-pug(tab="pug").
+			include _tabs.pp
-			include _tabs.pug
-
 		pre.language-css(tab="css")
 			include tabs.css
-		
 		pre.language-css(tab="scss")
 			include _tabs.scss
-
 		pre.language-css(tab="js")
 			include _tabs.js
 

src/pg/patterns/core/tooltip/_tooltip.pp

@@ -0,0 +1,5 @@
+a(href="#") Link with a tool tip
+	div(role="tooltip" inert tip-position="bottom") Tool tip content
+
+a(href="#") Link with a tool tip
+	tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content

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

@@ -5,14 +5,13 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
+	
 	+h(1)
+	
 	+h(2)
 
 	p Either form works. Place this inside another element for the tooltip to be "linked to that element."
 
-	
-
-
 	p Tool tip positions are: 
 	ul 
 		li top / block-start
@@ -25,7 +24,7 @@ block content
 		pre.language-html(data-tab="html")
 			include _tooltip.pug
 		pre.language-pug(data-tab="pug")
-			include tooltip.pug
+			include _tooltip.pp
 		pre.language-css(data-tab="css")
 			include tooltip.css
 		pre.language-css(data-tab="scss")

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

@@ -1,6 +0,0 @@
-.
-	a(href="#") Link with a tool tip
-		div(role="tooltip" inert tip-position="bottom") Tool tip content
-
-	a(href="#") Link with a tool tip
-		tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content