Render user bios as sanitized Markdown

.eleventy.js

@@ -1,11 +1,39 @@
 const yaml = require("js-yaml");
+const MarkdownIt = require("markdown-it");
+
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true,
+  typographer: false,
+});
+
+const defaultLinkOpen =
+  md.renderer.rules.link_open ||
+  ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
+
+md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+  const href = tokens[idx].attrGet("href") || "";
+  if (/^https?:\/\//i.test(href)) {
+    tokens[idx].attrSet("target", "_blank");
+    tokens[idx].attrSet("rel", "noopener noreferrer");
+  }
+  return defaultLinkOpen(tokens, idx, options, env, self);
+};
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.addShortcode("currentYear", () => new Date().getFullYear());
   eleventyConfig.addFilter("safeJsonLd", (value) => {
     const json = JSON.stringify(value) ?? "null";
     return json.replace(/<\//g, "<\\/");
   });
+  eleventyConfig.addFilter("markdown", (value) =>
+    md.render(String(value ?? "").trim()),
+  );
+  eleventyConfig.addFilter("plainText", (value) => {
+    const rendered = md.renderInline(String(value ?? "").trim());
+    return md.utils.unescapeAll(rendered.replace(/<[^>]*>/g, ""));
+  });
   // Add this line to copy your external assets
   eleventyConfig.addPassthroughCopy("src/assets");
   // 1. Recognize YAML as a template format
@@ -14,9 +42,9 @@ module.exports = (eleventyConfig) => {
   // 2. Define how to process YAML files
   eleventyConfig.addExtension("yaml", {
     key: "yaml",
-    compile: async (inputContent) => {
+    compile: (inputContent) => {
       const data = yaml.load(inputContent);
-      return async () => {
+      return () => {
         // This returns the 'content' for the page (the bio)
         return data.bio || "";
       };

README.md

@@ -215,7 +215,11 @@ git push origin my-feature-branch
 - **`name`**: Use your real name or preferred professional name
 - **`github`**: Must match your actual GitHub username for links to work
 - **`languages`**: Separate with spaces, not commas (e.g., `Python Java Go`)
-- **`bio`**: Use the `|` syntax for multi-line text. Be professional and concise
+- **`bio`**: Use the `|` syntax for multi-line text. Be professional and concise.
+  The bio is rendered as Markdown, so `**bold**`, `_italic_`, `[links](https://...)`,
+  lists, and `code` all work. HTML tags are **not** rendered, they are escaped and
+  shown as plain text, so please use Markdown instead of writing `<strong>` or
+  `<a href="...">` by hand.
 - **`role`**: Keep it short and clear (e.g., "Full Stack Developer", "DevOps Engineer")
 
 ### 📚 Real Examples

package.json

@@ -15,6 +15,7 @@
     "js-yaml": "^5.4.2",
     "lightningcss": "^1.33.0",
     "magic-string": "^1.4.1",
+    "markdown-it": "^14.2.0",
     "mri": "^1.2.0",
     "node-addon-api": "^8.9.2",
     "phaser": "^4.2.1",

src/_includes/bio.njk

@@ -69,8 +69,8 @@ layout: layouts/base.njk
         <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
           <span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Professional Bio
         </h2>
-        <div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
-          {{ bio }}
+        <div class="text-[var(--text-main)] text-lg leading-relaxed bio-content">
+          {{ bio | markdown | safe }}
         </div>
       </div>
       {% endif %}

src/_includes/layouts/base.njk

@@ -6,6 +6,7 @@
   {% set seo = seo or {} %}
   {% if not seo.title and name %}
     {% set seoBioDescription = (bio or "")
+      | plainText
       | replace('\r', ' ')
       | replace('\n', ' ')
       | replace('\t', ' ')

src/assets/css/style.css

@@ -108,6 +108,87 @@ body {
   border-color: var(--accent);
 }
 
+.bio-content p {
+  margin: 0 0 1em;
+}
+
+.bio-content p:last-child {
+  margin-bottom: 0;
+}
+
+.bio-content h1,
+.bio-content h2,
+.bio-content h3,
+.bio-content h4,
+.bio-content h5,
+.bio-content h6 {
+  font-weight: 800;
+  line-height: 1.3;
+  margin: 1.2em 0 0.5em;
+}
+
+.bio-content h1 {
+  font-size: 1.4em;
+}
+
+.bio-content h2 {
+  font-size: 1.25em;
+}
+
+.bio-content h3,
+.bio-content h4,
+.bio-content h5,
+.bio-content h6 {
+  font-size: 1.1em;
+}
+
+.bio-content h1:first-child,
+.bio-content h2:first-child,
+.bio-content h3:first-child {
+  margin-top: 0;
+}
+
+.bio-content ul,
+.bio-content ol {
+  margin: 0 0 1em;
+  padding-left: 1.4em;
+}
+
+.bio-content ul {
+  list-style: disc;
+}
+
+.bio-content ol {
+  list-style: decimal;
+}
+
+.bio-content li {
+  margin-bottom: 0.25em;
+}
+
+.bio-content li > p {
+  margin: 0;
+}
+
+.bio-content a {
+  color: var(--accent);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.bio-content a:hover {
+  opacity: 0.8;
+}
+
+.bio-content code {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.875em;
+  background: var(--bg-footer);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+}
+
 /* If you have a specific button-style profile link */
 .profile-btn {
   background-color: var(--accent-light) !important;

src/users/kenhorlador.yaml

@@ -11,14 +11,14 @@ location: Camarines Sur
 role: Software Engineer / UI/UX Designer / Layout Artist
 languages: c c++ js css3 html5 python3.82+ golang scss typescript
 bio: |
-  I'm **Ken Horlador** from Camarines Sur, Philippines. I enjoy learning programming languages and libraries/frameworks like <a href="https://reactjs.org/">ReactJS</a> with <a href="https://www.gatsbyjs.com/">GatsbyJS</a> or <a href="https://nextjs.org/">NextJS</a>. I also enjoy wireframing, developing user flows, user interface, user experience and design in general.
+  I'm **Ken Horlador** from Camarines Sur, Philippines. I enjoy learning programming languages and libraries/frameworks like [ReactJS](https://reactjs.org/) with [GatsbyJS](https://www.gatsbyjs.com/) or [NextJS](https://nextjs.org/). I also enjoy wireframing, developing user flows, user interface, user experience and design in general.
 
-  Currently taking Bachelor of Science in Computer Science at <a href="https://cspc.edu.ph/">Camarines Sur Polytechnic Colleges.</a>
+  Currently taking Bachelor of Science in Computer Science at [Camarines Sur Polytechnic Colleges](https://cspc.edu.ph/).
 
-  Former Layout Artist at <a href="https://www.facebook.com/theusifacade">The USI-Façade | The Official Student Publication</a> of <a href="https://www.usi.edu.ph/">Universidad de Sta. Isabel</a> <strong>[ 2019 - 2020 ]</strong>
+  Former Layout Artist at [The USI-Façade | The Official Student Publication](https://www.facebook.com/theusifacade) of [Universidad de Sta. Isabel](https://www.usi.edu.ph/) **[ 2019 - 2020 ]**
 
-  Currently working as a Layout Artist at <a href="https://www.facebook.com/thesparkpub">TheSpark | The Official Student-Community Publication</a> of <a href="https://cspc.edu.ph/">Camarines Sur Polytechnic Colleges</a> <strong>[ 2020 - <i>Present</i> ]</strong>
+  Currently working as a Layout Artist at [TheSpark | The Official Student-Community Publication](https://www.facebook.com/thesparkpub) of [Camarines Sur Polytechnic Colleges](https://cspc.edu.ph/) **[ 2020 - _Present_ ]**
 
-  Personality type: <strong>INTJ</strong> ( Introverted, Intuitive, Thinking, Judging )
+  Personality type: **INTJ** ( Introverted, Intuitive, Thinking, Judging )
 
-  Pronouns: <strong>He/Him/His</strong>
+  Pronouns: **He/Him/His**