Skip to content

Add a link for creating a GitHub issue #205

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

Merged
merged 3 commits into from
May 9, 2025
Merged

Conversation

ptgott
Copy link
Contributor

@ptgott ptgott commented May 2, 2025

Closes #110

In the previous docs site (github.com/gravitational/docs), a "Create issue on GitHub button" was a valuable source of feedback. This change adds a link that opens a new tab with the GitHub Create Issue form, prepopulated with the URL path of the current docs page.

The best positioning for such a link is not obvious. In the previous docs site, we placed the button on the right sidebar under the table of contents for a given docs page. However, on the Docusaurus site, in-page tables of contents sometimes span the entire viewport height, e.g., in the main FAQ page with its 20 H2 headers, making a button on the right sidebar difficult to find.

Further, Docusaurus makes some styling assumptions about the right sidebar, like the fact that the TOCItems component includes a left border but the column containing it does not, that make it non-trivial to style a new component there. We would need to rework the styling of the entire right sidebar component layout.

The left sidebar is also not an ideal place to add this link, since it handles navigation for the entire docs site, and it would be unexpected to find a component there that is scoped to a single page.

The solution this change proposes is to add the GitHub issue link below the main title of each page, swizzling the @theme/DocItem/Content component. This approach requires minimal reworking of the Docusaurus component layout, but still offers users a highly visible option to report an issue that, if a user is not interested in reporting an issue, remains relatively unobtrusive.

This change adds a self-contained GitHubIssueLink component, and we can move this to a more suitable location (or turn it from a link into a button) when time opens up.

@ptgott ptgott temporarily deployed to docs-amplify May 2, 2025 16:47 — with GitHub Actions Inactive
Copy link

github-actions bot commented May 2, 2025

Amplify deployment status

Branch Commit Job ID Status Preview Updated (UTC)
paul.gottschling/110-github 5636965 13 ✅SUCCEED paul-gottschling-110-github 2025-05-09 17:33:16

@ptgott ptgott requested a review from roraback May 2, 2025 16:49
@ptgott ptgott marked this pull request as draft May 2, 2025 16:53
@ptgott ptgott force-pushed the paul.gottschling/110-github branch from f3466c5 to fc1a0b0 Compare May 2, 2025 16:59
@ptgott ptgott temporarily deployed to docs-amplify May 2, 2025 16:59 — with GitHub Actions Inactive
@ptgott ptgott marked this pull request as ready for review May 2, 2025 16:59
@ptgott ptgott force-pushed the paul.gottschling/110-github branch from fc1a0b0 to 3245937 Compare May 2, 2025 17:06
@ptgott ptgott temporarily deployed to docs-amplify May 2, 2025 17:06 — with GitHub Actions Inactive
@ptgott ptgott temporarily deployed to docs-amplify May 2, 2025 17:44 — with GitHub Actions Inactive
@ptgott ptgott force-pushed the paul.gottschling/110-github branch from 3245937 to a2fb3dc Compare May 7, 2025 20:05
@ptgott ptgott temporarily deployed to docs-amplify May 7, 2025 20:06 — with GitHub Actions Inactive
ptgott added 2 commits May 8, 2025 11:59
Closes #110

In the previous docs site (github.com/gravitational/docs), a "Create
issue on GitHub button" was a valuable source of feedback. This change
adds a link that opens a new tab with the GitHub Create Issue form,
prepopulated with the URL path of the current docs page.

The best positioning for such a link is not obvious. In the previous
docs site, we placed the button on the right sidebar under the table of
contents for a given docs page. However, on the Docusaurus site, in-page
tables of contents sometimes span the entire viewport height, e.g., in
the main FAQ page with its 20 H2 headers, making a button on the right
sidebar difficult to find.

Further, Docusaurus makes some styling assumptions about the right
sidebar, like the fact that the `TOCItems` component includes a left
border but the column containing it does not, that make it non-trivial
to style a new component there. We would need to rework the styling of
the entire right sidebar component layout.

The left sidebar is also not an ideal place to add this link, since it
handles navigation for the entire docs site, and it would be unexpected
to find a component there that is scoped to a single page.

The solution this change proposes is to add the GitHub issue link below
the main title of each page, swizzling the `@theme/DocItem/Content`
component. This approach requires minimal reworking of the Docusaurus
component layout, but still offers users a highly visible option to
report an issue that, if a user is not interested in reporting an issue,
remains relatively unobtrusive.

This change adds a self-contained `GitHubIssueLink` component, and we
can move this to a more suitable location (or turn it from a link into a
button) when time opens up.
Respond to roraback feedback.
@ptgott ptgott force-pushed the paul.gottschling/110-github branch from a2fb3dc to fea20cb Compare May 8, 2025 15:59
@ptgott ptgott temporarily deployed to docs-amplify May 8, 2025 16:00 — with GitHub Actions Inactive
Copy link

@roraback roraback left a comment

Choose a reason for hiding this comment

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

I recommend you make the tiny style changes in my comment, but good to go after that.

min-width: 0;
transition: color var(--t-interaction);
color: var(--ifm-font-color-base);
text-align: right;
Copy link

@roraback roraback May 9, 2025

Choose a reason for hiding this comment

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

I take it back. I think a better design choice is to left-align it (removing this style) and give it margin-top: -25px; so that it hugs the H1:
image
image

Left-align the link and include a smaller marging with the H1.
@ptgott ptgott temporarily deployed to docs-amplify May 9, 2025 17:16 — with GitHub Actions Inactive
@ptgott ptgott enabled auto-merge May 9, 2025 17:20
@ptgott ptgott added this pull request to the merge queue May 9, 2025
Merged via the queue into main with commit 3055d94 May 9, 2025
6 checks passed
@ptgott ptgott deleted the paul.gottschling/110-github branch May 9, 2025 17:44
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.

Add "Create issue on GitHub" button
2 participants