Skip to content

Commit

Permalink
Merge pull request #811 from object1037/dev
Browse files Browse the repository at this point in the history
Display post count by the tag name
  • Loading branch information
object1037 authored Apr 11, 2024
2 parents af4e9d4 + 14c4df0 commit 482ad08
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 268 deletions.
4 changes: 3 additions & 1 deletion app/components/article.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
27 changes: 22 additions & 5 deletions app/components/tag.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
11 changes: 7 additions & 4 deletions app/components/tagList.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
8 changes: 4 additions & 4 deletions app/routes/_blog.tags._index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
18 changes: 9 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand All @@ -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",
Expand All @@ -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"
Expand Down
Loading

0 comments on commit 482ad08

Please sign in to comment.