Improved News feed in the app and website (#66)

ferranpons · web-flow · commit a770bcb7c6d7 · 2026-02-11T15:20:39.000+01:00
* Improved News feed in the app

* added images to news feed
diff --git a/homepage/content/en/blog/how-to-run-llms-on-android.md b/homepage/content/en/blog/how-to-run-llms-on-android.md
@@ -2,6 +2,7 @@
 title: "How to Run LLMs Offline on Android Using Kotlin"
 date: 2026-02-11T00:00:00-05:00
 description: "This article shows how to run LLMs offline on Android using Kotlin, with no servers, no API keys, and full user privacy-using Llamatik, a Kotlin-first wrapper around llama.cpp."
+image: "images/blog/how-to-llms-on-android-hero.png"
 tags: ["Kotlin", "Multiplatform", "LLM", "llama.cpp", "Offline AI", "Android"]
 showDate: true
 draft: false
diff --git a/homepage/content/en/blog/llamatik-app-android-published.md b/homepage/content/en/blog/llamatik-app-android-published.md
@@ -2,6 +2,7 @@
 title: "Introducing the Llamatik App an Offline AI Chat on Your Mobile Device"
 date: 2025-11-25T09:00:00-05:00
 description: "We are excited to announce the launch of the Llamatik App, a fully offline AI chatbot designed to showcase the power and versatility of the Llamatik Kotlin Multiplatform library. Whether you are a developer curious about on-device AI or a user who wants a private, fast, and modern chatbot experience, the Llamatik app brings the full potential of lightweight LLMs directly to your mobile device."
+image: "images/blog/llamatik_new_app_hero.png"
 tags: ["Kotlin", "Multiplatform", "LLM", "llama.cpp", "Offline AI", "App"]
 showDate: true
 draft: false
diff --git a/homepage/content/en/blog/llamatik-introduction.md b/homepage/content/en/blog/llamatik-introduction.md
@@ -2,6 +2,7 @@
 title: "Introducing Llamatik Offline LLMs for Kotlin Multiplatform"
 date: 2025-07-22T09:00:00-05:00
 description: "Meet Llamatik — a multiplatform Kotlin library to run llama.cpp locally on Android, iOS, and desktop, complete with an HTTP server."
+image: "images/blog/a-pair-of-llamas-in-a-field-with-clouds-and-mountain.svg"
 tags: ["Kotlin", "Multiplatform", "LLM", "llama.cpp", "Offline AI"]
 showDate: true
 draft: false
diff --git a/homepage/layouts/blog/rss.xml b/homepage/layouts/blog/rss.xml
@@ -20,7 +20,7 @@
             <link>{{ .Permalink }}</link>
             <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</pubDate>
             <guid>{{ .Permalink }}</guid>
-
+            <image>{{ .Params.image }}</image>
             {{- $desc := .Params.description | default .Summary -}}
             <description>{{ $desc | plainify }}</description>
 
diff --git a/homepage/layouts/blog/summary.html b/homepage/layouts/blog/summary.html
@@ -1,5 +1,11 @@
 <article class="blog-card">
     <a class="blog-card__link" href="{{ .RelPermalink }}">
+        {{- with .Params.image }}
+        <figure class="blog-card__image">
+            <img src="{{ . | absURL }}" alt="{{ $.Title }}" loading="lazy" />
+        </figure>
+        {{- end }}
+
         <h2 class="blog-card__title">{{ .Title }}</h2>
 
         <div class="blog-card__meta">
diff --git a/homepage/static/images/blog/a-pair-of-llamas-in-a-field-with-clouds-and-mountain.svg b/homepage/static/images/blog/a-pair-of-llamas-in-a-field-with-clouds-and-mountain.svg
diff --git a/homepage/static/images/blog/how-to-llms-on-android-hero.png b/homepage/static/images/blog/how-to-llms-on-android-hero.png
diff --git a/homepage/static/images/blog/llamatik_new_app_hero.png b/homepage/static/images/blog/llamatik_new_app_hero.png
diff --git a/homepage/themes/hugo-serif-theme/assets/scss/components/_blog.scss b/homepage/themes/hugo-serif-theme/assets/scss/components/_blog.scss
@@ -84,3 +84,18 @@
     transition: transform 0.15s ease;
   }
 }
