Scroll Top on Blog Entry Change

Author: ProcStack

docs/js/BlogManager.js

@@ -1,31 +1,15 @@
 // Simple blog manager for my procstack blog
+//   Update : Not so simple blog manager
+//     Being added into ProcPages as a module for displaying blogs and comments
+//       Still working out making the comments more universal, but it's newly added
 
 
 import { blogEntries as procBlogEntries } from './blog/blogEntries.js';
 import { blogEntry, ENTRY_MARK_ENUM } from './blog/blogEntryBase.js';
 import { CommentManager } from './blog/CommentManager.js';
 
-/* comment manager -
-
-const comments = new CommentManager({
-  repo: "YOUR_NAME/YOUR_REPO",
-  repoId: "YOUR_REPO_ID",
-  category: "General",
-  categoryId: "YOUR_CATEGORY_ID",
-  containerId: "comments",
-});
-
-  comments.load(post.slug);
-  comments.unload();
-*/
-
 
 export class BlogManager {
-  /**
-   * @param {HTMLElement} listParent - DOM parent for the blog listing (buttons/links)
-   * @param {HTMLElement} contentParent - DOM parent where blog content entries will be built
-   * @param {Object} [options] - Optional settings: { entryData: blogEntry[], listingContainer: String, entryContainer: String, spacerStyle: String[] }
-   */
   constructor( blockParent, blogData = {} ){
     this.blockParent = blockParent;
     this.listParent = blogData.listParent || null;
@@ -87,12 +71,15 @@ export class BlogManager {
       curEntry.subscribeToURLChange( this.entryURLChange.bind(this) )
     }
   }
+
   setListParent( listParent ){
     this.listParent = listParent;
   }
+
   setContentParent( contentParent ){
     this.contentParent = contentParent;
   }
+
   addBlogEntry( title, date, tags, body ){
     // Ensure we pass a sensible parent to the blogEntry constructor
     let parentForEntry = this.contentParent || this.listParent || null;
@@ -103,6 +90,7 @@ export class BlogManager {
 
     this.blogEntries.push( newBlogEntry );
   }
+
   build( parent=null ){
     let parentObj = parent;
     if( parentObj == null ){
@@ -518,6 +506,11 @@ export class BlogManager {
     this.comments.containerId = commentId;
     this.comments.load( this.currentEntry.urlRoute );
 
+    // Scroll top baby!
+    if( this.contentParent ){
+      this.contentParent.scrollTo( 0, 0 );
+    }
+
     // Check for URL update
     // TODO : Update how entries buttons are added to the DOM,
     //          This seems like incorrect behaviour to include here in `showEntry()`

docs/js/blog/CommentManager.js

@@ -14,6 +14,20 @@ const giscusThemeList = [
   "catppuccin_latte", "catppuccin_frappe", "catppuccin_macchiato", "catppuccin_mocha", "fro"
 ];
 
+
+// comment manager -
+
+const comments = new CommentManager({
+  repo: "YOUR_NAME/YOUR_REPO",
+  repoId: "YOUR_REPO_ID",
+  category: "General",
+  categoryId: "YOUR_CATEGORY_ID",
+  containerId: "comments",
+});
+
+comments.load(post.slug);
+comments.unload();
+
 */
 
 
@@ -26,7 +40,7 @@ export class CommentManager {
     containerId = "comments",
     theme = "cobalt",
     lang = "en",
-  }) {
+  }){
     this.booted = false;
     this.repo = repo;
     this.repoId = repoId;
@@ -35,54 +49,35 @@ export class CommentManager {
     this.containerId = containerId;
     this.theme = theme;
     this.lang = lang;
+    this.script = null;
 
     this.handleMessage = this.handleMessage.bind(this);
     window.addEventListener("message", this.handleMessage);
   }
 
-  handleMessage(event) {
-    if (event.origin !== "https://giscus.app") return;
-    if (!(event.data && typeof event.data === "object" && event.data.giscus)) return;
+  handleMessage( event ){
+    if( event.origin !== "https://giscus.app" ) return;
+    if( !(event.data && typeof event.data === "object" && event.data.giscus) ) return;
 
     const giscus = event.data.giscus;
-    if (giscus.resizeHeight) {
+    if( giscus.resizeHeight ) {
       const container = document.getElementById(this.containerId);
-      if (container) {
+      if( container ) {
         container.style.height = `${giscus.resizeHeight + 30}px`;
       }
     }
   }
 
-  load(postId) {
-
+  load( postId ){
     const container = document.getElementById(this.containerId);
-    if (!container) {
+    if( !container ){
       console.warn("[CommentManager] Container not found:", this.containerId);
       return;
     }
 
     this.booted = true;
     container.innerHTML = "";
 
-    /* Generated from Giscus.app --
-    <script src="https://giscus.app/client.js"
-        data-repo="ProcStack/procDiscussions"
-        data-repo-id="R_kgDORc_LJw"
-        data-category="General"
-        data-category-id="DIC_kwDORc_LJ84C3kiH"
-        data-mapping="pathname"
-        data-strict="0"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="top"
-        data-theme="cobalt"
-        data-lang="en"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
-    </script>
-    */
-
     const script = document.createElement("script");
     script.src = "https://giscus.app/client.js";
     script.async = true;
@@ -99,30 +94,37 @@ export class CommentManager {
     script.dataset.strict = "0";
 
     script.dataset.reactionsEnabled = "1";
-    script.dataset.emitMetadata = "1";
+    script.dataset.emitMetadata = "0";
     script.dataset.inputPosition = "top";
     script.dataset.theme = this.theme;
     script.dataset.lang = this.lang;
     script.dataset.loading = "lazy";
 
-
-
-    container.appendChild(script);
+    // Add and store script reference
+    container.appendChild( script );
+    this.script = script;
   }
 
-  unload() {
+  unload(){
     const container = document.getElementById(this.containerId);
-    if (!container) return;
+    if( !container ) return;
 
     container.innerHTML = "";
     this.booted = false;
+
+    // Clean up for easier pre-rendered procPages
+    //  Repo - ./packing/renderPages.jsx
+    if( this.script ){
+      this.script.remove();
+      this.script = null;
+    }
   }
 
-  setTheme(theme) {
+  setTheme( theme ){
     this.theme = theme;
 
     const iframe = document.querySelector("iframe.giscus-frame");
-    if (!iframe) return;
+    if( !iframe ) return;
 
     iframe.contentWindow.postMessage(
       {
@@ -134,7 +136,7 @@ export class CommentManager {
     );
   }
 
-  isBooted() {
+  isBooted(){
     return this.booted;
   }
 }