aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/WidgetParts/List
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-02-23 18:11:37 +0100
committerGitHub <noreply@github.com>2022-02-23 18:11:37 +0100
commit84903c1e5182124b1bb618b7d8754cb70d0a6647 (patch)
treeb9202449b4eb17d2ecd93ce53fef76b0eee81f15 /src/components/WidgetParts/List
parentc9b16994cd697b15ccb66be6879a119cf7bde7f7 (diff)
feat: improve Ackee tracking (#11)
* build(deps): add use-ackee hook package * chore: create a context provider for Ackee The provider allows users to change the 'detailed' settings. * chore: add a select menu to choose which info to share with Ackee * chore: add a tooltip for askee settings * chore: replace default select styles with custom styles * chore: register user choice in localstorage * chore: replace Matomo with Ackee in legal notice
Diffstat (limited to 'src/components/WidgetParts/List')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-19 14:11:50 +0000
17' href='#n117'>117 118 119 120 121 122 123 124 
/* eslint-disable max-statements */
import { useIntl } from 'react-intl';
import type { BreadcrumbList } from 'schema-dts';
import type { BreadcrumbsItem } from '../../components';
import { CONFIG } from '../config';
import { ROUTES } from '../constants';
import { slugify } from '../helpers';

const isArticle = (url: string) => url.startsWith(`${ROUTES.ARTICLE}/`);

const isHome = (url: string) => url === '/';

const isPageNumber = (url: string) => url.includes('/page/');

const isProject = (url: string) => url.startsWith(`${ROUTES.PROJECTS}/`);

const isSearch = (url: string) => url.startsWith(ROUTES.SEARCH);

const isThematic = (url: string) => url.startsWith(`${ROUTES.THEMATICS}/`);

const isTopic = (url: string) => url.startsWith(`${ROUTES.TOPICS}/`);

const hasBlogAsParent = (url: string) =>
  isArticle(url) ||
  isPageNumber(url) ||
  isSearch(url) ||
  isThematic(url) ||
  isTopic(url);

export type useBreadcrumbProps = {
  /**
   * The current page title.
   */
  title: string;
  /**
   * The current page url.
   */
  url: string;
};

export type useBreadcrumbReturn = {
  /**
   * The breadcrumb items.
   */
  items: BreadcrumbsItem[];
  /**
   * The breadcrumb JSON schema.
   */
  schema: BreadcrumbList['itemListElement'][];
};

/**
 * Retrieve the breadcrumb items.
 *
 * @param {useBreadcrumbProps} props - An object (the current page title & url).
 * @returns {useBreadcrumbReturn} The breadcrumb items and its JSON schema.
 */
export const useBreadcrumb = ({
  title,
  url,
}: useBreadcrumbProps): useBreadcrumbReturn => {
  const intl = useIntl();
  const labels = {
    home: intl.formatMessage({
      defaultMessage: 'Home',
      description: 'Breadcrumb: home label',
      id: 'j5k9Fe',
    }),
    blog: intl.formatMessage({
      defaultMessage: 'Blog',
      description: 'Breadcrumb: blog label',
      id: 'Es52wh',
    }),
    projects: intl.formatMessage({
      defaultMessage: 'Projects',
      description: 'Breadcrumb: projects label',
      id: '28GZdv',
    }),
  };

  const items: BreadcrumbsItem[] = [
    { id: 'home', name: labels.home, url: '/' },
  ];
  const schema: BreadcrumbList['itemListElement'][] = [
    {
      '@type': 'ListItem',
      position: 1,
      name: labels.home,
      item: CONFIG.url,
    },
  ];

  if (isHome(url)) return { items, schema };

  if (hasBlogAsParent(url)) {
    items.push({ id: 'blog', name: labels.blog, url: ROUTES.BLOG });
    schema.push({
      '@type': 'ListItem',
      position: 2,
      name: labels.blog,
      item: `${CONFIG.url}${ROUTES.BLOG}`,
    });
  }

  if (isProject(url)) {
    items.push({ id: 'projects', name: labels.projects, url: ROUTES.PROJECTS });
    schema.push({
      '@type': 'ListItem',
      position: 2,
      name: labels.projects,
      item: `${CONFIG.url}${ROUTES.PROJECTS}`,
    });
  }

  items.push({ id: slugify(title), name: title, url });
  schema.push({
    '@type': 'ListItem',
    position: schema.length + 1,
    name: title,
    item: `${CONFIG.url}${url}`,
  });

  return { items, schema };
};