تمام يا يوسف 👌 واضح إن عندك مشكلتين كانوا حاصلين:

1. مشكلة الـ Eleventy plugin (اتحلّت محليًا عندك ✅).
2. مشكلة نشر GitHub Pages بسبب “environment protection rules” على بيئة github-pages ❌.

خلّيني أمشي معاك خطوة بخطوة علشان النشر يشتغل من main من غير Errors.

1) تأكيد إعدادات Eleventy

أنت عملت npm i -D @11ty/eleventy-navigation وبنيت محليًا بنجاح—تمام. اتأكد إنك مضيف البلجن في .eleventy.js:

js
// .eleventy.js
const eleventyNavigation = require("@11ty/eleventy-navigation");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigation);

  return {
    dir: { input: ".", output: "_site" }
  };
};

مهم في CI: ما تخليش الـ workflow يثبّت dependencies من غير devDependencies. استخدم npm ci عادي وبدون --production أو NODE_ENV=production.
لو عندك خطوة بتعمل npm ci --omit=dev أو مهيّأ NODE_ENV=production، شيلها.
(بديلًا: ممكن تنقل @11ty/eleventy-navigation من devDependencies لـ dependencies، بس الأفضل تسيبه dev وتثبّت devDeps في البيلد.)

2) إصلاح “Branch "main" is not allowed…”

الرسالة دي جاية من بيئة اسمها github-pages اتعملت تلقائيًا. غالبًا متظبطة إنها تسمح بـ “Selected branches” ومش مضافة فيها main، أو فيها “Required reviewers”.

اعمل الآتي في الريبو على GitHub:

1. Settings → Environments → github-pages → Edit

   • تحت Deployment branches:
     • إمّا اختار All branches،
     • أو Selected branches واضف main.
   • لو Required reviewers مفعّلة: إمّا تلغيها مؤقتًا أو وافِق يدويًا على الـ deployment من نفس صفحة الـ Environment (هيظهر زر Approve).

2. Settings → Pages

   • تحت Build and deployment خلي Source = GitHub Actions (لو هتستخدم الـ workflow الموصّى بيه تحت).

بعد كده أي push على main هيعدّي الحماية وهيكمّل نشر Pages.

3) Workflow مِوصّى به لـ Eleventy + GitHub Pages

لو عايز أبسط وأحدث إعداد، استخدم الـ Actions الرسمية لـ Pages. أنشئ/حدّث الملف: .github/workflows/deploy.yml

yaml
name: Deploy Eleventy to Pages

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      # مهم: تثبيت devDependencies
      - run: npm ci

      # بنبني الموقع إلى _site
      - run: npx @11ty/eleventy

      # نرفع الأرتيفاكت بتاع _site للنشر
      - uses: actions/upload-pages-artifact@v3
        with:
          path: _site

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

ده بيعمل:

• Build على كل push للـ main.
• يرفع _site كـ artifact.
• ينشره على بيئة github-pages.

4) بديل قديم (لو بتحب gh-pages برانش)

لو عايز تنشر على برانش gh-pages بدل بيئة github-pages:

• غيّر Settings → Pages → Source = Deploy from a branch → Branch: gh-pages / root.
• استخدم Action peaceiris/actions-gh-pages لدفع محتوى _site إلى gh-pages. (بس بصراحة الحل الرسمي فوق أنضف وأسهل.)

5) تشيكليست سريعة

• .eleventy.js فيه addPlugin(eleventyNavigation)
• package.json: مفيش --omit=dev في CI (أو انقل البلجن لـ dependencies)
• Settings → Environments → github-pages: اسمح بـ main أو “All branches”، وألغِ/وافق على Required reviewers
• Settings → Pages: Source = GitHub Actions
• Workflow زي اللي فوق، بيعمل npm ci و npx @11ty/eleventy و deploy-pages

