fix: improvements article listing page and home page (#2963)

* fix: improvements article listing page and home page


---------

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>

Author: ahtesham-quraish

articles/models.py

@@ -59,7 +59,7 @@ def get_url(self):
         Return the relative URL for this article.
         """
         if self.slug:
-            return f"/articles/{self.slug}"
+            return f"/news/{self.slug}"
         return None
 
 

articles/models_test.py

@@ -26,7 +26,7 @@ def test_get_url_with_slug(self, _mock_queue_purge, _mock_queue_list):  # noqa:
             user=user,
         )
 
-        assert article.get_url() == f"/articles/{article.slug}"
+        assert article.get_url() == f"/news/{article.slug}"
 
     def test_get_url_without_slug(self, _mock_queue_purge, _mock_queue_list):  # noqa: PT019
         """Test that get_url returns None for an article without a slug"""
@@ -56,8 +56,8 @@ def test_get_url_with_different_slugs(self, _mock_queue_purge, _mock_queue_list)
             user=user,
         )
 
-        assert article1.get_url() == f"/articles/{article1.slug}"
-        assert article2.get_url() == f"/articles/{article2.slug}"
+        assert article1.get_url() == f"/news/{article1.slug}"
+        assert article2.get_url() == f"/news/{article2.slug}"
         assert article1.get_url() != article2.get_url()
 
     def test_slug_generation_on_publish(self, _mock_queue_purge, _mock_queue_list):  # noqa: PT019
@@ -80,4 +80,4 @@ def test_slug_generation_on_publish(self, _mock_queue_purge, _mock_queue_list):
         # Now should have a slug
         assert article.slug is not None
         assert article.slug == "test-article-title"
-        assert article.get_url() == "/articles/test-article-title"
+        assert article.get_url() == "/news/test-article-title"

articles/tasks.py

@@ -72,7 +72,7 @@ def queue_fastly_purge_articles_list():
     log.info("Purging articles list page from the Fastly cache...")
 
     # Purge the articles API endpoint
-    articles_url = "/articles"
+    articles_url = "/news"
 
     resp = call_fastly_purge_api(articles_url)
 

articles/tasks_test.py

@@ -80,7 +80,7 @@ def test_call_fastly_purge_api_no_token(self, mock_request, mock_fastly_response
         """Test API call without auth token - skips in dev"""
         mock_request.return_value = mock_fastly_response
 
-        result = call_fastly_purge_api("/api/v1/articles/test/")
+        result = call_fastly_purge_api("/api/v1/news/test/")
 
         # Should skip purge when API key is empty (dev environment)
         assert result == {"status": "ok", "skipped": True}
@@ -98,7 +98,7 @@ def test_call_fastly_purge_api_error(
         """Test Fastly API error response"""
         mock_request.return_value = mock_fastly_error_response
 
-        result = call_fastly_purge_api("/api/v1/articles/test/")
+        result = call_fastly_purge_api("/api/v1/news/test/")
 
         assert result is False
 

frontends/main/src/app-pages/Articles/ArticleBanner.tsx

@@ -61,7 +61,7 @@ interface ArticleBannerProps {
 const ArticleBanner: React.FC<ArticleBannerProps> = ({
   title,
   description,
-  currentBreadcrumb = "MIT Stories",
+  currentBreadcrumb = "MIT News",
   backgroundUrl = DEFAULT_BACKGROUND_IMAGE_URL,
   className,
 }) => {

frontends/main/src/app-pages/Articles/ArticleListingPage.test.tsx

@@ -44,16 +44,16 @@ describe("ArticleListingPage", () => {
     setupAPI(0)
     renderWithProviders(<ArticleListingPage />)
 
-    await screen.findByText("No Articles Available")
+    await screen.findByText("No News Available")
 
     expect(
       screen.getByText(
-        "There are no articles to display at this time. Please check back later.",
+        "There are no news to display at this time. Please check back later.",
       ),
     ).toBeInTheDocument()
   })
 
-  test("displays main story and grid stories on desktop", async () => {
+  test("displays main news and grid stories on desktop", async () => {
     const news = setupAPI(21)
     renderWithProviders(<ArticleListingPage />)
 
@@ -132,11 +132,13 @@ describe("ArticleListingPage", () => {
       expect(screen.queryByRole("progressbar")).not.toBeInTheDocument()
     })
 
-    // Find links by article title
-    const titleLinks = screen.getAllByRole("link", {
-      name: news.results[0].title,
-    })
-    expect(titleLinks[0]).toHaveAttribute("href", news.results[0].url)
+    // Verify links exist with correct hrefs
+    const allLinks = screen.getAllByRole("link")
+    const firstArticleLink = allLinks.find(
+      (link) => link.getAttribute("href") === news.results[0].url,
+    )
+    expect(firstArticleLink).toBeInTheDocument()
+    expect(firstArticleLink).toHaveAttribute("href", news.results[0].url)
   })
 
   test("displays article summaries with HTML stripped", async () => {
@@ -300,7 +302,7 @@ describe("ArticleListingPage", () => {
     setupAPI(0)
     renderWithProviders(<ArticleListingPage />)
 
-    await screen.findByText("No Articles Available")
+    await screen.findByText("No News Available")
 
     expect(screen.queryByRole("navigation")).not.toBeInTheDocument()
   })

frontends/main/src/app-pages/Articles/ArticleListingPage.tsx

@@ -73,6 +73,12 @@ const MainStoryCard = styled.div`
   border-top: 4px solid #a31f34;
   border-radius: 10px;
 
+  &:hover {
+    h2 {
+      text-decoration: underline;
+    }
+  }
+
   ${theme.breakpoints.down("sm")} {
     flex-direction: column;
     gap: 0;
@@ -203,11 +209,21 @@ const StoryCard = styled.div`
   flex-direction: row;
   gap: 24px;
   background: white;
-  border: 1px solid ${theme.custom.colors.lightGray2};
   border-radius: 8px;
   padding: 16px 16px 16px 24px;
   overflow: hidden;
 
+  &:hover {
+    border-radius: 8px;
+    border: 1px solid ${theme.custom.colors.lightGray2};
+    background: ${theme.custom.colors.white};
+    box-shadow: 0 8px 20px 0 rgb(120 147 172 / 10%);
+
+    h2 {
+      color: ${theme.custom.colors.red};
+    }
+  }
+
   ${theme.breakpoints.down("sm")} {
     flex-direction: row;
     gap: 12px;
@@ -216,6 +232,12 @@ const StoryCard = styled.div`
     border: none;
     border-bottom: 1px solid ${theme.custom.colors.lightGray2};
     border-radius: 0;
+
+    &:hover {
+      border: none;
+      border-bottom: 1px solid ${theme.custom.colors.lightGray2};
+      box-shadow: none;
+    }
   }
 `
 
@@ -469,15 +491,18 @@ const MainStory: React.FC<{ item: NewsFeedItem }> = ({ item }) => {
     <MainStoryCard>
       <MainStoryImage>
         {item.image?.url && !imageError && (
-          <Image
-            src={item.image.url}
-            alt={item.image.alt || item.title}
-            fill
-            style={{ objectFit: "cover" }}
-            onError={() => setImageError(true)}
-          />
+          <Link href={item.url}>
+            <Image
+              src={item.image.url}
+              alt={item.image.alt || item.title}
+              fill
+              style={{ objectFit: "cover" }}
+              onError={() => setImageError(true)}
+            />
+          </Link>
         )}
       </MainStoryImage>
+
       <MainStoryContent>
         <MainStoryContentContainer>
           <MainStoryTitle>
@@ -590,9 +615,9 @@ const ArticleListingPage: React.FC = () => {
             </LoadingContainer>
           ) : stories.length === 0 ? (
             <EmptyState>
-              <Typography variant="h4">No Articles Available</Typography>
+              <Typography variant="h4">No News Available</Typography>
               <Typography variant="body1" color="textSecondary">
-                There are no articles to display at this time. Please check back
+                There are no news to display at this time. Please check back
                 later.
               </Typography>
             </EmptyState>
@@ -628,7 +653,7 @@ const ArticleListingPage: React.FC = () => {
                 {/* Grid Section: Other articles */}
                 {gridStories.length > 0 ? (
                   <GridContainer>
-                    <Grid2 container rowSpacing="8px" component={PlainList}>
+                    <Grid2 container rowSpacing="16px" component={PlainList}>
                       {gridStories.map((item) => (
                         <Grid2 key={item.id} size={12} component="li">
                           <RegularStory item={item as NewsFeedItem} />

frontends/main/src/app-pages/HomePage/HomePage.test.tsx

@@ -191,7 +191,7 @@ describe("Home Page News and Events", () => {
     let section
     await waitFor(() => {
       section = screen
-        .getAllByRole("heading", { name: "Stories" })!
+        .getAllByRole("heading", { name: "News" })!
         .at(0)!
         .closest("section")!
     })
@@ -356,10 +356,10 @@ test("Headings", async () => {
       ...media.results.map((result) => ({ level: 3, name: result.title })),
       { level: 2, name: "Browse by Topic" },
       { level: 2, name: "From Our Community" },
-      { level: 2, name: "MIT Stories & Events" },
-      { level: 3, name: "Stories" },
+      { level: 2, name: "MIT News & Events" },
+      { level: 3, name: "News" },
       { level: 3, name: "Events" },
-      { level: 3, name: "Stories" },
+      { level: 3, name: "News" },
       { level: 3, name: "Events" },
     ])
   })

frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx

@@ -54,7 +54,7 @@ const MobileContent = styled.div`
   margin: 40px 0;
 `
 
-const StoriesContainer = styled.section`
+const NewsContainer = styled.section`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -86,7 +86,7 @@ const StoryCard = styled(Card)<{ mobile: boolean }>`
   ${({ mobile }) => (mobile ? "width: 274px" : "")}
 `
 
-const StoriesSlider = styled.div`
+const NewsSlider = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 16px;
@@ -240,7 +240,7 @@ const NewsEventsSection: React.FC = () => {
     return null
   }
 
-  const stories = news.results.slice(0, 6)
+  const newsList = news.results.slice(0, 6)
 
   const EventCards = events.results.map((item) => (
     <EventCard key={item.id} forwardClicksToLink>
@@ -270,7 +270,7 @@ const NewsEventsSection: React.FC = () => {
   return (
     <Section>
       <Title component="h2" variant="h2">
-        MIT Stories & Events
+        MIT News & Events
       </Title>
       <StrapLine>
         See what's happening in the world of learning with the latest news,
@@ -280,22 +280,22 @@ const NewsEventsSection: React.FC = () => {
         <MobileContent>
           <MobileContainer>
             <Typography component="h3" variant="h4">
-              Stories
+              News
             </Typography>
 
-            <StoriesSlider>
-              {stories.map((item) => (
+            <NewsSlider>
+              {newsList.map((item) => (
                 <Story
                   key={item.id}
                   mobile={true}
                   item={item as NewsFeedItem}
                 />
               ))}
-            </StoriesSlider>
+            </NewsSlider>
             {showArticleList && (
               <HeadingContainer>
-                <SeeAllButton href="/articles/" size="large" responsive>
-                  See all stories
+                <SeeAllButton href="/news/" size="large" responsive>
+                  See all news
                 </SeeAllButton>
               </HeadingContainer>
             )}
@@ -311,12 +311,12 @@ const NewsEventsSection: React.FC = () => {
       <AboveMdOnly>
         <Container>
           <Content>
-            <StoriesContainer>
+            <NewsContainer>
               <Typography component="h3" variant="h4">
-                Stories
+                News
               </Typography>
               <Grid2 container columnSpacing="24px" rowSpacing="28px">
-                {stories.map((item, index) => (
+                {newsList.map((item, index) => (
                   <Grid2
                     key={item.id}
                     size={{ xs: 12, sm: 12, md: 6, lg: 4, xl: 4 }}
@@ -333,12 +333,12 @@ const NewsEventsSection: React.FC = () => {
               </Grid2>
               {showArticleList && (
                 <HeadingContainer>
-                  <SeeAllButton href="/articles/" size="large" responsive>
-                    See all stories
+                  <SeeAllButton href="/news/" size="large" responsive>
+                    See all news
                   </SeeAllButton>
                 </HeadingContainer>
               )}
-            </StoriesContainer>
+            </NewsContainer>
             <EventsContainer>
               <Typography component="h3" variant="h4">
                 Events

…rc/app/articles/[slugOrId]/edit/page.tsx …in/src/app/news/[slugOrId]/edit/page.tsxfrontends/main/src/app/articles/[slugOrId]/edit/page.tsx renamed to frontends/main/src/app/news/[slugOrId]/edit/page.tsx frontends/main/src/app/articles/[slugOrId]/edit/page.tsx renamed to frontends/main/src/app/news/[slugOrId]/edit/page.tsx

@@ -1,9 +1,7 @@
 import React from "react"
 import { ArticleEditPage } from "@/app-pages/Articles/ArticleEditPage"
 
-const Page: React.FC<PageProps<"/articles/[slugOrId]/edit">> = async (
-  props,
-) => {
+const Page: React.FC<PageProps<"/news/[slugOrId]/edit">> = async (props) => {
   const { slugOrId } = await props.params
 
   return <ArticleEditPage articleId={slugOrId} />