Skip to content

Commit 819518c

Browse files
AhmedBasetAhmedBaset
authored
RTL Languages Support (#6138)
* Update TailwindCSS & Install rtl-detect 1- Update TailwindCSS to use the logical properities such as `ps-1` instead of `pl-1`. there are logical properities for margin, padding, inset, and text direction. 2- Install `rtl-detect` detect if the language is RTL direction. Note: this might be uninstalled if we use the manual way to specify rtl language. * add `siteConfig.isRTL` * add `dir` attribute to the root element * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * Refactor TW classes: Use logical properties over directional properties. * Revert "Refactor TW classes: Use logical properties over directional properties." This reverts commit df9620d. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Add `start` and `end` directions to the `IconNavArrow` * Add Note about `isRTL` prop * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set dir attr of `CodeBlock` to `ltr` even the page dir is `rtl` * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Add `start` and `end` directions to some icons * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set dir attr of `ConsoleBlock` to `ltr` to overwrite the dir of root element * Refactor TW classes: use logical properties over directional properties * set dir=ltr on inline code blocks to overwrite <html dir="rtl"> in some languages * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set translate=no, dir=ltr on `TerminalBlock` to overwrite <html dir="rtl"> in rtl languages * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * fix some direction styles * fix arrow directions in rtl * remove `rtl-detect` and set `siteConfig.isRTL` manually * fix `Breadcrumbs`'s arrow direction in rtl languages * fix some directions of the search modal for RTL languages * hard setting dir=ltr to Sandpack to overwrite rtl languages dir * Refactor TW classes: use logical properties over directional properties * remove my notes * fix: rerverse space-x-* in rtl * rebase with the main branch * remove unnecessary alt * add `start` & `end` display directions to the Chevron Icon * rebase with the main branch
1 parent 79560d6 commit 819518c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+417
-266
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"retext": "^7.0.1",
9393
"retext-smartypants": "^4.0.0",
9494
"rss": "^1.2.2",
95-
"tailwindcss": "^3.0.22",
95+
"tailwindcss": "^3.3.2",
9696
"typescript": "^4.0.2",
9797
"unist-util-visit": "^2.0.3",
9898
"webpack-bundle-analyzer": "^4.5.0"

‎src/components/Breadcrumbs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
1717
<Fragment key={crumb.path}>
1818
<Link
1919
href={crumb.path}
20-
className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
20+
className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline">
2121
{crumb.title}
2222
</Link>
23-
<span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
23+
<span className="inline-block me-1 text-link dark:text-link-dark text-lg rtl:rotate-180">
2424
<svg
2525
width="20"
2626
height="20"

‎src/components/DocsFooter.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ function FooterLink({
7171
className={cn(
7272
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
7373
{
74-
'flex-row-reverse justify-self-end text-right': type === 'Next',
74+
'flex-row-reverse justify-self-end text-end': type === 'Next',
7575
}
7676
)}>
7777
<IconNavArrow
7878
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
79-
displayDirection={type === 'Previous' ? 'left' : 'right'}
79+
displayDirection={type === 'Previous' ? 'start' : 'end'}
8080
/>
8181
<span>
8282
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">

‎src/components/Icon/IconArrow.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import cn from 'classnames';
77

88
export const IconArrow = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'left' | 'right' | 'up' | 'down';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconArrow({displayDirection, className, ...rest}) {
1318
return (
@@ -20,6 +25,7 @@ export const IconArrow = memo<
2025
{...rest}
2126
className={cn(className, {
2227
'rotate-180': displayDirection === 'right',
28+
'rotate-180 rtl:rotate-0': displayDirection === 'end',
2329
})}>
2430
<path fill="none" d="M0 0h24v24H0z" />
2531
<path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />

‎src/components/Icon/IconArrowSmall.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,17 @@ import cn from 'classnames';
77

88
export const IconArrowSmall = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'left' | 'right' | 'up' | 'down';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconArrowSmall({displayDirection, className, ...rest}) {
1318
const classes = cn(className, {
1419
'rotate-180': displayDirection === 'left',
20+
'rotate-180 rtl:rotate-0': displayDirection === 'start',
1521
'rotate-90': displayDirection === 'down',
1622
});
1723
return (

‎src/components/Icon/IconChevron.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import cn from 'classnames';
77

88
export const IconChevron = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'up' | 'down' | 'left' | 'right';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconChevron({className, displayDirection}) {
1318
const classes = cn(
@@ -16,6 +21,8 @@ export const IconChevron = memo<
1621
'rotate-90': displayDirection === 'left',
1722
'rotate-180': displayDirection === 'up',
1823
'-rotate-90': displayDirection === 'right',
24+
'rotate-90 rtl:-rotate-90': displayDirection === 'start',
25+
'-rotate-90 rtl:rotate-90': displayDirection === 'end',
1926
},
2027
className
2128
);

‎src/components/Icon/IconNavArrow.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,22 @@ import cn from 'classnames';
77

88
export const IconNavArrow = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'right' | 'down' | 'left';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'down';
1116
}
12-
>(function IconNavArrow({displayDirection = 'right', className}) {
17+
>(function IconNavArrow({displayDirection = 'start', className}) {
1318
const classes = cn(
1419
'duration-100 ease-in transition',
1520
{
1621
'rotate-0': displayDirection === 'down',
17-
'-rotate-90': displayDirection === 'right',
1822
'rotate-90': displayDirection === 'left',
23+
'-rotate-90': displayDirection === 'right',
24+
'rotate-90 rtl:-rotate-90': displayDirection === 'start',
25+
'-rotate-90 rtl:rotate-90': displayDirection === 'end',
1926
},
2027
className
2128
);

‎src/components/Layout/Feedback.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
6262
const [isSubmitted, setIsSubmitted] = useState(false);
6363
return (
6464
<div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
65-
<p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
65+
<p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
6666
{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
6767
</p>
6868
{!isSubmitted && (
6969
<button
7070
aria-label="Yes"
71-
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
71+
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
7272
onClick={() => {
7373
setIsSubmitted(true);
7474
onSubmit();

‎src/components/Layout/Footer.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function Footer() {
1515
return (
1616
<footer className={cn('text-secondary dark:text-secondary-dark')}>
1717
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto">
18-
<div className="col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left">
18+
<div className="col-span-2 md:col-span-1 justify-items-start mt-3.5">
1919
<ExternalLink
2020
href="https://opensource.fb.com/"
2121
aria-label="Meta Open Source">
@@ -280,7 +280,9 @@ export function Footer() {
280280
</div>
281281
</ExternalLink>
282282

283-
<div className="text-xs text-left mt-2 pr-0.5">
283+
<div
284+
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
285+
dir="ltr">
284286
&copy;{new Date().getFullYear()}
285287
</div>
286288
</div>

‎src/components/Layout/HomeContent.js

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,11 @@ const recentPosts = blogSidebar.routes.slice(0, 4).map((entry) => ({
113113
export function HomeContent() {
114114
return (
115115
<>
116-
<div className="pl-0">
116+
<div className="ps-0">
117117
<div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
118118
<Logo
119119
className={cn(
120-
'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm mr-0 flex origin-center transition-all ease-in-out'
120+
'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
121121
)}
122122
/>
123123
<h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
@@ -379,7 +379,7 @@ export function HomeContent() {
379379
more. They look and feel native because their UIs{' '}
380380
<i>are</i> truly native. It’s not a web view—your
381381
React components render real Android and iOS views
382-
provided by the platform.
382+
provided by the platform.
383383
</p>
384384
</div>
385385
</div>
@@ -406,7 +406,7 @@ export function HomeContent() {
406406
<Section background="right-card">
407407
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
408408
<div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
409-
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
409+
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
410410
<Header>Upgrade when the future is ready</Header>
411411
<Para>
412412
React approaches changes with care. Every React commit is
@@ -433,14 +433,14 @@ export function HomeContent() {
433433
<IconChevron />
434434
Latest React News
435435
</p>
436-
<div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
437-
<div className="flex-1 min-w-[40%]">
436+
<div className="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5">
437+
<div className="flex-1 min-w-[40%] text-start">
438438
<BlogCard {...recentPosts[0]} />
439439
</div>
440-
<div className="flex-1 min-w-[40%]">
440+
<div className="flex-1 min-w-[40%] text-start">
441441
<BlogCard {...recentPosts[1]} />
442442
</div>
443-
<div className="flex-1 min-w-[40%]">
443+
<div className="flex-1 min-w-[40%] text-start">
444444
<BlogCard {...recentPosts[2]} />
445445
</div>
446446
<div className="hidden sm:flex-1 sm:inline">
@@ -491,7 +491,7 @@ export function HomeContent() {
491491
<div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
492492
<Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
493493
<Header>
494-
Welcome to the <br className="" />
494+
Welcome to the <br className="hidden lg:inline" />
495495
React community
496496
</Header>
497497
<ButtonLink
@@ -524,7 +524,7 @@ function CTA({children, icon, href}) {
524524
className="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark">
525525
{icon === 'native' && (
526526
<svg
527-
className="mr-2.5 text-primary dark:text-primary-dark"
527+
className="me-2.5 text-primary dark:text-primary-dark"
528528
fill="none"
529529
width="24"
530530
height="24"
@@ -555,7 +555,7 @@ function CTA({children, icon, href}) {
555555
)}
556556
{icon === 'framework' && (
557557
<svg
558-
className="mr-2.5 text-primary dark:text-primary-dark"
558+
className="me-2.5 text-primary dark:text-primary-dark"
559559
fill="none"
560560
width="24"
561561
height="24"
@@ -578,7 +578,7 @@ function CTA({children, icon, href}) {
578578
)}
579579
{icon === 'code' && (
580580
<svg
581-
className="mr-2.5 text-primary dark:text-primary-dark"
581+
className="me-2.5 text-primary dark:text-primary-dark"
582582
fill="none"
583583
width="24"
584584
height="24"
@@ -607,7 +607,7 @@ function CTA({children, icon, href}) {
607607
)}
608608
{icon === 'news' && (
609609
<svg
610-
className="mr-2.5 text-primary dark:text-primary-dark"
610+
className="me-2.5 text-primary dark:text-primary-dark"
611611
fill="none"
612612
width="24"
613613
height="24"
@@ -623,7 +623,7 @@ function CTA({children, icon, href}) {
623623
)}
624624
{children}
625625
<svg
626-
className="text-primary dark:text-primary-dark"
626+
className="text-primary dark:text-primary-dark rtl:rotate-180"
627627
fill="none"
628628
width="24"
629629
height="24"
@@ -826,12 +826,12 @@ function ExampleLayout({
826826
}
827827
}, [activeArea, hoverTopOffset]);
828828
return (
829-
<div className="lg:pl-10 lg:pr-5 w-full">
829+
<div className="lg:ps-10 lg:pe-5 w-full">
830830
<div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
831-
<div className="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark">
831+
<div className="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark">
832832
<div className="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col">
833833
<div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5">
834-
<h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
834+
<h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">
835835
{filename}
836836
</h3>
837837
</div>
@@ -849,7 +849,7 @@ function ExampleLayout({
849849
{overlayStyles.map((styles, i) => (
850850
<div
851851
key={i}
852-
className="top-0 left-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
852+
className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
853853
style={styles}
854854
/>
855855
))}
@@ -1270,7 +1270,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
12701270
{hasRefresh && <div className="h-4 w-6" />}
12711271
<div className="w-full leading-snug flex flex-row items-center justify-center">
12721272
<svg
1273-
className="text-tertiary mr-1 opacity-60"
1273+
className="text-tertiary me-1 opacity-60"
12741274
width="12"
12751275
height="12"
12761276
viewBox="0 0 44 44"
@@ -1317,7 +1317,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
13171317
{restartId > 0 && (
13181318
<div
13191319
key={restartId}
1320-
className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 left-0"
1320+
className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 start-0"
13211321
style={{
13221322
animation: `progressbar ${loadTalksDelay + 100}ms ease-in-out`,
13231323
}}
@@ -1464,13 +1464,13 @@ function SearchInput({value, onChange}) {
14641464
Search
14651465
</label>
14661466
<div className="relative w-full">
1467-
<div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
1467+
<div className="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none">
14681468
<IconSearch className="text-gray-30 w-4" />
14691469
</div>
14701470
<input
14711471
type="text"
14721472
id={id}
1473-
className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
1473+
className="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base"
14741474
placeholder="Search"
14751475
value={value}
14761476
onChange={(e) => onChange(e.target.value)}
@@ -1499,7 +1499,7 @@ function ConferenceLayout({conf, children}) {
14991499
navigate(e.target.value);
15001500
});
15011501
}}
1502-
className="appearance-none pr-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
1502+
className="appearance-none pe-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
15031503
style={{
15041504
backgroundSize: '4px 4px, 4px 4px',
15051505
backgroundRepeat: 'no-repeat',
@@ -1565,9 +1565,11 @@ function Video({video}) {
15651565

15661566
function Code({children}) {
15671567
return (
1568-
<span className="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1">
1568+
<code
1569+
dir="ltr"
1570+
className="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">
15691571
{children}
1570-
</span>
1572+
</code>
15711573
);
15721574
}
15731575

@@ -1610,7 +1612,7 @@ function Thumbnail({video}) {
16101612
</div>
16111613
<div className="mt-1">
16121614
<span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
1613-
<Logo className="text-xs mr-1 w-4 h-4 text-link-dark" />
1615+
<Logo className="text-xs me-1 w-4 h-4 text-link-dark" />
16141616
React Conf
16151617
</span>
16161618
</div>

‎src/components/Layout/Page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
5050
content = <HomeContent />;
5151
} else {
5252
content = (
53-
<div className="pl-0">
53+
<div className="ps-0">
5454
<div
5555
className={cn(
5656
section === 'blog' && 'mx-auto px-0 lg:px-4 max-w-5xl'
@@ -124,7 +124,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
124124
)}>
125125
{showSidebar && (
126126
<div className="lg:-mt-16">
127-
<div className="lg:pt-16 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
127+
<div className="lg:pt-16 fixed lg:sticky top-0 start-0 end-0 py-0 shadow lg:shadow-none">
128128
<SidebarNav
129129
key={section}
130130
routeTree={routeTree}
@@ -166,8 +166,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
166166
target="_blank">
167167
Take our survey!
168168
<IconNavArrow
169-
displayDirection="right"
170-
className="inline ml-1"
169+
displayDirection="end"
170+
className="inline ms-1"
171171
/>
172172
</ButtonLink>
173173
</div>

0 commit comments

Comments
 (0)