blazed-past-us 0.7.9 → 0.8.0

package/dist/runtime/getters.js

@@ -1,55 +1,70 @@
 function getPostData(postsMetadata, slug, option) {
-    return postsMetadata.find((post) => post.slug === slug)?.[option];
+  return postsMetadata.find((post) => post.slug === slug)?.[option];
 }
 function getPathnameFromLocationHash(locationHash) {
-    return locationHash.split('/').splice(1).join('/');
+  return locationHash.split('/').splice(1).join('/');
 }
 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 };
+  const hashRoute = window.location.hash;
+  const pathname = getPathnameFromLocationHash(hashRoute);
+  const queryString = hashRoute.split('?')[1] || '';
+  const urlParams = new URLSearchParams(queryString);
+  return { pathname, queryString, urlParams };
 }
 function getSlug(htmlFilename) {
-    return htmlFilename.replace('.html', '');
+  return htmlFilename.replace('.html', '');
 }
 function getTitle(htmlFilename) {
-    return htmlFilename.replace('.html', '').replaceAll('-', ' ');
+  return htmlFilename.replace('.html', '').replaceAll('-', ' ');
 }
 function getBrief(fileContent, lines) {
-    const A = fileContent
-        .split('\n')
-        .splice(1)
-        .filter((str) => !str.includes('tags') && str.length > 10) || '';
-    let brief = '';
-    for (let l = 0; l < lines; l++) {
-        brief += A[l];
-    }
-    return brief.replace(/\r/g, ' ');
+  const A =
+    fileContent
+      .split('\n')
+      .splice(1)
+      .filter((str) => !str.includes('tags') && str.length > 10) || '';
+  let brief = '';
+  for (let l = 0; l < lines; l++) {
+    brief += A[l];
+  }
+  // Remove unwanted chars.
+  const cleanedBrief = brief.replace(/\r/g, ' ').replace(/`/g, '');
+  return cleanedBrief;
 }
 function getTags(fileContent) {
-    return (fileContent
-        .split('\n')
-        ?.find((str) => str.includes('**tags:**'))
-        ?.split('**tags:**')
-        ?.slice(1)[0]
-        ?.split(',')
-        .map((str) => str.trim()) || []);
+  return (
+    fileContent
+      .split('\n')
+      ?.find((str) => str.includes('**tags:**'))
+      ?.split('**tags:**')
+      ?.slice(1)[0]
+      ?.split(',')
+      .map((str) => str.trim()) || []
+  );
 }
 function getColoredTagsHTML(tags, config) {
-    return tags
-        .replace(/\s/g, '')
-        .toLowerCase()
-        .split(',')
-        .map((key) => {
-        const tagColor = config.tags[key]?.color ?? config.tags.default.color;
-        return `
-        <span class="tag" style="--tag-color: ${tagColor}">
-          ${key}
-        </span>
+  return tags
+    .replace(/\s/g, '')
+    .toLowerCase()
+    .split(',')
+    .map((key) => {
+      const tagColor = config.tags[key]?.color ?? config.tags.default.color;
+      return `
+        <span class="tag" style="--tag-color: ${tagColor}">
+          ${key}
+        </span>
       `;
     })
-        .join(`<span class="tag-separator">, </span>`);
+    .join(`<span class="tag-separator">, </span>`);
 }
-export { getPostData, getTitle, getTags, getBrief, getColoredTagsHTML, getSlug, getPathnameFromLocationHash, getLocationHashSpecifics, };
+
+export {
+  getPostData,
+  getTitle,
+  getTags,
+  getBrief,
+  getColoredTagsHTML,
+  getSlug,
+  getPathnameFromLocationHash,
+  getLocationHashSpecifics,
+};

package/dist/server/parse-markdown.js

@@ -21,7 +21,6 @@ async function parseMarkdown(_path) {
     const remarkResult = await remark()
         .use(remarkParse)
         .use(remarkInlineSvg)
-        /* .use(remarkImages) */
         .use(remarkRehype, { allowDangerousHtml: true })
         .use(rehypePrettyCode, {
         theme: JSON.parse(readFileSync(path.join(root, 'src/code-block-theme.json'), 'utf-8')),

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

@@ -7,6 +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>;
-declare const remarkImages: Plugin<[], Root, Root>;
 declare function sortPostsByNewest(postsMetadata: PostMetadata[]): PostMetadata[];
-export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, remarkImages, };
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, };

package/dist/server/server-utils.js

@@ -93,28 +93,7 @@ const remarkInlineSvg = function () {
         });
     };
 };
