Skip to content

Commit 8c0efa7

Browse files
ChristianBeilschmidtChristianBeilschmidt
authored
Merge pull request #28 from geo-engine/more-news
show more news
2 parents 247a926 + 91dd03f commit 8c0efa7

File tree

5 files changed

+85
-66
lines changed

5 files changed

+85
-66
lines changed

‎src/components/News.astro‎

Lines changed: 41 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
---
22
import {getCollection} from 'astro:content';
3-
import {asLocale, slugToPostLink, useTranslations} from '../i18n/utils';
3+
import {asLocale, slugToPostLink, useTranslations, useLocalePages} from '../i18n/utils';
44
import {Image} from 'astro:assets';
55
import {mdExcerpt, pictureWidths} from './utils';
66
7+
interface Props {
8+
limit: number;
9+
}
10+
11+
const {limit} = Astro.props;
12+
713
const pageLang = Astro.currentLocale;
814
const t = useTranslations(pageLang);
15+
const p = useLocalePages(pageLang);
916
1017
const pages = await getCollection('posts', (entry) => {
1118
const [lang, ...slug] = entry.slug.split('/');
@@ -25,7 +32,7 @@ const paths = pages
2532
}
2633
return {params: {lang: asLocale(lang), slug: slug.join('/')}, props: page};
2734
})
28-
.slice(0, 3); // Limit to 3 posts
35+
.slice(0, limit); // Limit posts based on prop
2936
3037
const newsItems: Array<{
3138
title: string;
@@ -48,43 +55,32 @@ const newsItems: Array<{
4855
});
4956
---
5057

51-
<!-- Card Blog -->
52-
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
53-
<!-- Title -->
54-
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
55-
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">{t('news.title')}</h2>
56-
<p class="mt-1 text-gray-600 dark:text-neutral-400">
57-
{t('news.subtitle')}
58-
</p>
59-
</div>
60-
<!-- End Title -->
61-
62-
<!-- Grid -->
63-
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
64-
<!-- Card -->
65-
{
66-
newsItems.map((news) => (
67-
<a
68-
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"
69-
href={news.link}
70-
>
71-
<Image class="aspect-video w-full rounded-xl object-cover" src={news.image} alt={news.title} widths={pictureWidths()} />
72-
<div class="my-6">
73-
<h3 class="text-xl font-semibold text-gray-800 dark:text-neutral-300 dark:group-hover:text-white">{news.title}</h3>
74-
<p class="mt-5 text-gray-600 dark:text-neutral-400">{news.abstract}</p>
75-
</div>
76-
<div class="mt-auto flex items-center gap-x-3">
77-
<div>
78-
<h5 class="text-sm text-gray-800 dark:text-neutral-200">{news.date}</h5>
79-
</div>
58+
<!-- Card Blog --><!-- Grid -->
59+
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
60+
<!-- Card -->
61+
{
62+
newsItems.map((news) => (
63+
<a
64+
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"
65+
href={news.link}
66+
>
67+
<Image class="aspect-video w-full rounded-xl object-cover" src={news.image} alt={news.title} widths={pictureWidths()} />
68+
<div class="my-6">
69+
<h3 class="text-xl font-semibold text-gray-800 dark:text-neutral-300 dark:group-hover:text-white">{news.title}</h3>
70+
<p class="mt-5 text-gray-600 dark:text-neutral-400">{news.abstract}</p>
71+
</div>
72+
<div class="mt-auto flex items-center gap-x-3">
73+
<div>
74+
<h5 class="text-sm text-gray-800 dark:text-neutral-200">{news.date}</h5>
8075
</div>
81-
</a>
82-
))
83-
}
84-
<!-- End Card -->
76+
</div>
77+
</a>
78+
))
79+
}
80+
<!-- End Card -->
8581

