fix: v1.2.1: better rendering on most RSS clients

CHANGELOG.md

@@ -15,6 +15,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+## 1.2.1 - 2025-01-25
+
+### Fixed
+
+- Fixing HTML rendering for many clients
+
 ## 1.2.0 - 2024-11-26
 
 ### Added

README.md

@@ -25,22 +25,10 @@ A demo is available at this URL: [Smallblog Demo](https://smallblog-demo.tayzen.
 
 ## Quickstart
 
-### With smallweb
-
-Just copy this command and smallweb will copy the template for you:
-
-```bash
-smallweb create --template=github.com/tayzendev/smallblog-template blog
-```
-
-From this template you should change some settings in the `main.ts` file.
-
-### Without Smallweb
-
-Create a new directory in your smallweb folder, add a `main.tsx` and paste this content in it:
+Create a new directory in your smallweb folder (or in any folder where you want to host the Deno project), add a `main.tsx` and paste this content in it:
 
 ```tsx
-import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.0";
+import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.1";
 
 export default new Smallblog();
 ```
@@ -166,17 +154,7 @@ These new pages are accessible from the navbar (as you can see in the screenshot
 - Cloning this repo: If you want to customize the look and feel of your blog.
 - Using Deno deploy: If you want the most efficient, yet simple deployment of smallblog, you can simply use Deno deploy.
 
-### Method 1: Using Smallweb
-
-Just copy this command and Smallweb will copy the template for you:
-
-```bash
-smallweb create --template=github.com/tayzendev/smallblog-template blog
-```
-
-From this template you should change some settings in the `main.ts` file.
-
-### Method 2: JSR import
+### Method 1: JSR import
 
 1. In your smallweb folder create a new folder (a.k.a. subdomain).
 2. In this folder add a `main.tsx` file
@@ -187,7 +165,7 @@ From this template you should change some settings in the `main.ts` file.
 Minimal `main.tsx` to quick-start a project (as shown above):
 
 ```tsx
-import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.0";
+import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.1";
 
 export default new Smallblog();
 ```
@@ -196,7 +174,7 @@ A `main.tsx` with more parameters:
 
 ```tsx
 import { html } from "hono/html";
-import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.0";
+import { Smallblog } from "jsr:@tayzendev/smallblog@1.2.1";
 
 const customBodyScript = await html`<script
   defer
@@ -217,7 +195,7 @@ export default new Smallblog({
 
 Please refer to the [documentation](https://jsr.io/@tayzendev/smallblog/doc/~/BlogAppOptions) for more details about the parameters.
 
-### Method 3: Cloning the repo
+### Method 2: Cloning the repo
 
 1. Go to your smallweb folder: `cd /path/to/your/smallweb/folder`
 2. Clone the repo with the folder name you want: `git clone https://github.com/TayzenDev/smallblog.git folder_name`
@@ -230,7 +208,7 @@ To help you edit what you want, this is an overview of the code organization:
 - To look at the "business logic", you can check the file `blog.ts`
 - The hono server and blog creation function are located in the `mod.ts`, `server.tsx` and `cli.ts` files.
 
-### Method 4: Deno deploy
+### Method 3: Deno deploy
 
 To install Smallblog using deno deploy, you just have to run `deployctl deploy --prod` in your blog's folder.
 

blog.ts

@@ -125,11 +125,12 @@ export function getRSS(baseUrl: string, articles: Article[]) {
   for (const article of articles) {
     feed.item({
       title: article.title,
-      description: article.html,
+      description: article.metadata.description,
       url: new URL(article.url, baseUrl).href,
       date: article.metadata.date,
       categories: article.metadata.tags,
       author: article.metadata.authors?.join(", "),
+      custom_elements: [{ "content:encoded": article.htmlRss }],
     });
   }
   return feed.xml();
@@ -249,7 +250,9 @@ export class Metadata {
 }
 
 function convertNameToLabel(name: string) {
-  const nameWithoutStartingUnderscore = name.startsWith("_") ? name.slice(1) : name;
+  const nameWithoutStartingUnderscore = name.startsWith("_")
+    ? name.slice(1)
+    : name;
   const nameWithSpace = nameWithoutStartingUnderscore.split("_").join(" ");
   return nameWithSpace.charAt(0).toUpperCase() + nameWithSpace.slice(1);
 }
@@ -269,7 +272,10 @@ function removingTitleFromMD(markdown: string): ClearedMarkdown {
   if (titlePosition === undefined || titlePosition < 0) {
     return { body: markdown };
   }
-  return { title: titleMatched[0].substring(2), body: markdown.substring(titlePosition + titleMatched[0].length) };
+  return {
+    title: titleMatched[0].substring(2),
+    body: markdown.substring(titlePosition + titleMatched[0].length),
+  };
 }
 
 type ParsedMarkdown = {
@@ -296,12 +302,12 @@ function parseMd(
       title,
     };
   }
-  const metadata = new Metadata(filePath, {}, defaultAuthors)
+  const metadata = new Metadata(filePath, {}, defaultAuthors);
   const { title, body } = removingTitleFromMD(markdownData);
   return {
-    metadata ,
+    metadata,
     body: body.trim(),
-    title
+    title,
   };
 }
 
@@ -310,17 +316,32 @@ function customRender(text: string, noLinks: boolean = false) {
     disableHtmlSanitization: true,
     allowIframes: true,
     allowMath: true,
-    liteYTEmbed: true,
+    youtubeHandling: "lite",
+    mermaid: true,
     noLinks,
   });
 }
 
+function rssRender(text: string) {
+  return render(text, {
+    disableHtmlSanitization: true,
+    allowIframes: true,
+    allowMath: false,
+    youtubeHandling: "link",
+    githubSlugger: false,
+    mermaid: false,
+    alerts: false,
+    svgCheckboxes: false,
+  });
+}
+
 export class Article {
   name: string;
   title: string;
   content: string;
   preview: string;
   html: string;
+  htmlRss: string;
   metadata: Metadata;
   url: string;
   timeToReadMinutes: number | string;
@@ -336,16 +357,17 @@ export class Article {
     metadata?: Metadata,
     timeToReadMinutes?: number | string,
   ) {
-    const { metadata: parsedMetadata, body: cleanedContent, title: h1Title } = parseMd(
-      content,
-      path.join(postsFolder, name + ".md"),
-      defaultAuthors,
-    );
+    const {
+      metadata: parsedMetadata,
+      body: cleanedContent,
+      title: h1Title,
+    } = parseMd(content, path.join(postsFolder, name + ".md"), defaultAuthors);
 
     this.metadata = metadata || parsedMetadata;
     this.name = name;
     this.content = content;
-    this.title = title || this.metadata.title || h1Title || convertNameToLabel(name);
+    this.title =
+      title || this.metadata.title || h1Title || convertNameToLabel(name);
     this.preview = this.metadata.preview
       ? customRender(this.metadata.preview, true)
       : customRender(
@@ -355,6 +377,7 @@ export class Article {
           true,
         );
     this.html = html || customRender(cleanedContent);
+    this.htmlRss = rssRender(`# ${this.title}\n\n` + cleanedContent);
     this.url = path.join("/", routeBase, this.name);
     this.timeToReadMinutes =
       timeToReadMinutes || estimateTimeReadingMinutes(cleanedContent);

data/posts/post_test.md

@@ -11,6 +11,8 @@ tags:
 date: 2024-11-26
 ---
 
+This post is used to visualize the render of the markdown syntax if you are in the blog directly. If you are reading this from a RSS reader, the rendering will be simpler to accommodate most readers, so each of the elements will not be the smae.
+
 Esse sit culpa id ut ex in magna incididunt duis sint. Officia do ipsum aliquip
 irure tempor adipisicing. Elit do ipsum fugiat proident irure et in
 reprehenderit commodo excepteur aliquip. Labore mollit et ut enim anim ad

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@tayzendev/smallblog",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "exports": "./mod.ts",
   "imports": {
     "@libs/xml": "jsr:@libs/xml@^6.0.0",
@@ -10,7 +10,7 @@
     "@std/media-types": "jsr:@std/media-types@^1.0.3",
     "@std/path": "jsr:@std/path@^1.0.6",
     "@std/yaml": "jsr:@std/yaml@^1.0.5",
-    "@tayzendev/gfm": "jsr:@tayzendev/gfm@^0.15.26",
+    "@tayzendev/gfm": "jsr:@tayzendev/gfm@^0.16.0",
     "commander": "npm:commander@^12.1.0",
     "hono": "npm:hono@^4.6.3",
     "minisearch": "npm:minisearch@^7.1.0",

templates/style.ts

@@ -6,7 +6,7 @@ export const style = html`
   <style>
     :root {
       --color-text: #bfc7d5;
-      --color-caution-alert: #FF5263;
+      --color-caution-alert: #ff5263;
     }
 
     main {
@@ -472,21 +472,21 @@ export const style = html`
       padding: 0 1em;
     }
 
-    .markdown-body ul:has(input[type="checkbox"]) {
+    .markdown-body ul:has(li[role="checkbox"]) {
       list-style-type: none;
       padding-left: 1em;
     }
 
-    .markdown-body li:has(input[type="checkbox"]) label {
+    .markdown-body li[role="checkbox"] label {
       display: flex;
       align-items: center;
       gap: 0.4em; /* Space between the icon and text */
     }
 
-    .markdown-body li:has(input[type="checkbox"]) svg {
-      width: 1em;
-      height: 1em;
-      vertical-align: middle;
+    .markdown-body li[role="checkbox"] svg {
+      width: 1.1em;
+      height: 1.1em;
+      vertical-align: sub;
     }
 
     .markdown-body table {
@@ -590,7 +590,9 @@ export const style = html`
       box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
     }
 
-    .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
+    .markdown-body
+      .markdown-alert.markdown-alert-caution
+      .markdown-alert-title {
       color: var(--color-caution-alert);
     }