11tyby

11tyby

منظمة 11TE من الغلاية لتنظيمها وتشغيلها بسرعة. الميزات TypeScript ، دعم JSX الأصلي عبر PEACT ، وحدات CSS مع SASS ، تكوين WebPack محدد جيدًا لـ Great DX ، وجميعها مسبقًا للأداء.

العرض التوضيحي: https://11tyby.netlify.app/

لماذا

الحصول على الإعداد باستخدام الأدوات اللازمة للتعامل مع TypeScript و JSX والواردات الديناميكية و SASS وما إلى ذلك يستغرق وقتًا طويلاً. يحتوي هذا المشروع أيضًا على ترطيب جزئي لتقليل كمية التعليمات البرمجية التي يتم شحنها إلى المستخدمين.

بناء

تم تنظيم المشروع عبر نمط الوحدة ، يتم تجميع الملفات عبر الميزة ، على سبيل المثال ./src/modules/home . يتيح لك هذا إجراء إثبات في المستقبل بشكل أفضل مع نموه ، وتوطين التعليمات البرمجية عند الحاجة. توجد صفحتك *.11ty.tsx ملفات ضمن مجلد الميزات ذات الصلة ، وتصدير خاصية permalink لك لتحديد بنية عنوان URL الخاص بها ، على سبيل المثال:

 module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : '/my-feature/index.html' ,
  } ) ,
} ; 

التصميم

11tyby يأتي مسبقًا مع دعم وحدات CSS و SASS. لديك خياران لاستيراد أنماط ، على الصعيد العالمي أو المترجمة. لتحويل ملف SASS أو CSS login.module.css وحدة CSS ، ستحتاج إلى تطبيق لاحقة .module يمكنك بعد ذلك استيراد هذا مباشرة إلى مكون:

 import style from './login.module.scss' ;

/*[...]*/

function Login ( ) {
  return < form class = { style . form } > /*[...]*/ </ form > ;
}

لاستيراد الأنماط على مستوى العالم ، ما عليك سوى إضافة بيان استيراد غير إرجاع إلى الملف الذي ترغب في تحميله منها ، على سبيل المثال:

 import './global.css' ;

/*[...]*/

لتطبيق ورقة النمط التي تم إنشاؤها على صفحة ، ستحتاج إلى إضافة خاصية cssPath ضمن كائن البيانات الذي تم تصديره من ملفات *.11ty.tsx ، على سبيل المثال:

 function Page ( ) {
  return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    cssPath : 'login/login.11ty.css' , // <----
  } ) ,
} ;

سوف يتطابق المسار مع مجلد الوحدة النمطية المعنية ، وسيعكس الاسم اسم ملف *.11ty.tsx ولكن مع امتداد CSS.

ترطيب

يتضمن 11Tyby حزمة مخصصة لتطبيق الترطيب الجزئي. هذا يعمل كمخصص ، ولف المكون الذي ترغب في ترطيبه على العميل. يمكنك تطبيق هذا على النحو التالي:

 import { define } from 'preactement' ;

/*[...]*/

function MainForm ( ) {
  return < form > /*[...]*/ </ form > ;
}

/*[...]*/

const Form = define ( 'main-form' , ( ) => MainForm ) ;

/*[...]*/

export { Form } ;

يوصى بإنشاء مكونات داخل المجلد الخاص بهم ، وتطبيق هذه الوظيفة في ملف index.ts داخل. وبهذه الطريقة ، يمكنك فصل أي "تحويل" قد يحتاجه المكون في وقت التشغيل مع المكون نفسه ، يمكنك رؤية مثال هنا.

بمجرد أن يكون لديك مكون رطب ، ستحتاج إلى استيراده إلى ملف "إدخال". هذه اللاحقة ./src/home/home.entry.ts .entry

يحتاج ملف الدخول إلى استيراد مكوناتك المائية ، على سبيل المثال:

 import '@/modules/home/components/form' ;

ثم يتم الرجوع إلى هذا الملف داخل ملف *.11ty.tsx الخاص بك عن طريق تمريره إلى كائن data الذي تم تصديره من المكون الخاص بك ، على سبيل المثال:

 /*[...]*/
function Page ( ) {
  return < main > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    jsPath : 'home/home.entry.js' , // <----
  } ) ,
} ;

للحصول على مثال عمل ، ألقِ نظرة على وحدة home هنا.

بيانات

ستعمل جميع الطرق الرسمية 11ty لجمع البيانات من واجهة برمجة التطبيقات أو غير ذلك. هناك العديد من الأمثلة الرائعة حول كيفية القيام بذلك في الوثائق الرسمية 11Ty ، بما في ذلك استخدام GraphQL: https://www.11ty.dev/docs/data-js/.

لتحديد البيانات العالمية ، أضف إما ملفات JSON أو JS أو TypeScript إلى مجلد ./src/data . بعد ذلك سيتم تحليلها بحلول 11TE وإضافتها عبر سلسلة البيانات. يمكنك الوصول إلى هذه مباشرة في ملفات .11ty.ts* .

على سبيل المثال ، إذا كنت تريد إضافة ملف global.ts إلى ./src/data ، فستصل إلى هذا عبر خاصية global في كائن وسيطة الصفحات الخاص بك:

 interface IProps {
  global : {
    title : string ;
  } ;
}

/*[...]*/

function Page ( { global } : IProps ) {
  return (
    < main >
      < h1 > { global . title } </ h1 >
    </ main >
  ) ;
}

لإضافة بيانات محلية ، على سبيل المثال ، البيانات الخاصة بوحدة نمطية ، أضف ملفًا مع .data داخل مجلد الوحدة النمطية ذات الصلة. سيكون هذا متاحًا بعد ذلك تمامًا كما هو موضح أعلاه ، ولكن فقط لتلك الصفحة. على سبيل المثال ، إذا قمت بإضافة home.data.ts إلى ./src/modules/home ، فإن ملفك الرئيسي 11ty.tsx سيكون بإمكانية الوصول إلى القيم التي يتم الاحتفاظ بها ضمن ملف البيانات هذا.

تثبيت

1. استنساخ أو قم بتنزيل المستودع

git clone [email protected]:jahilldev/11tyby.git

2. تثبيت تبعيات المشروع

yarn

تطوير

yarn start

بناء الإنتاج

yarn build