Introduction
The Telescope is the open source project that maintains by Seneca College. The Telescope is an open source web servce and client application gathers all blog posts from variety of platforms such as WordPress, Medium, Dev Community, and many others and presenting as timeline.
Issue
The issue is one of blog post contain many lines of <p><br><p>
at the end of blog post. This numerous of line break tag that wrap with paragraph tag interrupt view other blog posts.
Fix
The issue is very simple to fix. In the
remove-empty-paragraphs.js
const cleanWhiteSpace = require('clean-whitespace');
module.exports = function (dom) {
if (!(dom && dom.window && dom.window.document)) {
return;
}
dom.window.document.querySelectorAll('p').forEach((p) => {
p.innerHTML = cleanWhiteSpace(p.innerHTML);
const paragraphInnerHTML = p.innerHTML;
if(!paragraphInnerHTML.replace(/ /gm,'').trim()) {
p.remove();
}
});
};
The logic already has been made for the  
non-breaking space. Therefore simply add one more condition || paragraphInnerHTML.trim() === '<br>'
that catch if the <p>
contains only <br>
tag for remove the
tag.
challenge
The issue supposed to be easily resolved. However there is two things that I have faced the challenge.
- The
remove-empty-paragraph.js
is never called - Since (1) challenge exists, I do not know my logic is correct.
The reason that remove-empty-paragraph.js
is not called is actually function never get called. I think the empty  
treats as edge case so I think the code was missing. Therefore I have create the code for invoking the function
The second challenge has been resolved with the advice from David who is instructor of this course. His advice is create unit test case for testing my logic is whether pass or fail. Therefore I have created
test('should remove <p><br></p> (line break)', () => {
const htmlData = toDom('<div><p><br></p></div>');
removeEmptyParagraphs(htmlData);
const expectedHtml = '<div></div>';
expect(htmlData.window.document.body.innerHTML).toEqual(expectedHtml);
The output is pass! My logic is correct but I do not see the any change on the Telescope running in local. I have no idea why my change does not reflect to the Telescope. So I have asked this issue to our Telescope Slack channel. Thankfully Josue and Duc Bui Manh helped to resolve this issue. They suggested me to delete old redis-data
and re-run the application that also update database to fetch the blog posts. It takes while the elasticSearch
crawls the all the blog posts but finally I have the expected result.
Conclusion
During the time in Hacktoberfest, I have contributed 4 small projects. It is such a good experience to contribute to large open source project Telescope.
Top comments (0)