✨ feat(article): sbs news

app/(home)/article/[slug]/_components/text.tsx

@@ -1,11 +1,16 @@
+import { RenderMDTextServer } from "@/components/render-md-server";
 import { SelectToSearch } from "@/hooks/use-select-to-search";
-import { renderMDTextServer } from "@/utils/render-md-server";
+import { notoKR } from "@/utils/fonts";
+import clsx from "clsx";
 
 const Text = ({ content }: { content: string }) => {
 	const resolvedContent = content.replace("frameborder", "frameBorder");
 	return (
 		<SelectToSearch showAdd prompt="sentence">
-			{renderMDTextServer(resolvedContent)}
+			<RenderMDTextServer
+				text={resolvedContent}
+				className={clsx(notoKR.className, "pt-2")}
+			/>
 		</SelectToSearch>
 	);
 };

app/(home)/article/[slug]/page.tsx

@@ -4,10 +4,10 @@ import {
 	articleRevalidateKey,
 	getArticleRevalidateKey,
 } from "@/actions/user-dict-utils";
+import { RenderMDTextServer } from "@/components/render-md-server";
 import type { SubtitleCues, SubtitleSeries } from "@/types/article";
 import { notoKR } from "@/utils/fonts";
 import { getBaseURL } from "@/utils/get-base-url";
-import { renderMDTextServer } from "@/utils/render-md-server";
 import clsx from "clsx";
 import { getTranslations } from "next-intl/server";
 import { unstable_cache } from "next/cache";
@@ -119,7 +119,7 @@ const SlugPage = async ({
 							viewTransitionName: `article-description-${article.id}`,
 						}}
 					>
-						{renderMDTextServer(article.description)}
+						<RenderMDTextServer text={article.description} />
 					</div>
 					{article.type === "MOVIE" && <EPSelect article={article} />}
 				</div>

app/(home)/article/page.tsx

@@ -1,6 +1,6 @@
 import { getArticles } from "@/actions/article-actions";
+import { RenderMDTextServer } from "@/components/render-md-server";
 import { notoKR } from "@/utils/fonts";
-import { renderMDTextServer } from "@/utils/render-md-server";
 import { getTranslations } from "next-intl/server";
 import { Link } from "next-view-transitions";
 
@@ -14,11 +14,14 @@ export const generateMetadata = async () => {
 
 const ArticlePage = async () => {
 	const articles = await getArticles();
+	const sortedArticles = articles.toSorted((a, b) =>
+		a.type === "MOVIE" ? -1 : b.type === "MOVIE" ? 1 : 0,
+	);
 
 	return (
 		<div className="container px-4 py-8 mx-auto">
 			<div className="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-[1024px]">
-				{articles.map(async (article) => (
+				{sortedArticles.map(async (article) => (
 					<div
 						key={article.id}
 						className="card shadow-lg !rounded-xl backdrop-blur-lg bg-white/10"
@@ -38,7 +41,7 @@ const ArticlePage = async () => {
 							</Link>
 						</figure>
 						<div
-							className="card-body p-6"
+							className="card-body p-6 justify-between"
 							style={{ fontFamily: notoKR.style.fontFamily }}
 						>
 							<h2
@@ -52,7 +55,7 @@ const ArticlePage = async () => {
 									viewTransitionName: `article-description-${article.id}`,
 								}}
 							>
-								{await renderMDTextServer(article.description)}
+								<RenderMDTextServer text={article.description} />
 							</div>
 						</div>
 					</div>

app/api/cron/sbs-news/route.ts

@@ -10,6 +10,17 @@ const channelId = "UCkinYTS9IHqOEwR1Sze2JTw";
 // Ensure you set this as an environment variable
 const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;
 
+function decodeHtmlEntities(text: string | null | undefined): string {
+	if (!text) return "";
+	return text
+		.replace(/'/g, "'")
+		.replace(/"/g, '"')
+		.replace(/&/g, "&")
+		.replace(/&lt;/g, "<")
+		.replace(/&gt;/g, ">");
+}
+
+// When setting the title or description
 export async function GET() {
 	try {
 		if (!YOUTUBE_API_KEY) {
@@ -49,11 +60,13 @@ export async function GET() {
 
 				const videoStats = statsResponse.data.items?.[0]?.statistics;
 				const fullSnippet = statsResponse.data.items?.[0]?.snippet;
-				console.log("item.snippet?.thumbnails", item.snippet?.thumbnails);
+
 				return {
 					videoId,
-					title: item.snippet?.title,
-					description: fullSnippet?.description || item.snippet?.description,
+					title: decodeHtmlEntities(item.snippet?.title),
+					description: decodeHtmlEntities(
+						fullSnippet?.description || item.snippet?.description,
+					),
 					publishedAt: item.snippet?.publishedAt,
 					viewCount: Number(videoStats?.viewCount || 0),
 					thumbnailUrl: item.snippet?.thumbnails?.high?.url,

app/api/cron/sbs-news/template.ts

@@ -13,12 +13,12 @@ const buildContent = (video: Video) => {
     width="560"
     height="315"
     src="https://www.youtube.com/embed/${video.videoId}"
-    title="${video.title}"
+    title="${video.title?.replace(/"/g, '\\"')}"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 />
 
-
+---
 
 ${video.description}
 

app/components/home-status/display-name.tsx

@@ -1,11 +1,11 @@
+import { Pronunciation } from "@/components/pronunciation";
 import { useDevice } from "@/hooks/use-device";
 import { useHoverToSearch } from "@/hooks/use-hover-to-search";
 import type { DictItem } from "@/types/dict";
 import { notoKR } from "@/utils/fonts";
 import { generateWordSuggestionPrompt } from "@/utils/prompts";
 import clsx from "clsx";
 import { romanize, standardizePronunciation } from "es-hangul";
-import { Pronunciation } from "../pronunciation";
 import { Star } from "./star";
 
 const DisplayName = ({

app/components/render-md-server.tsx

@@ -0,0 +1,16 @@
+import { components } from "@/components/markdown-render";
+import clsx from "clsx";
+import { compileMDX } from "next-mdx-remote/rsc";
+
+const RenderMDTextServer = async ({
+	text,
+	className,
+}: { text: string; className?: string }) => {
+	const { content } = await compileMDX({
+		source: text,
+		components: { ...components },
+	});
+	return <div className={clsx("markdown-body", className)}>{content}</div>;
+};
+
+export { RenderMDTextServer };

app/styles/_markdown.css

@@ -52,4 +52,12 @@
 	li > pre {
 		@apply mobile:max-w-[calc(100vw-7rem)];
 	}
+
+	hr {
+		@apply !h-0.5
+	}
+
+	iframe {
+		@apply !w-[-webkit-fill-available] !h-auto !aspect-video;
+	}
 }