blazed-past-us 0.4.3 → 0.5.5

package/dist/cli/build.js

@@ -4,7 +4,7 @@ import fs from 'node:fs';
 import fsPromises from 'node:fs/promises';
 import path from 'node:path';
 import { log } from '../engine/utils.js';
-import { generatePostMetadata, writeTransformedPostFile } from '../server/file-builder.js';
+import { generatePostMetadata, writeTransformedPostFile, } from '../server/file-builder.js';
 /**
  * CLI entry point.
  * Resolves project paths and builds bundle.

package/dist/engine/getters.d.ts

@@ -1,13 +1,8 @@
-import type { PostMetaData, Config, PostDataType } from '../types';
-declare function getPostData(postsMetaData: PostMetaData[], slug: string, option: PostDataType): string | string[] | Date | undefined;
-declare function getAllPostsHTML(postsMetaData: PostMetaData[], baseURL: string): Promise<{
-    slug: string;
-    html: string | void;
-}[]>;
-declare function getPostsMetaData(baseURL: string, config: Config): Promise<PostMetaData[]>;
+import type { PostMetadata, Config, PostDataType } from '../types';
+declare function getPostData(postsMetadata: PostMetadata[], slug: string, option: PostDataType): string | string[] | Date | undefined;
 declare function getSlug(htmlFilename: string): string;
 declare function getTitle(htmlFilename: string): string;
 declare function getBrief(fileContent: string, lines: number): string;
 declare function getTags(fileContent: string): string[];
 declare function getColoredTagsHTML(tags: string, config: Config): string;
-export { getPostData, getAllPostsHTML, getPostsMetaData, getTitle, getTags, getBrief, getColoredTagsHTML, getSlug, };
+export { getPostData, getTitle, getTags, getBrief, getColoredTagsHTML, getSlug };

package/dist/engine/getters.js

@@ -1,32 +1,5 @@
-function getPostData(postsMetaData, slug, option) {
-    return postsMetaData.find((post) => post.slug === slug)?.[option];
-}
-async function getAllPostsHTML(postsMetaData, baseURL) {
-    const allPostsFilename = postsMetaData.map((el) => ({ slug: el.slug, filename: el.filename }));
-    const allPostsHTML = [];
-    for (const post of allPostsFilename) {
-        const HTML = await fetch(`${baseURL}posts/${post.filename}`)
-            .then((resp) => resp.text())
-            .catch((error) => console.error(error));
-        allPostsHTML.push({ slug: post.slug, html: HTML });
-    }
-    return allPostsHTML;
-}
-async function getPostsMetaData(baseURL, config) {
-    const postsRelativeDataPath = config.posts_data_path;
-    const postsPath = [baseURL, postsRelativeDataPath].join('');
-    try {
-        const resp = await fetch(postsPath);
-        if (!resp.ok) {
-            throw new Error(`HTTP error! Status: ${resp.status}`);
-        }
-        const data = await resp.json();
-        return data;
-    }
-    catch (error) {
-        console.error('Failed to fetch posts metadata:', error);
-        throw error;
-    }
+function getPostData(postsMetadata, slug, option) {
+    return postsMetadata.find((post) => post.slug === slug)?.[option];
 }
 function getSlug(htmlFilename) {
     return htmlFilename.replace('.html', '');
@@ -69,4 +42,4 @@ function getColoredTagsHTML(tags, config) {
     })
         .join(`<span class="tag-separator">, </span>`);
 }
-export { getPostData, getAllPostsHTML, getPostsMetaData, getTitle, getTags, getBrief, getColoredTagsHTML, getSlug, };
+export { getPostData, getTitle, getTags, getBrief, getColoredTagsHTML, getSlug };

package/dist/engine/render.d.ts

@@ -1,3 +1,3 @@
-import { Views, PostMetaData } from '../types.js';
-declare function render(view: string, root: HTMLElement, views: Views, postsMetaData: PostMetaData[], postTagsFilter?: string, postSlug?: string): void;
+import { Views, PostMetadata, PostHTML } from '../types.js';
+declare function render(view: string, root: HTMLElement, views: Views, postsMetadata: PostMetadata[], postsHTML?: PostHTML[], postTagsFilter?: string, postSlug?: string): void;
 export { render };

package/dist/engine/render.js

@@ -1,14 +1,15 @@
 import { postExists, inject } from './utils.js';
-function render(view, root, views, postsMetaData, postTagsFilter, postSlug) {
+function render(view, root, views, postsMetadata, postsHTML, postTagsFilter, postSlug) {
     const r = root;
     const { home, post, notFound } = views;
     switch (view) {
         case 'home':
-            inject(r, home(postTagsFilter?.split(',')));
+            inject(r, home(postTagsFilter?.split(','), postsMetadata));
             break;
         case 'post':
-            if (postSlug && postExists(postsMetaData, postSlug)) {
-                post(postSlug).then((html) => inject(r, html));
+            if (postSlug && postExists(postsMetadata, postSlug)) {
+                const htmlContent = postsHTML?.find((p) => p.slug === postSlug)?.html;
+                post(postSlug, postsMetadata, htmlContent).then((html) => inject(r, html));
             }
             else {
                 inject(r, notFound());

package/dist/engine/requests.d.ts

@@ -0,0 +1,5 @@
+import { Config, PostMetadata, PostHTML } from '../types';
+export declare function fetchResources(config: Config): Promise<void | {
+    postsMetadata: PostMetadata[];
+    postsHTML: PostHTML[];
+}>;

package/dist/engine/requests.js

@@ -0,0 +1,43 @@
+export async function fetchResources(config) {
+    try {
+        const postsMetadata = await fetchPostsMetaData(config);
+        const postsHTML = await fetchAllPostsHTML(config.base_url, postsMetadata);
+        return { postsMetadata, postsHTML };
+    }
+    catch (error) {
+        console.log(`Failed to fetch resources.`);
+        console.error(error);
+    }
+}
+async function fetchAllPostsHTML(baseURL, postsMetadata) {
+    const allPostsFilename = postsMetadata.map((el) => ({
+        slug: el.slug,
+        filename: el.filename,
+    }));
+    const allPostsHTML = new Array();
+    for (const post of allPostsFilename) {
+        const HTML = await fetch(`${baseURL}posts/${post.filename}`)
+            .then((resp) => resp.text())
+            .catch((error) => console.error(error));
+        allPostsHTML.push({ slug: post.slug, html: HTML });
+    }
+    return allPostsHTML;
+}
+async function fetchPostsMetaData(config) {
+    // If config.base_url does not end with "/" append it.
+    const baseUrl = config.base_url.endsWith('/') ? config.base_url : config.base_url + '/';
+    const postsRelativeDataPath = 'posts/data.json';
+    const postsPath = [baseUrl, postsRelativeDataPath].join('');
+    try {
+        const resp = await fetch(postsPath);
+        if (!resp.ok) {
+            throw new Error(`HTTP error! Status: ${resp.status}`);
+        }
+        const data = await resp.json();
+        return data;
+    }
+    catch (error) {
+        console.error('Failed to fetch posts metadata:', error);
+        throw error;
+    }
+}

package/dist/engine/utils.d.ts

@@ -1,10 +1,15 @@
-import { MsgColor, PostMetaData } from '../types';
-declare function postExists(postsMetaData: any[], slug: string): boolean;
+import { Config, MsgColor, PostMetadata } from '../types';
+declare function postExists(postsMetadata: any[], slug: string): boolean;
 declare function getPathnameFromLocationHash(locationHash: string): string;
 declare function beautifyDate(d: Date | undefined): undefined | string;
 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;
-declare function filterByUrlQueryIfPresent(postsMetaData: PostMetaData[], tags: string[]): PostMetaData[];
-export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, };
+declare function activateBoltRotator(): void;
+declare function setTitleAndSubtitle(packageName: string, config: Config): void;
+declare function filterByUrlQueryIfPresent(postsMetadata: PostMetadata[], tags: string[]): PostMetadata[];
+declare function getLocationHashSpecifics(window: Window): {
+    pathname: string;
+    queryString: string;
+    urlParams: URLSearchParams;
+};
+export { postExists, beautifyDate, inject, log, activateBoltRotator, setTitleAndSubtitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, getLocationHashSpecifics, };

package/dist/engine/utils.js

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import pkg from '../../package.json' with { type: 'json' };
-function postExists(postsMetaData, slug) {
-    return postsMetaData.some((post) => post.slug === slug);
+function postExists(postsMetadata, slug) {
+    return postsMetadata.some((post) => post.slug === slug);
 }
 function getPathnameFromLocationHash(locationHash) {
     return locationHash.split('/').splice(1).join('/');
@@ -36,19 +36,33 @@ function log(msg, color) {
     }
     console.log(`${chalk.blue(pkg.name + ' v' + pkg.version)} ${coloredMsg}`);
 }
-function boltRotator(document, elementID) {
-    const el = document.getElementById(elementID);
-    if (el) {
-        el.classList.add('rotate');
-    }
+function activateBoltRotator() {
+    const logoElement = document.querySelector('.logo');
+    window.onhashchange = () => {
+        if (logoElement) {
+            logoElement.classList.add('rotate');
+            setTimeout(() => logoElement.classList.remove('rotate'), 400);
+        }
+    };
 }
-function setTitle(document, elementID, packageName) {
-    const el = document.getElementById(elementID);
-    if (el) {
-        el.innerText = packageName.replaceAll('-', ' ');
+function setTitleAndSubtitle(packageName, config) {
+    const titleElement = document.querySelector('.title');
+    const subtitleElement = document.querySelector('.subtitle');
+    if (titleElement) {
+        titleElement.innerHTML = packageName.replaceAll('-', ' ');
+    }
+    if (subtitleElement) {
+        subtitleElement.innerHTML = config.subtitle;
     }
 }
-function filterByUrlQueryIfPresent(postsMetaData, tags) {
-    return postsMetaData.filter((post) => tags ? tags.some((tag) => post.tags.includes(tag)) : true);
+function filterByUrlQueryIfPresent(postsMetadata, tags) {
+    return postsMetadata.filter((post) => tags ? tags.some((tag) => post.tags.includes(tag)) : true);
+}
+function getLocationHashSpecifics(window) {
+    const hashRoute = window.location.hash;
+    const pathname = getPathnameFromLocationHash(hashRoute);
+    const queryString = hashRoute.split('?')[1] || '';
+    const urlParams = new URLSearchParams(queryString);
+    return { pathname, queryString, urlParams };
 }
-export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, };
+export { postExists, beautifyDate, inject, log, activateBoltRotator, setTitleAndSubtitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, getLocationHashSpecifics, };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './engine/getters';
 export * from './engine/utils';
 export * from './engine/render';
+export * from './engine/requests';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './engine/getters';
 export * from './engine/utils';
 export * from './engine/render';
+export * from './engine/requests';

package/dist/server/file-builder.d.ts

@@ -1,4 +1,4 @@
-import { PostMetaData } from '../types';
+import { PostMetadata } from '../types';
 declare function writeTransformedPostFile(outputPath: string, postHtmlContent: string, filename: string): Promise<void>;
-declare function generatePostMetadata(data: Array<PostMetaData>, filePath: string, htmlFilename: string, postTags: string[]): Promise<void>;
+declare function generatePostMetadata(data: Array<PostMetadata>, filePath: string, htmlFilename: string, postTags: string[]): Promise<void>;
 export { generatePostMetadata, writeTransformedPostFile };

package/dist/server/parse-markdown.js

@@ -20,7 +20,7 @@ async function parseMarkdown(_path) {
         .use(remarkParse)
         .use(remarkRehype)
         .use(rehypePrettyCode, {
-        theme: JSON.parse(readFileSync(path.join(root, 'src/moonlight-li.json'), 'utf-8')),
+        theme: JSON.parse(readFileSync(path.join(root, 'src/code-block-theme.json'), 'utf-8')),
         keepBackground: false,
     })
         .use(rehypeStringify)

package/dist/template/index.html

@@ -8,15 +8,16 @@
   </head>
   <body>
     <header>
-      <div class="logo" id="logo">
-        <div class="wrapper" id="logo-wrapper">
+      <div class="logo">
+        <div class="bolt-wrapper" id="bolt">
           <div class="top"></div>
           <div class="bottom"></div>
         </div>
       </div>
       <div>
         <div class="top">
-          <a id="title" class="title" href="#/"></a>
+          <a class="title" href="#/"></a>
+          <div class="subtitle"></div>
         </div>
       </div>
     </header>

package/dist/template/src/config.json

@@ -1,11 +1,6 @@
 {
   "base_url": "/blog/",
-  "posts_data_path": "posts/data.json",
-  "title_id": "title",
-  "root_id": "root",
-  "header_id": "header",
-  "speed_element_id": "speed",
-  "logo_id": "logo",
+  "subtitle": "notes from a dev...",
   "tags": {
     "javascript": { "color": "#f5dd42" },
     "typescript": { "color": "#42adf5" },

package/dist/template/src/main.js

@@ -3,10 +3,10 @@ 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 blazed.getPostsMetaData(import.meta.env.BASE_URL, config);
+const root = document.getElementById('root');
+const { postsMetadata, postsHTML } = await blazed.fetchResources(config);
 
-initRouter(root, postsMetaData);
+initRouter(root, postsMetadata, postsHTML);
 
 /**
  * ----------------------------
@@ -15,9 +15,5 @@ initRouter(root, postsMetaData);
  * These are demo features included in the starter template.
  * You can safely remove any of them.
  */