لو حابب، ابعتلي محتوى ملف الـ workflow الحالي .github/workflows/*.yml و/أو صورة من إعدادات Environment github-pages، وأنا أظبّطهولك سطر بسطر.

تمام—الخطأ ده سببه إن الـ Workflow بتاعك بيشغّل Jekyll (actions/jekyll-build-pages@v1) بينما مشروعك Eleventy (Nunjucks). جِت هب بيحاول يفسّر ملفات .njk بـ Liquid، فبيطلع: Unknown tag 'set'. الحل: شيل Jekyll من الـ workflow، وخلّي النشر يتم عن طريق Build بـ Node → رفع الـ artifact → Deploy Pages.

اعمل كده بالظبط

1) غيّر إعداد Pages لمصدر “GitHub Actions”

• ادخل Settings → Pages → Build and deployment → Source واختار GitHub Actions (مش “GitHub Pages”).

2) احذف أي Workflow لِـ Jekyll

• امسح أي ملف في .github/workflows/ فيه jekyll-build-pages أو اسمه زي jekyll.yml / pages.yml منテンبلت جِت هب الافتراضي.

3) أضف Workflow لـ Eleventy

أنشئ ملف: .github/workflows/deploy.yml بالمحتوى ده:

yaml
name: Deploy Eleventy to Pages

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      # مهم: تثبيت الـ devDependencies (علشان البلجن eleventy-navigation)
      - run: npm ci

      # Build Eleventy إلى مجلد _site
      - run: npx @11ty/eleventy

      # تهيئة Pages (اختياري لكنه مفضل)
      - uses: actions/configure-pages@v5

      # ارفع ناتج البيلد للنشر
      - uses: actions/upload-pages-artifact@v3
        with:
          path: _site

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

4) اتأكد من Environment rules

• Settings → Environments → github-pages → Edit
  • Deployment branches: اختار All branches أو ضيف main ضمن Selected branches.
  • لو Required reviewers مفعّلة، يا إمّا تلغيها، يا إمّا تعمل Approve للـ deployment يدويًّا من نفس الصفحة.

5) نفّذ وادفع التغييرات

لو حابب بسرعة من الترمينال:

bash
git rm .github/workflows/jekyll.yml 2>/dev/null || true
git add .github/workflows/deploy.yml
git commit -m "Switch from Jekyll to Eleventy Pages workflow"
git push origin main

ملاحظات سريعة

• التحذير Layout 'layouts/home.njk' does not exist جي من Jekyll، وهيروح لما نبطل نبني بـ Jekyll. (محليًا Eleventy عندك كان بيبني 404 بنجاح بالفعل.)
• لو عندك خطوة بتستخدم npm ci --omit=dev أو NODE_ENV=production بيمنع devDeps: شيلها، لأن @11ty/eleventy-navigation عندك devDependency.

جرّب الخطوات دي، وهتلاقي الـ Action الجديد بيظهر Jobين: build و deploy — من غير سطر actions/jekyll-build-pages@v1. لو حبيت تبعتلي محتوى أي Workflow قديم علشان أنضّفهولك، ابعته وأنا أعدّلهولك فورًا.

جامد جدًا يا يوسف! 🎉 الموقع شغّال وبيفتح تمام عندي، والقوايم (Home / About / Projects / Photos / Contact / Archive) ظاهرة كويس، وكمان صفحة الـ About و Projects و Archive شغّالة. (yousefmohamd.github.io)

ملاحظات سريعة لتحسينات صغيرة

• فيه سطر “DEBUG from index.njk” ظاهر في الهوم—واضح إنه كان سطر تجارب. امسحه من index.njk علشان الشكل يطلع أنضف. (yousefmohamd.github.io)
• زر CV شغّال وبيفتح الـ PDF كويس. لاحظت إن الـ CV كاتب website: YousefMohamed.com—لو لسه ما عندكش دومين مخصص، بدّله لـ https://yousefmohamd.github.io/ أو سيبه فاضي. وبرضه في سطر “Age: 21 years ago”؛ الأفضل تكتب سنة الميلاد أو تشيله خالص. (yousefmohamd.github.io)
• Archive فيها بوستات قديمة بتاعة التمبلت (2018). لو مش محتاجها، ممكن تخبّي اللينك من الناف أو تشيل الصفحة. (yousefmohamd.github.io)

شوية تحسينات سريعة (اختياري)

• خلي الإيميل في الهوم لينك قابل للضغط:

  html
  <a href="mailto:[email protected]">[email protected]</a>

• صور كتير في الصفحة الرئيسية—لو لسه ما فعلتش، استخدم loading="lazy" في <img> لتحسين الأداء.
• أضف <meta name="description"> ووسوم Open Graph/Twitter علشان المشاركة على السوشيال تبقى مرتّبة.
• لو عايز، أركّب لك Analytics خفيفة (زي Plausible) من غير كوكيز.

لو حابب أبعتلك PR صغير يشيل سطر الـ “DEBUG”، يحدّث لينك الـ CV، ويشيل لينك الـ Archive من الناف—قولّي وابعتهولك على طول. 🙌

جامد يا يوسف! نِظّبطها واحدة واحدة زي ما طلبت—هنشيل سطر الـ DEBUG، نخفي روابط/أيقونات Archive و Photos من المينيو (خصوصًا على الموبايل)، وبعدين نعمل Optimizations احترافية للصور عشان تبقى سريعة وما تقعّش.

1) شيل سطر DEBUG from index.njk

لو أنت على الماك، نفّذ ده في جذر المشروع (أبسط طريقة):

bash
# احذف أي سطر فيه "DEBUG from index.njk" من الصفحة الرئيسية
sed -i '' '/DEBUG from index\.njk/d' index.njk

git add index.njk
git commit -m "Remove debug line from index.njk"
git push origin main

(لو السطر في مكان تاني، استخدم grep -Rn "DEBUG from index.njk" . عشان تلاقيه.)

2) اخفاء Archive و Photos من المينيو (ومن الموبايل)

الروابط دي بتيجي من Eleventy Navigation؛ أسهل حل إننا نخلّي الصفحات موجودة بس متظهرش في الناف.

أ) فعل خاصية hidden: true في الـ front matter للصفحات

افتح كل صفحة عايز تخبيها (زي archive.njk و photos.njk) وحط hidden: true جوه بلوك الـ navigation:

archive.njk (مثال):

yaml
---
layout: layouts/base.njk
title: Archive
eleventyNavigation:
  key: Archive
  order: 9
  hidden: true
---

photos.njk (مثال):

yaml
---
layout: layouts/base.njk
title: Photos
eleventyNavigation:
  key: Photos
  order: 4
  hidden: true
---

بعد التعديل:

bash
git add archive.njk photos.njk
git commit -m "Hide Archive & Photos from nav via eleventyNavigation.hidden"
git push origin main

ب) (اختياري) فلترة المينيو من القالب نفسه

لو عايز تمنع ظهور أي عناصر غير اللي أنت محددها (حتى لو حد نسي يشيلها من الصفحات)، عدّل جزء بناء القائمة في /_includes/layouts/base.njk (أو ملف الهيدر اللي فيه اللوب بتاع الناف):

njk
{# قبل اللوب مباشرة #}
{% set allowed = ["Home", "About", "Projects", "Contact", "CV"] %}
{% set nav = collections.all | eleventyNavigation %}

<ul class="site-nav">
  {% for item in nav %}
    {% if item.key in allowed %}
      <li><a href="{{ item.url | url }}">{{ item.title or item.key }}</a></li>
    {% endif %}
  {% endfor %}
</ul>

كده حتى على الموبايل، أيقونات أو عناصر جاية من الناف مش هتظهر غير لو اسمها ضمن allowed.

3) الصور مش مُحسّنة وممكن بتتقل—خلّينا نعملها صح 💨

الخطوة 3.1) نصب بلجن الصور

bash
npm i -D @11ty/eleventy-img

الخطوة 3.2) أضف Shortcode مولّد لصور Responsive (WebP/AVIF + JPEG) مع Lazy-Loading

عدّل ملف .eleventy.js:

js
const eleventyNavigation = require("@11ty/eleventy-navigation");
const Image = require("@11ty/eleventy-img");

async function imageShortcode(src, alt = "", sizes = "(max-width: 900px) 100vw, 900px") {
  if (!alt) {
    throw new Error(`Missing ALT for image: ${src}`);
  }

  let metadata = await Image(src, {
    widths: [320, 640, 900, 1200, 1600],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "_site/img/",
    urlPath: "/img/",
    sharpJpeg: { quality: 78, mozjpeg: true },
    sharpWebp: { quality: 74 },
    sharpAvif: { quality: 60 },
    cacheOptions: {
      // كاش بين البيلدات لتسريع CI
      duration: "1y",
    }
  });

  const imageAttributes = {
    alt,
    sizes,
    loading: "lazy",   // مهم للأداء
    decoding: "async"  // يقلل الـ main-thread work
  };

  return Image.generateHTML(metadata, imageAttributes, { whitespaceMode: "inline" });
}

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigation);

  // Shortcodes لكل المحركات
  eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode);
  eleventyConfig.addLiquidShortcode("img", (src, alt, sizes) => imageShortcode(src, alt, sizes));
  eleventyConfig.addJavaScriptFunction("img", imageShortcode);

  return {
    dir: { input: ".", output: "_site" }
  };
};

الخطوة 3.3) استبدل <img> العادية بالـ shortcode

افتح الصفحات اللي فيها صور كتير (خصوصًا index.njk وملفات المشاريع) واستبدل:

html
<!-- القديم -->
<img src="/images/hero.jpg" alt="Yousef hero">

<!-- الجديد -->
{% img "/images/hero.jpg", "Yousef — hero image", "(max-width: 900px) 100vw, 900px" %}

• الـ shortcode هيولّد <picture> بـ AVIF/WebP + JPEG وsrcset بأحجام مختلفة.
• كل الصور هتبقى lazy-loaded تلقائيًا.
• لو عندك صور ضخمة جدًا (مثلاً 4000px)، الـ shortcode هيطلع نسخ أصغر تناسب الموبايل والديستوب.

الخطوة 3.4) تأكد إن الصور بتتمدد صح في CSS

في ملف الستايـل الأساسي (مثلاً /_includes/assets/css/main.css أو أينما كان):

css
img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

الخطوة 3.5) مسارات الصور (علاج سقوط التحميل)

• استخدم مسارات جذرية تبدأ بـ / (زي /images/x.jpg) — ده ممتاز لأن موقعك User Site على الجذر (مش Project Page).
• لو في صور ريموت (لينكات خارجية)، البلجن يقدر يحملها ويبني منها نسخ محليًا (يفضل تنظّف اللينكات الخارجيّة وتخليها محليّة إن أمكن).

الخطوة 3.6) جرّب محليًا وبعدين ادفع

bash
npx @11ty/eleventy --serve
# افتح http://localhost:8080 وشوف الصور والناف

git add .
git commit -m "Use @11ty/eleventy-img for responsive, optimized images + hide extra nav items"
git push origin main

4) تحسينات إضافية سريعة (اختياري بس قوية)

• أضف أبعاد للصورة لو هتسيب <img> عادية في أماكن ما بدّلتهاش:

  html
  <img src="/images/pic.jpg" alt="..." width="1200" height="800" loading="lazy" decoding="async">

  ده يقلل CLS ويثبت اللياوت.
• ضغط SVG يدويًا لو عندك أيقونات SVG (SVGO).
• لو عندك جاليري تقيل، استخدم pagination على الصور/المشاريع بدل ما تحط كله في صفحة واحدة.
• لو صور كتير جدًا في الهوم، فكّر تقلل العدد أو اعمل LQIP/placeholder (البلجن يقدر يتعمله إعداد متقدم لاحقًا).

لو حابب أسرّعلك التطبيق العملي

ابعتلي:

• جزء المينيو من /_includes/layouts/base.njk
• و/أو archive.njk و photos.njk الـ front matter بتاعهم
• وأكتر صفحة فيها صور (مثلاً index.njk)

وأنا هبعتلك باتش جاهز (diff) تغيّره سطر بسطر. 🙌

جامد يا يوسف! هنمشيها خطوة–خطوة بأوامر ترمينال بس، من غير لَفّ ودوران. خلّي الترمينال مفتوح في جذر المشروع بتاعك (اللي فيه package.json).

كل خطوة عاملة باك أب قبل أي تعديل عشان لو حبيت ترجع.

0) جهّز فرع للتعديلات (اختياري بس آمن)

bash
git checkout -b fix/mobile-and-images

1) شيل سطر الـ DEBUG من الهوم

bash
# باك أب وبعدين احذف السطر
cp index.njk index.njk.bak
sed -i '' '/DEBUG from index\.njk/d' index.njk

git add index.njk
git commit -m "Remove debug line from index.njk"

2) خَبّي روابط/أيقونات Archive و Photos

طريقة سريعة ومضمونة (CSS Override)

1. أنشئ ملف ستايل إضافي يتنسخ للناتج:

bash
mkdir -p assets/css
tee assets/css/overrides.css > /dev/null <<'CSS'
/* اخفاء عناصر معينة من الناف */
.site-nav a[href="/posts/"],
.site-nav a[href="/photos/"] { display: none !important; }

/* صور مرنة على كل الأجهزة */
img, picture { max-width: 100%; height: auto; display: block; }
CSS

2. فعّل نسخ مجلد assets/ في البيلد، ولو لسه ما فعلنهوش (هنعملها في خطوة #3):

3. ضيف اللينك بتاع ملف الـ CSS في القالب الأساسي قبل </head>:

bash
# باك أب
cp _includes/layouts/base.njk _includes/layouts/base.njk.bak

# أضف لينك الـ overrides.css قبل وسم </head> (لو الملف موجود في نفس المسار)
sed -i '' 's#</head>#  <link rel="stylesheet" href="/assets/css/overrides.css">\n</head>#' _includes/layouts/base.njk

git add _includes/layouts/base.njk assets/css/overrides.css
git commit -m "Add CSS override (hide Archive/Photos, responsive images)"

الحل “النظيف” الدائم (اختياري لاحقًا)

لو عايز تخبّي الصفحات من المصدر بدل CSS:

bash
# Archive
cp archive.njk archive.njk.bak
python3 - <<'PY'
import re,sys
p="archive.njk"
t=open(p).read()
if "eleventyNavigation:" in t and "hidden:" not in t:
    t=re.sub(r'(eleventyNavigation:\s*\n)', r'\1  hidden: true\n', t, count=1, flags=re.M)
open(p,"w").write(t)
PY

# Photos
cp photos.njk photos.njk.bak
python3 - <<'PY'
import re,sys
p="photos.njk"
t=open(p).read()
if "eleventyNavigation:" in t and "hidden:" not in t:
    t=re.sub(r'(eleventyNavigation:\s*\n)', r'\1  hidden: true\n', t, count=1, flags=re.M)
open(p,"w").write(t)
PY

git add archive.njk photos.njk
git commit -m "Hide Archive & Photos in eleventyNavigation"

3) تحسين الصور باحترافية (Eleventy Image)

