pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

removed toc section for posts with no toc

Browse source
This commit is contained in:
Kim, Jimin 2021-08-17 09:11:21 +09:00
parent a5cad47c78
commit aa7f34ff7d
1 changed files with 114 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

34
source/src/pages/Page.tsx
View file

@ -256,9 +256,7 @@ export default class Page extends React.Component<PageProps, PageState> {
} }
render() { render() {
if (this.state.loading) { if (this.state.loading) return <Spinner size={200} />
return <Spinner size={200} />
} else {
if (!this.state.fetchedPage) return <NotFound /> if (!this.state.fetchedPage) return <NotFound />
return ( return (
@ -291,9 +289,8 @@ export default class Page extends React.Component<PageProps, PageState> {
) : ( ) : (
<br /> <br />
)} )}
<StyledTitle> <StyledTitle>{this.state.fetchedPage.title}</StyledTitle>
{this.state.fetchedPage.title}
</StyledTitle>
{/* Post tags */} {/* Post tags */}
<small> <small>
<TagList direction="left"> <TagList direction="left">
@ -302,8 +299,8 @@ export default class Page extends React.Component<PageProps, PageState> {
return ( return (
<td <td
key={ key={
this.state.fetchedPage this.state.fetchedPage?.title +
?.title + tag tag
} }
> >
<Tag text={tag} /> <Tag text={tag} />
@ -314,17 +311,17 @@ export default class Page extends React.Component<PageProps, PageState> {
<></> <></>
)} )}
</TagList> </TagList>
<br /> <br />
{!this.state.isUnsearchable && ( {!this.state.isUnsearchable && (
<StyledMetaContainer> <StyledMetaContainer>
<FontAwesomeIcon icon={faCalendar} />{" "} <FontAwesomeIcon icon={faCalendar} />{" "}
{this.state.fetchedPage?.date || {this.state.fetchedPage?.date || "Unknown date"}
"Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faHourglass} />{" "} <FontAwesomeIcon icon={faHourglass} />{" "}
{this.state.fetchedPage?.readTime {this.state.fetchedPage?.readTime
? this.state.fetchedPage?.readTime + ? this.state.fetchedPage?.readTime + " read"
" read"
: "unknown length"} : "unknown length"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faBook} />{" "} <FontAwesomeIcon icon={faBook} />{" "}
@ -335,13 +332,13 @@ export default class Page extends React.Component<PageProps, PageState> {
</StyledMetaContainer> </StyledMetaContainer>
)} )}
</small> </small>
{/* Horizontal Separator */}
<hr /> <hr />
{ {
// add table of contents if it exists // add table of contents if it exists
this.state.fetchedPage.toc && ( !!this.state.fetchedPage?.toc?.props.children
.length && (
<> <>
<StyledTocToggleButton <StyledTocToggleButton
onClick={() => { onClick={() => {
@ -355,15 +352,11 @@ export default class Page extends React.Component<PageProps, PageState> {
{this.state.isTocOpened ? ( {this.state.isTocOpened ? (
<FontAwesomeIcon icon={faCaretUp} /> <FontAwesomeIcon icon={faCaretUp} />
) : ( ) : (
<FontAwesomeIcon <FontAwesomeIcon icon={faCaretDown} />
icon={faCaretDown}
/>
)} )}
</StyledTocToggleButton> </StyledTocToggleButton>
<StyledCollapseContainer> <StyledCollapseContainer>
<Collapse <Collapse isOpened={this.state.isTocOpened}>
isOpened={this.state.isTocOpened}
>
<div className="white-link"> <div className="white-link">
{this.state.fetchedPage.toc} {this.state.fetchedPage.toc}
</div> </div>
@ -385,4 +378,3 @@ export default class Page extends React.Component<PageProps, PageState> {
) )
} }
} }
}