site

Personal website of @naiyerasif

Development

• To launch the development server, run pnpm dev
• To generate a production build, run pnpm build
• To update dependencies interactively, run pnpm update --interactive --latest

Authoring

• To create a new post, run pnpm new

Spellcheck

Vale enforces the spellcheck and prose styling of this blog.

• To verify a prose, run vale <path>
• To sync packages and styles, run vale sync

Custom markdown directives

The following custom directives are supported.

Figure directive

The following directive

:::figure
![a short description of the information an image conveys](./image.png)

Captions are brief descriptions related to the image (for example commentary, attributions or quotations).
:::

gets converted to

<figure class="figure">
  <img src="./image.png" alt="a short description of the information an image conveys">
  <figcaption>
    <p>Captions are brief descriptions related to the image (for example commentary, attributions or quotations).</p>
  </figcaption>
</figure>

Specify a .frame class on the figure directive (with :::figure{.frame}) to add a border and shadow to the image.

Time directive

The following directive

:time{datetime="2024-01-14T05:12:48.000Z"}

gets converted to

<time datetime="2024-01-14T05:12:48.000Z">Jan 14, 2024</time>

Youtube directive

Youtube directive has two output variants: client (for the website) and server (for the RSS feeds)

The following directive

::youtube[What is Git LFS?]{#9gaTargV5BY}

gets converted to the following HTML for the website.

<figure id="9gaTargV5BY" class="directive-youtube">
  <div class="directive-youtube-iframe-container">
    <lite-youtube class="directive-youtube-iframe" videoid="9gaTargV5BY" playlabel="What is Git LFS?" style="background-image: url(&quot;https://i.ytimg.com/vi/9gaTargV5BY/hqdefault.jpg&quot;);">
      <button type="button" class="lty-playbtn">
        <span class="lyt-visually-hidden">What is Git LFS?</span>
      </button>
    </lite-youtube>
  </div>
  <figcaption>What is Git LFS?</figcaption>
</figure>

It gets converted to the following HTML for the RSS feeds.

<figure id="9gaTargV5BY">
  <iframe src="https://www.youtube-nocookie.com/embed/9gaTargV5BY" allow="join-ad-interest-group &#x27;none&#x27;; run-ad-auction &#x27;none&#x27;; encrypted-media; picture-in-picture; fullscreen" loading="lazy" title="What is Git LFS?"></iframe>
  <figcaption>What is Git LFS?</figcaption>
</figure>

Audits

• To launch a full lighthouse audit, run pnpm lighthouse

Additional audits

• Blacklight Privacy Inspection
• Mozilla Observatory
• Website Carbon Report

Contributing

Since this is my personal site, I'm not really looking for feature requests. I'd, however, appreciate bug reports and corrections. Please create an issue on accessibility, browser rendering inconsistencies, performance bottlenecks, and general usability criticism.

License

The source code of this site is available under MPL-2.0, the content under CC BY-SA 4.0.

---

Previous versions

• v3 (built with Astro and web components)
• v2 (built with Lume and Alpine.js)
• v1 (built with Gridsome and Vue 2)