هذه المقالة مأخوذة أصلاً من مدونتي. وضعت هذه المقالة لأوضح كيف يمكنك كتابة منشورات/مقالات باستخدام موضوع AstroPaper.
تطوير موقع يشبه المحطة الطرفية باستخدام ReactJS وTypeScript وStyled-Components. يتضمن ميزات مثل الإكمال التلقائي، السمات المتعددة، تلميحات الأوامر، إلخ.
جدول المحتويات
مقدمة
مؤخرًا، قمت بتطوير ونشر ملفي الشخصي + مدونة. أنا سعيد لأنني حصلت على بعض التعليقات الجيدة عليها. اليوم، أود أن أقدم موقعي الجديد الذي يشبه المحطة الطرفية. تم تطويره باستخدام ReactJS وTypeScript. حصلت على هذه الفكرة من CodePen وYouTube.
تقنية المشروع
هذا المشروع هو مشروع واجهة أمامية بدون أي أكواد خلفية. تم تصميم جزء واجهة المستخدم/تجربة المستخدم في Figma. بالنسبة لواجهة المستخدم الأمامية، اخترت React بدلاً من JavaScript العادي وNextJS. لماذا؟
- أولاً، أريد كتابة كود تصريحي. إدارة HTML DOM باستخدام JavaScript بشكل إجرائي مملة للغاية.
- ثانيًا، لأنه React!!! إنه سريع وموثوق.
- أخيرًا، لا أحتاج إلى الكثير من ميزات تحسين محركات البحث، التوجيه وتحسين الصور التي يوفرها NextJS.
وبالطبع هناك TypeScript للتحقق من الأنواع.
بالنسبة للتصميم، اتخذت نهجًا مختلفًا عما أفعله عادةً. بدلاً من اختيار CSS النقي، Sass، أو إطار عمل CSS المساعد مثل TailwindCSS، اخترت طريقة CSS-in-JS (Styled-Components). على الرغم من أنني كنت أعرف عن Styled-Components لبعض الوقت، إلا أنني لم أجربها من قبل. لذلك، قد لا تكون أسلوب الكتابة وهياكل Styled-Components في هذا المشروع منظمة جدًا أو جيدة جدًا.
هذا المشروع لا يحتاج إلى إدارة حالة معقدة جدًا. أنا فقط أستخدم ContextAPI في هذا المشروع لتعدد السمات وتجنب تمرير الخصائص.
إليك ملخص سريع لتقنية المشروع.
- الواجهة الأمامية: ReactJS, TypeScript
- التصميم: Styled-Components
- واجهة المستخدم/تجربة المستخدم: Figma
- إدارة الحالة: ContextAPI
- النشر: Netlify
الميزات
إليك بعض ميزات المشروع.
تعدد السمات
يمكن للمستخدمين تغيير السمات المتعددة. في وقت كتابة هذا المنشور، هناك 5 سمات؛ ومن المحتمل إضافة المزيد من السمات في المستقبل. يتم حفظ السمة المحددة في التخزين المحلي حتى لا تتغير السمة عند تحديث الصفحة.
Command-line Completion
To look and feel as close to the actual terminal as possible, I put a command-line completion feature which auto fills in partially typed commands by simply pressing ‘Tab’ or ‘Ctrl + i’.
Previous Commands
Users can go back to the previous commands or navigate the previously typed commands by pressing Up & Down Arrows.
View/Clear Command History
previously typed commands can be viewed by typing ‘history’ in the command line. All the command history and terminal screen can be wiped out by typing ‘clear’ or pressing ‘Ctrl + l’.
Outro
This is a really fun project, and one special part of this project is I had to focus on logic rather than user-interface (even though this is kind of a frontend project).