আলাদা উল্লেখ না থাকলে এই পেজের সব কিছু ডিফল্টভাবে চালু থাকে।

লেখকের পরিচয়সহ সাইডবার

বাম বার-এ দেখানো হয় সাইটের ব্র্যান্ড, লেখকের অ্যাভাটার + নাম + বায়ো + সোশ্যাল লিংক, ঐচ্ছিক About HTML ব্লক, নেভ লিংক, সার্চ বাটন এবং থিম টগল। 1024 px এর কম প্রস্থের ভিউপোর্টে এটি একটি স্ট্যাকড টপ বার-এ ভেঙে যায় এবং বায়ো, সোশ্যাল, about এর মতো বিস্তারিত অংশ লুকায়।

অ্যাভাটার, নাম, বায়ো এবং সোশ্যাল আসে আপনার কনফিগের author থেকে। About ব্লক (থাকলে) আসে about.html থেকে।

রিডিং প্রোগ্রেস বার

ভিউপোর্টের উপরে fixed একটি 3 px বার পোস্ট পড়ার সাথে সাথে পূর্ণ হয়। শুধু পোস্ট পেজে রেন্ডার হয়। কোনো কনফিগ নেই।

হোম ম্যাসনরি গ্রিড

প্রথম পোস্টটি ফিচারড (কভার বা gradient সহ পূর্ণ-চওড়া কার্ড)। বাকি পোস্টগুলো ভিউপোর্ট অনুযায়ী 1/2/3 কলাম ম্যাসনরি লেআউটে প্রবাহিত হয়।

cover থাকলে পোস্টটি বড় কার্ড হিসেবে রেন্ডার হয়; না থাকলে কমপ্যাক্ট কার্ড। কভার ছাড়া কার্ডগুলো যেন আলাদা দেখায়, সেজন্য থিম ট্যাগ-হ্যাশ করা gradient বেছে নেয়।

টাইমলাইন

/timeline/ নন-ড্রাফট পোস্টকে মাস অনুযায়ী গ্রুপ করে দেখায়; বামে sticky কলামে বছর/মাসের লেবেল, ডানে কার্ডগুলো একটি রেল দিয়ে সংযুক্ত। IntersectionObserver স্ক্রল করার সময় কার্ডগুলোকে অ্যানিমেট করে।

ট্যাগ ও ক্যাটাগরি

প্রতিটি ট্যাগ এবং ক্যাটাগরির জন্য একই ম্যাসনরি গ্রিডে একটি পেজ তৈরি হয়। /tags/ প্রতিটি ট্যাগ ও তার পোস্ট কাউন্টসহ একটি ইনডেক্সও দেখায়।

সাইডবার থেকে লিংক করতে navbar এ { title: 'Tags', to: '/tags/' } এর মতো এন্ট্রি যোগ করুন।

RSS

প্রতি বিল্ডে rss.xml লেখা হয় static/rss.xml এ। কনফিগ:

blogTheme({
  base: stringbase: 'https://example.com',
  
rss: {
    enabled: boolean;
    limit: number;
    copyright: string;
}rss: {
    enabled: booleanenabled: true, // ডিফল্ট
    limit: numberlimit: 20, // ডিফল্ট
    copyright: stringcopyright: `© ${new 
var Date: DateConstructor
new () => Date (+4 overloads)Date().Date.getFullYear(): number
Gets the year, using local time.getFullYear()} My Blog`,
  },
})

rss: { enabled: false } দিয়ে বন্ধ করুন।

OG ইমেজ

বিল্ড টাইমে Satori + resvg দিয়ে প্রতি পোস্টের Open Graph ইমেজ রেন্ডার করা হয় এবং static/og/<slug>.png এ লেখা হয়। সাইট-ওয়াইড একটি ইমেজ static/og/__home.png এ লেখা হয়।

