reihenfolge

api/collections/fieldLists/medialibViews.yml

@@ -0,0 +1,47 @@
+- type: table
+  mediaQuery: "(min-width: 0px)"
+  defaultSelect: false
+  selectionPriority: 2
+  fileDropArea:
+      label:
+          {
+              de: "Ziehen Sie Dateien per Drag and Drop hierher oder klicken Sie, um Dateien auszuwählen.",
+              en: "Drag and drop some files here, or click to upload.",
+          }
+      helperText: { de: "Maximale Uploadgröße: 1,54 MB", en: "Maximum upload size: 1.54MB" }
+      targetField: file
+      pageAsDropArea: false
+  columns:
+      - source: file
+        name: Datei
+        filter: true
+      - source: title
+        name: Titel
+        filter: true
+      - source: alt
+        name: Alternativtext
+        filter: true
+
+- type: cardList
+  mediaQuery: "(min-width: 1200px)"
+  selectionPriority: 1
+  fileDropArea:
+      label:
+          {
+              de: "Ziehen Sie Dateien per Drag and Drop hierher oder klicken Sie, um Dateien auszuwählen.",
+              en: "Drag and drop some files here, or click to upload.",
+          }
+      helperText: { de: "Maximale Uploadgröße: 1,54 MB", en: "Maximum upload size: 1.54MB" }
+      targetField: file
+      pageAsDropArea: false
+
+  fields:
+      - source: file
+        name: Datei
+        filter: true
+      - source: title
+        name: Titel
+        filter: true
+      - source: alt
+        name: Alternativtext
+        filter: true

api/collections/lighthouse-subpaths.yml

@@ -0,0 +1,29 @@
+name: lighthouseSubpath
+
+meta:
+    label: Lighthouse Subpaths
+    muiIcon: web
+    views:
+        - type: table
+          columns:
+              - source: lighthouseSubpath
+
+permissions:
+    public:
+        methods:
+            get: false
+            post: false
+            put: false
+            delete: false
+    user:
+        methods:
+            get: true
+            post: true
+            put: true
+            delete: true
+
+fields:
+    - type: string
+      name: lighthouseSubpath
+      meta:
+          label: PagespeedPaths

api/collections/lighthouse.yml

@@ -0,0 +1,120 @@
+name: lighthouse
+
+meta:
+    label: Lighthouse
+    muiIcon: web
+    views:
+        - type: table
+          mediaQuery: "(min-width: 600px)"
+          columns:
+              - source: insertTime
+                filter: true
+              - source: perfomance
+                filter: true
+              - source: accessibility
+                filter: true
+              - source: bestPractices
+                filter: true
+              - source: seo
+                filter: true
+        - type: simpleList
+          mediaQuery: "(max-width: 599px)"
+          primaryText: insertTime
+          secondaryText: performance
+          tertiaryText: accessibility
+
+permissions:
+    public:
+        methods:
+            get: false
+            post: false
+            put: false
+            delete: false
+    user:
+        methods:
+            get: true
+            post: true
+            put: true
+            delete: true
+
+projections:
+    dashboard:
+
+hooks:
+    post:
+        create:
+            type: javascript
+            file: hooks/lighthouse/post_create.js
+
+fields:
+    - name: analyzedPaths
+      type: string[]
+      meta:
+          label: Analyzed Paths
+    - name: performance
+      type: number
+      meta:
+          label: Performance
+    - name: accessibility
+      type: number
+      meta:
+          label: Accessibility
+    - name: bestPractices
+      type: number
+      meta:
+          label: Best Practices
+    - name: seo
+      type: number
+      meta:
+          label: SEO
+    - name: lighthouseMetrics
+
+      type: object
+      meta:
+          label: Lighthouse Metrics
+      subFields:
+          - name: FCPS
+            type: number
+            meta:
+                label: First Contentful Paint Score
+          - name: FCPV
+            type: number
+            meta:
+                label: First Contentful Paint Value
+          - name: FMPV
+            type: number
+            meta:
+                label: First Meaningful Paint Value
+
+          - name: FMPS
+            type: number
+            meta:
+                label: First Meaningful Paint Score
+
+          - name: SIS
+            type: number
+            meta:
+                label: Speed Index Score
+
+          - name: SIV
+            type: number
+            meta:
+                label: Speed Index Value
+          - name: TTIS
+            type: number
+            meta:
+                label: Time to Interactive Score
+
+          - name: TTIV
+            type: number
+            meta:
+                label: Time to Interactive Value
+          - name: FPIDS
+            type: number
+            meta:
+                label: First Potential Input Delay Score
+
+          - name: FPIDV
+            type: number
+            meta:
+                label: First Potential Input Delay Value

