draft-dagger (#32)

Author: ndthanhdev

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

@@ -0,0 +1,22 @@
+---
+nanoId: qs05qpu3c0p78ww123zv1
+title: How I added dagger.io
+date: 2024-04-18
+wip: true
+---
+
+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
+
+My personal website is a static site generated using [Gatsby](https://www.gatsbyjs.com/). I have some scripts that I run locally to lint, build and publish the site, they are located in `scripts` directory.
+
+I'm hosting my website on [Github Pages](https://pages.github.com/), using 3 environments: `development`, `staging` and `production`. These environments are hosted on:
+
+- `Development`: [https://dev-n8v.github.io/](https://dev-n8v.github.io/)
+- `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`.
+
+{/* Add a pic */}

app/content/posts/personal-website/p1.mdx

@@ -2,6 +2,7 @@
 nanoId: ucxy00ef02qe3z4sn5vop
 title: (wip) How I built my personal website (Part 1)
 date: 2024-04-12
+wip: true
 ---
 
 In this series of posts, I'll take you through the process of how I built my own website, exploring the tools, technologies, and decisions I made along the way.

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

@@ -17,6 +17,6 @@ export const PostTemplate = ({
 	<>
 		<AppHeader {...appHeaderProps} />
 		<AppDrawer {...appDrawerProps} />
-		<Container maxWidth="lg">{children}</Container>
+		<Container maxWidth="md">{children}</Container>
 	</>
 );

app/src/gatsby-types.d.ts

@@ -1343,6 +1343,7 @@ type MdxFrontmatter = {
   readonly date: Maybe<Scalars['Date']>;
   readonly nanoId: Maybe<Scalars['String']>;
   readonly title: Maybe<Scalars['String']>;
+  readonly wip: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -1357,18 +1358,21 @@ type MdxFrontmatterFieldSelector = {
   readonly date: InputMaybe<FieldSelectorEnum>;
   readonly nanoId: InputMaybe<FieldSelectorEnum>;
   readonly title: InputMaybe<FieldSelectorEnum>;
+  readonly wip: InputMaybe<FieldSelectorEnum>;
 };
 
 type MdxFrontmatterFilterInput = {
   readonly date: InputMaybe<DateQueryOperatorInput>;
   readonly nanoId: InputMaybe<StringQueryOperatorInput>;
   readonly title: InputMaybe<StringQueryOperatorInput>;
+  readonly wip: InputMaybe<BooleanQueryOperatorInput>;
 };
 
 type MdxFrontmatterSortInput = {
   readonly date: InputMaybe<SortOrderEnum>;
   readonly nanoId: InputMaybe<SortOrderEnum>;
   readonly title: InputMaybe<SortOrderEnum>;
+  readonly wip: InputMaybe<SortOrderEnum>;
 };
 
 type MdxGroupConnection = {

app/src/providers/mdx-provider.tsx

@@ -1,4 +1,5 @@
 import { MDXProvider } from "@mdx-js/react";
+import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 
@@ -7,55 +8,65 @@ import { AppTheme } from "@/theme";
 export type AppMDXProviderProps = React.PropsWithChildren<object>;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const h1 = (props: any) => <Typography gutterBottom variant="h1" {...props} />,
-	h2 = (props: any) => <Typography gutterBottom variant="h2" {...props} />,
-	h3 = (props: any) => <Typography gutterBottom variant="h3" {...props} />,
-	h4 = (props: any) => <Typography gutterBottom variant="h4" {...props} />,
-	h5 = (props: any) => <Typography gutterBottom variant="h5" {...props} />,
-	h6 = (props: any) => <Typography gutterBottom variant="h6" {...props} />,
-	text = (props: any) => <Typography variant="body1" {...props} />,
-	strong = (props: any) => (
-		<Typography
-			variant="body1"
-			css={(theme: AppTheme) => ({
-				fontWeight: theme.typography.fontWeightBold,
-			})}
-			{...props}
-		/>
-	),
-	p = (props: any) => (
-		<Typography
-			{...props}
-			variant="body1"
-			paragraph
-			css={(theme: AppTheme) => ({
-				marginBlockEnd: theme.spacing(1),
-			})}
-		/>
-	),
-	ul = (props: any) => (
-		<ul
-			{...props}
-			css={(theme: AppTheme) => ({
-				marginBlockStart: theme.spacing(0),
-				marginBlockEnd: theme.spacing(2),
-			})}
-		/>
-	),
-	li = (props: any) => <li {...props} css={{}} />,
-	defaultComponents = {
-		text,
-		p,
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6,
-		strong,
-		ul,
-		li,
-	} satisfies React.ComponentProps<typeof MDXProvider>["components"];
+const h1 = (props: any) => <Typography gutterBottom variant="h3" {...props} />;
+const h2 = (props: any) => <Typography gutterBottom variant="h4" {...props} />;
+const h3 = (props: any) => <Typography gutterBottom variant="h5" {...props} />;
+const h4 = (props: any) => <Typography gutterBottom variant="h6" {...props} />;
+const h5 = (props: any) => <Typography gutterBottom variant="h7" {...props} />;
+const h6 = (props: any) => (
+	<Typography gutterBottom variant="subtitle1" {...props} />
+);
+const text = (props: any) => <Typography variant="body1" {...props} />;
+
+const strong = (props: any) => (
+	<Typography
+		variant="body1"
+		css={(theme: AppTheme) => ({
+			fontWeight: theme.typography.fontWeightBold,
+		})}
+		{...props}
+	/>
+);
+
+const p = (props: any) => (
+	<Typography
+		{...props}
+		variant="body1"
+		paragraph
+		css={(theme: AppTheme) => ({
+			marginBlockEnd: theme.spacing(1),
+		})}
+	/>
+);
+
+const ul = (props: any) => (
+	<ul
+		{...props}
+		css={(theme: AppTheme) => ({
+			marginBlockStart: theme.spacing(0),
+			marginBlockEnd: theme.spacing(2),
+		})}
+	/>
+);
+
+const li = (props: any) => <li {...props} css={{}} />;
+
+const a = (props: any) => <Link {...props} />;
+
+const defaultComponents = {
+	text,
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	strong,
+	ul,
+	li,
+	a,
+} satisfies React.ComponentProps<typeof MDXProvider>["components"];
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
 export const AppMDXProvider = ({ children }: AppMDXProviderProps) => (