docs(facade): rozbuduj rozdział Facade (opis, przykład, diagram)

chapters/patterns/sdp/sdps/facade.md

@@ -10,15 +10,100 @@
 
 ## Description
 
-- Similar to [Adapter Pattern](chapters/patterns/sdp/sdps/adapter.md),
-  but **Facade** will create a brand new interface
-- Use Cases (when to use this pattern)
-  - Hide implementation details on one class method
+**Fasada** to wzorzec strukturalny, który udostępnia _jeden prosty interfejs_
+do złożonego podsystemu wielu klas/funkcji. Klient woła jedną metodę zamiast
+orkiestrować ręcznie kilka kroków w odpowiedniej kolejności.
+
+Fasada nie ukrywa podsystemu na zawsze — to wygodne „wejście frontowe". Jeśli
+ktoś potrzebuje pełnej kontroli, wciąż może sięgnąć do klas pod spodem.
+
+- Use Cases (kiedy stosować)
+  - Sekwencja kroków (`makeThingA → makeThingB → makeThingC`) powtarza się
+    w wielu miejscach — chcesz ją nazwać i schować za jedną metodą.
+  - Chcesz dać klientom tylko te funkcje, na których naprawdę im zależy.
+  - Opakowujesz skomplikowaną bibliotekę w prosty, własny interfejs.
 - Pros
-  - Provides a simple interface to a complex subsystem
-  - Includes only those features that clients really care about
+  - Prosty interfejs do złożonego podsystemu.
+  - Mniej duplikacji — kolejność kroków zdefiniowana raz.
+  - Odizolowanie klienta od zmian w środku podsystemu.
 - Cons
-  - Code could be coupled with too much deps
+  - Fasada może urosnąć do „boskiego obiektu" sprzężonego ze wszystkim.
+  - Dodatkowa warstwa pośrednia.
+
+### Fasada vs Adapter
+
+Oba opakowują coś istniejącego, ale w innym celu:
+
+- **Fasada** _upraszcza_ — tworzy **nowy, wygodniejszy** interfejs do wielu klas.
+- [Adapter](chapters/patterns/sdp/sdps/adapter.md) _dopasowuje_ — tłumaczy
+  istniejący interfejs na **inny, konkretny, oczekiwany** przez klienta.
+
+## Diagram
+
+```mermaid
+flowchart LR
+    Client([Client]) --> Facade["handlePiotr() / Facade"]
+    subgraph Subsystem [Złożony podsystem]
+        A["makeThingA()"]
+        B["makeThingB()"]
+        C["makeThingC()"]
+    end
+    Facade --> A
+    Facade --> B
+    Facade --> C
+```
+
+## Example
+
+### Problem — klient ręcznie orkiestruje kroki
+
+```js
+function makeThingA() { console.log("make thing A happen..."); }
+function makeThingB(thing) { console.log("make thing B happen...", thing); }
+function makeThingC(number) { console.log("make thing C happen...", number); }
+
+const name = "piotr";
+
+// kolejność i argumenty kroków powtórzone w każdej gałęzi
+if (name === "piotr") {
+  makeThingA();
+  makeThingB("kanapka");
+  makeThingC(76);
+} else if (name === "mateusz") {
+  makeThingA();
+  makeThingB("tenis");
+  makeThingC(55);
+}
+```
+
+### Solution — fasada nazywa i chowa sekwencję
+
+```js
+function makeThingA() { console.log("make thing A happen..."); }
+function makeThingB(thing) { console.log("make thing B happen...", thing); }
+function makeThingC(number) { console.log("make thing C happen...", number); }
+
+// fasady: prosty interfejs ukrywający kolejność kroków
+function handlePiotr() {
+  makeThingA();
+  makeThingB("kanapka");
+  makeThingC(76);
+}
+
+function handleMateusz() {
+  makeThingA();
+  makeThingB("tenis");
+  makeThingC(55);
+}
+
+const name = "piotr";
+
+if (name === "piotr") {
+  handlePiotr();
+} else if (name === "mateusz") {
+  handleMateusz();
+}
+```
 
 ## Resources
 

index.html

@@ -39,8 +39,36 @@
           crossChapter: true,
           crossChapterText: true,
         },
+        markdown: {
+          renderer: {
+            code(code, lang) {
+              if (lang === "mermaid") {
+                return `<div class="mermaid">${code}</div>`;
+              }
+              return this.origin.code.apply(this, arguments);
+            },
+          },
+        },
+        plugins: [
+          function mermaidPlugin(hook) {
+            hook.doneEach(function () {
+              if (!window.mermaid) return;
+              const nodes = document.querySelectorAll(
+                ".mermaid:not([data-processed])"
+              );
+              if (nodes.length === 0) return;
+              // run() zwraca Promise — łapiemy odrzucenie, by konsola była czysta
+              Promise.resolve(window.mermaid.run({ nodes })).catch(() => {});
+            });
+          },
+        ],
       };
     </script>
+    <script src="//unpkg.com/mermaid/dist/mermaid.min.js"></script>
+    <script>
+      window.mermaid &&
+        window.mermaid.initialize({ startOnLoad: false, theme: "default" });
+    </script>
     <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
     <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
     <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>