Merge pull request skohub-io#279 from skohub-io/263-vocabs-without-ap…

…ache

263 vocabs without apache

.github/workflows/main.yml

@@ -48,32 +48,33 @@ jobs:
     - run: npm run test
 
   # disables because the action fails on github action but tests works locally
-  # e2e:
-  #   runs-on: ubuntu-latest
-  #   strategy:
-  #     matrix:
-  #       node-version: [18.x]
-  #   steps:
-  #     - name: Checkout
-  #       uses: actions/checkout@v3
-  #     - name: Use Node.js ${{ matrix.node-version }}
-  #       uses: actions/setup-node@v3
-  #       with:
-  #         node-version: ${{ matrix.node-version }}
-  #     - run: echo Using node version $(node --version)
-  #     - run: echo Using npm version $(npm --version)
-  #     - run: cypress/prepare-cypress-test.sh
-  #     - name: Cypress run
-  #       uses: cypress-io/github-action@v5
-  #       with:
-  #         browser: chrome
-  #         headed: true
-  #         start: npm run develop -- -p 8000
-  #         wait-on: http://localhost:8000/index.de.html
-  #         config: baseUrl=http://localhost:8000
+  e2e:
+    runs-on: ubuntu-22.04
+    container:
+      image: cypress/browsers:node-20.9.0-chrome-118.0.5993.88-1-ff-118.0.2-edge-118.0.2088.46-1
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: echo Using node version $(node --version)
+      - run: echo Using npm version $(npm --version)
+      - run: cypress/prepare-cypress-test.sh
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          headed: true
+          start: npm run develop -- -p 8000
+          wait-on: 'http://0.0.0.0:8000' # see https://github.com/cypress-io/github-action#wait-on-with-nodejs-18
+          config: baseUrl=http://localhost:8000
 
   docker:
-    needs: [build]
+    needs: [build, e2e]
     if: ${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' }}
     runs-on: ubuntu-latest
     steps:

README.md

@@ -17,6 +17,12 @@ In general we advise the use of slash URIs for SKOS vocabularies.
 
 If you would like more support of hash URIs for SkoHub Vocabs, [please open an issue](https://github.com/skohub-io/skohub-vocabs/issues/new/choose).
 
+## Internationalization
+
+To determine the language displayed of the vocabulary the browser language is used.
+If the browser language is not present in the vocabulary a default language is chosen.
+If you want to link to a specific language, you can use a URL parameter: `?lang=de`.
+
 ## Set up
 
 ### Install Node.js
@@ -125,6 +131,7 @@ You can configure the following settings:
 
 - Tokenizer used for searching
 - Custom Domain
+- Fail on Validation
 - UI Configurations
     - Title
     - Logo
@@ -148,6 +155,10 @@ Example:
 The base of your concept scheme is: `http://my-awesome-domain.org/my-vocab`
 Then provide `http://my-awesome-domain.org` as `custom_domain` in your `config.yaml`
 
+### Fail on Validation
+
+If `true` (default) the build process will stop if a validation error occures.
+
 ### UI
 
 The following customizations can be made:

config.default.yaml

@@ -2,6 +2,7 @@
 # see https://github.com/nextapps-de/flexsearch#tokenizer-prefix-search for options
 tokenizer: "full" # strict, forward, reverse, full
 custom_domain: ""
+fail_on_validation: true
 searchableAttributes:
   - "prefLabel" # you should not delete this one
   - "notation"

cypress/config.e2e.yaml

@@ -0,0 +1,38 @@
+---
+# see https://github.com/nextapps-de/flexsearch#tokenizer-prefix-search for options
+tokenizer: "full" # strict, forward, reverse, full
+custom_domain: ""
+fail_on_validation: false
+searchableAttributes:
+  - "prefLabel" # you should not delete this one
+  - "notation"
+  - "altLabel"
+  - "hiddenLabel"
+  - "example"
+  - "definition"
+ui:
+  title: "SkoHub Vocabs" # Title is mandatory
+  logo: "skohub-signet-color.svg" # Path
+  colors:
+    skoHubWhite: "rgb(255, 255, 255)"
+    skoHubDarkColor: "rgb(15, 85, 75)"
+    skoHubMiddleColor: "rgb(20, 150, 140)"
+    skoHubLightColor: "rgb(40, 200, 175)"
+    skoHubThinColor: "rgb(55, 250, 210)"
+    skoHubBlackColor: "rgb(5, 30, 30)"
+    skoHubAction: "rgb(230, 0, 125)"
+    skoHubNotice: "rgb(250, 180, 50)"
+    skoHubDarkGrey: "rgb(155, 155, 155)"
+    skoHubMiddleGrey: "rgb(200, 200, 200)"
+    skoHubLightGrey: "rgb(235, 235, 235)"
+  fonts:
+    regular:
+      font_family: "Ubuntu"
+      font_style: "normal"
+      font_weight: 400
+      name: "ubuntu-v20-latin-regular"
+    bold:
+      font_family: "Ubuntu"
+      font_style: "normal"
+      font_weight: 700
+      name: "ubuntu-v20-latin-700"

cypress/e2e/conceptSchemeAndConcept.cy.js

@@ -2,35 +2,100 @@ describe("Concept Scheme and Concept", () => {
   it("Scrolling in Nested List and Concept on wide screen", () => {
     // we need a wider view to test scrolling in navbar and concept page
     cy.viewport(1280, 768)
-    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.de.html")
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.html")
     cy.findByRole("button", { name: "Expand" }).click()
     cy.get(".concepts").scrollTo("bottom")
-    cy.get("[id$=n1]").scrollTo("bottom")
   })
 
   it("Scrolling in Nested List and Concept on smaller screen", () => {
     // we need a wider view to test scrolling in navbar and concept page
     cy.viewport(1024, 768)
-    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.de.html")
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.html")
     cy.findByRole("button", { name: "Expand" }).click()
-    cy.get(".concepts").scrollTo("bottom")
+    cy.scrollTo("bottom")
   })
 
   it("Scrolling in Nested List and Concept on small screen", () => {
     // we need a wider view to test scrolling in navbar and concept page
     cy.viewport(800, 768)
-    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.de.html")
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.html")
     cy.findByRole("button", { name: "Expand" }).click()
     cy.get(".nav-block").scrollTo("bottom")
     cy.scrollTo("bottom")
   })
 
   it("Copying URI works", () => {
-    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.de.html")
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.html")
     cy.get(".tooltip > button").click()
     cy.window()
       .its("navigator.clipboard")
       .then((clip) => clip.readText())
       .should("equal", "https://w3id.org/kim/hochschulfaechersystematik/n1")
   })
+
+  it("Visting a slash URI Concept Scheme works", () => {
+    cy.visit("/w3id.org/index.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".conceptScheme > a").should("have.text", "Test Vokabular")
+    cy.get("h1").should("have.text", "Test Vokabular")
+    cy.get(".markdown > span").should("have.text", "Test Beschreibung")
+  })
+
+  it("Visting a slash URI Concept works", () => {
+    cy.visit("/w3id.org/c1.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".conceptScheme > a").should("have.text", "Test Vokabular")
+    cy.get("h1").should("include.text", "Konzept 1")
+  })
+
+  it("Visting a hash URI Concept Scheme works", () => {
+    cy.visit("/example.org/hashURIConceptScheme.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".conceptScheme > a").should("have.text", "Hash URI Konzept Schema")
+    cy.get("h1").should("have.text", "Hash URI Konzept Schema")
+  })
+
+  it("Visting a hash URI Concept works", () => {
+    cy.visit("/example.org/hashURIConceptScheme.html#concept1", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".conceptScheme > a").should("have.text", "Hash URI Konzept Schema")
+    cy.get("h1").should("have.text", "Konzept 1")
+  })
+})
+
+describe("Parsing language from URL on Concept Schemes and Concepts", () => {
+  it("Visting a Concept Scheme directly with a language url param shows correct language", () => {
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/scheme.html?lang=de", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "en-EN" })
+      },
+    })
+    cy.get(".conceptScheme > a").should(
+      "have.text",
+      "Destatis-Systematik der Fächergruppen, Studienbereiche und Studienfächer"
+    )
+  })
+  it("Visting a Concept directly with a language url param shows correct language", () => {
+    cy.visit("/w3id.org/kim/hochschulfaechersystematik/n1.html?lang=de", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "en-EN" })
+      },
+    })
+    cy.get(".conceptScheme > a").should(
+      "have.text",
+      "Destatis-Systematik der Fächergruppen, Studienbereiche und Studienfächer"
+    )
+  })
 })

