blazed-past-us 0.3.4 → 0.3.7

package/README.md

@@ -17,7 +17,16 @@ _"I don't know… shall we see?"_
 **Silver Surfer looked dubious and curious:**  
 _"Very well… let the cosmos bear witness."_
 
-## Notes
+## About the framework
+
+- Designed for static hosting environments (e.g. GitHub Pages) — no server-side rewrites required.
+- Uses hash routing.
+- Fetches static JSON.
+- Fetches HTML fragments.
+- Avoids history API clean URLs.
+- Doesn’t rely on server fallback.
+
+## How to write posts ?
 
 - The post file name will be the title.
 - There is no need to add the title within the .md file, this will be set by the meta data.

package/dist/engine/getters.js

@@ -3,7 +3,7 @@ function getPostData(postsMetaData, slug, option) {
 }
 async function getPostHtml(postsMetaData, root, baseURL, postSlug) {
     const filename = postsMetaData.find((post) => post.slug === postSlug)?.filename;
-    const html = await fetch(`${baseURL}/posts/${filename}`)
+    const html = await fetch(`${baseURL}posts/${filename}`)
         .then((resp) => resp.text())
         .then((htmlString) => (root.innerHTML = htmlString))
         .catch((error) => console.error(error));

package/dist/engine/utils.d.ts

@@ -1,9 +1,8 @@
 import { MsgColor } from '../types';
 declare function postExists(postsMetaData: any[], slug: string): boolean;
 declare function beautifyDate(d: Date | undefined): undefined | string;
-declare function showCosmicSpeed(document: HTMLDocument, elementID: string): void;
 declare function inject(root: HTMLElement, html: string): void;
 declare function log(msg: string, color: MsgColor): void;
 declare function boltRotator(document: HTMLDocument, elementID: string): void;
 declare function setTitle(document: HTMLDocument, elementID: string, packageName: string): void;
-export { postExists, beautifyDate, showCosmicSpeed, inject, log, boltRotator, setTitle };
+export { postExists, beautifyDate, inject, log, boltRotator, setTitle };

package/dist/engine/utils.js

@@ -13,18 +13,6 @@ function beautifyDate(d) {
         month: 'long',
     });
 }
-function showCosmicSpeed(document, elementID) {
-    const el = document.getElementById(elementID);
-    if (el) {
-        new PerformanceObserver((list) => {
-            list.getEntries().forEach((en) => {
-                if (en.name === 'first-contentful-paint') {
-                    el.innerHTML = `<span>${en.startTime} ms</span>`;
-                }
-            });
-        }).observe({ type: 'paint', buffered: true });
-    }
-}
 function inject(root, html) {
     root.innerHTML = html;
 }
@@ -57,4 +45,4 @@ function setTitle(document, elementID, packageName) {
         el.innerText = packageName.replaceAll('-', ' ');
     }
 }
-export { postExists, beautifyDate, showCosmicSpeed, inject, log, boltRotator, setTitle };
+export { postExists, beautifyDate, inject, log, boltRotator, setTitle };

package/dist/template/index.html

@@ -15,9 +15,8 @@
       </div>
       <div>
         <div class="top">
-          <a id="title" class="title" href="/"></a>
+          <a id="title" class="title" href="#/"></a>
         </div>
-        <div class="speed" id="speed"></div>
       </div>
     </header>
     <div id="root"></div>

package/dist/template/src/config.json

@@ -1,5 +1,5 @@
 {
-  "posts_data_path": "/posts/data.json",
+  "posts_data_path": "posts/data.json",
   "title_id": "title",
   "root_id": "root",
   "header_id": "header",

package/dist/template/src/main.js

@@ -1,12 +1,12 @@
 import config from './config.json';
-import { getPostsMetaData, showCosmicSpeed, boltRotator, setTitle } from 'blazed-past-us';
-import router from './router';
+import * as blazed from 'blazed-past-us';
+import initRouter from './router';
 import pkg from '../package.json';
 
 const root = document.getElementById(config.root_id);
-const postsMetaData = await getPostsMetaData(import.meta.env.BASE_URL, config);
+const postsMetaData = await blazed.getPostsMetaData(import.meta.env.BASE_URL, config);
 
-router(root, postsMetaData);
+initRouter(root, postsMetaData);
 
 /**
  * ----------------------------
@@ -15,8 +15,7 @@ router(root, postsMetaData);
  * These are demo features included in the starter template.
  * You can safely remove any of them.
  */
-setTitle(document, config.title_id, pkg.name);
-boltRotator(document, config.logo_wrapper_id);
-showCosmicSpeed(document, config.speed_element_id);
+blazed.setTitle(document, config.title_id, pkg.name);
+blazed.boltRotator(document, config.logo_wrapper_id);
 
 export { root, postsMetaData };

package/dist/template/src/router.js

@@ -4,8 +4,21 @@ import home from './views/home';
 import post from './views/post';
 import notFound from './views/notFound';
 
-export default async function router(root, postsMetaData) {
-  const pathname = unbasePath(window.location.pathname);
+export default function initRouter(root, postsMetaData) {
+  // Render current route immediately.
+  handleRoute(root, postsMetaData);
+
+  window.addEventListener('hashchange', () => handleRoute(root, postsMetaData));
+}
+
+/**
+ * GitHub Pages is a static file server. It does not understand client-side routing.
+ * Everything after # stays client-side.
+ *
+ * This is the reason why we use hash routing.
+ */
+async function handleRoute(root, postsMetaData) {
+  const pathname = removeHash(window.location.hash);
   const urlParams = new URLSearchParams(window.location.search);
   const views = { home, post, notFound };
 
@@ -22,10 +35,7 @@ export default async function router(root, postsMetaData) {
   render('404', root, views, postsMetaData);
 }
 
-// Removes the BASE_URL from the pathname if present.
-function unbasePath(pathname) {
-  return pathname
-    .split('/')
-    .filter((name) => !import.meta.env.BASE_URL.split('/').includes(name))
-    .join('');
+// Removes "#/" from the location hash.
+function removeHash(locationHash) {
+  return locationHash.split('/').splice(1).join('/');
 }

package/dist/template/src/views/home.js

@@ -8,7 +8,7 @@ export default function home(tag) {
     .filter((post) => (tag ? post.tags.includes(tag) : true))
     .map(
       (post) => `
-      <a href="${baseURL}/${post.slug}">
+      <a href="${baseURL}#/${post.slug}">
         <div class="post-card">
           <div class="title capitalize-first">${post.title}</div>
           <div class="date">${beautifyDate(post.created)}</div>

package/dist/template/vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: '/blog/',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blazed-past-us",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "description": "A static blog framework made for developers that allows content to be written in Markdown directly from the IDE.",
   "license": "MIT",
   "author": "gass-git",