ساختار پروژه

این ریپوزیتوری شامل ساختار و کدهای فرانت‌اند قالب وردپرس پروژه است که با Vite، HTML، CSS و JavaScript توسعه داده می‌شود.

درباره پروژه

این ریپوزیتوری بخش فرانت‌اند قالب وردپرس پروژه اصلی است. اینجا تمام طراحی‌ها، کامپوننت‌ها و assetها با استفاده از Vite توسعه داده می‌شود.

پیش‌نیازها

• Node.js 18+
• npm 10+
• Git
• Visual Studio Code
• Prettier(extention)

نصب و اجرا

npm run dev

# کلون کردن پروژه
git clone <git url> 

# ورود به پوشه
cd inova-frontend

# نصب وابستگی‌ها
npm install

# اجرای محیط توسعه
npm run dev

ساختار فایل ها

• پوشه assets:

فایل آیکون‌ها در این بخش قرار داده شده است تمامی ایکون های استفاده شده در این پروژه باید در این فایل تعریف شوند و برای صفحات مختلف فایل آیکون مجزا نخواهیم داشت.

• ساختار آیکون هاicons.svg:

آیکون ها بصورت SVG Symbol ایجاد و استفاده می شوند تمام آیکون‌ها icons.svg در فایل src/assets/icons/icons.svg نگهداری می‌شوند و در html با دستور زیراستفاده می شوند

<svg aria-hidden="true">
    <use href="./src/assets/icons/svgicon.svg#<svgID>"/>
</svg>

• پوشه components:

ساختارهای تکرارشونده در فولدر components قرار داده شده است . و سکشن و یا بخش هایی که در صفحات مختلف پروژه تکرار شده اند در این بخش تعریف شده و برای جلوگیری از تکرار کد در صفحات مختلف فراخوانی شده و استفاده می شوند ،مثل پیجینیشن و اسلایدر و ....

این بخش از قبل توسط تیم توسعه در این فایل ایجاد شده است

• پوشه core:

تمام متغیرها، رنگ‌ها، فونت‌ها، فاصله‌ها و استایل‌های پایه پروژه در این فایل قرار دارند این فایل با توجه به طراحی هر پروژه (Figma) سفارشی می‌شود. این بخش برای کل پروژه تعریف شده و استفاده می شود و برای هر صفحه نباید بطور جدا تعریف شود

• پوشه layouts:

در این بخش لیوت هایی که در پروژه داریم قرار داده می شود، مثل فوتر و هدر و...

• پوشه pages :

در این بخش کدهای صفحات مختلف به تفکیک توسعه داده می شود. هر صفحه یک پوشه ی جدا دارد که شامل فایل html - css- js و عکس های مربوط به هر صفحه می باشد نام هر پوشه، نام همان صفحه می باشد و نام فایل های html - css - js هم باید هم نام با صفحه ی در حال توسعه باشد

برای مثال فایل های صفحه homepage به شرح زیر می باشد

-pages
  --homepage
    ---assets
      ----css
         homepage.css
      ----images
      ----js
         homepage.js
      ----videos   
     homepage.html

• ساختار css :

کدهای CSS در دو فایل مجزا ایجاد می شود و کدهای مربوط به ریسپانسیو در فایل responsive.css ایجاد می شود

• پوشه utils:

  در این بخش فانکشن هایی که در کل پروژه استفاده می شود قرار داده شده تا از تکرار کد جلوگیری شود مثل فانکشن ismobile برای تشخیص اندازه ی موبایل و اعمال موردی خاص در آن اندازه

• فرمت تصاویر :

تصاویر با فرمت webp در پروژه استفاده شود تصاویر هر صفحه باید در پوشه ی مربوط به همان صفحه قرار داده شود برای مثال در صفحه ی homepage تصاویر باید در ادرس زیر قرار بگیرند src/pages/homepage/assets/images/image1.webp

و آیکون ها بصورت svg طبق ساختاری که بالاتر توضیح داده شد اعمال شوند

• قوانین نامگذاری کلاس ها : برای جلوگیری از تداخل نام کلاس ها در پروژه موارد زیر را رعایت کنید: 1- برای نامگذاری همه ی کلاس های یک سکشن ، نام آن سکشن را در نامگذاری داشته باشید

hero-section__title

2- از نام گذاری های جنرال بپرهیزید

btn- txt - title و....

• محدودیت ها و قوانین:

1- از cdn ها و یا کتابخانه ها در پیاده سازی استفاده نشود و همه ی موارد در local پیاده سازی شود

2- کد باید بصورتی توسعه داده شود که دقیقا مشابه فایل (فیگا) باشد

3- چک لیست نهایی:

بعد از اتمام کار قبل از تحویل نهایی ، از همه ی جوانب اعم از رفتار سکشن ها، اندازه ی فونت ها، رنگ ها ، فاصله ها و... فایل را بطور کامل بررسی کنید و در صورت مغایرت با فیگمااطلاحات لازم انجام شود

4- برای این پروژه یک ریپازیتوری در گیت تعریف شده است در هنگام push کردن کد بر روی گیت حتما چک شود که بر روی برنچی که در اختیارتان قرار گرفته push انجام شود برای مشاهده ی برنچ فعال روی سیستم خود در ترمینال دستور زیر را وارد کنید

git branch --show-current