New news detail json

public/data/data.json

@@ -1,32 +0,0 @@
-[
-    {
-        "id": "ed701716-e443-5804-aaa9-99e7e04c33e2",
-        "title": "胖东来迅速应对擀面皮事件，展现企业责任感",
-        "summary": "胖东来商贸集团因擀面皮加工场所卫生问题迅速采取行动，关闭相关档口并展开调查。确认问题后，公司对举报顾客奖励10万元，并对购买问题产品的顾客进行退款和补偿，总计883.3万元。同时，胖东来辞退相关责任人，解除与涉事商户的合作，并制定改进计划以确保食品安全。公众对其快速透明的处理措施表示赞赏，认为其展现了企业的社会责任感。"
-    },
-    {
-        "id": "869d933c-e186-51b0-a225-edc2d338b6fa",
-        "title": "姜萍晋级全球数学竞赛决赛引发质疑",
-        "summary": "17岁中专生姜萍在2024阿里巴巴全球数学竞赛中晋级决赛，但其成绩真实性受到质疑。北京大学教授袁新意指出她在校内月考成绩仅为83分，建议姜萍通过直播讲解竞赛题目或接受数学教授面试来证明实力。涟水县教育体育局确认了月考成绩的真实性，但质疑声仍未平息。姜萍的成功故事激励了许多人，凸显了教育公平和知识改变命运的重要性。"
-    },
-    {
-        "id": "73090b7b-a04e-5c50-ae84-c77f1d7d03a8",
-        "title": "梅州洪灾救援与重建：党员干部与社会各界齐心协力",
-        "summary": "梅州洪灾发生后，党员干部和社会各界迅速投入救援和重建工作。党员干部们不分昼夜地清理淤泥、搜救被困人员，展现了无私奉献精神。社会各界捐款捐物，累计超过712.1万元，支持灾区重建。各方力量的共同努力下，梅州的灾后重建工作正有序推进，村民生活逐渐恢复正常。此外，全球洪灾预警系统的改进也在不断推进，以减轻自然灾害带来的损失。"
-    },
-    {
-        "id": "1fa9b398-080f-54de-9a4f-3ba386acce11",
-        "title": "东方甄选主播公开质疑公司管理",
-        "summary": "东方甄选主播顿顿在直播中表达了对公司管理的不满，指出公司在开设新账号时未与主播沟通，且公关部门在应对舆情时不积极。这些问题引发了广泛关注和讨论。此外，东方甄选在“618”促销活动中的直播风格转变也引起了争议，观众对其过于商业化的表现感到失望。这些事件导致公司品牌形象受损，粉丝数量下降，股价波动。"
-    },
-    {
-        "id": "fd20973f-54b2-5b15-bf7b-79b5e5515b5c",
-        "title": "鸿蒙智行2024年上半年销量创纪录，成智能豪华车新标杆",
-        "summary": "2024年上半年，鸿蒙智行累计交付194207辆汽车，成为中国新势力品牌销量第一。6月单月交付量达46141辆，问界M9、问界新M7和问界新M5等车型表现突出。鸿蒙智行的成功归功于其强大的产品矩阵、技术创新以及华为在ICT领域的技术积累。通过提升产品质量和用户体验，鸿蒙智行重新定义了豪华车市场标准，并计划继续加大研发投入，引领行业发展。"
-    },
-    {
-        "id": "b84c7962-2971-53de-a99b-3c9e45492c79",
-        "title": "Apple Joins OpenAI Board as Observer, Strengthens AI Collaboration",
-        "summary": "Apple has appointed Phil Schiller to an observer role on OpenAI's board, enhancing their AI partnership. This move follows Apple's plan to integrate ChatGPT into its devices, including iPhones and Macs. Schiller will attend board meetings without voting rights, providing Apple with insights into OpenAI's decisions. The collaboration, which involves no financial transactions, allows OpenAI access to millions of Apple users while Apple benefits from advanced AI features, aligning with its broader AI strategy."
-    }
-]

