add post-image (#49)

Author: ndthanhdev

app/content/posts/personal-website/dagger-io/assets/dagger-landscape.svg

@@ -5,6 +5,11 @@ date: 2024-04-18
 wip: true
 ---
 
+import { PostImage } from "@/components/molecues/post-image";
+import Landscape from "./assets/dagger-landscape.svg";
+
+<PostImage src={Landscape} />
+
 I wanted to have the ability to run CI/CD pipelines on my local, and I decided to go with [Dagger.io](https://dagger.io/). It not only fed my need and also added a lot of instresting features. In this post I'll share how I added dagger.io to my personal website.
 
 ## Requirements

…ent/posts/personal-website/dagger-io.mdx …personal-website/dagger-io/dagger-io.mdxapp/content/posts/personal-website/dagger-io.mdx renamed to app/content/posts/personal-website/dagger-io/dagger-io.mdx app/content/posts/personal-website/dagger-io.mdx renamed to app/content/posts/personal-website/dagger-io/dagger-io.mdx

@@ -0,0 +1,39 @@
+import Stack, { StackProps } from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+
+import { styles } from "./styles";
+
+export type PostImageProps = Omit<
+	StackProps<
+		"div",
+		{
+			src: string;
+			caption?: string | React.ReactNode;
+		}
+	>,
+	"sx"
+>;
+
+export const PostImage = ({ src, caption, ...cardProps }: PostImageProps) => {
+	return (
+		<Stack
+			direction="column"
+			css={styles.root}
+			alignItems="center"
+			spacing={1}
+			{...cardProps}
+		>
+			<img
+				css={styles.image}
+				src={src}
+				alt={typeof caption === "string" ? caption : undefined}
+			/>
+			{typeof caption === "string" ? (
+				<Typography variant="caption">{caption}</Typography>
+			) : (
+				caption
+			)}
+		</Stack>
+	);
+};

app/src/components/molecues/post-image/index.tsx

@@ -0,0 +1,20 @@
+import { css } from "@emotion/react";
+
+import { AppTheme } from "@/theme";
+
+export const styles = {
+	root: (theme: AppTheme) =>
+		css({
+			marginBlockEnd: theme.spacing(4),
+			width: "100%",
+		}),
+
+	image: (theme: AppTheme) =>
+		css({
+			backgroundColor: theme.palette.augmentColor({
+				color: {
+					main: theme.palette.background.paper,
+				},
+			}).light,
+		}),
+};

app/src/components/molecues/post-image/styles.ts

@@ -20,9 +20,9 @@ export const PostHeader = ({ title, date, ...stackProps }: PostHeaderProps) => {
 		: "";
 
 	return (
-		<Stack {...stackProps}>
+		<Stack spacing={1} {...stackProps}>
+			<Typography variant="caption">{formatterDate}</Typography>
 			<Typography variant="h2">{title}</Typography>
-			<Typography variant="subtitle1">{formatterDate}</Typography>
 		</Stack>
 	);
 };

app/src/components/organisms/post-header/index.tsx

@@ -51,7 +51,7 @@ const ul = (props: any) => (
 
 const li = (props: any) => <li {...props} css={{}} />;
 
-const a = (props: any) => <Link {...props} />;
+const a = (props: any) => <Link component="a" target="_blank" {...props} />;
 
 const defaultComponents = {
 	text,