ডেভসংকেত

Astro JS জাভাস্ক্রিপ্ট ফ্রেমওয়ার্রক

Astro JS জাভাস্ক্রিপ্ট ফ্রেমওয়ার্রক এর চিটশিট। যা একটি স্ট্যাটিক এইচটিএমএল এবং কম জাভাস্ক্রিপ্ট প্রিয় ফ্রেমওয়ার্রক

কন্ট্রিবিউটর

  • 0xMahabub

শেয়ার করুন

ইন্সটলেশন

  • নতুন এস্ট্রো প্রজেক্ট বানান

  • npm create [email protected]
  • yarn create astro
  • pnpm create [email protected]
  • এস্ট্রোজেএস প্রজেক্ট আপডেট করুন

  • npm upgrade astro
  • yarn upgrade astro
  • pnpm upgrade astro
  • প্রজেক্ট রান করে দেখুন

  • npm run dev
  • yarn run dev
  • pnpm run dev

কিছু প্রয়োজনীয় সেটাআপ সমুহ

  • প্রিটিয়ার সেটআপ করুন

  • npm install --save-dev prettier prettier-plugin-astro
  • তারপর এই কমান্ডটি প্যাকেজ এর স্ক্রিপ্ট এ যোগ করুন

  • prettier --write .
  • ইএসলিন্ট সেটআপ করুন

  • npm install --save-dev eslint eslint-plugin-astro
  • npm install --save-dev eslint-plugin-jsx-a11y
  • টাইপস্ক্রিপ্ট সেটআপ করুন

  • এটি tsconfig.json ফাইলে এড করুন

  • {
    	"extends": "astro/tsconfigs/base"
    }
  • আবার env.d.ts ফাইল এ এড করুন

  • /// <reference types="astro/client" />

কম্পোনেন্ট সমূহকে হাইড্রেট করানো

  • পেজ লোড হওয়ার সময় লোড করা

    <Component client:load />
  • যখন পেজ লোড হবে তারপর লোড করা

    <Component client:idle />
  • সব কন্ডিশনে লোড করার জন্য

    <Component client:visible />
  • সিএসএস মিডিয়া কুয়েরি অনুযায়ি

    <Component client:media="{max-width: 50em}" />

ভিএসকোড সেটআপ এবং অন্যান্য

  • ভিএসকোড ওপেন করে Crtl+P চাপুন, এটি বসিয়ে Enter press করুন

  • ext install astro-build.astro-vscode
  • এস্ট্রোজেএস এর এক্সটেনশোন

    .astro
  • প্রজেক্টের সোর্সকোড

    src/*
  • প্রজেক্টের কনফিগারেশন ফাইল

    astro.config.mjs

যেসব UI ফ্রেমওয়ার্ক ইন্টিগ্রেট করতে পারবেন

  • React
  • Preact
  • Svelte
  • Vue
  • SolidJS
  • AplineJS
  • Lit

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর