diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/components/TagDetailSidebar.tsx b/frontend/src/components/TagDetailSidebar.tsx index 31cdfb6..66afc78 100644 --- a/frontend/src/components/TagDetailSidebar.tsx +++ b/frontend/src/components/TagDetailSidebar.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react' -import { Link } from 'react-router-dom' +import TagLink from '@/components/TagLink' import TagSearch from '@/components/TagSearch' import SubsectionTitle from '@/components/common/SubsectionTitle' import SidebarComponent from '@/components/layout/SidebarComponent' @@ -14,47 +14,48 @@ type Props = { post: Post | null } export default ({ post }: Props) => { - const [tags, setTags] = useState({ } as TagByCategory) + const [tags, setTags] = useState ({ } as TagByCategory) - const categoryNames: Partial<{ [key in Category]: string }> = { - general: '一般', + const categoryNames: Record = { deerjikist: 'ニジラー', + meme: '原作・ネタ元・ミーム等', + character: 'キャラクター', + general: '一般', + material: '素材', + meta: 'メタタグ', nico: 'ニコニコタグ' } useEffect (() => { if (!(post)) return - const fetchTags = () => { - const tagsTmp = { } as TagByCategory - for (const tag of post.tags) - { - if (!(tag.category in tagsTmp)) - tagsTmp[tag.category] = [] - tagsTmp[tag.category].push (tag) - } - for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[]) - tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1) - setTags (tagsTmp) - } - - fetchTags () + const tagsTmp = { } as TagByCategory + + for (const tag of post.tags) + { + if (!(tag.category in tagsTmp)) + tagsTmp[tag.category] = [] + tagsTmp[tag.category].push (tag) + } + + for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[]) + tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1) + + setTags (tagsTmp) }, [post]) return ( - - {CATEGORIES.map ((cat: Category) => cat in tags && ( -
- {categoryNames[cat]} -
    - {tags[cat].map (tag => ( -
  • - - {tag.name} - -
    • ))} -
-
))} + + {CATEGORIES.map ((cat: Category) => cat in tags && ( +
+ {categoryNames[cat]} +
    + {tags[cat].map ((tag, i) => ( +
  • + +
    • ))} +
+
))} ) } diff --git a/frontend/src/components/TagLink.tsx b/frontend/src/components/TagLink.tsx new file mode 100644 index 0000000..33879a9 --- /dev/null +++ b/frontend/src/components/TagLink.tsx @@ -0,0 +1,48 @@ +import { Link } from 'react-router-dom' + +import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts' +import { cn } from '@/lib/utils' + +import type { Tag } from '@/types' + +type Props = { tag: Tag + linkFlg?: boolean + withWiki?: boolean + withCount?: boolean } + + +export default ({ tag, + linkFlg = true, + withWiki = true, + withCount = true }: Props) => { + const spanClass = cn ( + `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`, + `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`) + const linkClass = cn ( + spanClass, + `hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`, + `dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`) + + return ( + <> + {(linkFlg && withWiki) && ( + + + ? + + )} + {linkFlg + ? ( + + {tag.name} + ) + : ( + + {tag.name} + )} + {withCount && ( + {tag.postCount})} + ) +} diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx index d533693..372fb33 100644 --- a/frontend/src/components/TagSidebar.tsx +++ b/frontend/src/components/TagSidebar.tsx @@ -1,7 +1,8 @@ import axios from 'axios' import { useEffect, useState } from 'react' -import { Link, useLocation, useNavigate } from 'react-router-dom' +import { useLocation, useNavigate } from 'react-router-dom' +import TagLink from '@/components/TagLink' import TagSearch from '@/components/TagSearch' import SectionTitle from '@/components/common/SectionTitle' import SidebarComponent from '@/components/layout/SidebarComponent' @@ -28,6 +29,7 @@ export default ({ posts }: Props) => { useEffect (() => { const tagsTmp: TagByCategory = { } let cnt = 0 + loop: for (const post of posts) { @@ -35,6 +37,7 @@ export default ({ posts }: Props) => { { if (!(tag.category in tagsTmp)) tagsTmp[tag.category] = [] + if (!(tagsTmp[tag.category].map (t => t.id).includes (tag.id))) { tagsTmp[tag.category].push (tag) @@ -44,8 +47,10 @@ export default ({ posts }: Props) => { } } } + for (const cat of Object.keys (tagsTmp)) tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1) + setTags (tagsTmp) }, [posts]) @@ -57,10 +62,7 @@ export default ({ posts }: Props) => { {CATEGORIES.flatMap (cat => cat in tags ? ( tags[cat].map (tag => (
  • - - {tag.name} - - {tag.postCount} +
    • ))) : [])} 関聯 diff --git a/frontend/src/components/TopNav.tsx b/frontend/src/components/TopNav.tsx index bcd3ab2..cef9180 100644 --- a/frontend/src/components/TopNav.tsx +++ b/frontend/src/components/TopNav.tsx @@ -17,7 +17,6 @@ const Menu = { None: 'None', User: 'User', Tag: 'Tag', Wiki: 'Wiki' } as const - type Menu = typeof Menu[keyof typeof Menu] @@ -38,9 +37,9 @@ export default ({ user }: Props) => { const MyLink = ({ to, title, base }: { to: string title: string base?: string }) => ( - {title} ) @@ -121,11 +120,9 @@ export default ({ user }: Props) => { try { const pageRes = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`) - const pageData: any = pageRes.data - const wikiPage = toCamel (pageData, { deep: true }) as WikiPage + const wikiPage = toCamel (pageRes.data as any, { deep: true }) as WikiPage const tagRes = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`) - const tagData: any = tagRes.data const tag = toCamel (tagData, { deep: true }) as Tag setPostCount (tag.postCount) @@ -139,25 +136,32 @@ export default ({ user }: Props) => { return ( <> -