Skip to content
GitLab
Commit f69c7ab3 authored by René Rösner's avatar René Rösner
Browse files

Fix: Added multiple eslint rules(planning#428)

parent 2ef3b3ce
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>
</div>