public/data/index.json

@@ -1,32 +1,32 @@
 [
     {
         "id": "ed701716-e443-5804-aaa9-99e7e04c33e2",
-        "title": "胖东来迅速应对擀面皮事件，展现企业责任感",
-        "summary": "胖东来商贸集团因擀面皮加工场所卫生问题迅速采取行动，关闭相关档口并展开调查。确认问题后，公司对举报顾客奖励10万元，并对购买问题产品的顾客进行退款和补偿，总计883.3万元。同时，胖东来辞退相关责任人，解除与涉事商户的合作，并制定改进计划以确保食品安全。公众对其快速透明的处理措施表示赞赏，认为其展现了企业的社会责任感。"
+        "title": "胖东来食品安全事件：迅速回应与全面整改",
+        "summary": "近日，一位顾客在抖音上曝光了新乡胖东来联营餐饮的卫生问题，引发广泛关注。胖东来迅速回应，发布调查报告并采取补偿措施，包括现金奖励和退款。公司对相关责任人进行了严肃处理，并制定了一系列整改措施，旨在加强食品安全管理。尽管事件对品牌形象造成影响，但其透明的处理方式赢得了部分顾客的认可和信任。"
     },
     {
         "id": "869d933c-e186-51b0-a225-edc2d338b6fa",
-        "title": "姜萍晋级全球数学竞赛决赛引发质疑",
-        "summary": "17岁中专生姜萍在2024阿里巴巴全球数学竞赛中晋级决赛，但其成绩真实性受到质疑。北京大学教授袁新意指出她在校内月考成绩仅为83分，建议姜萍通过直播讲解竞赛题目或接受数学教授面试来证明实力。涟水县教育体育局确认了月考成绩的真实性，但质疑声仍未平息。姜萍的成功故事激励了许多人，凸显了教育公平和知识改变命运的重要性。"
+        "title": "姜萍：从中专生到数学竞赛决赛的励志之路",
+        "summary": "来自江苏涟水中等专业学校的17岁女生姜萍，以其卓越的数学天赋和不懈努力，成功进入2024年阿里巴巴全球数学竞赛决赛，成为唯一的中专生和女生。尽管面临质疑，她的成绩和努力得到了学校和教育部门的支持，激发了社会对教育公平的讨论，并展示了知识改变命运的力量。"
     },
     {
         "id": "73090b7b-a04e-5c50-ae84-c77f1d7d03a8",
-        "title": "梅州洪灾救援与重建：党员干部与社会各界齐心协力",
-        "summary": "梅州洪灾发生后，党员干部和社会各界迅速投入救援和重建工作。党员干部们不分昼夜地清理淤泥、搜救被困人员，展现了无私奉献精神。社会各界捐款捐物，累计超过712.1万元，支持灾区重建。各方力量的共同努力下，梅州的灾后重建工作正有序推进，村民生活逐渐恢复正常。此外，全球洪灾预警系统的改进也在不断推进，以减轻自然灾害带来的损失。"
+        "title": "梅州洪灾：紧急救援与重建希望",
+        "summary": "6月16日，广东梅州遭遇罕见暴雨引发的洪灾，导致多地交通、电力和通信中断，数万人受灾。政府迅速启动应急响应，军队、消防队和志愿者积极参与救援和重建工作。社会各界纷纷捐款捐物，帮助灾区恢复生机。面对严峻的公共卫生挑战，防疫措施也同步展开，确保灾后安全。梅州人民在灾难中展现了坚韧与希望，共同努力重建家园。"
     },
     {
         "id": "1fa9b398-080f-54de-9a4f-3ba386acce11",
-        "title": "东方甄选主播公开质疑公司管理",
-        "summary": "东方甄选主播顿顿在直播中表达了对公司管理的不满，指出公司在开设新账号时未与主播沟通，且公关部门在应对舆情时不积极。这些问题引发了广泛关注和讨论。此外，东方甄选在“618”促销活动中的直播风格转变也引起了争议，观众对其过于商业化的表现感到失望。这些事件导致公司品牌形象受损，粉丝数量下降，股价波动。"
+        "title": "东方甄选主播公开表达不满引发关注",
+        "summary": "在东方甄选的直播间中，知名主播顿顿公开表达了对公司管理的不满，指出公司在开设新账号和应对网络舆情时缺乏沟通，导致内部意见不统一。此举引发了广泛关注，并导致公司股价大幅波动。粉丝们在社交媒体上迅速反应，支持顿顿的同时也对公司的管理提出质疑，进一步影响了公司的公众形象和市场表现。"
     },
     {
         "id": "fd20973f-54b2-5b15-bf7b-79b5e5515b5c",
-        "title": "鸿蒙智行2024年上半年销量创纪录，成智能豪华车新标杆",
-        "summary": "2024年上半年，鸿蒙智行累计交付194207辆汽车，成为中国新势力品牌销量第一。6月单月交付量达46141辆，问界M9、问界新M7和问界新M5等车型表现突出。鸿蒙智行的成功归功于其强大的产品矩阵、技术创新以及华为在ICT领域的技术积累。通过提升产品质量和用户体验，鸿蒙智行重新定义了豪华车市场标准，并计划继续加大研发投入，引领行业发展。"
+        "title": "鸿蒙智行：智能豪华车市场的领跑者",
+        "summary": "2024年上半年，鸿蒙智行在中国新势力品牌中脱颖而出，累计交付近20万辆汽车，创下销售新高。其旗舰车型问界M9表现尤为抢眼，订单量突破10万。凭借卓越的智能科技和与华为生态系统的深度整合，鸿蒙智行不仅重新定义了豪华车市场标准，还为未来智能出行树立了新标杆。"
     },
     {
         "id": "b84c7962-2971-53de-a99b-3c9e45492c79",
-        "title": "Apple Joins OpenAI Board as Observer, Strengthens AI Collaboration",
-        "summary": "Apple has appointed Phil Schiller to an observer role on OpenAI's board, enhancing their AI partnership. This move follows Apple's plan to integrate ChatGPT into its devices, including iPhones and Macs. Schiller will attend board meetings without voting rights, providing Apple with insights into OpenAI's decisions. The collaboration, which involves no financial transactions, allows OpenAI access to millions of Apple users while Apple benefits from advanced AI features, aligning with its broader AI strategy."
+        "title": "Apple Joins OpenAI Board as Observer, Enhances AI Integration",
+        "summary": "Apple has taken a significant step in advancing its AI capabilities by securing an observer role on OpenAI's board. This collaboration will see the integration of OpenAI's ChatGPT into Apple's devices, enhancing user experiences with advanced AI features. Phil Schiller, Apple's former marketing chief, will represent Apple in this role, gaining insights into OpenAI's operations. This move positions Apple alongside Microsoft in the AI sector, promising innovative advancements in consumer technology."
     }
 ]

