Merge pull request #1526 from NicolasKheirallah/react-application-news-ticker

Author: hugoabernier

samples/react-application-news-ticker/README.md

@@ -8,8 +8,8 @@ An SPFx Extension that displays news as a running text at the top of every moder
 
 ## Compatibility
 
-![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
-![Node.js LTS v18](https://img.shields.io/badge/Node.js-LTS%20v18-green.svg) 
+![SPFx 1.21.1](https://img.shields.io/badge/SPFx-1.21.1-green.svg)
+![Node.js LTS v22](https://img.shields.io/badge/Node.js-LTS%20v22-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@@ -26,10 +26,12 @@ An SPFx Extension that displays news as a running text at the top of every moder
 ## Prerequisites
 
 Create list as the data source for the app with below details:
+
 1. List title: `News`
-2. Required Columns: 
+2. Required Columns:
    - `Title`: single line text
    - `Content`: multiline text (plain text)
+   - `RssUrl`: single line text (plain text)
    - `PublishDate`: date
    - `ExpiryDate`: date
 3. Required View:
@@ -39,14 +41,11 @@ Create list as the data source for the app with below details:
       - Sort: `PublishDate Ascending`
       - Limit: `10`
 
-## Solution
-
-Solution|Author(s)
---------|---------
-react-application-news-ticker | [Ari Gunawan](https://github.com/AriGunawan) ([@arigunawan3023](https://twitter.com/arigunawan3023))
-react-application-news-ticker | [Sudharsan Kesavanarayanan](https://github.com/sudharsank) (NTT Ltd, [@sudharsank](https://twitter.com/sudharsank))
-react-application-news-ticker | [Nicolas Kheirallah](https://github.com/NicolasKheirallah) 
+## Contributors
 
+- [Ari Gunawan](https://github.com/AriGunawan)
+- [Sudharsan Kesavanarayanan](https://github.com/sudharsank)
+- [Nicolas Kheirallah](https://github.com/NicolasKheirallah)
 
 ## Version history
 
@@ -56,7 +55,8 @@ Version|Date|Comments
 1.1|October 17, 2021|Update SPFx version to 1.12.1
 1.2|August 27, 2021|Fixed failed upgrade and update SPFx version to 1.15.2
 1.3|October 24, 2024|Upgraded to SPFX 1.20, React 17 , Node 18! Rewrite the code to use Graph API, Also coded a native Ticker instead of another module as it's was no longer maintained! Also refactored a lot of the code
-
+2.0|July 4, 2025|Added RSS feed integration support for external news sources, Major UI/UX improvements: Removed icons for cleaner design, replaced bullet separators with pipe characters, fixed hover behavior to pause instead of blanking, optimized CSS with min-height constraints, fixed memory leaks with proper event listener, improved performance
+2.1|September 8, 2025|Updated to SPFX 1.21. and Typescript 5.3
 
 ## Minimal Path to Awesome
 
@@ -71,22 +71,30 @@ Version|Date|Comments
 This extension illustrates the following concepts:
 
 - Display news as a running text at the top of every modern page where the app installed
-- Get news items from a SharePoint list view using PnPJS
-- Stop the running text when user hover it
+- Get news items from SharePoint lists across multiple sites (current site, home site, hub site) using Microsoft Graph API
+- **RSS Feed Integration** - Fetch and display news from external RSS feeds with automatic date filtering
+- Native React ticker component with smooth animations and accessibility support
+- Pause animation on hover while maintaining content visibility
+- Clean, minimalist design with pipe separators and no icons
+- Memory leak prevention with proper event listener cleanup
+- Configurable speed, direction, and visual styling options
+- Accessibility features including reduced motion preference support
+- **RSS Content Processing** - Automatic HTML sanitization and content extraction from RSS feeds
 
 ## References
 
 - [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)
 
-
 ## Debug URL for testing
-Here's a debug URL for testing around this sample. 
 
-```
+Here's a debug URL for testing around this sample.
+
+```shell
 ?debugManifestsFile=https://localhost:4321/temp/manifests.js
 ```
 
 ## Disclaimer
+
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
 ## Help
@@ -103,4 +111,4 @@ For questions regarding this sample, [create a new question](https://github.com/
 
 Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-extensions/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-application-news-ticker&authors=@AriGunawan&title=react-application-news-ticker%20-%20).
 
-<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-news-ticker" />
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-news-ticker" />

samples/react-application-news-ticker/assets/sample.json

@@ -9,7 +9,7 @@
       "An SPFx Extension that displays news as a running text at the top of every modern page."
     ],
     "creationDateTime": "2021-04-19",
-    "updateDateTime": "2024-10-24",
+    "updateDateTime": "2025-09-08",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.20.0"
+        "value": "1.21.1"
       }
     ],
     "thumbnails": [
@@ -42,8 +42,29 @@
         "gitHubAccount": "AriGunawan",
         "pictureUrl": "https://github.com/AriGunawan.png",
         "name": "Ari Gunawan"
+      },
+      {
+        "gitHubAccount": "sudharsank",
+        "pictureUrl": "https://github.com/sudharsank.png",
+        "name": "Sudharsan Kesavanarayanan"
+      },
+      {
+        "gitHubAccount": "NicolasKheirallah",
+        "pictureUrl": "https://github.com/NicolasKheirallah.png",
+        "name": "Nicolas Kheirallah"
       }
     ],
-    "references": []
-  }
-]
+   "references": [
+    {
+      "name": "Overview of SharePoint Framework Extensions",
+      "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
+      "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
+    },
+    {
+      "name": "Use page placeholders from Application Customizer",
+      "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
+      "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
+    }
+  ]
+}
+]

samples/react-application-news-ticker/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "React News Ticker",
     "id": "65603ca8-004c-469c-8b6f-b24ef5f2e794",
-    "version": "1.2.0.0",
+    "version": "2.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,