feat: added caching for cms requests, updated breadcrumbs

Manuel Schächinger · Manuel Schächinger · commit ab44d9ac0474 · 2026-01-03T16:25:25.000+01:00
diff --git a/app/[locale]/projects/[slug]/page.tsx b/app/[locale]/projects/[slug]/page.tsx
@@ -7,7 +7,7 @@ import ProjectImages from '@components/molecules/ProjectImages';
 import ProjectLinks from '@components/molecules/ProjectLinks';
 import ProjectMasterData from '@components/molecules/ProjectMasterData';
 import PageContainer from '@components/organisms/PageContainer';
-import { loadProjectBySlug } from '@lib/contentful';
+import { loadProjectBySlug } from '@dal/projects';
 import { generateProjectMetadata } from '@lib/projects';
 import type { LocaleCode } from '@lib/router';
 
diff --git a/app/[locale]/projects/transportkit/page.tsx b/app/[locale]/projects/transportkit/page.tsx
@@ -8,7 +8,7 @@ import ProjectLinks from '@components/molecules/ProjectLinks';
 import ProjectMasterData from '@components/molecules/ProjectMasterData';
 import PageContainer from '@components/organisms/PageContainer';
 import PageSection from '@components/organisms/PageSection';
-import { loadProjectBySlug } from '@lib/contentful';
+import { loadProjectBySlug } from '@dal/projects';
 import { generateProjectMetadata } from '@lib/projects';
 import type { LocaleCode } from '@lib/router';
 
diff --git a/app/[locale]/sports/page.tsx b/app/[locale]/sports/page.tsx
@@ -7,7 +7,7 @@ import LinkButton from '@components/atoms/LinkButton';
 import ContestParticipation from '@components/molecules/ContestParticipation';
 import PageContainer from '@components/organisms/PageContainer';
 import PageSection from '@components/organisms/PageSection';
-import { loadParticipationsByContest } from '@lib/contentful';
+import { loadParticipationsByContest } from '@dal/participations';
 import type { LocaleCode } from '@lib/router';
 import { generatePageMeta } from '@lib/seo';
 import { getPb } from '@models/participation';
diff --git a/app/components/atoms/AvailabilityIndicator.tsx b/app/components/atoms/AvailabilityIndicator.tsx
@@ -1,7 +1,7 @@
 import { getTranslations } from 'next-intl/server';
 
 import Clock from '@components/icons/Clock';