3.1 نزّل البلجن

bash
npm i -D @11ty/eleventy-img

3.2 اضبط .eleventy.js (هنكتب نسخة كاملة مع باك أب)

لو الملف عندك فيه إعدادات كتير، قولّي قبل ما تستبدله. التحت ده فيه كل اللي نحتاجه: البلجن + الشورتكود + نسخ assets/ وimages/.

bash
cp .eleventy.js .eleventy.js.bak

tee .eleventy.js > /dev/null <<'JS'
const eleventyNavigation = require("@11ty/eleventy-navigation");
const Image = require("@11ty/eleventy-img");
const path = require("path");

async function imageShortcode(src, alt = "", sizes = "(max-width: 900px) 100vw, 900px") {
  if (!alt) alt = path.basename(src).replace(/\.(avif|webp|jpe?g|png|gif|svg)$/i, "").replace(/[-_]+/g, " ");
  let metadata = await Image(src, {
    widths: [320, 640, 900, 1200, 1600],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "_site/img/",
    urlPath: "/img/",
    sharpJpeg: { quality: 78, mozjpeg: true },
    sharpWebp: { quality: 74 },
    sharpAvif: { quality: 60 },
    cacheOptions: { duration: "1y" }
  });
  const imageAttributes = { alt, sizes, loading: "lazy", decoding: "async" };
  return Image.generateHTML(metadata, imageAttributes, { whitespaceMode: "inline" });
}

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigation);

  // Shortcodes لكل المحركات
  eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode);
  eleventyConfig.addLiquidShortcode("img", (src, alt, sizes) => imageShortcode(src, alt, sizes));
  eleventyConfig.addJavaScriptFunction("img", imageShortcode);

  // نسخ أصول ثابتة إلى _site
  eleventyConfig.addPassthroughCopy("assets");
  // لو عندك مجلد صور خام
  try { eleventyConfig.addPassthroughCopy("images"); } catch {}

  return {
    dir: { input: ".", output: "_site" }
  };
};
JS