api/collections/medialib.yml

@@ -33,58 +33,14 @@ meta:
     multiupload:
         fields: []
 
-    views:
+    views: !include fieldLists/medialibViews.yml
-        - type: table
-          mediaQuery: "(min-width: 0px)"
-          defaultSelect: false
-          selectionPriority: 2
-          fileDropArea:
-              label:
-                  {
-                      de: "Ziehen Sie Dateien per Drag and Drop hierher oder klicken Sie, um Dateien auszuwählen.",
-                      en: "Drag and drop some files here, or click to upload.",
-                  }
-              helperText: { de: "Maximale Uploadgröße: 1,54 MB", en: "Maximum upload size: 1.54MB" }
-              targetField: file
-              pageAsDropArea: false
-          columns:
-              - source: file
-                name: Datei
-              - source: updateTime
-                type: datetime
-                label: letztes Update
-
-        - type: cardList
-          mediaQuery: "(min-width: 1200px)"
-          selectionPriority: 1
-          fileDropArea:
-              label:
-                  {
-                      de: "Ziehen Sie Dateien per Drag and Drop hierher oder klicken Sie, um Dateien auszuwählen.",
-                      en: "Drag and drop some files here, or click to upload.",
-                  }
-              helperText: { de: "Maximale Uploadgröße: 1,54 MB", en: "Maximum upload size: 1.54MB" }
-              targetField: file
-              pageAsDropArea: false
-
-          fields:
-              - source: file
-                name: Datei
-
-              - source: updateTime
-                type: datetime
-                label: letztes Update
 
     subNavigation:
         - name: modalForeign # Name des Eingabefelds oder der Ansicht.
           defaultSort: # Standard-Sortierkriterien, die angewendet werden, wenn keine anderen Sortierkriterien spezifiziert sind.
               field: "path" # Standardmäßig wird nach dem "path"-Feld sortiert.
               order: "ASC" # Standardmäßig wird in aufsteigender Reihenfolge (ASC) sortiert.
-          views: # Liste der Ansichten, die in diesem Feld angezeigt werden können.
+          views: !include fieldLists/medialibViews.yml
-              - type: table # Es wird eine Tabellenansicht verwendet.
-                mediaQuery: "(min-width: 0px)" # Die Tabellenansicht wird nur angezeigt, wenn die Bildschirmbreite mindestens 0px beträgt.
-                columns: # Liste der Spalten, die in der Tabelle angezeigt werden.
-                    - source: file
 
           defaultCallback: # Standard-Callback-Funktion, die ausgeführt wird, wenn keine andere spezifiziert ist.
               eval: | # Der Code wird als JavaScript evaluiert.

api/config.yml

@@ -7,9 +7,248 @@ meta:
         servers:
             - url: https://tibi-admin-server.code.testversion.online/api/v1/_/demo
               description: code-server
-
     dashboard:
         majorItems:
