feat: blog i18n schema remodel (#208)

deco-sites · Nov 8, 2023 · 1a09aed · 1a09aed
1 parent cf84840
commit 1a09aed
Show file tree

Hide file tree

Showing 12 changed files with 272 additions and 227 deletions.
diff --git a/components/blog/FeaturedPost.tsx b/components/blog/FeaturedPost.tsx
@@ -1,17 +1,20 @@
-import { Post } from "deco-sites/starting/components/utils/Blog.ts";
+import {
+  Post,
+  SupportedLocales,
+} from "deco-sites/starting/components/utils/Blog.ts";
 import Image from "deco-sites/std/components/Image.tsx";
 
 export default function FeaturedPost({
-  title,
-  descr,
   img,
   path,
+  body,
   date,
   readTime,
   author,
   authorRole,
   authorAvatar,
-}: Post) {
+  locale = "en",
+}: Post & { locale?: SupportedLocales }) {
   return (
     <div class="overflow-hidden py-12">
       <div class="mx-auto">
@@ -39,25 +42,24 @@ export default function FeaturedPost({
                   <p>{readTime} minute read</p>
                 </div>
                 <div class="flex flex-col space-y-4">
-                  <h2 class="font-medium text-3xl">{title}</h2>
-                  <p class="p text-xl">{descr}</p>
+                  <h2 class="font-medium text-3xl">{body[locale]?.title}</h2>
+                  <p class="p text-xl">{body[locale]?.descr}</p>
                   <div>
                     <div class="flex items-center space-x-3">
                       <div class="relative h-10 w-10 overflow-auto">
                         <span>
-                          {authorAvatar &&
-                            (
-                              <Image
-                                alt={`${author} avatar`}
-                                src={authorAvatar}
-                                decoding="async"
-                                loading="lazy"
-                                class="rounded-full"
-                                sizes="100vw"
-                                width={40}
-                                height={40}
-                              />
-                            )}
+                          {authorAvatar && (
+                            <Image
+                              alt={`${author} avatar`}
+                              src={authorAvatar}
+                              decoding="async"
+                              loading="lazy"
+                              class="rounded-full"
+                              sizes="100vw"
+                              width={40}
+                              height={40}
+                            />
+                          )}
                         </span>
                       </div>
                       <div class="flex flex-col">

diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
@@ -1,10 +1,16 @@
-import { Post } from "deco-sites/starting/components/utils/Blog.ts";
+import {
+  Post,
+  SupportedLocales,
+} from "deco-sites/starting/components/utils/Blog.ts";
 import { getAspectRatio } from "deco-sites/starting/sdk/utils.ts";
 import Image from "deco-sites/std/components/Image.tsx";
 
 const IMAGE_WIDTH = 360;
 
-export function BlogPostCard(props: Post) {
+export function BlogPostCard({
+  locale = "en",
+  ...props
+}: Post & { locale?: SupportedLocales }) {
   return (
     <a href={props.path} class="group duration-200">
       <div class="flex flex-col w-full text-deco-dark-green mb-10 sm:mb-20">
@@ -22,9 +28,11 @@ export function BlogPostCard(props: Post) {
           />
         </div>
         <div class="mt-6 flex flex-col gap-2">
-          <h1 class="text-xl font-medium leading-[1.18]">{props.title}</h1>
+          <h1 class="text-xl font-medium leading-[1.18]">
+            {props.body[locale]?.title}
+          </h1>
           <div class="text-base text-[#66736C] leading-[1.5]">
-            {props.descr}
+            {props.body[locale]?.descr}
           </div>
           <div class="text-sm font-light text-[#66736C]">
             <div class="flex gap-2">

diff --git a/components/seo/BlogPostSEO.tsx b/components/seo/BlogPostSEO.tsx
@@ -1,6 +1,9 @@
 import type { Image as LiveImage } from "deco-sites/std/components/types.ts";
 import Metatags from "./BlogMetatags.tsx";
-import { Post } from "deco-sites/starting/components/utils/Blog.ts";
+import {
+  Post,
+  SupportedLocales,
+} from "deco-sites/starting/components/utils/Blog.ts";
 
 export interface Props {
   /**
@@ -16,16 +19,19 @@ export interface Props {
   /** @description Recommended: 16 x 16 px */
   favicon?: LiveImage;
   post: Post;
+  locale?: SupportedLocales;
 }
 
-const BlogPostSEO = (props: Props) => {
+const BlogPostSEO = ({ locale = "en", ...props }: Props) => {
   const context = {
     ...props.post,
     seo: {
-      ...props?.post?.seo,
-      title: props.post?.seo?.title || props.post.title,
-      description: props.post?.seo?.description || props.post.descr,
-      image: props.post?.seo?.image || props.post?.img,
+      ...props?.post?.body[locale]?.seo,
+      title: props.post?.body[locale]?.seo?.title ||
+        props.post.body[locale]?.title,
+      description: props.post?.body[locale]?.seo?.description ||
+        props.post.body[locale]?.descr,
+      image: props.post?.body[locale]?.seo?.image || props.post?.img,
     },
   } as Post;
 

diff --git a/components/ui/Carousel.tsx b/components/ui/Carousel.tsx
@@ -6,17 +6,22 @@ import { getAspectRatio } from "deco-sites/starting/sdk/utils.ts";
 import {
   getBlogPath,
   Post,
+  SupportedLocales,
 } from "deco-sites/starting/components/utils/Blog.ts";
 
 const IMAGE_WIDTH = 360;
 
 export interface Props {
   bottomPadding?: string;
   cards: Post[];
-  locale?: string;
+  locale?: SupportedLocales;
 }
 
-export default function Carousel({ bottomPadding, cards, locale }: Props) {
+export default function Carousel({
+  bottomPadding,
+  cards,
+  locale = "en",
+}: Props) {
   const id = useId();
 
   return (
@@ -59,10 +64,10 @@ export default function Carousel({ bottomPadding, cards, locale }: Props) {
                         ))}
                       </div>
                       <h1 class="font-normal not-italic text-left text-[20px] text-black opacity-[80%]leading-[1.18]">
-                        {card.title}
+                        {card.body[locale]?.title}
                       </h1>
                       <div class="text-base text-[#66736C] leading-[1.5] line-clamp-2 overflow-ellipsis text-left">
-                        {card.descr}
+                        {card.body[locale]?.title}
                       </div>
                     </div>
                     <div class="flex flex-col gap-2">

diff --git a/components/utils/Blog.ts b/components/utils/Blog.ts
@@ -1,21 +1,30 @@
 import type { Image as LiveImage } from "deco-sites/std/components/types.ts";
 
+export type SupportedLocales = "en" | "pt";
+
 export interface PostBody {
   data: string;
 }
-/** @title {{{title}}} - {{{author}}} */
+
+/** @title {{{path}}} */
 export interface Post {
-  title: string;
   path: string;
   img: LiveImage;
-  tags?: string[];
-  descr: string;
   date: string;
+  tags?: string[];
   author: string;
   authorAvatar?: string;
   authorRole?: string;
   readTime?: string;
-  lang?: string;
+  body: {
+    pt?: PostData;
+    en?: PostData;
+  };
+}
+
+export interface PostData {
+  title: string;
+  descr: string;
   /**
    * @format textarea
    */

diff --git a/dev.ts b/dev.ts
@@ -9,4 +9,4 @@ await dev(import.meta.url, "./main.ts", config);
 
 if (Deno.args.includes("build")) {
   Deno.exit(0);
-}
+}
diff --git a/fresh.config.ts b/fresh.config.ts
@@ -10,4 +10,4 @@ export default defineConfig({
     }),
     partytownPlugin(),
   ],
-});
+});
diff --git a/loaders/blogPostMarkdownLoader.ts b/loaders/blogPostMarkdownLoader.ts
@@ -1,4 +1,4 @@
-import { RequestURLParam } from "deco-sites/std/functions/requestToParam.ts";
+import { RequestURLParam } from "apps/website/functions/requestToParam.ts";
 import {
   PostBody,
   PostList,
@@ -9,9 +9,15 @@ export type Props = {
   slug: RequestURLParam;
 };
 
-const blogPostMarkdownLoader = ({ list, slug }: Props): PostBody => {
+const blogPostMarkdownLoader = (
+  { list, slug }: Props,
+  req: Request,
+): PostBody => {
+  const url = new URL(req.url);
+  const locale = url.pathname.split("/")[1] as "pt" | "en";
+
   const post = list.posts.find((post) => post.path === slug);
-  return { data: post?.content || "" };
+  return { data: post?.body[locale]?.content || "" };
 };
 
 export default blogPostMarkdownLoader;
diff --git a/main.ts b/main.ts
@@ -7,4 +7,4 @@ import { start } from "$fresh/server.ts";
 import config from "./fresh.config.ts";
 import manifest from "./fresh.gen.ts";
 
-await start(manifest, config);
+await start(manifest, config);
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ await dev(import.meta.url, "./main.ts", config); @@
     if (Deno.args.includes("build")) {
       Deno.exit(0);
-    }
+    }