SiteBanner: support RTL

src/features/landing-timeline/components/logo-text.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
-interface ILogoText {
+interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
   children: React.ReactNode;
 }
 
 /** Big text in site colors, for displaying the site name. Resizes itself according to the screen size. */
-const LogoText: React.FC<ILogoText> = ({ children }) => {
+const LogoText: React.FC<ILogoText> = ({ children, dir }) => {
   return (
-    <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:leading-none lg:text-6xl xl:text-7xl'>
+    <h1
+      className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:leading-none lg:text-6xl xl:text-7xl'
+      dir={dir}
+    >
       {children}
     </h1>
   );

src/features/landing-timeline/components/site-banner.tsx

@@ -3,19 +3,24 @@ import React from 'react';
 import Markup from 'soapbox/components/markup';
 import { Stack } from 'soapbox/components/ui';
 import { useInstance } from 'soapbox/hooks';
+import { getTextDirection } from 'soapbox/utils/rtl';
 
 import { LogoText } from './logo-text';
 
 const SiteBanner: React.FC = () => {
   const instance = useInstance();
+  const description = instance.short_description || instance.description;
 
   return (
     <Stack space={3}>
-      <LogoText>{instance.title}</LogoText>
+      <LogoText dir={getTextDirection(instance.title)}>
+        {instance.title}
+      </LogoText>
 
       <Markup
         size='lg'
-        dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
+        dangerouslySetInnerHTML={{ __html: description }}
+        direction={getTextDirection(description)}
       />
     </Stack>
   );