Blogs added but not visible by default

Just add the hash `#Blog` to enable to page.
I'm keeping it off until I have more time to work on the page,
I'd rather not spend my time writing prose at the moment

Author: ProcStack

Public/index.htm

@@ -39,15 +39,11 @@
                 </div>
                 <div id="gitPageNav" class="gitPageNavStyle">
                   <a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="init" pageName="Init" alt="Link to Init...">Init.</a>
-                  <span> </span>
                   <a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="pxlNav" pageName="pxlNav" alt="Some info on this git.io site's backbone">pxlNav</a>
-                  <span> </span>
                   <a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="repos" pageName="Repos" alt="Info on some of my repos I like">Repos</a>
-                  <span> </span>
                   <a class="pageLinkStyle" pxlRoomName="SaltFlatsEnvironment" pxlCameraView="Default" pageName="ProjectsLinks" alt="Real world projects">Projects<span class="squashInLowRes">&nbsp;/ Links</span></a>
-                  <span> </span>
+                  <a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="Default" pageName="Blog" alt="My ramblings...">Blog</a>
                   <a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="aboutMe" pageName="AboutMe" alt="It's ah me! Marrr.... yeah"><span class="squashInLowRes">About&nbsp;</span>Me</a>
-                  <span> </span>
                 </div>
             </div>
             <div id="gitPageContentParent" class="gitPageContentParentStyle gpcpVisibleStyle heightFader">
@@ -226,6 +222,15 @@
                 </div>
               </div>
               <!-- -- -- -- -->
+              <div name="gitPage" page-id="Blog" page-style="footerBar:blogPage_footerBar;gitPagesNavBlock:gitPageNav_blogStyle" class="gitPageContentStyle gitBlogPageStyle">
+                <div class="gitPageInnerStyle">
+                  <span class="gitPageHeaderStyle">Blog -</span>
+                  <div id="blogEntryListing" class="blogEntryListStyle"></div>
+                  <div id="blogEntryContent" class="blogContentStyle"></div>
+                  <br><br>
+                </div>
+              </div>
+              <!-- -- -- -- -->
               <div name="gitPage" page-id="AboutMe" page-style="footerBar:aboutMePage_footerBar;gitPagesNavBlock:gitPageNav_aboutMeStyle" class="gitPageContentStyle gitAboutMePageStyle">
                 <div class="gitPageInnerStyle">
                   <span class="gitPageHeaderStyle">About Me -</span>

Public/js/BlogManager.js

@@ -0,0 +1,71 @@
+// Simple blog manager for my procstack blog
+
+
+import { blogEntries } from './blog/blogEntries.js';
+
+export class BlogManager {
+  constructor( listParent, contentParent ){
+    this.listParent = listParent;
+    this.contentParent = contentParent;
+    this.blogEntries = [];
+    this.currentEntry = null;
+  }
+  init(){
+    let blogEntryKeys = Object.keys(blogEntries);
+    for( let i = 0; i < blogEntryKeys.length; i++ ){
+      this.blogEntries.push(  blogEntries[blogEntryKeys[i]] );
+    }
+  }
+  setListParent( listParent ){
+    this.listParent = listParent;
+  }
+  setContentParent( contentParent ){
+    this.contentParent = contentParent;
+  }
+  addBlogEntry( title, date, tags, body ){
+    let blogEntry = new blogEntries( this.parent, title, date, tags, body );
+    this.blogEntries.push( blogEntry );
+  }
+  build( parent=null ){
+    let parentObj = parent;
+    if( parentObj == null ){
+      if( this.contentParent == null ){
+        console.error('No Parent Object set');
+        return;
+      }
+      parentObj = this.contentParent;
+    }
+
+    for( let i = 0; i < this.blogEntries.length; i++ ){
+      // Content Prep
+      this.blogEntries[i].setId( i );
+      this.blogEntries[i].build( parentObj );
+      this.blogEntries[i].hide();
+
+      // Listing Prep
+      let curEntryName = this.blogEntries[i].title + ' :: ' + this.blogEntries[i].date;
+      this.addListing( curEntryName, i );
+    }
+  }
+
+  addListing( name, index ){
+    let entry = document.createElement('button');
+    entry.textContent = name;
+    entry.classList.add('blogEntryListingStyle');
+    entry.addEventListener('click', () => {
+      this.showEntry( index );
+    });
+    this.listParent.appendChild(entry);
+  }
+
+  showEntry( index ){
+    if( index == -1 || index >= this.blogEntries.length){
+      index = this.blogEntries.length - 1;
+    }
+    if( this.currentEntry != null ){
+      this.currentEntry.hide();
+    }
+    this.currentEntry = this.blogEntries[index];
+    this.currentEntry.show();
+  }
+}

