{props.images.map(({ src, url, alt }, idx) => (
-
- ←
-
+
+ ←
{props.icons.map(nav => {
return (
→
)
}
diff --git a/src/app/(gallery)/_components/ImageNavigation/index.module.scss b/src/app/(gallery)/_components/ImageNavigation/index.module.scss
deleted file mode 100644
index 5c1e3237..00000000
--- a/src/app/(gallery)/_components/ImageNavigation/index.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.thumbnails {
- display: grid;
- grid-template-rows: 1fr;
- grid-template-columns: repeat(7, 1fr);
-}
-
-.prev_image,
-.next_image {
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--link-button-color);
- border-radius: 10px;
- color: white !important;
- text-decoration: none;
- font-weight: bold;
- margin: 10px;
- height: 60%;
-}
diff --git a/src/app/(gallery)/_components/ImageViewer/index.tsx b/src/app/(gallery)/_components/ImageViewer.tsx
similarity index 72%
rename from src/app/(gallery)/_components/ImageViewer/index.tsx
rename to src/app/(gallery)/_components/ImageViewer.tsx
index 6cd958a5..5ed62d92 100644
--- a/src/app/(gallery)/_components/ImageViewer/index.tsx
+++ b/src/app/(gallery)/_components/ImageViewer.tsx
@@ -1,7 +1,5 @@
import Image from 'next/legacy/image'
-import styles from './index.module.scss'
-
type ImageViewerProps = {
src: string
alt: string
@@ -9,8 +7,8 @@ type ImageViewerProps = {
export function ImageViewer(props: ImageViewerProps) {
return (
-
-
+
+
+
@@ -50,7 +51,7 @@ export default function Index(context: PageProps) {
diff --git a/src/app/(gallery)/icons/page.tsx b/src/app/(gallery)/icons/page.tsx
index 8f60fed9..b18cc878 100644
--- a/src/app/(gallery)/icons/page.tsx
+++ b/src/app/(gallery)/icons/page.tsx
@@ -2,11 +2,12 @@ import { Metadata } from 'next'
import { ImagePaths, ImageList } from '@/app/(gallery)/_components/ImageList'
-import { Button } from '@/components/atoms/Button'
import { MainWrapper } from '@/components/atoms/MainWrapper'
import { Block } from '@/components/molecules/Block'
import { Title } from '@/components/organisms/Title'
+import { MagicButton } from 'src/components/atoms/MagicButton'
+
export const metadata = {
title: 'つまみアイコン集',
description: 'つまみちゃんの作ったアイコンです。',
@@ -21,19 +22,19 @@ export default function Index() {
})
return (
-
+
<p>
つまみちゃんの作ったアイコンです。クリックで高解像度版に飛びます。
</p>
<p>Hugging Face Datasets でも利用可能です！</p>
<p>
- <Button
+ <MagicButton
externalLink={true}
href={'https://huggingface.co/datasets/TrpFrog/trpfrog-icons'}
>
trpfrog-icons on 🤗Datasets
- </Button>
+ </MagicButton>
</p>
@@ -45,12 +46,12 @@ export default function Index() {
にて使えるようになりました！🎉
diff --git a/src/app/(gallery)/stickers/page.tsx b/src/app/(gallery)/stickers/page.tsx
index b52a4106..d7a64c9d 100644
--- a/src/app/(gallery)/stickers/page.tsx
+++ b/src/app/(gallery)/stickers/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
import { ImagePaths, ImageList } from '@/app/(gallery)/_components/ImageList'
+import { InlineLink } from '@/components/atoms/InlineLink'
import { MainWrapper } from '@/components/atoms/MainWrapper'
import { Block } from '@/components/molecules/Block'
import { Title } from '@/components/organisms/Title'
@@ -20,16 +21,18 @@ export default function Index() {
})
return (
-
+
<p>
つまみスタンプの元画像の5倍に拡大したやつです。
<br />
良識の範囲内でご自由にどうぞ。(Twitterの会話とか)
</p>
- <a href={'https://store.line.me/stickershop/product/8879469/ja'}>
+ <InlineLink
+ href={'https://store.line.me/stickershop/product/8879469/ja'}
+ >
LINEスタンプ発売中！
- </a>
+ </InlineLink>
+ ?
+
+ これは AI により自動生成された画像です。
+
+ 最後の生成から3時間経つと再生成されます。 +
+
+ )
+}
diff --git a/src/app/(home)/_cards/AICard/IconFrame.tsx b/src/app/(home)/_cards/AICard/IconFrame.tsx
new file mode 100644
index 00000000..5c65637d
--- /dev/null
+++ b/src/app/(home)/_cards/AICard/IconFrame.tsx
@@ -0,0 +1,127 @@
+'use client'
+
+import * as React from 'react'
+
+import { InlineLink } from '@/components/atoms/InlineLink'
+import { WaveText } from '@/components/atoms/WaveText'
+
+import { tv } from '@/lib/tailwind/variants'
+import { ParseWithBudouX } from '@/lib/wordSplit'
+
+import {
+ TrpFrogDiffusionResult,
+ useTrpFrogDiffusion,
+} from './useTrpFrogDiffusion'
+
+const createStyles = tv({
+ slots: {
+ wrapper: 'tw-@container',
+ layout: 'tw-flex tw-h-full tw-flex-col @sm:tw-flex-row',
+ picture: [
+ 'tw-aspect-square tw-w-full @sm:tw-w-1/3 @sm:tw-scale-105',
+ 'tw-font-mplus-rounded tw-text-2xl tw-font-bold',
+ 'tw-flex tw-items-center tw-justify-center',
+ ],
+ caption: [
+ 'tw-flex-1 tw-gap-1 tw-px-2 tw-text-center',
+ 'tw-flex tw-flex-col tw-items-center tw-justify-center',
+ ],
+ english:
+ 'tw-text-balance tw-text-lg tw-font-black tw-italic tw-leading-tight',
+ japanese: 'tw-text-balance tw-text-[11px]',
+ aiGeneratedMsg: 'tw-text-[9px] tw-leading-none tw-text-gray-500',
+ poweredBy: 'tw-text-center tw-text-[10px] tw-leading-none tw-text-gray-500',
+ },
+ variants: {
+ status: {
+ ok: {
+ english: `
+ tw-bg-gradient-to-br
+ tw-from-blue-400 tw-to-pink-400
+ tw-bg-clip-text tw-text-transparent
+ `,
+ },
+ loading: {
+ picture: 'tw-bg-gray-200 tw-text-black',
+ english: 'tw-h-4 tw-w-2/3 tw-animate-pulse tw-rounded tw-bg-zinc-400',
+ japanese: 'tw-h-3 tw-w-1/3 tw-animate-pulse tw-rounded tw-bg-zinc-400',
+ },
+ error: {
+ picture: 'tw-bg-red-800 tw-text-white',
+ },
+ } satisfies Record,
+ },
+ defaultVariants: {
+ status: 'ok',
+ },
+})
+
+export function IconFrame() {
+ const { status, data } = useTrpFrogDiffusion()
+
+ if (status === 'loading') {
+ const styles = createStyles({ status })
+ return (
+
+
+ )
+ }
+
+ if (status === 'error') {
+ const styles = createStyles({ status })
+ return (
+
+
+ )
+ }
+
+ const styles = createStyles()
+ const { base64, prompt, translated } = data
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/AICard/index.ts b/src/app/(home)/_cards/AICard/index.ts
new file mode 100644
index 00000000..458bf9d2
--- /dev/null
+++ b/src/app/(home)/_cards/AICard/index.ts
@@ -0,0 +1 @@
+export { AICard } from './AICard'
diff --git a/src/app/(home)/_cards/AICard/useTrpFrogDiffusion.ts b/src/app/(home)/_cards/AICard/useTrpFrogDiffusion.ts
new file mode 100644
index 00000000..d6930bf6
--- /dev/null
+++ b/src/app/(home)/_cards/AICard/useTrpFrogDiffusion.ts
@@ -0,0 +1,40 @@
+import { useCallback, useMemo } from 'react'
+
+import useSWR from 'swr'
+
+import type { TrpFrogImageGenerationResult } from '@/app/api/trpfrog-diffusion/route'
+
+export type TrpFrogDiffusionResult =
+ | {
+ data: undefined
+ status: 'loading' | 'error'
+ }
+ | {
+ data: TrpFrogImageGenerationResult
+ status: 'ok'
+ }
+
+export function useTrpFrogDiffusion() {
+ const fetcher = useCallback(
+ (url: string) => fetch(url).then(r => r.json()),
+ [],
+ )
+ const { data, error, isLoading } = useSWR('/api/trpfrog-diffusion', fetcher)
+
+ let status: TrpFrogDiffusionResult['status']
+ if (isLoading) {
+ status = 'loading'
+ } else if (error || !data || !data.base64) {
+ status = 'error'
+ } else {
+ status = 'ok'
+ }
+
+ return useMemo(
+ () => ({
+ status,
+ data,
+ }),
+ [status, data],
+ )
+}
diff --git a/src/app/(home)/_cards/AboutMeCard.tsx b/src/app/(home)/_cards/AboutMeCard.tsx
new file mode 100644
index 00000000..a22c0d62
--- /dev/null
+++ b/src/app/(home)/_cards/AboutMeCard.tsx
@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants'
+
+import { TopCard } from '@/app/(home)/_components/TopCard'
+
+const image =
+ 'https://res.cloudinary.com/trpfrog/blog/sugadaira-travel/42C94C5A-04C6-4DEC-9D41-2C87F87D79B7_1_105_c.jpg'
+
+export const attributes = [
+ { icon: '🐸', iconName: '性別', text: '男性' },
+ { icon: '🎂', iconName: '誕生日', text: '2000年10月17日 (23歳)' },
+ {
+ icon: '🏠',
+ iconName: '出身',
+ text: '東京都 (23区外) 出身',
+ },
+ {
+ icon: '🍎',
+ iconName: 'Apple',
+ text: 'Apple ユーザー',
+ },
+ // {
+ // icon: '⌨️',
+ // iconName: 'キー配列',
+ // text: 'US 配列 (テンキーレス)',
+ // },
+ // {
+ // icon: '🎓',
+ // iconName: '最終学歴',
+ // text: '電気通信大学',
+ // },
+]
+
+const styles = tv({
+ slots: {
+ bgImage: ['tw-bg-cover tw-bg-center tw-bg-no-repeat sp:tw-bg-left'],
+ base: [
+ 'tw-h-full tw-w-full tw-bg-gradient-to-br tw-from-window-color tw-to-transparent tw-p-8 sp:tw-p-5',
+ 'tw-flex tw-flex-col tw-justify-between',
+ ],
+ nameWrapper: 'tw-flex tw-items-baseline tw-gap-2 ',
+ name: 'first:tw-text-4xl first:tw-font-bold last:tw-text-2xl',
+ textWrapper: 'tw-text-justify tw-leading-7 sp:tw-text-sm sp:tw-leading-6',
+ text: 'tw-mr-1 tw-rounded-sm tw-bg-window-color/95 tw-leading-none dark:tw-bg-text-color/95',
+ introAttribute:
+ 'tw-relative -tw-left-1 tw-w-fit tw-list-none tw-rounded tw-bg-window-color/90 tw-px-2 tw-py-1.5 tw-text-xs',
+ attrItem: 'tw-flex tw-items-start tw-gap-2 tw-leading-relaxed',
+ },
+})()
+
+export function AboutMeCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/BalloonCard/BalloonCard.tsx b/src/app/(home)/_cards/BalloonCard/BalloonCard.tsx
new file mode 100644
index 00000000..bf7fca93
--- /dev/null
+++ b/src/app/(home)/_cards/BalloonCard/BalloonCard.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import React, { useRef } from 'react'
+
+import { TopCard } from '@/app/(home)/_components/TopCard'
+import { cardButtonStyle } from '@/app/(home)/_styles/cardButtonStyle'
+
+import { A } from '@/components/wrappers'
+
+import { tv } from '@/lib/tailwind/variants'
+
+import { useResizableBalloonArray } from './useResizableBalloonArray'
+
+const createStyles = tv({
+ slots: {
+ wrapper:
+ 'tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center sp:tw-h-32',
+ dialog: [
+ 'tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full',
+ 'tw-flex tw-flex-col tw-items-center tw-justify-center',
+ 'tw-gap-1 tw-font-bold tw-backdrop-blur-sm',
+ ],
+ button: cardButtonStyle({ invertColor: true }),
+ },
+ variants: {
+ isBurstAll: {
+ true: {
+ dialog: 'tw-opacity-100 tw-delay-500 tw-duration-700',
+ },
+ false: {
+ dialog: 'tw-pointer-events-none tw-opacity-0 tw-duration-100',
+ },
+ },
+ },
+})
+
+export function BalloonCard() {
+ const cardRef = useRef(null)
+ const { balloonComponent, isBurstAll } = useResizableBalloonArray(cardRef, 60)
+ const styles = createStyles({ isBurstAll })
+
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/BalloonCard/useResizableBalloonArray.tsx b/src/app/(home)/_cards/BalloonCard/useResizableBalloonArray.tsx
new file mode 100644
index 00000000..55af327e
--- /dev/null
+++ b/src/app/(home)/_cards/BalloonCard/useResizableBalloonArray.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useMemo, useState, useTransition } from 'react'
+
+import { BalloonArray } from '@/app/balloon/_components/BalloonArray'
+
+export function useResizableBalloonArray(
+ cardRef: React.RefObject,
+ balloonWidth: number,
+) {
+ const [balloonAmount, setBalloonAmount] = useState(0)
+ const balloonHeight = balloonWidth / 0.6
+
+ useEffect(() => {
+ // リサイズ時、動的に風船の数を変更
+ const observer = new ResizeObserver(() => {
+ if (!cardRef.current) return
+
+ // TODO: EPS なしでもレイアウトが崩れないようにする
+ const EPS = 10
+ const cardWidth = cardRef.current.clientWidth - EPS
+ const cardHeight = cardRef.current.clientHeight - EPS
+
+ const horizontalBalloonAmount = Math.floor(cardWidth / balloonWidth)
+ const verticalBalloonAmount = Math.floor(cardHeight / balloonHeight)
+ const balloonAmount = horizontalBalloonAmount * verticalBalloonAmount
+ setBalloonAmount(balloonAmount)
+ })
+
+ if (cardRef.current) {
+ observer.observe(cardRef.current)
+ }
+ return () => observer.disconnect()
+ }, [balloonHeight, balloonWidth, cardRef])
+
+ // 全ての風船が割れたかどうか
+ const [isBurstAll, setIsBurstAll] = useState(false)
+ const [_, startTransition] = useTransition()
+
+ return useMemo(
+ () => ({
+ balloonComponent: (
+
+ // 割れてすぐに画面に反映させる必要はないので遅延させる
+ startTransition(() => setIsBurstAll(isBurst.every(v => v)))
+ }
+ key={balloonAmount} // 風船の数が変わったら state をリセット
+ />
+ ),
+ isBurstAll,
+ }),
+ [balloonAmount, isBurstAll, balloonWidth],
+ )
+}
diff --git a/src/app/(home)/_cards/BelongingCard.tsx b/src/app/(home)/_cards/BelongingCard.tsx
new file mode 100644
index 00000000..784fdd89
--- /dev/null
+++ b/src/app/(home)/_cards/BelongingCard.tsx
@@ -0,0 +1,45 @@
+import { TopCard } from '@/app/(home)/_components/TopCard'
+
+import { tv } from '@/lib/tailwind/variants'
+
+const src = 'https://res.cloudinary.com/trpfrog/image/upload/w_500/IMG_6686.jpg'
+const styles = tv({
+ slots: {
+ wrapper: [
+ 'tw-size-full tw-bg-gradient-to-r tw-from-yellow-800/20 tw-to-zinc-800/60',
+ ],
+ text: [
+ 'tw-flex tw-size-full tw-flex-col tw-items-end tw-justify-center ',
+ 'tw-relative tw-top-1 tw-p-3 tw-text-right tw-text-white tw-drop-shadow-lg',
+ ],
+ name: 'tw-text-lg tw-font-bold',
+ details: 'tw-text-sm tw-font-bold',
+ theme: 'tw-text-xs',
+ date: 'tw-text-xs',
+ },
+})()
+
+export function BelongingCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/BirdsCard.tsx b/src/app/(home)/_cards/BirdsCard.tsx
new file mode 100644
index 00000000..0d69cd28
--- /dev/null
+++ b/src/app/(home)/_cards/BirdsCard.tsx
@@ -0,0 +1,61 @@
+import { TopCard } from '@/app/(home)/_components/TopCard'
+import { cardButtonStyle } from '@/app/(home)/_styles/cardButtonStyle'
+
+import { useTooltip } from '@/hooks/useTooltip'
+
+import { tv } from '@/lib/tailwind/variants'
+
+const leftBird = `
+
+ ／￣￣＼ ﾑｼｬﾑｼｬ
+ / (●)/￣￣＼
+. / ト、 ＼
+ 彳 ＼＼ |
+.／ /⌒ヽヽ |
+/ | | .| /。
+ | ヽ|／∴
+ 。゜
+`.trimEnd()
+
+const rightBird = `
+オエーー!! ＿＿_
+ ＿＿_／ ヽ
+ ／ ／ ／⌒ヽ|
+/ (ﾟ)/ ／ /
+. / ﾄ､ /｡⌒ヽ。
+ 彳 ＼＼ﾟ｡∴｡ｏ
+.／ ＼＼｡ﾟ｡ｏ
+/ ／⌒＼Ｕ∴)
+ | ﾞＵ |
+ | | |
+ Ｕ
+`.trimEnd()
+
+const styles = tv({
+ slots: {
+ base: [
+ 'tw-flex tw-items-center tw-justify-center tw-gap-6',
+ 'tw-font-mono tw-text-[11px] tw-leading-none',
+ 'tw-bg-text-color/80 tw-text-window-color',
+ ],
+ button: cardButtonStyle({
+ class: 'tw-absolute tw-bottom-2 tw-right-2 tw-size-8 tw-rounded-full',
+ }),
+ tooltipContent: '!tw-bg-window-color !tw-text-text-color',
+ },
+})()
+
+export function BirdsCard() {
+ const { TooltipContent, TooltipButton } = useTooltip()
+
+ return (
+
+ ?
+
+ なぜか2019年からトップページにいる、特に意味のない鳥です
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/BlogCard.tsx b/src/app/(home)/_cards/BlogCard.tsx
new file mode 100644
index 00000000..abca6da5
--- /dev/null
+++ b/src/app/(home)/_cards/BlogCard.tsx
@@ -0,0 +1,128 @@
+import { tv, VariantProps } from 'tailwind-variants'
+
+import { TopCard } from '@/app/(home)/_components/TopCard'
+import { cardButtonStyle } from '@/app/(home)/_styles/cardButtonStyle'
+
+import { A } from '@/components/wrappers'
+
+import { BlogPost } from '@blog/_lib/blogPost'
+import { retrieveSortedBlogPostList } from '@blog/_lib/load'
+
+const createArticleStyle = tv({
+ slots: {
+ bg: 'tw-h-full tw-w-full tw-bg-cover tw-bg-center tw-bg-no-repeat',
+ wrapper: [
+ 'tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between',
+ 'tw-h-full tw-p-4 tw-text-text-color tw-backdrop-blur-[2px]',
+ ],
+ info: 'tw-flex tw-w-2/3 tw-flex-col tw-text-white sp:tw-w-3/4',
+ button: cardButtonStyle(),
+ },
+ variants: {
+ rightToLeft: {
+ true: {
+ wrapper: 'tw-flex-row-reverse tw-bg-gradient-to-l',
+ info: 'tw-items-end tw-text-right',
+ },
+ false: {
+ wrapper: 'tw-bg-gradient-to-r',
+ },
+ },
+ index: {
+ 0: {
+ wrapper: `
+ tw-from-pink-500 tw-to-pink-500/40
+ dark:tw-from-pink-900 dark:tw-to-pink-900/40
+ `,
+ button: 'tw-translate-y-3',
+ },
+ 1: {
+ wrapper: `
+ tw-from-amber-500 tw-to-amber-500/40
+ dark:tw-from-amber-900 dark:tw-to-amber-900/40
+ `,
+ },
+ 2: {
+ wrapper: `
+ tw-from-lime-600 tw-to-lime-600/40
+ dark:tw-from-lime-900 dark:tw-to-lime-900/40
+ `,
+ },
+ },
+ },
+})
+
+function getCloudinaryResizedUrl(url: string, width = 600) {
+ if (/\/image\/upload\/.*\/blog/.test(url)) {
+ return url.replace(
+ /\/image\/upload\/.*\/blog/,
+ `/image/upload/w_${width}/blog`,
+ )
+ } else if (url.includes('/image/upload/')) {
+ return url.replace('/image/upload/', `/image/upload/w_${width}/`)
+ } else {
+ return url.replace('trpfrog/blog', `trpfrog/w_${width}/blog`)
+ }
+}
+
+function ArticleRow(props: {
+ entry: BlogPost
+ variant: Required>
+}) {
+ const { entry, variant } = props
+ const articleStyle = createArticleStyle(variant)
+ const resizedThumbnailUrl =
+ entry.thumbnail && getCloudinaryResizedUrl(entry.thumbnail, 700)
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/CompetitiveCard.tsx b/src/app/(home)/_cards/CompetitiveCard.tsx
new file mode 100644
index 00000000..2557e9ec
--- /dev/null
+++ b/src/app/(home)/_cards/CompetitiveCard.tsx
@@ -0,0 +1,37 @@
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+
+import { tv } from '@/lib/tailwind/variants'
+
+const styles = tv({
+ slots: {
+ wrapper: [
+ 'tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center',
+ 'tw-bg-zinc-800 tw-py-3',
+ ],
+ skill: 'tw-flex tw-flex-wrap tw-gap-2',
+ textGradient: [
+ 'tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center',
+ 'tw-bg-gradient-to-br tw-from-cyan-100 tw-via-cyan-500 tw-to-cyan-100 tw-bg-clip-text',
+ 'tw-font-bold tw-text-transparent',
+ ],
+ rating: 'tw-text-7xl tw-font-bold',
+ },
+})()
+
+export function CompetitiveCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/EnvironmentCard.tsx b/src/app/(home)/_cards/EnvironmentCard.tsx
new file mode 100644
index 00000000..a4043e8d
--- /dev/null
+++ b/src/app/(home)/_cards/EnvironmentCard.tsx
@@ -0,0 +1,34 @@
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+
+import { tv } from '@/lib/tailwind/variants'
+
+const src =
+ 'https://res.cloudinary.com/trpfrog/image/upload/f_auto,c_limit,w_100,q_auto/environment/desk'
+
+const styles = tv({
+ slots: {
+ bgImage: ['tw-bg-cover tw-bg-center tw-bg-no-repeat'],
+ base: [
+ 'tw-h-full tw-w-full tw-p-8 tw-backdrop-blur-[2px]',
+ 'tw-bg-gradient-to-br tw-from-window-color tw-via-transparent tw-to-window-color',
+ 'tw-flex tw-flex-col tw-items-center tw-justify-center',
+ 'tw-text-center tw-text-4xl tw-font-bold tw-text-white tw-text-opacity-80',
+ ],
+ nameWrapper: 'tw-flex tw-items-baseline tw-gap-2 ',
+ name: 'first:tw-text-4xl first:tw-font-bold last:tw-text-2xl',
+ },
+})()
+
+export function EnvironmentCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/FavoritesCard.tsx b/src/app/(home)/_cards/FavoritesCard.tsx
new file mode 100644
index 00000000..bca4dbc0
--- /dev/null
+++ b/src/app/(home)/_cards/FavoritesCard.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { faCode, faStar, faWalking } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import { TopCard } from '@/app/(home)/_components/TopCard'
+
+import { tv } from '@/lib/tailwind/variants'
+import { ParseWithBudouX } from '@/lib/wordSplit'
+
+const styles = tv({
+ slots: {
+ grid: 'tw-grid tw-h-full tw-grid-cols-3 tw-gap-0.5',
+ wrapper: [
+ 'tw-grid-rows tw-grid tw-grid-rows-subgrid',
+ 'tw-gap-1 tw-bg-zinc-200 tw-py-3',
+ '*:tw-text-center',
+ ],
+ icon: [
+ 'tw-grid tw-place-items-center tw-text-4xl tw-font-bold',
+ 'tw-relative tw-top-1.5 tw-drop-shadow',
+ ],
+ title: 'tw-text-sm tw-font-bold tw-drop-shadow-sm',
+ description: 'tw-text-balance tw-text-center tw-text-[10px]',
+ },
+})()
+
+type FavoriteProps = {
+ icon: React.ReactNode
+ title: string
+ description?: string
+ className?: string
+ style?: React.CSSProperties
+}
+
+function Favorite(props: FavoriteProps) {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/MusicCard.tsx b/src/app/(home)/_cards/MusicCard.tsx
new file mode 100644
index 00000000..fbc4f081
--- /dev/null
+++ b/src/app/(home)/_cards/MusicCard.tsx
@@ -0,0 +1,42 @@
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+import { cardButtonStyle } from '@/app/(home)/_styles/cardButtonStyle'
+
+import { tv } from '@/lib/tailwind/variants'
+
+const src =
+ 'https://res.cloudinary.com/trpfrog/image/upload/w_1000/musicbanner-with-notext.png'
+
+const styles = tv({
+ slots: {
+ bg: [
+ 'tw-bg-cover tw-bg-left tw-bg-no-repeat tw-py-3 tw-pl-[140px] tw-pr-5 tw-text-right',
+ 'tw-flex tw-flex-col tw-items-end tw-justify-center',
+ ],
+ h2: 'tw-text-2xl tw-font-bold tw-text-white',
+ text: 'tw-my-2 tw-text-[12px] tw-leading-tight tw-text-white *:tw-inline-block',
+ button: cardButtonStyle({
+ class: 'tw-relative tw-bottom-0 tw-right-[-1px]',
+ }),
+ },
+})()
+
+export function MusicCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/SkillCard.tsx b/src/app/(home)/_cards/SkillCard.tsx
new file mode 100644
index 00000000..4ca12896
--- /dev/null
+++ b/src/app/(home)/_cards/SkillCard.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+
+import { TopCard } from '@/app/(home)/_components/TopCard'
+
+import { Devicon } from '@/components/atoms/Devicon'
+
+import { tv } from '@/lib/tailwind/variants'
+import { ParseWithBudouX } from '@/lib/wordSplit'
+
+const styles = tv({
+ slots: {
+ grid: [
+ 'tw-grid tw-h-full tw-gap-0.5 pc:tw-grid-cols-6',
+ 'sp:tw-flex sp:tw-flex-col',
+ ],
+ wrapper: [
+ 'tw-grid-rows tw-grid tw-grid-rows-subgrid',
+ 'tw-gap-1 tw-bg-zinc-200 tw-py-3',
+ '*:tw-text-center',
+ 'sp:tw-flex sp:tw-items-center sp:tw-gap-4 sp:tw-pl-6 sp:*:tw-text-left',
+ ],
+ icon: [
+ 'tw-grid tw-place-items-center tw-text-[2.8rem] tw-font-bold',
+ 'tw-relative tw-top-1.5 tw-drop-shadow sp:tw-top-0',
+ ],
+ title: 'tw-text-sm tw-font-bold tw-drop-shadow-sm',
+ text: 'tw-grid-rows-subgrid',
+ description: 'tw-text-balance tw-text-[10px]',
+ },
+})()
+
+type FavoriteProps = {
+ icon: React.ReactNode
+ title: string
+ description: string | string[]
+ className?: string
+ style?: React.CSSProperties
+}
+
+function Skill(props: FavoriteProps) {
+ const description =
+ typeof props.description === 'string'
+ ? [props.description]
+ : props.description
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/SocialCards.tsx b/src/app/(home)/_cards/SocialCards.tsx
new file mode 100644
index 00000000..dbd90c8a
--- /dev/null
+++ b/src/app/(home)/_cards/SocialCards.tsx
@@ -0,0 +1,77 @@
+import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { tv } from 'tailwind-variants'
+
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+
+const styles = tv({
+ slots: {
+ card: [
+ 'tw-flex tw-items-center tw-justify-center',
+ 'tw-bg-gradient-to-br tw-p-2 tw-text-2xl tw-text-white',
+ ],
+ wrapper: 'tw-flex tw-flex-col tw-items-center tw-gap-1',
+ logo: 'tw-text-4xl !tw-leading-none tw-drop-shadow',
+ contact:
+ 'tw-text-lg tw-font-bold !tw-leading-none tw-drop-shadow-sm sp:tw-text-base',
+ },
+})()
+
+export function TwitterCard() {
+ return (
+
+
+ )
+}
+
+export function GitHubCard() {
+ return (
+
+
+ )
+}
+
+export function MailCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/StickersCard.tsx b/src/app/(home)/_cards/StickersCard.tsx
new file mode 100644
index 00000000..d0dd5262
--- /dev/null
+++ b/src/app/(home)/_cards/StickersCard.tsx
@@ -0,0 +1,44 @@
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+
+import { twMerge } from '@/lib/tailwind/merge'
+import { tv } from '@/lib/tailwind/variants'
+
+const src = 'https://res.cloudinary.com/trpfrog/w_300/stickers'
+
+const styles = tv({
+ slots: {
+ card: 'sp:tw-h-32',
+ absolute: 'tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full',
+ bgImage: `
+ tw-absolute tw-left-0 tw-top-0
+ tw-h-full tw-w-full
+ -tw-skew-x-12 tw-skew-y-6 tw-scale-125
+ tw-bg-cover tw-bg-center tw-bg-no-repeat
+ `,
+ text: `
+ tw-flex tw-h-full tw-w-full tw-flex-col
+ tw-items-center tw-justify-center tw-bg-black/60
+ tw-text-center tw-text-white
+ `,
+ },
+})()
+
+export function StickersCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/StoreCard.tsx b/src/app/(home)/_cards/StoreCard.tsx
new file mode 100644
index 00000000..114801a2
--- /dev/null
+++ b/src/app/(home)/_cards/StoreCard.tsx
@@ -0,0 +1,53 @@
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+
+import { twMerge } from '@/lib/tailwind/merge'
+import { tv } from '@/lib/tailwind/variants'
+
+const src =
+ 'https://res.cloudinary.com/trpfrog/image/upload/w_300/trpfrog-store.jpg'
+
+const styles = tv({
+ slots: {
+ card: 'sp:tw-h-32',
+ absolute: 'tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full',
+ bgImage: `
+ tw-absolute tw-left-0 tw-top-0
+ tw-h-full tw-w-full
+ -tw-skew-x-12 tw-skew-y-6 tw-scale-110
+ tw-bg-cover tw-bg-center tw-bg-no-repeat
+ `,
+ text: `
+ tw-flex tw-h-full tw-w-full tw-flex-col
+ tw-items-center tw-justify-center tw-bg-black/60
+ tw-text-center tw-text-white
+ `,
+ },
+})()
+
+export function StoreCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/WalkingCard.tsx b/src/app/(home)/_cards/WalkingCard.tsx
new file mode 100644
index 00000000..ed585236
--- /dev/null
+++ b/src/app/(home)/_cards/WalkingCard.tsx
@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants'
+
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+import { cardButtonStyle } from '@/app/(home)/_styles/cardButtonStyle'
+
+const backgroundImage =
+ 'https://res.cloudinary.com/trpfrog/image/upload/w_600/blog/tokyotower-walking/20210324231643'
+
+const styles = tv({
+ slots: {
+ bg: 'tw-bg-cover tw-bg-center tw-bg-no-repeat sp:tw-h-32',
+ wrapper: [
+ 'tw-flex tw-flex-col tw-items-center tw-justify-between',
+ 'tw-bg-gradient-to-b tw-from-zinc-800 tw-via-transparent tw-to-zinc-800',
+ 'tw-h-full tw-w-full tw-p-3',
+ 'tw-text-center tw-text-xs tw-text-white tw-opacity-90',
+ ],
+ h2: 'tw-mb-1 tw-text-3xl tw-font-bold',
+ button: cardButtonStyle({
+ className: 'tw-absolute tw-bottom-3 tw-right-4',
+ }),
+ },
+})()
+
+export function WalkingCard() {
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/WorksCard.tsx b/src/app/(home)/_cards/WorksCard.tsx
new file mode 100644
index 00000000..83813bf6
--- /dev/null
+++ b/src/app/(home)/_cards/WorksCard.tsx
@@ -0,0 +1,83 @@
+import path from 'path'
+
+import { LinkTopCard } from '@/app/(home)/_components/TopCard'
+import { WorksFrontmatter, WorksFrontmatterSchema } from '@/app/works/schema'
+
+import { Devicon, hasDevicon } from '@/components/atoms/Devicon'
+
+import { MarkdownWithFrontmatter, readMarkdowns } from '@/lib/mdLoader'
+import { tv } from '@/lib/tailwind/variants'
+import { ParseWithBudouX } from '@/lib/wordSplit'
+
+const workStyles = tv({
+ slots: {
+ wrapper: 'tw-rounded-sm tw-bg-cover tw-bg-center',
+ backdrop:
+ 'tw-size-full tw-p-2 tw-backdrop-blur-[1.5px] ' +
+ 'tw-flex tw-h-full tw-w-full tw-flex-col tw-justify-end tw-text-white',
+ title:
+ 'tw-text-lg tw-font-bold tw-leading-tight tw-text-white tw-drop-shadow',
+ subtitle:
+ 'tw-mt-1 tw-text-[11px] tw-leading-tight tw-text-white tw-drop-shadow',
+ keywords:
+ 'tw-flex tw-gap-1 tw-text-xs tw-leading-none ' +
+ 'tw-mb-1 tw-w-fit tw-overflow-hidden',
+ keyword: 'tw-text-lg tw-drop-shadow',
+ },
+})()
+
+function Work(props: {
+ content: MarkdownWithFrontmatter
+ className?: string
+}) {
+ const { content, className } = props
+ const imageUrl = `https://res.cloudinary.com/trpfrog/image/upload/w_150/${content.metadata.image?.path}`
+
+ return (
+
+
+ )
+}
diff --git a/src/app/(home)/_cards/index.ts b/src/app/(home)/_cards/index.ts
new file mode 100644
index 00000000..2d03e665
--- /dev/null
+++ b/src/app/(home)/_cards/index.ts
@@ -0,0 +1,16 @@
+export { AboutMeCard } from './AboutMeCard'
+export { AICard } from './AICard'
+export { BalloonCard } from './BalloonCard/BalloonCard'
+export { BelongingCard } from './BelongingCard'
+export { BirdsCard } from './BirdsCard'
+export { WorksCard } from './WorksCard'
+export { BlogCard } from './BlogCard'
+export { CompetitiveCard } from './CompetitiveCard'
+export { EnvironmentCard } from './EnvironmentCard'
+export { FavoritesCard } from './FavoritesCard'
+export { MusicCard } from './MusicCard'
+export { SkillCard } from './SkillCard'
+export { StickersCard } from './StickersCard'
+export { StoreCard } from './StoreCard'
+export { TwitterCard, GitHubCard, MailCard } from './SocialCards'
+export { WalkingCard } from './WalkingCard'
diff --git a/src/app/(home)/_components/AboutMe/index.module.scss b/src/app/(home)/_components/AboutMe/index.module.scss
index 27ab5b09..2bf1cad0 100644
--- a/src/app/(home)/_components/AboutMe/index.module.scss
+++ b/src/app/(home)/_components/AboutMe/index.module.scss
@@ -1,4 +1,4 @@
-@use '@/styles/mixins';
+@use '../../../../styles/mixins';
.intro_text {
margin: 0.7em 0.3em 0;
diff --git a/src/app/(home)/_components/AboutMe/index.tsx b/src/app/(home)/_components/AboutMe/index.tsx
index be7e08c2..fb518937 100644
--- a/src/app/(home)/_components/AboutMe/index.tsx
+++ b/src/app/(home)/_components/AboutMe/index.tsx
@@ -1,85 +1,26 @@
-import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
-import { faAt, faEnvelope, faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { tv } from 'tailwind-variants'
-import {
- additionalAttributes,
- attributes,
-} from '@/app/(home)/_components/AboutMe/attributes'
-import { KCommandBox } from '@/app/(home)/_components/AboutMe/KCommandBox'
-
-import { Block } from '@/components/molecules/Block'
-
-import styles from './index.module.scss'
+const createStyles = tv({
+ slots: {
+ wrapper: 'tw-grid tw-grid-cols-subgrid sp:tw-grid-cols-3',
+ aboutMe:
+ 'tw-bg-amber-300 sp:tw-col-span-3 pc:tw-col-span-2 pc:tw-row-span-3',
+ social: 'tw-bg-amber-300',
+ },
+})
type Props = {
id: string
}
-export const AboutMe = ({ id }: Props) => {
+export function AboutMe() {
+ const styles = createStyles()
return (
-
-
-
-
-
-
-
-
+
-
- )
-}
diff --git a/src/app/(home)/_components/Links/index.tsx b/src/app/(home)/_components/Links/index.tsx
deleted file mode 100644
index 752ef148..00000000
--- a/src/app/(home)/_components/Links/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import styles from '@/app/(home)/page.module.scss'
-
-import { Button } from '@/components/atoms/Button'
-import { H2 } from '@/components/atoms/H2'
-import { Block } from '@/components/molecules/Block'
-
-import links from './links.json'
-
-export type MyLinkRecord = {
- url: string
- siteName: string
- description: string
-}
-
-type Props = {
- id?: string
-}
-
-export async function Links({ id }: Props) {
- return (
-
-
- )
-}
diff --git a/src/app/(home)/_components/Links/links.json b/src/app/(home)/_components/Links/links.json
deleted file mode 100644
index 402ecfdf..00000000
--- a/src/app/(home)/_components/Links/links.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
- {
- "url": "https://twitter.com/TrpFrog",
- "siteName": "Twitter",
- "description": "割とうるさいので注意"
- },
- {
- "url": "https://marshmallow-qa.com/trpfrog",
- "siteName": "マシュマロ",
- "description": "見てなすぎて無視することがあり、すみません"
- },
- {
- "url": "https://www.amazon.jp/hz/wishlist/ls/2MHXSEDPHJ79J?ref_=wl_share",
- "siteName": "欲しいものリスト",
- "description": "なんか送ってくれると喜びます"
- },
- {
- "url": "https://line.me/S/sticker/4674940",
- "siteName": "LINEスタンプ",
- "description": "好評発売中！(120円くらい)"
- },
- {
- "url": "https://trpfrog.hateblo.jp",
- "siteName": "はてなブログ",
- "description": "技術、徒歩会の話とか"
- },
- {
- "url": "https://github.com/TrpFrog",
- "siteName": "GitHub",
- "description": "様々な制作物のソースコード"
- }
-]
\ No newline at end of file
diff --git a/src/app/(home)/_components/Ratings/index.module.scss b/src/app/(home)/_components/Ratings/index.module.scss
deleted file mode 100644
index 1d673a2a..00000000
--- a/src/app/(home)/_components/Ratings/index.module.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@use '@/styles/mixins';
-
-.rating_list {
- font-weight: bold;
-}
-
-.platinum {
- /*filter:drop-shadow(1px 1px 0.6pt rgba(0, 0, 0,30));*/
- color: #ff7c00;
- background: -webkit-linear-gradient(
- top,
- #fff677 30%,
- #fffbb9 50%,
- #ffcb5d 50%,
- #fff4b3 80%
- );
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);*/
- -webkit-background-clip: text;
- -webkit-text-stroke: 1px #533c15;
-}
-
-.rainbow {
- /*filter:drop-shadow(1px 1px 0.6pt rgba(0, 0, 0,30));*/
- color: #fff0af;
- background: -webkit-linear-gradient(
- top,
- red 15%,
- orange,
- yellow,
- #00d907 60%,
- aqua,
- #002fff,
- #f500f5
- );
-
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-background-clip: text;
- -webkit-text-stroke: 1px #858585;
- /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);*/
-}
-
-.silver {
- /*filter:drop-shadow(1px 1px 0.6pt rgba(0, 0, 0,30));*/
- background: -webkit-linear-gradient(
- top,
- #fffdfd 30%,
- #cbc9c9 50%,
- #aeacac 51%,
- #828080 80%
- );
- -webkit-background-clip: text;
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-text-stroke: 1px #3d3d3d;
- /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);*/
-}
-
-.brown {
- background: -webkit-linear-gradient(top, #ffa200 25%, #c64000 75%);
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-background-clip: text;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-.green {
- background: -webkit-linear-gradient(top, #47c017 25%, #006609 75%);
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-background-clip: text;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-.water {
- background: -webkit-linear-gradient(top, #42c5f8 25%, #0a9cd6 75%);
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-background-clip: text;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-.blue {
- background: -webkit-linear-gradient(top, #2495ff 25%, #072792 75%);
- -webkit-text-fill-color: rgba(255, 255, 255, 0);
- -webkit-background-clip: text;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-@include mixins.mq(dark) {
- .platinum,
- .rainbow,
- .silver,
- .brown,
- .green,
- .water,
- .blue {
- -webkit-text-stroke: 2px white;
- text-stroke: 2px white;
- filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.438));
- }
-}
-
-ul.rating_list li {
- margin-bottom: 0.5em;
-}
diff --git a/src/app/(home)/_components/Ratings/index.tsx b/src/app/(home)/_components/Ratings/index.tsx
deleted file mode 100644
index 5c43ec03..00000000
--- a/src/app/(home)/_components/Ratings/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Block } from '@/components/molecules/Block'
-
-import styles from './index.module.scss'
-
-type Props = {
- id?: string
-}
-
-export const Ratings = ({ id }: Props) => {
- return (
-
-
-
- )
-}
diff --git a/src/app/(home)/_components/Store.tsx b/src/app/(home)/_components/Store.tsx
deleted file mode 100644
index e922bfc6..00000000
--- a/src/app/(home)/_components/Store.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Image from 'next/legacy/image'
-
-import styles from '@/app/(home)/page.module.scss'
-
-import { Button } from '@/components/atoms/Button'
-import { Block } from '@/components/molecules/Block'
-
-type Props = {
- id?: string
-}
-
-export const Store = ({ id }: Props) => {
- return (
-
-
- )
-}
diff --git a/src/app/(home)/_components/TempTwitter/index.module.scss b/src/app/(home)/_components/TempTwitter/index.module.scss
index ac92ca26..ae3a6378 100644
--- a/src/app/(home)/_components/TempTwitter/index.module.scss
+++ b/src/app/(home)/_components/TempTwitter/index.module.scss
@@ -12,7 +12,7 @@
white-space: nowrap;
display: inline-block;
color: var(--footer-color);
- font-family: var(--font-roboto);
+ font-family: var(--font-inter);
-webkit-text-stroke: 1px var(--footer-color);
text-stroke: 1px var(--footer-color);
transform: translateY(1px);
diff --git a/src/app/(home)/_components/TempTwitter/index.tsx b/src/app/(home)/_components/TempTwitter/index.tsx
index e6549aae..87e62973 100644
--- a/src/app/(home)/_components/TempTwitter/index.tsx
+++ b/src/app/(home)/_components/TempTwitter/index.tsx
@@ -1,17 +1,17 @@
import { Fragment, Suspense } from 'react'
import matter from 'gray-matter'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import remarkGfm from 'remark-gfm'
+import { MDXRemote } from 'next-mdx-remote/rsc'
import { MainWrapper } from '@/components/atoms/MainWrapper'
import { Block } from '@/components/molecules/Block'
import { LoadingBlock } from '@/components/molecules/LoadingBlock'
+import { HorizontalRule } from '@/components/wrappers/HorizontalRule'
import { microCMS } from '@/lib/microCMS'
import { ShowAllComponent } from '@blog/_components/article-parts/ShowAll/ShowAllComponent'
+import { getMarkdownOptions } from '@blog/_renderer/rendererProperties'
import styles from './index.module.scss'
@@ -52,15 +52,10 @@ export async function TempTwitter() {
{date}
+
+ {
+ title?: string
+ titlePosition?: VariantProps['position']
+}
+
+export function TopCard(props: TopCardProps) {
+ const {
+ className,
+ children,
+ title,
+ titlePosition = 'top-left',
+ ...rest
+ } = props
+ return (
+ ['position']
+}
+
+export function LinkTopCard(props: TopLinkCardProps) {
+ const {
+ className,
+ children,
+ title,
+ readMoreText,
+ titlePosition = 'top-left',
+ ...rest
+ } = props
+ const showReadMore = readMoreText !== false
+ const readMore = typeof readMoreText === 'string' ? readMoreText : '→'
+
+ return (
+
+ {title && (
+
-
- )
-}
diff --git a/src/app/(home)/_components/TopPageIcons.tsx b/src/app/(home)/_components/TopPageIcons.tsx
deleted file mode 100644
index b24244e1..00000000
--- a/src/app/(home)/_components/TopPageIcons.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Image from 'next/legacy/image'
-
-import styles from '@/app/(home)/page.module.scss'
-
-import { Button } from '@/components/atoms/Button'
-import { Block } from '@/components/molecules/Block'
-
-type Props = {
- id?: string
-}
-
-export const TopPageIcons = ({ id }: Props) => {
- return (
-
-
- )
-}
diff --git a/src/app/(home)/_components/TopPageMusic.tsx b/src/app/(home)/_components/TopPageMusic.tsx
deleted file mode 100644
index bd11052c..00000000
--- a/src/app/(home)/_components/TopPageMusic.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import Image from 'next/legacy/image'
-import LiteYouTubeEmbed from 'react-lite-youtube-embed'
-
-import { Button } from '@/components/atoms/Button'
-import { Block } from '@/components/molecules/Block'
-
-type Props = {
- id?: string
-}
-
-export const TopPageMusic = ({ id }: Props) => {
- return (
-
-
- )
-}
diff --git a/src/app/(home)/_components/TrpFrogIconFrame/Description.tsx b/src/app/(home)/_components/TrpFrogIconFrame/Description.tsx
deleted file mode 100644
index 48d4eae3..00000000
--- a/src/app/(home)/_components/TrpFrogIconFrame/Description.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { get } from '@vercel/edge-config'
-
-import {
- TRPFROG_DIFFUSION_DEFAULT_UPDATE_HOURS,
- TRPFROG_DIFFUSION_UPDATE_HOURS_EDGE_CONFIG_KEY,
-} from '@/lib/constants'
-
-export async function Description() {
- const updateHours =
- (await get(TRPFROG_DIFFUSION_UPDATE_HOURS_EDGE_CONFIG_KEY)) ??
- TRPFROG_DIFFUSION_DEFAULT_UPDATE_HOURS
-
- return (
-
- = url =>
- fetch(url).then(r => r.json())
-
- const { data, error, isLoading } = useSWR('/api/trpfrog-diffusion', fetcher)
-
- if (isLoading) {
- return (
-
-
-
-
-
-
- )
- }
-
- if (error || !data || !data.base64) {
- return (
-
-
-
-
- )
- }
-
- const { base64, prompt, translated } = data
- return (
-
- 
-
-
-
- )
-}
diff --git a/src/app/(home)/_components/TrpFrogIconFrame/index.module.scss b/src/app/(home)/_components/TrpFrogIconFrame/index.module.scss
deleted file mode 100644
index fba694a1..00000000
--- a/src/app/(home)/_components/TrpFrogIconFrame/index.module.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-//const style = {
-// width: props.size ?? '100%',
-// aspectRatio: '1 / 1',
-// borderRadius: '1rem',
-// background: 'gray',
-// display: 'flex',
-// justifyContent: 'center',
-// alignItems: 'center',
-// fontSize: '2rem',
-// color: 'white',
-//}
-
-.picture {
- width: 100%;
- aspect-ratio: 1 / 1;
- border-radius: 1rem;
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-}
-
-.loading_picture {
- @extend .picture;
- background: lightgray;
- font-family: var(--font-m-plus-rounded-1c);
- font-weight: bold;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 1.5rem;
-}
-
-.error_picture {
- @extend .loading_picture;
- background: #d25454;
- color: white;
-}
-
-.error_caption {
- font-family: var(--font-noto-sans-jp);
- font-size: 1rem;
-}
-
-.caption_en {
- font-size: 1.2em;
- font-weight: bold;
- font-style: italic;
- margin: 10px 0;
-}
-
-.waiting.caption_en {
- margin: 20px 0 0 0;
- display: inline-block;
- width: 50%;
- height: 1em;
- background: gray;
- border-radius: 3px;
-}
-
-.caption_ja {
- font-size: 0.8em;
-}
-
-.waiting.caption_ja {
- display: inline-block;
- margin-top: 0;
- width: 80%;
- height: 1em;
- background: gray;
- border-radius: 3px;
-}
-
-.caption_wrapper {
- text-align: center;
- line-height: 1.2;
-}
diff --git a/src/app/(home)/_components/TrpFrogIconFrame/index.tsx b/src/app/(home)/_components/TrpFrogIconFrame/index.tsx
deleted file mode 100644
index ef74bb53..00000000
--- a/src/app/(home)/_components/TrpFrogIconFrame/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Suspense } from 'react'
-import * as React from 'react'
-
-import { WaveText } from '@/components/atoms/WaveText'
-import { Block } from '@/components/molecules/Block'
-
-import { Description } from './Description'
-import { IconFrame } from './IconFrame'
-
-type Props = React.ComponentPropsWithoutRef<'div'>
-
-export function TrpFrogIconFrame(props: Props) {
- return (
-
-
-
- Loading...
-
- }
- >
-
-
- )
-}
diff --git a/src/app/(home)/_components/WhatsNew/index.module.scss b/src/app/(home)/_components/WhatsNew/index.module.scss
deleted file mode 100644
index 654c67f2..00000000
--- a/src/app/(home)/_components/WhatsNew/index.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@use '@/styles/mixins';
-
-.block {
- display: flex;
- flex-direction: column;
- padding: var(--window-padding-top-bottom)
- min(var(--window-padding-left-right), 1.5em);
-}
-
-.table_wrapper {
- position: relative;
- height: 100%;
- min-height: 350px;
- flex: 1;
-}
-
-#whats_new_table {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
-
- font-size: 0.8em;
- line-height: 1.2em;
- width: 100%;
- margin-top: 10px;
-}
-
-.whats_new_row {
- min-height: 2.5em;
- display: grid;
- grid-template-columns: 3em auto;
- border-bottom: dashed 2px var(--window-bottom-color);
- padding: 5px;
-
- @include mixins.mq(dark) {
- border-color: white;
- }
-
- div {
- display: flex;
- align-items: center;
- }
-
- div + div {
- margin-left: 10px;
- }
-
- p {
- margin: 0;
- }
-}
-
-.whats_new_date {
- width: 3.5em;
- margin-right: 5px;
-}
diff --git a/src/app/(home)/_components/WhatsNew/index.tsx b/src/app/(home)/_components/WhatsNew/index.tsx
deleted file mode 100644
index 9489e122..00000000
--- a/src/app/(home)/_components/WhatsNew/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import dayjs from 'dayjs'
-import ReactMarkdown from 'react-markdown'
-
-import { HoverScrollBox } from '@/components/atoms/HoverScrollBox'
-import { Block } from '@/components/molecules/Block'
-
-import { retrieveSortedBlogPostList } from '@blog/_lib/load'
-
-import styles from './index.module.scss'
-
-type Props = {
- id?: string
-}
-
-type WhatsNewRecord = {
- type: 'page' | 'fix' | 'improve' | 'blog' | 'content'
- text: string
- date: string
-}
-
-const getWhatsNewRecords: () => Promise = async () => {
- const jsonPath = path.join(process.cwd(), 'src', 'data', 'whats_new.json')
- const jsonText = fs.readFileSync(jsonPath, 'utf-8')
- const records = JSON.parse(jsonText) as WhatsNewRecord[]
-
- const blogData = await retrieveSortedBlogPostList()
-
- for (const post of blogData) {
- records.push({
- type: 'blog',
- text: `記事「[${post.title}](https://trpfrog.net/blog/${post.slug})」を公開しました！`,
- date: dayjs(post.date).format('YYYY-MM-DD'),
- })
- }
-
- return records.sort((a, b) => {
- if (a.date === b.date) return 0
- return a.date < b.date ? 1 : -1
- })
-}
-
-export async function WhatsNew({ id }: Props) {
- const whatsNewRecords: WhatsNewRecord[] = await getWhatsNewRecords()
- return (
-
-
- )
-}
diff --git a/src/app/(home)/_styles/cardButtonStyle.ts b/src/app/(home)/_styles/cardButtonStyle.ts
new file mode 100644
index 00000000..cc0a460c
--- /dev/null
+++ b/src/app/(home)/_styles/cardButtonStyle.ts
@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants'
+
+export const cardButtonStyle = tv({
+ base: [
+ 'tw-inline-flex tw-w-fit tw-flex-row tw-items-center tw-justify-center',
+ 'tw-rounded-full tw-px-3 tw-py-1',
+ 'tw-whitespace-nowrap tw-text-sm tw-font-bold',
+ 'tw-backdrop-blur',
+ ],
+ variants: {
+ invertColor: {
+ true: 'tw-bg-text-color/80 tw-text-window-color hover:tw-bg-text-color',
+ false:
+ 'tw-bg-window-color/80 tw-text-text-color hover:tw-bg-window-color',
+ },
+ },
+ defaultVariants: {
+ invertColor: false,
+ },
+})
diff --git a/src/app/(home)/page.module.css b/src/app/(home)/page.module.css
new file mode 100644
index 00000000..8f0f32a9
--- /dev/null
+++ b/src/app/(home)/page.module.css
@@ -0,0 +1,40 @@
+.layout {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-rows: repeat(3, 100px) repeat(7, 150px);
+ grid-template-areas:
+ 'about-me about-me twitter'
+ 'about-me about-me github'
+ 'about-me about-me mail'
+ 'univ blog blog'
+ 'favs blog blog'
+ 'works works walking'
+ 'ai env comp'
+ 'ai skills skills'
+ 'ai balloon music'
+ 'stickers store birds';
+
+ @media screen and (max-width: 799px) {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ grid-template-rows: 350px 80px 300px 150px 150px 150px auto auto auto 520px repeat(
+ 6,
+ auto
+ );
+ grid-template-areas:
+ 'about-me about-me about-me about-me about-me about-me'
+ 'twitter twitter github github mail mail'
+ 'blog blog blog blog blog blog'
+ 'works works works works works works'
+ 'univ univ univ univ univ univ'
+ 'favs favs favs favs favs favs'
+ 'walking walking walking walking walking walking'
+ 'skills skills skills skills skills skills'
+ 'comp comp comp comp comp comp'
+ 'ai ai ai ai ai ai'
+ 'balloon balloon balloon balloon balloon balloon'
+ 'env env env env env env'
+ 'music music music music music music'
+ 'stickers stickers stickers stickers stickers stickers'
+ 'store store store store store store'
+ 'birds birds birds birds birds birds';
+ }
+}
diff --git a/src/app/(home)/page.module.scss b/src/app/(home)/page.module.scss
deleted file mode 100644
index 74e62eea..00000000
--- a/src/app/(home)/page.module.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@use '@/styles/mixins';
-
-#links {
- table {
- border-spacing: 1em;
- }
-}
-
-.link_grid {
- display: grid;
- grid-gap: 10px;
- grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
- margin: 30px 0;
-}
-
-.link_block {
- display: inline-block;
- background: rgba(120, 189, 0, 0.09);
- padding: 10px 20px;
- border-radius: 20px;
- text-align: center;
-}
-
-#store_links {
- display: block;
-
- a {
- width: 100%;
- }
-}
-
-#icons {
- .top_icons {
- margin: 10px 0;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-template-rows: 1fr;
- }
-}
-
-#bird {
- .aa {
- white-space: pre;
- font-size: 45%;
- line-height: 12px;
- display: inline-block;
- }
-}
-
-@media screen and (max-width: 980px) {
- #sticker table,
- #sticker td,
- #sticker th,
- #sticker tbody {
- display: block;
- }
-}
-
-#top_balloon_grid {
- display: grid;
- margin: 10px 0;
- grid-template-columns: repeat(7, min(130px, 12vw));
- grid-template-rows: min(217px, 20vw);
-}
-
-#top_page_grid {
- max-width: 1000px;
- display: inline-grid;
- grid-template-areas:
- 'about_me about_me whats_new'
- 'about_me about_me whats_new'
- 'sticker icons icons'
- 'sticker music music'
- 'bird music music'
- 'balloon balloon balloon'
- 'links links diffusion'
- 'links links music_game';
- grid-template-columns: 3fr 2fr 3fr;
- grid-gap: var(--main-margin);
- text-align: left;
-}
-
-@include mixins.mq(sp) {
- #top_page_grid {
- grid-template-areas:
- 'about_me'
- 'whats_new'
- 'icons'
- 'music'
- 'sticker'
- 'balloon'
- 'diffusion'
- 'links'
- 'music_game'
- 'bird'
- 'stats';
- grid-template-columns: 1fr;
- }
-}
-
-// Grid-area definition
-
-#about_me_grid {
- grid-area: about_me;
-}
-
-#music_game {
- grid-area: music_game;
-}
-
-#links {
- grid-area: links;
-}
-
-#music {
- grid-area: music;
-}
-
-#icons {
- grid-area: icons;
-}
-
-#balloon {
- grid-area: balloon;
-}
-
-#sticker {
- grid-area: sticker;
-}
-
-#bird {
- grid-area: bird;
-}
-
-#whats_new {
- grid-area: whats_new;
-}
-
-#diffusion {
- grid-area: diffusion;
-}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 5ad868fe..214f0f8d 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,38 +1,82 @@
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
-import { TrpFrogIconFrame } from '@/app/(home)/_components/TrpFrogIconFrame'
+import { tv } from 'tailwind-variants'
+
+import * as cards from '@/app/(home)/_cards'
import { MainWrapper } from '@/components/atoms/MainWrapper'
-import { AboutMe } from './_components/AboutMe'
-import { Bird } from './_components/Bird'
-import { Links } from './_components/Links'
-import { Ratings } from './_components/Ratings'
-import { Store } from './_components/Store'
import { TempTwitter } from './_components/TempTwitter'
-import { TopPageBalloons } from './_components/TopPageBalloons'
-import { TopPageIcons } from './_components/TopPageIcons'
-import { TopPageMusic } from './_components/TopPageMusic'
import { TrpFrogAnimation as TrpFrogAnimationFrame } from './_components/TrpFrogAnimation'
-import { WhatsNew } from './_components/WhatsNew'
-import styles from './page.module.scss'
+import css from './page.module.css'
+
+const styles = tv({
+ slots: {
+ grid: 'tw-grid tw-gap-3 sp:tw-gap-2',
+ subgrid: 'tw-col-span-full tw-grid tw-grid-cols-subgrid',
+ },
+})()
-export default function Index() {
+export default async function Index() {
return (
<>
+
-
+ 一覧に戻る
- +
+@@ -51,7 +52,7 @@ export default function Index(context: PageProps) {
-
+ 一覧に戻る
+ 最後の生成から3時間経つと再生成されます。 +
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+ Error occurred
+
+
+ エラーが発生しました。
+
+ 時間をあけて再度お試しください。
+
+
+
+
+
+ AI GENERATED ICON
+ {prompt}
+
+
+
+ Powered by{' '}
+
+ Prgckwb/trpfrog-diffusion
+
+
+
+
+
+
+ + つまみ + (TrpFrog) +
++ + 自然言語生成の研究をしている大学院生 + ……のはずだが、Web開発に興味がありすぎてそういう職業になりそうになっている。 + 面白いものが好き、面白ければなんでもやりたい。 + みんなそう？そうかも + +
+-
+ {attributes.map(({ icon, iconName, text }) => (
+
- + + {icon} + + {text} + + ))} +
+ {balloonComponent}
+
+
+ Want more balloons popping?
+
+ もっと割る
+
+
+
+
+
+
+ 電気通信大学大学院
+情報理工学研究科 情報学専攻
+ Since 2023.04
+ 研究分野: 自然言語生成
+ {leftBird}
+ {rightBird}
+
+
+ )
+}
+
+export async function BlogCard() {
+ const articles = await retrieveSortedBlogPostList()
+
+ const latestFeaturedArticles = articles.filter(e => !!e.thumbnail).slice(0, 3)
+
+ return (
+
+
+
+
+
+ 記事を読む
+ →
+
+ + {entry.title} +
+
+ {entry.description}
+
+
+ {entry.date}・{Math.floor(entry.readTime / 60)} min to read・
+ {entry.tags.map(t => `#${t}`).join(' ')}
+
+
+ {latestFeaturedArticles.map((article, i) => {
+ const rightToLeft = i % 2 === 1
+ const index = (i % 3) as 0 | 1 | 2
+ return (
+
+
+
+
+ max
+ 1596
+
+ AtCoder 水色レーティング
+ 作業環境
+
+
+ )
+}
+
+export function FavoritesCard() {
+ return (
+ {props.icon}
+ {props.title}
+ {props.description && (
+
+
+ )}
+ Music
+
+ 友人の
+ ねぎ一世さんに
+ 作曲して
+ いただいた
+ テーマソング (？)
+
+
+
+ )
+}
+
+export function SkillCard() {
+ return (
+ {props.icon}
+
+
+ {props.title}
+
+ {description
+ .map(desc =>
] : x, + )} +
+ ] : x, + )} +
+
+
+
+
+
+
+ contact
+ ★trpfrog.net
+
+
+
+
+ Stickers
+ LINE スタンプ 全2種 販売中 ! +
+
+ SUZURI にて販売中 ! + +
+
+ Goods
+ + つまみアイコン関連グッズ ++ SUZURI にて販売中 ! + +
+
+ Walking
+
+ たまに長距離を歩いて移動して
+
+ 記事を書いています。(最長 70.5km) +
+ + 記事を書いています。(最長 70.5km) +
+
+ )
+}
+
+const styles = tv({
+ slots: {
+ wrapper: 'tw-grid tw-grid-cols-3 tw-gap-0.5 sp:tw-grid-cols-2',
+ },
+})()
+
+export async function WorksCard() {
+ const contents = await readMarkdowns(
+ path.join(process.cwd(), 'src', 'app', 'works', 'contents'),
+ WorksFrontmatterSchema,
+ ).then(mds => mds.slice(0, 3))
+
+ return (
+
+
+
+ {content.metadata.subtitle && (
+
+
+ {content.metadata.keywords
+ ?.filter(hasDevicon)
+ .map(k => (
+
+
+
+ {content.metadata.subtitle && (
+
+ {content.metadata.subtitle}
+
+ )}
+
-
-
- - つまみ - TrpFrog -
-ふにゃ〜
- --
- {attributes.map(({ icon, iconName, text }) => (
-
-
-
-
- - {text} -
- ))}
-
-
- -
- {additionalAttributes.map(({ icon, text, iconName }) => (
-
-
-
-
- - - {iconName} -
- {text} - -
- ))}
-
+
)
}
diff --git a/src/app/(home)/_components/Bird.tsx b/src/app/(home)/_components/Bird.tsx
deleted file mode 100644
index 00bffd58..00000000
--- a/src/app/(home)/_components/Bird.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styles from '@/app/(home)/page.module.scss'
-
-import { Block } from '@/components/molecules/Block'
-
-type Props = {
- id?: string
-}
-
-export const Bird = ({ id }: Props) => {
- const birdX = [
- '',
- ' ／￣￣＼ ﾑｼｬﾑｼｬ',
- ' / (●)/￣￣＼',
- '. / ト、 ＼',
- ' 彳 ＼＼ |',
- '.／ /⌒ヽヽ |',
- '/ | | .| /。',
- ' | ヽ|／∴',
- ' 。゜',
- '',
- '',
- ].join('\n')
-
- const birdY = [
- 'オエーー !!! ＿＿_',
- ' ＿＿_／ ヽ',
- ' ／ ／ ／⌒ヽ|',
- '/ (ﾟ)/ ／ /',
- '. / ﾄ､ /｡⌒ヽ。',
- ' 彳 ＼＼ﾟ｡∴｡ｏ',
- '.／ ＼＼｡ﾟ｡ｏ',
- '/ ／⌒＼Ｕ∴)',
- ' | ﾞＵ |',
- ' | | |',
- ' Ｕ',
- ].join('\n')
-
- return (
- AboutMe
+ GitHub
+ Twitter
+ Mail
+
-
- {birdX}
-
- {birdY}
-
-
- {(links as MyLinkRecord[]).map(({ url, siteName, description }) => (
-
-
-
-
- ))}
- - -
-{description}
-相互リンク
-移動しました！
-- -
-
- つまみさんのスタンプ・グッズ
-
- 好評発売中！
-
-
-
-
-
-
-
-
-
-
- <>{children},
- }}
- >
- {content}
-
+
)
@@ -69,10 +64,10 @@ export async function TempTwitter() {
const maxTweetsDisplayedAtOnce = 5
return (
- なんらかの原因でツイートできなくなったときに逃げてくる場所です。
-+
+ {title && (
+
+ )
+}
+
+export interface TopLinkCardProps extends AProps {
+ title?: string
+ readMoreText?: string | boolean
+ titlePosition?: VariantProps+ {title} +
+ )} + {children} ++ {title} +
+ )} + {children} + {showReadMore &&{readMore}
}
+
+ )
+}
diff --git a/src/app/(home)/_components/TopPageBalloons.tsx b/src/app/(home)/_components/TopPageBalloons.tsx
deleted file mode 100644
index 8cec5639..00000000
--- a/src/app/(home)/_components/TopPageBalloons.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import styles from '@/app/(home)/page.module.scss'
-import { Balloon } from '@/app/balloon/_components/Balloon'
-import { useBalloonState } from '@/app/balloon/_components/BalloonArray'
-
-import { Button } from '@/components/atoms/Button'
-import { Block } from '@/components/molecules/Block'
-
-type Props = {
- id?: string
-}
-
-export const TopPageBalloons = ({ id }: Props) => {
- const balloonAmount = 7
- const { isBurst, balloonColorArray, onBurst } = useBalloonState(
- balloonAmount,
- id ?? '',
- )
-
- return (
-
- {Array.from(Array(7), (v, k) => (
-
- onBurst({
- index: k,
- currentAmount: balloonAmount,
- })
- }
- />
- ))}
-
- - -
-
- {[0, 7, 5, 6]
- .map(i => i.toString())
- .map(i => (
-
-
- - ねぎ一世(@negiissei)さんに「 - つまみのうた」を作っていただきました！(？？？？) - ありがとうございます！！！ -
-
-
- - Apple Music, Spotify, YouTube Music, LINE Music 他 - 各種サイトで配信中！(なんで？) -
-
-
- - -
-
- これは AI により自動生成された画像です。
-
- 最後の生成から{updateHours} - 時間経つと再生成されます。 -
- - 最後の生成から{updateHours} - 時間経つと再生成されます。 -
- Powered by{' '}
-
- Prgckwb/trpfrog-diffusion
-
-
-
- )
-}
diff --git a/src/app/(home)/_components/TrpFrogIconFrame/IconFrame.tsx b/src/app/(home)/_components/TrpFrogIconFrame/IconFrame.tsx
deleted file mode 100644
index 68c62f6f..00000000
--- a/src/app/(home)/_components/TrpFrogIconFrame/IconFrame.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-import Balancer from 'react-wrap-balancer'
-import useSWR, { Fetcher } from 'swr'
-
-import styles from '@/app/(home)/_components/TrpFrogIconFrame/index.module.scss'
-import type { TrpFrogImageGenerationResult } from '@/app/api/trpfrog-diffusion/route'
-
-import { WaveText } from '@/components/atoms/WaveText'
-
-import { ParseWithBudouX } from '@/lib/wordSplit'
-
-export function IconFrame() {
- const fetcher: Fetcher
- Loading...
-
-
- Error occurred
-
-
- エラーが発生しました。
-
- 時間をあけて再度お試しください。
-
- {prompt}
-
-
-
-
-
- -
-
- {whatsNewRecords.map(({ text, date }) => {
- const [y, m, d] = date.split('-')
- if (process.env.NODE_ENV !== 'production') {
- const localhost = 'http://localhost:3000'
- text = text.replace(/https:\/\/trpfrog.net/g, localhost)
- }
- return (
-
-
-
-
- )
- })}
-
- {y}-
- {m}-{d} -
- - {m}-{d} -
- {text}
-
-
- (key)
+ const record = await kv.get(key)
if (process.env.NODE_ENV === 'development') {
return record as unknown as TrpFrogImageGenerationResult
}
diff --git a/src/app/balloon/BalloonApp.tsx b/src/app/balloon/BalloonApp.tsx
index fd63b6c7..d641f8e5 100644
--- a/src/app/balloon/BalloonApp.tsx
+++ b/src/app/balloon/BalloonApp.tsx
@@ -2,12 +2,14 @@
import { useState } from 'react'
-import { Button } from '@/components/atoms/Button'
import { Block } from '@/components/molecules/Block'
import { Title } from '@/components/organisms/Title'
+import { Input } from '@/components/wrappers'
import { clamp } from '@/lib/utils'
+import { MagicButton } from 'src/components/atoms/MagicButton'
+
import { useBalloonSound } from './_components/Balloon'
import { BalloonArray } from './_components/BalloonArray'
@@ -40,14 +42,14 @@ export function BalloonApp() {
description={'風船を割ることができます。(？)'}
>
)
}
diff --git a/src/app/blog/[slug]/[[...options]]/page.tsx b/src/app/blog/[slug]/[[...options]]/page.tsx
index 28900130..5bac6d62 100644
--- a/src/app/blog/[slug]/[[...options]]/page.tsx
+++ b/src/app/blog/[slug]/[[...options]]/page.tsx
@@ -1,12 +1,10 @@
import { Metadata } from 'next'
-import { MainWrapper } from '@/components/atoms/MainWrapper'
+import { gridLayoutStyle, MainWrapper } from '@/components/atoms/MainWrapper'
import { Block } from '@/components/molecules/Block'
import { ArticleHeader } from '@blog/_components/ArticleHeader'
-import { BadBlogBlock } from '@blog/_components/BadBlog'
import { RelatedPosts } from '@blog/_components/RelatedPosts'
-import { UDFontBlock } from '@blog/_components/UDFontBlock'
import { BlogPost } from '@blog/_lib/blogPost'
import { fetchBlogPost, retrieveSortedBlogPostList } from '@blog/_lib/load'
import { BlogMarkdown } from '@blog/_renderer/BlogMarkdown'
@@ -92,19 +90,15 @@ export default async function Index({ params: { slug, options } }: PageProps) {
const initialNode = await renderBlog(slug, page)
return (
-
+
diff --git a/src/app/api/trpfrog-diffusion/route.ts b/src/app/api/trpfrog-diffusion/route.ts
index 39ddd701..3ce4760f 100644
--- a/src/app/api/trpfrog-diffusion/route.ts
+++ b/src/app/api/trpfrog-diffusion/route.ts
@@ -47,7 +47,7 @@ const cache = new LRUCache<
async function getCache() {
const key = TRPFROG_DIFFUSION_KV_KEY
- let record = await kv.get
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- + {' '}
-
- {props.children}
-
- )
-}
-
-export function BadBlogButton() {
- const badBlogs = [
- 'ebioishii_u',
- 'コントラストがカス',
- '赤が色褪せている',
- '画像が散らかっている',
- 'ぐるぐる',
- ]
-
- const { badBlog, setBadBlog, badButtonFlag, setBadButtonFlag } =
- useContext(BadBlogStateContext)
-
- const handleBadBlog = () => {
- setBadButtonFlag(true)
- if (badBlog) {
- setBadBlog(0)
- } else {
- setBadBlog(Math.ceil(Math.random() * badBlogs.length))
- }
- }
-
- return (
-
+ {children}
+
+
+ )
+}
diff --git a/src/app/blog/_components/BlogImage/ImageWithModal.tsx b/src/app/blog/_components/BlogImage/ImageWithModal.tsx
index 103f2764..66538c65 100644
--- a/src/app/blog/_components/BlogImage/ImageWithModal.tsx
+++ b/src/app/blog/_components/BlogImage/ImageWithModal.tsx
@@ -1,27 +1,6 @@
'use client'
-import { useState } from 'react'
-
-import { CldImageWrapper } from '@/components/utils/CldImageWrapper'
-
-import styles from '@blog/_components/BlogImage/index.module.scss'
-import { getPureCloudinaryPath } from '@blog/_lib/cloudinaryUtils'
-
-function ImageSpoiler() {
- const [spoilerState, setSpoilerState] = useState(true)
- return spoilerState ? (
- タグ「{tag}」の新着記事
{relatedPosts.slice(0, 6).map((e, idx) => (
-
-
-
- {process.env.NODE_ENV === 'production' ? (
-
-
+
{addEntryButtons &&
+ {process.env.NODE_ENV === 'production' ? (
+
-
- )
-}
-
-export function BadBlogBlock({ children }: { children: React.ReactNode }) {
- const { badBlog } = useContext(BadBlogStateContext)
- return (
- - -
- {badBlog > 0 && ( -- よくないブログ No.{badBlog}: {badBlogs[badBlog - 1]} -
- )} -
- {children}
-
- )
-}
diff --git a/src/app/blog/_components/BlogH2.tsx b/src/app/blog/_components/BlogH2.tsx
new file mode 100644
index 00000000..3bb8a6de
--- /dev/null
+++ b/src/app/blog/_components/BlogH2.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { tv } from 'tailwind-variants'
+
+import { A } from '@/components/wrappers'
+import { H2 } from '@/components/wrappers/H2'
+
+const styles = tv({
+ slots: {
+ h2: [
+ 'tw-relative tw-mt-10 tw-w-full',
+ 'tw-border-b-2 tw-border-solid tw-border-b-trpfrog-300',
+ ],
+ text: 'tw-peer tw-w-full',
+ anchor: [
+ 'tw-absolute -tw-left-7 tw-top-0 tw-pr-2 tw-opacity-0 sp:tw-hidden',
+ 'peer-hover:tw-text-gray-300 peer-hover:tw-opacity-100',
+ 'hover:tw-text-body-color hover:tw-opacity-100',
+ ],
+ },
+})()
+
+export function BlogH2(props: React.ComponentPropsWithoutRef<'h2'>) {
+ const { className, children, ...rest } = props
+ return (
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/blog/_components/BlogImage/ImageWithModal.tsx b/src/app/blog/_components/BlogImage/ImageWithModal.tsx
index 103f2764..66538c65 100644
--- a/src/app/blog/_components/BlogImage/ImageWithModal.tsx
+++ b/src/app/blog/_components/BlogImage/ImageWithModal.tsx
@@ -1,27 +1,6 @@
'use client'
-import { useState } from 'react'
-
-import { CldImageWrapper } from '@/components/utils/CldImageWrapper'
-
-import styles from '@blog/_components/BlogImage/index.module.scss'
-import { getPureCloudinaryPath } from '@blog/_lib/cloudinaryUtils'
-
-function ImageSpoiler() {
- const [spoilerState, setSpoilerState] = useState(true)
- return spoilerState ? (
-
-
- ) : (
- <>
- )
-}
+import { Image } from '@/components/atoms/Image'
export function ImageWithModal(props: {
src: string
@@ -33,38 +12,13 @@ export function ImageWithModal(props: {
let width = parseInt(searchParams.get('w') ?? '', 10) || 1000
let height = parseInt(searchParams.get('h') ?? '', 10) || 750
- const minWidth = 1000
- if (width < minWidth) {
- height = Math.round(minWidth * (height / width))
- width = minWidth
- }
-
- const maxHeight = 700
- if (height > maxHeight) {
- width = Math.round(maxHeight * (width / height))
- height = maxHeight
- }
-
- const srcPath = getPureCloudinaryPath(props.src).split('?')[0]
- const blurPath = `https://res.cloudinary.com/trpfrog/image/upload/w_10${srcPath}`
-
return (
- setSpoilerState(false)}
- >
- 画像を表示する
-
-
-
+
-
+ 2 ? 'only-on-pc' : ''}>
+
2 ? 'sp:tw-hidden' : ''}>
))}
@@ -36,19 +33,19 @@ export const RelatedPosts = ({
{/* PC */}
{relatedPosts.length > 6 && (
-
-