Migrate how to use libraries

website/components/Marp.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import postcss, { Plugin } from 'postcss'
 import postcssImportUrl from 'postcss-import-url'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { Swiper as SwiperClass } from 'swiper/core'
+import type { Swiper as SwiperClass } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { useFontFace } from 'utils/hooks/useFontFace'
 

website/components/markdown/Anchor.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link'
 
-export const Anchor: React.FC<{ href: string }> = ({ href, ...rest }) => {
+export const Anchor: React.FC<{ href?: string }> = ({ href, ...rest }) => {
+  if (!href) return <a {...rest} />
+
   if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
     return <a href={href} {...rest} target="_blank" rel="noreferrer noopener" />
   }

website/pages/_app.tsx

@@ -5,7 +5,7 @@ import 'focus-visible'
 import 'wicg-inert'
 import 'nprogress/nprogress.css'
 import 'simplebar/dist/simplebar.min.css'
-import 'swiper/swiper-bundle.css'
+import 'swiper/css/bundle'
 import 'css/index.css'
 
 const translating = () => {

website/utils/markdown/parse/index.ts

@@ -1,12 +1,12 @@
 import remarkGfm from 'remark-gfm'
 import remarkParse from 'remark-parse'
 import remarkSlug from 'remark-slug'
-import unified from 'unified'
+import { unified, Processor } from 'unified'
 import { removePosition } from 'unist-util-remove-position'
 import { imageParagraphToFigure } from './image-paragrpah-to-figure'
 import { marpCodeBlock } from './marp-code-block'
 
-let parser: unified.Processor | undefined
+let parser: Processor | undefined
 
 export const parse = async (md: string) => {
   parser =
@@ -16,7 +16,7 @@ export const parse = async (md: string) => {
       .use(remarkGfm)
       .use(remarkSlug)
       .use(imageParagraphToFigure)
-      .use(marpCodeBlock)
+      .use([marpCodeBlock])
 
   return removePosition(await parser.run(parser.parse(md)), true)
 }

website/utils/markdown/parse/marp-code-block.ts

@@ -1,8 +1,9 @@
-import { Node, visit } from 'unist-util-visit'
-import { generateRenderedMarp } from 'components/Marp'
+import type { Literal } from 'unist'
+import { visit } from 'unist-util-visit'
+import { RenderedMarp, generateRenderedMarp } from 'components/Marp'
 
 export const marpCodeBlock = () => async (tree) => {
-  const marpNodes = new Set<Node>()
+  const marpNodes = new Set<Literal<string> & { marp?: RenderedMarp }>()
 
   visit(tree, 'code', (node) => {
     const lang = node.lang as string
@@ -14,7 +15,7 @@ export const marpCodeBlock = () => async (tree) => {
   await Promise.all(
     [...marpNodes].map((node) =>
       (async () => {
-        node.marp = await generateRenderedMarp(node.value as string)
+        node.marp = await generateRenderedMarp(node.value)
       })()
     )
   )

website/utils/markdown/renderer/index.ts

@@ -1,22 +1,27 @@
-import RemarkReact from 'remark-react'
+import { createElement, FC } from 'react'
+import RemarkReact, { Options } from 'remark-react'
 import { sanitize } from './sanitize'
 import { MarpSlides } from 'components/Marp'
 import { Anchor } from 'components/markdown/Anchor'
 import * as Heading from 'components/markdown/Heading'
 import { Pre, toHastCodeHandler } from 'components/markdown/Pre'
 
+const remarkReactComponents: Options['remarkReactComponents'] &
+  Record<string, FC> = {
+  a: Anchor,
+  h1: Heading.H1,
+  h2: Heading.H2,
+  h3: Heading.H3,
+  h4: Heading.H4,
+  h5: Heading.H5,
+  h6: Heading.H6,
+  'marp-slides': MarpSlides,
+  pre: Pre,
+}
+
 export const { Compiler: renderer } = new RemarkReact({
-  remarkReactComponents: {
-    a: Anchor,
-    h1: Heading.H1,
-    h2: Heading.H2,
-    h3: Heading.H3,
-    h4: Heading.H4,
-    h5: Heading.H5,
-    h6: Heading.H6,
-    'marp-slides': MarpSlides,
-    pre: Pre,
-  },
+  createElement,
+  remarkReactComponents,
   sanitize,
-  toHast: { commonmark: true, handlers: { code: toHastCodeHandler } },
+  toHast: { handlers: { code: toHastCodeHandler } },
 })