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

Jump to bottom

feat: add table of content on the home page, remove read docs link (r… #141

Merged
merged 15 commits into from
Aug 1, 2024
Merged

feat: add table of content on the home page, remove read docs link (r… #141

merged 15 commits into from
Aug 1, 2024

Conversation

YUUU23
Copy link
Contributor

@YUUU23 YUUU23 commented Jun 19, 2024

  • Add Table of Contents to the home page on the Honeycomb docs
    • add table_of_contents.mdx containing a list of table of content items with link to the relative pages
    • this is rendered as a component in src/pages/index.js under Home function
    • in src/pages/styles.module.css, styling applied to center the table of contents items
    • removed read the docs button as table of content links will take users to the same location

@YUUU23 YUUU23 self-assigned this Jun 19, 2024
@YUUU23 YUUU23 linked an issue Jun 19, 2024 that may be closed by this pull request
Add Table of Contents to home page #53
Closed
@YUUU23 YUUU23 requested a review from RobertGemmaJr June 19, 2024 02:51
@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 26, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 3797b0d):

https://ccv-honeycomb-docs--pr141-add-table-content-4xd47dkf.web.app

(expires Wed, 07 Aug 2024 20:14:42 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: d403a110fede5b0308678a87537bf61d0597aef6

RobertGemmaJr
RobertGemmaJr approved these changes Jul 10, 2024
View reviewed changes
Copy link
Member

@RobertGemmaJr RobertGemmaJr left a comment

Choose a reason for hiding this comment

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

Looks great! Let's pause on merging it in though - we can time it with our 3.4.1 release!

src/pages/styles.module.css Outdated Show resolved Hide resolved
@YUUU23 @RobertGemmaJr
combine nesting in css
134b689 
Co-authored-by: Robert Gemma <[email protected]>
RobertGemmaJr
RobertGemmaJr requested changes Jul 11, 2024
View reviewed changes
Copy link
Member

@RobertGemmaJr RobertGemmaJr left a comment

Choose a reason for hiding this comment

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

Just a little more styling cleanup for the table of contents! Remember, you can always look at the Firebase preview link to make sure it looks how it should

src/pages/styles.module.css Outdated
Comment on lines 60 to 74
/* ... The other nesting */
}

.TOC > ul > li {
margin-bottom: 1.5vh;
font-size: large;
}

.TOC > ul > li > ul {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
font-size: smaller;
}
Copy link
Member

Choose a reason for hiding this comment

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

Make sure you add these elements to the .TOC class! So it will look something like:

.TOC {
 /* styles */

  > ul {
    /* styles */
   
    > li {
      /* styles */
    
      > ul {
        /* styles */
      }
    }

  }
}

src/pages/styles.module.css Outdated
margin: 1.5vh 0;
padding: 0;

ul {
Copy link
Member

Choose a reason for hiding this comment

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

This still needs the >. It tells css to only style the immediate child of the .TOC class. Using it without the > will change the styling of any unordered list inside the .TOC class

Suggested change
ul {
> ul {

@YUUU23 YUUU23 requested a review from RobertGemmaJr July 12, 2024 14:02
RobertGemmaJr
RobertGemmaJr reviewed Jul 12, 2024
View reviewed changes
Copy link
Member

@RobertGemmaJr RobertGemmaJr left a comment

Choose a reason for hiding this comment

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

It looks like the issue has to do with the name of the class? If you take a look at the inspector in the preview link you can see more than just .TOC get's added to the class.

Try to see if you can figure out why that's happening, if it's not obvious then it may be best to re-write the table of contents as a JSX component rather than MDX

table_of_content.mdx Outdated
Comment on lines 2 to 4
id: table_of_content
slug: /tableofcontent
title: Table of Content
Copy link
Member

Choose a reason for hiding this comment

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

Can you rename these to be plural, e.g. "Table of Contents"

@YUUU23 YUUU23 requested a review from RobertGemmaJr July 17, 2024 14:41
RobertGemmaJr
RobertGemmaJr reviewed Jul 23, 2024
View reviewed changes
Copy link
Member

@RobertGemmaJr RobertGemmaJr left a comment

Choose a reason for hiding this comment

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

What do you think about splitting the table of contents into two rows? I think that may look nice but I'm not sure what the best place to split things is, let me know what you think!

components/TableOfContents.jsx Outdated Show resolved Hide resolved
table_of_contents.mdx Outdated
Copy link
Member

Choose a reason for hiding this comment

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

I believe this can be deleted now, correct?

@YUUU23
Copy link
Contributor Author

YUUU23 commented Jul 24, 2024

What do you think about splitting the table of contents into two rows? I think that may look nice but I'm not sure what the best place to split things is, let me know what you think!

here is a preview of what that may look like! I chose to split this in about the middle of the list. Let me know what you think! I think this definitely shrinks the vertical scrolling space and displays all the content of the document without the user scrolling too much. However, I think how the items are organized, the right column does look a little longer than the right.
image

@YUUU23 YUUU23 requested a review from RobertGemmaJr July 24, 2024 19:27
@RobertGemmaJr
Copy link
Member

However, I think how the items are organized, the right column does look a little longer than the right. image

Perhaps we can aligned the two columns at the top instead of in the center? I don't think having one side longer than the other is a huge issue (it's kinda unavoidable) but I think aligning it in the center may help

@YUUU23
Copy link
Contributor Author

YUUU23 commented Jul 26, 2024

can aligned the two columns at the top inste

Yes! here's what it looks like:
image

@YUUU23 YUUU23 requested review from RobertGemmaJr and removed request for RobertGemmaJr July 26, 2024 16:46
RobertGemmaJr
RobertGemmaJr approved these changes Jul 31, 2024
View reviewed changes
Copy link
Member

@RobertGemmaJr RobertGemmaJr left a comment

Choose a reason for hiding this comment

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

Love it! Thanks for sticking through all the little style changes 🚀

@YUUU23
Copy link
Contributor Author

YUUU23 commented Jul 31, 2024

Love it! Thanks for sticking through all the little style changes 🚀

No problem :) Should I merge this version then?

@YUUU23 YUUU23 requested a review from RobertGemmaJr July 31, 2024 20:18
@RobertGemmaJr
Copy link
Member

Yup! LGTM!

@YUUU23 YUUU23 merged commit 6e4e808 into main Aug 1, 2024
3 checks passed
@YUUU23 YUUU23 deleted the add-table-content branch August 1, 2024 22:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@RobertGemmaJr RobertGemmaJr RobertGemmaJr approved these changes

Assignees

@YUUU23 YUUU23

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add Table of Contents to home page
2 participants
@YUUU23 @RobertGemmaJr