Skip to content

feat(site): add numbers to SSHButton content for clarity #15661

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

Merged
merged 8 commits into from
Dec 12, 2024
Merged

feat(site): add numbers to SSHButton content for clarity #15661

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6335812
Add numbers to SSHButton content for clarity
benwinding Nov 26, 2024
e80c9a8
Use HTML `<li>` tags instead of numbering directly
benwinding Nov 28, 2024
ed7ba0d
Merge branch 'main' into add-numbers-to-ssh-button-content
matifali Dec 9, 2024
abf9abd
Fix helptext prop 🤦‍♂️
benwinding Dec 9, 2024
aca4b49
Declare props interface and destructure props
benwinding Dec 10, 2024
4ba6c1d
use `FC<T>` type from react
benwinding Dec 10, 2024
eddefc8
Merge remote-tracking branch 'upstream/main' into add-numbers-to-ssh-…
deansheather Dec 12, 2024
106aea7
Fix formatting
deansheather Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use HTML <li> tags instead of numbering directly
  • Loading branch information
@benwinding
benwinding committed Nov 28, 2024
commit e80c9a88da9d727f5c9ff0a33f7ebbc2fdd4b5d1
41 changes: 20 additions & 21 deletions site/src/modules/resources/SSHButton/SSHButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,28 +48,18 @@ export const SSHButton: FC<SSHButtonProps> = ({
Run the following commands to connect with SSH:
</HelpTooltipText>

<Stack spacing={0.5} css={styles.codeExamples}>
<div>
<HelpTooltipText>
<strong css={styles.codeExampleLabel}>
1. Configure SSH hosts on machine:
</strong>
</HelpTooltipText>
<CodeExample secret={false} code="coder config-ssh" />
</div>

<div>
<HelpTooltipText>
<strong css={styles.codeExampleLabel}>
2. Connect to the agent:
</strong>
</HelpTooltipText>
<CodeExample
secret={false}
code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
<ol style={{ margin: 0, padding: 0 }}>
<Stack spacing={0.5} css={styles.codeExamples}>
<SSHStep
helpText="Configure SSH hosts on machine:"
codeExample="coder config-ssh"
/>
<SSHStep
helpText="Connect to the agent:"
codeExample={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
/>
</div>
</Stack>
</Stack>
</ol>

<HelpTooltipLinksGroup>
<HelpTooltipLink href={docs("/install")}>
Expand All @@ -92,6 +82,15 @@ export const SSHButton: FC<SSHButtonProps> = ({
);
};

const SSHStep = (props: { helpText: string; codeExample: string }) => (
<li style={{ listStylePosition: "inside" }}>
<HelpTooltipText style={{ display: "inline" }}>
<strong css={styles.codeExampleLabel}>Connect to the agent:</strong>
</HelpTooltipText>
<CodeExample secret={false} code={props.codeExample} />
</li>
);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for reviewing @aslilac 🙏

Changed to use semantic HTML <li> tags (did it naively to reduce changes, but agree semantic html is better)

image


const classNames = {
paper: (css, theme) => css`
padding: 16px 24px 24px;
Expand Down
Loading