ui/app/news/[id]/layout.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function NewsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <Link href="/" className="text-blue-500 hover:underline mb-4 inline-block">
+        &larr; Back to News List
+      </Link>
+      {children}
+    </div>
+  );
+}

ui/app/news/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { fetchNewsData } from "../../../lib/fetchNewsData";
+import NewsDetail from "../../../components/NewsDetail";
+
+
+export default async function NewsPage({ params }: { params: { id: string } }) {
+  const newsData = await fetchNewsData(params.id);
+
+  if (!newsData) {
+    return <div>News not found</div>;
+  }
+
+  return <NewsDetail news={newsData} />;
+}

ui/components/ContextItem.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Image from "next/image";
+
+interface ContextItemProps {
+  item: {
+    name: string;
+    url: string;
+    description: string;
+    provider: { name: string; image?: { thumbnail: { contentUrl: string } } }[];
+    datePublished: string;
+    image?: {
+      contentUrl: string;
+      thumbnail: { contentUrl: string; width: number; height: number };
+    };
+  };
+}
+
+const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
+  return (
+    <div className="border p-4 rounded-lg mb-4">
+      <h4 className="font-bold">{item.name}</h4>
+      {item.image && (
+        <Image
+          src={item.image.contentUrl}
+          alt={item.name}
+          width={item.image.thumbnail.width}
+          height={item.image.thumbnail.height}
+          className="my-2 rounded"
+        />
+      )}
+      <p>{item.description}</p>
+      <div className="text-sm text-gray-500 mt-2">
+        {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
+      </div>
+      <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+        Read more
+      </a>
+    </div>
+  );
+};
+
+export default ContextItem;

