@apify/ui-library 0.71.1-featcolortokens-178953.63 → 0.71.1-featcolortokens-178953.67

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.71.1-featcolortokens-178953.63+c1198647980",
+    "version": "0.71.1-featcolortokens-178953.67+5454a7d7f71",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -69,7 +69,8 @@
     },
     "files": [
         "dist",
+        "src",
         "style"
     ],
-    "gitHead": "c1198647980b133844e230e67e1f5b334f6dd057"
+    "gitHead": "5454a7d7f71ea2968f86171b9e587910bdee5bdc"
 }

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -0,0 +1,137 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_typography_tokens.json', 'utf-8');
+
+const fontFamilies = {
+    inter: `Inter, sans-serif`,
+    gtWalsheim: `'GT-Walsheim-Regular', sans-serif`,
+    sfPro: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`,
+    ibmPlexMono: "'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+};
+
+const transformTokenProperties = (token) => {
+    const {
+        fontWeight,
+        fontSize,
+        lineHeight,
+        fontFamily,
+    } = token.value;
+
+    // Convert font family name to font family value
+    let fontFamilyValue;
+    const fontFamilyNameParts = fontFamily.split(' '); // each word in font family name is a separate part
+
+    if (fontFamilyNameParts.length === 1) {
+        fontFamilyValue = fontFamilies[fontFamilyNameParts[0].toLowerCase()];
+    } else {
+        const fontFamilyIndex = fontFamilyNameParts.map((fontFamilyNamePart, i) => {
+            if (i === 0) return fontFamilyNamePart.toLowerCase();
+            return fontFamilyNamePart;
+        }).join('');
+
+        fontFamilyValue = fontFamilies[fontFamilyIndex];
+    }
+
+    return `font-size: ${Number(fontSize) / 10}rem; line-height: ${Number(lineHeight) / 10}rem; font-weight: ${fontWeight}; font-family: ${fontFamilyValue};`;
+};
+
+const transformTokenName = (tokenName) => {
+    const [token, variant] = tokenName.split('-');
+    return (variant ? `${token}${variant.charAt(0).toUpperCase() + variant.slice(1)}` : token);
+};
+
+const extractDeviceTokensDefinitions = (tokens) => {
+    return Object.keys(tokens).reduce((acc, tokenName) => {
+        const properTokenName = transformTokenName(tokenName);
+        acc[properTokenName] = transformTokenProperties(tokens[tokenName], fontFamilies);
+        return acc;
+    }, {});
+};
+
+const extractTokensDefinitions = (sharedTokens) => {
+    const sharedTokensDefinition = {
+        mobile: {},
+        tablet: {},
+        desktop: {},
+    };
+
+    Object.entries(sharedTokens).forEach(([tokenName, tokenValue]) => {
+        if ((tokenName === 'mobile' || tokenName === 'tablet') && typeof tokenValue !== 'string') {
+            sharedTokensDefinition[tokenName] = extractDeviceTokensDefinitions(tokenValue, fontFamilies);
+            return;
+        }
+
+        const properTokenName = transformTokenName(tokenName);
+        const transformedTokenProperties = transformTokenProperties(tokenValue, fontFamilies);
+        sharedTokensDefinition.desktop[properTokenName] = transformedTokenProperties;
+        sharedTokensDefinition.mobile[properTokenName] ||= transformedTokenProperties;
+        sharedTokensDefinition.tablet[properTokenName] ||= transformedTokenProperties;
+    });
+
+    return sharedTokensDefinition;
+};
+
+const globalTokens = JSON.parse(code).global;
+
+const sharedTokens = extractTokensDefinitions(globalTokens.shared);
+const marketingTokens = extractTokensDefinitions(globalTokens.marketing);
+const contentTokens = extractTokensDefinitions(globalTokens.content);
+
+const tokensForCodeGeneration = {
+    shared: sharedTokens,
+    marketing: marketingTokens,
+    content: contentTokens,
+};
+
+const createTokensCode = (tokens) => {
+    const variantsArray = [];
+    for (const [tokenVariant, tokenVariantItems] of Object.entries(tokens)) {
+        const devicesArray = [];
+
+        for (const [device, deviceTokens] of Object.entries(tokenVariantItems)) {
+            const deviceItemsArray = [];
+
+            for (const [tokenName, tokenValue] of Object.entries(deviceTokens)) {
+                deviceItemsArray.push(builders.property(
+                    'init',
+                    builders.identifier(tokenName),
+                    builders.literal(tokenValue),
+                ));
+            }
+            devicesArray.push(builders.property(
+                'init',
+                builders.identifier(device),
+                builders.objectExpression(deviceItemsArray),
+            ));
+        }
+
+        variantsArray.push(builders.property(
+            'init',
+            builders.identifier(tokenVariant),
+            builders.objectExpression(devicesArray),
+        ));
+    }
+
+    const exportDeclaration = builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier('typographyTokens'),
+                builders.tsAsExpression(builders.objectExpression(variantsArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+
+    // Add a comment to the export declaration
+    exportDeclaration.comments = [builders.commentBlock(' eslint-disable max-len ')];
+
+    return exportDeclaration;
+};
+
+const printedCode = print(builders.program([createTokensCode(tokensForCodeGeneration)])).code;
+
+writeFileSync('./src/design_system/typography_theme.ts', printedCode);

package/src/components/action_link.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme.js';
+import { Box } from './box.js';
+import { Link, type LinkProps } from './link.js';
+import { Heading } from './text/index.js';
+
+const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
+    display: inline-flex;
+    align-items: center;
+    color: ${theme.color.neutral.text};
+
+    svg {
+        transition: transform 0.2s ease-in-out;
+    }
+
+    &:hover {
+        svg {
+            transform: translate(${({ $isBackLink }) => ($isBackLink ? -3 : 3)}px, 0);
+        }
+    }
+`;
+
+export const ActionLink: React.FC<LinkProps & { contentProps?: object }> = ({
+    children,
+    as = Link,
+    contentProps,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as}
+            $isBackLink={false}
+            {...rest}
+        >
+            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
+            <ArrowRightIcon size="16" />
+        </StyledGuidepost>
+    );
+};
+
+export const BackLink: React.FC<LinkProps> = ({
+    children,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as || Link}
+            $isBackLink={true}
+            {...rest}
+        >
+            <ArrowLeftIcon size="16" />
+            <Heading as='span' type='titleM'>{children}</Heading>
+        </StyledGuidepost>
+    );
+};

