From b875552c01e5d1a302d6da90aba28e99c42caba4 Mon Sep 17 00:00:00 2001 From: junkisai Date: Tue, 15 Oct 2024 20:25:31 +0900 Subject: [PATCH 1/6] feat: Add NavXXXPost component --- .../NavNextPost/NavNextPost.module.css | 55 +++++++++++++++++ .../NavNextPost/NavNextPost.stories.tsx | 16 +++++ .../components/NavNextPost/NavNextPost.tsx | 21 +++++++ .../posts/components/NavNextPost/index.ts | 1 + .../NavPreviousPost.module.css | 56 +++++++++++++++++ .../NavPreviousPost.stories.tsx | 16 +++++ .../NavPreviousPost/NavPreviousPost.tsx | 21 +++++++ .../posts/components/NavPreviousPost/index.ts | 1 + .../src/features/posts/components/index.ts | 2 + .../src/features/posts/factories.ts | 61 +++++++++++++++++++ 10 files changed, 250 insertions(+) create mode 100644 frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css create mode 100644 frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.stories.tsx create mode 100644 frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx create mode 100644 frontend/apps/service-site/src/features/posts/components/NavNextPost/index.ts create mode 100644 frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.module.css create mode 100644 frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.stories.tsx create mode 100644 frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx create mode 100644 frontend/apps/service-site/src/features/posts/components/NavPreviousPost/index.ts create mode 100644 frontend/apps/service-site/src/features/posts/factories.ts diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css new file mode 100644 index 000000000..17759d20f --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css @@ -0,0 +1,55 @@ +.wrapper { + display: grid; + grid-auto-flow: row; + gap: var(--spacing-2); +} + +.label { + color: var(--global-body-text); + font-family: var(--main-font); + font-size: var(--font-size-2); + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .label { + color: var(--global-foreground); +} + +.titleWrapper { + display: grid; + grid-auto-flow: column; + gap: var(--spacing-half); + justify-content: flex-start; +} + +.icon { + width: 1.25rem; + height: 1.25rem; + color: var(--global-foreground); + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .icon { + color: var(--primary-color); +} + +.title { + display: -webkit-box; + overflow: hidden; + color: var(--global-foreground); + text-overflow: ellipsis; + font-family: var(--message-font); + font-size: var(--font-size-7); + line-height: 120%; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .title { + color: var(--primary-color); +} diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.stories.tsx b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.stories.tsx new file mode 100644 index 000000000..e7ba071ab --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { aPost } from '../../factories' +import { NavNextPost } from './' + +const meta = { + component: NavNextPost, + args: { + post: aPost(), + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx new file mode 100644 index 000000000..7146d86f1 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx @@ -0,0 +1,21 @@ +import type { Post } from 'contentlayer/generated' +import { ChevronRight } from 'lucide-react' +import Link from 'next/link' +import type { FC } from 'react' +import styles from './NavNextPost.module.css' + +type Props = { + post: Post +} + +export const NavNextPost: FC = ({ post }) => { + return ( + + Next +
+ {post.title} + +
+ + ) +} diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/index.ts b/frontend/apps/service-site/src/features/posts/components/NavNextPost/index.ts new file mode 100644 index 000000000..f97bfc9f4 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/index.ts @@ -0,0 +1 @@ +export * from './NavNextPost' diff --git a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.module.css b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.module.css new file mode 100644 index 000000000..b070bcf68 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.module.css @@ -0,0 +1,56 @@ +.wrapper { + display: grid; + grid-auto-flow: row; + gap: var(--spacing-2); +} + +.label { + padding-left: var(--spacing-6); + color: var(--global-body-text); + font-family: var(--main-font); + font-size: var(--font-size-2); + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .label { + color: var(--global-foreground); +} + +.titleWrapper { + display: grid; + grid-auto-flow: column; + gap: var(--spacing-half); + justify-content: flex-start; +} + +.icon { + width: 1.25rem; + height: 1.25rem; + color: var(--global-foreground); + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .icon { + color: var(--primary-color); +} + +.title { + display: -webkit-box; + overflow: hidden; + color: var(--global-foreground); + text-overflow: ellipsis; + font-family: var(--message-font); + font-size: var(--font-size-7); + line-height: 120%; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; + transition: color var(--default-hover-animation-duration) + var(--default-timing-function); +} + +.wrapper:hover .title { + color: var(--primary-color); +} diff --git a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.stories.tsx b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.stories.tsx new file mode 100644 index 000000000..eee1639ef --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { aPost } from '../../factories' +import { NavPreviousPost } from './' + +const meta = { + component: NavPreviousPost, + args: { + post: aPost(), + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx new file mode 100644 index 000000000..8bd094b98 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx @@ -0,0 +1,21 @@ +import type { Post } from 'contentlayer/generated' +import { ChevronLeft } from 'lucide-react' +import Link from 'next/link' +import type { FC } from 'react' +import styles from './NavPreviousPost.module.css' + +type Props = { + post: Post +} + +export const NavPreviousPost: FC = ({ post }) => { + return ( + + Previous +
+ + {post.title} +
+ + ) +} diff --git a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/index.ts b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/index.ts new file mode 100644 index 000000000..828626345 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/index.ts @@ -0,0 +1 @@ +export * from './NavPreviousPost' diff --git a/frontend/apps/service-site/src/features/posts/components/index.ts b/frontend/apps/service-site/src/features/posts/components/index.ts index 76609d12c..956d547f5 100644 --- a/frontend/apps/service-site/src/features/posts/components/index.ts +++ b/frontend/apps/service-site/src/features/posts/components/index.ts @@ -2,6 +2,8 @@ export * from './Code' export * from './Heading' export * from './LinkHeading' export * from './LinkCard' +export * from './NavNextPost' +export * from './NavPreviousPost' export * from './TableOfContents' export * from './PostHero' diff --git a/frontend/apps/service-site/src/features/posts/factories.ts b/frontend/apps/service-site/src/features/posts/factories.ts new file mode 100644 index 000000000..06d10962f --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/factories.ts @@ -0,0 +1,61 @@ +import type { Post } from 'contentlayer/generated' + +export const aPost = (): Post => { + return { + _id: 'posts/14/en.mdx', + _raw: { + sourceFilePath: 'posts/14/en.mdx', + sourceFileName: 'en.mdx', + sourceFileDir: 'posts/14', + contentType: 'mdx', + flattenedPath: 'posts/14/en', + }, + type: 'Post', + title: + 'Managing Data with No-Code: The Best Tools for Complex Business Needs', + date: '2024-09-12T00:00:00.000Z', + tags: ['No-code', 'App Development', 'Tech Trends'], + categories: ['Technology', 'App Development'], + writer: 'Skyler Knox', + image: '/images/posts/14/image.png', + introduction: + 'No-code platforms are revolutionizing the way businesses approach application development by empowering users to create software without traditional coding skills. In this post, we explore the profound impact of no-code platforms on the tech industry and what the future holds. First, the emergence of no-code platforms has democratized software development, making it accessible to a much wider audience beyond those with specialized programming knowledge. This shift has significantly lowered the barriers to innovation, enabling a diverse range of ideas to come to fruition. By providing intuitive, visual interfaces and pre-built components, these platforms allow individuals from various backgrounds to transform their concepts into functional applications', + body: { + raw: + '\n' + + 'The rise of no-code application platforms is changing the landscape of software development. These platforms allow users with little to no coding knowledge to create fully functional applications, reducing the barrier to entry for innovation. The convenience, flexibility, and speed offered by no-code tools are helping businesses of all sizes innovate at unprecedented rates.\n' + + '\n' + + '## What is a No-Code Platform?\n' + + '\n' + + 'A no-code platform provides a user-friendly interface where developers, or even non-developers, can build applications through drag-and-drop functionality and pre-built components. These platforms abstract away the complexity of traditional coding, allowing anyone with a vision to bring their ideas to life.\n' + + '\n' + + '## The Benefits of No-Code Platforms\n' + + '\n' + + '1. **Speed and Agility**: No-code platforms allow for rapid prototyping and development, reducing the time it takes to bring a product to market.\n' + + '2. **Cost-Effective**: Without the need for dedicated development teams, businesses can significantly reduce costs.\n' + + '3. **Empowerment**: Business users can create applications themselves, reducing the reliance on IT departments.\n' + + '\n' + + '## The Future of No-Code\n' + + '\n' + + 'As the capabilities of no-code platforms continue to expand, more complex applications can be built without needing to write a single line of code. AI integration and automation are the next frontiers in no-code development, offering even more opportunities for innovation.\n' + + '\n' + + 'The no-code movement is democratizing the app development process, empowering more people to participate in creating the future of software. As these platforms evolve, they will continue to blur the line between developer and non-developer, making app development accessible to everyone.\n', + code: + 'var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},s=(o,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!g.call(o,i)&&i!==n&&r(o,i,{get:()=>e[i],enumerable:!(a=f(e,i))||a.enumerable});return o};var b=(o,e,n)=>(n=o!=null?h(u(o)):{},s(e||!o||!o.__esModule?r(n,"default",{value:o,enumerable:!0}):n,o)),y=o=>s(r({},"__esModule",{value:!0}),o);var d=v((C,l)=>{l.exports=_jsx_runtime});var T={};w(T,{default:()=>p,frontmatter:()=>x});var t=b(d()),x={title:"Managing Data with No-Code: The Best Tools for Complex Business Needs",date:"2024-09-12",tags:["No-code","App Development","Tech Trends"],categories:["Technology","App Development"],image:"/images/posts/14/image.png",writer:"Skyler Knox",introduction:"No-code platforms are revolutionizing the way businesses approach application development by empowering users to create software without traditional coding skills. In this post, we explore the profound impact of no-code platforms on the tech industry and what the future holds. First, the emergence of no-code platforms has democratized software development, making it accessible to a much wider audience beyond those with specialized programming knowledge. This shift has significantly lowered the barriers to innovation, enabling a diverse range of ideas to come to fruition. By providing intuitive, visual interfaces and pre-built components, these platforms allow individuals from various backgrounds to transform their concepts into functional applications"};function c(o){let e={h2:"h2",li:"li",ol:"ol",p:"p",strong:"strong",...o.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:"The rise of no-code application platforms is changing the landscape of software development. These platforms allow users with little to no coding knowledge to create fully functional applications, reducing the barrier to entry for innovation. The convenience, flexibility, and speed offered by no-code tools are helping businesses of all sizes innovate at unprecedented rates."}),`\n' + + '`,(0,t.jsx)(e.h2,{id:"what-is-a-no-code-platform",children:"What is a No-Code Platform?"}),`\n' + + '`,(0,t.jsx)(e.p,{children:"A no-code platform provides a user-friendly interface where developers, or even non-developers, can build applications through drag-and-drop functionality and pre-built components. These platforms abstract away the complexity of traditional coding, allowing anyone with a vision to bring their ideas to life."}),`\n' + + '`,(0,t.jsx)(e.h2,{id:"the-benefits-of-no-code-platforms",children:"The Benefits of No-Code Platforms"}),`\n' + + '`,(0,t.jsxs)(e.ol,{children:[`\n' + + '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Speed and Agility"}),": No-code platforms allow for rapid prototyping and development, reducing the time it takes to bring a product to market."]}),`\n' + + '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Cost-Effective"}),": Without the need for dedicated development teams, businesses can significantly reduce costs."]}),`\n' + + '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Empowerment"}),": Business users can create applications themselves, reducing the reliance on IT departments."]}),`\n' + + '`]}),`\n' + + '`,(0,t.jsx)(e.h2,{id:"the-future-of-no-code",children:"The Future of No-Code"}),`\n' + + '`,(0,t.jsx)(e.p,{children:"As the capabilities of no-code platforms continue to expand, more complex applications can be built without needing to write a single line of code. AI integration and automation are the next frontiers in no-code development, offering even more opportunities for innovation."}),`\n' + + '`,(0,t.jsx)(e.p,{children:"The no-code movement is democratizing the app development process, empowering more people to participate in creating the future of software. As these platforms evolve, they will continue to blur the line between developer and non-developer, making app development accessible to everyone."})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,{...o,children:(0,t.jsx)(c,{...o})}):c(o)}return y(T);})();\n' + + ';return Component;', + }, + lang: 'en', + slug: '14', + } +} From 9dc640959e2611a83155593885d5846915ead46c Mon Sep 17 00:00:00 2001 From: junkisai Date: Tue, 15 Oct 2024 20:29:47 +0900 Subject: [PATCH 2/6] refactor: use sortPostsByDate --- .../posts/components/PostListPage/PostListPage.tsx | 8 +++----- .../apps/service-site/src/features/posts/utils/index.ts | 1 + .../src/features/posts/utils/sortPostsByDate.ts | 6 ++++++ .../src/features/top/components/TopPage/TopPage.tsx | 7 ++----- 4 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts diff --git a/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx b/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx index ac69fc90a..7b03490c9 100644 --- a/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx +++ b/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx @@ -1,10 +1,10 @@ import { type Lang, getTranslation } from '@/features/i18n' import { MDXContent } from '@/libs/contentlayer' import type { Post } from 'contentlayer/generated' -import { compareDesc, format, parseISO } from 'date-fns' +import { format, parseISO } from 'date-fns' import Link from 'next/link' import type { FC } from 'react' -import { filterPostsByLang } from '../../utils' +import { filterPostsByLang, sortPostsByDate } from '../../utils' function PostCard(post: Post) { return ( @@ -28,9 +28,7 @@ export const PostListPage: FC = ({ lang }) => { const { t } = getTranslation(lang) const posts = filterPostsByLang(lang) - const sortedPosts = posts.sort((a, b) => - compareDesc(new Date(a.date), new Date(b.date)), - ) + const sortedPosts = sortPostsByDate(posts) return (
diff --git a/frontend/apps/service-site/src/features/posts/utils/index.ts b/frontend/apps/service-site/src/features/posts/utils/index.ts index 824f2cbb9..205b31b29 100644 --- a/frontend/apps/service-site/src/features/posts/utils/index.ts +++ b/frontend/apps/service-site/src/features/posts/utils/index.ts @@ -1,2 +1,3 @@ export * from './filterPostsByLang' export * from './findPostByLangAndSlug' +export * from './sortPostsByDate' diff --git a/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts b/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts new file mode 100644 index 000000000..6df2f4ed9 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts @@ -0,0 +1,6 @@ +import type { Post } from 'contentlayer/generated' +import { compareDesc } from 'date-fns' + +export function sortPostsByDate(posts: Post[]) { + return posts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date))) +} diff --git a/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx b/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx index 412fc8012..887127fb9 100644 --- a/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx +++ b/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx @@ -1,7 +1,6 @@ import { TopCards } from '@/components' import type { Lang } from '@/features/i18n' -import { filterPostsByLang } from '@/features/posts' -import { compareDesc } from 'date-fns' +import { filterPostsByLang, sortPostsByDate } from '@/features/posts' import type { FC } from 'react' type Props = { @@ -10,9 +9,7 @@ type Props = { export const TopPage: FC = ({ lang }) => { const posts = filterPostsByLang(lang) - const sortedPosts = posts.sort((a, b) => - compareDesc(new Date(a.date), new Date(b.date)), - ) + const sortedPosts = sortPostsByDate(posts) return } From 3aed6c22e21c40653b19f789e6659a54f90485fc Mon Sep 17 00:00:00 2001 From: junkisai Date: Wed, 16 Oct 2024 15:48:15 +0900 Subject: [PATCH 3/6] fixup! feat: Add NavXXXPost component --- .../posts/components/NavNextPost/NavNextPost.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css index 17759d20f..b247ab472 100644 --- a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.module.css @@ -20,7 +20,7 @@ display: grid; grid-auto-flow: column; gap: var(--spacing-half); - justify-content: flex-start; + justify-content: space-between; } .icon { @@ -44,8 +44,8 @@ font-size: var(--font-size-7); line-height: 120%; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; + -webkit-line-clamp: 3; + line-clamp: 3; transition: color var(--default-hover-animation-duration) var(--default-timing-function); } From 5dad9471d77f7c34459e71a44b1c8f36819e70dd Mon Sep 17 00:00:00 2001 From: junkisai Date: Wed, 16 Oct 2024 15:50:59 +0900 Subject: [PATCH 4/6] refactor: use createPostDetailLink --- frontend/apps/service-site/src/app/page.tsx | 3 +-- .../src/app/posts/[slug]/page.tsx | 2 +- .../apps/service-site/src/app/posts/page.tsx | 3 +-- .../src/components/TopCards/TopCards.tsx | 5 +++-- .../components/NavNextPost/NavNextPost.tsx | 10 ++++++++-- .../NavPreviousPost/NavPreviousPost.tsx | 10 ++++++++-- .../components/PostListPage/PostListPage.tsx | 20 ++++++++++++------- .../posts/utils/createPostDetailLink.ts | 14 +++++++++++++ .../top/components/TopPage/TopPage.tsx | 8 ++++---- 9 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 frontend/apps/service-site/src/features/posts/utils/createPostDetailLink.ts diff --git a/frontend/apps/service-site/src/app/page.tsx b/frontend/apps/service-site/src/app/page.tsx index 95220301e..b844e3af3 100644 --- a/frontend/apps/service-site/src/app/page.tsx +++ b/frontend/apps/service-site/src/app/page.tsx @@ -1,6 +1,5 @@ -import { fallbackLang } from '@/features/i18n' import { TopPage } from '@/features/top' export default function Page() { - return + return } diff --git a/frontend/apps/service-site/src/app/posts/[slug]/page.tsx b/frontend/apps/service-site/src/app/posts/[slug]/page.tsx index 1f3053108..58855f3e4 100644 --- a/frontend/apps/service-site/src/app/posts/[slug]/page.tsx +++ b/frontend/apps/service-site/src/app/posts/[slug]/page.tsx @@ -24,5 +24,5 @@ const paramsSchema = object({ export default function Page({ params }: PageProps) { const { slug } = parse(paramsSchema, params) - return + return } diff --git a/frontend/apps/service-site/src/app/posts/page.tsx b/frontend/apps/service-site/src/app/posts/page.tsx index c98ef0e22..f5674ce4f 100644 --- a/frontend/apps/service-site/src/app/posts/page.tsx +++ b/frontend/apps/service-site/src/app/posts/page.tsx @@ -1,6 +1,5 @@ -import { fallbackLang } from '@/features/i18n' import { PostListPage } from '@/features/posts' export default function Page() { - return + return } diff --git a/frontend/apps/service-site/src/components/TopCards/TopCards.tsx b/frontend/apps/service-site/src/components/TopCards/TopCards.tsx index 382063a13..9ccc0073c 100644 --- a/frontend/apps/service-site/src/components/TopCards/TopCards.tsx +++ b/frontend/apps/service-site/src/components/TopCards/TopCards.tsx @@ -1,11 +1,12 @@ import type { Lang } from '@/features/i18n' +import { createPostDetailLink } from '@/features/posts' import type { Post } from 'contentlayer/generated' import Image from 'next/image' import Link from 'next/link' import styles from './TopCards.module.css' interface TopCardsProps { posts: Post[] - lang?: Lang + lang?: Lang | undefined } export function TopCards({ posts, lang }: TopCardsProps) { @@ -13,7 +14,7 @@ export function TopCards({ posts, lang }: TopCardsProps) {
{posts.map((post) => (
diff --git a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx index 7146d86f1..95334f8f8 100644 --- a/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx +++ b/frontend/apps/service-site/src/features/posts/components/NavNextPost/NavNextPost.tsx @@ -1,16 +1,22 @@ +import type { Lang } from '@/features/i18n' import type { Post } from 'contentlayer/generated' import { ChevronRight } from 'lucide-react' import Link from 'next/link' import type { FC } from 'react' +import { createPostDetailLink } from '../../utils' import styles from './NavNextPost.module.css' type Props = { + lang?: Lang | undefined post: Post } -export const NavNextPost: FC = ({ post }) => { +export const NavNextPost: FC = ({ lang, post }) => { return ( - + Next
{post.title} diff --git a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx index 8bd094b98..b3c03be3f 100644 --- a/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx +++ b/frontend/apps/service-site/src/features/posts/components/NavPreviousPost/NavPreviousPost.tsx @@ -1,16 +1,22 @@ +import type { Lang } from '@/features/i18n' import type { Post } from 'contentlayer/generated' import { ChevronLeft } from 'lucide-react' import Link from 'next/link' import type { FC } from 'react' +import { createPostDetailLink } from '../../utils' import styles from './NavPreviousPost.module.css' type Props = { + lang?: Lang | undefined post: Post } -export const NavPreviousPost: FC = ({ post }) => { +export const NavPreviousPost: FC = ({ lang, post }) => { return ( - + Previous
diff --git a/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx b/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx index 7b03490c9..65bef6c9a 100644 --- a/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx +++ b/frontend/apps/service-site/src/features/posts/components/PostListPage/PostListPage.tsx @@ -1,16 +1,22 @@ -import { type Lang, getTranslation } from '@/features/i18n' +import { type Lang, fallbackLang, getTranslation } from '@/features/i18n' import { MDXContent } from '@/libs/contentlayer' import type { Post } from 'contentlayer/generated' import { format, parseISO } from 'date-fns' import Link from 'next/link' import type { FC } from 'react' -import { filterPostsByLang, sortPostsByDate } from '../../utils' +import { + createPostDetailLink, + filterPostsByLang, + sortPostsByDate, +} from '../../utils' -function PostCard(post: Post) { +function PostCard(post: Post, lang?: Lang) { return (

- {post.title} + + {post.title} +