Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/components/NavBar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,14 @@ const p = useLocalePages(Astro.currentLocale);
{t('data.title')}
</a>

<a
class="flex items-center p-2 text-sm text-white/80 hover:text-white focus:text-white focus:outline-hidden"
href={p('news')}
>
<Icon name="mdi:newspaper-variant-outline" class="me-3 block size-4 shrink-0 md:me-2 md:hidden" />
{t('news.nav')}
</a>

<a
class="flex items-center p-2 text-sm text-white/80 hover:text-white focus:text-white focus:outline-hidden"
href={p('references')}
Expand Down
15 changes: 8 additions & 7 deletions src/components/News.astro
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
---
import {getCollection} from 'astro:content';
import {asLocale, slugToPostLink, useTranslations} from '../i18n/utils';
import {asLocale, slugToPostLink, useTranslations, useLocalePages} from '../i18n/utils';
import {Image} from 'astro:assets';
import {mdExcerpt, pictureWidths} from './utils';

const pageLang = Astro.currentLocale;
const t = useTranslations(pageLang);
const p = useLocalePages(pageLang);

const pages = await getCollection('posts', (entry) => {
const [lang, ...slug] = entry.slug.split('/');
Expand Down Expand Up @@ -149,13 +150,13 @@ const newsItems: Array<{
</div>
<!-- End Grid -->

<!-- Card -->
<!-- <div class="mt-12 text-center">
<!-- View All Posts Link -->
<div class="mt-12 text-center">
<a
class="text-main-green dark:text-main-green inline-flex items-center gap-x-1 rounded-full border border-gray-200 bg-white px-4 py-3 text-sm font-medium shadow-2xs hover:bg-gray-50 focus:bg-gray-50 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
href="#"
href={p('news')}
>
Read more
{t('news.viewAll')}
<svg
class="size-4 shrink-0"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -169,7 +170,7 @@ const newsItems: Array<{
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
>
</a>
</div> -->
<!-- End Card -->
</div>
<!-- End View All Posts Link -->
</div>
<!-- End Card Blog -->
8 changes: 8 additions & 0 deletions src/i18n/translations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,11 @@ export const translations = {
'references.title': 'Referenzen & Beispiele',
'references.intro':
'Hier finden Sie einige Beispiele für unsere Arbeit. Diese Projekte zeigen, wie wir Geodaten und Zeitreihenverarbeitung in verschiedenen Anwendungsfällen einsetzen.',
'news.nav': 'Neuigkeiten',
'news.title': 'Neueste Beiträge',
'news.subtitle': 'Bleiben Sie auf dem Laufenden mit unseren neuesten Nachrichten und Updates.',
'news.allPosts': 'Alle Beiträge',
'news.viewAll': 'Alle Beiträge anzeigen',
'footer.info': 'Informationen',
'footer.documentation': 'Dokumentation',
'footer.privacyPolicy': 'Datenschutzerklärung',
Expand Down Expand Up @@ -146,8 +149,11 @@ export const translations = {
'references.title': 'References & Examples',
'references.intro':
'Here you will find some examples of our work. These projects show how we use geodata and time series processing in various applications.',
'news.nav': 'News',
'news.title': 'Latest Posts',
'news.subtitle': 'Stay up to date with our latest news and updates.',
'news.allPosts': 'All Posts',
'news.viewAll': 'View all posts',
'footer.info': 'Information',
'footer.documentation': 'Documentation',
'footer.privacyPolicy': 'Privacy Policy',
Expand Down Expand Up @@ -185,6 +191,7 @@ export const pages = {
privacyPolicy: '/datenschutzerklaerung/',
references: '/beispiele-referenzen/',
services: '/services/',
news: '/neuigkeiten/',
404: '/404/',
},
en: {
Expand All @@ -197,6 +204,7 @@ export const pages = {
privacyPolicy: '/en/privacy-policy/',
references: '/en/examples-references/',
services: '/en/services/',
news: '/en/news/',
404: '/en/404/',
},
} as const;
5 changes: 5 additions & 0 deletions src/pages/en/news.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
import Page from '../neuigkeiten.astro';
---

<Page />
96 changes: 96 additions & 0 deletions src/pages/neuigkeiten.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
import {getCollection} from 'astro:content';
import {asLocale, slugToPostLink, useTranslations} from '../i18n/utils';
import {Image} from 'astro:assets';
import {mdExcerpt, pictureWidths} from '../components/utils';
import Section from '../components/Section.astro';
import Layout from '../layouts/Layout.astro';
const t = useTranslations(Astro.currentLocale);
const pageLang = Astro.currentLocale;
const pages = await getCollection('posts', (entry) => {
const [lang, ...slug] = entry.slug.split('/');
if (lang !== pageLang) {
return undefined;
}
return entry;
});
pages.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const paths = pages.map((page) => {
const [lang, ...slug] = page.slug.split('/');
if (slug.length === 0) {
throw new Error(`Empty slug: ${page.slug}`);
}
return {params: {lang: asLocale(lang), slug: slug.join('/')}, props: page};
});
const newsItems: Array<{
title: string;
date: string;
image: ImageMetadata;
abstract: string;
link: string;
}> = paths.map((page) => {
return {
title: page.props.data.title,
date: page.props.data.date.toLocaleDateString(pageLang, {
year: 'numeric',
month: 'long',
day: 'numeric',
}),
image: page.props.data.image,
abstract: mdExcerpt(page.props.body, 200),
link: slugToPostLink(page.params.lang, page.params.slug),
};
});
---

<Layout title={t('news.allPosts')} description={t('news.subtitle')}>
<Section>
<!-- Title -->
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
<h1 class="text-3xl font-bold md:text-4xl md:leading-tight dark:text-white">{t('news.allPosts')}</h1>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
{t('news.subtitle')}
</p>
</div>
<!-- End Title -->

<!-- Grid -->
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Cards -->
{
newsItems.map((news) => (
<a
class="group flex h-full flex-col rounded-xl border border-gray-200 p-5 transition duration-300 hover:border-transparent hover:shadow-lg focus:border-transparent focus:shadow-lg focus:outline-hidden dark:border-neutral-700 dark:hover:border-transparent dark:hover:shadow-black/40 dark:focus:border-transparent dark:focus:shadow-black/40"
href={news.link}
>
<Image
class="aspect-video w-full rounded-xl object-cover"
src={news.image}
alt={news.title}
widths={pictureWidths()}
/>
<div class="my-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-neutral-300 dark:group-hover:text-white">
{news.title}
</h3>
<p class="mt-5 text-gray-600 dark:text-neutral-400">{news.abstract}</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<div>
<h5 class="text-sm text-gray-800 dark:text-neutral-200">{news.date}</h5>
</div>
</div>
</a>
))
}
<!-- End Cards -->
</div>
<!-- End Grid -->
</Section>
</Layout>