fix(cowfi): link featured articles with href (#5765)

* fix(cowfi): link featured articles with href

* refactor(cowfi): replace Link with anchor tag for featured article sidebar

Author: fairlighteth

apps/cow-fi/app/(learn)/learn/[article]/page.tsx

@@ -92,10 +92,6 @@ export default async function ArticlePage({ params }: Props) {
       return notFound()
     }
 
-    // Get related articles
-    const articlesResponse = await getArticles()
-    const articles = articlesResponse.data
-
     // Fetch featured articles
     const featuredArticlesResponse = await getArticles({
       filters: {
@@ -107,7 +103,9 @@ export default async function ArticlePage({ params }: Props) {
     })
     const featuredArticles = featuredArticlesResponse.data
 
-    const randomArticles = getRandomArticles(articles, 3)
+    // Get articles for random selection
+    const allArticlesResponse = await getArticles()
+    const randomArticles = getRandomArticles(allArticlesResponse.data, 3)
     const categoriesResponse = await getCategories()
     const allCategories =
       categoriesResponse?.map((category: any) => ({
@@ -118,7 +116,6 @@ export default async function ArticlePage({ params }: Props) {
     return (
       <ArticlePageComponent
         article={article}
-        articles={articles}
         randomArticles={randomArticles}
         featuredArticles={featuredArticles}
         allCategories={allCategories}

apps/cow-fi/app/(learn)/learn/page.tsx

@@ -1,14 +1,11 @@
 import { LearnPageComponent } from '@/components/LearnPageComponent'
-import { ARTICLES_LARGE_PAGE_SIZE, FEATURED_ARTICLES_PAGE_SIZE } from '@/const/pagination'
+import { FEATURED_ARTICLES_PAGE_SIZE } from '@/const/pagination'
 
 import { getArticles, getCategories } from '../../../services/cms'
 
 export const revalidate = 3600 // Revalidate at most once per hour
 
 export default async function LearnPage() {
-  const articlesResponse = await getArticles({ pageSize: ARTICLES_LARGE_PAGE_SIZE })
-  const articles = articlesResponse.data
-
   // Fetch featured articles
   const featuredArticlesResponse = await getArticles({
     filters: {
@@ -48,5 +45,5 @@ export default async function LearnPage() {
       }
     }) || []
 
-  return <LearnPageComponent articles={articles} featuredArticles={featuredArticles} categories={categories} />
+  return <LearnPageComponent featuredArticles={featuredArticles} categories={categories} />
 }

apps/cow-fi/components/ArticlePageComponent.tsx

@@ -1,9 +1,16 @@
 'use client'
 
-import { Article, SharedRichTextComponent } from '../services/cms'
-import { stripHtmlTags } from '@/util/stripHTMLTags'
-import useWebShare from '../hooks/useWebShare'
+import { useMemo } from 'react'
+
+import { useCowAnalytics } from '@cowprotocol/analytics'
+import { CmsImage, Color, Media } from '@cowprotocol/ui'
+
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import styled from 'styled-components/macro'
+
 import { CategoryLinks } from '@/components/CategoryLinks'
+import { Link, LinkType } from '@/components/Link'
 import { SearchBar } from '@/components/SearchBar'
 import {
   ArticleCard,
@@ -24,32 +31,22 @@ import {
   SectionTitleDescription,
   StickyMenu,
 } from '@/styles/styled'
-import { CowFiCategory } from 'src/common/analytics/types'
-import { Link, LinkType } from '@/components/Link'
-import { CmsImage, Color, Media } from '@cowprotocol/ui'
-import styled from 'styled-components/macro'
 import { formatDate } from '@/util/formatDate'
+import { stripHtmlTags } from '@/util/stripHTMLTags'
+import { CowFiCategory } from 'src/common/analytics/types'
+
 import { useLazyLoadImages } from '../hooks/useLazyLoadImages'
-import { useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import { useCowAnalytics } from '@cowprotocol/analytics'
+import useWebShare from '../hooks/useWebShare'
+import { Article, SharedRichTextComponent } from '../services/cms'
 
 interface ArticlePageProps {
   article: Article
-  articles: Article[]
   randomArticles: Article[]
   featuredArticles: Article[]
   allCategories: { name: string; slug: string }[]
 }
 
-export function ArticlePageComponent({
-  articles,
-  article,
-  randomArticles,
-  featuredArticles,
-  allCategories,
-}: ArticlePageProps) {
+export function ArticlePageComponent({ article, randomArticles, featuredArticles, allCategories }: ArticlePageProps) {
   const attributes: {
     title?: string
     description?: string
@@ -183,7 +180,7 @@ export function ArticlePageComponent({
 
                 return (
                   <li key={article.id}>
-                    <Link
+                    <a
                       href={`/learn/${article.attributes?.slug}`}
                       onClick={() =>
                         analytics.sendEvent({
@@ -194,7 +191,7 @@ export function ArticlePageComponent({
                       }
                     >
                       {articleTitle}
-                    </Link>
+                    </a>
                   </li>
                 )
               })}
@@ -322,7 +319,8 @@ function ArticleSharedRichTextComponent({ sharedRichText }: { sharedRichText: Sh
           return <LazyImage src={src} alt={alt || ''} {...props} width={725} height={400} />
         },
       }}
-      children={processedContent}
-    />
+    >
+      {processedContent}
+    </ReactMarkdown>
   )
 }

apps/cow-fi/components/LearnPageComponent.tsx

@@ -1,7 +1,14 @@
 'use client'
 
-import { useLazyLoadImages } from '../hooks/useLazyLoadImages'
+import { useCowAnalytics } from '@cowprotocol/analytics'
+import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg'
+import { Color, Font, Media } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+
+import { ArrowButton } from '@/components/ArrowButton'
 import { CategoryLinks } from '@/components/CategoryLinks'
+import LazySVG from '@/components/LazySVG'
 import { SearchBar } from '@/components/SearchBar'
 import {
   ArticleCard,
@@ -27,15 +34,9 @@ import {
   TopicList,
   TopicTitle,
 } from '@/styles/styled'
-import { ArrowButton } from '@/components/ArrowButton'
-
 import { CowFiCategory } from 'src/common/analytics/types'
-import { Color, Font, Media } from '@cowprotocol/ui'
-import LazySVG from '@/components/LazySVG'
-import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg'
-import { ArticleListResponse } from '../services/cms'
-import styled from 'styled-components/macro'
-import { useCowAnalytics } from '@cowprotocol/analytics'
+
+import { useLazyLoadImages } from '../hooks/useLazyLoadImages'
 
 const PODCASTS = [
   {
@@ -114,7 +115,6 @@ interface PageProps {
     iconColor: string
     imageUrl: string
   }[]
-  articles: ArticleListResponse['data']
   featuredArticles: {
     title: string
     description: string
@@ -156,7 +156,7 @@ const Wrapper = styled.div`
   }
 `
 
-export function LearnPageComponent({ categories, articles, featuredArticles }: PageProps) {
+export function LearnPageComponent({ categories, featuredArticles }: PageProps) {
   const { LazyImage } = useLazyLoadImages()
   const analytics = useCowAnalytics()
 
@@ -181,6 +181,8 @@ export function LearnPageComponent({ categories, articles, featuredArticles }: P
                 <ArticleCard
                   key={index}
                   href={link}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   onClick={() =>
                     analytics.sendEvent({
                       category: CowFiCategory.KNOWLEDGEBASE,

apps/cow-fi/styles/styled.ts

@@ -1,8 +1,9 @@
-import styled, { css } from 'styled-components/macro'
 import { Font, Color, Media } from '@cowprotocol/ui'
+
 import { transparentize } from 'color2k'
+import styled, { css } from 'styled-components/macro'
+
 import { PAGE_MAX_WIDTH } from '@/components/Layout/const'
-import Link from 'next/link'
 
 export const PageWrapper = styled.div<{ margin?: string }>`
   display: flex;
@@ -133,13 +134,19 @@ export const ArticleList = styled.div<{ columns?: number; columnsTablet?: number
   }
 `
 
-export const ArticleCard = styled(Link)`
+export const ArticleCard = styled.a`
   display: flex;
   flex-direction: column;
-  padding: 0;
+  padding: 1.2rem;
   border-radius: 2rem;
   width: 100%;
   text-decoration: none;
+  background: transparent;
+  transition: background 0.2s ease-in-out;
+
+  &:hover {
+    background: ${Color.neutral98};
+  }
 `
 
 export const ArticleImage = styled.div<{ color?: string }>`