import Link from '@components/atoms/links/link'; import DescriptionList, { type DescriptionListProps, type DescriptionListItem, } from '@components/atoms/lists/description-list'; import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates'; import { FC, ReactNode } from 'react'; import { useIntl } from 'react-intl'; export type CustomMeta = { label: string; value: ReactNode | ReactNode[]; }; export type MetaComments = { /** * A page title. */ about: string; /** * The comments count. */ count: number; /** * Wrap the comments count with a link to the given target. */ target?: string; }; export type MetaDate = { /** * A date string. Ex: `2022-04-30`. */ date: string; /** * A time string. Ex: `10:25:59`. */ time?: string; /** * Wrap the date with a link to the given target. */ target?: string; }; export type MetaData = { /** * The author name. */ author?: string; /** * The comments count. */ comments?: MetaComments; /** * The creation date. */ creation?: MetaDate; /** * A custom label/value metadata. */ custom?: CustomMeta; /** * The license name. */ license?: string; /** * The popularity. */ popularity?: string | JSX.Element; /** * The publication date. */ publication?: MetaDate; /** * The estimated reading time. */ readingTime?: string | JSX.Element; /** * An array of repositories. */ repositories?: string[] | JSX.Element[]; /** * An array of technologies. */ technologies?: string[]; /** * An array of thematics. */ thematics?: string[] | JSX.Element[]; /** * An array of thematics. */ topics?: string[] | JSX.Element[]; /** * A total number of posts. */ total?: number; /** * The update date. */ update?: MetaDate; /** * An url. */ website?: string; }; export type MetaKey = keyof MetaData; export type MetaProps = Omit< DescriptionListProps, 'items' | 'withSeparator' > & { /** * The meta data. */ data: MetaData; /** * The items layout. */ itemsLayout?: DescriptionListItem['layout']; /** * If true, use a slash to delimitate multiple values. Default: true. */ withSeparator?: DescriptionListProps['withSeparator']; }; /** * Meta component * * Renders the given metadata. */ const Meta: FC = ({ data, itemsLayout = 'inline-values', withSeparator = true, ...props }) => { const intl = useIntl(); /** * Retrieve the item label based on its key. * * @param {keyof MetaData} key - The meta key. * @returns {string} The item label. */ const getLabel = (key: keyof MetaData): string => { switch (key) { case 'author': return intl.formatMessage({ defaultMessage: 'Written by:', description: 'Meta: author label', id: 'OI0N37', }); case 'comments': return intl.formatMessage({ defaultMessage: 'Comments:', description: 'Meta: comments label', id: 'jTVIh8', }); case 'creation': return intl.formatMessage({ defaultMessage: 'Created on:', description: 'Meta: creation date label', id: 'b4fdYE', }); case 'license': return intl.formatMessage({ defaultMessage: 'License:', description: 'Meta: license label', id: 'AuGklx', }); case 'popularity': return intl.formatMessage({ defaultMessage: 'Popularity:', description: 'Meta: popularity label', id: 'pWTj2W', }); case 'publication': return intl.formatMessage({ defaultMessage: 'Published on:', description: 'Meta: publication date label', id: 'QGi5uD', }); case 'readingTime': return intl.formatMessage({ defaultMessage: 'Reading time:', description: 'Meta: reading time label', id: 'EbFvsM', }); case 'repositories': return intl.formatMessage({ defaultMessage: 'Repositories:', description: 'Meta: repositories label', id: 'DssFG1', }); case 'technologies': return intl.formatMessage({ defaultMessage: 'Technologies:', descriptio

@use "sass:math";

/// Convert px to rem or em.
/// @param  {Number} $px Value in px
/// @param  {String} $to Unit. Either "rem" or "em"
/// @param  {Number} $standard 1rem (or 1em) = 16px
/// @return {Number} Value in rem or em
@function convert-px($px, $to: "rem", $standard: 16) {
  @if $to == "rem" {
    @return math.div($px, $standard) + 0rem; // stylelint-disable-line
  } @else if $to == "em" {
    @return math.div($px, $standard) + 0em; // stylelint-disable-line
  } @else {
    @error "`$to` must be either `rem` or `em`.";
  }
}