Public/js/ProcPages.js

@@ -33,6 +33,8 @@ export class ProcPages {
     this.defaultPage = "Init";
     this.pageListing = {};
 
+    this.navBarLinks = [];
+    this.navBarObjs = {};
     this.resObjsVis = true;
     this.resBasedObjs = [];
     this.triggerEmitFunc = null;
@@ -41,11 +43,30 @@ export class ProcPages {
     this.pageStyleOverrides = {};
     this.runningTimeouts = {};
   }
+
+  hashListener() {
+    let tmpThis = this;
+    window.addEventListener("hashchange", (e) => {
+      let newHash = this.getHash();
+      if( newHash != this.curPageName){
+        if( newHash == "Blog"){
+          this.showPage("Blog");
+        }
+        this.changePage(newHash);
+      }
+    });
+  }
+
   init(){
     this.mainDiv = document.getElementById("procStackGitBlock");
     this.navBar = document.getElementById("gitPageNav");
     this.navBarLinks = [...this.navBar.getElementsByTagName("a")];
 
+    this.navBarLinks.forEach( (navLink)=>{
+      let linkText = navLink.getAttribute("pageName");
+      this.navBarObjs[linkText] = navLink;
+    });
+
     this.resBasedObjs = [...document.getElementsByClassName("squashInLowRes")];
     this.contentParent = document.getElementById("gitPageContentParent");
     let linkList = [...document.getElementById("gitPageNav").children];
@@ -82,6 +103,7 @@ export class ProcPages {
       this.pageListing[ pageId ]["room"] = null;
       this.pageListing[ pageId ]["view"] = null;
       if( pageId == pageHash ){
+        this.curPageName = pageId;
         this.curPage = pageDiv;
         this.toggleFader( this.curPage, true );
       }else{
@@ -93,6 +115,9 @@ export class ProcPages {
       let linkText = navLink.getAttribute("pageName");
       let pxlRoomName = navLink.getAttribute("pxlRoomName");
       let pxlCameraView = navLink.getAttribute("pxlCameraView");
+      if( !this.pageListing.hasOwnProperty(linkText) ){
+        return;
+      }
       this.pageListing[ linkText ]["room"] = pxlRoomName;
       this.pageListing[ linkText ]["view"] = pxlCameraView;
 
@@ -119,6 +144,7 @@ export class ProcPages {
 
 
     this.setStyleOverrides();
+    this.hashListener();
 
     // Let the dom settle for a step
     setTimeout( ()=>{
@@ -217,6 +243,7 @@ export class ProcPages {
       }
 
       // Set current page value
+      this.curPageName = pageName;
       this.curPage = this.pageListing[pageName]["obj"];
 
       // Trigger css animation to bring the new page in
@@ -383,4 +410,16 @@ export class ProcPages {
     }
   }
 
+  hidePage( pageName ){
+    if( this.navBarObjs.hasOwnProperty(pageName) ){
+      let pageObj = this.navBarObjs[pageName];
+      pageObj.style.display = "none";
+    }
+  }
+  showPage( pageName ){
+    if( this.navBarObjs.hasOwnProperty(pageName) ){
+      let pageObj = this.navBarObjs[pageName];
+      pageObj.style.display = "block";
+    }
+  }
 }

Public/js/ProckStackGitio.js

@@ -11,6 +11,7 @@
 
 import { pxlNav, pxlNavVersion } from './pxlNav.js';
 import { ProcPages } from './ProcPages.js';
+import { BlogManager } from './BlogManager.js';
 
 
 // Console logging level
@@ -36,6 +37,24 @@ const procPages = new ProcPages();
 procPages.init();
 procPages.setPxlNavVersion(pxlNavVersion);
 
+if (window.location.hash !== "#Blog") {
+  procPages.hidePage("Blog");
+}
+
+
+// -- -- -- -- --
+
+var blogEntryListing = document.getElementById('blogEntryListing');
+var blogEntryContent = document.getElementById('blogEntryContent');
+const procBlog = new BlogManager( blogEntryListing, blogEntryContent );
+procBlog.init();
+procBlog.build();
+procBlog.showEntry(-1);
+
+
+// -- -- -- -- --
+
+
 // Create the pxlNav environment manager
 const pxlNavr = new pxlNav( verbose, projectTitle, pxlRoomRootPath, procPages.curRoom, bootRoomList );
 

Public/js/blog/2024-12-07_A.js

@@ -0,0 +1,58 @@
+import { blogEntry } from './blogEntryBase.js';
+
+let entryTitle = "Site Progress";
+let entryDate = "2024-12-07";
+let entryTags = ["pxlNav", "procstack", "github", "github.io", "javascript", "decemeber", "2024"];
+let entryBody = `
+Gettin this site online!
+<br>
+<br>It's been quite a bit of work, spread over a longer span of time than I was hoping.
+<br>&nbsp;&nbsp; But it's finally coming together nicely!
+
+<div class="blogSpacer"></div>
+
+It's been oddly enjoyable getting <span class="textNudge">pxlNav</span> refactored and accessible from outside of the module.
+<br>Cutting out nearly 7000 lines of code, 
+<br>Comments always the bane of my existence,
+<br>&nbsp;&nbsp; But they seem to fill out in time.
+
+<div class="blogSpacer"></div>
+
+Currently general ambiance is my focus.
+<br>Things in 3d like to be dark when you introduce the idea of a "light" to them
+<br>&nbsp;&nbsp; So making sure shaders are matching textures and lighting takes some time.
+<br>
+<br>Then mix in modeling, rigging, texturing, animating, and scripting the rest of the site.
+<br>&nbsp;&nbsp; Since <span class="textNudge">pxlNav</span> is just what handles Three.js.
+<br>
+<br>All I can say is having drive for a passion project helps build your skills.
+<br>&nbsp;&nbsp; Get's you looking for more outlets to share your work.
+<br>&nbsp;&nbsp;&nbsp;&nbsp; And you end up finding other projects people have made that inspire you.
+<br>
+<br>So here's to future projects and sharing creativity with others!
+
+<div class="blogSpacer"></div>
+
+I just got the camera location warping working from outside of pxlNav.
+<br>Trigger a camera warp from a button press using a flag on your tag.
+<br>
+<br>This brought me to add optional camera positions in your 3d cgi program of choice.
+<br>Add a new group under your Camera_grp in your scene,
+<br>&nbsp;&nbsp; Just add a Position and lookAt locator/null/empty object in that group,
+<br>&nbsp;&nbsp;&nbsp;&nbsp; Then add a "pxlRoomName" & "pxlCameraView" tag to your link on your site.
+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "pxlRoomName" is your 'pxlRoom' name,
+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "pxlCameraView" is your group name under 'Camera_grp'.
+<br>&nbsp;&nbsp; Click your link and watch pxlNav warp your camera to that position!
+<br>
+<br>Only problem right now is the warping effect isn't running.
+<br>&nbsp;&nbsp; I'm likely just not enabling the post-process layer for the effect.
+<br>&nbsp;&nbsp;&nbsp;&nbsp; pxlCamera has been reworked a bit up to this point,
+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; More testing is required.
+<br>
+<br>&nbsp; -Kevin Edzenga
+`;
+
+
+const blogEntryObj = new blogEntry(null, entryTitle, entryDate, entryTags, entryBody);
+
+export { blogEntryObj };