feat: improve routing for the image details page (#9)

Refs: IS-5

.env.sample

@@ -10,4 +10,4 @@ IMAGES_URL=http://showcase.ythepaut.com/assets/images.json
 TIMEZONE=Europe/Paris
 DEFAULT_LOCALE=fr
 
-IMAGE_HOSTNAME_PATTERN=*.ythepaut.com
+IMAGE_HOSTNAME_PATTERNS=*.ythepaut.com

.env.test

@@ -11,4 +11,4 @@ IMAGES_URL=http://localhost:3000/assets/images_test.json
 TIMEZONE=Europe/Paris
 DEFAULT_LOCALE=fr
 
-IMAGE_HOSTNAME_PATTERN=placehold.co
+IMAGE_HOSTNAME_PATTERNS=placehold.co

.github/workflows/test.yml

@@ -27,12 +27,19 @@ jobs:
         run: cp .env.test .env
       - name: Install dependencies
         run: npm ci
+      - name: Get current commit hash
+        id: vars
+        run: echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
       - name: Build
         run: npm run build
+        env:
+          IMAGES_URL: https://raw.githubusercontent.com/ythepaut/image-showcase/${{ env.COMMIT_HASH }}/public/assets/images_test.json
       - name: Run tests
         run: npm test
       - name: Run cypress tests
         run: npm run e2e:headless
+        env:
+          IMAGES_URL: https://raw.githubusercontent.com/ythepaut/image-showcase/${{ env.COMMIT_HASH }}/public/assets/images_test.json
       - name: Run lint
         run: npm run lint
       - name: SonarCloud Scan

README.md

@@ -18,7 +18,55 @@
 
 ## Installation
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/ythepauts-projects/clone?repository-url=https%3A%2F%2Fgithub.com%2Fythepaut%2Fshowcase&env=ENVIRONMENT,APP_NAME,APP_DESCRIPTION,APP_KEYWORDS,APP_URL,IMAGES_URL,TIMEZONE,DEFAULT_LOCALE,IMAGE_HOSTNAME_PATTERN)
+1. Installation\
+Choose one of the following methods:
+
+    a. Vercel deployment\
+    [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/ythepauts-projects/clone?repository-url=https%3A%2F%2Fgithub.com%2Fythepaut%2Fshowcase&env=ENVIRONMENT,APP_NAME,APP_DESCRIPTION,APP_KEYWORDS,APP_URL,IMAGES_URL,TIMEZONE,DEFAULT_LOCALE,IMAGE_HOSTNAME_PATTERNS)
+
+    b. Manual installation
+    - Clone this repository
+    - Build the project using `npm run build`
+    - The app can be started using `npm start`
+
+2. Setup the image list *(temporary)*\
+   Create a JSON file that contains your images in this format :
+   ```json
+   {
+     "id": "1",
+     "src": "https://placehold.co/800x600/png?text=1",
+     "width": 800,
+     "height": 600,
+     "title": "Image 1"
+   }
+   ```
+   :arrow_right: [File example](https://raw.githubusercontent.com/ythepaut/image-showcase/3ac2355f26ffafab5d2c4d2110d1af269ced9e58/public/assets/images.json)
+
+3. Set the following environment variables
+    ```bash
+    ENVIRONMENT=production
+
+    # Open Graph Metadata
+    # Application name (e.g. Image Showcase)
+    APP_NAME=
+    # Website description (e.g. My Image Gallery)
+    APP_DESCRIPTION=
+    # Comma separated website key words (e.g. gallery, myname, showcase)
+    APP_KEYWORDS=
+    # Application production url
+    APP_URL=
+
+    # URL to the image list (c.f. 2.)
+    IMAGES_URL=http://showcase.ythepaut.com/assets/images.json
+
+    # Your timezone and default locale (only fr and en are supported)
+    TIMEZONE=Europe/Paris
+    DEFAULT_LOCALE=fr
+
+    # Comma separated patterns to the image hosts (e.g. cdn.mydomain.com, placehold.co, *.pixabay.com)
+    IMAGE_HOSTNAME_PATTERNS=
+    ```
+
 
 ## About
 

cypress/e2e/app.cy.ts

@@ -1,11 +1,11 @@
 describe("App", () => {
 
   beforeEach(() => {
-    cy.visit("/en");
+    cy.visit("/");
   });
 
   it("should navigate to the main page", () => {
-    cy.url().should("equal", Cypress.config().baseUrl + "/en");
+    cy.url().should("equal", Cypress.config().baseUrl + "/");
   });
 
   it("should have all the gallery images", () => {
@@ -14,6 +14,7 @@ describe("App", () => {
 
   it("should be able to click on an image to see the details", () => {
     cy.get("img[alt='Image 1']").click();
+    cy.url().should("equal", Cypress.config().baseUrl + "/photo/1");
 
     // title
     cy.get("h2").should("contain.text", "Image 1");
@@ -28,21 +29,33 @@ describe("App", () => {
 
   it("should be able to navigate from the gallery", () => {
     cy.get("img[alt='Image 1']").click();
+    cy.url().should("equal", Cypress.config().baseUrl + "/photo/1");
     cy.get("h2").should("contain.text", "Image 1");
 
-    // get button with Close title attribute
     cy.get("button[title='Close']").first().click({ force: true });
-    cy.get("img[alt='Image 5']").click();
+    cy.url().should("equal", Cypress.config().baseUrl + "/");
+    cy.get("img[alt='Image 5']").first().click();
+    cy.url().should("equal", Cypress.config().baseUrl + "/photo/5");
     cy.get("h2").should("contain.text", "Image 5");
   });
 
   it("should be able to navigate from the carousel", () => {
     cy.get("img[alt='Image 1']").click();
+    cy.url().should("equal", Cypress.config().baseUrl + "/photo/1");
     cy.get("h2").should("contain.text", "Image 1");
 
     cy.get("img[alt='Image 2']").last().click();
     cy.get("h2").should("contain.text", "Image 2");
   });
+
+  it("should be able to navigate directly to the image", () => {
+    cy.visit("/photo/1");
+    cy.url().should("equal", Cypress.config().baseUrl + "/photo/1");
+    cy.get("h2").should("contain.text", "Image 1");
+
+    cy.get("button[title='Close']").first().click({ force: true });
+    cy.url().should("equal", Cypress.config().baseUrl + "/");
+  });
 });
 
 export {};

next.config.js

@@ -1,10 +1,8 @@
-const createNextIntlPlugin = require("next-intl/plugin");
-
-const withNextIntl = createNextIntlPlugin();
+const withNextIntl = require("next-intl/plugin")();
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  publicRuntimeConfig: {
+  env: {
     appName: process.env.APP_NAME ?? "Image Showcase",
     appDescription: process.env.APP_DESCRIPTION ?? "An image gallery",
     appKeywords: process.env.APP_KEYWORDS ?? "image, gallery, showcase",
@@ -15,14 +13,11 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: process.env.IMAGE_HOSTNAME_PATTERN,
-        port: "",
-        pathname: "/**"
-      }
-    ]
+    remotePatterns: process.env.IMAGE_HOSTNAME_PATTERNS.split(/\s*,\s*/).map(pattern => ({
+      protocol: "https",
+      hostname: pattern,
+      pathname: "/**"
+    }))
   }
 };