ডেটা থেকে পেইজ: JSON আর Markdown

মেনুর লিংক, প্রশ্নোত্তর বা ব্লগের লেখা HTML-এর ভেতরে লিখলে কিছু বদলাতে গেলেই টেমপ্লেট খুলে বদলাতে হয়। আলোতে এগুলো থাকে data/ ফোল্ডারে, আর সব পেইজ, লেআউট আর কম্পোনেন্টে পাওয়া যায় data নামে।

একটি JSON ফাইল

data/menu.json:

[
    { "href": "/", "label": "হোম" },
    { "href": "/blog/", "label": "ব্লগ" }
]

এটি পাওয়া যায় data.menu-তে। লুপ চালান <template for> দিয়ে:

<nav>
    <template for="link in data.menu">
        <a href="{{ link.href }}">{{ link.label }}</a>
    </template>
</nav>

ফাইলের নামে হাইফেন থাকলে নামটি camelCase হয়ে যায়: data/footer-links.json পাওয়া যায় data.footerLinks-এ।

লেখায় ভর্তি ফোল্ডার

যে ফোল্ডারে শুধু ফাইল থাকে, সেটি হয় একটি অ্যারে। data/blog/-এর প্রতিটি .md বা .json ফাইল data.blog-এর একটি আইটেম। Markdown ফাইলের শুরুতে থাকে ছোট একটি ফ্রন্ট ম্যাটার:

---
title: প্রথম লেখা
tags: [গাইড]
---

এখান থেকে লেখা শুরু।

ফাইলের নাম থেকে আসে আরও দুটি বিষয়। এই লেখার ফাইল 2026-11-06-data-and-markdown.md, তাই এর date হলো "2026-11-06" আর slug হলো "data-and-markdown"। আইটেমগুলো সাজানো থাকে ফাইলের নাম অনুযায়ী, তাই পুরনো লেখা আগে আসে।

প্রতিটি লেখার জন্য একটি পেইজ

pages/blog/[slug]/page.alo একটিই ফাইল, কিন্তু data/blog/-এর প্রতিটি আইটেমের জন্য একটি করে পেইজ বানায়। যেমন এই লেখার ঠিকানা /blog/data-and-markdown/। ভেতরে আইটেমটি পাওয়া যায় item-এ:

<template>
    <article>
        <h1>{{ item.title }}</h1>
        {{{ item.body }}}
    </article>
</template>

{{ }} লেখা বসায় এস্কেপ করে, আর {{{ }}} বসায় হুবহু HTML হিসেবে। Markdown থেকে তৈরি হওয়া body তাই বসে {{{ }}} দিয়ে।

ডেটা শুধু পড়া যায়

data পেইজের ভেতর থেকে বদলানো যায় না। নতুন লেখা আগে দেখাতে data.blog.reverse() লিখলে এরর আসবে; লিখুন data.blog.toReversed(), যা নতুন একটি অ্যারে দেয় আর আসল ডেটা যেমন ছিল তেমন রাখে।

খসড়া

ফ্রন্ট ম্যাটারে draft: true দিলে লেখাটি শুধু node alo dev-এ দেখা যায়, node alo build-এর আউটপুটে আসে না। তাই অসম্পূর্ণ লেখা ভুলে প্রকাশিত হয় না।