+            - type: "sectionTitle"
+              title: { de: "Website Perfomance", en: "Website Perfomance" }
+              appendix:
+                  collection: lighthouse
+                  eval: |
+                      (function(){
+                         return "  " + new Date($date).toLocaleDateString() + ""
+                      })()
+            - type: graph
+              filter: false
+              graphType: radialBar
+              until: "lastYear"
+              value: total
+              containerProps:
+                  #optional class prop
+                  layout:
+                      breakBefore: false
+                      breakAfter: false
+                      size:
+                          default: "col-6"
+                          small: "col-12"
+                          large: "col-3"
+              options:
+                  {
+                      property: plotOptions,
+                      value:
+                          {
+                              radialBar:
+                                  {
+                                      hollow: { margin: 0, size: "70%" },
+                                      track: { dropShadow: { enabled: true, top: 2, left: 0, blur: 4, opacity: 0.15 } },
+                                      dataLabels:
+                                          {
+                                              name: { offsetY: -10, color: "#000", fontSize: "13px" },
+                                              value: { color: "#000", fontSize: "30px", show: true },
+                                          },
+                                  },
+                          },
+                  }
+              graphs:
+                  - collection: lighthouse
+                    field: performance
+                    yAxis: latestValue
+                    graphName: { de: "Perfomance Score", en: "Perfomance Score" }
+                    dateTimeField: insertTime
+
+            - type: graph
+              filter: false
+              graphType: radialBar
+              until: "lastYear"
+              value: total
+              containerProps:
+                  #optional class prop
+                  layout:
+                      breakBefore: false
+                      breakAfter: false
+                      size:
+                          default: "col-6"
+                          small: "col-12"
+                          large: "col-3"
+              options:
+                  {
+                      property: plotOptions,
+                      value:
+                          {
+                              radialBar:
+                                  {
+                                      hollow: { margin: 0, size: "70%" },
+                                      track: { dropShadow: { enabled: true, top: 2, left: 0, blur: 4, opacity: 0.15 } },
+                                      dataLabels:
+                                          {
+                                              name: { offsetY: -10, color: "#000", fontSize: "13px" },
+                                              value: { color: "#000", fontSize: "30px", show: true },
+                                          },
+                                  },
+                          },
+                  }
+              graphs:
+                  - collection: lighthouse
+                    field: accessibility
+                    yAxis: latestValue
+                    graphName: { de: "Accessibility Score", en: "Accessibility Score" }
+                    dateTimeField: insertTime
+
+            - type: graph
+              filter: false
+              graphType: radialBar
+              until: "lastYear"
+              value: total
+              containerProps:
+                  #optional class prop
+                  layout:
+                      breakBefore: false
+                      breakAfter: false
+                      size:
+                          default: "col-6"
+                          small: "col-12"
+                          large: "col-3"
+              options:
+                  {
+                      property: plotOptions,
+                      value:
+                          {
+                              radialBar:
+                                  {
+                                      hollow: { margin: 0, size: "70%" },
+                                      track: { dropShadow: { enabled: true, top: 2, left: 0, blur: 4, opacity: 0.15 } },
+                                      dataLabels:
+                                          {
+                                              name: { offsetY: -10, color: "#000", fontSize: "13px" },
+                                              value: { color: "#000", fontSize: "30px", show: true },
+                                          },
+                                  },
+                          },
+                  }
+              graphs:
+                  - collection: lighthouse
+                    field: bestPractices
+                    yAxis: latestValue
+                    graphName: { de: "Best Practices Score", en: "Best Practices Score" }
+                    dateTimeField: insertTime
+
+            - type: graph
+              filter: false
+              graphType: radialBar
+              until: "lastYear"
+              value: total
+              containerProps:
+                  #optional class prop
+                  layout:
+                      breakBefore: false
+                      breakAfter: false
+                      size:
+                          default: "col-6"
+                          small: "col-12"
+                          large: "col-3"
+              options:
+                  {
+                      property: plotOptions,
+                      value:
+                          {
+                              radialBar:
+                                  {
+                                      hollow: { margin: 0, size: "70%" },
+                                      track: { dropShadow: { enabled: true, top: 2, left: 0, blur: 4, opacity: 0.15 } },
+                                      dataLabels:
+                                          {
+                                              name: { offsetY: -10, color: "#000", fontSize: "13px" },
+                                              value: { color: "#000", fontSize: "30px", show: true },
+                                          },
+                                  },
+                          },
+                  }
+              graphs:
+                  - collection: lighthouse
+                    field: seo
+                    yAxis: latestValue
+                    graphName: { de: "SEO Score", en: "SEO Score" }
+                    dateTimeField: insertTime
+
+            - type: swiper # Art des Elements, hier ein Swiper
+              containerProps:
+                  #optional class prop
+                  layout:
+                      breakBefore: false
+                      breakAfter: false
+                      size:
+                          default: "col-12"
+                          small: "col-12"
+                          large: "col-6 row-2-4"
+
+              elements: # Liste der Elemente in diesem Swiper
+                  - type: graph
+                    title:
+                        value: { de: "Ladezeit (Score)", en: "Loadtime (Score)" }
+                    xAxis: manual
+                    until: "lastYear"
+                    filter: false #deaktiviert die Filter möglichkeit für den Nutzer beim diagramm, normalerweise aktiviert. Hierbei sind alle kombinationen x >= until möglich
+                    columns:
+                        - name: { de: '["Erstes sichtbares", "Element"]', en: '["First Contentful", "Paint"]' }
+                          field: lighthouseMetrics.FCPS
+
+                        - name: { de: '["Erstes bedeutsames", "Element"]', en: '["First Meaningful", "Paint"]' }
+                          field: lighthouseMetrics.FMPS
+
+                        - name:
+                              {
+                                  de: '["Maximale potenzielle", "erste", "ingabeverzögerung"]',
+                                  en: '["Max Potential", "First Input", "Delay"]',
+                              }
+                          field: lighthouseMetrics.FPIDS
+
+                        - name: { de: '["Zeit bis", "zur", "Interaktivität"]', en: '["Time to", "Interactive"]' }
+                          field: lighthouseMetrics.TTIS
+
+                        - name: { de: '["Geschwindigkeitsindex"]', en: '["Speed Index"]' }
+                          field: lighthouseMetrics.SIS
+
+                    graphType: "bar"
+                    graphs:
+                        - graphName: { de: "Lighthouse Metriken", en: "Lighthouse Metrics" }
+                          yAxis: latestValue
+                          collection: lighthouse
+                          dateTimeField: insertTime
+                  - type: graph
+                    title:
+                        value: { de: "Ladezeit (Sekunden)", en: "Loadtime (seconds)" }
+                    xAxis: manual
+                    until: "lastYear"
+                    filter: false #deaktiviert die Filter möglichkeit für den Nutzer beim diagramm, normalerweise aktiviert. Hierbei sind alle kombinationen x >= until möglich
+                    columns:
+                        - name: { de: '["Erstes sichtbares", "Element"]', en: '["First Contentful", "Paint"]' }
+                          field: lighthouseMetrics.FCPV
+
+                        - name: { de: '["Erstes bedeutsames", "Element"]', en: '["First Meaningful", "Paint"]' }
+                          field: lighthouseMetrics.FMPV
+
+                        - name:
+                              {
+                                  de: '["Maximale potenzielle", "erste", "ingabeverzögerung"]',
+                                  en: '["Max Potential", "First Input", "Delay"]',
+                              }
+                          field: lighthouseMetrics.FPIDV
+
+                        - name: { de: '["Zeit bis", "zur", "Interaktivität"]', en: '["Time to", "Interactive"]' }
+                          field: lighthouseMetrics.TTIV
+
+                        - name: { de: '["Geschwindigkeitsindex"]', en: '["Speed Index"]' }
+                          field: lighthouseMetrics.SIV
+
+                    graphType: "bar"
+                    graphs:
+                        - graphName: { de: "Lighthouse Metriken", en: "Lighthouse Metrics" }
+                          yAxis: latestValue
+                          collection: lighthouse
+                          dateTimeField: insertTime
+
+            - type: "sectionTitle"
+              title: { de: "Seiteninhalte", en: "Page content" }
+
             - collection: navigation
               type: reference
               style:
