<link>https://fehac.dev/en/</link></image><item><title>About</h1> <article> <h1>About</h1> <p>Sat, 08 Aug 2026 00:00:00 +0000</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" > </div> </div></figure> </p> <p>I’m <strong>Felipe Cardoso</strong>, a Brazilian software engineer. I live in Tokyo and have been working on backend, cloud infrastructure and distributed systems since 2018, along a path that runs through a bank, a consultancy, a global brewer and, now, an electric mobility startup.</p> <p>I like owning a whole system: understanding the problem, deciding the architecture, writing the code, shipping it and answering for it when it breaks. Language, database and cloud choices come after the problem, never before.</p> <h2 id="why-this-blog-exists">Why this blog exists</h2> <p>To share what I learn and what I think about software engineering and technology. The technical posts come out of what I am actually building, including the parts that went wrong and rarely show up when only the final version gets told. The rest is opinion: how we build software, what is worth doing and what is just fashion.</p> <p>I write in Portuguese, English and Japanese. Comments are anonymous by default, because disagreeing with me should not require an account anywhere.</p> <p><strong>The opinions published here are my own.</strong> They do not represent or necessarily reflect the positions of the companies I work for or have worked for, or those of their customers.</p> <h2 id="what-i-am-doing-now">What I am doing now</h2> <p>I’m a backend and infrastructure engineer at <strong>eMotion Fleet</strong>, a Tokyo startup building fleet and energy management software for electric bus operators in Japan, including Nishitetsu and Nagasaki Bus.</p> <p>The heart of the product is a real-time decision problem: how much power to send to each bus plugged in at the depot, without blowing past the contracted energy limit, while making sure every vehicle leaves on schedule with enough charge. In my first month I proposed an AI model for that problem and built the prototype that became the platform’s core decision engine, the same engine that helped the company pass its first customer acceptance test and reach its first production go-live in September 2025.</p> <p>Beyond the engine, I look after the AWS platform, lead product streams from design to delivery and handle production incidents.</p> <h2 id="where-i-have-been">Where I have been</h2> <p><strong>AB InBev, 2022 to 2024.</strong> I worked on BEES, the B2B commerce platform with over 1.5 million users and $49 billion moving through it every year. I built microservices for the rewards program, which reached 2.3 million members with an NPS of +64, and the reusable Terraform and Terragrunt infrastructure behind the company-wide migration from AWS to Azure. On the eve of the South Africa launch, I fixed the production issues that were threatening the date.</p> <p><strong>Itaú Unibanco, 2019 to 2022.</strong> I finished there as tech lead on a pricing platform, leading three developers: corporate price negotiations that used to depend on spreadsheets and take hours dropped to minutes, with the calculations and client-level profitability analysis automated in C# and ASP.NET Core and the interface built in Angular. Before that, in fraud prevention, I mined historical patterns with Python, SAS and Power BI and implemented T-SQL detection rules that helped cut debit-card fraud by about 12%.</p> <p><strong>SAS, 2018 to 2019.</strong> Data engineering consulting: anti-corruption corporate-card analytics for Vale and nationwide fuel supply and demand forecasting for Raízen’s station network.</p> <h2 id="education">Education</h2> <ul> <li><strong>PUC Minas</strong>, Postgraduate Degree in Distributed Software Architecture (2024-2025)</li> <li><strong>Universidade Federal do ABC</strong>, BTech in Computer Science (2018-2023)</li> <li><strong>Universidade Federal do ABC</strong>, BS in Science and Technology (2018-2023)</li> </ul> <h2 id="contact">Contact</h2> <p>I’m open to remote roles with globally distributed teams.</p> <ul> <li>Email: </li> <li>LinkedIn: </li> <li>GitHub: </li> </ul> </article> <article> <h1>What this blog can render</h1> <p>Sat, 08 Aug 2026 00:00:00 +0000</p> <p>A reference for my future self. Everything below is verified against the theme’s own source, not guessed from documentation. Each section shows the markup and the thing it produces.</p> <h2 id="callouts">Callouts</h2> <p>GitHub / Obsidian alert syntax. Five types: <code>NOTE</code>, <code>TIP</code>, <code>IMPORTANT</code>, <code>WARNING</code>, <code>CAUTION</code>. Append <code>+ Some Title</code> for a custom heading.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!NOTE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Plain note. </span></span></span><span class="line"><span class="cl"><span class="k"> </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!WARNING] Careful with this one </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">A warning with a custom title. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Plain note.</p></div> </div> </div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6 6 0 0 0 1.5-.189m-1.5.189a6 6 0 0 1-1.5-.189m3.75 7.478a12.1 12.1 0 0 1-4.5 0m3.75 2.383a14.4 14.4 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Tip</div> <div class="callout-body"><p>Tips look like this.</p></div> </div> </div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500" data-callout="warning" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Careful with this one</div> <div class="callout-body"><p>A warning with a custom title.</p></div> </div> </div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500" data-callout="caution" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Caution</div> <div class="callout-body"><p>The strongest one.</p></div> </div> </div> <p>There is also a <code>{{< callout >}}</code> shortcode, but the theme marks it <strong>deprecated</strong> in favour of the syntax above. Don’t use it.</p> <h2 id="mermaid">Mermaid</h2> <p>Fenced block with <code>mermaid</code> as the language. The script only loads on pages that actually contain one.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="s">```mermaid </span></span></span><span class="line"><span class="cl">sequenceDiagram </span></span><span class="line"><span class="cl"> Browser->>Pages: GET /en/blog/ </span></span><span class="line"><span class="cl"> Pages-->>Browser: static HTML </span></span><span class="line"><span class="cl"> Browser->>Remark42: GET /api/v1/find </span></span><span class="line"><span class="cl"><span class="s">```</span> </span></span></code></pre></div><div class="mermaid">sequenceDiagram autonumber participant B as Browser participant P as Cloudflare Pages participant R as Remark42 (VPS) B->>P: GET /en/blog/capabilities/ P-->>B: static HTML + embed.js B->>R: GET /api/v1/find?site=blog R-->>B: comments JSON Note over B,R: anonymous, no account needed </div> <p>Flowcharts work too:</p> <div class="mermaid">flowchart LR A[git push] --> B{branch?} B -->|main| C[production build] B -->|other| D[preview deploy] C --> E[fehac.dev] D --> F[*.pages.dev] </div> <h2 id="markmap">Markmap</h2> <p>Mind maps from a nested list. Takes a <code>height</code> attribute.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">``<span class="sb">`markmap {height="300px"} </span></span></span><span class="line"><span class="cl"><span class="sb">- Root </span></span></span><span class="line"><span class="cl"><span class="sb"> - Branch </span></span></span><span class="line"><span class="cl"><span class="sb"> - Leaf </span></span></span><span class="line"><span class="cl"><span class="sb">`</span>`` </span></span></code></pre></div><div class="markmap" style="height: 420px;"> <pre>- Backend - Services - APIs - Event-driven - Data - PostgreSQL - MongoDB - Infrastructure - AWS - CDK - CloudFormation - Azure - Terraform - Practice - CI/CD - Observability - Incident response</pre> </div> <h2 id="math">Math</h2> <p>KaTeX. Loads when the page has <code>math: true</code> in front matter, a <code>math</code> shortcode, or the site-wide flag. Inline with <code>$...$</code>, display with <code>$$...$$</code>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">Inline: $O(n \log n)$ </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">$$ </span></span><span class="line"><span class="cl">p_{99} = \inf\{x : F(x) \ge 0.99\} </span></span><span class="line"><span class="cl">$$ </span></span></code></pre></div><p>Inline: $O(n \log n)$ is the bound.</p> $$ p_{99} = \inf\{x : F(x) \ge 0.99\} $$<h2 id="code">Code</h2> <p>Standard fenced blocks, highlighted by Hugo’s built-in Chroma. Line numbers are off by default site-wide but can be turned on per block.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">``<span class="sb">`python {linenos=true, hl_lines=[2]} </span></span></span><span class="line"><span class="cl"><span class="sb">def charge(rate_kw: float) -> float: </span></span></span><span class="line"><span class="cl"><span class="sb"> return min(rate_kw, MAX_KW) </span></span></span><span class="line"><span class="cl"><span class="sb">`</span>`` </span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="ln">1</span><span class="cl"><span class="k">def</span> <span class="nf">charge</span><span class="p">(</span><span class="n">rate_kw</span><span class="p">:</span> <span class="nb">float</span><span class="p">)</span> <span class="o">-></span> <span class="nb">float</span><span class="p">:</span> </span></span><span class="line hl"><span class="ln">2</span><span class="cl"> <span class="k">return</span> <span class="nb">min</span><span class="p">(</span><span class="n">rate_kw</span><span class="p">,</span> <span class="n">MAX_KW</span><span class="p">)</span> <span class="c1"># clamp to the connector limit</span> </span></span></code></pre></div><h2 id="steps">Steps</h2> <p>Wrap <code>###</code> headings. Each becomes a numbered step.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< steps >}} </span></span><span class="line"><span class="cl"><span class="gu">### First thing </span></span></span><span class="line"><span class="cl">Do this. </span></span><span class="line"><span class="cl"><span class="gu">### Second thing </span></span></span><span class="line"><span class="cl">Then this. </span></span><span class="line"><span class="cl">{{< /steps >}} </span></span></code></pre></div><div class="hb-steps"> ### Provision DNS An `A` record has to resolve before certbot will issue anything. ### Issue the certificate `certbot certonly --webroot`, then swap in the TLS vhost. ### Reload, don't restart `nginx -t` first. It refuses a bad config instead of taking the box down. </div> <h2 id="spoilers">Spoilers</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< spoiler text="Click to expand" >}} </span></span><span class="line"><span class="cl">Hidden content. </span></span><span class="line"><span class="cl">{{< /spoiler >}} </span></span></code></pre></div><details class="spoiler " id="spoiler-1"> <summary class="cursor-pointer">Why the comment server is not on Cloudflare</summary> <div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"> Pages is static hosting. Remark42 is a stateful Go process with an embedded BoltDB, so it needs a real host. It runs on my VPS behind nginx, bound to loopback only. </div> </details> <h2 id="buttons">Buttons</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< button url="/en/about/" >}}About me{{< /button >}} </span></span></code></pre></div> <div class="text-left"> <a id="button-db7ad9c7301f40597206b33fcdb455e1" href="https://fehac.dev/en/about/" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="About me" > <span>About me</span> </a> </div> <h2 id="charts">Charts</h2> <p>Plotly. Point <code>data</code> at a JSON file in the page folder, without the extension. Here <code>demo-chart.json</code> sits next to this <code>index.md</code>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< chart data="demo-chart" >}} </span></span></code></pre></div> <div id="chart-817932465" class="chart"></div> <script> (function() { async function fetchChartJSON() { console.debug('Hugo Blox fetching chart JSON...') const response = await fetch('.\/demo-chart.json'); return await response.json(); } let a = setInterval( function() { if ( typeof window.Plotly === 'undefined' ) { console.debug('Plotly not loaded yet...') return; } clearInterval( a ); fetchChartJSON().then(chart => { console.debug('Plotting chart...') window.Plotly.newPlot('chart-817932465', chart.data, chart.layout, {responsive: true}); }); }, 500 ); })(); </script> <h2 id="csv-tables">CSV tables</h2> <p>Same idea: a <code>.csv</code> in the page folder. Note the parameter is <code>path</code>, not <code>src</code>. The shortcode’s own docstring says <code>src</code>, but the code reads <code>.Get "path"</code>. Using <code>src</code> fails the build with a nil-pointer error.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< table path="demo-table.csv" caption="Latency by service" >}} </span></span></code></pre></div> <table class="table-auto w-full"> <tbody> <tr> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">service</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">language</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">p99_ms</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">error_rate</td> </tr> <tr> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">charging-engine</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">Python</td> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">63</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.02</td> </tr> <tr> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">telemetry-ingest</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">Python</td> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">148</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.11</td> </tr> <tr> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">fleet-api</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">TypeScript</td> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">41</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.01</td> </tr> </tbody> <caption class="table-caption">Latency by service</caption> </table> <p>Regular Markdown tables also work:</p> <table> <thead> <tr> <th>Feature</th> <th>Supported</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Mermaid</td> <td>yes</td> <td>lazy-loaded per page</td> </tr> <tr> <td>Markmap</td> <td>yes</td> <td><code>height</code> attribute</td> </tr> <tr> <td>PlantUML</td> <td><strong>no</strong></td> <td>see below</td> </tr> </tbody> </table> <h2 id="images">Images</h2> <p>Plain Markdown. The render hook looks in the page folder first, then in <code>assets/media/</code>, and emits a responsive <code>srcset</code> with generated sizes.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Alt text</span>](<span class="na">authors/me.webp</span>) </span></span></code></pre></div><h2 id="video-and-audio">Video and audio</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< video src="clip.mp4" controls="yes" >}} </span></span><span class="line"><span class="cl">{{< audio src="episode.mp3" >}} </span></span></code></pre></div><p>Both resolve the page folder first, then <code>assets/media/</code>, then a remote URL.</p> <h2 id="icons">Icons</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< icon name="brands/github" >}} inline in a sentence. </span></span></code></pre></div><p> <span class="inline-block pr-1"> <svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </span> inline in a sentence.</p> <h2 id="jupyter-notebooks">Jupyter notebooks</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< notebook path="analysis.ipynb" >}} </span></span></code></pre></div><p>Renders an <code>.ipynb</code> inline, useful for the data-heavy posts.</p> <h2 id="includes">Includes</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< include "snippets/shared-warning.md" >}} </span></span></code></pre></div><p>Pulls another Markdown file in, path relative to <code>content/</code>.</p> <h2 id="what-is-not-supported">What is <em>not</em> supported</h2> <p><strong>PlantUML.</strong> There is no PlantUML render hook or script anywhere in this theme. I checked the layouts and the JS bundle. Options if I ever need it:</p> <ol> <li>Use Mermaid instead. It covers sequence, flowchart, class, state, ER, and Gantt, which is most of what PlantUML gets used for.</li> <li>Render the <code>.puml</code> to SVG offline and commit the SVG, then embed it as a normal image. No build-time dependency, no external server.</li> </ol> <p>A PlantUML render hook would be maybe twenty lines in <code>layouts/_markup/render-codeblock-plantuml.html</code>, but it would have to call out to a rendering server at build time, which is why I’d rather not.</p> <h2 id="front-matter-that-matters">Front matter that matters</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"Post title"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">summary</span><span class="p">:</span><span class="w"> </span><span class="s2">"Shown in listings and meta description."</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2026-08-08</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">translationKey</span><span class="p">:</span><span class="w"> </span><span class="l">some-key </span><span class="w"> </span><span class="c"># links the pt/en/ja versions together</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">authors</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">me]</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">tags</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">meta, markdown]</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">math</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="c"># load KaTeX on this page</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">commentable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="c"># inherited from blog/_index.md already</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><p><code>translationKey</code> is the important one: it is what makes the language switcher jump to the same article instead of the homepage.</p> </article> </main></body></html>