+
+.blog-card__image {
+    width: 100%;
+    aspect-ratio: 16 / 9; /* keeps consistent ratio */
+    overflow: hidden;
+    border-radius: 12px; /* optional, match card style */
+    margin-bottom: 1rem;
+}
+
+.blog-card__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* fills & crops */
+    display: block;
+}
diff --git a/shared/src/commonMain/kotlin/com/llamatik/app/feature/news/NewsFeedDetailScreen.kt b/shared/src/commonMain/kotlin/com/llamatik/app/feature/news/NewsFeedDetailScreen.kt
@@ -33,6 +33,7 @@ import com.llamatik.app.feature.news.viewmodel.FeedItemDetailScreenState
 import com.llamatik.app.feature.news.viewmodel.FeedItemDetailViewModel
 import com.llamatik.app.localization.Localization
 import com.llamatik.app.localization.getCurrentLocalization
+import com.llamatik.app.platform.formatRssPubDateToLocalDate
 import com.llamatik.app.resources.Res
 import com.llamatik.app.resources.llamatik_icon_logo
 import com.llamatik.app.ui.components.toRichHtmlString
@@ -94,8 +95,9 @@ class NewsFeedDetailScreen(private val link: String) : Screen {
                 }
             ) { paddingValues ->
                 Column(
-                    modifier = Modifier.padding(paddingValues = paddingValues)
-                        .padding(bottom = 80.dp).verticalScroll(scrollState)
+                    modifier = Modifier
+                        .padding(paddingValues = paddingValues)
+                        .verticalScroll(scrollState)
                 ) {
                     val imageHeight = 120.dp
                     Image(
@@ -124,15 +126,17 @@ class NewsFeedDetailScreen(private val link: String) : Screen {
                             start = 16.dp,
                             end = 16.dp
                         ),
-                        text = state.feedItem.pubDate,
+                        text = state.feedItem.pubDate.formatRssPubDateToLocalDate(),
                         style = Typography.get().bodySmall,
                     )
-                    Text(
-                        modifier = Modifier.fillMaxWidth()
-                            .padding(top = 16.dp, start = 16.dp, end = 16.dp),
-                        text = state.feedItem.description.toRichHtmlString(),
-                        style = Typography.get().bodyMedium
-                    )
+                    state.feedItem.contentEncoded?.let {
+                        Text(
+                            modifier = Modifier.fillMaxWidth()
+                                .padding(16.dp),
+                            text = it.toRichHtmlString(),
+                            style = Typography.get().bodyMedium
+                        )
+                    }
                 }
             }
         }
diff --git a/shared/src/commonMain/kotlin/com/llamatik/app/feature/news/viewmodel/FeedItemDetailViewModel.kt b/shared/src/commonMain/kotlin/com/llamatik/app/feature/news/viewmodel/FeedItemDetailViewModel.kt
@@ -44,7 +44,8 @@ data class FeedItemDetailScreenState(
         title = "",
         link = "",
         description = "",
-        pubDate = ""
+        pubDate = "",
+        contentEncoded = ""
     )
 )
 
diff --git a/shared/src/commonMain/kotlin/com/llamatik/app/platform/Extensions.kt b/shared/src/commonMain/kotlin/com/llamatik/app/platform/Extensions.kt
@@ -12,6 +12,10 @@ import androidx.compose.ui.composed
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import kotlinx.datetime.Instant
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.toLocalDateTime
+import kotlin.time.ExperimentalTime
 
 private const val EMAIL_FORMAT_REGEX = "^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\$"
 
@@ -85,3 +89,114 @@ data class ShimmerAnimationData(
         }
     }
 }
