أودِع الكتلة المقصودة لا الملف كله

• اختيار نطاق التجهيز وفق نية الإيداع.
• تحديد سطري الإزالة والإضافة عند استبدال قيمة.
• قراءة الفهرس وملف العمل بصورة مستقلة.
• الاحتفاظ بتحرير نصف القطر لـ الدرس الثامن.

تبدأ من حيث انتهى الدرس السادس: إيداعان على main ومدخلات الدرس السادس القابلة للتشغيل، ولا بعيد. العمل والفهرس دون فروق، وقد يوجد dist مُتجاهَل. سُجّل الفيديو باستخدام Git 2.52.0 وGitTree 2.0 على Ubuntu 24.04: حُفظ التعديلان في محرر GitTree نفسه، وجُهّزت الكتلة والأسطر وأُنجز الإيداع في التطبيق، وجرت فحوص الطرفية على ما أنشأه التطبيق أو على نسخ منفصلة. شُغّلت عناصر الكتلة والأسطر فعليًا، وجرى مسار الرقعة الأصلي في نسخة منفصلة. لم يُنفَّذ شيء على macOS أو Windows، وUbuntu هو نظام Linux الوحيد المسجَّل. الحد الأدنى المقروء للتطبيق Git 2.39.0. بعد تسجيل الدخول يكون العمل المحلي ضمن الخطة المجانية.

قد يجمع ملف واحد قرارات مستقلة. تجمع الكتلة تغييرات متجاورة، ولا تضمن نية واحدة. يتطلب استبدال قيمة تحديد السطر القديم المُزال والجديد المُضاف؛ اختيار الإضافة وحدها قد يصنع رقعة مختلفة.

يصف الفهرس نسخة كاملة حتى عند اختيار أسطر قليلة. هنا يحمل HEAD النسخة CSS-01، ويصبح الفهرس CSS-02-INDEX، ويبقى العمل CSS-02-WORKING. يغير الحفظ العمل، ويغير تجهيز الأسطر الفهرس، ويحدّث الإيداع main دون محو الباقي أو تغيير بعيد. التجهيز الجزئي، تطبيق الرقع.

استبدل HTML وCSS بنسختيهما العاملتين. CSS-02-INDEX هدف للفهرس؛ لا تلصقه فوق ملف العمل.

index.html — HTML-02-HEADLINE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitTree Features — course demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a href="#main">GitTree Features</a>
  </header>
  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <p class="eyebrow">GitTree Learn demo project</p>
      <h1 id="hero-title">See your work clearly.</h1>
      <p id="hero-copy">Choose one change, then check what Git saved.</p>
    </section>
    <section class="features" aria-labelledby="features-title">
      <h2 id="features-title">Follow your work</h2>
      <div class="cards">
        <article class="feature-card">
          <h3>History</h3>
          <p>Read commits and branches together.</p>
        </article>
        <article class="feature-card">
          <h3>Changes</h3>
          <p>Review the exact content selected for a commit.</p>
        </article>
        <article class="feature-card">
          <h3>Recovery</h3>
          <p>Inspect the scope of a recovery point before using it.</p>
        </article>
      </div>
    </section>
  </main>
  <footer><p>Built by a fictional team for GitTree Learn.</p></footer>
  <script type="module" src="site.js"></script>
</body>
</html>

styles.css — CSS-02-INDEX

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

styles.css — CSS-02-WORKING

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

1. افتح عرض الملفات (Show Files) بـ Command/Ctrl+Shift+E، وركّز كل ملف ثم Enter. الصق نسخة العمل المحددة واحفظ. لا تستبدل CSS العامل بهدف الفهرس.
2. العودة إلى الرسم البياني (Back to Graph) ← لوحة الأوامر… (Command Palette…) بـ Command/Ctrl+Shift+P ← عرض تغييرات مجلد العمل (Show Working Changes). اختر index.html غير المُجهَّز.
3. اختر كتلة ثم تجهيز الكتلة (Stage Hunk) عند استبدال العنوان. يصبح العنوان مُجهَّزًا. تجهيز الملف كله مكافئ هنا فقط لغياب تحرير HTML آخر.
4. اختر styles.css غير المُجهَّز، وأبقِ تجاهُل المسافات البيضاء (Ignore whitespace) معطلًا. حدد استبدال max-width في السطر 41 من 44rem إلى 48rem.
5. فعّل خانتي السطر المُزال والسطر المُضاف؛ يذكر الاسم المتاح الإشارة والرقم والنص. اختر تجهيز الأسطر (Stage Lines). لا تحدد زوج نصف القطر في السطر 59.
6. البديل في إعادة منفصلة هو تجهيز الكتلة لكتلة العرض وحدها. يعرض جنبًا إلى جنب القديم والجديد وخانة مستقلة لكل سطر متغير. أوامر اللقطة الإنجليزية عرض الفروق ككتل (Show Diff as Hunks) وعرض الفروق جنبًا إلى جنب (Show Diff Side by Side).
7. افحص CSS المُجهَّز: العرض وحده. ثم غير المُجهَّز: نصف القطر وحده. مسح (Clear) يلغي التحديد لا المحتوى. لتصحيح الاختيار استخدم إلغاء تجهيز الكتلة (Unstage Hunk) أو حدّد طرفي الاستبدال المُجهَّز واختر إلغاء تجهيز الأسطر (Unstage Lines).
8. اكتب feat: refine the hero and card spacing، وأبقِ الخيارات الإضافية معطلة، ثم إيداع تغييرات ملفين (Commit Changes to 2 Files) أو Command/Ctrl+Enter مرة واحدة.
9. لا تجهّز الكل ولا تتخلّص من التحرير ولا تنشئ إيداع تنظيف؛ يسجّل الدرس الثامن نصف القطر.