@@ -34,6 +273,25 @@ meta:
                   upper: rgba(3, 50, 59, 0.7)
                   lower: rgba(3, 50, 59)
 
+            - type: "sectionTitle"
+              title: { de: "Aktionen", en: "Actions" }
+
+            - collection: lighthouse
+              type: action
+              action: "Lighthouse Durchlauf starten"
+              backgroundAction: true
+              modalText:
+                  {
+                      de: "Zur Analyse der Website werden einige Zeitintensive prozesse gestartet, daher wird dies im Hintergrund ausgeführt. Es kann einige Minuten dauern bis das Dashboard aktuallisiert wird, bitte haben Sie etwas Geduld.",
+                      en: "To analyze the website, some time-intensive processes are started, so this is done in the background. It may take a few minutes for the dashboard to be updated, please be patient.",
+                  }
+              properties:
+                  url: https://www.fontis.de
+                  type: post
+              style:
+                  upper: rgba(3, 50, 59, 0.7)
+                  lower: rgba(3, 50, 59)
+
         minorItems:
             - collection: page
               subNavigation: 0
@@ -49,7 +307,14 @@ collections:
     - !include collections/medialib.yml
     - !include collections/backups.yml
     - !include collections/ssr.yml
+    - !include collections/lighthouse.yml
+    - !include collections/lighthouse-subpaths.yml
 
 assets:
     - name: img
       path: img
+
+jobs:
+    - cron: "0 0 * * 1"
+      type: javascript
+      file: jobs/lighthouse.js

api/hooks/config.js

