{{ article.title }}
+{{ summarizeNews(article.description) }}
+{{ $t('home.nologin.news.unavailable') }}
+{{ summarizeNews(article.description) }}
+{{ $t('home.nologin.news.empty') }}
+@@ -160,6 +182,9 @@ export default { oauthProviders: [], oauthLoading: false, isStoryCollapsed: true, + news: [], + newsLoading: true, + newsError: false, }; }, components: { @@ -190,6 +215,36 @@ export default { this.oauthProviders = []; } }, + getNewsLanguage() { + const language = String(this.$i18n?.locale || 'de').toLowerCase(); + return ['de', 'en', 'es', 'fr'].includes(language) ? language : 'en'; + }, + async loadNews() { + this.newsLoading = true; + this.newsError = false; + try { + const { data } = await apiClient.get('/api/news', { + params: { language: this.getNewsLanguage(), category: 'top', count: 3 } + }); + this.news = Array.isArray(data?.results) ? data.results.filter((article) => article?.title) : []; + } catch (error) { + this.news = []; + this.newsError = true; + } finally { + this.newsLoading = false; + } + }, + formatNewsDate(dateStr) { + const date = new Date(dateStr); + if (Number.isNaN(date.getTime())) return ''; + return date.toLocaleDateString(this.$i18n?.locale || 'de-DE', { + day: 'numeric', month: 'short', year: 'numeric' + }); + }, + summarizeNews(description) { + const text = String(description || '').replace(/\s+/g, ' ').trim(); + return text.length > 210 ? `${text.slice(0, 207).trimEnd()}…` : text; + }, startOAuthLogin(providerSlug) { if (this.oauthLoading) { return; @@ -229,7 +284,7 @@ export default { } }, async created() { - await this.loadOAuthProviders(); + await Promise.all([this.loadOAuthProviders(), this.loadNews()]); }, mounted() { this.$nextTick(() => { @@ -554,6 +609,71 @@ export default { border-radius: 4px; } +.public-news { + width: min(100%, 1120px); + margin: 24px auto 0; + padding: 1.25rem; +} + +.public-news__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.public-news__header .panel-kicker { + margin-bottom: 0.45rem; +} + +.public-news__header h2 { + margin: 0; +} + +.public-news__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.9rem; +} + +.public-news__article { + display: flex; + flex-direction: column; + gap: 0.45rem; + padding: 1rem; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.7); +} + +.public-news__date, +.public-news__status { + color: var(--color-text-secondary); + font-size: 0.85rem; +} + +.public-news__title { + margin: 0; + color: var(--color-text-primary); + font-size: 1rem; + line-height: 1.35; + font-weight: 700; + text-decoration: none; +} + +a.public-news__title:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.public-news__description { + margin: 0; + color: var(--color-text-secondary); + font-size: 0.9rem; + line-height: 1.45; +} + .seo-content h1 { font-size: 28px; margin: 0 0 8px 0; @@ -626,7 +746,8 @@ export default { .story-columns, .access-split, .login-fields, - .oauth-provider-list { + .oauth-provider-list, + .public-news__grid { grid-template-columns: 1fr; } }