refactor web v2

Makefile

@@ -36,10 +36,11 @@ init: \
 	else \
 		echo "\e[1;33mmage is already installed\e[0m" ; \
 	fi
+	@npm install
 
 .PHONY: run
 run:
-	hugo server -D --bind 0.0.0.0
+	npm run dev
 
 .PHONY: subup
 subup:

next.config.ts

@@ -10,7 +10,7 @@ const nextConfig: NextConfig = {
 
 const withMDX = createMDX({
   // Add markdown plugins
-  extension: /\.mdx?$/,
+  extension: /\.md?$/,
   options: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [],

package-lock.json

   "typescript": ">=4.8.4 <5.9.0" 
 "node_modules/@types/estree": { 
   "version": "1.0.7", 
   "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", 
   "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", 
   "license": "MIT" 
 }, 
 "node_modules/@types/estree-jsx": { 
   "version": "1.0.5", 
   "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz", 
   "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==", 
 "node_modules/@types/mdx": { 
   "version": "2.0.13", 
   "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", 
   "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==", 
   "license": "MIT" 
 }, 
 "node_modules/@types/ms": { 
   "version": "2.1.0", 
   "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", 
   "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==", 
   "@eslint-community/regexpp": "^4.10.0", 
   "@typescript-eslint/scope-manager": "8.30.1", 
   "@typescript-eslint/type-utils": "8.30.1", 
   "@typescript-eslint/utils": "8.30.1", 
   "@typescript-eslint/visitor-keys": "8.30.1", 
   "graphemer": "^1.4.0", 
   "ignore": "^5.3.1", 
   "natural-compare": "^1.4.0", 
   "ts-api-utils": "^2.0.1" 
 }, 
 "engines": { 
   "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 
 }, 
 "funding": { 
   "type": "opencollective", 
   "url": "https://opencollective.com/typescript-eslint" 
   "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 
 }, 
 "funding": { 
   "type": "opencollective", 
   "url": "https://opencollective.com/typescript-eslint" 
 }, 
 "peerDependencies": { 
   "eslint": "^8.57.0 || ^9.0.0", 
   "typescript": ">=4.8.4 <5.9.0" 
   "@typescript-eslint/types": "8.30.1", 
   "@typescript-eslint/visitor-keys": "8.30.1" 
 }, 
 "engines": { 
   "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 
 }, 
 "funding": { 
   "type": "opencollective", 
   "url": "https://opencollective.com/typescript-eslint" 
   "@typescript-eslint/typescript-estree": "8.30.1", 
   "@typescript-eslint/utils": "8.30.1", 
   "debug": "^4.3.4", 
   "ts-api-utils": "^2.0.1" 
 }, 
 "engines": { 
   "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 
 }, 
 "funding": { 
   "type": "opencollective", 
   "url": "https://opencollective.com/typescript-eslint" 
 }, 
 "peerDependencies": { 
   "eslint": "^8.57.0 || ^9.0.0", 
   "typescript": ">=4.8.4 <5.9.0" 

package.json

@@ -11,30 +11,30 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.0.3",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@next/mdx": "^15.3.0",
+    "@radix-ui/react-navigation-menu": "^1.2.6",
     "@radix-ui/react-slot": "^1.1.1",
     "@types/mdx": "^2.0.13",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "next": "15.0.3",
     "next-themes": "^0.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.4.0",
-    "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.5.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
+    "@types/node": "^20.17.30",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "eslint": "^8.57.1",
     "eslint-config-next": "15.0.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3"
   }
 }

src/components/CardGrid.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import Link from "next/link";
-import { useState } from "react"; 
-
 export default function CardGrid() {
   const cards = [
     {
@@ -113,4 +110,4 @@ export default function CardGrid() {
       </div>
     </div>
   );
-}
+}

src/components/ThemeToggle.tsx

@@ -5,7 +5,6 @@ import { Moon, Sun } from "lucide-react";
 
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-
   return (
     <button
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}

src/components/TopArticles.tsx

@@ -2,23 +2,23 @@
 
 import React from "react";
 
-const articles = [
-  {
-    title: "Improving Vald Search Performance through Parameter Tuning",
-    image: "/images/article1.png",
-    link: "https://example.com/article1",
-  },
-  {
-    title: "Improving Vald Search Performance through Parameter Tuning",
-    image: "/images/article2.png",
-    link: "https://example.com/article2",
-  },
-  {
-    title: "Improving Vald Search Performance through Parameter Tuning",
-    image: "/images/article3.png",
-    link: "https://example.com/article3",
-  },
-];
+// const articles = [
+//   {
+//     title: "Improving Vald Search Performance through Parameter Tuning",
+//     image: "/images/article1.png",
+//     link: "https://example.com/article1",
+//   },
+//   {
+//     title: "Improving Vald Search Performance through Parameter Tuning",
+//     image: "/images/article2.png",
+//     link: "https://example.com/article2",
+//   },
+//   {
+//     title: "Improving Vald Search Performance through Parameter Tuning",
+//     image: "/images/article3.png",
+//     link: "https://example.com/article3",
+//   },
+// ];
 
 export default function Articles() {
   return (
@@ -34,10 +34,10 @@ export default function Articles() {
         {/* 記事カードグリッド */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {/* {articles.map((article, index) => (
-            <a 
-              key={index} 
-              href={article.link} 
-              target="_blank" 
+            <a
+              key={index}
+              href={article.link}
+              target="_blank"
               rel="noopener noreferrer"
               className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-300 transition-transform transform hover:scale-105"
             >

src/components/TopTechs.tsx

@@ -1,8 +1,17 @@
-"use client"; // Next.js の Client Component
-
 import React from "react";
 
-const baseTechnologies = [
+type cardProps = {
+    name: string;
+    image: string;
+    link: string;
+}
+
+type gridCardProps = {
+  keyName: string;
+  value: cardProps[];
+}
+
+const baseTechnologies: cardProps[] = [
   { name: "Go", image: "images/logo_go.svg", link: "https://golang.org/" },
   {
     name: "Rust",
@@ -34,7 +43,7 @@ const baseTechnologies = [
   },
 ];
 
-const sdks = [
+const sdks: cardProps[] = [
   { name: "Go", image: "images/logo_go.svg", link: "https://golang.org/" },
   {
     name: "Java",
@@ -58,53 +67,40 @@ const sdks = [
   },
 ];
 
+const GenCard: React.FC<gridCardProps> = ({ keyName, value }) => {
+  return (
+    <>
+      <h2 className="text-3xl font-bold text-primary mb-8">{keyName}</h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 place-items-center">
+        {value.map((info, idx) => (
+          <a
+            key={idx}
+            href={info.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-white border border-gray-300 rounded-lg p-4 flex flex-col items-center transition-transform transform hover:scale-105"
+          >
+            <img
+              src={info.image}
+              alt={info.name}
+              className="h-12 w-12 object-contain mb-2"
+            />
+            <p className="text-sm font-semibold text-gray-700">{info.name}</p>
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}
+
 export default function TechGrid() {
   return (
     <section className="py-16 bg-white px-6">
       <div className="max-w-6xl mx-auto text-center">
         {/* Base Technologies */}
-        <h2 className="text-3xl font-bold text-primary mb-8">
-          Base technologies
-        </h2>
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 place-items-center">
-          {baseTechnologies.map((tech, index) => (
-            <a
-              key={index}
-              href={tech.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white border border-gray-300 rounded-lg p-4 flex flex-col items-center transition-transform transform hover:scale-105"
-            >
-              <img
-                src={tech.image}
-                alt={tech.name}
-                className="h-12 w-12 object-contain mb-2"
-              />
-              <p className="text-sm font-semibold text-gray-700">{tech.name}</p>
-            </a>
-          ))}
-        </div>
-
+        <GenCard keyName="Base Technologies" value={baseTechnologies} />
         {/* SDKs */}
-        <h2 className="text-3xl font-bold text-primary mt-16 mb-8">SDKs</h2>
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 place-items-center">
-          {sdks.map((sdk, index) => (
-            <a
-              key={index}
-              href={sdk.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white border border-gray-300 rounded-lg p-4 flex flex-col items-center transition-transform transform hover:scale-105"
-            >
-              <img
-                src={sdk.image}
-                alt={sdk.name}
-                className="h-12 w-12 object-contain mb-2"
-              />
-              <p className="text-sm font-semibold text-gray-700">{sdk.name}</p>
-            </a>
-          ))}
-        </div>
+        <GenCard keyName="SDKs" value={sdks} />
       </div>
     </section>
   );

src/components/TopUsers.tsx

@@ -1,5 +1,3 @@
-"use client"; // Next.js の Client Component
-
 import React from "react";
 
 export default function TechGrid() {
@@ -11,7 +9,7 @@ export default function TechGrid() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
         <div className="p-6 bg-white rounded-lg shadow-md flex items-center">
           <img
-            src="https://via.placeholder.com/64"
+            // src="https://via.placeholder.com/64"
             alt="User 1"
             className="w-16 h-16 rounded-full mr-4"
           />
@@ -22,7 +20,7 @@ export default function TechGrid() {
         </div>
         <div className="p-6 bg-white rounded-lg shadow-md flex items-center">
           <img
-            src="https://via.placeholder.com/64"
+            // src="https://via.placeholder.com/64"
             alt="User 2"
             className="w-16 h-16 rounded-full mr-4"
           />

src/components/base.tsx

@@ -11,7 +11,7 @@ export default function Base({
   className?: string;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html id="root" lang="en" suppressHydrationWarning>
       <body>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <Header />

src/components/footer.tsx

@@ -1,9 +1,6 @@
-"use client"; // Next.js の Client Component
+"use client";
 
 import React from "react";
-// import { FaGithub } from "react-icons/fa";
-// import { PiXLogoBold } from "react-icons/pi"; // X (Twitter) アイコン
-// import { FaSlack } from "react-icons/fa"; // Slack アイコン
 
 export default function Footer() {
   return (

src/components/header.tsx

@@ -1,4 +1,4 @@
-"use client"; // クライアントコンポーネントであることを明示
+"use client";
 
 import { useState, useEffect } from "react";
 import { FaGithub, FaSlack, FaBars, FaTimes } from "react-icons/fa";
@@ -36,7 +36,6 @@ export default function Header() {
     fetchGitHubStars();
   }, []);
 
-  // バージョン一覧
   const versions = [
     "v1.7.16",
     "v1.7",
@@ -128,7 +127,7 @@ export default function Header() {
               className="flex items-center space-x-2 hover:text-[#666666]"
             >
               <FaGithub className="h-5 w-5" />
-              {starCount !== null ? (
+              {starCount ? (
                 <span className="text-sm font-medium">
                   {starCount.toLocaleString()}
                 </span>