Skip to content

adding collapsible table of content - #118

Merged
1 commit merged into
masterfrom
toc-tree
Jun 15, 2026
Merged

adding collapsible table of content#118
1 commit merged into
masterfrom
toc-tree

Conversation

@ghost

@ghost ghost commented Feb 29, 2024

Copy link
Copy Markdown

fixes: #88

@ghost ghost self-assigned this Feb 29, 2024
@ghost ghost added the enhancement New feature or request label Feb 29, 2024
@ghost
ghost force-pushed the toc-tree branch 2 times, most recently from 7a729db to 0c5888c Compare February 29, 2024 11:24
@ghost
ghost force-pushed the toc-tree branch 2 times, most recently from ec875fa to 28ab91a Compare June 10, 2026 09:45
@ghost
ghost marked this pull request as ready for review June 10, 2026 09:52
@ghost
ghost self-requested a review June 10, 2026 09:52
@ghost ghost changed the title [wip] adding collapsible table of content adding collapsible table of content Jun 11, 2026
@ghost
ghost requested a review from Copilot June 11, 2026 08:57

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR implements a collapsible/nested Table of Contents for blog posts by converting the markdown heading list into a hierarchy and rendering it with a new recursive TOC component.

Changes:

  • Update getTableOfContent() to build a nested heading tree instead of returning a flat list.
  • Add a new recursive TOC.vue component to render collapsible heading sections and handle smooth scrolling.
  • Replace the old flat TOC rendering in ContentSidebar.vue with the new TOC component.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File Description
src/helpers/markdown.js Builds a hierarchical TOC structure from markdown heading tokens.
src/components/detail/TOC.vue New recursive, collapsible TOC renderer with scroll-to-heading behavior.
src/components/detail/ContentSidebar.vue Switches sidebar TOC rendering to use the new TOC component.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/helpers/markdown.js Outdated
Comment thread src/helpers/markdown.js Outdated
Comment thread src/helpers/markdown.js Outdated
Comment thread src/components/detail/ContentSidebar.vue Outdated
Comment thread src/components/detail/TOC.vue Outdated
@ghost
ghost force-pushed the toc-tree branch from ab2614a to ce9a6fb Compare June 11, 2026 09:16
@ghost
ghost requested a review from Copilot June 11, 2026 09:17

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comment thread src/components/detail/TOC.vue
Comment thread src/components/detail/TOC.vue Outdated
Comment thread src/components/detail/TOC.vue Outdated

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comment thread src/components/detail/TOC.vue Outdated

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comment thread src/components/detail/TOC.vue Outdated
Comment thread src/components/detail/TOC.vue Outdated
Comment thread src/helpers/markdown.js Outdated
@ghost
ghost force-pushed the toc-tree branch from 72101e8 to 7917347 Compare June 11, 2026 10:45

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/components/detail/ContentSidebar.vue:30

  • toc is validated as a required Array, but it can be null during initial render (the post view initializes toc as ref(null) until the markdown is loaded). This triggers Vue prop validation warnings and is avoidable by providing a default [].
defineProps({
  toc: {
    type: Array,
    required: true
  },

Comment thread src/components/detail/TOC.vue Outdated
Comment thread src/components/detail/TOC.vue
Comment thread src/components/detail/TOC.vue

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@PrajwolAmatya PrajwolAmatya left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The line spacing looks inconsistent. Also on the 5th point of TOC the toogle button is smaller compared to others.

Image Image

@ghost
ghost force-pushed the toc-tree branch 2 times, most recently from 310dc9c to 601b823 Compare June 12, 2026 08:41
@ghost
ghost requested a review from PrajwolAmatya June 12, 2026 08:42

@PrajwolAmatya PrajwolAmatya left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@ghost
ghost force-pushed the toc-tree branch from 601b823 to 59433fb Compare June 15, 2026 10:34
Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix(TOC): add name option, rename class to toc--item for sidebar styling
@ghost
ghost force-pushed the toc-tree branch from 59433fb to 417ac9b Compare June 15, 2026 10:35
@ghost
ghost merged commit dac73a7 into master Jun 15, 2026
1 check passed
@ghost
ghost deleted the toc-tree branch June 15, 2026 10:36
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat] Collapsible table of content headings

4 participants