cypress/e2e/header.cy.js

@@ -1,12 +1,21 @@
 describe("Test header specific rendering", () => {
   it("shows only one concept scheme in header even when a concept has multiple", () => {
-    cy.visit("/w3id.org/two-concepts-one-file/c1.de.html")
+    cy.visit("/w3id.org/two-concepts-one-file/c1.html", {
+      // need to set browser language
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
     cy.findByRole("link", { name: "Test Vokabular 1" }).should("exist")
     cy.findByRole("link", { name: "Test Vokabular 2" }).should("not.exist")
   })
 
   it("when switching concepts there is only one concept scheme in header", () => {
-    cy.visit("/w3id.org/two-concepts-one-file/c2.de.html")
+    cy.visit("/w3id.org/two-concepts-one-file/c2.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
     cy.findByRole("link", { name: "Test Vokabular 1" }).should("exist")
     cy.findByRole("link", { name: "Test Vokabular 2" }).should("not.exist")
   })

cypress/e2e/index.cy.js

@@ -1,7 +1,10 @@
 describe("Main Vocab Index page", () => {
   it("Visits index page and test language switch", () => {
-    cy.visit("/index.de.html")
-
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
     // vocabs are found
     cy.get(".centerPage > ul li").should("have.length", 7)
 
@@ -51,4 +54,51 @@ describe("Main Vocab Index page", () => {
       name: "Test Vokabular",
     }).should("exist")
   })
+
+  it("shows no concept scheme in header if going back to index page from concept", () => {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.contains("Destatis-Systematik").click()
+    cy.findByRole("link", {
+      name: "Destatis-Systematik der Fächergruppen, Studienbereiche und Studienfächer",
+    }).should("exist")
+    cy.go("back")
+    cy.get(".conceptScheme > a").should("not.exist")
+  })
+
+  it("German language is selected, when lang=de param is given in url", () => {
+    cy.visit("/?lang=de", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "en-EN" })
+      },
+    })
+    cy.findByRole("link", {
+      name: "Test Vokabular",
+    }).should("exist")
+  })
+
+  it("The navigator language is used as fallback language, when the language from url param 'lang' is not found", () => {
+    cy.visit("/?lang=bla", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "en-EN" })
+      },
+    })
+    cy.findByRole("link", {
+      name: "Test Vocabulary",
+    }).should("exist")
+  })
+
+  it("A fallback language is used, when neither navigator language nor language from url param 'lang' is found", () => {
+    cy.visit("/?lang=bla", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "fr-FR" })
+      },
+    })
+    cy.findByRole("link", {
+      name: "Test Vokabular",
+    }).should("exist")
+  })
 })