Skip to content
Snippets Groups Projects
Commit cee3fdd2 authored by René Rösner's avatar René Rösner
Browse files

Merge branch 'feature/428-preview-changes' into 'main' 

planning#428: Styling changes

See merge request !16
parents b856a077 2007ed6d
No related branches found
No related tags found
1 merge request!16planning#428: Styling changes
Hide whitespace changes
Inline Side-by-side
components/Chip.tsx
+ 1
− 1
View file @ cee3fdd2
......@@ -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>
);
......
lib/utils/index.ts 0 → 100644
+ 42
− 0
View file @ cee3fdd2
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,
};
pages/resources/[serviceName].tsx
+ 5
− 1
View file @ cee3fdd2
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,
},
}
}
......
pages/resources/index.tsx
+ 39
− 31
View file @ cee3fdd2
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,
......
views/FeaturedApiModules.tsx
+ 9
− 2
View file @ cee3fdd2
......@@ -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"> &rarr;</span>
</a>
</Link>
</div>
</section>
</div>
......
views/Service.tsx
+ 2
− 1
View file @ cee3fdd2
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()
}}
>
......
views/SoftwareSuite.tsx
+ 4
− 3
View file @ cee3fdd2
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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment