diff --git a/.eleventy.js b/.eleventy.js index b6224980..ced21707 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,25 @@ 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()); @@ -6,6 +27,13 @@ module.exports = (eleventyConfig) => { 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 || ""; }; diff --git a/README.md b/README.md index aab461ad..c9897f65 100644 --- a/README.md +++ b/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 `` or + `` by hand. - **`role`**: Keep it short and clear (e.g., "Full Stack Developer", "DevOps Engineer") ### 📚 Real Examples diff --git a/package.json b/package.json index f7907ae5..24b241af 100644 --- a/package.json +++ b/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", diff --git a/src/_includes/bio.njk b/src/_includes/bio.njk index f524403a..79aa1723 100644 --- a/src/_includes/bio.njk +++ b/src/_includes/bio.njk @@ -69,8 +69,8 @@ layout: layouts/base.njk

Professional Bio

-
- {{ bio }} +
+ {{ bio | markdown | safe }}
{% endif %} diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 37d9e95f..53711797 100644 --- a/src/_includes/layouts/base.njk +++ b/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', ' ') diff --git a/src/assets/css/style.css b/src/assets/css/style.css index c7377acb..811758f7 100644 --- a/src/assets/css/style.css +++ b/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; diff --git a/src/users/kenhorlador.yaml b/src/users/kenhorlador.yaml index 27baf2fb..b49e117a 100644 --- a/src/users/kenhorlador.yaml +++ b/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
ReactJS with GatsbyJS or NextJS. 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 Camarines Sur Polytechnic Colleges. + Currently taking Bachelor of Science in Computer Science at [Camarines Sur Polytechnic Colleges](https://cspc.edu.ph/). - Former Layout Artist at The USI-Façade | The Official Student Publication of Universidad de Sta. Isabel [ 2019 - 2020 ] + 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 TheSpark | The Official Student-Community Publication of Camarines Sur Polytechnic Colleges [ 2020 - Present ] + 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: INTJ ( Introverted, Intuitive, Thinking, Judging ) + Personality type: **INTJ** ( Introverted, Intuitive, Thinking, Judging ) - Pronouns: He/Him/His + Pronouns: **He/Him/His**