From 7c6a9212be495daa1be927c374c2333879abbc35 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 18 Oct 2024 09:09:04 +0200 Subject: [PATCH 1/2] chore(telemetry): measure homepage link clicks - Featured articles - Latest news - Recent contributions --- .../src/homepage/featured-articles/index.tsx | 17 +++++-- client/src/homepage/latest-news/index.tsx | 48 ++++++++++++------- .../homepage/recent-contributions/index.tsx | 39 ++++++++++----- client/src/telemetry/constants.ts | 9 ++++ 4 files changed, 79 insertions(+), 34 deletions(-) diff --git a/client/src/homepage/featured-articles/index.tsx b/client/src/homepage/featured-articles/index.tsx index 2db97f9216bf..0658b372fa95 100644 --- a/client/src/homepage/featured-articles/index.tsx +++ b/client/src/homepage/featured-articles/index.tsx @@ -1,6 +1,8 @@ import useSWR from "swr"; + import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; +import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants"; import "./index.scss"; @@ -27,16 +29,25 @@ export default function FeaturedArticles(props: HydrationData) {

Featured articles

- {hyData.featuredArticles.map((article) => { + {hyData.featuredArticles.map((article, index) => { return (
{article.tag && ( - + {article.tag.title} )}

- {article.title} + + {article.title} +

{article.summary}

diff --git a/client/src/homepage/latest-news/index.tsx b/client/src/homepage/latest-news/index.tsx index 5e71e7a68dea..3f567bb4cb60 100644 --- a/client/src/homepage/latest-news/index.tsx +++ b/client/src/homepage/latest-news/index.tsx @@ -1,9 +1,11 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; + import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; import { NewsItem } from "../../../../libs/types/document"; +import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants"; import "./index.scss"; @@ -35,13 +37,15 @@ export function LatestNews(props: HydrationData) { return null; } - function NewsItemTitle({ newsItem }: { newsItem: NewsItem }) { + function NewsItemTitle({ newsItem, ...attributes }: { newsItem: NewsItem }) { const ageInDays = dayjs().diff(newsItem.published_at, "day"); const isNew = ageInDays < 7; return ( <> - {newsItem.title} + + {newsItem.title} + {isNew && ( <> {" "} @@ -52,11 +56,11 @@ export function LatestNews(props: HydrationData) { ); } - function NewsItemSource({ newsItem }: { newsItem: NewsItem }) { + function NewsItemSource({ newsItem, ...attributes }: { newsItem: NewsItem }) { const { source } = newsItem; return ( - + {source.name} ); @@ -72,21 +76,29 @@ export function LatestNews(props: HydrationData) {

Latest news

    - {newsItems.map((newsItem) => ( -
  • -

    - - - - - + {newsItems.map((newsItem, index) => { + return ( +

  • +

    + + + + + + +

    + + -

    - - - -
    • - ))} + + ); + })}
); diff --git a/client/src/homepage/recent-contributions/index.tsx b/client/src/homepage/recent-contributions/index.tsx index af398519aeb9..181a53b6a9a4 100644 --- a/client/src/homepage/recent-contributions/index.tsx +++ b/client/src/homepage/recent-contributions/index.tsx @@ -1,8 +1,10 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; + import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; +import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants"; import "./index.scss"; @@ -33,21 +35,32 @@ function RecentContributions(props: HydrationData) {

Recent contributions

diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts index 89c8ee0ce0b9..eaaa57cb9e56 100644 --- a/client/src/telemetry/constants.ts +++ b/client/src/telemetry/constants.ts @@ -86,3 +86,12 @@ export const LANGUAGE_REMEMBER = "language_remember"; export const THEME_SWITCHER = "theme_switcher"; export const SURVEY = "survey"; export const HOMEPAGE_HERO = "homepage_hero"; +export const HOMEPAGE = "homepage"; +export const HOMEPAGE_ITEMS = Object.freeze({ + ARTICLE: "article", + ARTICLE_TAG: "article_tag", + NEWS: "news", + NEWS_SOURCE: "news_source", + CONTRIBUTION: "contribution", + CONTRIBUTION_REPO: "contribution_repo", +}); From 3e779f09fdf56ecad8bae49234bae7227137e061 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 18 Oct 2024 15:31:45 +0200 Subject: [PATCH 2/2] fixup! chore(telemetry): measure homepage link clicks --- client/src/homepage/latest-news/index.tsx | 42 +++++++++---------- .../homepage/recent-contributions/index.tsx | 42 +++++++++---------- 2 files changed, 40 insertions(+), 44 deletions(-) diff --git a/client/src/homepage/latest-news/index.tsx b/client/src/homepage/latest-news/index.tsx index 3f567bb4cb60..70fe82a9ad6b 100644 --- a/client/src/homepage/latest-news/index.tsx +++ b/client/src/homepage/latest-news/index.tsx @@ -76,29 +76,27 @@ export function LatestNews(props: HydrationData) {

Latest news

    - {newsItems.map((newsItem, index) => { - return ( -
  • -

    - - - - - - -

    - - + {newsItems.map((newsItem, index) => ( +
  • +

    + + -

    • - ); - })} + + + +

    + + + + + ))}
); diff --git a/client/src/homepage/recent-contributions/index.tsx b/client/src/homepage/recent-contributions/index.tsx index 181a53b6a9a4..5b9879e934a7 100644 --- a/client/src/homepage/recent-contributions/index.tsx +++ b/client/src/homepage/recent-contributions/index.tsx @@ -35,32 +35,30 @@ function RecentContributions(props: HydrationData) {

Recent contributions

    {hyData.recentContributions.items.map( - ({ number, url, title, updated_at, repo }, index) => { - return ( -
  • -

    + ({ number, url, title, updated_at, repo }, index) => ( +

  • +

    + + {title} + + - {title} + {repo.name} - - - {repo.name} - - -

    - - {dayjs(updated_at).fromNow()} -
    • - ); - } +

    + + {dayjs(updated_at).fromNow()} + + + ) )}