Merge pull request #2672 from tequdev/ja-blog

[JA] translate blog top page

@i18n/ja/translations.yaml

@@ -37,6 +37,7 @@ sidebar.resources.xrpl-learning-portal: XRPL学習ポータル
 sidebar.resources.xrpl-brand-kit: XRPLブランドキット
 sidebar.resources.ledger-explorer: エクスプローラ
 sidebar.resources.contribute-documentation.contributor-code-of-conduct: 行動規範
+sidebar.blog: ブログ
 
 topnav.about.xrp-ledger: XRP Ledger
 topnav.about.xrpl-overview: XRPLの概要
@@ -770,6 +771,24 @@ Trust for: トラストラインの設定
 "Testnet XRP Available:": 利用可能なTestnet XRP
 Transaction History: トランザクション履歴
 
+# blob/index.page.tsx
+XRPL Blog: XRPLブログ
+blog.banner.date.part1: YYYY
+blog.banner.date.part2: /
+blog.banner.date.part3: MM/DD
+blog.card.date: YYYY/MM/DD
+"Filter by Category:": カテゴリで絞り込む
+"Filter by:": 絞り込む
+Category: カテゴリ
+General: 一般
+Release Notes: リリースノート
+Advisories: お知らせ
+Amendments: Amendment
+Development: 開発
+Developer Reflections: 開発者の声
+Features: 機能
+# Security: セキュリティ
+
 Open Source.: オープンソース
 Jump to top of page: ページの先頭へ
 Edit page: ページを編集
@@ -817,7 +836,6 @@ Everything You Need to Know: 全てはここに
 XRP Ledger address, transaction ID, or ledger index: XRP Ledgerアドレス、トランザクションID、またはレジャーインデックス
 Status: ステータス
 (loading): （ローディング中）
-Release Notes: リリースノート
 Carbon Markets/Sustainability: 持続可能性
 Ledger City is a crypto real estate game powered by the XRP Ledger.: Ledger Cityは、XRP Ledgerを利用した暗号不動産ゲームです。
 Ripple's CBDC Platform: Ripple社のCBDC Platform\

blog/index.page.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { useThemeHooks } from "@redocly/theme/core/hooks";
+import { Link } from "@redocly/theme/components/Link/Link";
 import moment from "moment";
 
 export const frontmatter = {
@@ -89,9 +90,10 @@ export default function Index() {
               <div className="text-bg">
                 <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
                   <span className="post-date pb-2">
-                    {translate(`${moment(heroPost.date).format("MMM")}`)}
+                    {moment(heroPost.date).format(translate("blog.banner.date.part1","MMM"))}
                   </span>
-                  {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
+                  {translate("blog.banner.date.part2", " ")}
+                  {moment(heroPost.date).format(translate("blog.banner.date.part3","DD YYYY"))}
                 </h4>
                 <div className="pb-8">
                   <div
@@ -101,18 +103,18 @@ export default function Index() {
                   </div>
                 </div>
                 <h4 className="mb-8 h2-sm font-weight-bold">
-                  <a href={`/blog/${heroPost.link}`}>
+                  <Link to={`/blog/${heroPost.link}`}>
                     {translate(`${heroPost.title}`)}
-                  </a>
+                  </Link>
                 </h4>
                 <p className="mb-4">{translate(`${heroPost.description}`)}</p>
                 <div className="d-lg-block">
-                  <a
+                  <Link
                     className="btn btn-primary btn-arrow"
-                    href={`/blog/${heroPost.link}`}
+                    to={`/blog/${heroPost.link}`}
                   >
                     {translate("Read More")}
-                  </a>
+                  </Link>
                 </div>
               </div>
             </div>
@@ -125,7 +127,7 @@ export default function Index() {
             <div className="col-lg-4 m-0 p-0 mt-2">
               {/* Filters Desktop*/}
               <div className="p-3 category_sidebar d-none d-lg-block">
-                <p className="mb-2 category-header">Filter by Category:</p>
+                <p className="mb-2 category-header">{translate("Filter by Category:")}</p>
                 <div className="d-flex flex-column p-3">
                   {Object.keys(categories).map((item) => (
                     <div key={item} className="category-checkbox pb-2">
@@ -151,13 +153,13 @@ export default function Index() {
               {/* End Desktop Filters */}
               {/* Filters Mobile */}
               <div className="col d-flex flex-column p-0 d-lg-none mb-4">
-                <p className="mb-2 category-header">Filter by:</p>
+                <p className="mb-2 category-header">{translate("Filter by:")}</p>
                 <div className="dropdown">
                   <button
                     className="dropdown-btn"
                     onClick={() => setOpen((open) => !open)}
                   >
-                    Category
+                    {translate("Category")}
                     <img alt="dropdown arrow" />
                   </button>
                   {open && (
@@ -212,25 +214,25 @@ export default function Index() {
                   </div>
                   <div>
                     <p id="card-date" className="mb-0">
-                      {moment(translate(card.date)).format("MMM DD, YYYY")}
+                      {moment(card.date).format(translate("blog.card.date","MMM DD, YYYY"))}
                       { card.author ? ` by ${card.author}` : ""}
                     </p>
                     <h5 className="mb-2-sm h3-sm">
-                      <a href={`/blog/${card.link}`}>
+                      <Link to={`/blog/${card.link}`}>
                       {translate(card.title)}
-                      </a>
+                      </Link>
                     </h5>
                   </div>
                   <div className="d-lg-block">
                     <p className="line-clamp">{translate(card.description)}</p>
                   </div>
                   <div className="d-lg-block">
-                    <a
+                    <Link
                       className="btn btn-primary btn-arrow"
-                      href={`/blog/${card.link}`}
+                      to={`/blog/${card.link}`}
                     >
                       {translate("Read More")}
-                    </a>
+                    </Link>
                   </div>
                 </div>
               ))}

blog/sidebars.yaml

@@ -1,4 +1,5 @@
 - group: Blog
+  groupTranslationKey: sidebar.blog
   page: blog/index.page.tsx
   expanded: true
   items: