Merge pull request #90 from The-Infinitys/dev

Dev

Author: The-Infinitys

package.json

@@ -14,17 +14,17 @@
     "framer-motion": "^12.18.1",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
-    "i18next": "^25.2.1",
+    "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "install": "^0.13.0",
     "lighthouse": "^12.6.1",
     "negotiator": "^1.0.0",
     "next": "15.3.4",
-    "next-intl": "^4.1.0",
+    "next-intl": "^4.3.4",
     "next-sitemap": "^4.2.3",
     "npm": "^11.4.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "puppeteer": "^24.11.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

src/app/[article_year]/[month]/[aid]/page.css

@@ -277,20 +277,20 @@ html {
 }
 
 .other-articles {
-  position: relative;      /* かぶり防止 */
-  z-index: 1;              /* 他要素より下に */
+  position: relative; /* かぶり防止 */
+  z-index: 1; /* 他要素より下に */
   align-items: center;
   justify-content: center;
   margin-top: 40px;
-  margin-bottom: 40px;     /* 下にも余白を追加 */
-  top: auto;               /* top指定を解除 */
-  width: 100%;             /* 幅を100%に */
+  margin-bottom: 40px; /* 下にも余白を追加 */
+  top: auto; /* top指定を解除 */
+  width: 100%; /* 幅を100%に */
   margin-left: 275px;
   background-color: transparent;
-  padding: 16px 0;         /* 上下に余白 */
-  box-sizing: border-box;  /* パディングを含める */
+  padding: 16px 0; /* 上下に余白 */
+  box-sizing: border-box; /* パディングを含める */
 }
