diff --git a/package.json b/package.json index e12f2aa46..e47c10ff7 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "retext": "^7.0.1", "retext-smartypants": "^4.0.0", "rss": "^1.2.2", - "tailwindcss": "^3.0.22", + "tailwindcss": "^3.3.2", "typescript": "^4.0.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 8eead2302..e64b486d1 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -17,10 +17,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { + className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline"> {crumb.title} - + diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 53bde1326..714cccd82 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.tsx @@ -7,7 +7,12 @@ import cn from 'classnames'; export const IconArrow = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconArrow({displayDirection, className, ...rest}) { return ( @@ -20,6 +25,7 @@ export const IconArrow = memo< {...rest} className={cn(className, { 'rotate-180': displayDirection === 'right', + 'rotate-180 rtl:rotate-0': displayDirection === 'end', })}> diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index cf85988d2..6653dc387 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -7,11 +7,17 @@ import cn from 'classnames'; export const IconArrowSmall = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconArrowSmall({displayDirection, className, ...rest}) { const classes = cn(className, { 'rotate-180': displayDirection === 'left', + 'rotate-180 rtl:rotate-0': displayDirection === 'start', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx index 1184d77d2..4d40330ce 100644 --- a/src/components/Icon/IconChevron.tsx +++ b/src/components/Icon/IconChevron.tsx @@ -7,7 +7,12 @@ import cn from 'classnames'; export const IconChevron = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'up' | 'down' | 'left' | 'right'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconChevron({className, displayDirection}) { const classes = cn( @@ -16,6 +21,8 @@ export const IconChevron = memo< 'rotate-90': displayDirection === 'left', 'rotate-180': displayDirection === 'up', '-rotate-90': displayDirection === 'right', + 'rotate-90 rtl:-rotate-90': displayDirection === 'start', + '-rotate-90 rtl:rotate-90': displayDirection === 'end', }, className ); diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx index 93eed6e3c..f61175e9b 100644 --- a/src/components/Icon/IconNavArrow.tsx +++ b/src/components/Icon/IconNavArrow.tsx @@ -7,15 +7,22 @@ import cn from 'classnames'; export const IconNavArrow = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'right' | 'down' | 'left'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'down'; } ->(function IconNavArrow({displayDirection = 'right', className}) { +>(function IconNavArrow({displayDirection = 'start', className}) { const classes = cn( 'duration-100 ease-in transition', { 'rotate-0': displayDirection === 'down', - '-rotate-90': displayDirection === 'right', 'rotate-90': displayDirection === 'left', + '-rotate-90': displayDirection === 'right', + 'rotate-90 rtl:-rotate-90': displayDirection === 'start', + '-rotate-90 rtl:rotate-90': displayDirection === 'end', }, className ); diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 6bb8a4aac..2bf9afe57 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = useState(false); return (
-

+

{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}

{!isSubmitted && ( diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 0bf6f349c..1b961e9c6 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -58,10 +58,10 @@ export function SidebarLink({ passHref aria-current={selected ? 'page' : undefined} className={cn( - 'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between', + 'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between', { - 'text-sm pl-6': level > 0, - 'pl-5': level < 2, + 'text-sm ps-6': level > 0, + 'ps-5': level < 2, 'text-base font-bold': level === 0, 'text-primary dark:text-primary-dark': level === 0 && !selected, 'text-base text-secondary dark:text-secondary-dark': @@ -85,11 +85,11 @@ export function SidebarLink({ {isExpanded != null && !hideArrow && ( - + )} diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index fa920ad9d..9a0dd23f5 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -155,12 +155,12 @@ export function SidebarRouteTree({ {index !== 0 && (
  • )}

    {sectionHeader} diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx index 525fddfb4..702ff5b5a 100644 --- a/src/components/Layout/SidebarNav/SidebarNav.tsx +++ b/src/components/Layout/SidebarNav/SidebarNav.tsx @@ -45,7 +45,7 @@ export default function SidebarNav({

    • -
    +
    diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 3195bbe8f..21ab31e7c 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -202,6 +202,7 @@ const CodeBlock = function CodeBlock({ return (
    -
    +

    {children}

    diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index de6201b6a..5683d6dcf 100644 --- a/src/components/MDX/ConsoleBlock.tsx +++ b/src/components/MDX/ConsoleBlock.tsx @@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { } return ( -
    +
    @@ -48,8 +48,8 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { Console
    - - + +
    diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index f8c61785e..c46898026 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -75,7 +75,7 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { )}>

    {variant.title}

    diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 1ad1e0313..1e709e483 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -70,13 +70,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { })}> {isDeepDive && ( <> - + Deep Dive )} {isExample && ( <> - + Example )} @@ -98,7 +98,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { isExample, })} onClick={() => setIsExpanded((current) => !current)}> - + {isExpanded ? 'Hide Details' : 'Show Details'} diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx index 707e5e3ca..50e209e74 100644 --- a/src/components/MDX/Heading.tsx +++ b/src/components/MDX/Heading.tsx @@ -39,7 +39,7 @@ const Heading = forwardRefWithAs(function Heading( height="1em" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg" - className="text-gray-70 ml-2 h-5 w-5"> + className="text-gray-70 ms-2 h-5 w-5"> diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx index 4a87c2a53..d206e9888 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.tsx @@ -13,6 +13,7 @@ function InlineCode({ }: JSX.IntrinsicElements['code'] & InlineCodeProps) { return ( in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` className={cn( 'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline', { diff --git a/src/components/MDX/MDXComponents.module.css b/src/components/MDX/MDXComponents.module.css index 9840e77ce..e3ed413e0 100644 --- a/src/components/MDX/MDXComponents.module.css +++ b/src/components/MDX/MDXComponents.module.css @@ -8,11 +8,11 @@ } .markdown ol { - @apply mb-4 ml-8 list-decimal; + @apply mb-4 ms-8 list-decimal; } .markdown ul { - @apply mb-4 ml-8 list-disc; + @apply mb-4 ms-8 list-disc; } .markdown h1 { @@ -30,7 +30,7 @@ } .markdown code { - @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; + @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; font-size: 90%; } diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index f2c792cb9..a35a15147 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => ( ); const OL = (p: JSX.IntrinsicElements['ol']) => ( -
      +
        ); const LI = (p: JSX.IntrinsicElements['li']) => (
      1. ); const UL = (p: JSX.IntrinsicElements['ul']) => ( -
          +
            ); const Divider = () => ( @@ -127,7 +127,7 @@ function LearnMore({ href={path} type="primary"> Read More - + ) : null}
    @@ -141,7 +141,7 @@ function ReadBlogPost({path}: {path: string}) { return ( Read Post - + ); } @@ -195,7 +195,7 @@ function AuthorCredit({ }) { return (
    -

    +

    Illustrated by{' '} {authorLink ? ( @@ -407,7 +407,7 @@ export const MDXComponents = { return children; }, MaxWidth({children}: {children: any}) { - return

    {children}
    ; + return
    {children}
    ; }, Pitfall, Deprecated, diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx index 23194c870..85daee1f8 100644 --- a/src/components/MDX/Sandpack/Console.tsx +++ b/src/components/MDX/Sandpack/Console.tsx @@ -162,7 +162,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => { className="flex items-center p-1" onClick={() => setIsExpanded(!isExpanded)}> - Console ({logs.length}) + Console ({logs.length}) ); } diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 27ae43c0d..1392ea7dd 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -138,7 +138,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // space that's taken by the (invisible) tab list.
    {isMultiFile && showDropdown && ( - + {visibleFiles.map((filePath: string) => ( {({active}) => ( @@ -180,7 +180,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
    diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx index 42a2d2743..f943ee6ff 100644 --- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx +++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx @@ -8,10 +8,10 @@ import {IconNewPage} from '../../Icon/IconNewPage'; export const OpenInCodeSandboxButton = () => { return ( diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx index 1ac413138..243ce2349 100644 --- a/src/components/MDX/Sandpack/ResetButton.tsx +++ b/src/components/MDX/Sandpack/ResetButton.tsx @@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) { onClick={onReset} title="Reset Sandbox" type="button"> - Reset + Reset ); } diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index 043daf9b1..f710f8fe0 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -62,7 +62,7 @@ code { } ul { - padding-left: 20px; + padding-inline-start: 20px; } `.trim(); @@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) { }; return ( -
    +
    (
    -
    +
    {code}
    diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index 0db067e10..da2dc4535 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -53,7 +53,7 @@ export function TeamMember({ className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative"> {name}
    -
    +

    {name}

    @@ -61,23 +61,23 @@ export function TeamMember({ {children}
    {twitter && ( -
    +
    - + {twitter}
    )} {github && ( -
    +
    - {github} + {github}
    )} @@ -86,7 +86,7 @@ export function TeamMember({ aria-label="Personal Site" href={`https://${personal}`} className="hover:text-primary dark:text-primary-dark flex flex-row items-center"> - {personal} + {personal} )}
    diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index 161e483b1..fc13af338 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -17,9 +17,9 @@ interface TerminalBlockProps { function LevelText({type}: {type: LogLevel}) { switch (type) { case 'warning': - return Warning: ; + return Warning: ; case 'error': - return Error: ; + return Error: ; default: return null; } @@ -55,22 +55,25 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
    - Terminal + Terminal
    -
    +
    {message}
    diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx index 839876029..d46a70277 100644 --- a/src/components/MDX/YouWillLearnCard.tsx +++ b/src/components/MDX/YouWillLearnCard.tsx @@ -29,7 +29,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) { size="md" label={title}> Read More - +
    diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 9c411fd34..b6437b46b 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -28,7 +28,7 @@ function PageHeading({ }: PageHeadingProps) { return (
    -
    +
    {breadcrumbs ? : null}

    {title} diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx index 826119c14..e980b6f4d 100644 --- a/src/components/SocialBanner.tsx +++ b/src/components/SocialBanner.tsx @@ -37,7 +37,7 @@ export default function SocialBanner() { )}>
    {bannerText}
    🇺🇦
    {bannerLinkText} diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 7033e030a..2e63a81f6 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -37,7 +37,7 @@ interface TagProps { function Tag({text, variant, className}: TagProps) { const {name, classes} = variantMap[variant]; return ( - + { return ( - +