-const remarkImages = function () {
-    const baseDirectory = process.cwd();
-    return function transformer(tree) {
-        visit(tree, 'image', (node, index, parent) => {
-            if (node.url?.endsWith('.svg'))
-                return;
-            if (index === undefined || !parent)
-                return;
-            try {
-                const imagePath = path.resolve(baseDirectory, `./src/assets/images/${node.url}`);
-                parent.children[index] = {
-                    type: 'html',
-                    value: `<div align="center"><img src="${imagePath}"></div>`,
-                };
-            }
-            catch (error) {
-                console.warn(error);
-            }
-        });
-    };
-};
 function sortPostsByNewest(postsMetadata) {
     return postsMetadata.sort((a, b) => b.created.localeCompare(a.created));
 }
-export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, remarkImages, };
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, };

package/dist/template/package.json

@@ -17,6 +17,6 @@
   },
   "dependencies": {
     "three": "^0.182.0",
-    "blazed-past-us": "^0.7.8"
+    "blazed-past-us": "^0.7.9"
   }
 }

package/dist/template/src/posts/configuration-and-deployment-to-github-pages.md

@@ -0,0 +1,69 @@
+documentation
+
+This is a brief explainer on how to configure the blog, set up the CI action and deploy to Github pages.
+
+Once you install the scaffolding you will find the file `config.json` in the src directory. It looks like this:
+
+```json
+{
+  "base_url": "/blazed-past-us/",
+  "subtitle": "let the cosmos bear witness...",
+  "tags": {
+    "javascript": { "color": "#f5dd42" },
+    "typescript": { "color": "#42adf5" },
+    "default": { "color": "#e0e0e0" }
+  }
+}
+```
+
+This JSON file allows you to configure the `base_url`, the `subtitle` and add your custom `tags` with their respective font color.
+
+The `base_url` is what comes after the origin url. E.g. in the case of this blog you can see that is what comes after `https://gass-git.github.io`
+
+In your Github repository create a new workflow with the following code and replace where it says `blazed-past-us` with your `base_url`
+
+```yml {42} showLineNumbers
+name: deploy to Github pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  deployments: write
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./src/template
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - run: npm i
+      - run: npm run build
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./src/template/dist
+
+      - uses: actions/deploy-pages@v4
+
+      - name: Create Deployment Record
+        uses: chrnorm/deployment-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: github-pages
+          environment-url: https://gass-git.github.io/blazed-past-us/
+          ref: main
+```

package/dist/template/src/posts/the-inspiration-and-architecture.md

@@ -1,17 +1,16 @@
 architecture
 