@@ -29,4 +29,5 @@ module.exports = {
         return -1
     },
     ssrPublishCheckCollections: ["page"],
+    LIGHTHOUSE_TOKEN: "AIzaSyC0UxHp3-MpJiDL3ws7pEV6lj57bfIc7GQ",
 }

api/hooks/lib/utils.js

@@ -46,8 +46,103 @@ function clearSSRCache() {
     context.response.header("X-SSR-Cleared", info.removed)
 }
 
+var { LIGHTHOUSE_TOKEN } = require("../config")
+function calculateAverageDynamically(dbObjs) {
+    const sumObj = {}
+    let count = 0
+
+    dbObjs.forEach((obj) => {
+        accumulate(obj, sumObj)
+        count++
+    })
+
+    function accumulate(sourceObj, targetObj) {
+        for (const key in sourceObj) {
+            if (typeof sourceObj[key] === "number") {
+                targetObj[key] = (targetObj[key] || 0) + sourceObj[key]
+            } else if (typeof sourceObj[key] === "object" && sourceObj[key] !== null) {
+                targetObj[key] = targetObj[key] || {}
+                accumulate(sourceObj[key], targetObj[key])
+            }
+        }
+    }
+
+    function average(targetObj) {
+        for (const key in targetObj) {
+            if (typeof targetObj[key] === "number") {
+                targetObj[key] = targetObj[key] / count
+            } else if (typeof targetObj[key] === "object") {
+                average(targetObj[key])
+            }
+        }
+    }
+
+    average(sumObj)
+    return sumObj
+}
+
+function run(url) {
+    const response = context.http
+        .fetch(url, {
+            timeout: 300,
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+        .body.json()
+    // needs enough traffic to be collected
+    const cruxMetrics = {
+        "First Contentful Paint": response?.loadingExperience?.metrics?.FIRST_CONTENTFUL_PAINT_MS?.category,
+        "First Input Delay": response?.loadingExperience?.metrics?.FIRST_INPUT_DELAY_MS?.category,
+    }
+    const lighthouse = response.lighthouseResult
+    const lighthouseMetrics = {
+        FCPS: lighthouse.audits["first-contentful-paint"].score * 100,
+        FCPV: lighthouse.audits["first-contentful-paint"].numericValue / 1000,
+        FMPS: lighthouse.audits["first-meaningful-paint"].score * 100,
+        FMPV: lighthouse.audits["first-meaningful-paint"].numericValue / 1000,
+
+        SIS: lighthouse.audits["speed-index"].score * 100,
+        SIV: lighthouse.audits["speed-index"].numericValue / 1000,
+        TTIS: lighthouse.audits["interactive"].score * 100,
+        TTIV: lighthouse.audits["interactive"].numericValue / 1000,
+
+        FPIDS: lighthouse.audits["max-potential-fid"].score * 100,
+        FPIDV: lighthouse.audits["max-potential-fid"].numericValue / 1000,
+    }
+
+    let dbObject = {
+        cruxMetrics,
+        lighthouseMetrics,
+        performance: Math.round(lighthouse.categories.performance.score * 100),
+        accessibility: Math.round(lighthouse.categories.accessibility.score * 100),
+        bestPractices: Math.round(lighthouse.categories["best-practices"].score * 100),
+        seo: Math.round(lighthouse.categories.seo.score * 100),
+    }
+    return dbObject
+}
+function setUpQuery(subPath = "/") {
+    const api = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed"
+    let params = `category=performance&category=accessibility&category=best-practices&category=seo`
+
+    const parameters = {
+        url: encodeURIComponent(`https://www.fontis.de/${subPath}`),
+        key: LIGHTHOUSE_TOKEN,
+    }
+
+    let query = `${api}?`
+    for (let key in parameters) {
+        query += `${key}=${parameters[key]}&`
+    }
+    query += params // Append other parameters without URL encoding
+    return query
+}
 module.exports = {
     log,
     clearSSRCache,
     obj2str,
+    run,
+    setUpQuery,
+    calculateAverageDynamically,
 }

api/hooks/lighthouse/post_create.js

@@ -0,0 +1,16 @@
+var { setUpQuery, calculateAverageDynamically, run } = require("../lib/utils")
+;(function () {
+    let subPaths = context.db.find("lighthouseSubpath")
+    let urls = []
+    for (let i = 0; i < subPaths.length; i++) {
+        urls.push(setUpQuery(subPaths[i].lighthouseSubpath))
+    }
+    let dbObjs = []
+    urls.forEach((url) => {
+        console.log("URL:", url)
+        dbObjs.push(run(url))
+    })
+    let dbObject = calculateAverageDynamically(dbObjs)
+    dbObject.analyzedPaths = [...subPaths].map((subPath) => subPath.lighthouseSubpath)
+    return { data: dbObject }
+})()

api/jobs/lighthouse.js

@@ -0,0 +1,17 @@
+var { setUpQuery, calculateAverageDynamically, run } = require("../hooks/lib/utils")
+;(function () {
+    console.log("Running lighthouse job")
+    let subPaths = context.db.find("lighthouseSubpath")
+    let urls = []
+    for (let i = 0; i < subPaths.length; i++) {
+        urls.push(setUpQuery(subPaths[i].lighthouseSubpath))
+    }
+    let dbObjs = []
+    urls.forEach((url) => {
+        console.log("URL:", url)
+        dbObjs.push(run(url))
+    })
+    let dbObject = calculateAverageDynamically(dbObjs)
+    dbObject.analyzedPaths = [...subPaths].map((subPath) => subPath.lighthouseSubpath)
+    context.db.create("lighthouse", dbObject)
+})()

frontend/media/arrow-l.svg

@@ -1,3 +1,3 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M44 24c0 .69-.56 1.25-1.25 1.25H10.304l12.822 12.609a1.251 1.251 0 1 1-1.752 1.782L6.386 24.903a1.245 1.245 0 0 1-.379-1.035c.032-.3.171-.58.393-.785L21.374 8.359a1.25 1.25 0 1 1 1.752 1.782L10.304 22.75H42.75c.69 0 1.25.56 1.25 1.25z" fill="#333"/>
+    <path d="M44 24c0 .69-.56 1.25-1.25 1.25H10.304l12.822 12.609a1.251 1.251 0 1 1-1.752 1.782L6.386 24.903a1.245 1.245 0 0 1-.379-1.035c.032-.3.171-.58.393-.785L21.374 8.359a1.25 1.25 0 1 1 1.752 1.782L10.304 22.75H42.75c.69 0 1.25.56 1.25 1.25z" fill="#343A40"/>
 </svg>

frontend/media/arrowr.svg

@@ -1,3 +1,3 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.959a.75.75 0 0 0 1.04 1.08l9.428-9.069a1 1 0 0 0 0-1.441l-9.428-9.07-.001.001z" fill="#333"/>
+    <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.959a.75.75 0 0 0 1.04 1.08l9.428-9.069a1 1 0 0 0 0-1.441l-9.428-9.07-.001.001z" fill="#343A40"/>
 </svg>

frontend/media/chev-d.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="m22.723 5.473 1.054 1.054L12 18.305.223 6.527l1.054-1.054L12 16.195 22.723 5.473z" fill="#333"/>
+    <path d="m22.723 5.473 1.054 1.054L12 18.305.223 6.527l1.054-1.054L12 16.195 22.723 5.473z" fill="#343A40"/>
 </svg>

frontend/media/ei close.svg

@@ -1,4 +1,4 @@
 <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="m37.304 11.282 1.414 1.414-26.022 26.02-1.414-1.413 26.022-26.021z" fill="#333"/>
+    <path d="m37.304 11.282 1.414 1.414-26.022 26.02-1.414-1.413 26.022-26.021z" fill="#343A40"/>
-    <path d="m12.696 11.282 26.022 26.02-1.414 1.415-26.022-26.02 1.414-1.415z" fill="#333"/>
+    <path d="m12.696 11.282 26.022 26.02-1.414 1.415-26.022-26.02 1.414-1.415z" fill="#343A40"/>
 </svg>

frontend/src/App.svelte

@@ -51,7 +51,7 @@
             } else if (e.type == "teamMembers") {
                 teamRes[e.path] = e
             } else if (e.type == "jobOffers") {
-                jobOffersRes[e.path] = e
+                jobOffersRes[Math.random()] = e
             } else {
                 pagesRes[e.path] = e
             }

frontend/src/lib/assets/css/base.less

@@ -8,7 +8,7 @@ html {
     background-color: black;
 }
 body {
-    color: #333 !important;
+    color: #343a40 !important;
     height: 100%;
     background-color: #f9f9f9;
 }
@@ -16,7 +16,14 @@ body {
 ul {
     list-style-type: none;
 }
-
+.boxes {
+    .content {
+        ul {
+            padding-left: 20px;
+            list-style-type: disc;
+        }
+    }
+}
 ol {
     list-style-type: decimal;
 }
@@ -27,6 +34,7 @@ a {
     font-weight: 700;
     color: inherit;
     font-weight: normal;
+    cursor: pointer;
 }
 
 /* Tabellen */
@@ -56,11 +64,11 @@ button {
     border: none;
     cursor: pointer;
     font-size: inherit;
-    color: #333;
+    color: #343a40;
 }
 input,
 select {
-    color: #333;
+    color: #343a40;
     width: 100%;
 }
 .underline {

frontend/src/lib/components/Footer.svelte

@@ -83,6 +83,12 @@
                         navigate('/impressum')
                     }}">Impressum</button
                 >
+                <button
+                    on:click="{() => {
+                        $rerender = $rerender + 1
+                        navigate('/contact')
+                    }}">Contact (EN)</button
+                >
             </div>
             <div class="contact">
                 <button>+49 (0) 711 655 700-0</button>

