Skip to content

show more news #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChristianBeilschmidt merged 5 commits into from
Dec 19, 2025
+85 −66
Merged

show more news #28

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9fdff03
show more news
michaelmattig Dec 17, 2025
ea90e0c
remove news from nav
michaelmattig Dec 18, 2025
9b90591
change view all news button
michaelmattig Dec 18, 2025
7418922
reuse news component
michaelmattig Dec 18, 2025
91dd03f
fix limit
michaelmattig Dec 18, 2025
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
106 changes: 41 additions & 65 deletions src/components/News.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
---
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';

interface Props {
limit: number;
}

const {limit} = Astro.props;

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 All @@ -25,7 +32,7 @@ const paths = pages
}
return {params: {lang: asLocale(lang), slug: slug.join('/')}, props: page};
})
.slice(0, 3); // Limit to 3 posts
.slice(0, limit === undefined ? 3 : limit === null ? pages.length : limit); // Limit posts based on prop

const newsItems: Array<{
title: string;
Expand All @@ -48,43 +55,32 @@ const newsItems: Array<{
});
---

<!-- Card Blog -->
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<!-- Title -->
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">{t('news.title')}</h2>
<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">
<!-- Card -->
{
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>
<!-- Card Blog --><!-- Grid -->
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card -->
{
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>
</a>
))
}
<!-- End Card -->
</div>
</a>
))
}
<!-- End Card -->

<!-- Card -->
<!-- <a
<!-- Card -->
<!-- <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="#"
>
Expand Down Expand Up @@ -114,10 +110,10 @@ const newsItems: Array<{
</div>
</div>
</a> -->
<!-- End Card -->
<!-- End Card -->

<!-- Card -->
<!-- <a
<!-- Card -->
<!-- <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="#"
>
Expand Down Expand Up @@ -145,31 +141,11 @@ const newsItems: Array<{
</div>
</div>
</a> -->
<!-- End Card -->
</div>
<!-- End Grid -->

<!-- Card -->
<!-- <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="#"
>
Read more
<svg
class="size-4 shrink-0"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
>
</a>
</div> -->
<!-- End Card -->
</div>
<!-- End Grid -->

<!-- View All Posts Link -->

<!-- End View All Posts Link -->
<!-- End Card Blog -->
8 changes: 8 additions & 0 deletions src/i18n/translations.ts
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
import Page from '../neuigkeiten.astro';
---

<Page />
19 changes: 18 additions & 1 deletion src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,24 @@ const p = useLocalePages(Astro.currentLocale);
</a>
</p>
</Section>
<News />
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<!-- Title -->
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">{t('news.title')}</h2>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
{t('news.subtitle')}
</p>
</div>
<News limit={3} />
<div class="mt-12 text-center">
<a
href={p('news')}
class="text-main-green hover:text-second-torquise i inline-flex items-center gap-x-2 rounded-lg border border-transparent bg-gray-200 p-4 px-4 py-3 text-sm font-medium focus:bg-white focus:outline-hidden disabled:pointer-events-none disabled:opacity-50"
>
{t('news.viewAll')}
</a>
</div>
</div>
<Logos />
<Section bg="lightblue">
<p class="mx-auto -mt-16 pb-8 text-2xl font-medium text-white text-shadow-lg">
Expand Down
13 changes: 13 additions & 0 deletions src/pages/neuigkeiten.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
import {useTranslations} from '../i18n/utils';
import Layout from '../layouts/Layout.astro';
import News from '../components/News.astro';

const t = useTranslations(Astro.currentLocale);
---

<Layout title={t('news.allPosts')} description={t('news.subtitle')}>
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<News limit={999} />
</div>
</Layout>