Merge remote-tracking branch 'origin/master' into feature-scope-editor

.github/workflows/main.yml

@@ -42,74 +42,7 @@ jobs:
           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
         with:
           coverageCommand: yarn test --coverage --forceExit --detectOpenHandles
-
   docker:
-    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
-    needs: [test]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: docker/setup-buildx-action@v1
-
-      - uses: docker/login-action@v1 
-        with:
-          registry: www.ebl.lmu.de
-          username: ${{ secrets.EBL_REGISTRY_USERNAME }}
-          password: ${{ secrets.EBL_REGISTRY_PASSWORD }}
-
-      - id: docker_build
-        uses: docker/build-push-action@v2
-        with:        
-          build-args: |
-            REACT_APP_AUTH0_DOMAIN=auth.ebl.lmu.de
-            REACT_APP_CORRECTIONS_EMAIL=ebl-support+corrections@culture.lmu.de
-            REACT_APP_INFO_EMAIL=ebl-info@culture.lmu.de
-            REACT_APP_AUTH0_CLIENT_ID=${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
-            REACT_APP_AUTH0_AUDIENCE=${{ secrets.REACT_APP_AUTH0_AUDIENCE }}
-            REACT_APP_DICTIONARY_API_URL=/api
-            REACT_APP_SENTRY_DSN=${{ secrets.REACT_APP_SENTRY_DSN }}
-            REACT_APP_GA_TRACKING_ID=${{ secrets.REACT_APP_GA_TRACKING_ID }}
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: |
-            www.ebl.lmu.de/ebl-frontend:master
-            ${{format('www.ebl.lmu.de/ebl-frontend:master.{0}', github.run_number)}}
-
-  docker-test: 
-    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: docker/setup-buildx-action@v1
-
-      - uses: docker/login-action@v1 
-        with:
-          registry: www.ebl.lmu.de
-          username: ${{ secrets.EBL_REGISTRY_USERNAME }}
-          password: ${{ secrets.EBL_REGISTRY_PASSWORD }}
-
-      - id: docker_build
-        uses: docker/build-push-action@v2
-        with:        
-          build-args: |
-            REACT_APP_AUTH0_DOMAIN=auth.ebl.lmu.de
-            REACT_APP_CORRECTIONS_EMAIL=ebl-support+corrections@culture.lmu.de
-            REACT_APP_INFO_EMAIL=ebl-info@culture.lmu.de
-            REACT_APP_AUTH0_CLIENT_ID=${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
-            REACT_APP_AUTH0_AUDIENCE=${{ secrets.REACT_APP_AUTH0_AUDIENCE }}
-            REACT_APP_DICTIONARY_API_URL=/test/api
-            REACT_APP_SENTRY_DSN=${{ secrets.REACT_APP_SENTRY_DSN }}
-            REACT_APP_GA_TRACKING_ID=${{ secrets.REACT_APP_GA_TRACKING_ID }}
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: |
-            www.ebl.lmu.de/ebl-frontend:test
-
-  docker2:
     if: github.event_name == 'push' && github.ref == 'refs/heads/master'
     needs: [test]
     runs-on: ubuntu-latest
@@ -143,7 +76,7 @@ jobs:
             ebl.badw.de/ebl-frontend:master
             ${{format('ebl.badw.de/ebl-frontend:master.{0}', github.run_number)}}
 
-  docker-test2: 
+  docker-test: 
     if: github.event_name == 'push' && github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
     steps:

public/index.html

@@ -13,8 +13,9 @@
     data-rh="true">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
     integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
-    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+    crossorigin="anonymous">
   <meta name="google-site-verification" content="J13cZ-OSwYU4IUrzsMxb9A80nUcdgkG9U4xbBR3C7LA" />
   <meta property="og:type" content="website" />
   <meta property="og:site_name" content="electronic Babylonian Library" />

public/serve.json

@@ -5,7 +5,7 @@
       "headers": [
         {
           "key": "Content-Security-Policy",
-          "value": "default-src 'self'; connect-src 'self' https: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; script-src 'self' https://storage.googleapis.com https://*.googletagmanager.com https://sentry.io; worker-src 'self' blob:; img-src 'self' data: blob: https://cdli.mpiwg-berlin.mpg.de https://cdn.auth0.com https://*.google-analytics.com https://*.googletagmanager.com; font-src 'self' data: https://stackpath.bootstrapcdn.com https://use.fontawesome.com; style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com https://use.fontawesome.com; frame-src 'self' https://electronic-babylonian-literature.eu.auth0.com https://auth.ebl.lmu.de; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"  
+          "value": "default-src 'self'; connect-src 'self' https: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; script-src 'self' https://storage.googleapis.com https://*.googletagmanager.com https://sentry.io; worker-src 'self' blob:; img-src 'self' data: blob: https://cdli.mpiwg-berlin.mpg.de https://cdn.auth0.com https://*.google-analytics.com https://*.googletagmanager.com; font-src 'self' data: https://stackpath.bootstrapcdn.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com https://cdnjs.cloudflare.com; frame-src 'self' https://electronic-babylonian-literature.eu.auth0.com https://auth.ebl.lmu.de; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"
         },
         {
           "key": "Strict-Transport-Security",

src/App.test.ts

@@ -29,7 +29,10 @@ test.each([
   ...['date-converter', 'list-of-kings'].map((tabId) => '/about/' + tabId),
   '/signs',
   '/signs/sign_id',
+  '/impressum',
+  '/datenschutz',
 ])('%s renders without crashing', async (route) => {
+  window.scrollTo = jest.fn()
   const fakeApi = new FakeApi().allowStatistics(statisticsFactory.build())
   const appDriver = new AppDriver(fakeApi.client).withPath(route).render()
   await appDriver.waitForTextToDisappear('Loading...')

src/Footer.sass

@@ -0,0 +1,18 @@
+.main-footer
+    max-width: 1200px
+    padding-left: 1.5em
+    padding-right: 1.5em
+    margin-left: auto
+    margin-right: auto
+
+    ol.breadcrumb
+        & li a
+            padding: 0
+            display: inline
+        & li+li
+            padding-left: .5rem
+            &::before
+                display: inline-block
+                padding-right: .5rem
+                color: #6c757d
+                content: "|"

src/Footer.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import './Footer.sass'
+import { NavItem } from 'Header'
+
+export default function Footer(): JSX.Element {
+  return (
+    <footer className="main-footer">
+      <ol className="breadcrumb">
+        <NavItem href="/impressum" title="Impressum" as={'li'} />
+        <NavItem href="/datenschutz" title="Datenschutz" as={'li'} />
+      </ol>
+    </footer>
+  )
+}

src/Header.tsx

@@ -24,11 +24,19 @@ function EblLogo(): JSX.Element {
   )
 }
 
-function NavItem(props: { href: string; title: string }): JSX.Element {
+export function NavItem({
+  href,
+  title,
+  as,
+}: {
+  href: string
+  title: string
+  as?: React.ElementType
+}): JSX.Element {
   return (
-    <Nav.Item>
-      <LinkContainer to={props.href}>
-        <Nav.Link>{props.title}</Nav.Link>
+    <Nav.Item as={as}>
+      <LinkContainer to={href}>
+        <Nav.Link>{title}</Nav.Link>
       </LinkContainer>
     </Nav.Item>
   )

src/Introduction.sass

@@ -0,0 +1,42 @@
+.Introduction__chart
+  max-width: 1429px
+  width: 80%
+
+.Introduction__footer
+  margin: 1em 10%
+  text-align: center
+
+.BAdWIcon__image
+  width: 350px
+
+.LMUIcon__image
+  text-align: right
+  width: 200px
+
+.HumboldtIcon__image
+  width: 200px
+  padding-bottom: 1em
+
+.HumboldtIcon::after
+  content: '\a'
+  white-space: pre
+
+.Auth0Badge,
+.Auth0Badge__image
+  height: 50px
+  width: 150px
+
+.icon
+  &__large
+    font-size: 2.5em
+    margin-right: .2rem
+  &__twitter
+    vertical-align: middle
+    color: #212529
+
+    &:hover
+      color: #212529
+
+.eblInfo
+  vertical-align: middle
+  padding-right: 1em

src/Introduction.tsx

@@ -4,8 +4,9 @@ import AppContent from 'common/AppContent'
 import LMULogoGreen from 'LMU_Logo_green.svg'
 import BAdWLogoBlue from 'BAdW_Logo_blue.svg'
 import AvHLogo from 'AvH_Logo.svg'
+import LRZLogoBlue from 'lrz_wortbild_d_blau-230.png'
 
-import './Introduction.css'
+import './Introduction.sass'
 import { Col, Row } from 'react-bootstrap'
 import { HeadTags } from 'router/head'
 
@@ -76,12 +77,40 @@ function Auth0Badge(): JSX.Element {
 function TwitterIcon(): JSX.Element {
   return (
     <ExternalLink
-      className="TwitterIcon"
+      className="icon__twitter"
       href="https://twitter.com/ebl_info?ref_src=twsrc%5Etfw"
       title="eBL Twitter account"
     >
-      <i className="fab fa-twitter" />
-      <span className="eblInfo"> @eBL_info</span>
+      <i className="fab fa-x-twitter icon__large" />
+      <span className="eblInfo">@eBL_info</span>
+    </ExternalLink>
+  )
+}
+
+function FacebookIcon(): JSX.Element {
+  return (
+    <ExternalLink
+      href="https://www.facebook.com/profile.php?id=61556323986355"
+      title="eBL Facebook account"
+    >
+      <i className="fab fa-facebook icon__large" />
+      <span className="eblInfo">CAIC on Facebook</span>
+    </ExternalLink>
+  )
+}
+
+function LRZLogo(): JSX.Element {
+  return (
+    <ExternalLink
+      className="LMUIcon"
+      href="https://www.lrz.de/index.html"
+      title="Leibniz-Rechenzentrum"
+    >
+      <img
+        className="LMUIcon__image"
+        src={LRZLogoBlue}
+        alt="Leibniz-Rechenzentrum"
+      />
     </ExternalLink>
   )
 }
@@ -144,12 +173,20 @@ export default function Introduction(): JSX.Element {
         </Row>
         <Row>
           <Col className={'text-right'}>
+            <LRZLogo />
+          </Col>
+          <Col className={'text-center'}>
             <TwitterIcon />
           </Col>
           <Col className={'text-left'}>
             <Auth0Badge />
           </Col>
         </Row>
+        <Row>
+          <Col>
+            <FacebookIcon />
+          </Col>
+        </Row>
       </footer>
     </AppContent>
   )

src/NotFoundPage.sass

@@ -0,0 +1,4 @@
+.page-not-found
+    text-align: center
+    margin-top: 50px
+    min-height: 90vh

src/NotFoundPage.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
+import './NotFoundPage.sass'
 
 const NotFoundPage: React.FC = () => (
-  <div style={{ textAlign: 'center', marginTop: '50px' }}>
+  <div className="page-not-found">
     <h1>404 - Not Found</h1>
     <p>The page you are looking for does not exist.</p>
   </div>