Merge branch 'dev'

Author: The-Infinitys

next.config.ts

@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  output: "export",
+  // output: "export",
   images: { unoptimized: true },
   trailingSlash: true,
 };

package-lock.json

@@ -12,6 +12,8 @@
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
     "i18next": "^25.0.1",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
     "install": "^0.13.0",
     "negotiator": "^1.0.0",
     "next": "15.3.1",

package.json

@@ -1,7 +1,7 @@
 ---
 title: Researching about Grok AI
 date: "2025-04-30"
-descrption: "Grokに自分自身について説明してもらった"
+description: "Grokに自分自身について説明してもらった"
 ---
 
 # Grok3 についての詳細な記事

public/article-2025/04/grok3/article.md

@@ -0,0 +1,5 @@
+---
+title: May Introduction
+date: "2025-04-30"
+description: ""
+---

public/article-2025/05/may-introduction/article-en.md

@@ -59,12 +59,18 @@ export function getArticleIndexes() {
           const fileContents = fs.readFileSync(articlePath, "utf-8");
           const { data } = matter(fileContents);
 
+          // 言語を判定 (デフォルトは "ja")
+          const langMatch = articlePath.match(/article(?:-(\w+))?\.md$/);
+          const lang = langMatch && langMatch[1] ? langMatch[1] : "ja";
+
           return {
             slug: `${year}/${month}/${articleId}`,
             title: data.title || "Untitled", // タイトルがない場合のデフォルト値
             date: data.date || "Unknown date", // 日付がない場合のデフォルト値
             thumbnail: thumbnailPath,
             articlePath,
+            description: data.description || "No description available", // description を追加
+            lang, // 言語を追加
           };
         })
         .filter(
@@ -89,6 +95,8 @@ export type Article = {
   date: string;
   thumbnail: string | null;
   articlePath: string;
+  description: string; // description を追加
+  lang: string; // lang を追加
 };
 
 // 該当箇所の置き換え
@@ -137,14 +145,14 @@ export function generateArticleButton(article: Article): ReactNode {
             alt={article.title}
             width={300}
             height={200}
-            objectFit="cover"
             placeholder={LoadingImage as PlaceholderValue}
             className="article-thumbnail"
           />
         )}
         <div className="article-content">
           <h2>{article.title}</h2>
           <p>{article.date}</p>
+          <p>{article.description}</p>
         </div>
       </article>
     </Link>

src/app/article/article.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { generateArticleButton, Article } from "../article";
+import useTranslation from "@/i18n/i18n";
+
+interface ArticleListProps {
+  articles: Article[];
+}
+
+export default function ArticleList({ articles }: ArticleListProps) {
+  const { t } = useTranslation;
+  const language = t("info.lang");
+
+  // 言語で記事をフィルタリング
+  const filteredArticles = articles.filter((article) => article.lang === language);
+
+  return (
+    <>
+      <section>
+        <p>{language}</p>
+      </section>
+      <section className="articles">
+        {filteredArticles.map(
+          (article: Article): ReactNode => generateArticleButton(article)
+        )}
+      </section>
+    </>
+  );
+}

src/app/article/components/list.tsx

@@ -1,26 +1,21 @@
-import "@/app/i18n/configs";
-import useTranslation from "i18next";
-import { generateArticleButton, getArticleIndexes, Article } from "./article";
+import useTranslation from "@/i18n/i18n";
+import { getArticleIndexes, Article } from "./article";
 import "./article.css"; // CSSファイルをインポート
-import { ReactNode } from "react";
+import ArticleList from "./components/list";
 
 export default async function Home() {
   const { t } = useTranslation;
   const articles: Article[] = getArticleIndexes();
   return (
     <>
       <section className="title">
-        <h1>{t("article.title")}</h1>
+        <h1>{t("pages.article.title")}</h1>
       </section>
       <section className="description">
-        <p>{t("article.description.msg1")}</p>
-        <p>{t("article.description.msg2")}</p>
-      </section>
-      <section className="articles">
-        {articles.map(
-          (article: Article): ReactNode => generateArticleButton(article)
-        )}
+        <p>{t("pages.article.description.msg1")}</p>
+        <p>{t("pages.article.description.msg2")}</p>
       </section>
+      <ArticleList articles={articles} />
     </>
   );
 }

src/app/article/page.tsx

@@ -153,6 +153,7 @@ footer {
   width: 100%;
   background-color: color-mix(in srgb, var(--primary), transparent 50%);
   backdrop-filter: blur(4px);
+  padding-bottom: 4em;
 }
 
 a {
@@ -200,4 +201,24 @@ a {
 
 .back-to-top svg {
   fill: var(--foreground);
+}
+
+.language-button {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background-color: var(--gray-200);
+  color: var(--foreground);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.language-button.active {
+  background-color: var(--link-color);
+  color: var(--background);
+}
+
+.language-button:last-child {
+  margin-right: 0;
 }