Skip to content

Commit

Permalink
new update
Browse files Browse the repository at this point in the history
TeaByte committed Jan 6, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
midwan Dimitris Panokostas
1 parent 15ed628 commit 255e703
Showing 25 changed files with 278 additions and 145 deletions.
31 changes: 31 additions & 0 deletions components/Nav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
export default function NavBar() {
const menus = [
{ name: "later", href: "/" },
{ name: "later", href: "/docs" },
];

return (
<nav class="bg-base-300 w-full py-4 px-8 flex flex-col md:flex-row gap-4">
<div class="flex items-center flex-1">
<div class="flex items-center gap-1">
<image src="/logo.png" class="h-8 w-8" />
<a href="/" class="text-2xl ml-1 font-bold hover:animate-pulse">
NakhlahJS
</a>
</div>
</div>
<ul class="flex items-center gap-6">
{menus.map((menu) => (
<li>
<a
href={menu.href}
class={"text-gray-500 hover:text-gray-700 py-1 border-gray-500"}
>
{menu.name}
</a>
</li>
))}
</ul>
</nav>
);
}
28 changes: 17 additions & 11 deletions courses/arrays/intro.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
---
sidebar_position: 1
title: المصفوفات والتعامل معها
snippet: هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا.
order: 1
---

# المصفوفات والتعامل معها

