blazed-past-us 0.8.2 → 0.8.4

package/dist/server/parse-markdown.js

@@ -7,8 +7,8 @@ import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeStringify from 'rehype-stringify';
 import path from 'node:path';
 import { getColoredTagsHTML } from '../runtime/getters.js';
-import { remarkInlineSvg } from './server-utils.js';
 import rehypeRaw from 'rehype-raw';
+import { remarkInlineSvg } from 'remark-inline-svg-flex';
 /**
  * Converts a Markdown file to HTML with syntax highlighting.
  *
@@ -20,7 +20,10 @@ async function parseMarkdown(_path) {
     const markdown = await readFile(_path, { encoding: 'utf8' });
     const remarkResult = await remark()
         .use(remarkParse)
-        .use(remarkInlineSvg)
+        .use(remarkInlineSvg, {
+        wrapper: '<div align="center"></div>',
+        assetsDir: './src/svgs/',
+    })
         .use(remarkRehype, { allowDangerousHtml: true })
         .use(rehypePrettyCode, {
         theme: JSON.parse(readFileSync(path.join(root, 'src/code-block-theme.json'), 'utf-8')),
@@ -28,7 +31,7 @@ async function parseMarkdown(_path) {
     })
         .use(rehypeRaw)
         .use(rehypeStringify)
-        .process(markdown);
+        .process({ value: markdown, path: _path });
     const result = await customizeHTML(root, remarkResult.value);
     return result;
 }

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

@@ -1,11 +1,8 @@
 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;
 declare function handlePostsRegistryUpdate(postsRegistry: PostsRegistry | void, paths: PostsPaths): void;
 declare function getPostsRegistry(postsDirectoryPath: string): Promise<void | PostsRegistry>;
 declare function copyRecursive(src: string, destination: string): void;
 declare function log(msg: string, color: MsgColor): void;
-declare const remarkInlineSvg: Plugin<[], Root, Root>;
 declare function sortPostsByNewest(postsMetadata: PostMetadata[]): PostMetadata[];
-export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, remarkInlineSvg, sortPostsByNewest, };
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, sortPostsByNewest, };

package/dist/server/server-utils.js

@@ -3,7 +3,6 @@ import fsPromises from 'node:fs/promises';
 import fs from 'node:fs';
 import chalk from 'chalk';
 import pkg from '../../package.json' with { type: 'json' };
-import { visit } from 'unist-util-visit';
 function postNotInRegistry(registry, slug) {
     return !registry?.some((p) => p.slug === slug);
 }
@@ -71,29 +70,7 @@ function log(msg, color) {
     }
     console.log(`${chalk.blue(pkg.name + ' v' + pkg.version)} ${coloredMsg}`);
 }
-const remarkInlineSvg = 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 svgPath = path.resolve(baseDirectory, `./src/svgs/${node.url}`);
-                const svgContent = fs.readFileSync(svgPath, 'utf8');
-                parent.children[index] = {
-                    type: 'html',
-                    value: `<div align="center">${svgContent}</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, };
+export { postNotInRegistry, handlePostsRegistryUpdate, getPostsRegistry, copyRecursive, log, sortPostsByNewest, };

package/dist/template/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="./src/styles/main.css" rel="stylesheet" />
-    <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/favicon.svg" />
   </head>
   <body>
     <script type="module" src="./src/main.js"></script>

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

@@ -1,8 +1,6 @@
 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:
+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
 {
@@ -18,7 +16,7 @@ Once you install the scaffolding you will find the file `config.json` in the src
 
 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`
+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`
 

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

@@ -2,20 +2,22 @@ architecture
 
 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.
 
-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.
+A unique flavour, that was my desire. When it comes to this, I always remind myself about the creative internet era of the late 90's and early 2000's where 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 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.
+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 git push.
 
 There were two frameworks that caught my eye: [Astro](https://astro.build/) and [11ty](https://www.11ty.dev/).
 
 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 Markdown files as clean as when you write them for Github `README.md`. I didn't want to do things such as:
+I wanted to write Markdown files as clean as when you write a `README.md` file. I didn't want to type things such as the following on top of each post file:
 
 ```md
 ---
 title: hey! this is an article
 other: stuff here
+probably more stuff here...
+and here...
 ---
 ```
 
@@ -26,12 +28,13 @@ Or `html` files like:
 layout: layout.html
 ---
 
-{% for post in collections.post %} {% endfor %}
+{% 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).
 
-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.
+Then I had my `commit 0` moment. Why not build my own blog system which would allow me 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.
 
 ![silver-surfer](./images/silver-surfer.png)
 

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

@@ -1,28 +1,51 @@
+:root {
+  --code-font-size: 1rem;
+  --snippet-border: 0.1rem solid rgba(255, 255, 255, 0.2);
+  --snippet-border-radius: 0.4rem;
+  --snippet-background: rgba(0, 0, 0, 0.4);
+  --line-padding: 0.35rem 2rem 0.35rem 1.5rem;
+  --highlighted-line-background: rgba(255, 255, 255, 0.1);
+  --highlighted-chars-background: rgba(82, 82, 91, 0.502);
+  --inline-code-bg-color: rgba(255, 255, 255, 0.1);
+  --inline-code-padding: 0rem 0.35rem 0.15rem 0.35rem;
+  --inline-code-border: 0.1rem solid rgba(255, 255, 255, 0.15);
+  --inline-code-border-radius: 0.1rem;
+}
+
 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);
+  padding: 0;
+  font-size: var(--code-font-size);
+  border-radius: var(--snippet-border-radius);
+  border: var(--snippet-border);
+  background: var(--snippet-background);
 }
 
 p code {
-  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
-  margin: 0 0.2rem 0 0.2rem;
+  padding: var(--inline-code-padding);
+  margin: 0;
   background: var(--inline-code-bg-color);
-  border-radius: 0.4rem;
+  border-radius: var(--inline-code-border-radius);
+  border: var(--inline-code-border);
 }
 
 span[data-highlighted-line] {
-  background: rgba(200, 200, 255, 0.2);
+  background: var(--highlighted-line-background);
+}
+
+mark[data-highlighted-chars] {
+  background-color: var(--highlighted-chars-background);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5em 0.3rem 0.5em;
+  margin: 0 0.2rem 0 0.2rem;
 }
 
 span[data-line] {
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  padding: var(--line-padding);
 }
 
 code[data-line-numbers] {
@@ -39,14 +62,14 @@ code[data-line-numbers] > [data-line]::before {
   color: rgb(92, 92, 92, 0.8);
 }
 
-code[data-line-numbers-max-digits="2"] > [data-line]::before {
+code[data-line-numbers-max-digits='2'] > [data-line]::before {
   width: 1.25rem;
 }
 
-code[data-line-numbers-max-digits="3"] > [data-line]::before {
+code[data-line-numbers-max-digits='3'] > [data-line]::before {
   width: 1.75rem;
 }
 
-code[data-line-numbers-max-digits="4"] > [data-line]::before {
+code[data-line-numbers-max-digits='4'] > [data-line]::before {
   width: 2.25rem;
 }

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

@@ -5,6 +5,12 @@
   opacity: 0.9;
 }
 
+@media (max-width: 40rem) {
+  .post-card {
+    padding: 1.6rem 0.5rem 1.6rem 0.5rem;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   .post-card:hover {
     opacity: 1;

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

@@ -9,16 +9,17 @@
 
 :root {
   --background: #181e3f;
-  --inline-code-bg-color: #3b4683;
   --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-blue-02: rgba(129, 213, 255, 0.2);
   --light-yellow: #ffffb4;
+  --yellow: #ffff5c;
   --body-font-family: "Merriweather Sans Light";
-  --body-font-size: 1.1rem;
+  --body-font-size: 1rem;
   --border-radius: 0.5rem;
   --primary-box-shadow: inset 0 0 0 0.1rem var(--light-blue-05);
   --h1-color: rgb(241, 241, 241);
@@ -30,7 +31,7 @@ a:link,
 a:visited {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  color: var(--light-yellow);
+  color: var(--yellow);
 }
 
 html,

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

@@ -3,6 +3,12 @@
   margin-top: 1.25rem;
 }
 
+@media (max-width: 40rem) {
+  .post {
+    padding: 1.6rem 0.5rem 1.6rem 0.5rem;
+  }
+}
+
 .post p {
   font-family: var(--body-font-family);
   font-size: var(--body-font-size);
@@ -14,12 +20,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 +35,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blazed-past-us",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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",
@@ -36,6 +36,7 @@
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
+    "remark-inline-svg-flex": "^0.3.4",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unist-util-visit": "^5.1.0"