3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-26 21:18:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

add to theme classic

Browse source
This commit is contained in:
Sanjaiyan Parthipan 2022-09-19 02:14:27 +05:30 • committed by GitHub
parent a077afa577
commit 3a5e77417e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/docusaurus/src/client/exports/RouteAnnouncer.tsx → packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/index.tsx
View file

@ -1,20 +1,8 @@
import React from "react"; import React from "react";
import {useLocation} from "@docusaurus/router"; import {useLocation} from "@docusaurus/router";
import styles from './styles.module.css';
const docusaurusjsRouteAnnouncerStyles: React.CSSProperties = { const RouteAnnouncer = React.memo(() => {
border: 0,
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: 0,
position: "absolute",
width: "1px",
whiteSpace: "nowrap",
wordWrap: "normal",
};
export const RouteAnnouncer = React.memo(() => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const [routeAnnouncement, setRouteAnnouncement] = React.useState(""); const [routeAnnouncement, setRouteAnnouncement] = React.useState("");
const previouslyLoadedPath = React.useRef(pathname); const previouslyLoadedPath = React.useRef(pathname);
@ -38,7 +26,7 @@ export const RouteAnnouncer = React.memo(() => {
aria-live="assertive" aria-live="assertive"
id="__docusaurus-route-announcer__" id="__docusaurus-route-announcer__"
role="alert" role="alert"
style={docusaurusjsRouteAnnouncerStyles} style={styles.docusaurusjsRouteAnnouncerStyles}
> >
{routeAnnouncement} {routeAnnouncement}
</p> </p>

12
packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/styles.module.css Normal file
View file

@ -0,0 +1,12 @@
.docusaurusjsRouteAnnouncerStyles {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
word-wrap: normal;
}

2
packages/docusaurus/src/client/App.tsx
View file

@ -19,7 +19,6 @@ import {DocusaurusContextProvider} from './docusaurusContext';
import PendingNavigation from './PendingNavigation'; import PendingNavigation from './PendingNavigation';
import BaseUrlIssueBanner from './BaseUrlIssueBanner'; import BaseUrlIssueBanner from './BaseUrlIssueBanner';
import SiteMetadataDefaults from './SiteMetadataDefaults'; import SiteMetadataDefaults from './SiteMetadataDefaults';
import RouteAnnouncer from './exports/RouteAnnouncer';
// TODO, quick fix for CSS insertion order // TODO, quick fix for CSS insertion order
// eslint-disable-next-line import/order // eslint-disable-next-line import/order
@ -39,7 +38,6 @@ export default function App(): JSX.Element {
<PendingNavigation location={normalizeLocation(location)}> <PendingNavigation location={normalizeLocation(location)}>
{routeElement} {routeElement}
</PendingNavigation> </PendingNavigation>
<RouteAnnouncer />
</Root> </Root>
</BrowserContextProvider> </BrowserContextProvider>
</DocusaurusContextProvider> </DocusaurusContextProvider>