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

Add handling for details & summary tags (collapsible sections) #1567

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

kravhen
Copy link
Contributor

@kravhen kravhen commented Nov 10, 2024

Description

PR to solve #1422
Handles <details> and <summary> tags to allow for users to have collapsible sections in text.
Behavior is close to 1:1 with that of Github's handling.
Minor differences:

  • on github, you need a blank line (\n\n) to have a proper newline in the resulting text. In this implementation, all newlines are handled (\n).
  • on github, markdown inside <details> is not handled. In this implementation, it is.

Screenshots

The following text showing different structures will render as pictured on subsequent image:

Structure 1:

<details>no summary tags
lorem ipsum
and text on a new line</details>

----------

Structure 2:

<details>
<summary>text inside summary</summary>
lorem ipsum
</details>

----------

Structure 3:

<details>
    <summary>summary indentation single line</summary>
1. first thing
2. second thing 
3. third thing
</details>

----------

Structure 4:

<details>
  <summary>
    summary text here
  </summary>
  text inside details with *markdown* working **properly**
</details>

----------

Structure 5:

<details>
<summary>Shopping list</summary>
- Vegetables
- Fruits
- Fish
</details>

image

Additional Context

I was able to get it to work very close to github-like behavior without the additional imports of

import { fromMarkdown } from 'mdast-util-from-markdown'
import { toHast } from 'mdast-util-to-hast'

except I couldn't get inner lists and inner markdown to work, noting that markdown does not work inside <details> on github, but lists do.

Checklist

Are your changes backwards compatible? Please answer below:
Yes. Existing tags (though unlikely to have been used since they were not handled and would appear as plain text) will now render properly.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7/10
Tested a variety of markdown inside <details> and various ways of structuring the tags: all tags on one line, a few lines, indentations, etc.
It works in bios.
Tags remain as plaintext in post titles as expected.
Will QA some more while in draft.

For frontend changes: Tested on mobile? Please answer below:
Yes. Works on mobile as expected.

Did you introduce any new environment variables? If so, call them out explicitly here:
No.

DRAFT

Creating this as draft for now for the following reasons:

  • I would make a pass over styling to try to spruce it up a little visually, keeping consistent with the site's color scheme. I'm not a designer though so I'd try to make it slick but keep it subtle, simple.
  • I can try to make newlines work as on github while keeping the markdown processing functionality, but am welcoming feedback if we rather it be truly 1:1 with behavior on github and forget markdown inside the tags.
  • While merging this, I could also, if maintainers want, add a commit with the initial <spoiler> solution. That solution was little additional code and lean, leveraging the stylers already used for <sub> and <sup>. The use cases could be also be different. A spoiler for someone who wants to hide the winner of a sports match or a character dying in a show. The <details>/<summary> tags for breaking down bigger posts into smaller chunks or chapters, or also to hide answers like @SouthKoreaLN wished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant