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

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

Merged
merged 5 commits into from
Jul 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f00bf65
feat(helper/toc): specify maximum number of items to output
KentarouTakeda May 5, 2024
c17db64
perf: skip evaluation if `max_items` is not specified
KentarouTakeda May 26, 2024
f8d04a6
perf: streamline getting min and max heading level
KentarouTakeda May 26, 2024
2507aa2
Merge branch 'master' into max-items-of-toc
uiolee Jun 25, 2024
628b975
Merge branch 'master' into max-items-of-toc
yoshinorin Jun 30, 2024
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
27 changes: 26 additions & 1 deletion lib/plugins/helper/toc.ts
View file
Open in desktop
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,27 @@ 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 || max_items === Infinity) {
return data;
}

const levels = data.map(item => item.level);
const min = Math.min(...levels);
const max = Math.max(...levels);

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
View file
Open in desktop
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