docs(ar): add Arabic translation for documentation pages

.markdownlint.json

@@ -13,6 +13,7 @@
   "MD034": false,
   "MD036": false,
   "MD041": false,
+  "MD060": false,
   "MD059": false,
   "no-hard-tabs": false,
   "whitespace": false

cypress/e2e/check-server-side-rendering.cy.js

@@ -6,13 +6,13 @@ describe("server side rendered page", () => {
     cy.get('head meta[name="description"]').should(
       "have.attr",
       "content",
-      "Learn how to bundle a JavaScript application with webpack 5.",
+      "تعلّم كيفية تجميع تطبيق JavaScript باستخدام webpack 5.",
     );
   });
 
   it("should find html tag with lang", () => {
     cy.visit("/");
-    cy.get('html[lang="en"]');
+    cy.get('html[lang="ar"][dir="rtl"]');
   });
 
   it("should find meta charset", () => {
@@ -25,7 +25,7 @@ describe("server side rendered page", () => {
     cy.get('head meta[name="description"]').should(
       "have.attr",
       "content",
-      "webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.",
+      "webpack هو module bundler. هدفه الأساسي حزم ملفات JavaScript لاستخدامها في المتصفح، ويمكنه كذلك تحويل أي resource أو asset تقريبًا وحزمه أو تجهيزه.",
     );
   });
 
@@ -34,6 +34,6 @@ describe("server side rendered page", () => {
     cy.title().should("eq", "webpack");
 
     cy.visit("/guides/getting-started/");
-    cy.title().should("eq", "Getting Started | webpack");
+    cy.title().should("eq", "البدء | webpack");
   });
 });

cypress/e2e/mobile-and-404.cy.js