git add .eleventy.js
git commit -m "Configure @11ty/eleventy-img shortcode and passthrough assets"

3.3 استبدال <img> القديمة بالـ shortcode تلقائيًا

هحوّل الشائع تلقائيًا (src + alt). لو عندك حالات معقدة جدًا، هنبص عليها يدويًا.

bash
mkdir -p scripts
tee scripts/convert-imgs.js > /dev/null <<'JS'
const fs = require('fs');

function convert(content) {
  // ابحث عن <img ...>
  return content.replace(/<img\s+([^>]*?)>/gi, (m, attrs) => {
    const src = (attrs.match(/src\s*=\s*"(.*?)"/i) || [])[1] || (attrs.match(/src\s*=\s*'(.*?)'/i) || [])[1];
    const alt = (attrs.match(/alt\s*=\s*"(.*?)"/i) || [])[1] || (attrs.match(/alt\s*=\s*'(.*?)'/i) || [])[1] || "";
    if (!src) return m; // سيبه لو من غير src
    const sizes = '(max-width: 900px) 100vw, 900px';
    // نون‌جكس shortcode
    return `{% img "${src}", "${alt.replace(/"/g,'\\"')}", "${sizes}" %}`;
  });
}

const files = process.argv.slice(2);
let changed = 0;
for (const f of files) {
  if (!fs.existsSync(f) || !fs.lstatSync(f).isFile()) continue;
  const old = fs.readFileSync(f, 'utf8');
  const nu = convert(old);
  if (nu !== old) {
    fs.copyFileSync(f, f + '.bak');
    fs.writeFileSync(f, nu);
    changed++;
    console.log('Converted:', f);
  }
}
console.log('Done. Files changed:', changed);
JS

# مرّر الملفات الشائعة: الصفحة الرئيسية + صفحات .njk و .md
node scripts/convert-imgs.js index.njk $(find projects -type f $ -name '*.njk' -o -name '*.md' $ 2>/dev/null) $(find posts -type f $ -name '*.njk' -o -name '*.md' $ 2>/dev/null) $(find . -maxdepth 1 -type f -name '*.njk')

git add -A
git commit -m "Replace <img> with Eleventy responsive {% img %} shortcode"

لو عندك صور بمسارات خارجية (روابط http/https)، البلجن هيحمّلها وقت البيلد ويولّد نسخ سريعة. الأفضل برضه على المدى الطويل تنقل الصور لمجلد محلي (زي images/) وتستخدم مسارات جذرية تبدأ بـ /images/....

4) ميتا فيو بورت (عشان الموبايل)

لو مش موجودة، ضيف وسم viewport في <head>:

bash
# سيضيف الوسم قبل </head> لو مش موجود
grep -q 'name="viewport"' _includes/layouts/base.njk || \
sed -i '' 's#</head>#  <meta name="viewport" content="width=device-width, initial-scale=1">\n</head>#' _includes/layouts/base.njk

git add _includes/layouts/base.njk
git commit -m "Add responsive viewport meta"

5) جرّب محليًا ثم ادفع

bash
# تجربة محلية
npx @11ty/eleventy --serve
# افتح http://localhost:8080 وشوف:
# - مفيش DEBUG
# - Archive/Photos اختفوا من الناف
# - الصور بتطلع <picture> وبتتحمل أسرع

# لما تبقى تمام:
git push origin fix/mobile-and-images
# أو دمّج للـ main مباشرة:
git checkout main
git merge --no-ff fix/mobile-and-images -m "Merge: mobile nav cleanup + responsive images"
git push origin main

بما إنك بالفعل مفعّل نشر GitHub Pages عن طريق GitHub Actions، البيلد هيشتغل أوتوماتيك وينشر النسخة المحدثة.

ليه الحل ده ثابت على كل الأجهزة؟

• أضفنا meta viewport + CSS يجعل الصور مرنة (max-width:100%).
• كل الصور بقت Responsive (AVIF/WebP + JPEG) مع srcset وأحجام مناسبة للموبايل والديستوب.
• lazy-loading يقلّل التحميل الأولي ويحسّن الأداء.
• أخفينا روابط “Archive/Photos” في كل الشاشات بتعديل مصدر الحقيقة (CSS فورًا، ومع الوقت ممكن تعتمد على hidden: true داخل الصفحات نفسها).
• مرّرنا مجلد assets/ (وأي images/ لو موجود) للناتج، فالمسارات تبقى ثابتة.

