Merge pull request #811 from object1037/dev

Display post count by the tag name

app/components/article.tsx

@@ -26,7 +26,9 @@ export const Article = ({
         heading={post.title}
         className={css({ gridArea: 'article' })}
       >
-        <TagList tags={post.tags} />
+        <TagList
+          tagDatas={post.tags.map((tag) => ({ tagName: tag, count: 0 }))}
+        />
         <article
           className="markdown_wrapper"
           // biome-ignore lint/security/noDangerouslySetInnerHtml: the content is trusted.

app/components/tag.tsx

@@ -1,20 +1,37 @@
 import { Link } from '@remix-run/react'
+import { css, cx } from 'styled-system/css'
 
 import { button } from 'styled-system/patterns'
+import type { getTags } from '~/.server/db'
 
-export const Tag = ({ name }: { name: string }) => {
+export const Tag = ({
+  tagData,
+}: { tagData: Awaited<ReturnType<typeof getTags>>[number] }) => {
   const tagStyle = button({
+    display: 'flex',
     py: '1.5',
     px: '3',
+    gap: '2',
+    color: 'neutral.700',
     borderColor: 'neutral.200',
+    divideColor: { base: 'neutral.200', _hover: 'neutral.300' },
     borderWidth: '[1px]',
-    display: 'inline-block',
-    color: 'neutral.700',
+    divideX: '1px',
+    transition: 'colors',
+  })
+  const countStyle = css({
+    pl: '2',
+    color: { base: 'neutral.400', _groupHover: 'neutral.500' },
   })
 
   return (
-    <Link to={`/tags/${name}`} prefetch="intent" className={tagStyle}>
-      {name}
+    <Link
+      to={`/tags/${tagData.tagName}`}
+      prefetch="intent"
+      className={cx('group', tagStyle)}
+    >
+      <span>{tagData.tagName}</span>
+      {tagData.count > 0 && <span className={countStyle}>{tagData.count}</span>}
     </Link>
   )
 }

app/components/tagList.tsx

@@ -1,13 +1,16 @@
 import { wrap } from 'styled-system/patterns'
 
+import type { getTags } from '~/.server/db'
 import { Tag } from './tag'
 
-export const TagList = ({ tags }: { tags: string[] }) => {
+export const TagList = ({
+  tagDatas,
+}: { tagDatas: Awaited<ReturnType<typeof getTags>> }) => {
   return (
     <ul className={wrap()}>
-      {tags.map((tag) => (
-        <li key={tag}>
-          <Tag name={tag} />
+      {tagDatas.map((tagData) => (
+        <li key={tagData.tagName}>
+          <Tag tagData={tagData} />
         </li>
       ))}
     </ul>

app/routes/_blog.tags._index.tsx

@@ -16,20 +16,20 @@ export const meta: MetaFunction = () => [
 
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const env = envSchema.parse(context.cloudflare.env)
-  const tags = await getTags(env.DB).then((tags) => tags.map((t) => t.tagName))
+  const tagDatas = await getTags(env.DB)
 
   const cacheControl =
     'public, max-age=30, stale-while-revalidate=600, stale-if-error=864000'
 
-  return json({ tags }, { headers: { 'Cache-Control': cacheControl } })
+  return json({ tagDatas }, { headers: { 'Cache-Control': cacheControl } })
 }
 
 export default function Tags() {
-  const { tags } = useLoaderData<typeof loader>()
+  const { tagDatas } = useLoaderData<typeof loader>()
 
   return (
     <ContainerWithHeading heading="Tags">
-      <TagList tags={tags} />
+      <TagList tagDatas={tagDatas} />
     </ContainerWithHeading>
   )
 }

package.json

@@ -22,17 +22,17 @@
     "@codemirror/commands": "^6.3.3",
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language": "^6.10.1",
-    "@codemirror/language-data": "^6.4.1",
+    "@codemirror/language-data": "^6.5.0",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.1",
+    "@codemirror/view": "^6.26.2",
     "@jsquash/jpeg": "^1.4.0",
     "@jsquash/png": "^3.0.1",
     "@jsquash/resize": "^2.0.0",
     "@jsquash/webp": "^1.4.0",
     "@remix-run/cloudflare": "^2.8.1",
     "@remix-run/cloudflare-pages": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "drizzle-orm": "^0.30.7",
+    "drizzle-orm": "^0.30.8",
     "drizzle-zod": "^0.5.1",
     "fflate": "^0.8.2",
     "gray-matter": "^4.0.3",
@@ -45,7 +45,7 @@
     "react-icons": "^5.0.1",
     "remix-auth": "^3.6.0",
     "remix-auth-github": "^1.7.0",
-    "remix-utils": "^7.5.0",
+    "remix-utils": "^7.6.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -54,10 +54,10 @@
     "@pandacss/dev": "^0.37.2",
     "@pandacss/studio": "^0.37.2",
     "@remix-run/dev": "^2.8.1",
-    "@shikijs/markdown-it": "^1.2.4",
+    "@shikijs/markdown-it": "^1.3.0",
     "@types/markdown-it": "^14.0.0",
     "@types/markdown-it-container": "^2.0.10",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
@@ -66,11 +66,11 @@
     "postcss-nested": "^6.0.1",
     "postcss-prune-var": "^1.1.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "shiki": "^1.2.4",
-    "typescript": "^5.4.4",
+    "shiki": "^1.3.0",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2",
-    "wrangler": "^3.48.0"
+    "wrangler": "^3.49.0"
   },
   "engines": {
     "node": ">=18.0.0"