يتعلق الاختيار ببصمة الفرق. بعد تحرير خارجي أعد القراءة والتحديد بدل فرض رقعة قديمة. عند إخفاء المسافات قد يُمنع اختيار الأسطر؛ اقرأ السبب وأعد المقارنة الكاملة.

بعد حفظ التحريرين:

git diff -- styles.css

diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

يتيح git add -p -- index.html اختيار كتلة العنوان، وgit add -p -- styles.css قبول العرض ورفض نصف القطر. اقرأ محتوى السؤال الفعلي؛ لا تعتمد تسلسل y/n محفوظًا تختلف تفاصيله بالإصدار.

بديل أصلي حتمي: احفظ الرقعة الكاملة التالية خارج المشروع في <selection.patch>:

diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.css

نجح الفحص والتطبيق دون ناتج. خرجت المقارنة:

diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

يجب أن يطابق git show :styles.css كامل CSS-02-INDEX، بينما يبقى ملف العمل CSS-02-WORKING. لا يكتب --cached ملف العمل.

البديل الأصلي للإيداع، لا إعادة بعد نجاح التطبيق:

git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css

نجح الإيداع الصامت، ثم ظهرت الحالة:

 M styles.css

والفرق المتبقي:

diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

في نهاية هذا الدرس: ثلاثة إيداعات. يحمل HEAD والفهرس العنوان الجديد والعرض 48rem، ونصف القطر القديم 0.5rem. يحمل العمل نصف القطر 0.75rem وحده كتعديل متبقٍ. لا بعيد أو عملية دمج. لا تستبدل النقطة بدفتر اختياري أو نسخة نظيفة.

• اختيار الإضافة وحدها لاستبدال يتطلب طرفين.
• تجهيز CSS كله فيدخل نصف القطر.
• استبدال ملف العمل بهدف الفهرس فيُفقد التحرير المستقل.
• إيداع الباقي مبكرًا رغم أن الدرس الثامن يبدأ به.

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

أجب عن كل سؤال ثم اقرأ السبب. الأسئلة المعلَّمة «مطلوب» تُحتسب لإكمال الدرس.

1. السؤال 1 من 6

   السؤال 1 من 6

   ما الذي يحدد الكتلة؟

   اختر إجابة واحدة.

   ميزة كاملة دائمًا

   فرع واحد

   سياق متجاور للفروق

   تحقّق من الإجابة
2. السؤال 2 من 6

   السؤال 2 من 6

   ما الأسطر اللازمة لتجهيز الاستبدال؟

   اختر كل إجابة صحيحة.

   السطر المُزال 44rem

   نصف القطر أيضًا

   السطر المُضاف 48rem

   تحقّق من الإجابة
3. السؤال 3 من 6

   السؤال 3 من 6مطلوب

   ما العرض ونصف القطر في الفهرس بعد الاختيار الجزئي؟

   اختر إجابة واحدة.

   القيمتان 48rem و0.5rem

   القيمتان الأحدث

   العرض القديم ونصف القطر الأحدث

   تحقّق من الإجابة
4. السؤال 4 من 6

   السؤال 4 من 6مطلوب

   إذا جهّزت نصف القطر أيضًا قبل الإيداع فما الباقي؟

   اختر إجابة واحدة.

   بعيد جديد

   يبقى نصف القطر غير مُجهَّز

   لا فرق CSS

   تحقّق من الإجابة
5. السؤال 5 من 6

   السؤال 5 من 6

   غيّر حفظ خارجي الفرق المحدد. ما التصرف الآمن؟

   اختر إجابة واحدة.

   افرض الرقعة القديمة

   تخلّص من الملف كله

   أعد القراءة والتحديد

   تحقّق من الإجابة
6. السؤال 6 من 6

   السؤال 6 من 6مطلوب

   ما الأدلة المطابقة للنهاية؟

   اختر كل إجابة صحيحة.

   ثلاثة إيداعات والقيمتان المحددتان

   أُودِع تنظيف نصف القطر

   نصف قطر العمل 0.75rem وCSS وحده معدّل

   تحقّق من الإجابة

اشرح العرض ونصف القطر في النسخ الثلاث. إذا جهّزت زوج نصف القطر أيضًا، يدخل التغييران ولا يبقى فرق CSS. اختبر ذلك في نسخة منفصلة، وأبقِ النهاية المحددة لـ الدرس الثامن.

• اختر نطاقًا يوافق نية التغيير.
• افحص النسخة المُجهَّزة كاملة والباقي في العمل.
• افصل العمل المستقل دون إتلافه.

• اقرأ المقارنة قبل الحكم على التغيير (الدرس السادس)
• جهّز النسخة المقصودة وأنشئ أول إيداع (الدرس الخامس)
• تنزيل GitTree

Hunk — كتلة؛ selected lines — الأسطر المختارة؛ stage — تجهيز؛ unstage — إلغاء التجهيز؛ patch — رقعة؛ index — الفهرس.