+
+@OptIn(ExperimentalTime::class)
+fun String.formatRssPubDateToLocalDate(): String {
+    if (this.isBlank()) return ""
+
+    // Example: "Wed, 11 Feb 2026 00:00:00 -0500"
+    // Tokens: [Wed, 11, Feb, 2026, 00:00:00, -0500]
+    val tokens = this.replace(",", "").trim().split(Regex("\\s+"))
+    if (tokens.size < 6) return this
+
+    val day = tokens[1].toIntOrNull() ?: return this
+    val monthStr = tokens[2]
+    val year = tokens[3].toIntOrNull() ?: return this
+
+    val timeParts = tokens[4].split(":")
+    val hour = timeParts.getOrNull(0)?.toIntOrNull() ?: 0
+    val minute = timeParts.getOrNull(1)?.toIntOrNull() ?: 0
+    val second = timeParts.getOrNull(2)?.toIntOrNull() ?: 0
+
+    val offset = parseOffsetToMinutes(tokens[5]) ?: return this
+
+    // Build an Instant from the provided offset datetime.
+    // Convert "local in offset" -> UTC instant:
+    // epochSeconds = UTC(year-month-day hour:min:sec) - offsetSeconds
+    val epochSecondsUtc = epochSecondsAtUtc(year, monthToNumber(monthStr) ?: return this, day, hour, minute, second) -
+            (offset * 60L)
+
+    val instant = Instant.fromEpochSeconds(epochSecondsUtc)
+
+    // Convert to device timezone and format date only
+    val localDate = instant.toLocalDateTime(TimeZone.currentSystemDefault()).date
+
+    // "localized" month names without java.text is tricky in common code.
+    // Use numeric format which is universally readable: dd/MM/yyyy or yyyy-MM-dd
+    // If you prefer, we can provide localized month names via your Localization layer.
+    val dd = localDate.dayOfMonth.toString().padStart(2, '0')
+    val mm = localDate.monthNumber.toString().padStart(2, '0')
+    val yyyy = localDate.year.toString()
+
+    // Example output: 11/02/2026
+    return "$dd/$mm/$yyyy"
+}
+
+private fun monthToNumber(mon: String): Int? = when (mon.lowercase()) {
+    "jan" -> 1
+    "feb" -> 2
+    "mar" -> 3
+    "apr" -> 4
+    "may" -> 5
+    "jun" -> 6
+    "jul" -> 7
+    "aug" -> 8
+    "sep" -> 9
+    "oct" -> 10
+    "nov" -> 11
+    "dec" -> 12
+    else -> null
+}
+
+private fun parseOffsetToMinutes(offset: String): Int? {
+    // -0500, +0130
+    if (offset.length != 5) return null
+    val sign = when (offset[0]) {
+        '+' -> 1
+        '-' -> -1
+        else -> return null
+    }
+    val hh = offset.substring(1, 3).toIntOrNull() ?: return null
+    val mm = offset.substring(3, 5).toIntOrNull() ?: return null
+    return sign * (hh * 60 + mm)
+}
+
+/**
+ * Compute epoch seconds for a UTC date-time without java.time.
+ * Uses a civil-date to days-since-epoch algorithm (Gregorian calendar).
+ */
+private fun epochSecondsAtUtc(
+    year: Int,
+    month: Int,
+    day: Int,
+    hour: Int,
+    minute: Int,
+    second: Int
+): Long {
+    val days = daysSinceUnixEpoch(year, month, day)
+    return days * 86_400L + hour * 3_600L + minute * 60L + second
+}
+
+/**
+ * Days since 1970-01-01 (Unix epoch), Gregorian proleptic calendar.
+ * Based on Howard Hinnant's civil_from_days / days_from_civil.
+ */
+private fun daysSinceUnixEpoch(year: Int, month: Int, day: Int): Long {
+    var y = year
+    var m = month
+    val d = day
+
+    y -= if (m <= 2) 1 else 0
+    val era = floorDiv(y, 400)
+    val yoe = y - era * 400
+    m += if (m > 2) -3 else 9
+    val doy = (153 * m + 2) / 5 + d - 1
+    val doe = yoe * 365 + yoe / 4 - yoe / 100 + doy
+    return (era * 146097L + doe - 719468L)
+}
+
+private fun floorDiv(a: Int, b: Int): Int {
+    var r = a / b
+    if ((a xor b) < 0 && a % b != 0) r -= 1
+    return r
+}
diff --git a/shared/src/commonMain/kotlin/com/llamatik/app/ui/components/NewsCardSmall.kt b/shared/src/commonMain/kotlin/com/llamatik/app/ui/components/NewsCardSmall.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.llamatik.app.feature.news.repositories.FeedItem
+import com.llamatik.app.platform.formatRssPubDateToLocalDate
 import com.llamatik.app.resources.Res
 import com.llamatik.app.resources.llamatik_icon_logo
 import com.llamatik.app.ui.theme.Typography
@@ -112,7 +113,7 @@ fun NewsCardSmall(
             )
             Text(
                 modifier = Modifier.padding(top = 4.dp),
-                text = feedItem.pubDate,
+                text = feedItem.pubDate.formatRssPubDateToLocalDate(),
                 style = Typography.get().labelSmall,
             )
             Text(
diff --git a/shared/src/commonMain/kotlin/com/llamatik/app/ui/components/NewsFeedCard.kt b/shared/src/commonMain/kotlin/com/llamatik/app/ui/components/NewsFeedCard.kt
@@ -24,6 +24,7 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.llamatik.app.feature.news.repositories.FeedItem
+import com.llamatik.app.platform.formatRssPubDateToLocalDate
 import com.llamatik.app.resources.Res
 import com.llamatik.app.resources.llamatik_icon_logo
 import com.llamatik.app.ui.theme.Typography
@@ -109,7 +110,7 @@ fun NewsFeedCard(
             )
             Text(
                 modifier = Modifier.padding(top = 4.dp),
-                text = feedItem.pubDate,
+                text = feedItem.pubDate.formatRssPubDateToLocalDate(),
                 style = Typography.get().bodySmall,
             )
             Text(