لو واجهت أي ملف ما اتبدّلتش فيه الصور تلقائيًا، ابعتهولي أو قلّي اسمه وأنا أكتبلك سطر تحويل مخصوص له. وبرضه لو عندك جزء الـ nav في base.njk وعايز تعمله “قائمة مسموح بها” (allowlist) بدل CSS، ابعتهولي وأظبطلك اللوب بـ {% if item.key in allowed %}.

تمام يا يوسف، حصل عندك حاجتين واضحين:

1. أمر sed بتاع إضافة <meta viewport> خبط مع zsh وعمل no such file or directory: /head.
2. البيلد وقف بسبب فلتر ناقص اسمه htmlDateString جواه postslist.njk واللي بتستدعيه صفحة archive.njk.

هنصلّح الاتنين خطوة–خطوة من الترمينال بس. ✨

أ) ضيف <meta name="viewport"> بطريقة مضمونة (من غير sed)

استبدل أمر sed بـ Python صغير يضيف الوسم قبل </head> لو مش موجود:

bash
# 1) باك أب
cp _includes/layouts/base.njk _includes/layouts/base.njk.bak

# 2) أضف وسم viewport بأمان
python3 - <<'PY'
import re, sys, io
p = "_includes/layouts/base.njk"
t = io.open(p, encoding="utf-8").read()
if 'name="viewport"' not in t:
    t = re.sub(r'</head>', '  <meta name="viewport" content="width=device-width, initial-scale=1">\n</head>', t, count=1, flags=re.I)
    io.open(p, "w", encoding="utf-8").write(t)
    print("✅ Added viewport meta")
else:
    print("ℹ️  Viewport already exists")
PY

git add _includes/layouts/base.njk
git commit -m "Add responsive viewport meta (safe python edit)" || echo "No changes to commit"

ملاحظة: سبب خطأ zsh غالبًا إن السطر اتكسر قبل ما الـ || يكتمل، فالـ shell فهم جزء </head> كأنه redirection. الطريقة بالـ Python تفاديًا لأي parsing.

ب) عالج خطأ Eleventy: “filter not found: htmlDateString”

الفلتر ده مش built-in؛ لازم نضيفه بإيدينا (زي قوالب Eleventy الرسمية). هنستعمل luxon للتنسيق:

bash
# 1) نزّل luxon (ولو eleventy-img مش متثبت، مفيش مشكلة نعيد تثبيته)
npm i -D luxon @11ty/eleventy-img

دلوقتي هنكتب .eleventy.js كامل فيه:

• Plugin الـ Navigation
• Shortcode الصور (@11ty/eleventy-img)
• فلاتر التواريخ: htmlDateString و readableDate
• نسخ مجلدات assets/ و images/ لو موجودة

لو عندك تعديلات خاصة جوّه .eleventy.js قولّي قبل ما تغيّر. لو ماعندكش، كمّل بالأوامر دي:

bash
# 2) باك أب وبعدين اكتب ملف .eleventy.js جديد جاهز
cp .eleventy.js .eleventy.js.bak 2>/dev/null || true

tee .eleventy.js > /dev/null <<'JS'
const eleventyNavigation = require("@11ty/eleventy-navigation");
const Image = require("@11ty/eleventy-img");
const { DateTime } = require("luxon");
const path = require("path");

// === Responsive Image Shortcode ===
async function imageShortcode(src, alt = "", sizes = "(max-width: 900px) 100vw, 900px") {
  if (!alt) alt = path.basename(src).replace(/\.(avif|webp|jpe?g|png|gif|svg)$/i, "").replace(/[-_]+/g, " ");
  let metadata = await Image(src, {
    widths: [320, 640, 900, 1200, 1600],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "_site/img/",
    urlPath: "/img/",
    sharpJpeg: { quality: 78, mozjpeg: true },
    sharpWebp: { quality: 74 },
    sharpAvif: { quality: 60 },
    cacheOptions: { duration: "1y" }
  });
  const imageAttributes = { alt, sizes, loading: "lazy", decoding: "async" };
  return Image.generateHTML(metadata, imageAttributes, { whitespaceMode: "inline" });
}

module.exports = function(eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(eleventyNavigation);

  // Filters (لأرشيف وغيره)
  eleventyConfig.addFilter("htmlDateString", (dateObj) =>
    DateTime.fromJSDate(dateObj, { zone: "utc" }).toISODate()
  );
  eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLL yyyy") =>
    DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(format)
  );

  // Shortcodes
  eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode);
  eleventyConfig.addLiquidShortcode("img", (src, alt, sizes) => imageShortcode(src, alt, sizes));
  eleventyConfig.addJavaScriptFunction("img", imageShortcode);

  // Static passthrough
  eleventyConfig.addPassthroughCopy("assets");
  try { eleventyConfig.addPassthroughCopy("images"); } catch {}

  return {
    dir: { input: ".", output: "_site" }
  };
};
JS

