Pages System Rewrite; stage 1

Going-to-sleep push;
_Rebuilt the pxlPages system to read to javascript files instead of existing data on an htm.
___Temporary layout to see the data loads properly
_'lazyLoading' is now 'manualLoad' with the same 'Click to Play' text over a gif
___But there is a bug, so it doesn't look dark and what not

Author: ProcStack

docs/index.htm

@@ -4,14 +4,14 @@
 // -- -- -- -- -- -- -- -- -- -- -- -- -- --
 //
 //   This is an example implementation of `pxlNav` in a project;
-//     Tieing in `ProcPages` to manage the pages of the site,
+//     Tieing in `ProcPageManager` to manage the pages of the site,
 //       Listening to / triggering events on `pxlNav`
 //   For `pxlNav` scripting, the entry-point is `./Source/js/pxlNavCore.js`
 //
 
 import { pxlNav, pxlNavVersion, pxlEnums, pxlUserSettings, pxlOptions } from './pxlNav.esm.js'; // v0.20
-import { ProcPages } from './ProcPages.js';
-import { PageMetaDataObjects } from './PageMetaData.js';
+import { ProcPageManager } from './pxlPages/ProcPageManager.js';
+import { pageListing } from '../pages/pageListing.js';
 import { BlogManager } from './BlogManager.js';
 
 
@@ -115,10 +115,11 @@ const collisionScale = {
 
 // Create the main page manager
 //  - Not related to pxlNav -
-const procPages = new ProcPages();
+const procPages = new ProcPageManager();
 // Set the Meta Data per page
 //   Page changes will update the meta data automatically if the page is in the list
-procPages.setPageMetaData( PageMetaDataObjects );
+//procPages.setPageMetaData( ProcPageMetaData );
+procPages.addPageListing( pageListing );
 procPages.init();
 
 // Trigger DOM updates of the pxlNav version displays on page
@@ -132,13 +133,14 @@ if (window.location.hash !== "#Blog") {
 
 // Build procstack.github.io blog entries
 //  - Not related to pxlNav -
+/*
 var blogEntryListing = document.getElementById('blogEntryListing');
 var blogEntryContent = document.getElementById('blogEntryContent');
 const procBlog = new BlogManager( blogEntryListing, blogEntryContent );
 procBlog.init();
 procBlog.build();
 procBlog.showEntry(-1);
-
+*/
 
 // -- -- -- -- --
 

docs/js/PageMetaData.js

@@ -0,0 +1,40 @@
+import { blogEntry } from './blogEntryBase.js';
+
+let entryTitle = "Visibility in Design";
+let entryDate = "2025-08-08";
+let entryTags = ["layout", "design", "visibility", "expression", "pages", "february", "2025"];
+let entryBody = `
+I'll ussually have an idea of how a site/tool/project will look & operate in my head, but that's version 1.
+  Seeing it in action; the practicallity of it all is a whole other thing.
+
+Only finally getting into the nitty gritty of flow to a web page when there's actual content to proove the original design idea.
+
+Maybe I could have spent more time designing the layout of the movement of information,
+  Blockage of desired content, like images needing to be scrolled down to see.
+    To have figured it out a little more about What I wanted to actually show on this site itself first.
+
+So the site was a bit stiff at first.
+
+Column of information with no true differentiation of what you are looking at & when.
+Scroll'ed down a touch, an no header stayed with you.
+No lit button on the menu bar.
+What page am I on?
+
+Welp, that's gotta change.
+
+- Move 'Repo' into 'Projects/Links'
+- Move 'pxlNav' over for a 'MakingOf' section
+- Indicate what freakin page you are on.
+- Add 'gear' to open pxlNav settings
+- Add 'book' to open the blog.... maybe
+   It's still here after-all.
+
+
+
+<br>&nbsp; -Kevin Edzenga
+`;
+
+
+const blogEntryObj = new blogEntry(null, entryTitle, entryDate, entryTags, entryBody);
+
+export { blogEntryObj };

docs/js/ProckStackGitio.js

@@ -3,10 +3,6 @@
 //
 // -- -- -- -- -- -- -- -- -- -- -- -- -- --
 //
-//   This is an example implementation of `pxlNav` in a project;
-//     Tieing in `ProcPages` to manage the pages of the site,
-//       Listening to / triggering events on `pxlNav`
-//   For `pxlNav` scripting, the entry-point is `./Source/js/pxlNavCore.js`
 //
 
 import { pxlNav, pxlNavVersion, pxlEnums, pxlUserSettings, pxlOptions } from './pxlNav.esm.js'; // v0.20

docs/js/blog/2025-02-08_A.js

@@ -0,0 +1,28 @@
+// Page Meta Data Objects
+//   Written by Kevin Edzenga; 2024
+// -- -- --
+//   Just a way to keep track of page meta tag updates to aid in SEO / web crawlers and social media sharing.
+
+export class PageMetaData {
+  constructor( metaOptions={} ){
+    this.page = metaOptions.page || "Default";
+    this.title = metaOptions.title || this.page;
+    this.description = metaOptions.description || '';
+    this.keywords = metaOptions.keywords || '';
+    this.image = metaOptions.image || '';
+    this.url = metaOptions.url || '';
+    this.metaTagList = {
+      'title':['title', 'og:title', 'twitter:title'],
+      'description':['description', 'og:description', 'twitter:description'],
+      'keywords':['keywords'],
+      'image':['og:image', 'twitter:image'],
+      'url':['og:url']
+    }
+  }
+  setAttribute( attribute, value ){
+    attribute = attribute.toLowerCase();
+    if (this.hasOwnProperty(attribute)) {
+      this[attribute] = value;
+    }
+  }
+}