Merge pull request #63 from trpfrog/tailwindcss

Tailwind CSS の導入

.eslintrc.json

@@ -27,6 +27,12 @@
           "../*",
           "@/app/blog/*",
           "**/*.stories"
+        ],
+        "paths": [
+          {
+            "name": "tailwind-merge",
+            "message": "Please import from @/lib/tailwind/merge instead."
+          }
         ]
       }
     ],

.github/workflows/node.js.yml

@@ -11,12 +11,10 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

mdx-components.tsx

@@ -1,3 +1,8 @@
+import * as React from 'react'
+
+import { InlineLink } from '@/components/atoms/InlineLink'
+import * as Wrapper from '@/components/wrappers'
+
 import type { MDXComponents } from 'mdx/types'
 
 // This file is required to use MDX in `app` directory.
@@ -6,5 +11,61 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     // Allows customizing built-in components, e.g. to add styling.
     // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
     ...components,
+
+    h2: props => {
+      // props contains legacyRef, so we need to remove it.
+      const { ref, ...rest } = props
+      return <Wrapper.H2 {...rest} />
+    },
+
+    h3: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.H3 {...rest} />
+    },
+
+    h4: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.H4 {...rest} />
+    },
+
+    h5: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.H5 {...rest} />
+    },
+
+    hr: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.HorizontalRule {...rest} />
+    },
+
+    a: props => {
+      const { ref, ...rest } = props
+      return <InlineLink {...rest} />
+    },
+
+    kbd: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.Kbd {...rest} />
+    },
+
+    ul: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.UnorderedList {...rest} />
+    },
+
+    ol: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.OrderedList {...rest} />
+    },
+
+    li: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.Li {...rest} />
+    },
+
+    table: props => {
+      const { ref, ...rest } = props
+      return <Wrapper.Table {...rest} />
+    },
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "trpfrog-net",
   "private": true,
   "scripts": {
-    "dev": "prisma generate && npx concurrently 'next dev' 'bun tools/markdownWatcher.ts'",
+    "dev": "prisma generate && npx concurrently 'next dev --turbo' 'bun tools/markdownWatcher.ts'",
     "build": "prisma generate && next build",
     "analyze": "ANALYZE=true next build",
     "start": "next start",
@@ -21,58 +21,59 @@
     "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@langchain/openai": "^0.0.14",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/bundle-analyzer": "^13.4.19",
-    "@next/mdx": "^13.4.19",
-    "@octokit/rest": "^19.0.13",
-    "@prisma/client": "^4.16.2",
+    "@next/bundle-analyzer": "^14.1.0",
+    "@next/mdx": "^14.1.0",
+    "@next/third-parties": "canary",
+    "@prisma/client": "^5.9.1",
     "@react-hookz/web": "^23.1.0",
-    "@vercel/edge-config": "^0.2.1",
-    "@vercel/kv": "^0.2.2",
-    "@vercel/toolbar": "^0.1.4",
-    "better-react-mathjax": "^2.0.2",
-    "budoux": "^0.6.0",
-    "bufferutil": "^4.0.7",
-    "chokidar": "^3.5.3",
-    "classnames": "^2.3.2",
-    "cloudinary": "^1.40.0",
-    "dayjs": "^1.11.9",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@vercel/edge-config": "^1.0.2",
+    "@vercel/kv": "^1.0.1",
+    "@vercel/toolbar": "^0.1.11",
+    "better-react-mathjax": "^2.0.3",
+    "budoux": "^0.6.2",
+    "bufferutil": "^4.0.8",
+    "chokidar": "^3.6.0",
+    "classnames": "^2.5.1",
+    "cloudinary": "^2.0.1",
+    "dayjs": "^1.11.10",
+    "devicon": "^2.16.0",
     "easymde": "^2.18.0",
-    "eslint-config-next": "^14.0.3",
-    "framer-motion": "^10.16.2",
+    "eslint-config-next": "^14.1.0",
+    "framer-motion": "^11.0.5",
     "gray-matter": "^4.0.3",
-    "http-status-codes": "^2.2.0",
-    "jotai": "^2.4.1",
+    "http-status-codes": "^2.3.0",
+    "jotai": "^2.6.4",
     "js-yaml": "^4.1.0",
-    "langchain": "^0.0.140",
-    "lru-cache": "^9.1.2",
-    "microcms-js-sdk": "^2.5.0",
-    "next": "^14.0.3",
-    "next-cloudinary": "^4.20.0",
+    "langchain": "^0.1.20",
+    "lru-cache": "^10.2.0",
+    "microcms-js-sdk": "^2.7.0",
+    "next": "^14.1.0",
     "next-mdx-remote": "^4.4.1",
     "nookies": "^2.5.2",
-    "open-graph-scraper": "^6.3.2",
-    "prisma": "^4.16.2",
+    "open-graph-scraper": "^6.4.0",
+    "prisma": "^5.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.4",
+    "react-hook-form": "^7.50.1",
     "react-hot-toast": "^2.4.1",
-    "react-lite-youtube-embed": "^2.3.52",
-    "react-loading-skeleton": "^3.3.1",
-    "react-markdown": "^8.0.7",
+    "react-lite-youtube-embed": "^2.4.0",
+    "react-loading-skeleton": "^3.4.0",
     "react-modal": "^3.16.1",
-    "react-player": "^2.12.0",
+    "react-player": "^2.14.1",
     "react-rewards": "^2.0.4",
     "react-simplemde-editor": "^5.2.0",
     "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react-tooltip": "^5.21.5",
-    "react-tweet": "^3.1.1",
+    "react-tooltip": "^5.26.3",
+    "react-tweet": "^3.2.0",
     "react-twitter-widgets": "^1.11.0",
     "react-wrap-balancer": "^1.1.0",
     "react-youtube": "^10.1.0",
@@ -84,54 +85,55 @@
     "remark-toc": "^8.0.1",
     "remark-unwrap-images": "^3.0.1",
     "server-only": "^0.0.1",
-    "sharp": "^0.32.6",
-    "socket.io": "^4.7.2",
-    "socket.io-client": "^4.7.2",
-    "swr": "^2.2.2",
-    "textlint": "^13.3.3",
-    "textlint-rule-preset-japanese": "^7.0.0",
+    "socket.io": "^4.7.4",
+    "socket.io-client": "^4.7.4",
+    "swr": "^2.2.5",
+    "tailwind-variants": "^0.2.0",
     "use-sound": "^4.0.1",
-    "utf-8-validate": "^5.0.10",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.2",
-    "@storybook/addon-interactions": "^7.4.2",
-    "@storybook/addon-links": "^7.4.2",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/manager-api": "^7.4.2",
-    "@storybook/nextjs": "^7.4.2",
-    "@storybook/react": "^7.4.2",
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.16",
+    "@storybook/manager-api": "^7.6.16",
+    "@storybook/nextjs": "^7.6.16",
+    "@storybook/react": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.4.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/js-yaml": "^4.0.5",
-    "@types/node": "^18.17.13",
-    "@types/react": "^18.2.21",
-    "@types/react-modal": "^3.16.0",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@storybook/theming": "^7.6.16",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.57",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "autoprefixer": "^10.4.17",
     "clipboardy": "^4.0.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.1.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "husky": "^8.0.3",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^14.0.1",
-    "prettier": "3.0.3",
-    "sass": "^1.66.1",
-    "storybook": "^7.4.2",
-    "storybook-dark-mode": "^3.0.1",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.35",
+    "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "sass": "^1.71.0",
+    "storybook": "^7.6.16",
+    "storybook-dark-mode": "^3.0.3",
+    "tailwindcss": "^3.4.1",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

prettier.config.js

@@ -2,12 +2,14 @@
 
 /** @type {import("prettier").Config} */
 const config = {
+  plugins: ['prettier-plugin-tailwindcss'],
   trailingComma: 'all',
   tabWidth: 2,
   semi: false,
   singleQuote: true,
   jsxSingleQuote: false,
   arrowParens: 'avoid',
+  tailwindFunctions: ['tv'],
 }
 
 module.exports = config

src/app/(gallery)/_components/ImageList/index.tsx → src/app/(gallery)/_components/ImageList.tsx

@@ -1,8 +1,6 @@
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 
-import styles from './index.module.scss'
-
 export type ImageListProps = {
   images: ImagePaths[]
   imageWidth?: number
@@ -18,15 +16,15 @@ export type ImagePaths = {
 
 export function ImageList(props: ImageListProps) {
   return (
-    <div className={styles.icon_grid}>
+    <div className="tw-my-7 tw-grid tw-grid-cols-[repeat(auto-fit,minmax(100px,1fr))] tw-gap-4">
       {props.images.map(({ src, url, alt }, idx) => (
         <Link href={url} key={src}>
           <Image
             src={src}
             width={props.imageWidth ?? 100}
             height={props.imageHeight ?? 100}
             objectFit={'contain'}
-            quality={props.quality ?? 15}
+            quality={props.quality ?? 50}
             alt={alt ?? idx + '番目のスタンプ画像'}
           />
         </Link>

src/app/(gallery)/_components/ImageNavigation/index.tsx → src/app/(gallery)/_components/ImageNavigation.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
 import Image from 'next/legacy/image'
-import Link from 'next/link'
 
-import styles from './index.module.scss'
+import { MagicButton } from '@/components/atoms/MagicButton'
 
 type ImageNavigationProps = {
   icons: {
@@ -17,10 +16,8 @@ type ImageNavigationProps = {
 
 export function ImageNavigation(props: ImageNavigationProps) {
   return (
-    <div className={styles.thumbnails}>
-      <Link href={props.prevHref} className={styles.prev_image}>
-        &larr;
-      </Link>
+    <div className="tw-flex tw-items-center tw-justify-center tw-gap-2">
+      <MagicButton href={props.prevHref}>&larr;</MagicButton>
       {props.icons.map(nav => {
         return (
           <Image
@@ -34,9 +31,7 @@ export function ImageNavigation(props: ImageNavigationProps) {
           />
         )
       })}
-      <Link href={props.nextHref} className={styles.next_image}>
-        &rarr;
-      </Link>
+      <MagicButton href={props.nextHref}>&rarr;</MagicButton>
     </div>
   )
 }