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.

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

feat(helper/toc): specify maximum number of items to output #5487

Merged
merged 5 commits into from
Jul 1, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
26 changes: 25 additions & 1 deletion lib/plugins/helper/toc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { tocObj, escapeHTML, encodeURL } from 'hexo-util';
interface Options {
min_depth?: number;
max_depth?: number;
max_items?: number;
class?: string;
class_item?: string;
class_link?: string;
Expand All @@ -17,6 +18,7 @@ function tocHelper(str: string, options: Options = {}) {
options = Object.assign({
min_depth: 1,
max_depth: 6,
max_items: Infinity,
class: 'toc',
class_item: '',
class_link: '',
Expand All @@ -27,7 +29,7 @@ function tocHelper(str: string, options: Options = {}) {
list_number: true
}, options);

const data = tocObj(str, { min_depth: options.min_depth, max_depth: options.max_depth });
const data = getAndTruncateTocObj(str, { min_depth: options.min_depth, max_depth: options.max_depth }, options.max_items);
Copy link
Member

Choose a reason for hiding this comment

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

If the user does not need max_items, then there is no need to perform this operation everytime.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed: c17db64

I thought it was necessary to avoid tocObj() appearing multiple times in different places, so I wrote the skip judgment at the beginning of getAndTruncateTocObj() instead of where you gave the example.


if (!data.length) return '';

Expand Down Expand Up @@ -102,4 +104,26 @@ function tocHelper(str: string, options: Options = {}) {
return result;
}

function getAndTruncateTocObj(str: string, options: {min_depth: number, max_depth: number}, max_items: number) {
let data = tocObj(str, { min_depth: options.min_depth, max_depth: options.max_depth });

if (data.length === 0) {
return data;
}
if (max_items < 1) {
return data;
}

const min = Math.min(...data.map(item => item.level));
const max = Math.max(...data.map(item => item.level));
Copy link
Member

Choose a reason for hiding this comment

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

...data.map(item => item.level) They look the same,
I guess it doesn't need to be executed twice

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed: f8d04a6


for (let currentLevel = max; data.length > max_items && currentLevel > min; currentLevel--) {
data = data.filter(item => item.level < currentLevel);
}
Comment on lines +121 to +123
Copy link
Member

Choose a reason for hiding this comment

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

This might be inefficient (iterating data over and over again). But I don't have any better idea for now.


data = data.slice(0, max_items);
SukkaW marked this conversation as resolved.
Show resolved Hide resolved

return data;
}

export = tocHelper;
136 changes: 136 additions & 0 deletions test/scripts/helpers/toc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -552,4 +552,140 @@ describe('toc', () => {

toc(html, { class: 'foo', class_child: 'bar' }).should.eql(expected);
});

it('max_items - result contains only h1 items', () => {
const className = 'toc';
const expected = [
'<ol class="' + className + '">',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_1">',
'<span class="' + className + '-number">1.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1</span>',
'</a>',
// '<ol class="' + className + '-child">',
// <!-- h2 is truncated -->
// '</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_2">',
'<span class="' + className + '-number">2.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 2</span>',
'</a>',
// '<ol class="' + className + '-child">',
// <!-- h2 is truncated -->
// '</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_3">',
'<span class="' + className + '-number">3.</span> ', // list_number enabled
'<span class="' + className + '-text">Title should escape &amp;, &lt;, &#39;, and &quot;</span>',
'</a>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_4">',
'<span class="' + className + '-number">4.</span> ', // list_number enabled
'<span class="' + className + '-text">Chapter 1 should be printed to toc</span>',
'</a>',
'</li>',
'</ol>'
].join('');

toc(html, { max_items: 4}).should.eql(expected); // The number of `h1` is 4
toc(html, { max_items: 7}).should.eql(expected); // Maximum number 7 cannot display up to `h2`
});

it('max_items - result contains h1 and h2 items', () => {
const className = 'toc';
const expected = [
'<ol class="' + className + '">',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_1">',
'<span class="' + className + '-number">1.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1</span>',
'</a>',
'<ol class="' + className + '-child">',
'<li class="' + className + '-item ' + className + '-level-2">',
'<a class="' + className + '-link" href="#title_1_1">',
'<span class="' + className + '-number">1.1.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1.1</span>',
'</a>',
// '<ol class="' + className + '-child">',
// <!-- h3 is truncated -->
// '</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-2">',
'<a class="' + className + '-link" href="#title_1_2">',
'<span class="' + className + '-number">1.2.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1.2</span>',
'</a>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-2">',
'<a class="' + className + '-link" href="#title_1_3">',
'<span class="' + className + '-number">1.3.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1.3</span>',
'</a>',
// '<ol class="' + className + '-child">',
// <!-- h3 is truncated -->
// '</ol>',
'</li>',
'</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_2">',
'<span class="' + className + '-number">2.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 2</span>',
'</a>',
'<ol class="' + className + '-child">',
'<li class="' + className + '-item ' + className + '-level-2">',
'<a class="' + className + '-link" href="#title_2_1">',
'<span class="' + className + '-number">2.1.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 2.1</span>',
'</a>',
'</li>',
'</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_3">',
'<span class="' + className + '-number">3.</span> ', // list_number enabled
'<span class="' + className + '-text">Title should escape &amp;, &lt;, &#39;, and &quot;</span>',
'</a>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_4">',
'<span class="' + className + '-number">4.</span> ', // list_number enabled
'<span class="' + className + '-text">Chapter 1 should be printed to toc</span>',
'</a>',
'</li>',
'</ol>'
].join('');

toc(html, { max_items: 8}).should.eql(expected); // Maximum number 8 can display up to `h2`
toc(html, { max_items: 9}).should.eql(expected); // Maximum number 10 is required to display up to `h3`
});

it('max_items - result of h1 was truncated', () => {
const className = 'toc';
const expected = [
'<ol class="' + className + '">',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_1">',
'<span class="' + className + '-number">1.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 1</span>',
'</a>',
// '<ol class="' + className + '-child">',
// <!-- h2 is truncated -->
// '</ol>',
'</li>',
'<li class="' + className + '-item ' + className + '-level-1">',
'<a class="' + className + '-link" href="#title_2">',
'<span class="' + className + '-number">2.</span> ', // list_number enabled
'<span class="' + className + '-text">Title 2</span>',
'</a>',
'</li>',
// <!-- `h1` is truncated from the end -->
'</ol>'
].join('');

toc(html, { max_items: 2}).should.eql(expected); // `h1` is truncated from the end
});
});
Loading