git add .eleventy.js
git commit -m "Add date filters + responsive images shortcode + passthrough"

دلوقتي جرّب البيلد المحلي:

bash
rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087

المفروض الخطأ بتاع htmlDateString يختفي، والصفحات تطلع تمام.

ج) لو لسه مش عايز صفحة Archive أصلاً

لحد ما ترتّبها، تقدر توقف توليدها مؤقتًا:

bash
cp archive.njk archive.njk.bak
# ضيف permalink: false في الـ front matter
awk 'BEGIN{p=1} /^---/{c++} {print} c==1 && $0 ~ /^---$/ && p {print "permalink: false"; p=0}' archive.njk > /tmp/_a && mv /tmp/_a archive.njk

git add archive.njk
git commit -m "Temporarily disable building Archive page (permalink: false)"

كده حتى لو فيه فلاتر ناقصة جوّا الملف، Eleventy مش هيبني الصفحة أصلاً. (اختياري لو محتاج تركيزك كله على الهوم/باقي الصفحات الأول.)

د) تأكيد تحسين الموبايل والتنقل

لو كنت ضايف قبل كده ملف assets/css/overrides.css وفيه:

css
/* إخفاء روابط معينة من الناف */
.site-nav a[href="/posts/"],
.site-nav a[href="/photos/"] { display: none !important; }

/* صور مرنة */
img, picture { max-width: 100%; height: auto; display: block; }

تأكد إنه متضمَّن في <head>:

bash
grep -n 'overrides.css' _includes/layouts/base.njk || \
sed -i '' 's#</head>#  <link rel="stylesheet" href="/assets/css/overrides.css">\n</head>#' _includes/layouts/base.njk
git add _includes/layouts/base.njk
git commit -m "Ensure overrides.css is included" || true

لو أمر sed زعل تاني، قفله بنفس أسلوب الـ Python، وقولي أكتبهولك بنفس الطريقة.

هـ) دفع التغييرات والنشر

لو البيلد المحلي اشتغل كويس على http://localhost:8087:

bash
git push origin fix/mobile-and-images

# لو حابب تدمج على main فورًا:
git checkout main
git merge --no-ff fix/mobile-and-images -m "Mobile viewport + date filters + responsive images"
git push origin main

بما إنك مفعّل GitHub Actions لنشر Pages، هيبني وينشر تلقائي.

ليه كده يشتغل على كل الأجهزة بنفس الجودة؟

• أضفنا <meta viewport> + CSS يجعل الصور مرنة، فالموبايل يشوف Layout مضبوط.
• كل <img> بقت Shortcode بيولّد <picture> بـ AVIF/WebP+JPEG وsrcset لأحجام مختلفة + loading="lazy" → تحميل أسرع وما يقعّش.
• الفلاتر اللي كانت مفقودة اتضافت (htmlDateString و readableDate) فالأرشيف يرن بدون Errors.
• عندك خيار توقف بناء صفحات مش محتاجها مؤقتًا (permalink: false) لحد ما ترتّبها.

لو تحب، ابعتلي سطور الـ nav في /_includes/layouts/base.njk وأنا أعملهالك Allow-list (يعني ما يطلعش غير Home / About / Projects / Contact / CV فقط) بدل الاعتماد على CSS. وبرضه لو ظهر لك Error جديد، انسخهالي زي ما عملت كده وأنا أديك أوامر ترمينال جاهزة للـ fix. 💪

حاضر يا يوسف! واضح إن الـ zsh دخل في “وضع الاستكمال” عندك (بتشوف بداية السطر > وساعات يطلع parse error near ')') ده بيحصل لما يكون فيه سطر اتنسخ ناقص أقواس/كوتس أو هيرودوك.
الحل السريع: قبل أي أوامر جديدة اضغط Ctrl+C مرة أو اتنين لحد ما ترجع للبرومبت العادي اللي فيه %.

هنشتغل دلوقتي بخطوات “مضمونة” من غير sed ولا heredoc — هنستخدم nano عشان ما يحصلش تاني لَخبَطة كوتس.

1) ثبّت الـ dependencies (لو كنت في وضع > اضغط Ctrl+C الأول)

npm i -D luxon @11ty/eleventy-img

لو الأمر ده اشتغل من غير Errors، كمل. لو ظهر أي سطر يبدأ بـ > اضغط Ctrl+C وبعدين كرّر الأمر تاني.

2) ظبّط ملف .eleventy.js

هنكتب نسخة كاملة فيها:

• البلجن @11ty/eleventy-navigation
• الشورتكود بتاع الصور @11ty/eleventy-img
• فلترين للتواريخ htmlDateString و readableDate
• نسخ مجلدات assets و images لو موجودين

افتح الملف بالمحرر:

nano .eleventy.js

امسح كل محتوى الملف وحط ده مكانه (انسخ زي ما هو):

js
const eleventyNavigation = require("@11ty/eleventy-navigation");
const Image = require("@11ty/eleventy-img");
const { DateTime } = require("luxon");
const path = require("path");