package/src/components/actor_template_card.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import { Badge } from './badge.js';
+import { TextMarketing } from './text/text_marketing.js';
+import { VerticalTile } from './tile/index.js';
+
+interface ActorTemplateCardProps {
+    id: string;
+    label: string;
+    description: string;
+    icons: React.ReactNode[];
+    useCases?: string[];
+}
+
+const WrapperClasses = {
+    TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
+    TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
+    TEMPLATE_CARD_DESCRIPTION: 'TemplateCard-Description',
+    TEMPLATE_CARD_BADGES: 'TemplateCard-Badges',
+};
+
+const TemplateCardContentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    flex: 1 0 0;
+    gap: ${theme.space.space16};
+    color: ${theme.color.neutral.text};
+
+    .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
+        display: flex;
+        align-items: flex-start;
+        gap: ${theme.space.space16};
+        flex-wrap: wrap;
+        img,
+        svg {
+            max-width: ${theme.space.space40};
+            max-height: ${theme.space.space40};
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_TEXT} {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: ${theme.space.space4};
+
+        .${WrapperClasses.TEMPLATE_CARD_DESCRIPTION} {
+            color: ${theme.color.neutral.textMuted};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_BADGES} {
+        display: flex;
+        gap: ${theme.space.space4};
+    }
+`;
+
+export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
+    id,
+    label,
+    description,
+    icons,
+    useCases,
+}) => {
+    const templateCardContent = (
+        <TemplateCardContentWrapper>
+            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>{icons}</div>
+            <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
+                <TextMarketing size="regular" weight="bold">
+                    {label}
+                </TextMarketing>
+                <TextMarketing
+                    size="small"
+                    className={WrapperClasses.TEMPLATE_CARD_DESCRIPTION}
+                >
+                    {description}
+                </TextMarketing>
+            </div>
+            <div className={WrapperClasses.TEMPLATE_CARD_BADGES}>
+                {useCases?.includes('STARTER') && (
+                    <Badge variant="success">Starter</Badge>
+                )}
+                {useCases?.includes('AI') && (
+                    <Badge
+                        variant="success"
+                        style={{
+                            color: '#6E00F4',
+                            fill: '#6E00F4',
+                            background: '#E4D4F7',
+                        }}
+                    >
+                        AI Agent
+                    </Badge>
+                )}
+            </div>
+        </TemplateCardContentWrapper>
+    );
+
+    return (
+        <VerticalTile
+            id={`actor-template-card-${id}`}
+            content={templateCardContent}
+            isClickable
+        />
+    );
+};

package/src/components/badge.tsx

@@ -0,0 +1,148 @@
+import React, { forwardRef } from 'react';
+import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import { Text } from './text/index.js';
+import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
+
+export type BadgeSize = 'regular' | 'small' | 'extra_small';
+export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
+
+const BADGE_ICON_SIZES = {
+    regular: '16',
+    small: '12',
+    extra_small: '12',
+} satisfies Record<BadgeSize, IconSize>;
+
+const BADGE_TEXT_SIZES = {
+    regular: 'regular',
+    small: 'small',
+    extra_small: 'small',
+} satisfies Record<BadgeSize, SharedTextSize>;
+
+export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
+type BadgeVariant = typeof BADGE_VARIANTS[number];
+
+type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+export type BadgeProps = SharedBadgeProps & {
+    as?: Exclude<React.ElementType, 'a' | 'button'>;
+    size?: BadgeSize;
+    type?: SharedTextType;
+    variant?: BadgeVariant;
+    LeadingIcon?: IconComponent;
+};
+
+const badgeSizeStyle = {
+    regular: css`
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius6};
+    `,
+    small: css`
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+    `,
+    extra_small: css`
+        height: ${theme.space.space16};
+        padding: ${theme.space.space2} ${theme.space.space4};
+        border-radius: ${theme.radius.radius4};
+    `,
+} satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
+
+const badgeVariantStyle = {
+    neutral: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.background};
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+    `,
+    neutral_muted: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+    neutral_subtle: css`
+        color: ${theme.color.neutral.textSubtle};
+        fill: ${theme.color.neutral.textSubtle};
+        background: ${theme.color.neutral.backgroundSubtle};
+    `,
+    primary_black: css`
+        color: ${theme.color.primaryBlack.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primaryBlack.background};
+    `,
+    primary_blue: css`
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primary.background};
+    `,
+    success: css`
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
+    `,
+    warning: css`
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
+    `,
+    danger: css`
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
+    `,
+} satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
+
+type StyledBadgeProps = WithTransientProps<
+    Required<Pick<BadgeProps, 'size' | 'variant'>>
+>;
+
+const StyledBadge = styled(Box)<StyledBadgeProps>`
+    ${({ $size }) => badgeSizeStyle[$size]};
+    ${({ $variant }) => badgeVariantStyle[$variant]};
+
+  /* Static styles */
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
+`;
+
+/**
+ * Component for displaying non-interactive chip descendant.
+ */
+export const Badge = forwardRef(
+    ({
+        size = 'small',
+        type = 'body',
+        variant = 'neutral',
+        LeadingIcon,
+        children,
+        ...props
+    }: BadgeProps,
+    ref,
+    ) => {
+        return (
+            <StyledBadge
+                ref={ref}
+                $size={size}
+                $variant={variant}
+                {...props}
+            >
+                {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
+                {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium">{children}</Text>)}
+            </StyledBadge>
+        );
+    },
+);
+
+Badge.displayName = 'Badge';

package/src/components/banner.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+
+const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2285_34756)">
+    <g filter="url(#filter0_f_2285_34756)">
+    <path d="M-39.7702 191.085C-55.0622 193.205 -68.8864 201.311 -78.2029 213.621C-87.5194 225.932 -91.5654 241.438 -89.4512 256.731L-55.0077 502.652L89.8852 173L-39.7702 191.085Z" fill="url(#paint0_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter1_f_2285_34756)">
+    <path d="M1267.53 398.062L1253.99 209.002C1252.85 193.626 1245.67 179.327 1234.01 169.234C1222.36 159.14 1207.18 154.073 1191.8 155.14C1190.5 155.19 1189.2 155.331 1187.92 155.564L1132 163.289L1254.84 438.685C1264.05 427.236 1268.59 412.721 1267.53 398.062Z" fill="url(#paint1_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter2_f_2285_34756)">
+    <path d="M561 29.7691C570.917 30.4746 580.956 29.5571 590.142 27.1057L801.075 -28.7862L700.682 -170L561 29.7691Z" fill="url(#paint2_linear_2285_34756)"/>
+    </g>
+    </g>
+    <defs>
+    <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FF85"/>
+    <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FFF0"/>
+    <stop offset="1" stop-color="#1672EB"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#F5B315"/>
+    <stop offset="1" stop-color="#FF2CC4"/>
+    </linearGradient>
+    <clipPath id="clip0_2285_34756">
+    <rect width="1200" height="1791.08" rx="16" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>
+`;
+
+interface BannerProps {
+    background?: string,
+    useGradientBackground?: boolean,
+    width?: string,
+    className?: string,
+    children: React.ReactNode,
+}
+
+const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
+    return css`
+            background-color: ${background || theme.color.neutral.backgroundSubtle};
+            ${useGradientBackground && `
+            background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            `}
+        `;
+};
+
+const StyledBanner = styled.div<{ $background?: string, $useGradientBackground?: boolean, width?: string }>`
+    width: ${(props) => props.width || '100%'};
+    padding: ${theme.space.space40} ${theme.space.space80};
+    border-radius: ${theme.radius.radius16};
+
+    ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
+`;
+
+export const Banner: React.FC<BannerProps> = ({
+    useGradientBackground = true,
+    background,
+    children,
+    ...otherProps
+}) => (
+    <StyledBanner
+        $background={background}
+        $useGradientBackground={useGradientBackground}
+        {...otherProps}
+    >
+        {children}
+    </StyledBanner>
+);

package/src/components/blog_article.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowRightIcon } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme.js';
+
+const classNames = {
+    IMAGE_WRAPPER: 'ImageWrapper',
+    TEXT: 'Text',
+    READ_POST: 'ReadPost',
+};
+
+const BlogArticleWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+        .${classNames.READ_POST} {
+                color: ${theme.color.primary.action};
+        }
+    }
+
+    .${classNames.IMAGE_WRAPPER} {
+        margin-bottom: ${theme.space.space16};
+        border-radius: ${theme.radius.radius12};
+        border: 1px solid ${theme.color.neutral.backgroundSubtle};
+        aspect-ratio: 16/9;
+    }
+
+    .${classNames.TEXT} {
+        padding-bottom: ${theme.space.space16};
+        color: ${theme.color.neutral.text};
+        ${theme.typography.shared.mobile.titleL}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleL}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleL}
+        }
+    }
+
+    .${classNames.READ_POST} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space4};
+        color: ${theme.color.neutral.textMuted};
+        ${theme.typography.shared.mobile.titleM}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleM}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleM}
+        }
+
+
+        svg {
+            transition: margin-right .5s;
+        }
+
+        &:hover svg {
+            margin-right: ${theme.space.space4};
+        }
+    }
+`;
+
+interface BlogArticleProps {
+    imageNode: React.ReactNode;
+    title: string;
+    ctaTitle?: string;
+}
+
+export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }: BlogArticleProps) {
+    return (
+        <BlogArticleWrapper>
+            <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
+            <div className={classNames.TEXT}>{title}</div>
+            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRightIcon size="16" title="" titleId="" /></div>
+        </BlogArticleWrapper>
+    );
+}