✨ feat(article): html lang and prefetch

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

@@ -379,6 +379,7 @@ const ArticleRender = memo(
 									<p
 										className="text-lg leading-relaxed m-0"
 										style={{ fontFamily: notoKR.style.fontFamily }}
+										lang="ko"
 									>
 										{cue.text}
 									</p>

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

@@ -8,6 +8,7 @@ const Text = ({ content }: { content: string }) => {
 	return (
 		<SelectToSearch showAdd prompt="sentence">
 			<RenderMDTextServer
+				lang="ko"
 				text={resolvedContent}
 				className={clsx(notoKR.className, "pt-2")}
 			/>

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

@@ -5,6 +5,7 @@ import {
 	getArticleRevalidateKey,
 } from "@/actions/user-dict-utils";
 import { RenderMDTextServer } from "@/components/render-md-server";
+import { SelectToSearch } from "@/hooks/use-select-to-search";
 import type { SubtitleCues, SubtitleSeries } from "@/types/article";
 import { notoKR } from "@/utils/fonts";
 import { getBaseURL } from "@/utils/get-base-url";
@@ -103,15 +104,18 @@ const SlugPage = async ({
 					</div>
 				)}
 				<div className="flex-1 flex flex-col">
-					<div
-						className="text-4xl font-bold mb-4 leading-tight"
-						style={{
-							fontFamily: notoKR.style.fontFamily,
-							viewTransitionName: `article-title-${article.id}`,
-						}}
-						// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-						dangerouslySetInnerHTML={{ __html: article.title }}
-					/>
+					<SelectToSearch showAdd prompt="sentence">
+						<div
+							className="text-4xl font-bold mb-4 leading-tight"
+							style={{
+								fontFamily: notoKR.style.fontFamily,
+								viewTransitionName: `article-title-${article.id}`,
+							}}
+							// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+							dangerouslySetInnerHTML={{ __html: article.title }}
+							lang="ko"
+						/>
+					</SelectToSearch>
 					<div
 						className="text-base text-base-content/70 leading-relaxed flex-grow"
 						style={{

app/(home)/article/page.tsx

@@ -21,7 +21,7 @@ const ArticlePage = async () => {
 	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]">
-				{sortedArticles.map(async (article) => (
+				{sortedArticles.map((article, index) => (
 					<div
 						key={article.id}
 						className="card shadow-sm hover:shadow-lg hover:scale-105 transition-all duration-300 !rounded-xl backdrop-blur-lg bg-white/10"
@@ -31,6 +31,7 @@ const ArticlePage = async () => {
 								key={article.id}
 								href={`/article/${article.id}`}
 								className="block w-full"
+								prefetch={article.type === "TEXT" && index < 6}
 							>
 								<img
 									src={article.poster || "/icon"}
@@ -49,6 +50,7 @@ const ArticlePage = async () => {
 								style={{ viewTransitionName: `article-title-${article.id}` }}
 								// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
 								dangerouslySetInnerHTML={{ __html: article.title }}
+								lang="ko"
 							/>
 							<div
 								style={{

app/components/header/_component/search.tsx

@@ -25,7 +25,6 @@ type SearchResult = {
 
 const Search = () => {
 	const tHeader = useTranslations("Header");
-	const [isInputFocused, setIsInputFocused] = useState(false);
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState<SearchResult[]>([]);
 	const [searchIndex, setSearchIndex] =
@@ -107,7 +106,7 @@ const Search = () => {
 	};
 
 	return (
-		<div className="relative w-5/6 sm:w-28 sm:focus-within:w-64 transition-[width] [transition-duration:300ms]">
+		<div className="group relative w-5/6 sm:w-28 sm:has-[:focus]:w-64 transition-[width] [transition-duration:300ms]">
 			<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
 				<svg
 					aria-hidden="true"
@@ -132,22 +131,20 @@ const Search = () => {
 				type="search"
 				className="input input-sm w-full pl-10 bg-white/30 peer"
 				placeholder={tHeader("search")}
-				onFocus={() => setIsInputFocused(true)}
 				// TODO: animation lib
-				onBlur={() => setTimeout(() => setIsInputFocused(false), 150)}
 			/>
 			<ul
 				className={clsx(
-					isInputFocused ? "block" : "hidden",
-					"peer-focus:opacity-100 transition-opacity opacity-0 absolute z-10 w-full bg-base-100 bg-transparent backdrop-blur-lg shadow-2xl rounded-lg max-h-[70dvh] sm:max-h-[50dvh] overflow-auto",
+					"group-has-[:focus]:opacity-100 group-has-[:focus]:pointer-events-auto pointer-events-none opacity-0 transition-opacity",
+					"absolute z-10 w-full bg-base-100 bg-transparent backdrop-blur-lg shadow-2xl rounded-lg max-h-[70dvh] sm:max-h-[50dvh] overflow-auto",
 				)}
 			>
 				{results.map((res) => (
 					<li
 						key={`${res.type}-${res.id}`}
-						className="hover:bg-slate-400/40 rounded-md p-2"
+						className="hover:bg-slate-400/40 rounded-md p-2 focus-within:bg-slate-400/40"
 					>
-						<Link href={res.url}>
+						<Link href={res.url} className="focus:outline-none">
 							<div className="text-sm font-bold truncate">
 								{[tHeader(res.level), ...res.relativeReadablePath].join(" > ")}
 							</div>

app/components/render-md-server.tsx

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

app/styles/_markdown.css

@@ -58,6 +58,6 @@
 	}
 
 	iframe {
-		@apply !w-[-webkit-fill-available] !h-auto !aspect-video;
+		@apply !w-[-webkit-fill-available] !h-auto !aspect-video rounded-lg overflow-hidden;
 	}
 }