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(theme): support dynamic headers and nesting in outline #1281

Merged
merged 4 commits into from Sep 5, 2022

Conversation

brc-dd
Copy link
Member

@brc-dd brc-dd commented Sep 4, 2022

Most of the nesting-related stuff is copied as is from #965. (Huge thanks to @fi3ework!)

fixes #785, fixes #954, closes #965


⚠️ For those who are using/extending the default theme:

This PR changes meaning of outline: deep -- earlier it meant [2, 3], now it means [2, 6]. (Some projects are using it although it was never documented.)

@brc-dd
Copy link
Member Author

brc-dd commented Sep 4, 2022

Looking at the generated files now, I believe we can significantly reduce the payload size if we disable headers. I mean just provide an option so users can do that (there is no need for them unless someone is doing custom stuff like in vuejs/theme). For backwards compatibility, let's keep it enabled by default. (See below.)

Example:

This is the result of our guide/markdown.md's lean build (~2.4KB):

import{_ as s,o as n,c as a,a as l}from"./chunks/framework.cacadd97.js";const C=JSON.parse('{"title":"Markdown Extensions","description":"","frontmatter":{},"headers":[{"level":2,"title":"Header Anchors","slug":"header-anchors","link":"#header-anchors","children":[]},{"level":2,"title":"Links","slug":"links","link":"#links","children":[{"level":3,"title":"Internal Links","slug":"internal-links","link":"#internal-links","children":[]},{"level":3,"title":"Page Suffix","slug":"page-suffix","link":"#page-suffix","children":[]},{"level":3,"title":"External Links","slug":"external-links","link":"#external-links","children":[]}]},{"level":2,"title":"Frontmatter","slug":"frontmatter","link":"#frontmatter","children":[]},{"level":2,"title":"GitHub-Style Tables","slug":"github-style-tables","link":"#github-style-tables","children":[]},{"level":2,"title":"Emoji \u{1F389}","slug":"emoji","link":"#emoji","children":[]},{"level":2,"title":"Table of Contents","slug":"table-of-contents","link":"#table-of-contents","children":[]},{"level":2,"title":"Custom Containers","slug":"custom-containers","link":"#custom-containers","children":[{"level":3,"title":"Default Title","slug":"default-title","link":"#default-title","children":[]},{"level":3,"title":"Custom Title","slug":"custom-title","link":"#custom-title","children":[]},{"level":3,"title":"raw","slug":"raw","link":"#raw","children":[]}]},{"level":2,"title":"Syntax Highlighting in Code Blocks","slug":"syntax-highlighting-in-code-blocks","link":"#syntax-highlighting-in-code-blocks","children":[]},{"level":2,"title":"Line Highlighting in Code Blocks","slug":"line-highlighting-in-code-blocks","link":"#line-highlighting-in-code-blocks","children":[]},{"level":2,"title":"Line Numbers","slug":"line-numbers","link":"#line-numbers","children":[]},{"level":2,"title":"Import Code Snippets","slug":"import-code-snippets","link":"#import-code-snippets","children":[]},{"level":2,"title":"Markdown File Inclusion","slug":"markdown-file-inclusion","link":"#markdown-file-inclusion","children":[]},{"level":2,"title":"Advanced Configuration","slug":"advanced-configuration","link":"#advanced-configuration","children":[]}],"relativePath":"guide/markdown.md","lastUpdated":1661916041000}'),e={name:"guide/markdown.md"},p=l("",123),o=[p];function t(c,r,i,d,y,D){return n(),a("div",null,o)}const g=s(e,[["render",t]]);export{C as __pageData,g as default};

We only need this (~350B) (also removed empty frontmatter and description, I guess they can be removed if empty while building and empty objects/arrays can be added when we load page data so that the components accessing them don't break):

import{_ as s,o as n,c as a,a as l}from"./chunks/framework.cacadd97.js";const C=JSON.parse('{"title":"Markdown Extensions","relativePath":"guide/markdown.md","lastUpdated":1661916041000}'),e={name:"guide/markdown.md"},p=l("",123),o=[p];function t(c,r,i,d,y,D){return n(),a("div",null,o)}const g=s(e,[["render",t]]);export{C as __pageData,g as default};

I just noticed that we can already do this:

  markdown: {
    headers: {
      level: [0, 0]
    }
  },

Done this, got around ~40KB reduction in size.

@brc-dd brc-dd merged commit 288aa48 into main Sep 5, 2022
@brc-dd brc-dd deleted the feat/dynamic-outline branch September 5, 2022 10:57
@LittleSound
Copy link
Member

I really need the functionality provided by the outline component fixed in this Pull Request, when will a new version of VitePress be released?

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

expose a configurable outline config in frontmatter Show dynamic headers in aside outline
2 participants