Yilialinn commented on code in PR #2113:
URL: https://github.com/apache/apisix-website/pull/2113#discussion_r3872154257
##########
website/src/pages/docs.tsx:
##########
@@ -31,7 +31,34 @@ const PageTitle = styled.h1`
`;
const PageSubtitle = styled.div`
- margin-bottom: 4rem;
+ max-width: 780px;
+ margin-bottom: 1.5rem;
+ font-size: 1.1rem;
+ line-height: 1.7;
+`;
+
+const TaskNav = styled.nav`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+`;
+
+const TaskLink = styled.a`
+ padding: 0.65rem 0.9rem;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 999px;
+ font-weight: 600;
+
+ &:hover {
+ text-decoration: none;
+ border-color: var(--ifm-color-primary);
+ }
Review Comment:
Fixed in c5df788. TaskLink now has a visible focus-visible outline, offset,
and primary-color border for keyboard navigation.
##########
website/src/pages/docs.tsx:
##########
@@ -187,8 +214,28 @@ const Docs: FC = () => {
<Translate id="docs.webpage.title.Document">Documentation</Translate>
</PageTitle>
<PageSubtitle>
- <Translate id="docs.webpage.title.DocumentSubtitle">We love open
source.</Translate>
+ <Translate id="docs.webpage.title.DocumentSubtitle">
+ Choose the Apache APISIX documentation set that matches your task.
Each card opens the
+ latest published documentation for that project.
+ </Translate>
</PageSubtitle>
+ <TaskNav aria-label={translate({ id: 'docs.taskNavigation.label',
message: 'Choose documentation by task' })}>
+ <TaskLink href="#apisix">
+ <Translate id="docs.taskNavigation.gateway">Start or operate
APISIX</Translate>
+ </TaskLink>
+ <TaskLink href="#ingress-controller">
+ <Translate id="docs.taskNavigation.kubernetes">Run APISIX on
Kubernetes</Translate>
+ </TaskLink>
+ <TaskLink href="#java-plugin-runner">
+ <Translate id="docs.taskNavigation.plugins">Choose an external
plugin runner</Translate>
+ </TaskLink>
+ </TaskNav>
Review Comment:
Fixed in c5df788. Each task entry now identifies its project by githubRepo,
then derives the anchor from that card's current nameInParamCase in the shared
docs data. Missing projects do not render a broken task link.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
