Extract blog post truncation logic and add tests (#640)

This commit is contained in:
Yangshun Tay 2018-05-06 09:15:18 -07:00 committed by GitHub
parent 5b3f54741e
commit 8d676e6a5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 192 additions and 30 deletions

View file

@ -8,32 +8,32 @@
const MarkdownBlock = require('./MarkdownBlock.js'); const MarkdownBlock = require('./MarkdownBlock.js');
const React = require('react'); const React = require('react');
const utils = require('./utils');
// inner blog component for the article itself, without sidebar/header/footer // inner blog component for the article itself, without sidebar/header/footer
class BlogPost extends React.Component { class BlogPost extends React.Component {
renderContent() { renderContent() {
let content = this.props.content;
let hasSplit = false;
if (content.split('<!--truncate-->').length > 1) {
hasSplit = (
<div className="read-more">
<a
className="button"
href={this.props.config.baseUrl + 'blog/' + this.props.post.path}>
Read More
</a>
</div>
);
}
if (this.props.truncate) { if (this.props.truncate) {
content = content.split('<!--truncate-->')[0];
return ( return (
<article className="post-content"> <article className="post-content">
<MarkdownBlock>{content}</MarkdownBlock> <MarkdownBlock>
{hasSplit} {utils.extractBlogPostBeforeTruncate(this.props.content)}
</MarkdownBlock>
{utils.blogPostHasTruncateMarker(this.props.content) && (
<div className="read-more">
<a
className="button"
href={
this.props.config.baseUrl + 'blog/' + this.props.post.path
}>
Read More
</a>
</div>
)}
</article> </article>
); );
} }
return <MarkdownBlock>{content}</MarkdownBlock>; return <MarkdownBlock>{this.props.content}</MarkdownBlock>;
} }
renderAuthorPhoto() { renderAuthorPhoto() {

View file

@ -0,0 +1,15 @@
---
title: Truncation Example
---
All this will be part of the blog post summary.
Even this.
<!--truncate-->
But anything from here on down will not be.
Not this.
Or this.

View file

@ -0,0 +1,13 @@
---
title: Non-truncation Example
---
All this will be part of the blog post summary.
Even this.
And anything from here on down will still be.
And this.
And this too.

View file

@ -0,0 +1,66 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`utils extractBlogPostBeforeTruncate 1`] = `
"---
title: Truncation Example
---
All this will be part of the blog post summary.
Even this.
"
`;
exports[`utils extractBlogPostBeforeTruncate 2`] = `
"---
title: Non-truncation Example
---
All this will be part of the blog post summary.
Even this.
And anything from here on down will still be.
And this.
And this too.
"
`;
exports[`utils extractBlogPostSummary 1`] = `
"---
title: Truncation Example
---
All this will be part of the blog post summary.
Even this.
<!--truncate-->
But anything from here on down will not be.
Not this.
Or this.
"
`;
exports[`utils extractBlogPostSummary 2`] = `
"---
title: Non-truncation Example
---
All this will be part of the blog post summary.
Even this.
And anything from here on down will still be.
And this.
And this too.
"
`;

View file

@ -0,0 +1,49 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const path = require('path');
const utils = require('../utils');
const readFileSync = require('fs').readFileSync;
const blogPostWithTruncateContents = readFileSync(
path.join(__dirname, '__fixtures__', 'blog-post-with-truncate.md'),
'utf-8'
);
const blogPostWithoutTruncateContents = readFileSync(
path.join(__dirname, '__fixtures__', 'blog-post-without-truncate.md'),
'utf-8'
);
describe('utils', () => {
test('blogPostHasTruncateMarker', () => {
expect(utils.blogPostHasTruncateMarker(blogPostWithTruncateContents)).toBe(
true
);
expect(
utils.blogPostHasTruncateMarker(blogPostWithoutTruncateContents)
).toBe(false);
});
test('extractBlogPostBeforeTruncate', () => {
expect(
utils.extractBlogPostBeforeTruncate(blogPostWithTruncateContents)
).toMatchSnapshot();
expect(
utils.extractBlogPostBeforeTruncate(blogPostWithoutTruncateContents)
).toMatchSnapshot();
});
test('extractBlogPostSummary', () => {
expect(
utils.extractBlogPostSummary(blogPostWithTruncateContents)
).toMatchSnapshot();
expect(
utils.extractBlogPostSummary(blogPostWithoutTruncateContents)
).toMatchSnapshot();
});
});

27
lib/core/utils.js Normal file
View file

@ -0,0 +1,27 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const BLOG_POST_SUMMARY_LENGTH = 250;
const TRUNCATE_MARKER = /<!--\s*truncate\s*-->/;
function blogPostHasTruncateMarker(content) {
return TRUNCATE_MARKER.test(content);
}
function extractBlogPostBeforeTruncate(content) {
return content.split(TRUNCATE_MARKER)[0];
}
function extractBlogPostSummary(content) {
return content.substring(0, BLOG_POST_SUMMARY_LENGTH);
}
module.exports = {
blogPostHasTruncateMarker,
extractBlogPostBeforeTruncate,
extractBlogPostSummary,
};

View file

@ -19,6 +19,7 @@ const blogFolder = path.resolve('../blog/');
const blogRootURL = siteConfig.url + siteConfig.baseUrl + 'blog'; const blogRootURL = siteConfig.url + siteConfig.baseUrl + 'blog';
const siteImageURL = const siteImageURL =
siteConfig.url + siteConfig.baseUrl + siteConfig.headerIcon; siteConfig.url + siteConfig.baseUrl + siteConfig.headerIcon;
const utils = require('../core/utils');
const renderMarkdown = require('../core/renderMarkdown.js'); const renderMarkdown = require('../core/renderMarkdown.js');
@ -56,18 +57,9 @@ module.exports = function(type) {
MetadataBlog.forEach(post => { MetadataBlog.forEach(post => {
const url = blogRootURL + '/' + post.path; const url = blogRootURL + '/' + post.path;
let content = ''; const content = utils.blogPostHasTruncateMarker(post.content)
if (post.content.indexOf('<!--truncate-->') == -1) { ? utils.extractBlogPostBeforeTruncate(post.content)
content = post.content.trim().substring(0, 250); : utils.extractBlogPostSummary(post.content.trim());
} else {
let contentArr = post.content.split('<!--truncate-->');
if (contentArr.length > 0) {
content = contentArr[0];
}
}
content = renderMarkdown(content);
feed.addItem({ feed.addItem({
title: post.title, title: post.title,
link: url, link: url,
@ -78,7 +70,7 @@ module.exports = function(type) {
}, },
], ],
date: new Date(post.date), date: new Date(post.date),
description: content, description: renderMarkdown(content),
}); });
}); });