update post template (#48)

Author: ndthanhdev

app/content/posts/personal-website/dagger-io.mdx

@@ -1,6 +1,6 @@
 ---
 nanoId: qs05qpu3c0p78ww123zv1
-title: How I added dagger.io
+title: How I added dagger.io to my personal website
 date: 2024-04-18
 wip: true
 ---
@@ -17,6 +17,6 @@ I'm hosting my website on [Github Pages](https://pages.github.com/), using 3 env
 - `Staging`: [https://stg-n8v.github.io/](https://stg-n8v.github.io/)
 - `Production`: [https://ndthanhdev.github.io/](https://ndthanhdev.github.io/)
 
-I want to apply "Trunk Based Development", so whenever I push a commit to `main` branch, the site should be published to `development`. Whenever a merge request is merged to `release-<version>` branch, the site should be published to `staging`. And when I create a release(a tag), the site should be published to `production`.
+I want to apply "Trunk Based Development", so whenever I push a commit to `main` branch, the site should be published to `development`. Whenever a merge request is merged to `release-<version>` branch, the site should be published to `staging`. And when I create a release (a tag), the site should be published to `production`.
 
 {/* Add a pic */}

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

@@ -0,0 +1,28 @@
+import Stack, { StackProps } from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { DateTime } from "luxon";
+import * as React from "react";
+
+export type PostHeaderProps = Omit<
+	StackProps<
+		"div",
+		{
+			title?: string | null;
+			date?: string | null;
+		}
+	>,
+	"sx"
+>;
+
+export const PostHeader = ({ title, date, ...stackProps }: PostHeaderProps) => {
+	const formatterDate = date
+		? DateTime.fromISO(date).toLocaleString(DateTime.DATE_FULL)
+		: "";
+
+	return (
+		<Stack {...stackProps}>
+			<Typography variant="h2">{title}</Typography>
+			<Typography variant="subtitle1">{formatterDate}</Typography>
+		</Stack>
+	);
+};

app/src/components/templates/post/index.tsx

@@ -2,21 +2,36 @@ import { Container } from "@mui/material";
 import React from "react";
 
 import { AppDrawer, AppDrawerProps } from "@/components/organisms/app-drawer";
+import { AppFooter, AppFooterProps } from "@/components/organisms/app-footer";
 import { AppHeader, AppHeaderProps } from "@/components/organisms/app-header";
+import {
+	PostHeader,
+	PostHeaderProps,
+} from "@/components/organisms/post-header";
+
+import { styles } from "./styles";
 
 export type PostTemplateProps = React.PropsWithChildren<{
 	appDrawerProps: AppDrawerProps;
 	appHeaderProps: AppHeaderProps;
+	appFooterProps: AppFooterProps;
+	postHeaderProps: PostHeaderProps;
 }>;
 
 export const PostTemplate = ({
 	appDrawerProps,
 	appHeaderProps,
+	appFooterProps,
+	postHeaderProps,
 	children,
 }: PostTemplateProps) => (
 	<>
 		<AppHeader {...appHeaderProps} />
 		<AppDrawer {...appDrawerProps} />
-		<Container maxWidth="md">{children}</Container>
+		<Container maxWidth="md" css={styles.main}>
+			<PostHeader {...postHeaderProps} css={styles.header} />
+			{children}
+		</Container>
+		<AppFooter {...appFooterProps} />
 	</>
 );

app/src/components/templates/post/styles.tsx

@@ -0,0 +1,17 @@
+import { css } from "@emotion/react";
+
+import { AppTheme } from "@/theme";
+
+export const styles = {
+	main: (theme: AppTheme) =>
+		css({
+			minHeight: "95vh",
+			marginBlockStart: theme.spacing(6),
+			marginBlockEnd: theme.spacing(4),
+		}),
+
+	header: (theme: AppTheme) =>
+		css({
+			marginBlockEnd: theme.spacing(4),
+		}),
+};

app/src/gatsby-types.d.ts

@@ -2601,7 +2601,7 @@ type PostTemplateQueryVariables = Exact<{
 }>;
 
 
-type PostTemplateQuery = { readonly mdx: { readonly frontmatter: { readonly title: string | null } | null } | null };
+type PostTemplateQuery = { readonly mdx: { readonly frontmatter: { readonly title: string | null, readonly date: string | null } | null } | null };
 
 type SiteMetadataQueryVariables = Exact<{ [key: string]: never; }>;
 

app/src/layouts/post/index.tsx

@@ -3,17 +3,16 @@ import * as React from "react";
 
 import { MyHelmet } from "@/components/atoms/my-helmet";
 import { PostTemplate } from "@/components/templates/post";
+import { useMainTemplateProps } from "@/hooks/use-main-template-props";
 import { AppMDXProvider } from "@/providers/mdx-provider";
 import { useSiteMetadata } from "@/shell/default-headers";
-import { useAppDrawerStore } from "@/stores/use-app-drawer-store";
-import { useThemeModeStore } from "@/stores/use-theme-mode-store";
 
 export type PostLayoutProps = PageProps<Queries.PostTemplateQuery>;
 
 const PostLayout = ({ children, data }: PostLayoutProps) => {
-	const siteMetadata = useSiteMetadata(),
-		drawer = useAppDrawerStore(),
-		theme = useThemeModeStore();
+	const siteMetadata = useSiteMetadata();
+
+	const mainTemplateProps = useMainTemplateProps();
 
 	return (
 		<AppMDXProvider>
@@ -23,18 +22,10 @@ const PostLayout = ({ children, data }: PostLayoutProps) => {
 				</title>
 			</MyHelmet>
 			<PostTemplate
-				appDrawerProps={{
-					onClose: drawer.closeDrawer,
-					open: drawer.open,
-					themeMode: theme.themeMode,
-					onThemeModeChange: (_, mode) => {
-						theme.setThemeMode(mode);
-					},
-				}}
-				appHeaderProps={{
-					onOpenSettings: drawer.openDrawer,
-					themeMode: theme.themeMode,
-					onToggleThemeMode: theme.toggleThemeMode,
+				{...mainTemplateProps}
+				postHeaderProps={{
+					title: data.mdx?.frontmatter?.title,
+					date: data.mdx?.frontmatter?.date,
 				}}
 			>
 				{children}
@@ -50,6 +41,7 @@ export const pageQuery = graphql`
 		mdx(id: { eq: $id }) {
 			frontmatter {
 				title
+				date
 			}
 		}
 	}

eslint.config.js

@@ -47,7 +47,8 @@ export default tseslint.config(
 			"@typescript-eslint/no-unused-vars": [
 				"error",
 				{
-					varsIgnorePattern: "(^_|^React$)",
+					argsIgnorePattern: "^_",
+					varsIgnorePattern: "^React$",
 				},
 			],
 			"react/no-unknown-property": ["error", { ignore: ["css"] }],