mirror of
https://github.com/documenso/documenso.git
synced 2025-11-12 15:53:02 +10:00
4dd95016b1
## Description Support setting a document language that will control the language used for sending emails to recipients. Additional work has been done to convert all emails to using our i18n implementation so we can later add controls for sending other kinds of emails in a users target language. ## Related Issue N/A ## Changes Made - Added `<Trans>` and `msg` macros to emails - Introduced a new `renderEmailWithI18N` utility in the lib package - Updated all emails to use the `<Tailwind>` component at the top level due to rendering constraints - Updated the `i18n.server.tsx` file to not use a top level await ## Testing Performed - Configured document language and verified emails were sent in the expected language - Created a document from a template and verified that the templates language was transferred to the document
96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import type { Metadata } from 'next';
|
|
|
|
import { Trans } from '@lingui/macro';
|
|
import { allBlogPosts } from 'contentlayer/generated';
|
|
|
|
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog',
|
|
};
|
|
|
|
export default async function BlogPage() {
|
|
const { i18n } = await setupI18nSSR();
|
|
|
|
const blogPosts = allBlogPosts.sort((a, b) => {
|
|
const dateA = new Date(a.date);
|
|
const dateB = new Date(b.date);
|
|
|
|
return dateB.getTime() - dateA.getTime();
|
|
});
|
|
|
|
return (
|
|
<div className="mt-6 sm:mt-12">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold lg:text-5xl">
|
|
<Trans>From the blog</Trans>
|
|
</h1>
|
|
|
|
<p className="text-muted-foreground mx-auto mt-4 max-w-xl text-center text-lg leading-normal">
|
|
<Trans>
|
|
Get the latest news from Documenso, including product updates, team announcements and
|
|
more!
|
|
</Trans>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="divide-muted-foreground/20 border-muted-foreground/20 mt-10 divide-y border-t">
|
|
{blogPosts.map((post, i) => (
|
|
<article
|
|
key={`blog-${i}`}
|
|
className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
|
|
>
|
|
<div className="flex items-center gap-x-4 text-xs">
|
|
<time dateTime={post.date} className="text-muted-foreground">
|
|
<Trans>{i18n.date(new Date(post.date), { dateStyle: 'short' })}</Trans>
|
|
</time>
|
|
|
|
{post.tags.length > 0 && (
|
|
<ul className="flex flex-row space-x-2">
|
|
{post.tags.map((tag, j) => (
|
|
<li
|
|
key={`blog-${i}-tag-${j}`}
|
|
className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
|
|
>
|
|
{tag}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<div className="group relative">
|
|
<h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
|
|
<a href={post.href}>
|
|
<span className="absolute inset-0" />
|
|
{post.title}
|
|
</a>
|
|
</h3>
|
|
<p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
|
|
{post.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative mt-4 flex items-center gap-x-4">
|
|
<div className="bg-foreground/5 h-10 w-10 rounded-full">
|
|
{post.authorImage && (
|
|
<img
|
|
src={post.authorImage}
|
|
alt={`Image of ${post.authorName}`}
|
|
className="bg-foreground/5 h-10 w-10 rounded-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-sm leading-6">
|
|
<p className="text-foreground font-semibold">{post.authorName}</p>
|
|
<p className="text-foreground/60">{post.authorRole}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|