blogTheme({
  
ogImage: {
    enabled: boolean;
    fontPath: string;
    tagline: string;
}ogImage: {
    enabled: booleanenabled: true, // ডিফল্ট
    fontPath: stringfontPath: '/abs/path/font.ttf', // ডিফল্ট Inter Bold 700
    tagline: stringtagline: 'টাইটেলের নিচে সাবহেড',
  },
})

ইমেজ তৈরি ও রেন্ডারার লোড করা সম্পূর্ণ এড়িয়ে যেতে enabled: false দিন।

resvg রেন্ডারারের জন্য নেটিভ Node.js অ্যাডঅন দরকার, যা StackBlitz WebContainers-এর মতো ব্রাউজার কনটেইনার সমর্থন করে না। থিম রেন্ডারার ইমপোর্ট করার আগে এই সীমাবদ্ধতা যাচাই করে। অ্যাডঅন নিষ্ক্রিয় থাকলে বা রেন্ডারার লোড করা না গেলে থিম সতর্কবার্তা দেখিয়ে OG PNG তৈরি এড়িয়ে যায়; ব্লগ চালু হয় এবং বিদ্যমান ইমেজ অক্ষত থাকে। ডেপ্লয়ের আগে নেটিভ Node.js পরিবেশে হালনাগাদ OG ইমেজ তৈরি করুন।

meta ট্যাগে OG URL পূর্ণ-কোয়ালিফাইড (Facebook এবং বেশিরভাগ ক্রলারের জন্য দরকার) রাখতে base কে সাইটের পূর্ণ URL এ সেট করুন: base: 'https://example.com'।

সার্চ (Pagefind)

⌘K / Ctrl+K সার্চ মডাল খুলে। Pagefind হলো ইনডেক্সার; এটি পোস্ট-বিল্ড স্টেপ হিসেবে রান করুন:

package.json-এ "build": "vite build && pagefind --site dist" কনফিগার করে pnpm build চালান।

dev এ থিম আপনার শেষ বিল্ডের dist/pagefind/ ডিরেক্টরি থেকে /pagefind/ সার্ভ করে, তাই একবার বিল্ড করলেই সার্চ কাজ করবে।

কমেন্ট (Giscus)

giscus.app থেকে ভ্যালু নিয়ে কনফিগে giscus সেট করুন এবং প্রতি পোস্টের নিচে GiscusComments রেন্ডার হবে। থিম স্যুইচ (লাইট/ডার্ক) স্বয়ংক্রিয়ভাবে Giscus iframe এ ফরোয়ার্ড হয়।

সিনট্যাক্স হাইলাইটিং

কোড ব্লক Shiki দিয়ে হাইলাইট হয়। data-theme এর ভিত্তিতে dual থিম স্যুইচ করে। TypeScript হোভার তথ্যের জন্য Twoslash চালু করুন:

blogTheme({
  
highlighter: {
    themeDark: string;
    themeLight: string;
    twoslash: boolean;
}highlighter: {
    themeDark: stringthemeDark: 'night-owl',
    themeLight: stringthemeLight: 'vitesse-light',
    twoslash: booleantwoslash: true,
  },
})

কোড ব্লকে কপি বাটন, ঐচ্ছিক টাইটেল, লাইন নম্বর, লাইন হাইলাইট, diff মার্কার এবং ফোকাস ডিমিং ও আছে — fence সিনট্যাক্স default থিমের সাথেই শেয়ার করা (একই markdown এক্সটেনশন)।

থিম টগল

সাইডবারের সান/মুন বাটন system → dark → light সাইকেল করে। প্রথম বিল্ডে src/app.html এ একটি anti-FOWT স্ক্রিপ্ট inject করা হয় যাতে paint এর আগেই বেছে নেওয়া থিম প্রয়োগ হয়।

অটো-স্ক্যাফোল্ডেড রুট

বিস্তারিত শুরু করা এ আছে। স্ক্যাফোল্ডার শুধু অনুপস্থিত ফাইল লেখে, তাই আপগ্রেডে আপনার কাস্টমাইজেশন নিরাপদ।