Change wording from New content to Recent features on version home pages; update links (#1376)

josh-wong · web-flow · commit 10ab3ae87d55 · 2025-07-17T19:04:12.000+09:00
* Change UI text from `New content` to `New features`

* Change UI text from `新着コンテンツ` to `新機能`

* Revise code comment

* Make constant name match label name change

* Make style class names match label name change

* Change `new feature` wording to `recent features`

Since the docs shown on the `new features` line won't always be new for that version of docs that the visitor is reading, `recent features` is more appropriate wording here.

* Change `new feature` wording to `recent features`

Since the docs shown on the `new features` line won't always be new for that version of docs that the visitor is reading, `recent features` is more appropriate wording here.

* Change link for diversity's sake

* Revise comment about links in the `Recent features` section

* Change `new feature` wording to `recent features`

Since the docs shown on the `new features` line won't always be new for that version of docs that the visitor is reading, `recent features` is more appropriate wording here.

* Update links

* Add comment about link guidelines

* Add link to doc/feature introduced in 3.15

* Apply suggestions from Gemini review
diff --git a/src/components/Cards/3.13.tsx b/src/components/Cards/3.13.tsx
@@ -16,26 +16,27 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: 'New content',
+    name: 'Recent features',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
-        links: ['api-guide#group-commit-for-the-coordinator-table'],
-        labels: ['Group commit for the Coordinator table']
+        links: ['run-non-transactional-storage-operations-through-library'],
+        labels: ['Configure ScalarDB to run non-transactional storage operations']
       },
       {
         cell: 1, // Second cell
-        links: ['run-non-transactional-storage-operations-through-library#configure-scalardb-to-run-non-transactional-storage-operations'],
-        labels: ['Configure ScalarDB to run non-transactional storage operations']
+        links: ['scalardb-cluster/run-non-transactional-storage-operations-through-sql-interface'],
+        labels: ['Configure ScalarDB Cluster to run non-transactional storage operations']
       },
       {
         cell: 2, // Third cell
-        links: ['scalardb-cluster/run-non-transactional-storage-operations-through-sql-interface/#configure-scalardb-cluster-to-run-non-transactional-storage-operations'],
-        labels: ['Configure ScalarDB Cluster to run non-transactional storage operations']
+        links: ['scalardb-cluster/scalardb-auth-with-sql'],
+        labels: ['Authenticate and Authorize Users']
       }
     ]
   }
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/3.14.tsx b/src/components/Cards/3.14.tsx
@@ -16,12 +16,13 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: 'New content',
+    name: 'Recent features',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
         links: ['scalardb-cluster/encrypt-data-at-rest'],
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/3.15.tsx b/src/components/Cards/3.15.tsx
@@ -16,26 +16,27 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: 'New content',
+    name: 'Recent features',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
-        links: ['features'],
-        labels: ['ScalarDB Features']
-      },
-      {
-        cell: 1, // Second cell
         links: ['scalardb-cluster/getting-started-with-vector-search'],
         labels: ['Getting Started with ScalarDB Cluster for Vector Search']
       },
       {
-        cell: 2, // Third cell
+        cell: 1, // Second cell
         links: ['scalardb-cluster/authorize-with-abac'],
         labels: ['Control User Access in a Fine-Grained Manner']
+      },
+      {
+        cell: 2, // Third cell
+        links: ['scalardb-cluster/encrypt-data-at-rest'],
+        labels: ['Encrypt Data at Rest']
       }
     ]
   }
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/3.16.tsx b/src/components/Cards/3.16.tsx
@@ -16,26 +16,27 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: 'New content',
+    name: 'Recent features',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
-        links: ['api-guide#begin-or-start-a-transaction-in-read-only-mode'],
-        labels: ['Begin or start a transaction in read-only mode']
+        links: ['scalardb-cluster/getting-started-with-vector-search'],
+        labels: ['Getting Started with ScalarDB Cluster for Vector Search']
       },
       {
         cell: 1, // Second cell
-        links: ['consensus-commit#one-phase-commit'],
-        labels: ['One-phase commit']
+        links: ['scalardb-cluster/authorize-with-abac'],
+        labels: ['Control User Access in a Fine-Grained Manner']
       },
       {
         cell: 2, // Third cell
-        links: ['configurations#scan-fetch-size'],
-        labels: ['Scan fetch size']
+        links: ['scalardb-cluster/encrypt-data-at-rest'],
+        labels: ['Encrypt Data at Rest']
       }
     ]
   }
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/ja-jp/3.13.tsx b/src/components/Cards/ja-jp/3.13.tsx
@@ -16,26 +16,27 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: '新着コンテンツ',
+    name: '最近の機能',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
-        links: ['api-guide#coordinator-テーブルのグループコミット'],
-        labels: ['Coordinator テーブルのグループコミット']
+        links: ['run-non-transactional-storage-operations-through-library'],
+        labels: ['非トランザクショナルストレージ操作を実行するための ScalarDB の設定']
       },
       {
         cell: 1, // Second cell
-        links: ['run-non-transactional-storage-operations-through-library#configure-scalardb-to-run-non-transactional-storage-operations'],
-        labels: ['非トランザクショナルストレージ操作を実行するための ScalarDB の設定']
+        links: ['scalardb-cluster/run-non-transactional-storage-operations-through-sql-interface'],
+        labels: ['非トランザクショナルストレージ操作を実行するための ScalarDB Cluster の設定']
       },
       {
         cell: 2, // Third cell
-        links: ['scalardb-cluster/run-non-transactional-storage-operations-through-sql-interface/#configure-scalardb-cluster-to-run-non-transactional-storage-operations'],
-        labels: ['非トランザクショナルストレージ操作を実行するための ScalarDB Cluster の設定']
+        links: ['scalardb-cluster/scalardb-auth-with-sql'],
+        labels: ['ユーザーの認証と認可']
       }
     ]
   }
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/ja-jp/3.14.tsx b/src/components/Cards/ja-jp/3.14.tsx
@@ -16,12 +16,13 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 
-const new_content = [
+const recentFeatures = [
   {
-    name: '新着コンテンツ',
+    name: '最近の機能',
     categoryLinks: [
-      // To add a link, use the format ['link1', 'link2']
-      // To add a label, use the format ['label1', 'label2']
+      // Links should be to docs about features that have been introduced in this version or the previous version.
+      // To add a link, use the format ['link1', 'link2']. Links should be relative to the docs directory and not be anchor links.
+      // To add a label, use the format ['label1', 'label2'].
       {
         cell: 0, // First cell
         links: ['scalardb-cluster/encrypt-data-at-rest'],
@@ -198,12 +199,12 @@ const CategoryGrid = () => {
         </div>
       </div>
 
-      {/* New content table */}
+      {/* Recent features table */}
       <div className="category-table">
-        {new_content.map((doc, i) => (
+        {recentFeatures.map((doc, i) => (
           <React.Fragment key={i}>
             <div className="category-label">
-              {/* <FontAwesomeIcon icon={faBook} className="new-content-icon" />
+              {/* <FontAwesomeIcon icon={faBook} className="recent-features-icon" />
               &nbsp;{doc.name}*/}
               {doc.name}
             </div>
@@ -215,7 +216,7 @@ const CategoryGrid = () => {
                       {categoryLinkCell.labels[k]}
                     </Link>
                   ) : (
-                    <span key={`${j}-${k}`} className="new-content-cell">
+                    <span key={`${j}-${k}`} className="recent-features-cell">
                       {categoryLinkCell.labels[k]}
                     </span>
                   )
diff --git a/src/components/Cards/ja-jp/3.15.tsx b/src/components/Cards/ja-jp/3.15.tsx
diff --git a/src/components/Cards/ja-jp/3.16.tsx b/src/components/Cards/ja-jp/3.16.tsx
diff --git a/src/css/custom.css b/src/css/custom.css
