feat: RTL option to RSS widget (#1247)

homarr-labs · Oct 21, 2024 · 9a7e845 · 9a7e845
1 parent 564096e
commit 9a7e845
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 2 deletions.
diff --git a/packages/old-import/src/widgets/definitions/rss.ts b/packages/old-import/src/widgets/definitions/rss.ts
@@ -4,6 +4,7 @@ export type OldmarrRssDefinition = CommonOldmarrWidgetDefinition<
   "rss",
   {
     rssFeedUrl: string[];
+    enableRtl: boolean;
     refreshInterval: number;
     dangerousAllowSanitizedItemContent: boolean;
     textLinesClamp: number;

diff --git a/packages/old-import/src/widgets/options.ts b/packages/old-import/src/widgets/options.ts
@@ -82,6 +82,7 @@ const optionMapping: OptionMapping = {
   },
   rssFeed: {
     feedUrls: (oldOptions) => oldOptions.rssFeedUrl,
+    enableRtl: (oldOptions) => oldOptions.enableRtl,
     maximumAmountPosts: (oldOptions) => oldOptions.maximumAmountOfPosts,
     textLinesClamp: (oldOptions) => oldOptions.textLinesClamp,
   },

diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
@@ -1351,6 +1351,9 @@ export default {
         feedUrls: {
           label: "Feed URLs",
         },
+        enableRtl: {
+          label: "Enable RTL",
+        },
         textLinesClamp: {
           label: "Description line clamp",
         },

diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Card, Flex, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
@@ -37,6 +36,8 @@ export default function RssFeed({ options, itemId }: WidgetComponentProps<"rssFe
     })
     .slice(0, options.maximumAmountPosts as number);
 
+  const languageDir = options.enableRtl ? "RTL" : "LTR";
+
   return (
     <ScrollArea className="scroll-area-w100" w="100%" p="4cqmin">
       <Stack w={"100%"} gap="4cqmin">
@@ -56,12 +57,13 @@ export default function RssFeed({ options, itemId }: WidgetComponentProps<"rssFe
             )}
 
             <Flex gap="2.5cqmin" direction="column" w="100%">
-              <Text fz="4cqmin" lh="5cqmin" lineClamp={2}>
+              <Text dir={languageDir} fz="4cqmin" lh="5cqmin" lineClamp={2}>
                 {feedEntry.title}
               </Text>
               {feedEntry.description && (
                 <Text
                   className={feedEntry.description}
+                  dir={languageDir}
                   c="dimmed"
                   size="3.5cqmin"
                   lineClamp={options.textLinesClamp as number}

diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
@@ -18,6 +18,9 @@ export const { definition, componentLoader } = createWidgetDefinition("rssFeed",
       defaultValue: [],
       validate: z.string().url(),
     }),
+    enableRtl: factory.switch({
+      defaultValue: false,
+    }),
     textLinesClamp: factory.number({
       defaultValue: 5,
       validate: z.number().min(1).max(50),