-blazed.setTitle(document, config.title_id, pkg.name);
-blazed.boltRotator(document, config.logo_id);
-
-const postsHTML = await blazed.getAllPostsHTML(postsMetaData, import.meta.env.BASE_URL);
-
-export { root, postsMetaData, postsHTML };
+blazed.setTitleAndSubtitle(pkg.name, config);
+blazed.activateBoltRotator();

package/dist/template/src/router.js

@@ -1,37 +1,29 @@
-import { render, postExists, getPathnameFromLocationHash } from 'blazed-past-us';
+import { render, postExists, getLocationHashSpecifics } from 'blazed-past-us';
 import home from './views/home';
 import post from './views/post';
 import notFound from './views/notFound';
 
-export default function initRouter(root, postsMetaData) {
-  // Render current route immediately.
-  handleRoute(root, postsMetaData);
-
-  window.addEventListener('hashchange', () => handleRoute(root, postsMetaData));
+export default function initRouter(root, postsMetadata, postsHTML) {
+  routeRenderer(root, postsMetadata, postsHTML);
+  window.addEventListener('hashchange', () =>
+    routeRenderer(root, postsMetadata, postsHTML)
+  );
 }
 
-/**
- * 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 hashRoute = window.location.hash;
-  const pathname = getPathnameFromLocationHash(hashRoute);
-  const queryString = hashRoute.split('?')[1] || '';
-  const urlParams = new URLSearchParams(queryString);
+function routeRenderer(root, postsMetadata, postsHTML) {
+  const { pathname, queryString, urlParams } = getLocationHashSpecifics(window);
   const views = { home, post, notFound };
 
-  if (pathname === '' || pathname === 'home' || queryString) {
-    render('home', root, views, postsMetaData, urlParams.get('tags'));
-    return;
-  }
+  switch (true) {
+    case pathname === '' || pathname === 'home' || queryString:
+      render('home', root, views, postsMetadata, postsHTML, urlParams.get('tags'));
+      break;
 
-  if (postExists(postsMetaData, pathname)) {
-    render('post', root, views, postsMetaData, undefined, pathname);
-    return;
-  }
+    case postExists(postsMetadata, pathname):
+      render('post', root, views, postsMetadata, postsHTML, undefined, pathname);
+      break;
 
-  render('404', root, views, postsMetaData);
+    default:
+      render('404', root, views, postsMetadata);
+  }
 }

package/dist/template/src/styles/header.css

@@ -1,26 +1,35 @@
 header {
   display: flex;
-  justify-content: left;
-  margin: 4.5rem 0 3.5rem 0;
-  padding: 0 0 0 1rem;
+  flex-direction: row;
   align-items: center;
+  margin: 4.5rem 0 3.5rem 1rem;
 }
 
 header .top {
-  justify-content: left;
   display: flex;
+  flex-direction: column;
 }
 
 header .top .title {
   font-family: 'Bangers Regular';
   font-size: 3.1rem;
   color: var(--light-blue-09);
+  letter-spacing: 0.15rem;
+}
+
+header .top .subtitle {
+  font-size: 0.85rem;
+  padding-left: 0.3rem;
+  font-family: 'Inter Extra Bold';
+  color: var(--light-yellow);
   text-transform: uppercase;
   letter-spacing: 0.15rem;
-  display: inline-block;
+  opacity: 1;
+  animation: flicker 4s infinite;
 }
 
 header .logo {
+  border: 1px solid white;
   height: 6.25rem;
   border: 0.25rem solid var(--light-blue-09);
   border-radius: 50%;
@@ -35,18 +44,18 @@ header .logo {
   transform-origin: center center;
 }
 
-.logo #logo-wrapper {
+.logo #bolt {
   animation: flicker 5s infinite;
 }
 
-.logo .wrapper {
+.logo .bolt-wrapper {
   min-width: 3.75rem;
   min-height: 3.75rem;
   filter: drop-shadow(0 0 0.2rem #00edfa6e) drop-shadow(0 0 0.345rem #00edfa6b)
     drop-shadow(0 0 0.4275rem #00edfa69) drop-shadow(0 0 0.55rem #00edfa70);
 }
 
-.logo .wrapper .top {
+.logo .bolt-wrapper .top {
   position: absolute;
   transform-origin: center;
   top: 19%;
@@ -57,7 +66,7 @@ header .logo {
   border-bottom: 1.384375rem solid #ffff90;
 }
 
-.logo .wrapper .bottom {
+.logo .bolt-wrapper .bottom {
   position: absolute;
   transform-origin: center;
   top: 46%;

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

@@ -1,9 +1,8 @@
-import { postsMetaData } from '../main';
 import { beautifyDate, filterByUrlQueryIfPresent } from 'blazed-past-us';
 
-export default function home(tags) {
+export default function home(tags, postsMetadata) {
   const baseURL = import.meta.env.BASE_URL;
-  const postsToShow = filterByUrlQueryIfPresent(postsMetaData, tags);
+  const postsToShow = filterByUrlQueryIfPresent(postsMetadata, tags);
 
   return postsToShow
     .map(

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

@@ -1,15 +1,14 @@
-import { beautifyDate, getPostData, getPostHtml } from 'blazed-past-us';
-import { postsMetaData, postsHTML } from '../main';
+import { beautifyDate, getPostData } from 'blazed-past-us';
 
-export default async function post(slug) {
-  const title = getPostData(postsMetaData, slug, 'title');
-  const date = beautifyDate(getPostData(postsMetaData, slug, 'created'));
+export default async function post(slug, postsMetadata, htmlContent) {
+  const title = getPostData(postsMetadata, slug, 'title');
+  const date = beautifyDate(getPostData(postsMetadata, slug, 'created'));
 
   return `
     <div class="post">
       <div class="title capitalize-first">${title}</div>
       <div class="date">${date}</div>
-      ${postsHTML.find((post) => post.slug === slug).html}
+      ${htmlContent}
     </div>
   `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blazed-past-us",
-  "version": "0.4.3",
+  "version": "0.5.5",
   "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",