[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا.
[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا.

## كتابة المصفوفات

باستخدام متغيرات مصفوفة JavaScript، يمكننا تخزين عدة أجزاء من البيانات في مكان واحد.
باستخدام متغيرات مصفوفة JavaScript، يمكننا تخزين عدة أجزاء من البيانات في مكان
واحد.

تبدأ تعريف المصفوفة بقوس مربع للفتح، وتنتهي بقوس مربع للإغلاق، وتضع فاصلة بين كل إدخال، كما يلي:
تبدأ تعريف المصفوفة بقوس مربع للفتح، وتنتهي بقوس مربع للإغلاق، وتضع فاصلة بين كل
إدخال، كما يلي:

```js
const sandwich = ["peanut butter", "jelly", "bread"];
@@ -23,31 +26,34 @@ const sandwich = ["peanut butter", "jelly", "bread"];
```js
const teams = [["Bulls", 23], ["White Sox", 45]];
```
ويسمى هذا أيضًا بمصفوفة متعددة الأبعاد (Multidimensional Array).

ويسمى هذا أيضًا بمصفوفة متعددة الأبعاد (Multidimensional Array).

## التعامل مع المصفوفات

يمكننا الوصول إلى البيانات داخل المصفوفات باستخدام الفهارس.

تتم كتابة فهارس المصفوفات بنفس تدوين الأقواس الذي تستخدمه السلاسل، باستثناء أنه بدلاً من تحديد حرف، فإنها تحدد إدخالاً في المصفوفة. مثل السلاسل النصية، تستخدم المصفوفات فهرسة صفرية، لذا فإن العنصر الأول في المصفوفة له فهرس يساوي 0.
تتم كتابة فهارس المصفوفات بنفس تدوين الأقواس الذي تستخدمه السلاسل، باستثناء أنه
بدلاً من تحديد حرف، فإنها تحدد إدخالاً في المصفوفة. مثل السلاسل النصية، تستخدم
المصفوفات فهرسة صفرية، لذا فإن العنصر الأول في المصفوفة له فهرس يساوي 0.

```js
const array = [50, 60, 70];
console.log(array[0]);
const data = array[1];
console.log(data);
```
يطبع ```console.log(array[0])``` ```50```، وتكون ```data``` لها القيمة ```60```.

يطبع `console.log(array[0])` `50`، وتكون `data` لها القيمة `60`.

## تعديل بيانات المصفوفات

على عكس السلاسل النصية، فإن مدخلات المصفوفات قابلة للتغيير ويمكن تغييرها بحرية، حتى لو تم تعريف المصفوفة باستخدام ```const```.
على عكس السلاسل النصية، فإن مدخلات المصفوفات قابلة للتغيير ويمكن تغييرها بحرية،
حتى لو تم تعريف المصفوفة باستخدام `const`.

```js
const Array = [50, 40, 30];
Array[0] = 15;
```
لدينا الآن قيمة المصفوفة ```[30, 40, 15]```.

لدينا الآن قيمة المصفوفة `[30, 40, 15]`.
44 changes: 29 additions & 15 deletions courses/arrays/manipulate-arrays.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
sidebar_position: 3
title: التعامل مع المصفوفات
snippet: push, pop, shift, unshift
order: 3
---

# التعامل مع المصفوفات

## push

هناك طريقة سهلة لإلحاق البيانات بنهاية المصفوفة عبر طريقة ```()push```.
هناك طريقة سهلة لإلحاق البيانات بنهاية المصفوفة عبر طريقة `()push`.

تأخذ الطريقة ```()push``` وسيطًا واحدًا أو أكثر وتلحقها بنهاية المصفوفة بالترتيب الذي تظهر به. تقوم بإرجاع الطول الجديد للمصفوفة.
تأخذ الطريقة `()push` وسيطًا واحدًا أو أكثر وتلحقها بنهاية المصفوفة بالترتيب الذي
تظهر به. تقوم بإرجاع الطول الجديد للمصفوفة.

```js
const arr1 = [1, 2, 3];
@@ -17,45 +18,58 @@ arr1.push(4, 5);
const arr2 = ["Stimpson", "J", "cat"];
arr2.push(["happy", "joy"]);
```
أصبح لـ ```arr1``` الآن القيمة``` [5, 4, 3, 2, 1]``` و ```arr2``` له القيمة ```[["happy", "joy"], "Stimpson", "J", "cat"]```.

أصبح لـ `arr1` الآن القيمة`[5, 4, 3, 2, 1]` و `arr2` له القيمة
`[["happy", "joy"], "Stimpson", "J", "cat"]`.

## pop

هناك طريقة أخرى لتغيير البيانات في المصفوفة وهي باستخدام الدالة ```()pop```.
هناك طريقة أخرى لتغيير البيانات في المصفوفة وهي باستخدام الدالة `()pop`.

يتم استخدام ```()pop``` لإخراج قيمة من نهاية المصفوفة. يمكننا تخزين هذه القيمة المنبثقة عن طريق إسنادها إلى متغير. بمعنى آخر، يقوم .```()pop``` بإزالة العنصر الأخير من المصفوفة وإرجاع هذا العنصر.
يتم استخدام `()pop` لإخراج قيمة من نهاية المصفوفة. يمكننا تخزين هذه القيمة
المنبثقة عن طريق إسنادها إلى متغير. بمعنى آخر، يقوم .`()pop` بإزالة العنصر
الأخير من المصفوفة وإرجاع هذا العنصر.

يمكن إخراج أي نوع من المدخلات من المصفوفة - أرقام، أو سلاسل، أو حتى صفائف متداخلة.
يمكن إخراج أي نوع من المدخلات من المصفوفة - أرقام، أو سلاسل، أو حتى صفائف
متداخلة.

```js
const threeArr = [1, 4, 6];
const oneDown = threeArr.pop();
console.log(oneDown);
console.log(threeArr);
```
سيعرض ```console.log``` الأول القيمة ```6``` ، وسيعرض الثاني القيمة ```[4, 1]```.

سيعرض `console.log` الأول القيمة `6` ، وسيعرض الثاني القيمة `[4, 1]`.

## shift

يقوم ()pop دائمًا بإزالة العنصر الأخير من المصفوفة. ماذا لو كنت تريد إزالة الأول؟

وهنا يأتي دور ```()shift```. فهو يعمل تمامًا مثل ()pop، باستثناء أنه يزيل العنصر الأول بدلاً من الأخير.
وهنا يأتي دور `()shift`. فهو يعمل تمامًا مثل ()pop، باستثناء أنه يزيل العنصر
الأول بدلاً من الأخير.

```js
const ourArray = ["Stimpson", "J", ["cat"]];
const removedFromOurArray = ourArray.shift();
```
```removeFromOURArray``` لها قيمة السلسلة ```Stimpson،``` و ```ourArray``` سيكون لها ```["J"، ["cat"]]```.

`removeFromOURArray` لها قيمة السلسلة `Stimpson،` و `ourArray` سيكون لها
`["J"، ["cat"]]`.

## unshift

لا يمكنك فقط إزاحة العناصر من بداية المصفوفة، بل يمكنك أيضًا إلغاء إزاحة العناصر إلى بداية المصفوفة، أي إضافة عناصر أمام المصفوفة.
لا يمكنك فقط إزاحة العناصر من بداية المصفوفة، بل يمكنك أيضًا إلغاء إزاحة العناصر
إلى بداية المصفوفة، أي إضافة عناصر أمام المصفوفة.

يعمل ```()unshift``` تمامًا مثل ()push، ولكن بدلاً من إضافة العنصر في نهاية المصفوفة، يضيف ```()unshift``` العنصر في بداية المصفوفة.
يعمل `()unshift` تمامًا مثل ()push، ولكن بدلاً من إضافة العنصر في نهاية المصفوفة،
يضيف `()unshift` العنصر في بداية المصفوفة.

```js
const ourArray = ["Stimpson", "J", "cat"];
ourArray.shift();
ourArray.unshift("Happy");
```
بعد ```shift``` سيكون لـ ```ourArray``` القيمة ```["J", "cat"]```. بعد ```unshift``` سيكون لـ ```ourArray``` القيمة ```["Happy"، "J"، "cat"]```.

بعد `shift` سيكون لـ `ourArray` القيمة `["J", "cat"]`. بعد `unshift` سيكون لـ
`ourArray` القيمة `["Happy"، "J"، "cat"]`.
16 changes: 10 additions & 6 deletions courses/arrays/multidimensional-index.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
---
sidebar_position: 2
title: الوصول إلى المصفوفات متعددة الأبعاد
snippet: احدى طرق التفكير في المصفوفة متعددة الأبعاد
order: 2
---

# الوصول إلى المصفوفات متعددة الأبعاد

إحدى طرق التفكير في المصفوفة متعددة الأبعاد هي أنها مصفوفة من المصفوفات. عند استخدام الأقواس للوصول إلى المصفوفة الخاصة بك، تشير المجموعة الأولى من الأقواس إلى الإدخالات الموجودة في المصفوفة الخارجية (المستوى الأول)، ويشير كل زوج إضافي من الأقواس إلى المستوى التالي من الإدخالات بالداخل.
إحدى طرق التفكير في المصفوفة متعددة الأبعاد هي أنها مصفوفة من المصفوفات. عند
استخدام الأقواس للوصول إلى المصفوفة الخاصة بك، تشير المجموعة الأولى من الأقواس
إلى الإدخالات الموجودة في المصفوفة الخارجية (المستوى الأول)، ويشير كل زوج إضافي
من الأقواس إلى المستوى التالي من الإدخالات بالداخل.

```js
const arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[[10, 11, 12], 13, 14]
[[10, 11, 12], 13, 14],
];

const subarray = arr[3];
const nestedSubarray = arr[3][0];
const element = arr[3][0][1];
```
في هذا المثال، ```subarray``` له القيمة ```[[10, 11, 12], 13, 14]```، و ```nestedSubarray``` له القيمة ```[10, 11, 12]```، و ```element``` له القيمة ```11``` .

في هذا المثال، `subarray` له القيمة `[[10, 11, 12], 13, 14]`، و `nestedSubarray`
له القيمة `[10, 11, 12]`، و `element` له القيمة `11` .
10 changes: 3 additions & 7 deletions courses/comments.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: التعليقات
snippet: This is an excerpt of my first blog post.
snippet: تعد التعليقات طريقة رائعة لترك ملاحظات لنفسك
order: 2
---

# التعليقات

التعليقات عبارة عن أسطر من التعليمات البرمجية التي ستتجاهلها JavaScript عمدًا.
تعد التعليقات طريقة رائعة لترك ملاحظات لنفسك وللأشخاص الآخرين الذين سيحتاجون
لاحقًا إلى معرفة ما يفعله هذا التعليمات البرمجية.
@@ -27,11 +25,9 @@ order: 2
متعدد الأسطر */
```

:::tip إضافة

<mark>
أثناء كتابة التعليمات البرمجية، يجب عليك إضافة تعليقات بانتظام لتوضيح وظيفة
أجزاء من التعليمات البرمجية الخاصة بك. يمكن أن يساعد التعليق الجيد في إيصال
الهدف من التعليمات البرمجية الخاصة بك، سواء بالنسبة للآخرين أو لنفسك في
المستقبل.

:::
</mark>
6 changes: 2 additions & 4 deletions courses/intro.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: قبل أن تبداء
snippet: ابداء رحلتك في عالم البرمجة
snippet: بداية مثالية لرحلتك في عالم البرمجة
order: 1
---

## استعمال الموقع

هذا الدرس يشكل بداية مثالية لرحلتك في عالم البرمجة باستخدام هذه اللغة القوية.
سنرافقك خلال هذه الرحلة ونعرض لك كيفية الاستفادة القصوى من موقعنا لتحقيق أقصى
فائدة من تعلم جافاسكربت.
@@ -32,7 +30,7 @@ order: 1
استفسارك في المجتمع. أعضاء المجتمع الآخرين سيكونون سعداء بمساعدتك ومشاركة
تجاربهم معك. هذا التفاعل يمكن أن يجعل عملية التعلم أكثر سهولة ومتعة.

<mark>recommended</mark>
<!-- <mark>recommended</mark> -->

أنضم الان! [قناه التلغرام](https://t.me/NakhlahJS),
[جروب التلغرام](https://t.me/Unassisted)
2 changes: 1 addition & 1 deletion courses/numbers/_data.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "المصفوفات",
"label": "الأرقام",
"order": 4
}
18 changes: 10 additions & 8 deletions courses/numbers/decimals.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
---
sidebar_position: 2
title: إنشاء أرقام عشرية
snippet: يمكننا تخزين الأرقام العشرية في المتغيرات أيضا
order: 2
---

# إنشاء أرقام عشرية

يمكننا تخزين الأرقام العشرية في المتغيرات أيضا. يُشار أحيانًا إلى الأرقام العشرية على أنها أرقام الفاصلة العائمة أو الأعداد العشرية.
يمكننا تخزين الأرقام العشرية في المتغيرات أيضا. يُشار أحيانًا إلى الأرقام العشرية
على أنها أرقام الفاصلة العائمة أو الأعداد العشرية.

```js
const ourDecimal = 5.7; // رقم عشري
```

في JavaScript، يمكنك أيضًا إجراء عمليات حسابية باستخدام الأعداد العشرية، تمامًا مثل الأعداد الصحيحة.
في JavaScript، يمكنك أيضًا إجراء عمليات حسابية باستخدام الأعداد العشرية، تمامًا
مثل الأعداد الصحيحة.

دعونا نقوم بإجراء عمليات حسابية باستخدام عددين عشريين معًا.

```js
const prd = 2.0 * 0.0;
console.log(prd) // 0
console.log(prd); // 0

const div = 1.0 / 2.0;
console.log(div) // 0.5
```
console.log(div); // 0.5
```
57 changes: 33 additions & 24 deletions courses/numbers/intro.md
Original file line number Diff line number Diff line change
@@ -1,74 +1,83 @@
---
sidebar_position: 1
title: الأرقام والتعامل معها
snippet: هو نوع بيانات في JavaScript يمثل بيانات رقمية.
order: 1
---

# الأرقام والتعامل معها

[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) هو نوع بيانات في JavaScript يمثل بيانات رقمية.
[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
هو نوع بيانات في JavaScript يمثل بيانات رقمية.

## الجمع
الآن لنحاول إضافة رقمين باستخدام JavaScript.
تستخدم JavaScript الرمز ```+``` كعامل إضافة عند وضعه بين رقمين.

الآن لنحاول إضافة رقمين باستخدام JavaScript. تستخدم JavaScript الرمز `+` كعامل
إضافة عند وضعه بين رقمين.

```js
const someNumber = 5 + 10;
```
```someNumber``` الآن لديه القيمة ```15```.

`someNumber` الآن لديه القيمة `15`.

## الطرح
يمكننا أيضًا طرح رقم من رقم آخر.
تستخدم JavaScript الرمز ```-``` للطرح.

يمكننا أيضًا طرح رقم من رقم آخر. تستخدم JavaScript الرمز `-` للطرح.

```js
const someNumber = 12 - 6;
```
سيكون لـ ```someNumber``` القيمة ```6```.

سيكون لـ `someNumber` القيمة `6`.

## الضرب
يمكننا أيضًا ضرب رقم في آخر.
تستخدم JavaScript الرمز ```*``` لضرب رقمين.

يمكننا أيضًا ضرب رقم في آخر. تستخدم JavaScript الرمز `*` لضرب رقمين.

```js
const someNumber = 13 * 13;
```
سيكون لـ ```someNumber``` القيمة ```169```.

سيكون لـ `someNumber` القيمة `169`.

## القسمه
يمكننا أيضًا قسمة رقم على آخر.
تستخدم JavaScript الرمز ```/``` للتقسيم.

يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل ```++```.
يمكننا أيضًا قسمة رقم على آخر. تستخدم JavaScript الرمز `/` للتقسيم.

يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل `++`.

```js
const someNumber = 16 / 2;
```
سيكون لـ ```someNumber``` القيمة ```8```.

سيكون لـ `someNumber` القيمة `8`.

## عامل الباقي
عامل الباقي ```%``` يعطي باقي قسمة رقمين.

في الرياضيات، يمكن التحقق من أن الرقم زوجي أو فردي عن طريق التحقق من باقي قسمة الرقم على 2. الأعداد الزوجية لها باقي 0، بينما الأرقام الفردية لها باقي 1.
عامل الباقي `%` يعطي باقي قسمة رقمين.

في الرياضيات، يمكن التحقق من أن الرقم زوجي أو فردي عن طريق التحقق من باقي قسمة
الرقم على 2. الأعداد الزوجية لها باقي 0، بينما الأرقام الفردية لها باقي 1.

```js
console.log(17 % 2); // 1
console.log(48 % 2); // 0
```


## زيادة أو إنقاص رقم

يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل ```++```.
يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل `++`.

```js
let i = 0;
i++; // اصبح i = 1

// i++ مساوي تماما الى ( i = i + 1 );
```

يمكنك بسهولة إنقاص أو تقليل متغير بمقدار واحد باستخدام عامل التشغيل ```--```.
يمكنك بسهولة إنقاص أو تقليل متغير بمقدار واحد باستخدام عامل التشغيل `--`.

```js
let i = 0;
i--; // اصبح i = -1

// i-- مساوي تماما الى ( i = i - 1; );
```


4 changes: 1 addition & 3 deletions courses/variables/case-sensitivity-in-variables.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: فهم حساسية الحالة في المتغيرات
snippet: This is an excerpt of my first blog post.
snippet: في JavaScript، جميع المتغيرات وأسماء الوظائف حساسة لحالة الأحرف
order: 4
---

# فهم حساسية الحالة في المتغيرات

في JavaScript، جميع المتغيرات وأسماء الوظائف حساسة لحالة الأحرف. وهذا يعني أن
التسميه مهمة.

8 changes: 3 additions & 5 deletions courses/variables/console.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
---
title: الطباعة ووحده التحكم
snippet: This is an excerpt of my first blog post.
snippet: طباعة معلومات أو نص على الشاشة
order: 2
---

# الطباعة ووحده التحكم

إذا كنت ترغب في طباعة معلومات أو نص على الشاشة في JavaScript، يمكنك استخدام
الدالة ()console.log

:::note ملاحظة
<mark>

سنتعرف قريبًا على الدوال وكيفية عملها في المراحل القادمة

:::
</mark>

تحدثنا في الدرس السابق عن المتغيرات إذا أردنا طباعة المتغير على الشاشة بلغة
JavaScript. يمكنك عبر المثال التالي:
8 changes: 3 additions & 5 deletions courses/variables/intro.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: المتغيرات والتعامل معها
snippet: This is an excerpt of my first blog post.
snippet: البيانات هي أي شيء له معنى بالنسبة للكمبيوتر
order: 1
---

# المتغيرات والتعامل معها

في علوم الكمبيوتر، البيانات هي أي شيء له معنى بالنسبة للكمبيوتر. توفر JavaScript
ثمانية أنواع مختلفة من البيانات:

@@ -18,11 +16,11 @@ order: 1
- [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)
- [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/symbol)

:::note ملاحظة
<mark>

سنتعرف قريبًا على جميع المتغيرات بالتفصيل في مراحل قادمة

:::
</mark>

## تعريف المتغيرات

10 changes: 3 additions & 7 deletions courses/variables/the-var-let-const.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: الاختلافات بين var، let، const
snippet: This is an excerpt of my first blog post.
snippet: إحدى أكبر مشكلات الإعلان عن المتغيرات
order: 5
---

# الاختلافات بين var، let، const

إحدى أكبر مشكلات الإعلان عن المتغيرات باستخدام الكلمة الأساسية `var` هي أنه
يمكنك بسهولة استبدال إعلانات المتغيرات:

@@ -61,12 +59,10 @@ PASSWORD = 987; // حدوث خطأ بسبب اعاده تعيين
الأساسية `const`. يساعد هذا عندما تحاول عن طريق الخطأ إعادة تعيين متغير من
المفترض أن يظل ثابتًا.

:::note ملاحظة

<mark>
من الشائع للمطورين استخدام معرفات المتغيرات الكبيرة للقيم غير القابلة للتغيير
والأحرف الصغيرة أو CamelCase للقيم القابلة للتغيير

:::
</mark>

## الخلاصة

8 changes: 3 additions & 5 deletions courses/variables/uninitialized-variables.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: فهم المتغيرات غير المهيأة
snippet: This is an excerpt of my first blog post.
snippet: عندما يتم الإعلان عن متغيرات JavaScript، تكون قيمتها الأولية غير محددة
order: 3
---

# فهم المتغيرات غير المهيأة

عندما يتم الإعلان عن متغيرات JavaScript، تكون قيمتها الأولية غير محددة (
[undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)
). إذا أجريت عملية حسابية على متغير غير محدد فستكون النتيجة (
@@ -26,8 +24,8 @@ console.log(c); // "undefined String!"

كما تلاحظ المخرجات داخل التعليقات السابقة.

:::note ملاحظة
<mark>

سنتعرف قريبًا على العمليات الحسابيه على الارقام والسلاسل قريبا

:::
</mark>
6 changes: 2 additions & 4 deletions fresh.gen.ts
Original file line number Diff line number Diff line change
@@ -6,9 +6,8 @@ import * as $_slug_ from "./routes/[slug].tsx";
import * as $_404 from "./routes/_404.tsx";
import * as $_app from "./routes/_app.tsx";
import * as $api_joke from "./routes/api/joke.ts";
import * as $greet_name_ from "./routes/greet/[name].tsx";
import * as $index from "./routes/index.tsx";
import * as $Counter from "./islands/Counter.tsx";
import * as $Editor from "./islands/Editor.tsx";
import { type Manifest } from "$fresh/server.ts";

const manifest = {
@@ -17,11 +16,10 @@ const manifest = {
"./routes/_404.tsx": $_404,
"./routes/_app.tsx": $_app,
"./routes/api/joke.ts": $api_joke,
"./routes/greet/[name].tsx": $greet_name_,
"./routes/index.tsx": $index,
},
islands: {
"./islands/Counter.tsx": $Counter,
"./islands/Editor.tsx": $Editor,
},
baseUrl: import.meta.url,
} satisfies Manifest;
16 changes: 0 additions & 16 deletions islands/Counter.tsx

This file was deleted.

79 changes: 79 additions & 0 deletions islands/Editor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { StateUpdater, useEffect, useState } from "preact/hooks";
import { Button } from "../components/Button.tsx";

interface CounterProps {
preCode: string;
testCode: string;
}

declare var window: Window & typeof globalThis;
interface Window {
editor: any; // Replace 'any' with the actual type of your 'editor' property
}

export default function Editor(props: CounterProps) {
const [output, setOutput] = useState<string>("");

useEffect(() => {
const initializeEditor = () => {
if (window.editor) {
window.editor.setValue(props.preCode);
}
};
window.onload = initializeEditor;
return () => {
window.onload = null;
};
}, []);

function handleCodeClear() {
window.editor.setValue("");
setOutput("");
}

function handleCodeRun() {
const code: string | undefined = window.editor.getValue();
try {
const capturedOutput: string[] = [];
const originalConsoleLog = console.log;
console.log = (...args: any[]) => {
capturedOutput.push(args.map((arg) => JSON.stringify(arg)).join(" "));
originalConsoleLog(...args);
};
if (code) {
eval(code);
}
setOutput(`${capturedOutput.join("\n")}`);
console.log = originalConsoleLog;
} catch (error) {
setOutput(`${error}`);
}
}

return (
<>
<div class="flex gap-2 px-2">
<button
class="btn btn-info grow"
onClick={handleCodeRun}
>
Run
</button>
<button
class="btn btn-active btn-ghost grow"
onClick={handleCodeClear}
>
Clear
</button>
</div>

<div class="bg-base-300 grow overflow-y-scroll mx-2 rounded-lg">
<pre className=" bg-base-300 overflow-y-hidden p-4">

{output}

</pre>
</div>
</>
);
}
23 changes: 13 additions & 10 deletions routes/[slug].tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { Handlers } from "$fresh/server.ts";
import { PageProps } from "$fresh/server.ts";
import { CSS, render } from "$gfm";
import { Head } from "$fresh/runtime.ts";
import Editor from "../islands/Editor.tsx";

export const handler: Handlers<Course> = {
async GET(_req, ctx) {
@@ -44,18 +45,15 @@ export default function CoursePage(props: PageProps<Course>) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.1.1/split.min.js">
</script>

<script src="/resizer.js" />
<script src="/moaco.js"></script>
<script src="/resizer.js" />
</Head>

<main>
<div dir="ltr" class="split">
<div id="split-0">
<section dir="rtl" class="p-2">
<h1 class="text-3xl">{course.title}</h1>
<div class="text-gray-500 mt-1 mb-2">
{course.snippet}
</div>
<div dir="ltr" class="split flex-grow max-h-screen min-h-screen">
<div id="split-0" class="overflow-y-scroll">
<section dir="rtl" class="p-3 py-5">
<h1 class="text-3xl mb-3">{course.title}</h1>
<div
id="document"
class="markdown-body"
@@ -66,8 +64,13 @@ export default function CoursePage(props: PageProps<Course>) {
/>
</section>
</div>
<div id="split-1">
<div dir="ltr" class="h-full w-full grow" id="editor"></div>
<div id="split-1" class="flex flex-col gap-2">
<p class="py-2 bg-[#1E1E1E]"></p>
<div dir="ltr" class="h-[400px]" id="editor"></div>
<Editor
preCode={'console.log("Hello World!")'}
testCode={"x == x"}
/>
</div>
</div>
</main>
3 changes: 3 additions & 0 deletions routes/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { type PageProps } from "$fresh/server.ts";
import NavBar from "../components/Nav.tsx";

export default function App({ Component }: PageProps) {
return (
<html data-theme="sunset" dir="rtl">
@@ -24,6 +26,7 @@ export default function App({ Component }: PageProps) {
/>
</head>
<body>
<NavBar />
<Component />
</body>
</html>
5 changes: 0 additions & 5 deletions routes/greet/[name].tsx

This file was deleted.

6 changes: 3 additions & 3 deletions routes/index.tsx
Original file line number Diff line number Diff line change
@@ -114,9 +114,9 @@ export default function BlogIndexPage(

return (
<main class="max-w-screen-md px-4 pt-12 mx-auto">
<h1 class="text-5xl font-bold z-10">المحتوى</h1>
{/* <h1 class="text-5xl font-bold z-10">المحتوى</h1> */}

<section class="flex flex-col gap-6">
<section class="flex flex-col gap-4">
{merged.map((course, index) => {
if ("courses" in course) {
return (
@@ -149,7 +149,7 @@ function CourseCard(props: { course: Course }) {
const { course } = props;
return (
<div
class={`py-4 border-t gray-200 hover:bg-gray-400`}
class={`py-4 border-t gray-200 hover:opacity-75 `}
style={{ order: course.order }}
>
<a href={btoa(`/${course.slug}`)}>
Binary file added static/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions static/moaco.js
Original file line number Diff line number Diff line change
@@ -5,12 +5,12 @@ require.config({
});

require(["vs/editor/editor.main"], () => {
var editor = monaco.editor.create(document.getElementById("editor"), {
window.editor = monaco.editor.create(document.getElementById("editor"), {
language: "javascript",
theme: "vs-dark",
});

setInterval(() => {
editor.layout();
}, 500);
}, 100);
});
6 changes: 4 additions & 2 deletions static/resizer.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
document.addEventListener("DOMContentLoaded", function () {
document.body.style.overflow = "hidden";

Split(["#split-0", "#split-1"], {
minSize: 150,
gutterSize: 12,
minSize: 0,
gutterSize: 13,
});
});
25 changes: 23 additions & 2 deletions static/styles.css
Original file line number Diff line number Diff line change
@@ -11,8 +11,6 @@ body .markdown-body {
color: initial !important;
}



.split {
display: flex;
flex-direction: row;
@@ -32,3 +30,26 @@ body .markdown-body {
pre {
direction: ltr !important;
}

.markdown-body .highlight pre {
background-color: var(--fallback-b3,oklch(var(--b3)/1)) !important;
}

mark {
background-color: transparent;
color: inherit;

border: 1px solid #cccccc; /* Border color, you can change it */
padding: 10px; /* Adjust padding as needed */
display: inline-block; /* Display as inline-block to contain content */
position: relative;
border-radius: 10px;
margin-bottom: 10px;
}

mark::before {
content: "ملاحظة";
display: block;
font-weight: bold;
margin-bottom: 5px;
}

0 comments on commit 255e703

Please sign in to comment.