Merge branch 'main' into #23

frontend/src/App.css

@@ -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;
-}

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<Category, string> = {
       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)
-    }
+    const tagsTmp = { } as TagByCategory
 
-    fetchTags ()
+    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 (
       <SidebarComponent>
-        <TagSearch />
-        {CATEGORIES.map ((cat: Category) => cat in tags && (
-            <div className="my-3" key={cat}>
-              <SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
-              <ul>
-                {tags[cat].map (tag => (
-                    <li key={tag.id} className="mb-1">
-                      <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}>
-                        {tag.name}
-                      </Link>
-                    </li>))}
-              </ul>
-            </div>))}
+	<TagSearch />
+	{CATEGORIES.map ((cat: Category) => cat in tags && (
+	    <div className="my-3" key={cat}>
+	      <SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
+	      <ul>
+		{tags[cat].map ((tag, i) => (
+		    <li key={i} className="mb-1">
+		      <TagLink tag={tag} />
+		    </li>))}
+	      </ul>
+	    </div>))}
       </SidebarComponent>)
 }

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) && (
+	    <span className="mr-1">
+	      <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
+		    className={linkClass}>
+		?
+	      </Link>
+	    </span>)}
+	{linkFlg
+	 ? (
+	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+		  className={linkClass}>
+	      {tag.name}
+	    </Link>)
+	 : (
+	    <span className={spanClass}>
+	      {tag.name}
+	    </span>)}
+	{withCount && (
+	    <span className="ml-1">{tag.postCount}</span>)}
+      </>)
+}

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 => (
 		  <li key={tag.id} className="mb-1">
-		    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}>
-		      {tag.name}
-		    </Link>
-		    <span className="ml-1">{tag.postCount}</span>
+		    <TagLink tag={tag} />
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>関聯</SectionTitle>

frontend/src/components/TopNav.tsx

@@ -1,49 +1,59 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useState, useEffect } from 'react'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, /* useNavigate */ } from 'react-router-dom'
 
-import { Button } from '@/components/ui/button'
 import { API_BASE_URL } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { cn } from '@/lib/utils'
 
-import type { Tag, User, WikiPage } from '@/types'
+import type { Menu, Tag, User, WikiPage } from '@/types'
 
 type Props = { user: User | null }
 