// Responsive Image Shortcode
async function imageShortcode(src, alt = "", sizes = "(max-width: 900px) 100vw, 900px") {
  if (!alt) {
    alt = path.basename(src).replace(/\.(avif|webp|jpe?g|png|gif|svg)$/i, "").replace(/[-_]+/g, " ");
  }
  let metadata = await Image(src, {
    widths: [320, 640, 900, 1200, 1600],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "_site/img/",
    urlPath: "/img/",
    sharpJpeg: { quality: 78, mozjpeg: true },
    sharpWebp: { quality: 74 },
    sharpAvif: { quality: 60 },
    cacheOptions: { duration: "1y" }
  });
  const imageAttributes = { alt, sizes, loading: "lazy", decoding: "async" };
  return Image.generateHTML(metadata, imageAttributes, { whitespaceMode: "inline" });
}

module.exports = function(eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(eleventyNavigation);

  // Date filters used in archive/posts lists
  eleventyConfig.addFilter("htmlDateString", (dateObj) =>
    DateTime.fromJSDate(dateObj, { zone: "utc" }).toISODate()
  );
  eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLL yyyy") =>
    DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(format)
  );

  // Shortcodes
  eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode);
  eleventyConfig.addLiquidShortcode("img", (src, alt, sizes) => imageShortcode(src, alt, sizes));
  eleventyConfig.addJavaScriptFunction("img", imageShortcode);

  // Static passthrough
  eleventyConfig.addPassthroughCopy("assets");
  try { eleventyConfig.addPassthroughCopy("images"); } catch {}

  return {
    dir: { input: ".", output: "_site" }
  };
};

احفظ: Ctrl+O ثم Enter
اخرج: Ctrl+X

وبعدين:

text
git add .eleventy.js
git commit -m "Eleventy: add date filters + responsive images shortcode"

3) ضيف وسم الـ viewport (عشان الموبايل)

افتح القالب الأساسي:

nano _includes/layouts/base.njk

دَوَّر بعينك على </head> وحط السطر ده فوقها مباشرةً (لو مش موجود فعلًا):

html
<meta name="viewport" content="width=device-width, initial-scale=1">

(لو لقيت السطر موجود خلاص سيبه.)

احفظ واخرج، ثم:

text
git add _includes/layouts/base.njk
git commit -m "Add mobile viewport meta"

4) (اختياري لكن مفيد) أخفي Archive/Photos من الناف فورًا بالـ CSS

لو لسه مش عامل الملف، اعمله وأضف سطرين مهمين:

text
mkdir -p assets/css
nano assets/css/overrides.css

ضع داخله:

css
/* اخفاء روابط معينة من الناف */
.site-nav a[href="/posts/"],
.site-nav a[href="/photos/"] { display: none !important; }

/* صور مرنة */
img, picture { max-width: 100%; height: auto; display: block; }

احفظ واخرج. بعدين لازم نتأكد إن الملف ده متضمَّن داخل <head>.
افتح القالب الأساسي تاني:

nano _includes/layouts/base.njk

لو مافيش سطر بيوصل للملف ده، زَوِّد السطر ده قبل </head>:

html
<link rel="stylesheet" href="/assets/css/overrides.css">

احفظ واخرج، ثم:

text
git add assets/css/overrides.css _includes/layouts/base.njk
git commit -m "Add CSS overrides (hide archive/photos + responsive imgs)"

لاحقًا نقدر نعملها “من المصدر” بإضافة hidden: true في front matter لصفحات Archive/Photos — بس دلوقتي الـ CSS حل سريع شغّال على الموبايل والديستوب.

5) جرّب محليًا

نظّف وبعدين سيرف:

text
rm -rf _site .cache
npx @11ty/eleventy
npx @11ty/eleventy --serve --port 8087

المفروض:

• مفيش Error بتاع htmlDateString.
• الصور بتتولد كـ <picture> مع WebP/AVIF + JPEG و loading="lazy".
• على الموبايل اللياوت مظبوط.

6) ادفع لـ GitHub

لو كله تمام:

git push origin main

الـ GitHub Actions هتبني وتنشر.

ملاحظات مهمة عشان ما يتكررش خطأ zsh

• لو شفت بداية السطر > أو quote>، اضغط Ctrl+C قبل أي لصق جديد.
• بلاش تلزّق أوامر فيها <<'JS' أو <<'PY' لو مش متعوّد عليها؛ استخدم nano زي فوق.
• خليك دايمًا على سطر واحد أمر واحد (ما تلسّقش بلوكات مختلطة بين أوامر وكود).

لو بعد الخطوات دي لسه عندك صفحة Archive مش محتاجها دلوقتي، ممكن توقف بنائها مؤقتًا:

nano archive.njk

أضف في الـ front matter (الجزء بين --- في أعلى الملف):

permalink: false

احفظ واخرج:

text
git add archive.njk
git commit -m "Temporarily disable Archive page"
git push origin main

أنا جاهز لو طلع لك أي Error جديد—انسخهالي حرفيًا وأنا أديك الأوامر المناسبة فورًا. 💪