Skip to content

init: add skip-to-main-content shortcut#7390

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
yaten2302 wants to merge 13 commits into from
Closed

init: add skip-to-main-content shortcut #7390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bfd4bbd
init: add skip-to-main-content shortcut
yaten2302 Jan 7, 2025
85e3e14
fix imports in withNavBar.tsx
yaten2302 Jan 7, 2025
af3799a
added classNames lib
yaten2302 Jan 7, 2025
0c9c1b5
made skipToContent button CSS-only
yaten2302 Jan 7, 2025
9f14df0
Merge branch 'nodejs:main' into main
yaten2302 Jan 10, 2025
0b24e44
changed classNameOnTabPress to skipToContent
yaten2302 Jan 10, 2025
c05f0b9
Merge branch 'nodejs:main' into main
yaten2302 Jan 11, 2025
b5f2322
Merge branch 'nodejs:main' into main
yaten2302 Jan 15, 2025
536bfd7
added skipToContent in withLayout.tsx
yaten2302 Jan 15, 2025
61d34c8
Merge branch 'nodejs:main' into main
yaten2302 Jan 16, 2025
db8543f
added appropriate class to <a/> tag
yaten2302 Jan 16, 2025
2a465e3
updated skitToContent classname
yaten2302 Jan 22, 2025
2233341
minor: remove custom className skipToContent
yaten2302 Jan 24, 2025
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
5 changes: 4 additions & 1 deletion apps/site/components/Common/Button/index.module.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.button {
@apply px-4.5
relative
inline-flex
items-center
justify-center
Expand All@@ -14,6 +13,10 @@
@apply size-5;
}

.button:not(.skipToContent) {
@apply relative; /* Only apply `relative` when NOT `skipToContent` */
}

&[aria-disabled='true'] {
@apply cursor-not-allowed;
}
Expand Down
3 changes: 3 additions & 0 deletions apps/site/components/withLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,8 @@ import LearnLayout from '@/layouts/Learn';
import PostLayout from '@/layouts/Post';
import type { Layouts } from '@/types';

import WithNavBar from './withNavBar';

const layouts = {
about: AboutLayout,
home: GlowingBackdropLayout,
Expand All@@ -19,6 +21,7 @@ const layouts = {
'blog-category': BlogLayout,
download: DownloadLayout,
article: ArticlePageLayout,
skipToContent: WithNavBar,

@canerakdascanerakdasJan 23, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I don't think skipToContent is a page layout, IMO it is a feature in layouts

@yaten2302yaten2302Jan 24, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Someone mentioned about this in previous suggestions, that it needs to be added in withLayout.tsx, should I remove this?

@canerakdascanerakdasJan 25, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think you are talking about this comment; #7390 (comment)

@araujogui As far as I understand, the suggestion is to move the skip to content button here, not add it as a layout right? 🤔

@yaten2302yaten2302Jan 25, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Yes, saying about this 👍

@araujoguiaraujoguiJan 27, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think you are talking about this comment; #7390 (comment)

@araujogui As far as I understand, the suggestion is to move the skip to content button here, not add it as a layout right? 🤔

Yep, that's what I meant

} satisfies Record<Layouts, FC>;

type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
Expand Down
12 changes: 11 additions & 1 deletion apps/site/components/withNavBar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
'use client';

import { useLocale } from 'next-intl';
import { useLocale, useTranslations } from 'next-intl';
import { useTheme } from 'next-themes';
import type { FC } from 'react';
Comment thread
yaten2302 marked this conversation as resolved.

Expand All@@ -10,19 +10,29 @@ import { useSiteNavigation } from '@/hooks';
import { useRouter, usePathname } from '@/navigation.mjs';
import { availableLocales } from '@/next.locales.mjs';

import Button from './Common/Button';

const WithNavBar: FC = () => {
const { navigationItems } = useSiteNavigation();
const { resolvedTheme, setTheme } = useTheme();
const { replace } = useRouter();
const pathname = usePathname();

const locale = useLocale();
const t = useTranslations();

const toggleCurrentTheme = () =>
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');

return (
<div>
<Button
className="absolute left-3 top-3 -translate-y-16 focus:translate-y-0"
href="#main"
>
{t('components.containers.navBar.links.skipToContent')}
</Button>

<WithBanner section="index" />

<NavBar
Expand Down
3 changes: 2 additions & 1 deletion apps/site/types/layouts.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,4 +6,5 @@ export type Layouts =
| 'blog-category'
| 'blog-post'
| 'download'
| 'article';
| 'article'
| 'skipToContent';

@canerakdascanerakdasJan 23, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Similarly, IMO there should be no skip to content layout

3 changes: 2 additions & 1 deletion packages/i18n/locales/en.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,8 @@
"security": "Security",
"certification": "Certification",
"blog": "Blog",
"contribute": "Contribute"
"contribute": "Contribute",
"skipToContent": "Skip to content"
}
}
},
Expand Down