feat: various improvements

- add Terms of Service
- add dark mode
- use cards for blog with excerpt

src/pages/blog/{mdx.slug}.tsx

@@ -1,14 +1,43 @@
-import * as React from "react"
-import { graphql, PageProps } from "gatsby"
+import React from "react"
+import { graphql, Link as GatsbyLink, PageProps } from "gatsby"
 import { MDXRenderer } from "gatsby-plugin-mdx"
+import NavigateNextIcon from "@mui/icons-material/NavigateNext"
 import Layout from "../../components/organisms/Layout"
 
 import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
+import { Breadcrumbs, Link } from "@mui/material";
 deckDeckGoHighlightElement();
 
-const BlogPost = ({ data: { mdx } }: PageProps<Queries.BlogPostQuery>) => {
+const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) => {
   return (
-    <Layout pageTitle={mdx?.frontmatter?.title ?? ""}>
+    <Layout
+      pageTitle={
+        <>
+          <Breadcrumbs
+            separator={<NavigateNextIcon fontSize="small" />}
+            aria-label="breadcrumb"
+          >
+            <Link
+              underline="hover"
+              color="inherit"
+              to="/blog"
+              component={GatsbyLink}
+            >
+              Blog
+            </Link>
+            <Link
+              underline="hover"
+              color="inherit"
+              to={path}
+              component={GatsbyLink}
+            >
+              {mdx?.frontmatter?.title}
+            </Link>
+          </Breadcrumbs>
+          {mdx?.frontmatter?.title ?? ""}
+        </>
+      }
+    >
       <MDXRenderer>
         {mdx?.body ?? ""}
       </MDXRenderer>
@@ -18,7 +47,7 @@ const BlogPost = ({ data: { mdx } }: PageProps<Queries.BlogPostQuery>) => {
 
 export const query = graphql`
   query BlogPost($id: String) {
-    mdx(id: {eq: $id}) {
+    mdx(fields: { source: { eq: "posts" } }, id: { eq: $id }) {
       id
       body
       frontmatter {