Quiet Flame Essays, notes, and careful work

Mixed language post

Component Showcase for Quiet Flame

A single post that demonstrates every custom writing component currently available in the blog.

March 30, 2026 3 min read

This page is a working reference post. Its job is simple: show every custom component in the site in one place so we can review spacing, hierarchy, tone, and edge cases together.

Quotes and emphasis

The best component libraries disappear into the writing when they are working well.

The goal is not to have many components. The goal is to have a few components that make difficult kinds of writing feel natural.

Showcase note
Open the behind-the-scenes note

This post intentionally includes a lot of UI in a small space. In normal writing, most of these components should be used much more selectively.

Structured writing blocks

  1. Foundation

    Tokens, layout, content model

    The site starts by deciding what kinds of content it wants to support and how those pieces should look together.

  2. Authoring layer

    MDX and reusable blocks

    The next step is making hard-to-format ideas easier to express without hand-rolling layout every time.

  3. Refinement

    Motion, polish, and rhythm

    Once the content system is stable, we can tune the emotional feel of the site with much smaller decisions.

  1. Write the core idea first

    Start with the argument or reflection before choosing any specialized component.

  2. Add structure where it clarifies

    Use timelines, callouts, or definitions only when they make the writing easier to read.

  3. Build and review the page

    Always check the result in the browser and in a production build before considering it finished.

Pros

  • Complex ideas become easier to scan.
  • Recurring content patterns look consistent.
  • Writers can focus on meaning instead of redoing layout by hand.

Cons

  • A component can become distracting if overused.
  • Not every paragraph deserves a special treatment.
Lead
A stronger opening paragraph that establishes tone or stakes.
Series
An ordered reading path that groups related posts intentionally.
Mixed language post
A post that contains both English and Arabic content in the same document.
23 custom components currently available
1 showcase post reviewing them all
100% chance this page should feel calmer than a docs sandbox

Images and media

Warm editorial placeholder illustration with orange and moss shapes
Figure component with a local SVG image and caption

Code and technical content

Content collection excerpt TypeScript 
const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    series: z.string().optional(),
  }),
});
src/
  content/
    blog/
      component-showcase.mdx
  components/
    content/
    islamic/
  lib/
    mdx-components.ts
flowchart LR A[Write post in MDX] --> B[Preview in dev] B --> C[Run production build] C --> D[Search index updates] D --> E[Publish]
A simple publishing flow for a single post

Arabic and translation support

السَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللَّهِ وَبَرَكَاتُهُ

Peace be upon you, and the mercy of God, and His blessings.

Ayah Surah Al-Inshirah 94:5-6

فَإِنَّ مَعَ الْعُسْرِ يُسْرًا ۝ إِنَّ مَعَ الْعُسْرِ يُسْرًا

So, surely with hardship comes ease. Surely with that hardship comes more ease.

Hadith Sahih al-Bukhari 1

إِنَّمَا الأَعْمَالُ بِالنِّيَّاتِ

Actions are judged by intentions.

Dua

رَبِّ زِدْنِي عِلْمًا

My Lord, increase me in knowledge.

اللُّغَةُ بَيْتُ الْمَعْنَى Language is the house of meaning.

سكينة sakinah

stillness, calm reassurance, inward settling

Final note

If a component feels too ornamental, too boxed in, too documentation-like, or too detached from the warm editorial system, this post should make that clear quickly. That is exactly what it is here for.

Related Reading

Back to top