@@ -12,7 +12,7 @@ describe("Mobile Sidebar", () => {
       "sidebar-mobile--visible",
     );
 
-    cy.get('button[aria-label="Toggle navigation menu"]').click();
+    cy.get('button[aria-label="فتح قائمة التنقل"]').click();
     cy.get(".sidebar-mobile").should("have.class", "sidebar-mobile--visible");
 
     cy.get(".sidebar-mobile__close").click();
@@ -23,7 +23,7 @@ describe("Mobile Sidebar", () => {
   });
 
   it("should close sidebar when clicking outside", () => {
-    cy.get('button[aria-label="Toggle navigation menu"]').click();
+    cy.get('button[aria-label="فتح قائمة التنقل"]').click();
     // Click to the right of the 300px wide sidebar
     cy.get("body").click(350, 500, { force: true });
     cy.get(".sidebar-mobile").should(

cypress/e2e/offline.cy.js

@@ -53,7 +53,7 @@ describe("offline", () => {
 
     it("shows /migrate/ page", () => {
       const url = "/migrate/";
-      const text = "Migrate";
+      const text = "الترقية";
 
       cy.visit(url);
       cy.get("h1").contains(text);
@@ -73,9 +73,8 @@ describe("offline", () => {
       cy.visit(url);
       cy.get("h1").contains(text);
 
-      // click `guides` link
-      cy.get('a[title="guides"]').click();
-      cy.get("h1").contains("Guides");
+      cy.get('a[title="الأدلة"]').click();
+      cy.get("h1").contains("الأدلة");
     });
 
     it("open print dialog when accessing /printable url", () => {

cypress/e2e/page-hash-navigation.cy.js

@@ -2,11 +2,15 @@
 
 describe("Page hash navigation", () => {
   it("scrolls to the element specified by the hash", () => {
-    cy.visit("/guides/getting-started/#basic-setup");
+    const hash = encodeURI("#الإعداد-الأساسي");
 
-    cy.location("hash").should("eq", "#basic-setup");
+    cy.visit(`/guides/getting-started/${hash}`);
 
-    cy.get("#basic-setup", { timeout: 10000 })
+    cy.location("hash").then((locationHash) => {
+      expect(locationHash).to.equal(hash);
+    });
+
+    cy.get(`[id="${hash.slice(1)}"]`, { timeout: 10000 })
       .should("exist")
       .then(($el) => {
         const rect = $el[0].getBoundingClientRect();

cypress/e2e/scroll.cy.js

@@ -1,6 +1,10 @@
 "use strict";
 
 const sizes = ["iphone-6", "macbook-15"];
+const basicSetupHash = encodeURI("#الإعداد-الأساسي");
+const compileInMemoryHash = encodeURI("#الترجمة-في-الذاكرة");
+const developmentHash = encodeURI("#التطوير");
+const generalHash = encodeURI("#عام");
 
 describe("Scroll Test", () => {
   for (const size of sizes) {
@@ -10,7 +14,7 @@ describe("Scroll Test", () => {
       // scroll to Contributors section
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.isNotInViewport("#basic-setup");
+      cy.isNotInViewport(`[id="${basicSetupHash.slice(1)}"]`);
 
       cy.visit("/guides/build-performance/");
       cy.isNotInViewport('[data-testid="contributors"]');
@@ -20,10 +24,10 @@ describe("Scroll Test", () => {
       cy.visit("/guides/getting-started");
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.visit("/guides/build-performance/#development");
-      // since we lazy load notification bar now, #development element is a little out of viewport now
-      cy.isInViewport("#compile-in-memory");
-      cy.isNotInViewport("#general");
+      cy.visit(`/guides/build-performance/${developmentHash}`);
+      // since we lazy load notification bar now, #التطوير element is a little out of viewport now
+      cy.isInViewport(`[id="${compileInMemoryHash.slice(1)}"]`);
+      cy.isNotInViewport(`[id="${generalHash.slice(1)}"]`);
     });
   }
 });

eslint.config.mjs

@@ -28,6 +28,7 @@ export default defineConfig([
     extends: [configs["browser/recommended-outdated-module"]],
     files: [
       "src/components/**/*.{js,jsx}",
+      "src/config/site.js",
       "src/utilities/test-local-storage.js",
       "src/*.jsx",
       "src/sw.js",

package.json

@@ -22,9 +22,9 @@
   "main": "n/a",
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf \"src/content/**/printable.mdx\"",
+    "clean-printable": "rimraf --glob \"src/content/**/printable.mdx\"",
     "preclean": "run-s clean-dist clean-printable",
-    "clean": "rimraf \"src/content/**/_*.mdx\" \"src/**/_*.json\" \"repositories/*.json\"",
+    "clean": "rimraf --glob \"src/content/**/_*.mdx\" \"src/**/_*.json\" \"repositories/*.json\"",
     "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --config-node-env development",
     "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
     "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
@@ -43,15 +43,15 @@
     "lint": "run-s lint:*",
     "lint:prettier": "prettier --cache --list-different --ignore-unknown .",
     "lint:js": "eslint --cache --cache-location .cache/.eslintcache .",
-    "lint:markdown": "markdownlint --config ./.markdownlint.json --rules ./src/utilities/markdown-lint-enforce-lang-aliases.js '**/*.{md,mdx}'",
+    "lint:markdown": "markdownlint --config ./.markdownlint.json --rules ./src/utilities/markdown-lint-enforce-lang-aliases.js \"**/*.{md,mdx}\"",
     "lint:prose": "vale --config='.vale.ini' src/content",
     "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip /contribute/Governance --skip https:// --skip http:// --skip sw.js --skip /vendor > internal-links.tap; cat internal-links.tap | tap-spot",
     "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "rss": "node src/scripts/generate-rss.mjs",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "preprintable": "npm run clean-printable",
     "printable": "node ./src/scripts/concatenate-docs.mjs",
-    "jest": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest.config.mjs",
+    "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --config=jest.config.mjs",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
     "prettier": "prettier --cache --write --ignore-unknown .",

src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

@@ -131,13 +131,13 @@ export default function CodeBlockWithCopy({ children }) {
               ? "bg-red-500 hover:bg-red-700"
               : "bg-[#175d96] hover:bg-[#2f85d0]",
         )}
-        aria-label="Copy code to clipboard"
+        aria-label="نسخ الكود إلى الحافظة"
       >
         {copyStatus === "copied"
-          ? "Copied!"
+          ? "تم النسخ"
           : copyStatus === "error"
-            ? "Error"
-            : "Copy"}
+            ? "تعذر النسخ"
+            : "نسخ"}
       </button>
 
       <pre ref={preRef}>{children}</pre>

src/components/Dropdown/Dropdown.jsx

@@ -86,7 +86,7 @@ export default function Dropdown({ className = "", items = [] }) {
         ref={dropdownButtonRef}
         aria-haspopup="true"
         aria-expanded={String(active)}
-        aria-label="Select language"
+        aria-label="اختيار اللغة"
         onClick={handleClick}
         className="cursor-pointer text-white border-none bg-transparent m-0 p-0 text-[length:inherit] flex items-center"
       >
@@ -141,7 +141,7 @@ export default function Dropdown({ className = "", items = [] }) {
                 href={item.url}
                 className="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
               >
-                <span lang={item.lang} className="align-top text-left">
+                <span lang={item.lang} className="align-top text-start">
                   {item.title}
                 </span>
               </a>

src/components/Dropdown/Dropdown.test.jsx

@@ -11,6 +11,7 @@ const items = [
   { title: "French", url: "/fr/", lang: "fr" },
   { title: "Spanish", url: "/es/", lang: "es" },
 ];
+const languageButtonName = /اختيار اللغة/;
 
 function getListWrapper(container) {
   return container.querySelector("ul").closest("div");
@@ -24,7 +25,7 @@ describe("Dropdown", () => {
   it("renders the toggle button", () => {
     render(<Dropdown items={items} />);
     expect(
-      screen.getByRole("button", { name: /select language/i }),
+      screen.getByRole("button", { name: languageButtonName }),
     ).toBeTruthy();
   });
 
@@ -52,7 +53,7 @@ describe("Dropdown", () => {
 
   it("toggles dropdown on button click", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -63,7 +64,7 @@ describe("Dropdown", () => {
 
   it("sets aria-expanded correctly", () => {
     render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     expect(button.getAttribute("aria-expanded")).toBe("false");
     fireEvent.click(button);
@@ -79,7 +80,7 @@ describe("Dropdown", () => {
 
   it("closes on Escape key", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -95,7 +96,7 @@ describe("Dropdown", () => {
 
   it("closes when clicking outside", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -109,7 +110,7 @@ describe("Dropdown", () => {
 
   it("does not close dropdown when arrow keys are pressed", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
     fireEvent.click(button);
 
     const links = screen.getAllByRole("link");

src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`Dropdown matches snapshot 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    aria-label="Select language"
+    aria-label="اختيار اللغة"
     class="cursor-pointer text-white border-none bg-transparent m-0 p-0 text-[length:inherit] flex items-center"
   >
     <svg
@@ -62,7 +62,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/en/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="en"
           >
             English
@@ -77,7 +77,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/fr/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="fr"
           >
             French
@@ -92,7 +92,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/es/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="es"
           >
             Spanish