Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
FIT-Connect
Entwicklungsportal
Commits
f69c7ab3
Commit
f69c7ab3
authored
Jun 21, 2022
by
René Rösner
Browse files
Fix: Added multiple eslint rules(
planning#428
)
parent
2ef3b3ce
Changes
15
Expand all
Hide whitespace changes
Inline
Side-by-side
.eslintrc.json
View file @
f69c7ab3
...
...
@@ -19,7 +19,7 @@
"rules"
:
{
"indent"
:
[
"error"
,
2
4
],
"space-before-function-paren"
:
[
"error"
,
...
...
@@ -45,6 +45,17 @@
"tag"
]
}
],
"comma-dangle"
:
"off"
,
"@typescript-eslint/comma-dangle"
:
[
"error"
,
{
"arrays"
:
"never"
,
"objects"
:
"always-multiline"
,
"imports"
:
"never"
,
"exports"
:
"never"
,
"functions"
:
"never"
}
]
}
}
\ No newline at end of file
components/Chip.tsx
View file @
f69c7ab3
...
...
@@ -4,9 +4,9 @@ type ChipOptions = {
}
export
default
({
text
,
style
}:
ChipOptions
)
=>
{
return
(
<
div
className
=
{
`m-px px-3 py-1 text-xs font-bold rounded-full text-white
${
style
}
w-auto self-start shadow-sm`
}
>
{
text
}
</
div
>
)
return
(
<
div
className
=
{
`m-px px-3 py-1 text-xs font-bold rounded-full text-white
${
style
}
w-auto self-start shadow-sm`
}
>
{
text
}
</
div
>
)
}
components/PageHeaderCard.tsx
View file @
f69c7ab3
...
...
@@ -12,45 +12,45 @@ type HeaderOptions = {
}
export
default
({
title
,
description
,
img
,
children
}:
HeaderOptions
)
=>
{
return
(
<
section
className
=
"bg-white mt-10 lg:mt-32 w-full mx-auto relative z-10 lg:pb-32"
aria-labelledby
=
"heading"
>
<
h2
className
=
"sr-only"
id
=
"heading"
>
{
title
}
</
h2
>
<
div
className
=
"flex flex-col bg-white rounded-b-lg shadow-xl"
>
<
div
className
=
"flex-1 relative pt-24 px-6 pb-8 md:px-8"
>
<
div
className
=
"h-32 absolute top-0 p-4 inline-block transform -translate-y-1/2"
>
<
header
className
=
{
'
flex justify-between space-x-6
'
}
>
{
img
&&
img
.
src
?
(
<
img
className
=
{
'
w-24 h-24
'
}
src
=
{
img
.
src
}
alt
=
{
img
.
alt
}
/>
)
:
(
<
IconBooks
className
=
{
'
w-24 h-24
'
}
/>
)
}
<
h1
className
=
"p-5 text-3xl lg:text-5xl font-extrabold tracking-tight text-gray-900 overflow-hidden"
>
return
(
<
section
className
=
"bg-white mt-10 lg:mt-32 w-full mx-auto relative z-10 lg:pb-32"
aria-labelledby
=
"heading"
>
<
h2
className
=
"sr-only"
id
=
"heading"
>
{
title
}
</
h1
>
</
header
>
</
div
>
<
div
className
=
"cms-blog-text text-xl text-gray-800 mt-14"
dangerouslySetInnerHTML
=
{
{
__html
:
description
}
}
/>
</
div
>
<
div
className
=
"p-6 bg-gray-50 rounded-b-lg md:px-8 flex flex-row items-center gap-16"
>
{
children
}
</
div
>
</
div
>
</
section
>
)
</
h2
>
<
div
className
=
"flex flex-col bg-white rounded-b-lg shadow-xl"
>
<
div
className
=
"flex-1 relative pt-24 px-6 pb-8 md:px-8"
>
<
div
className
=
"h-32 absolute top-0 p-4 inline-block transform -translate-y-1/2"
>
<
header
className
=
{
'
flex justify-between space-x-6
'
}
>
{
img
&&
img
.
src
?
(
<
img
className
=
{
'
w-24 h-24
'
}
src
=
{
img
.
src
}
alt
=
{
img
.
alt
}
/>
)
:
(
<
IconBooks
className
=
{
'
w-24 h-24
'
}
/>
)
}
<
h1
className
=
"p-5 text-3xl lg:text-5xl font-extrabold tracking-tight text-gray-900 overflow-hidden"
>
{
title
}
</
h1
>
</
header
>
</
div
>
<
div
className
=
"cms-blog-text text-xl text-gray-800 mt-14"
dangerouslySetInnerHTML
=
{
{
__html
:
description
}
}
/>
</
div
>
<
div
className
=
"p-6 bg-gray-50 rounded-b-lg md:px-8 flex flex-row items-center gap-16"
>
{
children
}
</
div
>
</
div
>
</
section
>
)
}
components/ServiceTag.tsx
View file @
f69c7ab3
...
...
@@ -9,39 +9,39 @@ type ServiceTagOptions = {
const
filters
=
filterData
.
filter
const
formatLabel
=
(
text
:
string
)
=>
{
const
label
=
0
const
value
=
1
if
(
text
.
includes
(
'
:
'
))
{
const
splittedLabel
=
text
.
split
(
'
:
'
)
return
`
${
translateLabel
(
splittedLabel
[
label
])}
:
${
translateValue
(
splittedLabel
[
label
],
splittedLabel
[
value
])}
`
}
return
text
const
label
=
0
const
value
=
1
if
(
text
.
includes
(
'
:
'
))
{
const
splittedLabel
=
text
.
split
(
'
:
'
)
return
`
${
translateLabel
(
splittedLabel
[
label
])}
:
${
translateValue
(
splittedLabel
[
label
],
splittedLabel
[
value
])}
`
}
return
text
}
function
translateLabel
(
label
:
string
):
string
{
const
filterCategoriesForTranslation
=
filters
.
filter
(
filterCategory
=>
{
return
filterCategory
.
id
==
label
})
return
filterCategoriesForTranslation
.
length
>
0
?
filterCategoriesForTranslation
[
0
].
label
:
''
const
filterCategoriesForTranslation
=
filters
.
filter
(
filterCategory
=>
{
return
filterCategory
.
id
==
label
})
return
filterCategoriesForTranslation
.
length
>
0
?
filterCategoriesForTranslation
[
0
].
label
:
''
}
function
translateValue
(
label
:
string
,
value
:
string
):
string
{
const
filterCategoriesForTranslation
=
filters
.
filter
(
filterCategory
=>
{
return
filterCategory
.
id
==
label
})
if
(
filterCategoriesForTranslation
.
length
>
0
)
{
const
filterCategory
=
filterCategoriesForTranslation
[
0
]
const
filterValues
=
filterCategory
.
options
.
filter
(
option
=>
{
return
option
.
id
==
value
const
filterCategoriesForTranslation
=
filters
.
filter
(
filterCategory
=>
{
return
filterCategory
.
id
==
label
})
return
filterValues
.
length
>
0
?
filterValues
[
0
].
label
:
''
}
else
{
return
''
}
if
(
filterCategoriesForTranslation
.
length
>
0
)
{
const
filterCategory
=
filterCategoriesForTranslation
[
0
]
const
filterValues
=
filterCategory
.
options
.
filter
(
option
=>
{
return
option
.
id
==
value
})
return
filterValues
.
length
>
0
?
filterValues
[
0
].
label
:
''
}
else
{
return
''
}
}
export
default
({
text
,
style
}:
ServiceTagOptions
)
=>
{
return
(
<
Chip
text
=
{
formatLabel
(
text
)
}
style
=
{
`
${
style
}
capitalize
${
text
==
'
label:external
'
?
'
hidden
'
:
''
}
`
}
/>
)
return
(
<
Chip
text
=
{
formatLabel
(
text
)
}
style
=
{
`
${
style
}
capitalize
${
text
==
'
label:external
'
?
'
hidden
'
:
''
}
`
}
/>
)
}
components/Tooltip.tsx
View file @
f69c7ab3
...
...
@@ -9,34 +9,34 @@ type TooltipOptions = {
}
export
default
({
delayIn
,
delayOut
,
direction
,
children
,
content
}:
TooltipOptions
)
=>
{
let
timeout
const
[
active
,
setActive
]
=
useState
(
false
)
let
timeout
const
[
active
,
setActive
]
=
useState
(
false
)
const
showTooltip
=
()
=>
{
clearInterval
(
timeout
)
timeout
=
setTimeout
(()
=>
{
setActive
(
true
)
},
delayIn
||
400
)
}
const
showTooltip
=
()
=>
{
clearInterval
(
timeout
)
timeout
=
setTimeout
(()
=>
{
setActive
(
true
)
},
delayIn
||
400
)
}
const
hideTooltip
=
()
=>
{
clearInterval
(
timeout
)
timeout
=
setTimeout
(()
=>
{
setActive
(
false
)
},
delayOut
||
400
)
}
const
hideTooltip
=
()
=>
{
clearInterval
(
timeout
)
timeout
=
setTimeout
(()
=>
{
setActive
(
false
)
},
delayOut
||
400
)
}
return
(
<
div
className
=
"tooltip-wrapper"
onMouseEnter
=
{
showTooltip
}
onMouseLeave
=
{
hideTooltip
}
>
{
children
}
<
div
className
=
{
`tooltip-content
${
direction
||
'
top-left
'
}
${
active
?
'
active
'
:
''
}
`
}
>
<
div
className
=
"tooltip-arrow"
></
div
>
{
content
}
</
div
>
</
div
>
)
return
(
<
div
className
=
"tooltip-wrapper"
onMouseEnter
=
{
showTooltip
}
onMouseLeave
=
{
hideTooltip
}
>
{
children
}
<
div
className
=
{
`tooltip-content
${
direction
||
'
top-left
'
}
${
active
?
'
active
'
:
''
}
`
}
>
<
div
className
=
"tooltip-arrow"
></
div
>
{
content
}
</
div
>
</
div
>
)
}
components/layout.tsx
View file @
f69c7ab3
...
...
@@ -2,33 +2,33 @@ import { Footer, FooterColumn } from '@/views/layout/Footer'
import
{
useEffect
}
from
'
react
'
export
function
Layout
({
children
})
{
useEffect
(()
=>
{
document
.
body
.
classList
.
add
(
'
absolute
'
)
document
.
body
.
classList
.
add
(
'
lg:relative
'
)
})
useEffect
(()
=>
{
document
.
body
.
classList
.
add
(
'
absolute
'
)
document
.
body
.
classList
.
add
(
'
lg:relative
'
)
})
return
(
<>
{
/* <Navbar
return
(
<>
{
/* <Navbar
logo={{
img: '/img/fitko-logo.svg',
alt: 'Föderale Entwicklungsportal',
}}
/> */
}
<
main
className
=
"lg:py-10"
>
{
children
}
</
main
>
<
Footer
logo
=
{
{
img
:
'
/img/fitko-main-logo.svg
'
,
alt
:
'
Föderale Entwicklungsportal
'
}
}
copyright
=
{
'
FITKO
'
}
>
<
FooterColumn
title
=
{
'
Rechtliches
'
}
links
=
{
[
{
label
:
'
Impressum
'
,
href
:
'
https://www.fitko.de/impressum
'
},
{
label
:
'
Datenschutz
'
,
href
:
'
https://www.fitko.de/datenschutz
'
},
{
label
:
'
Barrierefreiheit
'
,
href
:
'
https://www.fitko.de/barrierefreiheitserklaerung
'
}
]
}
/>
<
FooterColumn
title
=
{
''
}
links
=
{
[
{
label
:
''
,
href
:
'
/
'
}
]
}
/>
</
Footer
>
</>
)
<
main
className
=
"lg:py-10"
>
{
children
}
</
main
>
<
Footer
logo
=
{
{
img
:
'
/img/fitko-main-logo.svg
'
,
alt
:
'
Föderale Entwicklungsportal
'
,
}
}
copyright
=
{
'
FITKO
'
}
>
<
FooterColumn
title
=
{
'
Rechtliches
'
}
links
=
{
[
{
label
:
'
Impressum
'
,
href
:
'
https://www.fitko.de/impressum
'
},
{
label
:
'
Datenschutz
'
,
href
:
'
https://www.fitko.de/datenschutz
'
},
{
label
:
'
Barrierefreiheit
'
,
href
:
'
https://www.fitko.de/barrierefreiheitserklaerung
'
}
]
}
/>
<
FooterColumn
title
=
{
''
}
links
=
{
[
{
label
:
''
,
href
:
'
/
'
}
]
}
/>
</
Footer
>
</>
)
}
lib/contentful/index.ts
View file @
f69c7ab3
import
{
ContentfulClientApi
,
createClient
,
Entry
ContentfulClientApi
,
createClient
,
Entry
}
from
'
contentful
'
const
space
=
process
.
env
.
NEXT_PUBLIC_CONTENTFUL_SPACE_ID
const
accessToken
=
process
.
env
.
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
const
client
:
ContentfulClientApi
=
createClient
({
space
,
accessToken
space
,
accessToken
,
})
export
type
ServiceType
=
{
...
...
@@ -34,20 +34,20 @@ export type Tag = {
}
export
async
function
fetchServices
():
Promise
<
Entry
<
any
>
[]
>
{
const
services
=
await
client
.
getEntries
({
content_type
:
'
service
'
})
if
(
services
.
items
)
return
services
.
items
console
.
log
(
'
Error getting Entries for services.
'
)
const
services
=
await
client
.
getEntries
({
content_type
:
'
service
'
,
})
if
(
services
.
items
)
return
services
.
items
console
.
log
(
'
Error getting Entries for services.
'
)
}
export
async
function
fetchService
(
slug
):
Promise
<
Entry
<
any
>>
{
const
services
=
await
client
.
getEntries
({
content_type
:
'
service
'
})
return
services
.
items
.
find
(
(
service
:
Entry
<
ServiceType
>
)
=>
service
.
fields
.
slug
===
slug
)
const
services
=
await
client
.
getEntries
({
content_type
:
'
service
'
,
})
return
services
.
items
.
find
(
(
service
:
Entry
<
ServiceType
>
)
=>
service
.
fields
.
slug
===
slug
)
}
export
default
{
fetchServices
,
fetchService
}
lib/utils/index.ts
View file @
f69c7ab3
import
{
MouseEvent
}
from
'
react
'
export
function
removeFromObjRecursive
(
nodeName
:
string
,
nextJsDataObject
:
any
)
{
return
JSON
.
parse
(
JSON
.
stringify
(
nextJsDataObject
,
function
(
key
,
value
)
{
if
(
key
!==
nodeName
)
return
value
})
)
return
JSON
.
parse
(
JSON
.
stringify
(
nextJsDataObject
,
function
(
key
,
value
)
{
if
(
key
!==
nodeName
)
return
value
})
)
}
export
function
replaceEmailsRecursive
(
name
:
string
,
nextJsDataObject
:
any
)
{
return
JSON
.
parse
(
JSON
.
stringify
(
nextJsDataObject
,
function
(
key
,
value
)
{
if
(
key
===
name
)
return
encodeEmail
(
value
)
return
value
})
)
return
JSON
.
parse
(
JSON
.
stringify
(
nextJsDataObject
,
function
(
key
,
value
)
{
if
(
key
===
name
)
return
encodeEmail
(
value
)
return
value
})
)
}
export
function
encodeEmail
(
emailAddress
:
string
)
{
return
btoa
(
emailAddress
)
return
btoa
(
emailAddress
)
}
export
function
decodeEmail
(
encodedEmailAddress
:
string
)
{
return
atob
(
encodedEmailAddress
)
return
atob
(
encodedEmailAddress
)
}
export
function
handleMailtoEvent
(
mouseEvent
:
MouseEvent
<
HTMLAnchorElement
>
)
{
const
targetElement
=
mouseEvent
.
currentTarget
const
base
=
targetElement
.
dataset
.
base
const
mail
=
decodeEmail
(
base
)
targetElement
.
href
=
'
mailto:
'
+
mail
return
true
const
targetElement
=
mouseEvent
.
currentTarget
const
base
=
targetElement
.
dataset
.
base
const
mail
=
decodeEmail
(
base
)
targetElement
.
href
=
'
mailto:
'
+
mail
return
true
}
export
default
{
removeFromObjRecursive
,
replaceEmailsRecursive
,
encodeEmail
,
decodeEmail
,
handleMailtoEvent
removeFromObjRecursive
,
replaceEmailsRecursive
,
encodeEmail
,
decodeEmail
,
handleMailtoEvent
,
}
pages/404.tsx
View file @
f69c7ab3
import
{
IconBookmark
,
IconBook
,
IconRss
,
IconListDetails
,
IconChevronRight
IconBookmark
,
IconBook
,
IconRss
,
IconListDetails
,
IconChevronRight
}
from
'
@tabler/icons
'
export
default
function
NotFound
()
{
const
links
=
[
{
title
:
'
Documentation
'
,
description
:
'
Learn how to integrate our tools with your app
'
,
icon
:
IconBook
},
{
title
:
'
API Reference
'
,
description
:
'
A complete API reference for our libraries
'
,
icon
:
IconListDetails
},
{
title
:
'
Guides
'
,
description
:
'
Installation guides that cover popular setups
'
,
icon
:
IconBookmark
},
{
title
:
'
Blog
'
,
description
:
'
Read our latest news and articles
'
,
icon
:
IconRss
}
]
const
links
=
[
{
title
:
'
Documentation
'
,
description
:
'
Learn how to integrate our tools with your app
'
,
icon
:
IconBook
,
},
{
title
:
'
API Reference
'
,
description
:
'
A complete API reference for our libraries
'
,
icon
:
IconListDetails
,
},
{
title
:
'
Guides
'
,
description
:
'
Installation guides that cover popular setups
'
,
icon
:
IconBookmark
,
},
{
title
:
'
Blog
'
,
description
:
'
Read our latest news and articles
'
,
icon
:
IconRss
,
}
]
return
(
<
div
className
=
"bg-white"
>
<
main
className
=
"max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8"
>
<
div
className
=
"max-w-xl mx-auto py-16 sm:py-24"
>
<
div
className
=
"text-center"
>
<
p
className
=
"text-sm font-semibold text-yellow-600 uppercase tracking-wide"
>
return
(
<
div
className
=
"bg-white"
>
<
main
className
=
"max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8"
>
<
div
className
=
"max-w-xl mx-auto py-16 sm:py-24"
>
<
div
className
=
"text-center"
>
<
p
className
=
"text-sm font-semibold text-yellow-600 uppercase tracking-wide"
>
404 Fehler
</
p
>
<
h1
className
=
"mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl"
>
</
p
>
<
h1
className
=
"mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl"
>
Diese Seite konnte nicht gefunden werden
</
h1
>
<
p
className
=
"mt-2 text-lg text-gray-500"
>
</
h1
>
<
p
className
=
"mt-2 text-lg text-gray-500"
>
Die von Ihnen gesuchte Seite konnte nicht gefunden werden.
</
p
>
</
div
>
<
div
className
=
"mt-12"
>
<
h2
className
=
"text-sm font-semibold text-gray-500 tracking-wide uppercase"
>
</
p
>
</
div
>
<
div
className
=
"mt-12"
>
<
h2
className
=
"text-sm font-semibold text-gray-500 tracking-wide uppercase"
>
Andere besuchte Seiten
</
h2
>
<
ul
role
=
"list"
className
=
"mt-4 border-t border-b border-gray-200 divide-y divide-gray-200"
>
{
links
.
map
((
link
,
linkIdx
)
=>
(
<
li
key
=
{
linkIdx
}
className
=
"relative py-6 flex items-start space-x-4"
>
<
div
className
=
"flex-shrink-0"
>
<
span
className
=
"flex items-center justify-center h-12 w-12 rounded-lg bg-yellow-50"
>
<
link
.
icon
className
=
"h-6 w-6 text-yellow-700"
aria-hidden
=
"true"
/>
</
span
>
</
div
>
<
div
className
=
"min-w-0 flex-1"
>
<
h3
className
=
"mb-0 text-base font-medium text-gray-900"
>
<
span
className
=
"rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-yellow-500"
>
<
a
href
=
"#"
className
=
"focus:outline-none"
>
<
span
className
=
"absolute inset-0"
aria-hidden
=
"true"
/>
{
link
.
title
}
</
a
>
</
span
>
</
h3
>
<
p
className
=
"mb-0 text-base text-gray-500"
>
{
link
.
description
}
</
p
>
</
div
>
<
div
className
=
"flex-shrink-0 self-center"
>
<
IconChevronRight
className
=
"h-5 w-5 text-gray-400"
aria-hidden
=
"true"
/>
</
div
>
</
li
>
))
}
</
ul
>
<
div
className
=
"mt-8"
>
<
a
href
=
"#"
className
=
"text-base font-medium text-yellow-600 hover:text-yellow-500"
>
</
h2
>
<
ul
role
=
"list"
className
=
"mt-4 border-t border-b border-gray-200 divide-y divide-gray-200"
>
{
links
.
map
((
link
,
linkIdx
)
=>
(
<
li
key
=
{
linkIdx
}
className
=
"relative py-6 flex items-start space-x-4"
>
<
div
className
=
"flex-shrink-0"
>
<
span
className
=
"flex items-center justify-center h-12 w-12 rounded-lg bg-yellow-50"
>
<
link
.
icon
className
=
"h-6 w-6 text-yellow-700"
aria-hidden
=
"true"
/>
</
span
>
</
div
>
<
div
className
=
"min-w-0 flex-1"
>
<
h3
className
=
"mb-0 text-base font-medium text-gray-900"
>
<
span
className
=
"rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-yellow-500"
>
<
a
href
=
"#"
className
=
"focus:outline-none"
>
<
span
className
=
"absolute inset-0"
aria-hidden
=
"true"
/>
{
link
.
title
}
</
a
>
</
span
>
</
h3
>
<
p
className
=
"mb-0 text-base text-gray-500"
>
{
link
.
description
}
</
p
>