Release: Netlify_2026-01-02.02

.github/workflows/sync-main-to-dev.yml

@@ -12,16 +12,23 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.SYNC_BOT_APP_ID }}
+          private-key: ${{ secrets.SYNC_BOT_PRIVATE_KEY }}
+
       - name: Checkout
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          token: ${{ secrets.SYNC_BOT_TOKEN_CHRISERT }}
+          token: ${{ steps.app-token.outputs.token }}
 
       - name: Configure Git
         run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git config user.name "chrisert-sync-bot[bot]"
+          git config user.email "chrisert-sync-bot[bot]@users.noreply.github.com"
 
       - name: Sync main to dev
         run: |
@@ -41,5 +48,5 @@ jobs:
           git commit --allow-empty -m "chore: sync from main [skip ci]"
 
           # Push with force-with-lease (safe force push that fails if remote has new commits)
-          # This workflow uses a PAT with admin bypass to push directly to the protected branch
+          # This workflow uses a GitHub App token to push to the protected branch
           git push origin dev --force-with-lease

src/components/common/SEO.jsx → src/components/common/Seo.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 
-const SEO = ({
+const Seo = ({
   title,
   description,
   keywords,
@@ -51,7 +51,7 @@ const SEO = ({
   );
 };
 
-SEO.propTypes = {
+Seo.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   keywords: PropTypes.string,
@@ -60,5 +60,5 @@ SEO.propTypes = {
   ogType: PropTypes.string,
 };
 
-export { SEO };
-export default SEO;
+export { Seo };
+export default Seo;

src/components/common/SEO.test.jsx → src/components/common/Seo.test.jsx

@@ -1,40 +1,40 @@
 import { render } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import { SEO } from "./SEO";
+import { Seo } from "./Seo";
 
-describe("SEO", () => {
+describe("Seo", () => {
   it("renders title with site name", () => {
-    render(<SEO title="Contactos" />);
+    render(<Seo title="Contactos" />);
     expect(document.title).toBe("Contactos | Chrisert");
   });
 
   it("renders default title when no title prop provided", () => {
-    render(<SEO />);
+    render(<Seo />);
     expect(document.title).toBe(
       "Chrisert - Especialistas em ETICS e Isolamento Térmico"
     );
   });
 
   it("renders meta description", () => {
-    render(<SEO description="Descrição personalizada" />);
+    render(<Seo description="Descrição personalizada" />);
     const metaDescription = document.querySelector('meta[name="description"]');
     expect(metaDescription).toHaveAttribute("content", "Descrição personalizada");
   });
 
   it("renders default description when not provided", () => {
-    render(<SEO />);
+    render(<Seo />);
     const metaDescription = document.querySelector('meta[name="description"]');
     expect(metaDescription?.getAttribute("content")).toContain("ETICS");
   });
 
   it("renders meta keywords", () => {
-    render(<SEO keywords="isolamento, capoto" />);
+    render(<Seo keywords="isolamento, capoto" />);
     const metaKeywords = document.querySelector('meta[name="keywords"]');
     expect(metaKeywords).toHaveAttribute("content", "isolamento, capoto");
   });
 
   it("renders canonical URL with base URL", () => {
-    render(<SEO canonical="/contactos" />);
+    render(<Seo canonical="/contactos" />);
     const canonicalLink = document.querySelector('link[rel="canonical"]');
     expect(canonicalLink).toHaveAttribute(
       "href",
@@ -43,14 +43,14 @@ describe("SEO", () => {
   });
 
   it("renders default canonical URL when not provided", () => {
-    render(<SEO />);
+    render(<Seo />);
     const canonicalLink = document.querySelector('link[rel="canonical"]');
     expect(canonicalLink).toHaveAttribute("href", "https://chrisert.pt");
   });
 
   it("renders Open Graph meta tags", () => {
     render(
-      <SEO
+      <Seo
         title="Portfolio"
         description="Os nossos trabalhos"
         canonical="/portfolio"
@@ -73,19 +73,19 @@ describe("SEO", () => {
   });
 
   it("renders custom ogType", () => {
-    render(<SEO ogType="article" />);
+    render(<Seo ogType="article" />);
     const ogType = document.querySelector('meta[property="og:type"]');
     expect(ogType).toHaveAttribute("content", "article");
   });
 
   it("renders custom ogImage", () => {
-    render(<SEO ogImage="https://example.com/image.jpg" />);
+    render(<Seo ogImage="https://example.com/image.jpg" />);
     const ogImage = document.querySelector('meta[property="og:image"]');
     expect(ogImage).toHaveAttribute("content", "https://example.com/image.jpg");
   });
 
   it("renders Twitter meta tags", () => {
-    render(<SEO title="FAQ" description="Perguntas frequentes" />);
+    render(<Seo title="FAQ" description="Perguntas frequentes" />);
 
     const twitterCard = document.querySelector('meta[name="twitter:card"]');
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');

src/components/ui/FullscreenViewer.jsx

@@ -0,0 +1,148 @@
+import PropTypes from "prop-types";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+
+const FullscreenViewer = ({
+  images,
+  currentIndex,
+  scale,
+  position,
+  isFullscreen,
+  isZoomed,
+  canGoPrev,
+  canGoNext,
+  isDragging,
+  containerRef,
+  onClose,
+  onPrev,
+  onNext,
+  onImageClick,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+}) => {
+  return (
+    <div
+      ref={containerRef}
+      aria-label="Visualizador de imagens em ecrã inteiro"
+      className={`${
+        isFullscreen ? "flex" : "hidden"
+      } items-center justify-center bg-black w-full h-full`}
+    >
+      {/* Close button */}
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute top-4 right-4 z-20 p-2 text-white/70 hover:text-white transition-colors"
+        aria-label="Fechar"
+      >
+        <X className="size-8" />
+      </button>
+
+      {/* Previous button */}
+      <button
+        type="button"
+        onClick={onPrev}
+        className={`absolute left-4 top-1/2 -translate-y-1/2 z-20 p-2 transition-colors ${
+          canGoPrev
+            ? "text-white/70 hover:text-white"
+            : "text-white/20 cursor-not-allowed"
+        }`}
+        aria-label="Foto anterior"
+      >
+        <ChevronLeft className="size-10" />
+      </button>
+
+      {/* Next button */}
+      <button
+        type="button"
+        onClick={onNext}
+        className={`absolute right-4 top-1/2 -translate-y-1/2 z-20 p-2 transition-colors ${
+          canGoNext
+            ? "text-white/70 hover:text-white"
+            : "text-white/20 cursor-not-allowed"
+        }`}
+        aria-label="Próxima foto"
+      >
+        <ChevronRight className="size-10" />
+      </button>
+
+      {/* Image */}
+      {isFullscreen && (
+        <img
+          src={images[currentIndex].image}
+          alt={images[currentIndex].alt}
+          className={`max-h-full max-w-full object-contain select-none ${
+            isZoomed ? "cursor-grab active:cursor-grabbing" : "cursor-zoom-in"
+          }`}
+          style={{
+            transform: `scale(${scale}) translate(${position.x / scale}px, ${
+              position.y / scale
+            }px)`,
+            transition: isDragging.current
+              ? "none"
+              : "transform 0.15s ease-out",
+          }}
+          draggable={false}
+        />
+      )}
+
+      {/* Gesture capture layer - handles all mouse/touch interactions */}
+      <button
+        type="button"
+        aria-label={isZoomed ? "Arraste para mover a imagem" : "Clique para ampliar"}
+        className={`absolute inset-0 z-10 bg-transparent border-none ${
+          isZoomed ? "cursor-grab active:cursor-grabbing" : "cursor-zoom-in"
+        }`}
+        onClick={onImageClick}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+        onMouseUp={onMouseUp}
+        onMouseLeave={onMouseUp}
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+      />
+
+      {/* Image counter */}
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/70 text-sm">
+        {currentIndex + 1} / {images.length}
+      </div>
+    </div>
+  );
+};
+
+FullscreenViewer.propTypes = {
+  images: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.string.isRequired,
+      alt: PropTypes.string,
+    })
+  ).isRequired,
+  currentIndex: PropTypes.number.isRequired,
+  scale: PropTypes.number.isRequired,
+  position: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+  }).isRequired,
+  isFullscreen: PropTypes.bool.isRequired,
+  isZoomed: PropTypes.bool.isRequired,
+  canGoPrev: PropTypes.bool.isRequired,
+  canGoNext: PropTypes.bool.isRequired,
+  isDragging: PropTypes.shape({ current: PropTypes.bool }).isRequired,
+  containerRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  onClose: PropTypes.func.isRequired,
+  onPrev: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onImageClick: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
+  onMouseMove: PropTypes.func.isRequired,
+  onMouseUp: PropTypes.func.isRequired,
+  onTouchStart: PropTypes.func.isRequired,
+  onTouchMove: PropTypes.func.isRequired,
+  onTouchEnd: PropTypes.func.isRequired,
+};
+
+export default FullscreenViewer;