86-
<!-- Card -->
87-
<!-- <a
82+
<!-- Card -->
83+
<!-- <a
8884
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"
8985
href="#"
9086
>
@@ -114,10 +110,10 @@ const newsItems: Array<{
114110
</div>
115111
</div>
116112
</a> -->
117-
<!-- End Card -->
113+
<!-- End Card -->
118114

119-
<!-- Card -->
120-
<!-- <a
115+
<!-- Card -->
116+
<!-- <a
121117
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"
122118
href="#"
123119
>
@@ -145,31 +141,11 @@ const newsItems: Array<{
145141
</div>
146142
</div>
147143
</a> -->
148-
<!-- End Card -->
149-
</div>
150-
<!-- End Grid -->
151-
152-
<!-- Card -->
153-
<!-- <div class="mt-12 text-center">
154-
<a
155-
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"
156-
href="#"
157-
>
158-
Read more
159-
<svg
160-
class="size-4 shrink-0"
161-
xmlns="http://www.w3.org/2000/svg"
162-
width="24"
163-
height="24"
164-
viewBox="0 0 24 24"
165-
fill="none"
166-
stroke="currentColor"
167-
stroke-width="2"
168-
stroke-linecap="round"
169-
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
170-
>
171-
</a>
172-
</div> -->
173144
<!-- End Card -->
174145
</div>
146+
<!-- End Grid -->
147+
148+
<!-- View All Posts Link -->
149+
150+
<!-- End View All Posts Link -->
175151
<!-- End Card Blog -->

‎src/i18n/translations.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,11 @@ export const translations = {
6363
'references.title': 'Referenzen & Beispiele',
6464
'references.intro':
6565
'Hier finden Sie einige Beispiele für unsere Arbeit. Diese Projekte zeigen, wie wir Geodaten und Zeitreihenverarbeitung in verschiedenen Anwendungsfällen einsetzen.',
66+
'news.nav': 'Neuigkeiten',
6667
'news.title': 'Neueste Beiträge',
6768
'news.subtitle': 'Bleiben Sie auf dem Laufenden mit unseren neuesten Nachrichten und Updates.',
69+
'news.allPosts': 'Alle Beiträge',
70+
'news.viewAll': 'Alle Beiträge anzeigen',
6871
'footer.info': 'Informationen',
6972
'footer.documentation': 'Dokumentation',
7073
'footer.privacyPolicy': 'Datenschutzerklärung',
@@ -146,8 +149,11 @@ export const translations = {
146149
'references.title': 'References & Examples',
147150
'references.intro':
148151
'Here you will find some examples of our work. These projects show how we use geodata and time series processing in various applications.',
152+
'news.nav': 'News',
149153
'news.title': 'Latest Posts',
150154
'news.subtitle': 'Stay up to date with our latest news and updates.',
155+
'news.allPosts': 'All Posts',
156+
'news.viewAll': 'View all posts',
151157
'footer.info': 'Information',
152158
'footer.documentation': 'Documentation',
153159
'footer.privacyPolicy': 'Privacy Policy',
@@ -185,6 +191,7 @@ export const pages = {
185191
privacyPolicy: '/datenschutzerklaerung/',
186192
references: '/beispiele-referenzen/',
187193
services: '/services/',
194+
news: '/neuigkeiten/',
188195
404: '/404/',
189196
},
190197
en: {
@@ -197,6 +204,7 @@ export const pages = {
197204
privacyPolicy: '/en/privacy-policy/',
198205
references: '/en/examples-references/',
199206
services: '/en/services/',
207+
news: '/en/news/',
200208
404: '/en/404/',
201209
},
202210
} as const;

‎src/pages/en/news.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
import Page from '../neuigkeiten.astro';
3+
---
4+
5+
<Page />

‎src/pages/index.astro‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,24 @@ const p = useLocalePages(Astro.currentLocale);
121121
</a>
122122
</p>
123123
</Section>
124-
<News />
124+
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
125+
<!-- Title -->
126+
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
127+
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">{t('news.title')}</h2>
128+
<p class="mt-1 text-gray-600 dark:text-neutral-400">
129+
{t('news.subtitle')}
130+
</p>
131+
</div>
132+
<News limit={3} />
133+
<div class="mt-12 text-center">
134+
<a
135+
href={p('news')}
136+
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"
137+
>
138+
{t('news.viewAll')}
139+
</a>
140+
</div>
141+
</div>
125142
<Logos />
126143
<Section bg="lightblue">
127144
<p class="mx-auto -mt-16 pb-8 text-2xl font-medium text-white text-shadow-lg">

‎src/pages/neuigkeiten.astro‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
import {useTranslations} from '../i18n/utils';
3+
import Layout from '../layouts/Layout.astro';
4+
import News from '../components/News.astro';
5+
6+
const t = useTranslations(Astro.currentLocale);
7+
---
8+
9+
<Layout title={t('news.allPosts')} description={t('news.subtitle')}>
10+
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
11+
<News limit={999} />
12+
</div>
13+
</Layout>

0 commit comments

Comments
 (0)