Merge pull request #39 from ymrl/update_packages

🆙 update packages

Author: ymrl

.github/workflows/deploy.yml

@@ -25,9 +25,6 @@ jobs:
         env:
           URL_PREFIX: a11y-training
 
-      - name: Export Next.js app
-        run: npm run export
-
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:

next.config.js

@@ -15,6 +15,7 @@ const withMDX = require('@next/mdx')({
 const urlPrefix = process.env.URL_PREFIX ? `/${process.env.URL_PREFIX}` : '';
 
 module.exports = withMDX({
+  output: 'export',
   pageExtensions: ['tsx', 'mdx'],
   reactStrictMode: true,
   assetPrefix: urlPrefix || '/',

package-lock.json

@@ -11,21 +11,20 @@
     "format": "prettier src --write"
   },
   "dependencies": {
-    "@mdx-js/loader": "^2.2.1",
-    "@mdx-js/react": "^2.2.1",
-    "@next/mdx": "^11.1.2",
-    "@types/styled-components": "^5.1.26",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.3",
     "babel-plugin-styled-components": "^2.0.7",
-    "next": "^12.3.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^4.3.1",
-    "styled-components": "^5.3.6"
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
-    "@types/mdx-js__react": "^1.5.4",
-    "@types/node": "18.11.18",
-    "@types/react": "17.0.27",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "eslint": "7.32.0",
     "eslint-config-freee-typescript": "0.3.0",

package.json

@@ -25,7 +25,7 @@ const HeaderTitle = styled.h1`
     font-size: 1.2rem;
   }
 `;
-const HeaderTitleLink = styled.a`
+const HeaderTitleLink = styled(Link)`
   color: #fff;
   text-decoration: none;
   &:hover {
@@ -73,11 +73,9 @@ export const LayoutFunc: React.ForwardRefRenderFunction<
       </Head>
       <Header>
         <HeaderTitle>
-          <Link href="/" passHref>
-            <HeaderTitleLink href="/">
-              freee Accessibility Training
-            </HeaderTitleLink>
-          </Link>
+          <HeaderTitleLink href="/">
+            freee Accessibility Training
+          </HeaderTitleLink>
         </HeaderTitle>
       </Header>
       <Settings />

src/components/Layout.tsx

@@ -14,9 +14,7 @@ const NavList = styled.ul`
   padding: 0 1rem;
 `;
 
-const NavLink = styled.a.attrs(({ current }: { current: boolean }) => ({
-  current,
-}))`
+const NavLink = styled(Link)<{ $current: boolean }>`
   display: block;
   padding: 0.25rem 0.5rem;
   color: #285ac8;
@@ -33,7 +31,7 @@ const NavLink = styled.a.attrs(({ current }: { current: boolean }) => ({
     border-top: 0.25rem solid transparent;
     border-bottom: 0.25rem solid transparent;
     border-left: 0.5rem solid
-      ${({ current }) => (current ? '#aac8ff' : 'transparent')};
+      ${({ $current }) => ($current ? '#aac8ff' : 'transparent')};
     transition: border-color 0.2s;
   }
 
@@ -98,30 +96,26 @@ export const NavigationContent = ({
         const current = isCurrent(pathname, n.pathname);
         return (
           <li key={n.pathname}>
-            <Link href={n.pathname} passHref>
-              <NavLink
-                href={n.pathname}
-                aria-current={current ? 'page' : undefined}
-                current={current}
-              >
-                {n.title}
-              </NavLink>
-            </Link>
+            <NavLink
+              href={n.pathname}
+              aria-current={current ? 'page' : undefined}
+              $current={current}
+            >
+              {n.title}
+            </NavLink>
             {n.children && (
               <NavList>
                 {n.children.map((c) => {
                   const current = isCurrent(pathname, c.pathname);
                   return (
                     <li key={c.pathname}>
-                      <Link href={c.pathname} passHref>
-                        <NavLink
-                          href={c.pathname}
-                          aria-current={current ? 'page' : undefined}
-                          current={current}
-                        >
-                          {c.title}
-                        </NavLink>
-                      </Link>
+                      <NavLink
+                        href={c.pathname}
+                        aria-current={current ? 'page' : undefined}
+                        $current={current}
+                      >
+                        {c.title}
+                      </NavLink>
                     </li>
                   );
                 })}

src/components/NavigationContent.tsx

@@ -4,7 +4,7 @@ import Head from 'next/head';
 export const Title = ({ children }: { children?: string }): JSX.Element => (
   <Head>
     <title>
-      {children ? `${children} | ` : ''}freee Accessibility Training
+      {`${children ? `${children} | ` : ''}freee Accessibility Training`}
     </title>
   </Head>
 );

src/components/Title.tsx

@@ -8,7 +8,7 @@ const components: React.ComponentProps<typeof MDXProvider>['components'] = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   a: ({ href, ref, ...props }) => (
     <Link passHref={true} href={href || ''}>
-      <TextLink {...props} />
+      <TextLink as="span" {...props} />
     </Link>
   ),
   p: P,

src/components/contents/ContentsContext.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { IconType } from 'react-icons/lib';
 
 const IconButtonStyle = styled.button<{
-  pressed?: boolean;
+  $pressed?: boolean;
   focusIndicator?: 'browser' | 'specified' | 'none';
 }>`
   display: inline-flex;
@@ -23,20 +23,20 @@ const IconButtonStyle = styled.button<{
   cursor: pointer;
   padding: 0.5rem 1rem;
 
-  ${({ pressed }) => ({
-    borderColor: pressed ? '#2864f0' : '#d7d2d2',
-    background: pressed ? '#2864f0' : '#fff',
-    color: pressed ? '#fff' : '#323232',
+  ${({ $pressed }) => ({
+    borderColor: $pressed ? '#2864f0' : '#d7d2d2',
+    background: $pressed ? '#2864f0' : '#fff',
+    color: $pressed ? '#fff' : '#323232',
   })}
 
   &:hover {
     color: #2864f0;
     border-color: #2864f0;
     background-color: #ebf3ff;
-    ${({ pressed }) => ({
-      color: pressed ? '#fff' : '#2864f0',
-      backgroundColor: pressed ? '#285ac8' : '#ebf3ff',
-      borderColor: pressed ? '#285ac8' : '#2864f0',
+    ${({ $pressed }) => ({
+      color: $pressed ? '#fff' : '#2864f0',
+      backgroundColor: $pressed ? '#285ac8' : '#ebf3ff',
+      borderColor: $pressed ? '#285ac8' : '#2864f0',
     })}
   }
   &:focus-visible {
@@ -68,19 +68,26 @@ export const IconButton = ({
   IconComponent,
   text,
   iconLabel,
+  as,
+  pressed,
   ...props
 }: {
   IconComponent: IconType;
   text?: string;
   iconLabel?: string;
-} & React.ComponentProps<typeof IconButtonStyle>): JSX.Element => (
-  <IconButtonStyle {...props}>
+  as?: React.ElementType;
+  pressed?: boolean;
+} & Omit<
+  React.ComponentProps<typeof IconButtonStyle>,
+  'as' | '$pressed'
+>): JSX.Element => (
+  <IconButtonStyle as={as} $pressed={pressed} {...props}>
     <span className="icon">
       <IconComponent
         aria-label={iconLabel}
         aria-hidden={iconLabel ? undefined : true}
       />
     </span>
-    {text && <span className="text">{text}</span>}
+    {text ? <span className="text">{text}</span> : undefined}
   </IconButtonStyle>
 );