npocccties · knokmki612 · Oct 28, 2022 · Oct 28, 2022 · Oct 28, 2022 · Oct 28, 2022
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16.16.0-slim as build
+FROM node:16.18.0-slim as build
 WORKDIR /app
 COPY . ./
 ADD https://raw.githubusercontent.com/npocccties/chiloportal/develop/backend/doc/openapi.yaml /backend/doc/openapi.yaml
@@ -11,12 +11,12 @@ ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
 ENV NEXT_PUBLIC_MOODLE_DASHBOARD_URL=${NEXT_PUBLIC_MOODLE_DASHBOARD_URL}
 RUN yarn build
 
-FROM node:16.16.0-slim as install
+FROM node:16.18.0-slim as install
 WORKDIR /app
 COPY . ./
 RUN corepack yarn workspaces focus --all --production
 
-FROM gcr.io/distroless/nodejs:16
+FROM gcr.io/distroless/nodejs:18
 WORKDIR /app
 ENV NODE_ENV=production
 COPY ./public ./public

diff --git a/frontend/README.md b/frontend/README.md
@@ -3,7 +3,7 @@
 ## 動作環境
 
 - OS: Unix 系（Windows では [WSL](https://docs.microsoft.com/ja-jp/windows/wsl/install) 等をお使いください）
-- Node.js: [Active LTS](https://nodejs.org/en/about/releases/)
+- Node.js: ~~[Active LTS](https://nodejs.org/en/about/releases/)~~ v16.18.0
 
 ## 開発
 

diff --git a/frontend/components/Breadcrumbs.tsx b/frontend/components/Breadcrumbs.tsx
@@ -14,8 +14,8 @@ function Breadcrumbs({ className, nodes, leaf }: Props) {
     <div className={clsx("text-gray-700", className)}>
       {nodes.map((node, index) => (
         <Fragment key={index}>
-          <Link href={node.href}>
-            <a className="underline mr-2">{node.name}</a>
+          <Link href={node.href} className="underline mr-2">
+            {node.name}
           </Link>
           <Icon className="inline mr-2" icon="fa6-solid:chevron-right" />
         </Fragment>

diff --git a/frontend/components/Chat.tsx b/frontend/components/Chat.tsx
@@ -134,21 +134,19 @@ function Chat({ className }: Props) {
                         href={pagesPath.wisdom_badges
                           ._wisdomBadgesId(badges.badges_id)
                           .$url()}
+                        className="underline text-primary-700"
                       >
-                        <a className="underline text-primary-700">
-                          {badges.name}
-                        </a>
+                        {badges.name}
                       </Link>
                     </li>
                   ))}
                 </ul>
                 <p>
                   <Link
                     href={pagesPath.search.$url({ query: { q: textarea } })}
+                    className="text-primary-700"
                   >
-                    <a className="text-primary-700">
-                      …他{total_count}件の検索結果を確認する
-                    </a>
+                    …他{total_count}件の検索結果を確認する
                   </Link>
                 </p>
               </>

diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import Link from "next/link";
-import Image from "next/future/image";
+import Image from "next/image";
 import useConsumers from "lib/use-consumers";
 import usePortalCategories from "lib/use-portal-categories";
 import { pagesPath } from "lib/$path";
@@ -17,10 +17,8 @@ function Footer({ className }: Props) {
     <footer className={clsx("bg-gray-50 py-6", className)}>
       <div className="max-w-6xl xl:max-w-7xl mx-auto px-4 flex flex-col sm:flex-row flex-wrap gap-6 mb-6">
         <div className="w-full xl:w-auto">
-          <Link href={pagesPath.$url()}>
-            <a className="inline-block px-2">
-              <Image src="/logo.png" width={142} height={44} alt="" />
-            </a>
+          <Link href={pagesPath.$url()} className="inline-block px-2">
+            <Image src="/logo.png" width={142} height={44} alt="" />
           </Link>
         </div>
         <section>
@@ -34,7 +32,7 @@ function Footer({ className }: Props) {
                         ._consumerId(consumer.consumer_id)
                         .$url()}
                     >
-                      <a>{consumer.name}の育成指標</a>
+                      {consumer.name}の育成指標
                     </Link>
                   </li>
                 ))
@@ -58,7 +56,7 @@ function Footer({ className }: Props) {
                         ._portalCategoryId(portalCategory.portal_category_id)
                         .$url({ query: {} })}
                     >
-                      <a>{portalCategory.name}</a>
+                      {portalCategory.name}
                     </Link>
                   </li>
                 ))
@@ -73,37 +71,33 @@ function Footer({ className }: Props) {
         </section>
         <ul className="text-gray-700 leading-7 sm:columns-2 [&>li]:break-inside-avoid">
           <li>
-            <Link href={pagesPath._slug("concept").$url()}>
-              <a>コンセプト</a>
-            </Link>
+            <Link href={pagesPath._slug("concept").$url()}>コンセプト</Link>
           </li>
           <li>
             <Link href={pagesPath._slug("disclaimer").$url()}>
-              <a>ご利用にあたって（免責事項）</a>
+              ご利用にあたって（免責事項）
             </Link>
           </li>
           <li>
             <Link href={pagesPath._slug("privacy_policy").$url()}>
-              <a>プライバシーポリシー</a>
+              プライバシーポリシー
             </Link>
           </li>
           <li>
             <Link href={pagesPath._slug("about_site").$url()}>
-              <a>このサイトについて</a>
+              このサイトについて
             </Link>
           </li>
           <li>
             <a>サイトマップ</a>
           </li>
           <li>
             <Link href={pagesPath._slug("about_site").$url()}>
-              <a>私たちについて</a>
+              私たちについて
             </Link>
           </li>
           <li>
-            <Link href={pagesPath._slug("contact").$url()}>
-              <a>お問い合わせ</a>
-            </Link>
+            <Link href={pagesPath._slug("contact").$url()}>お問い合わせ</Link>
           </li>
         </ul>
       </div>

diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -1,7 +1,7 @@
 import { useId } from "react";
 import { Icon } from "@iconify/react";
 import Link from "next/link";
-import Image from "next/future/image";
+import Image from "next/image";
 import Popover from "components/Popover";
 import useConsumers from "lib/use-consumers";
 import usePortalCategories from "lib/use-portal-categories";
@@ -45,10 +45,8 @@ function Header({ className }: Props) {
     <header
       className={clsx("flex items-center gap-2 px-8 py-2 bg-white", className)}
     >
-      <Link href={pagesPath.$url()}>
-        <a className="px-2 mr-4">
-          <Image src="/logo.png" width={142} height={44} alt="" />
-        </a>
+      <Link href={pagesPath.$url()} className="px-2 mr-4">
+        <Image src="/logo.png" width={142} height={44} alt="" />
       </Link>
       <Popover className="hidden lg:block" title="育成指標から探す">
         {({ close }) => (
@@ -65,10 +63,9 @@ function Header({ className }: Props) {
                     href={pagesPath.consumers
                       ._consumerId(consumer.consumer_id)
                       .$url()}
+                    className="block px-3 py-2 hover:bg-primary-50"
                   >
-                    <a className="block px-3 py-2 hover:bg-primary-50">
-                      {consumer.name}の育成指標
-                    </a>
+                    {consumer.name}の育成指標
                   </Link>
                 </li>
               ))
@@ -102,10 +99,9 @@ function Header({ className }: Props) {
                     href={pagesPath.portal_categories
                       ._portalCategoryId(portalCategory.portal_category_id)
                       .$url({ query: {} })}
+                    className="block px-3 py-2 hover:bg-primary-50"
                   >
-                    <a className="block px-3 py-2 hover:bg-primary-50">
-                      {portalCategory.name}
-                    </a>
+                    {portalCategory.name}
                   </Link>
                 </li>
               ))
@@ -133,31 +129,31 @@ function Header({ className }: Props) {
           >
             {contents.map((content) => (
               <li key={content.slug} role="menuitem">
-                <Link href={pagesPath._slug(content.slug).$url()}>
-                  <a className="block px-3 py-2 hover:bg-primary-50">
-                    {content.title}
-                  </a>
+                <Link
+                  href={pagesPath._slug(content.slug).$url()}
+                  className="block px-3 py-2 hover:bg-primary-50"
+                >
+                  {content.title}
                 </Link>
               </li>
             ))}
           </ul>
         )}
       </Popover>
       <div className="flex-1" />
-      <Link href={pagesPath.search.$url({ query: {} })}>
-        <a
-          aria-describedby={id}
-          className="jumpu-icon-button group text-2xl w-10 h-10 mr-4"
+      <Link
+        href={pagesPath.search.$url({ query: {} })}
+        aria-describedby={id}
+        className="jumpu-icon-button group text-2xl w-10 h-10 mr-4"
+      >
+        <Icon className="text-gray-700" icon="charm:search" />
+        <span
+          id={id}
+          className="![transform:translate(-50%,_200%)_scale(0)] group-hover:![transform:translate(-50%,_200%)_scale(1)]"
+          role="tooltip"
         >
-          <Icon className="text-gray-700" icon="charm:search" />
-          <span
-            id={id}
-            className="![transform:translate(-50%,_200%)_scale(0)] group-hover:![transform:translate(-50%,_200%)_scale(1)]"
-            role="tooltip"
-          >
-            検索
-          </span>
-        </a>
+          検索
+        </span>
       </Link>
       <a
         className="hidden lg:inline text-primary-700 hover:underline"

diff --git a/frontend/components/KnowledgeBadgesItem.tsx b/frontend/components/KnowledgeBadgesItem.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import Image from "next/future/image";
+import Image from "next/image";
 import { BadgeDetail2 } from "api/@types";
 import { getImagePath } from "lib/criteria";
 

diff --git a/frontend/components/Pagination.tsx b/frontend/components/Pagination.tsx
@@ -21,10 +21,8 @@ function Pagination({ className, totalCount, start, end, handleHref }: Props) {
     <ul className={clsx("flex items-center gap-2", className)}>
       <li>
         {prevPage ? (
-          <Link href={handleHref(prevPage)}>
-            <a className="jumpu-icon-button">
-              <Icon icon="fa6-solid:chevron-left" />
-            </a>
+          <Link href={handleHref(prevPage)} className="jumpu-icon-button">
+            <Icon icon="fa6-solid:chevron-left" />
           </Link>
         ) : (
           <span
@@ -38,16 +36,15 @@ function Pagination({ className, totalCount, start, end, handleHref }: Props) {
       {pages.map((page, index) =>
         "number" === typeof page ? (
           <li key={index}>
-            <Link href={handleHref(page)}>
-              <a
-                className={clsx("jumpu-icon-button", {
-                  ["bg-primary-100 hover:bg-primary-100 font-bold"]:
-                    page === currentPage,
-                })}
-                aria-current={page === currentPage}
-              >
-                {page}
-              </a>
+            <Link
+              href={handleHref(page)}
+              className={clsx("jumpu-icon-button", {
+                ["bg-primary-100 hover:bg-primary-100 font-bold"]:
+                  page === currentPage,
+              })}
+              aria-current={page === currentPage}
+            >
+              {page}
             </Link>
           </li>
         ) : (
@@ -58,10 +55,8 @@ function Pagination({ className, totalCount, start, end, handleHref }: Props) {
       )}
       <li>
         {nextPage ? (
-          <Link href={handleHref(nextPage)}>
-            <a className="jumpu-icon-button">
-              <Icon icon="fa6-solid:chevron-right" />
-            </a>
+          <Link href={handleHref(nextPage)} className="jumpu-icon-button">
+            <Icon icon="fa6-solid:chevron-right" />
           </Link>
         ) : (
           <span

diff --git a/frontend/components/PortalCategoryCard.tsx b/frontend/components/PortalCategoryCard.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import Image from "next/future/image";
+import Image from "next/image";
 import { PortalCategory } from "api/@types";
 import { pagesPath } from "lib/$path";
 
@@ -13,38 +13,37 @@ function PortalCategoryCard({ portalCategory }: Props) {
       href={pagesPath.portal_categories
         ._portalCategoryId(portalCategory.portal_category_id)
         .$url({ query: {} })}
+      className="jumpu-card block"
     >
-      <a className="jumpu-card block">
-        <div className="relative h-48 overflow-hidden">
-          <Image
-            src={`/images/${portalCategory.image_url_path}`}
-            alt=""
-            fill
-            style={{ objectFit: "cover" }}
-          />
-          <Image
-            className="absolute top-2 left-2"
-            width={52}
-            height={53}
-            src="/badge-placeholder.png"
-            alt=""
-          />
-          <p className="text-lg absolute top-5 left-[0.375rem] text-center font-bold w-14">
-            {portalCategory.badges_count}
-          </p>
-        </div>
-        <section className="px-4 pt-2 pb-4">
-          <h3 className="flex justify-center items-center text-2xl line-clamp-2 text-center mb-2">
-            {portalCategory.name}
-          </h3>
-          <p className="text-sm text-gray-600 line-clamp-3 mb-2">
-            {portalCategory.description}
-          </p>
-          <p className="text-xs text-gray-400">
-            能力バッジ（{portalCategory.badges_count}）
-          </p>
-        </section>
-      </a>
+      <div className="relative h-48 overflow-hidden">
+        <Image
+          src={`/images/${portalCategory.image_url_path}`}
+          alt=""
+          fill
+          style={{ objectFit: "cover" }}
+        />
+        <Image
+          className="absolute top-2 left-2"
+          width={52}
+          height={53}
+          src="/badge-placeholder.png"
+          alt=""
+        />
+        <p className="text-lg absolute top-5 left-[0.375rem] text-center font-bold w-14">
+          {portalCategory.badges_count}
+        </p>
+      </div>
+      <section className="px-4 pt-2 pb-4">
+        <h3 className="flex justify-center items-center text-2xl line-clamp-2 text-center mb-2">
+          {portalCategory.name}
+        </h3>
+        <p className="text-sm text-gray-600 line-clamp-3 mb-2">
+          {portalCategory.description}
+        </p>
+        <p className="text-xs text-gray-400">
+          能力バッジ（{portalCategory.badges_count}）
+        </p>
+      </section>
     </Link>
   );
 }