RSS

libs/remix-ui/home-tab/src/lib/components/rssFeed.css

@@ -0,0 +1,12 @@
+.RSSFeed-item img  {
+    width: 100%;
+}
+
+.RSSFeed-item .truncate {
+    max-height: 500px;
+    overflow: hidden;
+}
+
+.RSSFeed-item .more-button {
+
+}

libs/remix-ui/home-tab/src/lib/components/rssFeed.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import Parser from "rss-parser";
+import './RssFeed.css';
+
+interface RSSFeedProps {
+    feedUrl: string,
+    maxItems: number,
+}
+
+export function RSSFeed({ feedUrl, maxItems }: RSSFeedProps) {
+    const [feed, setFeed] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            let parser = new Parser()
+            let feed = await parser.parseURL(feedUrl);
+            for (const item of feed.items) {
+                item.content = item['content:encoded']
+                item.date = new Date(item.pubDate).toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric'
+                })
+            }
+            setFeed(feed);
+        };
+        fetchData();
+    }, [feedUrl]);
+
+
+    return (<>
+        {feed && feed.items.slice(0, maxItems).map((item: any, index: any) => (
+            <div className='RSSFeed-item' key={index}>
+                <a target="_blank" href={item.link}><h3>{item.title}</h3></a>
+                <p>Author: {item.creator}</p>
+                <h4>{item.date}</h4>
+                <div className="truncate" dangerouslySetInnerHTML={{ __html: item.content }} />
+                <a className="more-button btn mb-3" target="_blank" href={item.link}>READ MORE</a>
+                <hr></hr>
+            </div>
+        ))}
+    </>)
+}

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -5,6 +5,7 @@ import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import PluginButton from './components/pluginButton' // eslint-disable-line
 import { ThemeContext, themes } from './themeContext'
+import { RSSFeed } from './components/rssFeed'
 declare global {
   interface Window {
     _paq: any
@@ -107,15 +108,8 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     scriptTwitter.src = 'https://platform.twitter.com/widgets.js'
     scriptTwitter.async = true
     document.body.appendChild(scriptTwitter)
-    // to retrieve medium publications
-    const scriptMedium = document.createElement('script')
-    scriptMedium.src = 'https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js'
-    scriptMedium.async = true
-    // script causes a bug in the editor and prevents syntax error detection
-    // document.body.appendChild(scriptMedium)
     return () => {
       document.body.removeChild(scriptTwitter)
-      document.body.removeChild(scriptMedium)
     }
   }, [])
 
@@ -342,17 +336,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
           >
             <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
               <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: '10000px' } }>
-                <div
-                  id="retainable-rss-embed"
-                  data-rss="https://medium.com/feed/remix-ide"
-                  data-maxcols="1"
-                  data-layout="grid"
-                  data-poststyle="external"
-                  data-readmore="More..."
-                  data-buttonclass="btn mb-3"
-                  data-offset="-100"
-                >
-                </div>
+                <RSSFeed feedUrl='https://rss.remixproject.org/' maxItems={10} />
               </div>
             </div>
             <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >

package.json

@@ -198,6 +198,7 @@
     "react-draggable": "^4.4.4",
     "react-tabs": "^3.2.2",
     "regenerator-runtime": "0.13.7",
+    "rss-parser": "^3.12.0",
     "selenium": "^2.20.0",
     "signale": "^1.4.0",
     "string-similarity": "^4.0.4",