frontend/src/lib/components/Menu/Menu.svelte

@@ -39,6 +39,31 @@
 
                         <div class="footer-infos">
                             <div class="upper">
+                                <a
+                                    style="text-decoration: none;"
+                                    class="underline"
+                                    on:click="{() => {
+                                        active = false
+                                        $rerender = $rerender + 1
+                                        navigate('/contact')
+                                    }}">Contact (EN)</a
+                                >
+                                <a
+                                    style="text-decoration: none;"
+                                    class="underline"
+                                    href="/media/Anfahrtsbeschreibung_FONTIS-4.pdf"
+                                    target="_blank"
+                                >
+                                    Anfahrt (DE)
+                                </a>
+                                <a
+                                    style="text-decoration: none;"
+                                    class="underline"
+                                    href="/media/Anfahrtsbeschreibung_FONTIS_en.pdf"
+                                    target="_blank"
+                                >
+                                    Directions (EN)
+                                </a>
                                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <!-- svelte-ignore a11y-missing-attribute -->
                                 <a
@@ -52,6 +77,7 @@
                                 >
                                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <!-- svelte-ignore a11y-missing-attribute -->
+
                                 <a
                                     style="text-decoration: none;"
                                     class="underline"

frontend/src/lib/components/widgets/Worldcard/card.svelte

