✨ Add RSS widget

src/hooks/widgets/rss/useGetRssFeed.tsx

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+export const useGetRssFeed = (feedUrl: string) =>
+  useQuery({
+    queryKey: ['rss-feed', feedUrl],
+    queryFn: async () => {
+      const response = await fetch('/api/modules/rss');
+      return response.json();
+    },
+  });

src/pages/api/modules/rss/index.ts

@@ -0,0 +1,93 @@
+import Consola from 'consola';
+
+import { getCookie } from 'cookies-next';
+
+import { decode } from 'html-entities';
+
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import Parser from 'rss-parser';
+
+import { getConfig } from '../../../../tools/config/getConfig';
+import { Stopwatch } from '../../../../tools/shared/stopwatch';
+import { IRssWidget } from '../../../../widgets/rss/RssWidgetTile';
+
+type CustomItem = {
+  'media:content': string;
+  enclosure: {
+    url: string;
+  };
+};
+
+const parser: Parser<any, CustomItem> = new Parser({
+  customFields: {
+    item: ['media:content', 'enclosure'],
+  },
+});
+
+export const Get = async (request: NextApiRequest, response: NextApiResponse) => {
+  const configName = getCookie('config-name', { req: request });
+  const config = getConfig(configName?.toString() ?? 'default');
+
+  const rssWidget = config.widgets.find((x) => x.id === 'rss') as IRssWidget | undefined;
+
+  if (
+    !rssWidget ||
+    !rssWidget.properties.rssFeedUrl ||
+    rssWidget.properties.rssFeedUrl.length < 1
+  ) {
+    response.status(400).json({ message: 'required widget does not exist' });
+    return;
+  }
+
+  Consola.info('Requesting RSS feed...');
+  const stopWatch = new Stopwatch();
+  const feed = await parser.parseURL(rssWidget.properties.rssFeedUrl);
+  Consola.info(`Retrieved RSS feed after ${stopWatch.getEllapsedMilliseconds()} milliseconds`);
+
+  const orderedFeed = {
+    ...feed,
+    items: feed.items
+      .map((item: { title: any; content: any }) => ({
+        ...item,
+        title: item.title ? decode(item.title) : undefined,
+        content: decode(item.content),
+        enclosure: createEnclosure(item),
+      }))
+      .sort((a: { pubDate: number }, b: { pubDate: number }) => {
+        if (!a.pubDate || !b.pubDate) {
+          return 0;
+        }
+
+        return a.pubDate - b.pubDate;
+      })
+      .slice(0, 20),
+  };
+
+  response.status(200).json({
+    feed: orderedFeed,
+    success: orderedFeed?.items !== undefined,
+  });
+};
+
+const createEnclosure = (item: any) => {
+  if (item.enclosure) {
+    return item.enclosure;
+  }
+
+  if (item['media:content']) {
+    return {
+      url: item['media:content'].$.url,
+    };
+  }
+
+  return undefined;
+};
+
+export default async (request: NextApiRequest, response: NextApiResponse) => {
+  if (request.method === 'GET') {
+    return Get(request, response);
+  }
+
+  return response.status(405);
+};

src/styles/global.scss

@@ -92,3 +92,8 @@
   height: 0px;
   min-height: 0px !important;
 }
+
+.scroll-area-w100 .mantine-ScrollArea-viewport > div:nth-of-type(1) {
+  width: 100%;
+  display: inherit !important;
+}

src/tools/server/translation-namespaces.ts

