feat: see also component

src/articles/otp.mdx

@@ -29,3 +29,5 @@ OTPs are a vital component of Multi-Factor Authentication (MFA), which combines
 ### Sensitive transaction confirmation
 
 For activities that involve sensitive data or significant transactions, such as online banking or making high-value purchases, OTPs serve as a security measure to confirm user consent. Before completing these actions, an OTP is sent to the user's registered contact method, which must be entered to finalize the transaction. This ensures that even if someone gains access to the user’s account, they cannot perform critical actions without the OTP.
+
+<SeeAlso slugs={['totp']} />

src/articles/totp.mdx

@@ -30,3 +30,5 @@ In most cases, a normal OTP is recommended, but in the cases where it is unable
 ## What are the difference between OTP and TOTP?
 
 The main difference is that TOTP is time-based, so it is suitable when the device is not connected to the server. The server can easily send a new passcode to an email address or a phone number, but that requires the email or phone to be online. However, the Authenticator App can stay offline and use "time" to verify the passcode.
+
+<SeeAlso slugs={['otp']} />

src/mdx-components/SeeAlso.astro

@@ -0,0 +1,33 @@
+---
+import { articles } from "../libraries/articles";
+import Ref from "./Ref.astro";
+
+type Props = {
+  /**
+   * The internal slugs of the articles to be displayed in the "See also" section.
+   * They must be valid slugs of articles loaded in the site.
+   * @see {@link articles} for the list of available articles.
+   */
+  slugs: string[];
+};
+
+const { slugs } = Astro.props;
+---
+
+<h2>See also</h2>
+<ul class="list">
+  {
+    slugs.map((slug) => (
+      <li>
+        <Ref slug={slug} />
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  body ul.list {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+</style>

src/pages/[slug].astro

@@ -9,6 +9,7 @@ import BackgroundCells from "../components/BackgroundCells.astro";
 import FancyHr from "../components/FancyHr.astro";
 import Img from "../mdx-components/Img.astro";
 import Ref from "../mdx-components/Ref.astro";
+import SeeAlso from "../mdx-components/SeeAlso.astro";
 
 export async function getStaticPaths() {
   return articles.map(({ slug, ...rest }) => {
@@ -61,7 +62,7 @@ if (!Content) {
           </ul>
         </nav>
         <div class="main-body">
-          <Content components={{ img: Img, Ref }} />
+          <Content components={{ img: Img, Ref, SeeAlso }} />
         </div>
       </div>
     </article>