Rendering items in root on /

Shinyaigeek · Jun 1, 2024 · fff77c2 · fff77c2
1 parent a896efb
commit fff77c2
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 54 deletions.
diff --git a/packages/applications/turbo-blog/package.json b/packages/applications/turbo-blog/package.json
@@ -27,7 +27,9 @@
 		"option-t": "^39.0.3",
 		"react": "19.0.0-beta-94eed63c49-20240425",
 		"react-dom": "19.0.0-beta-94eed63c49-20240425",
-		"ssg-router": "workspace:*"
+		"remark-parse": "^11.0.0",
+		"ssg-router": "workspace:*",
+		"unified": "^11.0.4"
 	},
 	"devDependencies": {
 		"@rspack/cli": "0.5.6",

diff --git a/packages/applications/turbo-blog/src/build/application/getBlogPosts/getBlogposts.usecase.ts b/packages/applications/turbo-blog/src/build/application/getBlogPosts/getBlogposts.usecase.ts
@@ -1,42 +1,16 @@
+import type { Result } from "option-t/esm/PlainResult";
 import type { BlogContent } from "../../model/blog/blog.entity";
 import type { BlogRepository } from "../../model/blog/blog.repository";
-import { Language } from "../../model/language/language.entity";
-import { M17NContents } from "../../model/m17n/m17n.entity";
+import type { Language } from "../../model/language/language.entity";
 
 export class GetBlogPostsUsecase {
 	constructor(private blogPostRepository: BlogRepository) {}
 
-	async getBlogPosts(): Promise<M17NContents<BlogContent>[]> {
-		const blogPosts = await this.blogPostRepository.getBlogs();
-		const ja = blogPosts.filter(
-			(blogPost) => blogPost.language === Language.ja,
-		);
-		const en = blogPosts.filter(
-			(blogPost) => blogPost.language === Language.en,
-		);
+	async getBlogPosts(
+		language: Language,
+	): Promise<Result<BlogContent[], Error>> {
+		const blogPosts = await this.blogPostRepository.getBlogs(language);
 
-		const contents: M17NContents<BlogContent>[] = [];
-
-		for (const blogPost of ja) {
-			const existingContent = en.find(
-				(content) => content.metadata.title === blogPost.metadata.title,
-			);
-			if (existingContent) {
-				contents.push(new M17NContents(blogPost, existingContent));
-			} else {
-				contents.push(new M17NContents(blogPost, undefined));
-			}
-		}
-
-		for (const blogPost of en) {
-			const existingContent = ja.find(
-				(content) => content.metadata.title === blogPost.metadata.title,
-			);
-			if (!existingContent) {
-				contents.push(new M17NContents(undefined, blogPost));
-			}
-		}
-
-		return contents;
+		return blogPosts;
 	}
 }
diff --git a/packages/applications/turbo-blog/src/build/context/context.ts b/packages/applications/turbo-blog/src/build/context/context.ts
@@ -1,3 +1,5 @@
+import type { Language } from "../model/language/language.entity";
+
 export type Context = {
-	language: "ja" | "en";
+	language: Language;
 };
diff --git a/packages/applications/turbo-blog/src/build/handlers/index/generate.tsx b/packages/applications/turbo-blog/src/build/handlers/index/generate.tsx
@@ -1,26 +1,36 @@
 import fs from "node:fs/promises";
 import nodePath from "node:path";
+import { isErr, unwrapErr, unwrapOk } from "option-t/esm/PlainResult";
 import { renderToStaticMarkup } from "react-dom/server";
 import type { GenerateHandler } from "ssg-router";
 import { Layout } from "../../../ui/components/Layout/Layout";
 import { Home } from "../../../ui/pages/Home/Home";
 import { GetBlogPostsUsecase } from "../../application/getBlogPosts/getBlogposts.usecase";
 import type { Context } from "../../context/context";
 import { BlogRepository } from "../../model/blog/blog.repository";
+import { Language } from "../../model/language/language.entity";
 import { Shell } from "../../util/helmet";
 
 export const generateIndexPage: GenerateHandler<Context> = async ({
 	context,
 }) => {
 	const blogRepository = new BlogRepository(fs, nodePath);
 	const getblogPostsUsecase = new GetBlogPostsUsecase(blogRepository);
-	const blogPosts = await getblogPostsUsecase.getBlogPosts();
 	const language = context.language;
+	const blogPostResults = await getblogPostsUsecase.getBlogPosts(language);
+
+	if (isErr(blogPostResults)) {
+		throw unwrapErr(blogPostResults);
+	}
+
+	const blogPosts = unwrapOk(blogPostResults);
+
+	const rawLanguage = language === Language.ja ? "ja" : "en";
 
 	return renderToStaticMarkup(
-		<Shell language={language} which="TODO" title="shinyaigeek.dev" slug="/">
-			<Layout language={language} page="1" currentPath="/">
-				<Home />
+		<Shell language={rawLanguage} which="TODO" title="shinyaigeek.dev" slug="/">
+			<Layout language={rawLanguage} page="1" currentPath="/">
+				<Home items={blogPosts.map((blogPost) => blogPost.metadata)} />
 			</Layout>
 		</Shell>,
 	);

diff --git a/packages/applications/turbo-blog/src/build/model/blog/blog.entity.ts b/packages/applications/turbo-blog/src/build/model/blog/blog.entity.ts
@@ -4,7 +4,7 @@ import type { Language } from "../language/language.entity";
 export interface BlogMetadata {
 	title: string;
 	tags: string[];
-	description: string[];
+	description: string;
 	publishedAt: string;
 	updatedAt: string;
 	path: string;

diff --git a/packages/applications/turbo-blog/src/build/plugin/language.ts b/packages/applications/turbo-blog/src/build/plugin/language.ts
@@ -1,8 +1,9 @@
 import type { Plugin } from "ssg-router";
 import type { Context } from "../context/context";
+import { Language } from "../model/language/language.entity";
 
 export const registerLanguagePlugin: Plugin<Context> = {
 	async onRouted(_, context) {
-		context.language = "ja";
+		context.language = Language.ja;
 	},
 };
diff --git a/packages/applications/turbo-blog/src/ui/pages/Home/Home.tsx b/packages/applications/turbo-blog/src/ui/pages/Home/Home.tsx
@@ -1,8 +1,30 @@
 import type { FunctionComponent } from "react";
+import { Item } from "./components/Item/Item";
 import { WelcomePage } from "./components/WelcomePage/WelcomePage";
 
-export const Home: FunctionComponent = () => (
+interface Props {
+	items: {
+		title: string;
+		description: string;
+		publishedAt: string;
+		path: string;
+	}[];
+}
+
+export const Home: FunctionComponent<Props> = ({ items }) => (
 	<div>
 		<WelcomePage />
+		<div>
+			{items.map((item) => {
+				return (
+					<Item
+						title={item.title}
+						description={item.description}
+						publishedAt={item.publishedAt}
+						path={item.path}
+					/>
+				);
+			})}
+		</div>
 	</div>
 );
diff --git a/packages/applications/turbo-blog/src/ui/pages/Home/components/Item/Item.tsx b/packages/applications/turbo-blog/src/ui/pages/Home/components/Item/Item.tsx
@@ -1,16 +1,12 @@
-import { Button } from "../../../components/Button/Button";
-import { Divider } from "../../../components/Divider/Divider";
-
-import React from "react";
-import { getOmmit } from "../../../../build/util/getOmmit";
+import { Divider } from "../../../../components/Divider/Divider";
 import item from "./Item.module.css";
-export interface MetaData {
+
+interface MetaData {
 	title: string;
 	description?: string;
 	ogp?: string;
 	publishedAt: string;
-	// tags: string[];
-	slug: string;
+	path: string;
 	media?: string;
 }
 
@@ -19,17 +15,17 @@ export const Item = (props: MetaData) => {
 		<div className={item.home}>
 			<a
 				className={item.itemHomeAnchor}
-				href={!props.media ? `/post/${props.slug}` : props.slug}
+				href={!props.media ? `/post/${props.path}` : props.path}
 			>
 				<div className={item.title}>{props.title}</div>
 			</a>
 			<Divider />
 			<div className={item.date}>{props.publishedAt}</div>
 			<div className={item.tags} />
-			<div>{getOmmit(props.description ?? "")}</div>
+			<div>{props.description ?? ""}</div>
 			{props.ogp && (
 				<a
-					href={!props.media ? `/post/${props.slug}` : props.slug}
+					href={!props.media ? `/post/${props.path}` : props.path}
 					tabIndex={-1}
 				>
 					<img
@@ -45,7 +41,7 @@ export const Item = (props: MetaData) => {
 			<div className={item.readMore}>
 				<a
 					className={`item--home__anchor ${item.readMoreAnchor}`}
-					href={!props.media ? `/post/${props.slug}` : props.slug}
+					href={!props.media ? `/post/${props.path}` : props.path}
 					tabIndex={-1}
 				>
 					Read