Merge branch 'main' into fix/glean-add-real-data

components/recommendation/RecommendationArticle.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Recommendation } from '../composables/recommendations'
+
+const {
+ item,
+} = defineProps<{
+ item: Recommendation
+}>()
+
+const target = ref<HTMLDivElement>()
+const { isActive } = useIntersectionObserver(target, checkIntersection, { threshold: 0.5 })
+
+function checkIntersection([{ isIntersecting }]: [{ isIntersecting: boolean }]): void {
+ if (isIntersecting && isActive.value) {
+ // fire analytics event here: item.id || item.title || item.url
+ isActive.value = false
+ }
+}
+
+// Shorten a string to less than maxLen characters without truncating words.
+function shorten(str: string, maxLen: number): string {
+ if (str.length <= maxLen)
+ return str
+ return `${str.slice(0, str.lastIndexOf(' ', maxLen))}...`
+}
+
+const clipboard = useClipboard()
+async function copyLink(url: string, event: Event): void {
+ event.preventDefault()
+ if (url)
+ await clipboard.copy(url)
+}
+</script>
+
+<template>
+ <NuxtLink ref="target" :to="item.url" target="_blank" external p-y-16px p-x-8px flex border="b base">
+ <div class="content" w-full pr>
+ <h4 text-sm text-secondary>
+ {{ item.publisher }}
+ </h4>
+ <h3 text-lg line-height-tight font-500 m-y-4px>
+ {{ shorten(item.title, 100) }}
+ </h3>
+ <p>
+ {{ shorten(item.excerpt, 140) }}
+ </p>
+ </div>
+ <div class="media" relative overflow-hidden max-w-120px min-w-120px>
+ <img :src="item.image.sizes?.[0]?.url" rounded-lg overflow-hidden w-full ha>
+ <div m-y-4px flex flex-justify-end>
+ <button p-12px text-xl @click="copyLink(item.url, $event)">
+ <div i-ri:share-line />
+ </button>
+ </div>
+ </div>
+ </NuxtLink>
+</template>
+
+<style scoped>
+a:hover h3 {
+ text-decoration: underline;
+}
+</style>

components/timeline/TimelineDiscover.vue

@@ -6,68 +6,13 @@ const { locale: lang } = useI18n()
 const locale = getLanguageForRecs(lang.value)
 
 const recommendations: Recommendation[] = await $fetch(`/api/${publicServer.value}/recommendations?locale=${locale}`)
-
-// Shorten a string to less than maxLen characters without truncating words.
-function shorten(str: string, maxLen: number): string {
- if (str.length <= maxLen)
- return str
- return `${str.slice(0, str.lastIndexOf(' ', maxLen))}...`
-}
-
-// This is temporary untill we are able to fetch from the new endpoint
-function updateUTM(url: string): string {
- return url.replace('pocket-newtab', 'mozilla')
-}
-
-const clipboard = useClipboard()
-async function copyLink(url, event) {
- event.preventDefault()
- if (url)
- await clipboard.copy(url)
-}
 </script>
 
 <template>
  <h1 text-2xl p-2>
  Today’s Top Picks
  </h1>
  <main>
- <template v-for="item in recommendations" :key="item.tileId">
- <NuxtLink
- :to="updateUTM(item.url)"
- target="_blank"
- external
- p-y-16px
- p-x-8px
- flex
- border="b base"
- >
- <div class="content" w-full pr>
- <h4 text-sm text-secondary>
- {{ item.publisher }}
- </h4>
- <h3 text-lg line-height-tight font-500 m-y-4px>
- {{ shorten(item.title, 100) }}
- </h3>
- <p>
- {{ shorten(item.excerpt, 140) }}
- </p>
- </div>
- <div class="media" relative overflow-hidden max-w-120px min-w-120px>
- <img :src="item.imageUrl" rounded-lg overflow-hidden w-full ha>
- <div m-y-4px flex flex-justify-end>
- <button p-12px text-xl @click="copyLink(updateUTM(item.url), $event)">
- <div i-ri:share-line />
- </button>
- </div>
- </div>
- </NuxtLink>
- </template>
+ <RecommendationArticle v-for="item in recommendations" :key="item.id" :item="item" />
  </main>
 </template>
-
-<style scoped>
- a:hover h3 {
- text-decoration: underline;
- }
-</style>

server/api/[server]/recommendations.ts

@@ -3,7 +3,7 @@ export default defineEventHandler(async (event) => {
  const { locale } = getQuery(event)
 
  const recommendations = await fetch(
- `https://mozilla.social/content-feed/moso/v1/discover?locale=${locale}`,
+ `https://mozilla.social/content-feed/moso/v1/discover?locale=${locale}&image_sizes=268x`,
  )
  .then(response => response.json())
  .then(response => response.data)