-I've been enaging with several blogs and communities lately. Reading mostly about things related to software development. And since a few months ago I started to wish for a place in where I could share my own insights and notes. I didn't want to write these on community platforms for a few reasons (I don't own the data, there is no freedom and authenticity in the way these are designed, ..) so I started to look around for ways in which I could bring to
-life my own blog that would allow me to write posts effortless.
+I've been engaging with several blogs and communities lately. Reading mostly about software development. And since a few months ago I started to wish for a place where I could share my own insights and notes. I didn't want to write these on community platforms for a few reasons (I don't own the data, there is no freedom and authenticity in the way these are showcased, ..) so I started to look around for ways in which I could bring to life my own blog that would allow me to write posts effortless. Little did I know, I was about to embark on a several-month journey.
 
-I wanted to build a blog with my own unique flavour. I like feeling the freedom of the early 2000's of the internet. Each site had their own unique style. Surfing the web was exciting and unexpected. The web was full o creativity and authenticity. People used plain languages to build, not frameworks or libraries.
+A unique flavour, that was my desire. The creative internet era of the the late 90's and early 2000's. Each site had its own unique style. Surfing the web was exciting and unexpected. People built using plain code, not frameworks or libraries.
 
-I ended up deciding to go for a static blog hosted in github pages that would build on git push the written content on the IDE. In this way the flow for writing a post would be as easy as typing in the IDE and pushing to github.
+I ended up deciding to go for a static blog hosted in Github pages motivated by the free service and the convenience of building the bundle and deploying automatically on git push. In this way the flow for writing a post would be as easy as typing in the IDE and pushing to github.
 
-There were two frameworks that caught my eye: Astro and 11ty.
+There were two frameworks that caught my eye: [Astro](https://astro.build/) and [11ty](https://www.11ty.dev/).
 
-Gravity made me land on 11ty so I decided to check out how to work with it, but I didn't like enough to choose it. These were for a few very picky things:
+Gravity made me land on [11ty](https://www.11ty.dev/) so I decided to check out how to work with it, but I didn't like it enough. These were for a few very picky things:
 
-I wanted to write .md files as clean as when you write them for github. I didn't want to write things like on the top of every post.
+I wanted to write Markdown files as clean as when you write them for Github `README.md`. I didn't want to do things such as:
 
 ```md
 ---
@@ -20,7 +19,7 @@ other: stuff here
 ---
 ```
 
-Or HTML files like:
+Or `html` files like:
 
 ```html
 ---
@@ -30,20 +29,22 @@ layout: layout.html
 {% for post in collections.post %} {% endfor %}
 ```
 
-It feels off. An HTML file that looks like that ? ... It reminds me of Laravel blade syntax (nothing wrong with that though, I kind a liked it).
+It feels off. An `html` file that looks like that ? It reminds me of Laravel blade syntax (nothing wrong with that though, I kind a liked it).
 
-Then I had my commit 0 moment. Why not build my own blog system which would allow to write .md files in a breaze and explore just for fun how fast it can go. I had just read a book about the life of Stan Lee and reading Silver Surfer comic. Since that super hero has the "surfer" word in its name it motivated me to create a short dialogue between me and him about a blog and that gave birth to the whole theme and easthetics.
+Then I had my `commit 0` moment. Why not build my own blog system which would allow to write `.md` files in a breeze and explore just for fun how fast it can go. I had just read The Marvelous Life (Stan Lee biography) and a few Silver Surfer comics. Since the super hero has the "surfer" word in its name, it motivated me to create a short dialogue between me and him about a blog. And that gave birth to the whole theme and aesthetics.
 
-What started as a blog system it eventually mutated into a framework. Why not ? I've never build a framework before and I'm currently unemployed which means I have time, so why not ?
+![silver-surfer](./images/silver-surfer.png)
 
-⚡Blazed past us was born.
+What started as a blog system it eventually mutated into a framework. I've never built a framework before and I'm currently unemployed which means I have time, so why not ?
+
+And so, [Blazed Past Us](https://github.com/gass-git/blazed-past-us) was born.
 
 Let me show you a bit what is going on under the hood. This is the server side build process architecture:
 
 ![server-side-arch](server-side-arch.svg)
 
-And the client side (runtime) architecture. Just one thing though. This is an early implementation. I have few more ideas which change this a bit.
+And the client side (runtime) architecture. Just one thing though. This is an early implementation. I have few more ideas that could change this a bit.
 
 ![client-side-runtime](client-side-runtime.svg)
 
-The thing I'm most proud of is about how simple and straightforward it is to write a post. As you can [see here](https://github.com/gass-git/blazed-past-us/blob/main/src/template/src/posts/the-inspiration-and-architecture.md), the post you are now reading looks identical to a regular README.md file.
+The thing I'm most happy about is how simple and straightforward it is to write a post. As you can [see here](https://github.com/gass-git/blazed-past-us/blob/main/src/template/src/posts/the-inspiration-and-architecture.md), the post you are now reading looks identical to a regular `README.md` file.

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

@@ -0,0 +1,52 @@
+pre {
+  overflow-x: auto;
+}
+
+figure {
+  margin: 1.5rem 0 2rem 0;
+  padding: 0.5rem 0rem 0.5rem 0;
+  font-size: var(--body-font-size);
+  border-radius: var(--border-radius);
+  box-shadow: var(--primary-box-shadow);
+}
+
+p code {
+  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
+  margin: 0 0.2rem 0 0.2rem;
+  background: var(--inline-code-bg-color);
+  border-radius: 0.4rem;
+}
+
+span[data-highlighted-line] {
+  background: rgba(200, 200, 255, 0.2);
+}
+
+span[data-line] {
+  padding: 0.5rem 2rem 0.5rem 1rem;
+}
+
+code[data-line-numbers] {
+  counter-reset: line;
+}
+
+code[data-line-numbers] > [data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 0.75rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: rgb(92, 92, 92, 0.8);
+}
+
+code[data-line-numbers-max-digits="2"] > [data-line]::before {
+  width: 1.25rem;
+}
+
+code[data-line-numbers-max-digits="3"] > [data-line]::before {
+  width: 1.75rem;
+}
+
+code[data-line-numbers-max-digits="4"] > [data-line]::before {
+  width: 2.25rem;
+}

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

@@ -1,13 +1,15 @@
-@import 'fonts.css';
-@import 'animations.css';
-@import 'loader.css';
-@import 'post.css';
-@import 'footer.css';
-@import 'header.css';
-@import 'home.css';
+@import "fonts.css";
+@import "animations.css";
+@import "loader.css";
+@import "post.css";
+@import "footer.css";
+@import "header.css";
+@import "home.css";
+@import "code.css";
 
 :root {
   --background: #181e3f;
+  --inline-code-bg-color: #3b4683;
   --max-width: 55rem;
   --neon: #82f9ff;
   --post-title-color: rgb(241, 241, 241);
@@ -15,7 +17,7 @@
   --light-blue-09: rgba(129, 213, 255, 0.9);
   --light-blue-05: rgba(129, 213, 255, 0.5);
   --light-yellow: #ffffb4;
-  --body-font-family: 'Merriweather Sans Light';
+  --body-font-family: "Merriweather Sans Light";
   --body-font-size: 1.1rem;
   --border-radius: 0.5rem;
   --primary-box-shadow: inset 0 0 0 0.1rem var(--light-blue-05);
@@ -46,6 +48,12 @@ h1 {
   color: var(--h1-color);
 }
 
+img {
+  width: auto;
+  max-width: 100%;
+  border-radius: 1rem;
+}
+
 section {
   margin: 0 auto 0 auto;
 }
@@ -84,7 +92,7 @@ svg {
 }
 
 .date {
-  font-family: 'Inter Regular';
+  font-family: "Inter Regular";
   color: var(--date-color);
   margin-top: 0.1rem;
   font-size: 0.85rem;

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

@@ -14,12 +14,12 @@
 
 .post .tag-separator {
   font-size: 1.4rem;
-  font-family: 'Permanent Marker Regular';
+  font-family: "Permanent Marker Regular";
   color: var(--body-text-color);
 }
 
 .post .title {
-  font-family: 'Inter Extra Bold';
+  font-family: "Inter Extra Bold";
   color: var(--post-title-color);
   font-size: 2.25rem;
 }
@@ -29,7 +29,7 @@
 }
 
 .post .tag {
-  font-family: 'Permanent Marker Regular';
+  font-family: "Permanent Marker Regular";
   display: inline-block;
   margin: 0.5rem 0 2rem 0;
   font-size: 1.3rem;
@@ -39,46 +39,3 @@
   line-height: 0.7;
   opacity: 0.9;
 }
-
-pre {
-  overflow-x: auto;
-}
-
-figure {
-  margin: 1.5rem 0 2rem 0;
-  padding: 0.5rem 3rem 0.5rem 0;
-  font-size: var(--body-font-size);
-  border-radius: var(--border-radius);
-  box-shadow: var(--primary-box-shadow);
-}
-
-code {
-  counter-reset: line;
-  font-size: var(--body-font-size);
-}
-
-code > [data-line]::before {
-  counter-increment: line;
-  content: counter(line);
-  display: inline-block;
-  width: 0.75rem;
-  margin: 0.5rem 1.2rem 0.5rem 1.2rem;
-  text-align: right;
-  color: rgb(92, 92, 92, 0.8);
-}
-
-code[data-line-numbers-max-digits='2'] > [data-line]::before {
-  width: 1.25rem;
-}
-
-code[data-line-numbers-max-digits='3'] > [data-line]::before {
-  width: 1.75rem;
-}
-
-code[data-line-numbers-max-digits='4'] > [data-line]::before {
-  width: 2.25rem;
-}
-
-code[data-highlighted-line] {
-  background: rgba(200, 200, 255, 0.076);
-}