-.other-articles>h2 {
+.other-articles > h2 {
   font-size: 1.5rem;
   margin-bottom: 16px;
   color: var(--foreground);
@@ -335,7 +335,7 @@ html {
     margin-bottom: 4em;
     /* 記事の上部に配置 */
   }
-  
+
   .article-detail {
     position: relative;
     margin: 1rem;

src/app/[article_year]/[month]/[aid]/page.tsx

@@ -48,7 +48,7 @@ export async function generateMetadata({
   const og_image_url = `${slug}/${article?.thumbnail?.split("/").slice(-1)[0]}`;
   const metadata: Metadata = {
     metadataBase: new URL(
-      process.env.BASE_URL || "https://the-infinitys.f5.si"
+      process.env.BASE_URL || "https://the-infinitys.f5.si",
     ),
     title: fullTitle, // ページのタイトルを設定
     description: description, // ページのディスクリプションを設定

src/app/article/article.css

@@ -8,7 +8,7 @@ section.articles {
   align-items: center;
 }
 
-.article-link{
+.article-link {
   background-color: color-mix(in srgb, transparent 50%, var(--primary));
   box-sizing: border-box;
   text-decoration: none;

src/app/globals.css

@@ -3,7 +3,7 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-  --primary:  color-mix(in srgb, var(--foreground), var(--background) 80%);
+  --primary: color-mix(in srgb, var(--foreground), var(--background) 80%);
   --link-color: #0000ff;
   --body-color-value: 0deg;
   --secondary: color-mix(in srgb, var(--foreground), var(--background) 50%);

src/app/layout/header.tsx

@@ -34,6 +34,12 @@ const menus_list = [
     target: "_self",
     label: "Games",
   },
+  {
+    name: "Tools",
+    link: "/tool",
+    target: "_self",
+    label: "Tools",
+  },
 ];
 
 export default function Header() {
@@ -52,9 +58,7 @@ export default function Header() {
     // Added padding, flex layout for alignment
     <header className="p-4 py-6 flex justify-between items-center relative">
       {/* Title */}
-      <div
-        className="flex items-center justify-start"
-      >
+      <div className="flex items-center justify-start">
         <h1
           className={`${chakraPetch.className} italic font-semibold text-4xl`} // text-4xlに変更
         >

src/app/loading.tsx

@@ -1,10 +1,10 @@
 // src/app/loading.tsx
-import styles from './loading.module.css';
+import styles from "./loading.module.css";
 
 export default function Loading() {
   return (
     <div className={styles.loadingContainer}>
       <div className={styles.spinner}></div>
     </div>
   );
-}
+}

src/app/music/[music_id]/components/player.tsx

@@ -46,7 +46,7 @@ export function Player({ music, musicList }: PlayerProps) {
   const [timePosition, setTimePosition] = useState(0);
   const [playbackRate, setPlaybackRate] = useState(1);
   const [source, setSource] = useState<MediaElementAudioSourceNode | null>(
-    null
+    null,
   );
   const [analyserNode, setAnalyserNode] = useState<AnalyserNode | null>(null);
   const [isCircular, setIsCircular] = useState(false);
@@ -97,7 +97,7 @@ export function Player({ music, musicList }: PlayerProps) {
     if (!audioRef.current) return;
     audioCtxRef.current = new AudioContext();
     const elementSource = audioCtxRef.current.createMediaElementSource(
-      audioRef.current
+      audioRef.current,
     );
     const analyser = audioCtxRef.current.createAnalyser();
     analyser.fftSize = 2 ** 8;
@@ -221,7 +221,7 @@ export function Player({ music, musicList }: PlayerProps) {
             innerRadius,
             -barWidthCirc / 2,
             barHeight,
-            barWidthCirc
+            barWidthCirc,
           );
           canvasCtx.restore();
         }
@@ -235,7 +235,7 @@ export function Player({ music, musicList }: PlayerProps) {
             0,
             canvas.height,
             0,
-            0
+            0,
           );
           gradient.addColorStop(0, `hsla(${hue}, 100%, 50%, 0.4)`);
           gradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 0.2)`);
@@ -245,7 +245,7 @@ export function Player({ music, musicList }: PlayerProps) {
             x,
             canvas.height - barHeight,
             barWidth - 1,
-            barHeight
+            barHeight,
           );
           x += barWidth;
         }
@@ -304,15 +304,15 @@ export function Player({ music, musicList }: PlayerProps) {
     if (!audioRef.current) return;
     audioRef.current.currentTime = Math.min(
       audioRef.current.currentTime + 10,
-      duration
+      duration,
     );
   };
 
   const handleSkipBackward = () => {
     if (!audioRef.current) return;
     audioRef.current.currentTime = Math.max(
       audioRef.current.currentTime - 5,
-      0
+      0,
     );
   };
 
@@ -370,7 +370,7 @@ export function Player({ music, musicList }: PlayerProps) {
 
   const handleEqChange = (
     index: number,
-    e: React.ChangeEvent<HTMLInputElement>
+    e: React.ChangeEvent<HTMLInputElement>,
   ) => {
     const newGains = [...eqGains];
     newGains[index] = parseFloat(e.target.value);

src/app/music/music.tsx

@@ -34,10 +34,10 @@ export function getMusicList(): Music[] {
     // 音楽ファイルとジャケット画像を探す
     const musicFile = files.find(
       (file) =>
-        file.endsWith(".mp3") || file.endsWith(".m4a") || file.endsWith(".wav")
+        file.endsWith(".mp3") || file.endsWith(".m4a") || file.endsWith(".wav"),
     );
     const jacketFile = files.find(
-      (file) => file.startsWith("jacket.") || file.startsWith("cover.")
+      (file) => file.startsWith("jacket.") || file.startsWith("cover."),
     );
 
     // music.jsonを読み込む
@@ -70,10 +70,7 @@ export function getMusicList(): Music[] {
 
 export function MusicCard({ music }: { music: Music }) {
   return (
-    <a
-      href={`/music/${music.id}`}
-      className={styles["music-card"]}
-    >
+    <a href={`/music/${music.id}`} className={styles["music-card"]}>
       {music.jacketUrl && (
         <Image
           src={music.jacketUrl}