ant-design/site/theme/template/Content/Article.tsx
二货机器人 afedb4127f
docs: Site with single paging (#21360)
* patch route

* use data for promise

* rename Article file

* Article in TS

* clean up

* use collect

* adjust css

* card it

* listing

* res

* hiring

* add footer

* english it

* rm others

* fix lint

* fix navigation

* add dropdown button

* Header with TS

* split input & logo

* navigation out

* use flex

* flex everything

* stretch

* hide search when narrow

* init category

* global rules

* more cat

* pages

* level 2 width

* level 3

* level 4

* skip before ready

* clean up

* unqiue shadow variable

* update eslintignore

* update ignore

* fix ssr

* fix location param

* replace images

* shake more

* fix top of navigation

* remove home

* reorder nav & adjust padding style

* narrow res style

* Update research-form-page.zh-CN.md (#21426)

Co-authored-by: Golevka <huangsamfisher@163.com>

* rm skip

* narrow merge in

* reset p style

* update svg

* fix lint

* update ignore

* update lint ignore

* Update research-result-page.zh-CN.md (#21432)

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-result-page.zh-CN.md

* Update research-workbench.zh-CN.md (#21438)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-workbench.zh-CN.md

* Update research-list-page.zh-CN.md (#21441)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-list-page.zh-CN.md

* padding use 40px

* add responsive of ref

* fix p margin

* Update research-workbench.zh-CN.md

* Update buttons.md (#21456)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update resources.en-US.md (#21457)

* Update research-navigation.zh-CN.md (#21453)

* Update research-navigation.zh-CN.md

* Update research-navigation.zh-CN.md

* Update research-navigation.zh-CN.md

* Update research-empty.zh-CN.md (#21451)

* Update research-empty.zh-CN.md

* Update research-empty.zh-CN.md

* Update research-empty.zh-CN.md

* Update research-empty.zh-CN.md

Co-authored-by: 二货机器人 <smith3816@gmail.com>

* Update research-exception-page.zh-CN.md (#21452)

* Update research-exception-page.zh-CN.md

* Update research-exception-page.zh-CN.md

* Update research-message-and-feedback.zh-CN.md (#21463)

* Update research-message-and-feedback.zh-CN.md (#21467)

* Update research-message-and-feedback.zh-CN.md

* Update research-message-and-feedback.zh-CN.md

* Update research-message-and-feedback.zh-CN.md

* Update research-message-and-feedback.zh-CN.md

* replace background

* fix lines margin

* home padding

* patch minTilda doc

* Update resources.zh-CN.md (#21503)

* clean up

* Update research-workbench.zh-CN.md (#21512)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-overview.zh-CN.md (#21513)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-result-page.zh-CN.md (#21514)

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-list-page.zh-CN.md (#21515)

Co-authored-by: yingxirz <inseeing@gmail.com>

* fix doc

* Update research-message-and-feedback.zh-CN.md (#21516)

* adjust home nav width

* Update research-message-and-feedback.zh-CN.md (#21535)

* Update research-form-page.zh-CN.md (#21554)

Co-authored-by: Golevka <huangsamfisher@163.com>

* patch file

* clean up

* update shadow.zh-CN

update shadow.zh-CN

* add shadow table

* Update visual.zh-CN.md (#21577)

Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>

* Update docs/spec/shadow.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update docs/spec/shadow.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update docs/spec/shadow.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update docs/spec/shadow.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update docs/spec/shadow.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* patch docs

* fix doc

* rm page suffix

* fix style

* mobile it

* Update resources.en-US.md (#21561)

* chart res

* add qr code

* adjust qr

* Update visual.zh-CN.md (#21603)

Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>

* fix site qr

* mobile height of it

* book update

* 3.x site link

* isMobile is new cnotext

* Update research-form.zh-CN.md (#21604)

Co-authored-by: Golevka <huangsamfisher@163.com>

* adjust form doc

* mobile use link

* adjust order

* flush

* fix ts

* Update research-navigation.zh-CN.md (#21606)

* Update research-navigation.zh-CN.md (#21609)

* rm useless lines

* add mobile icon

* Update research-exception.zh-CN.md (#21612)

* Update research-empty.zh-CN.md (#21610)

* Update research-workbench.zh-CN.md

* Update visual.zh-CN.md

* adjust mobile icon

* Update research-message-and-feedback.zh-CN.md (#21613)

* Update research-list.zh-CN.md (#21617)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-workbench.zh-CN.md (#21618)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update visual.zh-CN.md (#21619)

Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>

* Update research-result.zh-CN.md (#21620)

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-form.zh-CN.md (#21615)

* Update research-message-and-feedback.zh-CN.md (#21616)

* Update research-list.zh-CN.md (#21621)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-result.zh-CN.md (#21624)

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* update ref color

* update zip file

* fix mobile icon

* rm skip dark

* fix cat

* update zip link

* update zip link

Co-authored-by: Golevka <huangsamfisher@163.com>
Co-authored-by: mihaideyu <zxy1010414746@163.com>
Co-authored-by: yingxirz <inseeing@gmail.com>
Co-authored-by: 偏右 <afc163@gmail.com>
Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com>
Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com>
Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com>
Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com>
Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
2020-02-27 10:53:30 +08:00

171 lines
5.2 KiB
TypeScript

import React, { Children, cloneElement } from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { Helmet } from 'react-helmet-async';
import { getChildren } from 'jsonml.js/lib/utils';
import { Timeline, Alert, Affix } from 'antd';
import EditButton from './EditButton';
import { getMetaDescription } from '../utils';
interface LocaleString {
[locale: string]: string;
}
export interface ArticleProps {
titleRegionClassName?: string;
location: {
pathname: string;
};
content: {
meta: {
toc?: boolean;
timeline?: boolean;
title: string | LocaleString;
subtitle?: string;
filename?: string;
};
description?: any[];
toc: string[];
content: any[];
api?: any;
};
intl: { locale: string };
utils: {
toReactComponent: (content: any[]) => React.ReactElement;
};
}
class Article extends React.Component<ArticleProps> {
shouldComponentUpdate(nextProps: ArticleProps) {
const { location } = this.props;
const { location: nextLocation } = nextProps;
if (nextLocation.pathname === location.pathname) {
return false;
}
return true;
}
onResourceClick: React.MouseEventHandler<HTMLAnchorElement> = event => {
const { target } = (event as unknown) as { target: HTMLAnchorElement };
if (!window.gtag) {
return;
}
const cardNode = target.closest('.resource-card') as HTMLAnchorElement;
if (cardNode) {
window.gtag('event', 'resource', {
event_category: 'Download',
event_label: cardNode.href,
});
}
if (
window.location.href.indexOf('docs/react/recommendation') > 0 &&
target.matches('.markdown > table td > a[href]')
) {
window.gtag('event', 'recommendation', {
event_category: 'Click',
event_label: target.href,
});
}
};
getArticle(article: React.ReactElement) {
const { content } = this.props;
const { meta } = content;
if (!meta.timeline) {
return article;
}
const timelineItems = [];
let temp: React.ReactNode[] = [];
let i = 1;
Children.forEach(article.props.children, child => {
if (child.type === 'h2' && temp.length > 0) {
timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
temp = [];
i += 1;
}
temp.push(child);
});
if (temp.length > 0) {
timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
}
return cloneElement(article, {
children: <Timeline>{timelineItems}</Timeline>,
});
}
render() {
const {
titleRegionClassName,
content,
intl: { locale },
utils,
} = this.props;
const { meta, description } = content;
const { title, subtitle, filename } = meta;
const isNotTranslated = locale === 'en-US' && typeof title === 'object';
const helmetTitle = `${(title as LocaleString)[locale] || title} - Ant Design`;
const helmetDesc = getMetaDescription(description);
const contentChild = getMetaDescription(getChildren(content.content));
const metaDesc = helmetDesc || contentChild;
return (
/* eslint-disable-next-line */
<article className="markdown" onClick={this.onResourceClick}>
<Helmet encodeSpecialCharacters={false}>
{helmetTitle && <title>{helmetTitle}</title>}
{helmetTitle && <meta property="og:title" content={helmetTitle} />}
{metaDesc && <meta name="description" content={metaDesc} />}
</Helmet>
{isNotTranslated && (
<Alert
type="warning"
message={
<span>
This article has not been translated yet. Wanna help us out?&nbsp;
<a href="https://github.com/ant-design/ant-design/issues/1471">
See this issue on GitHub.
</a>
</span>
}
/>
)}
<div className={titleRegionClassName}>
<h1>
{(title as LocaleString)[locale] || title}
{!subtitle || locale === 'en-US' ? null : <span className="subtitle">{subtitle}</span>}
<EditButton
title={<FormattedMessage id="app.content.edit-page" />}
filename={filename}
/>
</h1>
{!description
? null
: utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(description)),
)}
</div>
{!content.toc || content.toc.length <= 1 || meta.toc === false ? null : (
<Affix className="toc-affix" offsetTop={16}>
{utils.toReactComponent(['ul', { className: 'toc' }].concat(getChildren(content.toc)))}
</Affix>
)}
{this.getArticle(
utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(content.content)),
),
)}
{utils.toReactComponent(
[
'section',
{
className: 'markdown api-container',
},
].concat(getChildren(content.api || ['placeholder'])),
)}
</article>
);
}
}
export default (injectIntl(Article as any) as any) as React.ComponentClass<ArticleProps>;