Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add hide_title metadata that hides the title text on the top of the doc #540

Merged
merged 7 commits into from
Apr 12, 2018
Merged

Add hide_title metadata that hides the title text on the top of the doc #540

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5a56c62
Add hide_title metadata that hides the title text on the top of the doc
Apr 10, 2018
388a915
Review Feedback
Apr 10, 2018
b346d0f
Update api-doc-markdown.md
yangshun Apr 11, 2018
e36f990
Update api-doc-markdown.md
yangshun Apr 11, 2018
04b9870
Review feedback
Apr 12, 2018
fb42b18
Merge branch 'master' of github.com:MisterTea/Docusaurus
Apr 12, 2018
04850b4
Show title if we don't hide it.
JoelMarcey Apr 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/api-doc-markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ Documents use the following markdown header fields that are enclosed by a line `

`title`: The title of your document. If this field is not present, the document's `title` will default to its `id`.

`hide_title`: Whether to hide the title at the top of each documentation page. If this is `null` or set to anything besides `false`, the title will be displayed.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better if this field was restricted to a boolean value for simplicity. That way, we can shorten the description to the first sentence and do less checks in our code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yangshun How do you control what a user might enter in the metadata for the doc though? Someone could put:

hide_title: 'blahblah'

How do we treat that?

Or are you saying that just the fact that hide_title is explicitly put in the metadata it is always truthy, no matter the associated string?

Copy link
Contributor

@yangshun yangshun Apr 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I mean we will just determine the value based on whether it's truthy/falsy if a non-true/false value was provided. It'll be too much of a hassle to do type checks manually.
I believe Front matter supports boolean values (I will have to check on that though).

If a use puts 'blahblah', it will be treated as true as it is a non-empty string.


`sidebar_label`: The text shown in the document sidebar for this document. If this field is not present, the document's `sidebar_label` will default to its `title`.

For example:
Expand Down
8 changes: 7 additions & 1 deletion lib/core/Doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,17 @@ class Doc extends React.Component {
</a>
);
}

let title = null;
// this.props.title could be set to null if hide_title was set in the doc metadata
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The title value should be kept independent of the showing/hiding logic. What you can do is to pass in the prop hideTitle into this component from the parent.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also inline the conditional rendering logic into JSX since it's very short:

{this.props.hideTitle && <h1>{this.props.title}</h1>}

if (this.props.title) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a comment here saying something like:

// this.props.title could be set to null if hide_title was set in the doc metadata

title = <h1>{this.props.title}</h1>;
}
return (
<div className="post">
<header className="postHeader">
{editLink}
<h1>{this.props.title}</h1>
{title}
</header>
<article>
<MarkdownBlock>{this.props.content}</MarkdownBlock>
Expand Down
21 changes: 13 additions & 8 deletions lib/core/DocsLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ class DocsLayout extends React.Component {
if (this.props.Doc) {
DocComponent = this.props.Doc;
}
let docTitle = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These stuff can remain. Pass this.props.metadata.hide_title as a prop to <DocComponent>/<Doc> instead to simplify things.

// If the attribute does not exist or is set to false, we set a title.
if (
!this.props.metadata.hide_title ||
this.props.metadata.hide_title.toLowerCase() === 'false'
) {
docTitle = i18n
? translation[this.props.metadata.language]['localized-strings'][
this.props.metadata.localized_id
] || this.props.metadata.title
: this.props.metadata.title;
}
return (
<Site
config={this.props.config}
Expand All @@ -46,14 +58,7 @@ class DocsLayout extends React.Component {
content={content}
config={this.props.config}
source={metadata.source}
title={
i18n
? translation[this.props.metadata.language][
'localized-strings'
][this.props.metadata.localized_id] ||
this.props.metadata.title
: this.props.metadata.title
}
title={docTitle}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pass in the hideTitle prop here - hideTitle={metadata.hide_title}

version={metadata.version}
language={metadata.language}
/>
Expand Down
Loading