@@ -164,8 +164,8 @@
                                 height: 1.8vw;
                                 max-height: 25px;
                                 border-radius: 15px;
-                                border: 2px solid @signal-color;
+                                border: 2px solid #6b6868;
-                                color: @signal-color;
+                                color: #6b6868;
                                 background-color: @bg-color-secondary;
                                 display: flex;
                                 justify-content: center;

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -51,6 +51,11 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
+
+    .boxes {
+        display: flex;
+        flex-direction: column;
+        font-family: "Libre Franklin", "sans-serif";
         button {
             margin-top: 20px;
             background-color: @signal-color;
@@ -59,11 +64,6 @@
             padding: 2px 15px;
             font-weight: bold;
         }
-
-    .boxes {
-        display: flex;
-        flex-direction: column;
-        font-family: "Libre Franklin", "sans-serif";
         .box {
             border-bottom: 2px dotted @bg-color-secondary;
             display: flex;
@@ -87,9 +87,13 @@
                 justify-content: space-between;
             }
             .content {
-                max-height: 1000px;
+                max-height: 3000px;
                 overflow: hidden;
                 transition: max-height 1s ease-in;
+                ul {
+                    padding-left: 20px;
+                    list-style-type: disc;
+                }
 
                 &.closed {
                     max-height: 0px;

frontend/src/lib/components/widgets/iconCycleBox.svelte

@@ -20,6 +20,7 @@
                 <div class="icon">
                     <svg
                         stroke="{i == active ? '#5b6e98' : 'white'}"
+                        fill="{i == active ? '#5b6e98' : 'white'}"
                         data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg>
                 </div>
                 <div class="text">

frontend/src/lib/components/widgets/persons.svelte

@@ -84,7 +84,6 @@
                 width: 100%;
                 background-color: @signal-color;
                 color: @font-color-secondary;
-                border: 2px solid @bg-color-secondary;
                 padding: 2px 15px;
                 font-weight: bold;
             }