Skip to content

Display ctrl key in search bar for non-mac browsers #5202

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

Closed
wants to merge 5 commits into from
Closed

Display ctrl key in search bar for non-mac browsers #5202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e53df81
Display ctrl key in search bar for non-mac browsers
jirkavrba Oct 23, 2022
f94d627
Detect browser platform in an inline script
jirkavrba Nov 16, 2022
a827705
Fix passing wide to the underlying <kbd> element
jirkavrba Nov 16, 2022
d5b0eb8
Hide content specific to mac/win with data-platform
jirkavrba Nov 16, 2022
05107ef
Show appropriate search shortcut via data-platform
jirkavrba Nov 16, 2022
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
16 changes: 12 additions & 4 deletions beta/src/components/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,14 @@ function Hit({hit, children}: any) {
);
}

function Kbd(props: {children?: React.ReactNode}) {
function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
const {wide, ...rest} = props;
const width = wide ? 'w-12' : 'w-6';

return (
<kbd
className="h-6 w-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded"
{...props}
className={`${width} h-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded`}
{...rest}
/>
);
}
Expand Down Expand Up @@ -94,7 +97,9 @@ const options = {
apiKey: siteConfig.algolia.apiKey,
indexName: siteConfig.algolia.indexName,
};

let DocSearchModal: any = null;

export function Search({
searchParameters = {
hitsPerPage: 5,
Expand Down Expand Up @@ -160,7 +165,10 @@ export function Search({
<IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
Search
<span className="ml-auto hidden sm:flex item-center">
<Kbd>⌘</Kbd>
<Kbd data-platform="mac">⌘</Kbd>
<Kbd data-platform="win" wide>
Ctrl
</Kbd>
<Kbd>K</Kbd>
</span>
</button>
Expand Down
13 changes: 13 additions & 0 deletions beta/src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,19 @@ const MyDocument = () => {
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function () {
// Detect whether the browser is Mac to display either the ⌘ symbol or Ctrl in the search bar
document.documentElement.classList.add(
window.navigator.platform.includes('Mac')
? "platform-mac"
: "platform-win"
);
})();
`,
}}></script>
<Main />
<NextScript />
</body>
Expand Down
11 changes: 11 additions & 0 deletions beta/src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,17 @@
}
}

/**
* Hide all content that's relevant only to a specific platform
*/
html.platform-mac [data-platform='win'] {
display: none;
}

html.platform-win [data-platform='mac'] {
display: none;
}

.code-step * {
color: inherit !important;
}
Expand Down