diff --git a/components/Chip.tsx b/components/Chip.tsx
index d225e9cd4f09ccef1391595433057f6d438d23bd..ad4bbf7122be142294e293a79fe86f1129821e45 100644
--- a/components/Chip.tsx
+++ b/components/Chip.tsx
@@ -5,7 +5,7 @@ type ChipOptions = {
export default ({ text, style }: ChipOptions) => {
return (
- <div className={`m-px px-3 py-1 text-xs rounded-full text-white ${style} w-auto self-start`}>
+ <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>
);
diff --git a/lib/utils/index.ts b/lib/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6600b4cc3ef443f9d349aadd4cf281deb7b1466c
--- /dev/null
+++ b/lib/utils/index.ts
@@ -0,0 +1,42 @@
+import { MouseEvent } from 'react';
+
+export function removeFromObjRecursive(name: string, obj: any) {
+ return JSON.parse(
+ JSON.stringify(obj, function (key, value) {
+ if (key !== name) return value;
+ })
+ );
+}
+
+export function replaceEmailsRecursive(name: string, obj: any) {
+ return JSON.parse(
+ JSON.stringify(obj, function (key, value) {
+ if (key === name) return encodeEmail(value);
+ return value;
+ })
+ );
+}
+
+export function encodeEmail(str: string) {
+ return btoa(str);
+}
+
+export function decodeEmail(str: string) {
+ return atob(str);
+}
+
+export function handleMailtoEvent(e: MouseEvent<HTMLAnchorElement>) {
+ const el = e.currentTarget;
+ const base = el.dataset.base;
+ const mail = decodeEmail(base);
+ el.href = 'mailto:' + mail;
+ return true;
+}
+
+export default {
+ removeFromObjRecursive,
+ replaceEmailsRecursive,
+ encodeEmail,
+ decodeEmail,
+ handleMailtoEvent,
+};
diff --git a/pages/resources/[serviceName].tsx b/pages/resources/[serviceName].tsx
index 8cdac60de13f81485b204d0bcdb62578622d8f34..6c4e8b635ad7c4b5d6b1dc86dade8cc9a7873643 100644
--- a/pages/resources/[serviceName].tsx
+++ b/pages/resources/[serviceName].tsx
@@ -1,6 +1,7 @@
import { Header } from '@/views/Service'
import Link from "next/link"
import { fetchServices, fetchService } from '@/lib/contentful'
+import { removeFromObjRecursive, replaceEmailsRecursive } from '@/lib/utils'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
import { IconChevronLeft } from '@tabler/icons'
@@ -56,9 +57,12 @@ export default function ({ service }) {
export async function getStaticProps({ params }) {
const service = await fetchService(params.serviceName)
+ // remove unwanted data and encrypt eMails
+ const nosys = removeFromObjRecursive('sys', service.fields);
+ const fields = replaceEmailsRecursive('eMail', nosys);
return {
props: {
- service: service.fields,
+ service: fields,
},
}
}
diff --git a/pages/resources/index.tsx b/pages/resources/index.tsx
index c73d04fd2d27d763d2207ec900e86a8492c0a60d..c12698ec683c55a3dd59b917748f3479dce1c9ae 100644
--- a/pages/resources/index.tsx
+++ b/pages/resources/index.tsx
@@ -1,12 +1,14 @@
import React, { useEffect, useState } from "react";
import { useRouter } from 'next/router'
import { fetchServices, ServiceType, Tag } from '@/lib/contentful'
+import { removeFromObjRecursive, replaceEmailsRecursive } from '@/lib/utils'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
import { IconArrowBigRight, IconChevronLeft, IconMail } from '@tabler/icons'
import Tooltip from '@/components/Tooltip'
import ServiceTag from "@/components/ServiceTag";
import Chip from "@/components/Chip";
import Link from "next/link"
+import { encodeEmail, decodeEmail, handleMailtoEvent } from '@/lib/utils';
import filterData from '@/lib/assets/data/currentFilter.json';
@@ -243,38 +245,39 @@ export default function ({ services }) {
</div>
</li>
))}
- <li
- key='Additional-Resource'
- className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
- >
- <div aria-labelledby={'service-add-on'}>
- <div className="min-w-0 flex-1">
- <a href="https://gitlab.opencode.de/fitko/feedback/-/issues/new" className="hover:underline">
- <p className="text-sm font-medium text-gray-900">
- Dein zukünfitiger Inhalt
- </p>
- </a>
- </div>
- <div className="mt-2 text-sm text-gray-700 space-y-4">
- Du kennst weitere Inhalte, die hier nicht gelistet sind? Kontaktiere uns und gebe uns darüber Bescheid.
- </div>
- <div className="mt-6 flex justify-end space-x-8">
- <div className="flex text-sm">
- <span className="inline-flex items-center text-sm">
- <Link href={`mailto:fit-connect@fitko.de`} passHref>
- <a className="inline-flex space-x-2 text-gray-400 hover:text-gray-800">
- <span className="font-medium">Kontakt</span>
- <IconMail
- className="h-5 w-5"
- aria-hidden="true"
- />
- </a>
- </Link>
- </span>
- </div>
+ <li
+ key='Additional-Resource'
+ className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
+ >
+ <div aria-labelledby={'service-add-on'}>
+ <div className="min-w-0 flex-1">
+ <p className="text-sm font-medium text-gray-900">
+ Dein zukünfitiger Inhalt
+ </p>
+ </div>
+ <div className="mt-2 text-sm text-gray-700 space-y-4">
+ Dein zukünfitiger Inhalt" entfernen und stattdessen Inhalt der Box anpassen: "Du kennst weitere Inhalte, die hier nicht gelistet sind? Kontaktiere uns und gebe uns darüber Bescheid. Am einfachsten geht das über unseren Issue-Tracker im Open Source Code Repository der öffentlichen Verwaltung . Schau vor Deinem Feedback bitte in die <a className='text-blue-500' href='https://gitlab.opencode.de/fitko/feedback/-/issues'>Liste der bestehenden Issues</a> und erstelle erst dann <a className='text-blue-500' href='https://gitlab.opencode.de/fitko/feedback/-/issues/new'>ein neues Issue</a>.
+ </div>
+ <div className="mt-6 flex justify-end space-x-8" id="kontakt-link">
+ <div className="flex text-sm">
+ <span className="inline-flex items-center text-sm">
+ <a
+ href="#kontakt-link"
+ onMouseDown={handleMailtoEvent}
+ data-base={`${encodeEmail('fit-connect@fitko.de')}`}
+ className="inline-flex space-x-2 text-gray-400 hover:text-gray-800"
+ >
+ <span className="font-medium">Kontakt</span>
+ <IconMail
+ className="h-5 w-5"
+ aria-hidden="true"
+ />
+ </a>
+ </span>
</div>
</div>
- </li>
+ </div>
+ </li>
</ul>
</div>
</main>
@@ -285,7 +288,12 @@ export default function ({ services }) {
}
export async function getStaticProps(context) {
- const services = (await fetchServices()).map((service) => service.fields)
+ const services = (await fetchServices()).map((service) => {
+ // remove unwanted data and encrypt eMails
+ const nosys = removeFromObjRecursive('sys', service.fields);
+ const fields = replaceEmailsRecursive('eMail', nosys);
+ return fields;
+ })
return {
props: {
services,
diff --git a/views/FeaturedApiModules.tsx b/views/FeaturedApiModules.tsx
index fc690f089ed2a026a2411f8fbff6fc8cd4bce7b2..48ac8bc41c6a16ef39414558ae2dcc3e66919ae2 100644
--- a/views/FeaturedApiModules.tsx
+++ b/views/FeaturedApiModules.tsx
@@ -113,9 +113,16 @@ export default () => {
Direkt loslegen!
</h1>
</div>
- <p className="p-8 mt-6 max-w-7xl text-lg text-gray-800 bg-white rounded-2xl">
- Mit den folgenden Ressourcen kannst Du direkt loslegen und mehr über die Föderale IT-Infrastruktur von Bund und Ländern erfahren und Anwendungen für die Öffentliche Verwaltung erstellen. Pespektivisch werden an dieser Stelle konkrete Entwicklungsszenarien mit den jeweils dafür benötigten Entwicklungsressourcen zusammengestellt. Eine Übersicht über alle vorhandenen Entwicklungsressourcen findest Du <Link href="/resources" passHref><a className='text-blue-500'>hier</a></Link>.
+ <p className="p-8 mt-6 max-w-7xl text-lg text-gray-800 bg-white rounded-t-2xl">
+ Mit den folgenden Ressourcen kannst Du direkt loslegen und mehr über die Föderale IT-Infrastruktur von Bund und Ländern erfahren und Anwendungen für die Öffentliche Verwaltung erstellen. Pespektivisch werden an dieser Stelle konkrete Entwicklungsszenarien mit den jeweils dafür benötigten Entwicklungsressourcen zusammengestellt.
</p>
+ <div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
+ <Link href="/resources" passHref>
+ <a className="text-base font-medium text-yellow-400 hover:text-yellow-600">
+ Zu den Entwicklungsressourcen<span aria-hidden="true"> →</span>
+ </a>
+ </Link>
+ </div>
</section>
</div>
diff --git a/views/Service.tsx b/views/Service.tsx
index 234e8a18ff9f36a7793afd0d5d3384ad1d51e0d5..cfae9cdaa22e4574e792d29ab2ce15d2e9cf766b 100644
--- a/views/Service.tsx
+++ b/views/Service.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import Link from 'next/link'
import PageHeaderCard from '@/components/PageHeaderCard'
+import { decodeEmail } from '@/lib/utils'
type ServiceStatus = 'Alpha' | 'Beta' | 'Live'
@@ -59,7 +60,7 @@ export function Header({
<a
target={'_blank'}
onClick={(e) => {
- window.open(`mailto:${contact.mailTo}`, '_blank')
+ window.open(`mailto:${decodeEmail(contact.mailTo)}`, '_blank')
e.preventDefault()
}}
>
diff --git a/views/SoftwareSuite.tsx b/views/SoftwareSuite.tsx
index d4e82e548cfa5e56457cda26f58fac1e0080c313..edc876b712a85970fcbca59381bc5f5eaf765b10 100644
--- a/views/SoftwareSuite.tsx
+++ b/views/SoftwareSuite.tsx
@@ -1,4 +1,5 @@
-import PageHeaderCard from "@/components/PageHeaderCard"
+import PageHeaderCard from '@/components/PageHeaderCard'
+import { decodeEmail } from '@/lib/utils'
type HeaderOptions = {
title: string
@@ -44,11 +45,11 @@ export function Header({
<a
target={'_blank'}
onClick={(e) => {
- window.open(`mailto:${manager.mailTo}`, '_blank')
+ window.open(`mailto:${decodeEmail(manager.mailTo)}`, '_blank')
e.preventDefault()
}}
>
- {manager.name ? manager.name : manager.mailTo}
+ {manager.name ? manager.name : decodeEmail(manager.mailTo).replace('@', '<ät>')}
</a>
</dd>
</div>