-const Menu = { None:  'None',
-	       Post:  'Post',
-	       User:  'User',
-	       Tag:   'Tag',
-	       Wiki:  'Wiki' } as const
-
-type Menu = typeof Menu[keyof typeof Menu]
-
 
 export default ({ user }: Props) => {
   const location = useLocation ()
-  const navigate = useNavigate ()
+  // const navigate = useNavigate ()
 
-  const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
-  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
-  // const [wikiSearch, setWikiSearch] = useState ('')
   // const [activeIndex, setActiveIndex] = useState (-1)
-  // const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
+  const [postCount, setPostCount] = useState<number | null> (null)
   // const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
+  // const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
   // const [tagSearch, setTagSearch] = useState ('')
   // const [userSearch, setUserSearch] = useState ('')
-  const [postCount, setPostCount] = useState<number | null> (null)
+  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
+  // const [wikiSearch, setWikiSearch] = useState ('')
 
-  const MyLink = ({ to, title, base }: { to:    string
-					 title: string
-					 base?: string }) => (
-      <Link to={to} className={cn ('hover:text-orange-500 h-full flex items-center',
-				   (location.pathname.startsWith (base ?? to)
-				    ? 'bg-gray-700 px-4 font-bold'
-				    : 'px-2'))}>
-	{title}
-      </Link>)
+  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId)
+  const wikiTitle = location.pathname.split ('/')[2]
+  const menu: Menu = [
+      { name: '広場', to: '/posts', subMenu: [
+	  { name: '一覧', to: '/posts' },
+	  { name: '投稿追加', to: '/posts/new' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
+      { name: 'タグ', to: '/tags', subMenu: [
+	  { name: 'タグ一覧', to: '/tags', visible: false },
+	  { name: '別名タグ', to: '/tags/aliases', visible: false },
+	  { name: '上位タグ', to: '/tags/implications', visible: false },
+	  { name: 'ニコニコ連携', to: '/tags/posts' },
+	  { name: 'タグのつけ方', to: '/wiki/ヘルプ:タグのつけ方' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
+      { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
+	  { name: '検索', to: '/wiki' },
+	  { name: '新規', to: '/wiki/new' },
+	  { name: '全体履歴', to: '/wiki/changes' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:Wiki' },
+	  { component: <span className="flex items-center px-2">|</span>,
+	    visible: wikiPageFlg },
+	  { name: `広場 (${ postCount || 0 })`, to: `/posts?tags=${ wikiTitle }`,
+	    visible: wikiPageFlg },
+	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
+	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
+      { name: 'ユーザ', to: '/users', subMenu: [
+	  { name: '一覧', to: '/users', visible: false },
+	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
+	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
 
 //  const whenTagSearchChanged = (ev: React.ChangeEvent<HTMLInputElement>) => {
 //    // TODO: 実装
@@ -100,33 +110,18 @@ export default ({ user }: Props) => {
     return () => unsubscribe ()
   }, [])
 
-  useEffect (() => {
-    if (location.pathname.startsWith ('/posts'))
-      setSelectedMenu (Menu.Post)
-    else if (location.pathname.startsWith ('/users'))
-      setSelectedMenu (Menu.User)
-    else if (location.pathname.startsWith ('/tags'))
-      setSelectedMenu (Menu.Tag)
-    else if (location.pathname.startsWith ('/wiki'))
-      setSelectedMenu (Menu.Wiki)
-    else
-      setSelectedMenu (Menu.None)
-  }, [location])
-
   useEffect (() => {
     if (!(wikiId))
       return
 
-    void (async () => {
+    const fetchPostCount = async () => {
       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
+	const tag = toCamel (tagRes.data as any, { deep: true }) as Tag
 
 	setPostCount (tag.postCount)
       }
@@ -134,101 +129,47 @@ export default ({ user }: Props) => {
       {
 	setPostCount (0)
       }
-    }) ()
+    }
+    fetchPostCount ()
   }, [wikiId])
 
   return (
       <>
-	<nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
+	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
+			bg-yellow-50 dark:bg-red-975">
 	  <div className="flex items-center gap-2 h-full">
-	    <Link to="/" className="mx-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
-	    <MyLink to="/posts" title="広場" />
-	    <MyLink to="/tags" title="タグ" />
-	    <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
-	    <MyLink to="/users/settings" base="/users" title="ニジラー" />
+	    <Link to="/" className="mx-4 text-xl font-bold
+				    text-pink-600 hover:text-pink-400
+				    dark:text-pink-300 dark:hover:text-pink-100">
+	      ぼざクリ タグ広場
+	    </Link>
+	    {menu.map (item => (
+		<Link to={item.to}
+		      className={cn ('h-full flex items-center',
+				     (location.pathname.startsWith (item.base || item.to)
+				      ? 'bg-yellow-200 dark:bg-red-950 px-4 font-bold'
+				      : 'px-2'))}>
+		  {item.name}
+		</Link>
+	    ))}
 	  </div>
-	  <div className="ml-auto pr-4">
-	    {user && (
-		<Button onClick={() => navigate ('/users/settings')}
-			className="bg-gray-600">
+	  {user && (
+	      <div className="ml-auto pr-4">
+		<Link to="/users/settings"
+		      className="font-bold text-red-600 hover:text-red-400
+				 dark:text-yellow-400 dark:hover:text-yellow-200">
 		  {user.name || '名もなきニジラー'}
-		</Button>)}
-	  </div>
+		</Link>
+	      </div>)}
 	</nav>
-	{(() => {
-	  const className = 'bg-gray-700 text-white px-3 flex items-center w-full min-h-[40px]'
-	  const subClass = 'hover:text-orange-500 h-full flex items-center px-3'
-	  // const inputBox = 'flex items-center px-3 mx-2'
-	  const Separator = () => <span className="flex items-center px-2">|</span>
-	  switch (selectedMenu)
-	  {
-	  case Menu.Post:
-	    return (
-		<div className={className}>
-		  <Link to="/posts" className={subClass}>一覧</Link>
-		  <Link to="/posts/new" className={subClass}>投稿追加</Link>
-		  <Link to="/wiki/ヘルプ:広場" className={subClass}>ヘルプ</Link>
-		</div>)
-	  case Menu.Tag:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="タグ検索"
-			 value={tagSearch}
-			 onChange={whenTagSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  {/* <Link to="/tags" className={subClass}>タグ</Link> */}
-		  {/* <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
-		  <Link to="/tags/implications" className={subClass}>上位タグ</Link> */}
-		  <Link to="/tags/nico" className={subClass}>ニコニコ連携</Link>
-		  <Link to="/wiki/ヘルプ:タグのつけ方" className={subClass}>タグのつけ方</Link>
-		  <Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link>
-		</div>)
-	  case Menu.Wiki:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="Wiki 検索"
-			 value={wikiSearch}
-			 onChange={whenWikiSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  <Link to="/wiki" className={subClass}>検索</Link>
-		  <Link to="/wiki/new" className={subClass}>新規</Link>
-		  <Link to="/wiki/changes" className={subClass}>全体履歴</Link>
-		  <Link to="/wiki/ヘルプ:Wiki" className={subClass}>ヘルプ</Link>
-		  {(/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId) &&
-		      <>
-			<Separator />
-			<Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>広場 ({postCount || 0})</Link>
-			<Link to={`/wiki/changes?id=${ wikiId }`} className={subClass}>履歴</Link>
-			<Link to={`/wiki/${ wikiId || location.pathname.split ('/')[2] }/edit`} className={subClass}>編輯</Link>
-		      </>}
-		</div>)
-	  case Menu.User:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="ニジラー検索"
-			 value={userSearch}
-			 onChange={whenUserSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  {/* <Link to="/users" className={subClass}>一覧</Link>
-		  {user && <Link to={`/users/${ user.id }`} className={subClass}>お前</Link>} */}
-		  {user && <Link to="/users/settings" className={subClass}>設定</Link>}
-		</div>)
-	  }
-	}) ()}
+	<div className={cn ('bg-yellow-200 dark:bg-red-950',
+			    'text-white px-3 flex items-center w-full min-h-[40px]')}>
+	  {menu.find (item => location.pathname.startsWith (item.base || item.to))?.subMenu
+	   .filter (item => item.visible ?? true)
+	   .map (item => 'component' in item ? item.component : (
+	      <Link to={item.to} className="h-full flex items-center px-3">
+		{item.name}
+	      </Link>))}
+	</div>
       </>)
 }

frontend/src/consts.ts

@@ -1,11 +1,25 @@
-export const CATEGORIES = ['general',
-			   'character',
-			   'deerjikist',
+import type { Category } from 'types'
+
+export const LIGHT_COLOUR_SHADE = 800
+export const DARK_COLOUR_SHADE = 300
+
+export const CATEGORIES = ['deerjikist',
 			   'meme',
+			   'character',
+			   'general',
 			   'material',
 			   'meta',
 			   'nico'] as const
 
+export const TAG_COLOUR = {
+    deerjikist: 'rose',
+    meme:       'purple',
+    character:  'lime',
+    general:    'cyan',
+    material:   'orange',
+    meta:       'yellow',
+    nico:       'gray' } as const satisfies Record<Category, string>
+
 export const USER_ROLES = ['admin', 'member', 'guest'] as const
 
 export const ViewFlagBehavior = { OnShowedDetail: 1,

frontend/src/index.css

@@ -2,13 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  body {
+@layer base
+{
+  body
+  {
     @apply overflow-x-clip;
   }
+
+  a
+  {
+    @apply text-blue-600 dark:text-blue-300;
+  }
+  a:hover
+  {
+    @apply text-blue-400 dark:text-blue-100;
+  }
 }
 
-:root {
+:root
+{
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -23,16 +35,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
+a
+{
   font-weight: 500;
-  color: #646cff;
   text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}
 
-body {
+body
+{
   margin: 0;
   display: flex;
   place-items: center;
@@ -40,12 +50,14 @@ body {
   min-height: 100vh;
 }
 
-h1 {
+h1
+{
   font-size: 3.2em;
   line-height: 1.1;
 }
 
-button {
+button
+{
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -56,23 +68,29 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+button:hover
+{
   border-color: #646cff;
 }
 button:focus,
-button:focus-visible {
+button:focus-visible
+{
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
+@media (prefers-color-scheme: light)
+{
+  :root
+  {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
+  a:hover
+  {
     color: #747bff;
   }
-  button {
+  button
+  {
     background-color: #f9f9f9;
   }
 }

frontend/src/pages/posts/PostDetailPage.tsx

@@ -51,7 +51,7 @@ export default ({ user }: Props) => {
     if (!(id))
       return
 
-    void (async () => {
+    const fetchPost = async () => {
       try
       {
 	const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
@@ -63,7 +63,8 @@ export default ({ user }: Props) => {
 	if (axios.isAxiosError (err))
 	  setStatus (err.status ?? 200)
       }
-    }) ()
+    }
+    fetchPost ()
   }, [id])
 
   useEffect (() => {

frontend/src/pages/posts/PostListPage.tsx

@@ -93,19 +93,19 @@ export default () => {
 	    <Tab name="広場">
 	      {posts.length
 	       ? (
-		  <div className="flex flex-wrap gap-4 gap-y-8 p-4 justify-between">
-		  {posts.map ((post, i) => (
-		      <Link to={`/posts/${ post.id }`}
-			    key={post.id}
-			    className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-			<img src={post.thumbnail || post.thumbnailBase || undefined}
-			     alt={post.title || post.url}
-			     title={post.title || post.url || undefined}
-			     loading="eager"
-			     fetchPriority="high"
-			     decoding="async"
-			     className="object-none w-full h-full" />
-		      </Link>))}
+		  <div className="flex flex-wrap gap-6 p-4">
+		    {posts.map ((post, i) => (
+			<Link to={`/posts/${ post.id }`}
+			      key={i}
+			      className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
+			  <img src={post.thumbnail || post.thumbnailBase || undefined}
+			       alt={post.title || post.url}
+			       title={post.title || post.url || undefined}
+			       loading="eager"
+			       fetchPriority="high"
+			       decoding="async"
+			       className="object-none w-full h-full" />
+			</Link>))}
 		  </div>)
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
@@ -115,7 +115,7 @@ export default () => {
 		<Tab name="Wiki" init={!(posts.length)}>
 		  <WikiBody body={wikiPage.body} />
 		  <div className="my-2">
-		    <Link to={`/wiki/${ wikiPage.title }`}>Wiki を見る</Link>
+		    <Link to={`/wiki/${ encodeURIComponent (wikiPage.title) }`}>Wiki を見る</Link>
 		  </div>
 		</Tab>)}
 	  </TabGroup>

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -3,6 +3,7 @@ import toCamel from 'camelcase-keys'
 import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
+import TagLink from '@/components/TagLink'
 import SectionTitle from '@/components/common/SectionTitle'
 import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
@@ -15,10 +16,10 @@ type Props = { user: User | null }
 
 
 export default ({ user }: Props) => {
-  const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
   const [cursor, setCursor] = useState ('')
-  const [loading, setLoading] = useState (false)
   const [editing, setEditing] = useState<{ [key: number]: boolean }> ({ })
+  const [loading, setLoading] = useState (false)
+  const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
   const [rawTags, setRawTags] = useState<{ [key: number]: string }> ({ })
 
   const loaderRef = useRef<HTMLDivElement | null> (null)
@@ -56,6 +57,10 @@ export default ({ user }: Props) => {
 	    'Content-Type':     'multipart/form-data',
 	    'X-Transfer-Code':  localStorage.getItem ('user_code') ?? '' } })
 	const data = toCamel (res.data as any, { deep: true }) as Tag[]
+	setNicoTags (nicoTags => {
+	  nicoTags.find (t => t.id === id)!.linkedTags = data
+	  return [...nicoTags]
+	})
 	setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
 
 	toast ({ title: '更新しました．' })
@@ -106,13 +111,10 @@ export default ({ user }: Props) => {
 		  </tr>
 		</thead>
 		<tbody>
-		  {nicoTags.map (tag => (
-		      <tr key={tag.id}>
+		  {nicoTags.map ((tag, i) => (
+		      <tr key={i}>
 			<td className="p-2">
-			  <a href={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-			     target="_blank">
-			    {tag.name}
-			  </a>
+			  <TagLink tag={tag} withWiki={false} withCount={false} />
 			</td>
 			<td className="p-2">
 			  {editing[tag.id]
@@ -120,7 +122,12 @@ export default ({ user }: Props) => {
 			      <TextArea value={rawTags[tag.id]} onChange={ev => {
 				setRawTags (rawTags => ({ ...rawTags, [tag.id]: ev.target.value }))
 			      }} />)
-			   : rawTags[tag.id]}
+			   : tag.linkedTags.map((lt, j) => (
+			      <span key={j} className="mr-2">
+				<TagLink tag={lt}
+					 linkFlg={false}
+					 withCount={false} />
+			      </span>))}
 			</td>
 			{memberFlg && (
 			    <td>
@@ -129,7 +136,11 @@ export default ({ user }: Props) => {
 				handleEdit (tag.id)
 			      }}>
 			        {editing[tag.id]
-				 ? <span className="text-red-400">更新</span>
+				 ? (
+				    <span className="text-red-600 hover:text-red-400
+						     dark:text-red-300 dark:hover:text-red-100">
+				      更新
+				    </span>)
 				 : <span>編輯</span>}
 			      </a>
 			    </td>)}

frontend/src/pages/wiki/WikiDiffPage.tsx

@@ -7,6 +7,7 @@ import { useLocation, useParams } from 'react-router-dom'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
+import { cn } from '@/lib/utils'
 
 import type { WikiPageDiff } from '@/types'
 
@@ -31,16 +32,19 @@ export default () => {
 
   return (
       <MainArea>
-        <Helmet>
-          <title>{`Wiki 差分: ${ diff?.title } | ${ SITE_TITLE }`}</title>
-        </Helmet>
-        <PageTitle>{diff?.title}</PageTitle>
-        <div className="prose mx-auto p-4">
-          {diff ? (
-              diff.diff.map (d => (
-                  <span className={d.type === 'added' ? 'bg-green-800' : d.type === 'removed' ? 'bg-red-800' : ''}>
-                    {d.content == '\n' ? <br /> : d.content}
-                  </span>))) : 'Loading...'}
-        </div>
+	<Helmet>
+	  <title>{`Wiki 差分: ${ diff?.title } | ${ SITE_TITLE }`}</title>
+	</Helmet>
+	<PageTitle>{diff?.title}</PageTitle>
+	<div className="prose mx-auto p-4">
+	  {diff
+	   ? (
+	      diff.diff.map (d => (
+		  <span className={cn (d.type === 'added' && 'bg-green-200 dark:bg-green-800',
+				       d.type === 'removed' && 'bg-red-200 dark:bg-red-800')}>
+		    {d.content == '\n' ? <br /> : d.content}
+		  </span>)))
+	   : 'Loading...'}
+	</div>
       </MainArea>)
 }

frontend/src/types.ts

@@ -1,10 +1,19 @@
+import React from 'react'
+
 import { CATEGORIES, USER_ROLES, ViewFlagBehavior } from '@/consts'
 
 export type Category = typeof CATEGORIES[number]
 
-export type NicoTag = {
-    id:         number
-    name:       string
+export type Menu = MenuItem[]
+
+export type MenuItem = {
+    name:     string
+    to:       string
+    base?:    string
+    subMenu:  SubMenuItem[] }
+
+export type NicoTag = Tag & {
+    category:   'nico'
     linkedTags: Tag[] }
 
 export type Post = {
@@ -16,6 +25,14 @@ export type Post = {
     tags:           Tag[]
     viewed:         boolean }
 
+export type SubMenuItem = {
+    component:  React.ReactNode
+    visible:    boolean
+    } | {
+    name:     string
+    to:       string
+    visible?: boolean }
+
 export type Tag = {
     id:         number
     name:       string

frontend/tailwind.config.js

@@ -1,20 +1,35 @@
 /** @type {import('tailwindcss').Config} */
 import type { Config } from 'tailwindcss'
 
+import { DARK_COLOUR_SHADE,
+         LIGHT_COLOUR_SHADE,
+         TAG_COLOUR } from './src/consts'
+
+const colours = Object.values (TAG_COLOUR)
+
 export default {
-  content: ['./index.html',
-            './src/**/*.{js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
+             ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),
+             ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`),
+             ...colours.map (c => `dark:hover:text-${ c }-${ DARK_COLOUR_SHADE - 200 }`)],
   theme: {
     extend: {
+      animation: {
+        'rainbow-scroll': 'rainbow-scroll .25s linear infinite',
+      },
+      colors: {
+        red: {
+          925: '#5f1414',
+          975: '#230505',
+        }
+      },
       keyframes: {
         'rainbow-scroll': {
           '0%': { backgroundPosition: '0% 50%' },
           '100%': { backgroundPosition: '200% 50%' },
         },
       },
-      animation: {
-        'rainbow-scroll': 'rainbow-scroll .25s linear infinite',
-      },
     }
   },
   plugins: [],