ui/components/NewsDetail.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import ContextItem from "./ContextItem";
+
+interface NewsDetailProps {
+  news: {
+    title: string;
+    sections: {
+      title: string;
+      content: string;
+      context: any[];
+    }[];
+  };
+}
+
+const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => {
+  return (
+    <article className="prose lg:prose-xl">
+      <h1>{news.title}</h1>
+      {news.sections.map((section, index) => (
+        <section key={index}>
+          <h2>{section.title}</h2>
+          <p>{section.content}</p>
+          <div className="mt-4">
+            <h3>Related Context:</h3>
+            {section.context.map((item, i) => (
+              <ContextItem key={i} item={item} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </article>
+  );
+};
+
+export default NewsDetail;

ui/components/NewsPage.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Newspaper } from "lucide-react";
+import Link from "next/link";
 
 interface NewsItem {
   id: string;
@@ -51,7 +52,7 @@ const NewsPage = () => {
         <div className="flex flex-row items-center justify-center min-h-screen">
           <p className="text-black/70 dark:text-white/70 text-sm">Loading news...</p>
         </div>
-      ) : error ? (
+      ) : (error ? (
         <div className="flex flex-col items-center justify-center min-h-screen">
           <p className="text-red-500 text-sm mb-2">Failed to load news.</p>
           <p className="text-red-500 text-xs">{error}</p>
@@ -61,15 +62,22 @@ const NewsPage = () => {
           {news.length === 0 ? (
             <p className="text-black/70 dark:text-white/70 text-sm text-center">No news available.</p>
           ) : (
-            news.map((item) => (
-              <div key={item.id} className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4">
-                <h3 className="text-black dark:text-white lg:text-xl font-medium">{item.title}</h3>
+            news.map(item => (
+              <div
+                key={item.id}
+                className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4"
+              >
+                <Link href={`/news/${item.id}`}>
+                  <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline cursor-pointer">
+                    {item.title}
+                  </h3>
+                </Link>
                 <p className="text-black/70 dark:text-white/70 text-sm">{item.summary}</p>
               </div>
             ))
           )}
         </div>
-      )}
+      ))}
     </div>
   );
 };

ui/lib/fetchNewsData.ts

@@ -0,0 +1,9 @@
+export async function fetchNewsData(id: string) {
+  const response = await fetch(
+    `https://raw.githubusercontent.com/newspedia-crew/newspedia-web/intern-change/public/data/${id}.json`,
+  );
+  if (!response.ok) {
+    return null;
+  }
+  return response.json();
+}

ui/next.config.js

@@ -2,14 +2,20 @@
 // eslint-disable-next-line no-undef, @typescript-eslint/no-var-requires
 const webpack = require("webpack");
 
-/** @type {import('next').NextConfig} */
+/** @type {import("next").NextConfig} */
 const nextConfig = {
   images: {
     remotePatterns: [
       {
-        hostname: "s2.googleusercontent.com",
+        protocol: "https",
+        hostname: "**",
+      },
+      {
+        protocol: "http",
+        hostname: "**",
       },
     ],
+    domains: ["raw.githubusercontent.com"],
   },
 
   webpack: (config, { isServer }) => {
@@ -36,4 +42,4 @@ const nextConfig = {
 };
 
 // eslint-disable-next-line no-undef
-module.exports = nextConfig;
+module.exports = nextConfig;