blazed-past-us 0.7.3 → 0.7.6

package/README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img src="https://github.com/gass-git/blazed-past-us/raw/main/bolt.png" width="150">
+  <img src="https://github.com/gass-git/blazed-past-us/raw/main/bolt.png" width="100">
 </p>
 
 > 🚧 **Work in progress** This framework is still under active development. Expect changes.
 
 # Blazed Past Us..
 
-A static blog framework made for developers that allows content to be written in Markdown directly from the IDE. Plus it's fast.
+Developer centric static blog framework. Write in Markdown from your IDE, share code and SVGs effortlessly, and ship server-rendered HTML for blazing⚡fast load times.
 
 ## Commit 0
 
@@ -38,6 +38,7 @@ _"Very well… let the cosmos bear witness."_
 
 ## Useful notes
 
+- The HTML layout can be modified in `src/layout.js`
 - Append `/#/?tags=` to the base URL to filter home page posts by tag.
 - Posts creation dates are persisted.
 - The creation date is not updated when editing a post.

package/dist/cli/build.js

@@ -3,7 +3,7 @@ import { parseMarkdown } from '../server/parse-markdown.js';
 import fs from 'node:fs';
 import fsPromises from 'node:fs/promises';
 import path from 'node:path';
-import { getPostsRegistry, handlePostsRegistryUpdate, log, postNotInRegistry, } from '../server/server-utils.js';
+import { getPostsRegistry, handlePostsRegistryUpdate, log, postNotInRegistry, sortPostsByNewest, } from '../server/server-utils.js';
 import { generatePostMetadata, writeTransformedPostFile, } from '../server/file-builder.js';
 import { getSlug } from '../runtime/getters.js';
 /**
@@ -37,27 +37,28 @@ async function buildBundle(paths) {
     const postsFiles = fs.readdirSync(paths.input).filter((f) => f.endsWith('.md'));
     const data = new Array();
     const postsRegistry = { data: await getPostsRegistry(paths.input), update: false };
+    const date = new Date().toISOString();
     for (const filename of postsFiles) {
         const filePath = path.join(paths.input, filename);
         const parsedPostData = await parseMarkdown(filePath);
         const htmlFilename = filename.replace('.md', '.html');
         const slug = getSlug(htmlFilename);
-        await generatePostMetadata(data, filePath, htmlFilename, parsedPostData.tags, postsRegistry.data);
+        await generatePostMetadata(data, filePath, htmlFilename, parsedPostData.tags, postsRegistry.data, date);
         await fsPromises.mkdir(paths.output, { recursive: true });
         await writeTransformedPostFile(path.join(paths.output, htmlFilename), parsedPostData.html, filename);
         if (postNotInRegistry(postsRegistry.data, slug)) {
             postsRegistry.update = true;
-            const stats = await fsPromises.stat(filePath);
             postsRegistry.data?.push({
                 slug: getSlug(htmlFilename),
-                created: stats.birthtime,
+                created: date,
             });
         }
     }
     if (postsRegistry.update) {
         handlePostsRegistryUpdate(postsRegistry.data, paths);
     }
-    const jsonPosts = JSON.stringify(data);
+    const sortedData = sortPostsByNewest(data);
+    const jsonPosts = JSON.stringify(sortedData);
     fs.writeFileSync(path.join(paths.output, '/data.json'), jsonPosts);
     log('all posts have been parsed into HTML ✅', 'yellow');
 }

package/dist/runtime/render.js

@@ -4,7 +4,8 @@ function render(view, root, views, postsMetadata, postsHTML, postTagsFilter, pos
     const { home, post, notFound } = views;
     switch (view) {
         case 'home':
-            inject(r, home(postTagsFilter?.split(','), postsMetadata));
+            const tags = postTagsFilter?.split(',');
+            inject(r, home(tags, postsMetadata));
             break;
         case 'post':
             if (postSlug && postExists(postsMetadata, postSlug)) {

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

@@ -1,4 +1,4 @@
 import { PostMetadata, PostsRegistry } 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[], persistentPostsMetadata: PostsRegistry | void): Promise<void>;
+declare function generatePostMetadata(data: Array<PostMetadata>, filePath: string, htmlFilename: string, postTags: string[], persistentPostsMetadata: PostsRegistry | void, date: string): Promise<void>;
 export { generatePostMetadata, writeTransformedPostFile };

package/dist/server/file-builder.js

@@ -7,11 +7,10 @@ async function writeTransformedPostFile(outputPath, postHtmlContent, filename) {
         .then(() => console.log(chalk.green(`✔ ${filename}`)))
         .catch((error) => console.error(error));
 }
-async function generatePostMetadata(data, filePath, htmlFilename, postTags, persistentPostsMetadata) {
-    const stats = await fsPromises.stat(filePath);
+async function generatePostMetadata(data, filePath, htmlFilename, postTags, persistentPostsMetadata, date) {
     const fileContent = await fsPromises.readFile(filePath, 'utf-8');
     const slug = getSlug(htmlFilename);
-    const createdDate = persistentPostsMetadata?.find((p) => p.slug === slug)?.created || stats.birthtime;
+    const createdDate = persistentPostsMetadata?.find((p) => p.slug === slug)?.created || date;
     data.push({
         slug: getSlug(htmlFilename),
         filename: htmlFilename,

package/dist/server/server-utils.d.ts

@@ -1,4 +1,4 @@
-import { MsgColor, PostsPaths, PostsRegistry } from '../types';
+import { MsgColor, PostMetadata, PostsPaths, PostsRegistry } from '../types';
 import type { Plugin } from 'unified';
 import type { Root } from 'mdast';
 declare function postNotInRegistry(registry: PostsRegistry | [] | void, slug: string): boolean;
@@ -7,4 +7,5 @@ declare function getPostsRegistry(postsDirectoryPath: string): Promise<void | Po
 declare function copyRecursive(src: string, destination: string): void;
 declare function log(msg: string, color: MsgColor): void;
 declare const remarkInlineSvg: Plugin<[], Root, Root>;
-export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, };
+declare function sortPostsByNewest(postsMetadata: PostMetadata[]): PostMetadata[];
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, };

package/dist/server/server-utils.js

@@ -93,4 +93,7 @@ const remarkInlineSvg = function () {
         });
     };
 };
-export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, };
+function sortPostsByNewest(postsMetadata) {
+    return postsMetadata.sort((a, b) => b.created.localeCompare(a.created));
+}
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, };

package/dist/template/index.html

@@ -7,31 +7,6 @@
     <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
   </head>
   <body>
-    <div class="col-flexbox">
-      <section>
-        <header>
-          <div class="logo">
-            <div class="bolt-wrapper" id="bolt">
-              <div class="top"></div>
-              <div class="bottom"></div>
-            </div>
-          </div>
-          <div>
-            <div class="top">
-              <a class="title" href="#/"></a>
-              <div class="subtitle"></div>
-            </div>
-          </div>
-        </header>
-        <main>
-          <div id="root"></div>
-        </main>
-      </section>
-      <footer>
-        <span>Powered by </span><span>⚡</span>
-        <a href="https://github.com/gass-git/blazed-past-us"> blazed-past-us </a>
-      </footer>
-    </div>
     <script type="module" src="./src/main.js"></script>
     <script type="module" src="./src/stars.js"></script>
   </body>

package/dist/template/src/layout.js

@@ -0,0 +1,29 @@
+export default function layout() {
+  return `
+    <div class="col-flexbox">
+      <section>
+        <header>
+          <div class="logo">
+            <div class="bolt-wrapper" id="bolt">
+              <div class="top"></div>
+              <div class="bottom"></div>
+            </div>
+          </div>
+          <div>
+            <div class="top">
+              <a class="title" href="#/"></a>
+              <div class="subtitle"></div>
+            </div>
+          </div>
+        </header>
+        <main>
+          <div id="root"></div>
+        </main>
+      </section>
+      <footer>
+        <span>Powered by </span><span>⚡</span>
+        <a href="https://github.com/gass-git/blazed-past-us"> blazed-past-us </a>
+      </footer>
+  </div>
+  `;
+}

package/dist/template/src/main.js

@@ -2,11 +2,12 @@ import config from './config.json';
 import * as blazed from 'blazed-past-us';
 import initRouter from './router';
 import pkg from '../package.json';
+import layout from './layout';
 
-const root = document.getElementById('root');
 const { postsMetadata, postsHTML } = await blazed.fetchResources(config);
 
-initRouter(root, postsMetadata, postsHTML);
+blazed.inject(document.body, layout());
+initRouter(document.getElementById('root'), postsMetadata, postsHTML);
 
 /**
  * ----------------------------

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

@@ -1,5 +1,4 @@
 @import 'fonts.css';
-@import 'media.css';
 @import 'animations.css';
 @import 'loader.css';
 @import 'post.css';
@@ -8,9 +7,11 @@
 @import 'home.css';
 
 :root {
-  --background: #0f0f23;
+  --background: #172330;
   --max-width: 55rem;
   --neon: #82f9ff;
+  --post-title-color: rgb(241, 241, 241);
+  --body-text-color: #ececec;
   --light-blue-09: rgba(129, 213, 255, 0.9);
   --light-blue-05: rgba(129, 213, 255, 0.5);
   --light-yellow: #ffffb4;
@@ -83,3 +84,13 @@ canvas {
   font-size: 0.85rem;
   text-transform: uppercase;
 }
+
+@media (max-width: 60rem) {
+  header {
+    width: clamp(95%, 95%, 95%);
+  }
+
+  section {
+    width: clamp(95%, 95%, 95%);
+  }
+}

package/package.json

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

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

@@ -1,5 +0,0 @@
-@media (max-width: 60rem) {
-  header {
-    width: clamp(100%, 100%, 100%);
-  }
-}