/ src / utils / seo / charts-page.ts
charts-page.ts
 1  import type { TopChartsPage, Lockup } from '@jet-app/app-store/api/models';
 2  import type { SeoData } from '@amp/web-app-components/src/components/MetaTags/types';
 3  import type I18N from '@amp/web-apps-localization';
 4  import { getPlatformFromPage } from '~/utils/seo/common';
 5  import {
 6      commaSeparatedList,
 7      truncateAroundLimit,
 8  } from '~/utils/string-formatting';
 9  
10  export function seoDataForChartsPage(
11      page: TopChartsPage,
12      i18n: I18N,
13      language: string,
14  ): SeoData {
15      // Genre 36 and 6014 are the "All Apps" and "All Games" genres, which we do not want to
16      // include in the page title, since it would then read as "Best All Games Apps - App Store".
17      const category = page.categoriesButtonTitle;
18      const isAllAppsOrGames = ['36', '6014'].includes(page.genreId);
19      const titleLocKey =
20          isAllAppsOrGames || !category
21              ? 'ASE.Web.AppStore.Meta.ChartsHub.Title'
22              : 'ASE.Web.AppStore.Meta.Charts.Title';
23      const platform = getPlatformFromPage(page);
24  
25      const title = i18n.t(titleLocKey, {
26          category,
27          platform,
28      });
29  
30      let description;
31      const items = page.segments[0].shelves[0].items as Array<Lockup>;
32  
33      if (items) {
34          const appTitles = items.map(({ title }) => title).slice(0, 3);
35          const locKey =
36              category && !isAllAppsOrGames
37                  ? 'ASE.Web.AppStore.Meta.Charts.Description'
38                  : 'ASE.Web.AppStore.Meta.Charts.DescriptionWithoutCategory';
39  
40          description = truncateAroundLimit(
41              i18n.t(locKey, {
42                  category,
43                  platform,
44                  listOfApps: commaSeparatedList(appTitles, language),
45              }),
46              160,
47          );
48      }
49  
50      return {
51          pageTitle: title,
52          socialTitle: title,
53          appleTitle: title,
54          description,
55          socialDescription: description,
56          appleDescription: description,
57      };
58  }