@@ -29,6 +29,7 @@ export const dashboardNamespaces = [
   'modules/torrents-status',
   'modules/weather',
   'modules/ping',
+  'modules/rss',
   'modules/docker',
   'modules/dashdot',
   'modules/overseerr',

src/tools/shared/stopwatch.ts

@@ -0,0 +1,11 @@
+export class Stopwatch {
+  private startTime: Date;
+
+  constructor() {
+    this.startTime = new Date();
+  }
+
+  getEllapsedMilliseconds() {
+    return new Date().getTime() - this.startTime.getTime();
+  }
+}

src/widgets/index.ts

@@ -1,11 +1,12 @@
-import date from './date/DateTile';
 import calendar from './calendar/CalendarTile';
 import dashdot from './dashDot/DashDotTile';
-import usenet from './useNet/UseNetTile';
-import weather from './weather/WeatherTile';
-import torrent from './torrent/TorrentTile';
+import date from './date/DateTile';
 import torrentNetworkTraffic from './download-speed/TorrentNetworkTrafficTile';
+import rss from './rss/RssWidgetTile';
+import torrent from './torrent/TorrentTile';
+import usenet from './useNet/UseNetTile';
 import videoStream from './video/VideoStreamTile';
+import weather from './weather/WeatherTile';
 
 export default {
   calendar,
@@ -15,5 +16,6 @@ export default {
   'torrents-status': torrent,
   dlspeed: torrentNetworkTraffic,
   date,
+  rss,
   'video-stream': videoStream,
 };

src/widgets/rss/RssWidgetTile.tsx

@@ -0,0 +1,236 @@
+import {
+  ActionIcon,
+  Badge,
+  Card,
+  Center,
+  createStyles,
+  Flex,
+  Group,
+  Image,
+  Loader,
+  LoadingOverlay,
+  MediaQuery,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+} from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
+import {
+  IconBulldozer,
+  IconCalendarTime,
+  IconClock,
+  IconCopyright,
+  IconRefresh,
+  IconRss,
+  IconSpeakerphone,
+} from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useGetRssFeed } from '../../hooks/widgets/rss/useGetRssFeed';
+import { sleep } from '../../tools/client/time';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
+
+const definition = defineWidget({
+  id: 'rss',
+  icon: IconRss,
+  options: {
+    rssFeedUrl: {
+      type: 'text',
+      defaultValue: '',
+    },
+  },
+  gridstack: {
+    minWidth: 2,
+    minHeight: 2,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
+  component: RssTile,
+});
+
+export type IRssWidget = IWidget<(typeof definition)['id'], typeof definition>;
+
+interface RssTileProps {
+  widget: IRssWidget;
+}
+
+function RssTile({ widget }: RssTileProps) {
+  const { t } = useTranslation('modules/rss');
+  const { data, isLoading, isFetching, isError, refetch } = useGetRssFeed(
+    widget.properties.rssFeedUrl
+  );
+  const { classes } = useStyles();
+  const [loadingOverlayVisible, setLoadingOverlayVisible] = useState(false);
+  const { ref, height } = useElementSize();
+
+  if (!data || isLoading) {
+    return (
+      <Center>
+        <Loader />
+      </Center>
+    );
+  }
+
+  if (!data.success || isError) {
+    return (
+      <Center h="100%">
+        <Stack align="center">
+          <IconRss size={40} strokeWidth={1} />
+          <Title order={6}>{t('card.errors.general.title')}</Title>
+          <Text align="center">{t('card.errors.general.text')}</Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  return (
+    <Stack ref={ref} h="100%">
+      <LoadingOverlay visible={loadingOverlayVisible} />
+      <Flex gap="md">
+        {data.feed.image ? (
+          <Image
+            src={data.feed.image.url}
+            alt={data.feed.image.title}
+            width="auto"
+            height={40}
+            mx="auto"
+          />
+        ) : (
+          <Title order={6}>{data.feed.title}</Title>
+        )}
+        <UnstyledButton
+          onClick={async () => {
+            setLoadingOverlayVisible(true);
+            await Promise.all([sleep(1500), refetch()]);
+            setLoadingOverlayVisible(false);
+          }}
+          disabled={isFetching || isLoading}
+        >
+          <ActionIcon>
+            <IconRefresh />
+          </ActionIcon>
+        </UnstyledButton>
+      </Flex>
+      <ScrollArea className="scroll-area-w100" w="100%">
+        <Stack w="100%" spacing="xs">
+          {data.feed.items.map((item: any, index: number) => (
+            <Card
+              key={index}
+              withBorder
+              component={Link}
+              href={item.link}
+              radius="md"
+              target="_blank"
+              w="100%"
+            >
+              {item.enclosure && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  className={classes.backgroundImage}
+                  src={item.enclosure.url ?? undefined}
+                  alt="backdrop"
+                />
+              )}
+
+              <Flex gap="xs">
+                <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
+                  <Image
+                    src={item.enclosure?.url ?? undefined}
+                    width={140}
+                    height={140}
+                    radius="md"
+                    withPlaceholder
+                  />
+                </MediaQuery>
+                <Flex gap={2} direction="column">
+                  {item.categories && (
+                    <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
+                      {item.categories.map((category: any, categoryIndex: number) => (
+                        <Badge key={categoryIndex}>{category._}</Badge>
+                      ))}
+                    </Flex>
+                  )}
+
+                  <Text lineClamp={2}>{item.title}</Text>
+                  <Text color="dimmed" size="xs" lineClamp={3}>
+                    {item.content}
+                  </Text>
+
+                  {item.pubDate && <TimeDisplay date={item.pubDate} />}
+                </Flex>
+              </Flex>
+            </Card>
+          ))}
+        </Stack>
+      </ScrollArea>
+
+      <Flex wrap="wrap" columnGap="md">
+        <Group spacing="sm">
+          <IconCopyright size={14} />
+          <Text color="dimmed" size="sm">
+            {data.feed.copyright}
+          </Text>
+        </Group>
+        <Group>
+          <IconCalendarTime size={14} />
+          <Text color="dimmed" size="sm">
+            {data.feed.pubDate}
+          </Text>
+        </Group>
+        <Group>
+          <IconBulldozer size={14} />
+          <Text color="dimmed" size="sm">
+            {data.feed.lastBuildDate}
+          </Text>
+        </Group>
+        {data.feed.feedUrl && (
+          <Group spacing="sm">
+            <IconSpeakerphone size={14} />
+            <Text
+              color="dimmed"
+              size="sm"
+              variant="link"
+              target="_blank"
+              component={Link}
+              href={data.feed.feedUrl}
+            >
+              Feed URL
+            </Text>
+          </Group>
+        )}
+      </Flex>
+    </Stack>
+  );
+}
+
+const TimeDisplay = ({ date }: { date: string }) => (
+  <Group mt="auto" spacing="xs">
+    <IconClock size={14} />
+    <Text size="xs" color="dimmed">
+      {date}
+    </Text>
+  </Group>
+);
+
+const useStyles = createStyles(({ colorScheme }) => ({
+  backgroundImage: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    filter: colorScheme === 'dark' ? 'blur(30px)' : 'blur(15px)',
+    transform: 'scaleX(-1)',
+    opacity: colorScheme === 'dark' ? 0.3 : 0.2,
+    transition: 'ease-in-out 0.2s',
+
+    '&:hover': {
+      opacity: colorScheme === 'dark' ? 0.4 : 0.3,
+      filter: 'blur(40px) brightness(0.7)',
+    },
+  },
+}));
+
+export default definition;