-import { loadAvailability } from '@lib/contentful';
+import { loadAvailability } from '@dal/availability';
 
 const AvailabilityIndicator = async () => {
   const [availability, t] = await Promise.all([
diff --git a/app/components/atoms/Breadcumbs.tsx b/app/components/atoms/Breadcumbs.tsx
@@ -19,12 +19,13 @@ const Breadcrumbs = ({ list }: Props) => {
   const visible = 1 < list.length;
 
   return (
-    <div className={clsx(list.length && 'mb-4', visible ? 'sm:mb-4' : 'sm:hidden')}>
+    <div className={clsx(list.length && 'mb-4 sm:mb-4', !list.length && 'hidden')}>
       <nav aria-label="Breadcrumb">
         <ul className="flex list-none text-xs">
           <li key="home" className={clsx(visible && 'hidden sm:inline-block', 'flex-none')}>
             <Link href="/" className="text-gray-400 dark:text-gray-400">
-              <Home className="hidden sm:inline-block text-[0.875rem] relative -top-[1px]" />
+              <Home className="hidden sm:inline-block text-[0.875rem] relative -top-[1.5px]" />
+              <ChevronRight className="rotate-180 sm:hidden relative -top-[1px] text-gray-400 dark:text-gray-400" />
               <span className={clsx(visible && 'hidden', 'ml-2 sm:hidden')}>{t('home')}</span>
             </Link>
           </li>
diff --git a/app/components/atoms/YearInFigures.tsx b/app/components/atoms/YearInFigures.tsx
@@ -5,7 +5,7 @@ import Heading from '@components/atoms/Heading';
 import CoffeeToGo from '@components/icons/CoffeeToGo';
 import Medal from '@components/icons/Medal';
 import Server from '@components/icons/Server';
-import { loadFigures } from '@lib/contentful';
+import { loadFigures } from '@dal/figures';
 
 const calcDays = (factor = 1) => {
   var date = new Date();
diff --git a/app/components/icons/Icon.tsx b/app/components/icons/Icon.tsx
@@ -11,7 +11,7 @@ const Icon = (props: IconProps) => (
       height="1em"
       { ...{
         ...props,
-        className: `inline-block${props.className ? ` ${props.className}` : ''}`,
+        className: `${!props.className?.startsWith('hidden') ? 'inline-block' : ''}${props.className ? ` ${props.className}` : ''}`,
         style: { ...(props.style || {}), fill: 'currentColor' },
         children: undefined,
         title: undefined,
diff --git a/app/components/organisms/CareerList.tsx b/app/components/organisms/CareerList.tsx
@@ -5,7 +5,7 @@ import type { HeadingTag } from '@components/atoms/Heading';
 import LinkButton from '@components/atoms/LinkButton';
 import CareerItem from '@components/organisms/CareerItem';
 import HistoryItemList from '@components/organisms/HistoryItemList';
-import { loadCareer } from '@lib/contentful';
+import { loadCareer } from '@dal/career';
 import type { LocaleCode } from '@lib/router';
 import { HistoryType } from '@/app/models/history';
 
diff --git a/app/components/organisms/CertificationList.tsx b/app/components/organisms/CertificationList.tsx
@@ -2,7 +2,7 @@ import { getLocale, getTranslations } from 'next-intl/server';
 
 import CertificationItem from '@components/organisms/CertificationItem';
 import HistoryItemList from '@components/organisms/HistoryItemList';
-import { loadCertifications } from '@lib/contentful';
+import { loadCertifications } from '@dal/certifications';
 import type { LocaleCode } from '@lib/router';
 
 const CertificationList = async () => {
diff --git a/app/components/organisms/NowList.tsx b/app/components/organisms/NowList.tsx
@@ -2,7 +2,7 @@ import { getLocale, getTranslations } from 'next-intl/server';
 
 import { formatDate } from '@app/utils';
 import BulletList from '@components/atoms/BulletList';
-import { loadNow } from '@lib/contentful';
+import { loadNow } from '@dal/now';
 import type { LocaleCode } from '@lib/router';
 
 const NowList = async () => {
diff --git a/app/components/organisms/ProjectList.tsx b/app/components/organisms/ProjectList.tsx
@@ -4,7 +4,7 @@ import type { HeadingTag } from '@components/atoms/Heading';
 import LinkButton from '@components/atoms/LinkButton';
 import HistoryItemList from '@components/organisms/HistoryItemList';
 import ProjectItem from '@components/organisms/ProjectItem';
-import { loadProjects } from '@lib/contentful';
+import { loadProjects } from '@dal/projects';
 import type { LocaleCode } from '@lib/router';
 
 type Props = {
diff --git a/app/dal/availability.ts b/app/dal/availability.ts
@@ -0,0 +1,30 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadNow as loadContentfulAvailability } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type AvailabilityData } from '@models/availability';
+
+const cacheKey = "availability";
+
+export const loadAvailability = async () => {
+  let availability = getCacheData<AvailabilityData>(cacheKey, "en");
+
+  if (!availability.length) {
+    await initAvailability("en");
+    availability = getCacheData<AvailabilityData>(cacheKey, "en");
+  }
+
+  return availability[0] || null;
+};
+
+export const initAvailability = async (locale: LocaleCode) => {
+  let availability = getCacheData(cacheKey, locale).length;
+  if (!availability) {
+    const data = await loadContentfulAvailability(locale);
+
+    setCacheData(cacheKey, locale, [data]);
+
+    availability = getCacheData(cacheKey, locale).length;
+  }
+
+  return availability;
+};
diff --git a/app/dal/career.ts b/app/dal/career.ts
@@ -0,0 +1,32 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadCareer as loadContentfulCareer } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { HistoryType } from '@models/history';
+import { type CareerData } from '@models/career';
+
+const cacheKey = "career";
+
+export const loadCareer = async (locale: LocaleCode, type?: HistoryType) => {
+  let career = getCacheData<CareerData>(cacheKey, locale);
+
+  if (!career.length) {
+    await initCareer(locale);
+
+    career = getCacheData<CareerData>(cacheKey, locale);
+  }
+
+  return career.filter((item) => type ? type === item.type : 'education' !== item.type);
+};
+
+export const initCareer = async (locale: LocaleCode) => {
+  let career = getCacheData(cacheKey, locale).length;
+  if (!career) {
+    const data = await loadContentfulCareer(locale);
+
+    setCacheData(cacheKey, locale, data || []);
+
+    career = getCacheData(cacheKey, locale).length;
+  }
+
+  return career;
+};
diff --git a/app/dal/certifications.ts b/app/dal/certifications.ts
@@ -0,0 +1,30 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadCertifications as loadContentfulCertifications } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type CertificationData } from '@models/certification';
+
+const cacheKey = "certifications";
+
+export const loadCertifications = async (locale: LocaleCode) => {
+  let certifications = getCacheData<CertificationData>(cacheKey, locale);
+
+  if (!certifications.length) {
+    await initCertifications(locale);
+    certifications = getCacheData<CertificationData>(cacheKey, locale);
+  }
+
+  return certifications;
+};
+
+export const initCertifications = async (locale: LocaleCode) => {
+  let certifications = getCacheData(cacheKey, locale).length;
+  if (!certifications) {
+    const data = await loadContentfulCertifications(locale);
+
+    setCacheData(cacheKey, locale, data || []);
+
+    certifications = getCacheData(cacheKey, locale).length;
+  }
+
+  return certifications;
+};
diff --git a/app/dal/figures.ts b/app/dal/figures.ts
@@ -0,0 +1,30 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadFigures as loadContentfulFigures } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type FiguresData } from '@models/figures';
+
+const cacheKey = "figures";
+
+export const loadFigures = async (year: number) => {
+  let figures = getCacheData<FiguresData>(cacheKey, "en");
+
+  if (!figures.length) {
+    await initFigures("en");
+    figures = getCacheData<FiguresData>(cacheKey, "en");
+  }
+
+  return figures.find((f) => +f.year === year) || {} as FiguresData;
+};
+
+export const initFigures = async (locale: LocaleCode) => {
+  let figures = getCacheData(cacheKey, locale).length;
+  if (!figures) {
+    const data = await loadContentfulFigures();
+
+    setCacheData(cacheKey, locale, data || []);
+
+    figures = getCacheData(cacheKey, locale).length;
+  }
+
+  return figures;
+};
diff --git a/app/dal/now.ts b/app/dal/now.ts
@@ -0,0 +1,30 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadNow as loadContentfulNow } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type NowActivityData } from '@models/now';
+
+const cacheKey = "now";
+
+export const loadNow = async (locale: LocaleCode) => {
+  let now = getCacheData<NowActivityData>(cacheKey, locale);
+
+  if (!now.length) {
+    await initNow(locale);
+    now = getCacheData<NowActivityData>(cacheKey, locale);
+  }
+
+  return now[0] || null;
+};
+
+export const initNow = async (locale: LocaleCode) => {
+  let now = getCacheData(cacheKey, locale).length;
+  if (!now) {
+    const data = await loadContentfulNow(locale);
+
+    setCacheData(cacheKey, locale, [data]);
+
+    now = getCacheData(cacheKey, locale).length;
+  }
+
+  return now;
+};
diff --git a/app/dal/participations.ts b/app/dal/participations.ts
@@ -0,0 +1,30 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadParticipations as loadContentfulParticipations } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type ParticipationData } from '@models/participation';
+
+const cacheKey = "participations";
+
+export const loadParticipationsByContest = async (contest: string, locale: LocaleCode) => {
+  let participations = getCacheData<ParticipationData>(cacheKey, locale);
+
+  if (!participations.length) {
+    await initParticipations(locale);
+    participations = getCacheData<ParticipationData>(cacheKey, locale);
+  }
+
+  return participations;
+};
+
+export const initParticipations = async (locale: LocaleCode) => {
+  let participations = getCacheData(cacheKey, locale).length;
+  if (!participations) {
+    const data = await loadContentfulParticipations(locale);
+
+    setCacheData(cacheKey, locale, data || []);
+
+    participations = getCacheData(cacheKey, locale).length;
+  }
+
+  return participations;
+};
diff --git a/app/dal/projects.ts b/app/dal/projects.ts
@@ -0,0 +1,37 @@
+import { getCacheData, setCacheData } from '@lib/cache';
+import { loadProjects as loadContentfulProjects } from '@lib/contentful';
+import { LocaleCode } from '@lib/router';
+import { type ProjectData } from '@models/project';
+
+const cacheKey = "projects";
+
+export const loadProjects = async (locale: LocaleCode, highlights = false) => {
+  let projects = getCacheData<ProjectData>(cacheKey, locale);
+
+  if (!projects.length) {
+    await initProjects(locale);
+
+    projects = getCacheData<ProjectData>(cacheKey, locale);
+  }
+
+  return projects.filter((p) => !highlights || p.highlight);
+};
+
+export const loadProjectBySlug = async (slug: string, locale: LocaleCode) => {
+  return loadProjects(locale).then((projects) => (
+    projects.find((p) => p.slug === slug) || null
+  ));
+};
+
+export const initProjects = async (locale: LocaleCode) => {
+  let projects = getCacheData(cacheKey, locale).length;
+  if (!projects) {
+    const data = await loadContentfulProjects(locale);
+
+    setCacheData(cacheKey, locale, data || []);
+
+    projects = getCacheData(cacheKey, locale).length;
+  }
+
+  return projects;
+};
diff --git a/app/lib/cache.ts b/app/lib/cache.ts
@@ -0,0 +1,42 @@
+import { LocaleCode } from "@lib/router";
+
+type CacheType<T> = T[];
+
+type CacheData = {
+  [key: string]: CacheType<unknown>;
+};
+
+declare global {
+  var cache: CacheData;
+}
+
+if (!global.cache) {
+  global.cache = {};
+}
+
+const cache: CacheData = global.cache;
+
+export const getCacheData = <T>(key: string, locale: LocaleCode) => {
+  const items = cache[`${key}::${locale}`] as CacheType<T> | undefined;
+
+  return items || [];
+};
+
+export const setCacheData = <T>(key: string, locale: LocaleCode, items: CacheType<T>) => {
+  const cacheKey = getCacheKey(key, locale);
+
+  if (items.length) {
+    console.log(`set cache ${cacheKey} (${items.length})`);
+
+    cache[cacheKey] = items;
+  }
+};
+
+export const resetCache = () => {
+  for (const key in cache) {
+    console.log(`reset cache key ${key}`);
+    cache[key] = [];
+  }
+};
+
+const getCacheKey = (key: string, locale: LocaleCode) => `${key}::${locale}`;
diff --git a/app/lib/contentful.ts b/app/lib/contentful.ts
diff --git a/app/lib/projects.ts b/app/lib/projects.ts
diff --git a/app/models/now.ts b/app/models/now.ts
diff --git a/app/revalidate/route.ts b/app/revalidate/route.ts
diff --git a/app/sitemap.ts b/app/sitemap.ts
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json
