Initial commit

pages/posts/[filename].tsx

@@ -0,0 +1,60 @@
+import { Post } from "../../components/posts/post";
+import { client } from "../../tina/__generated__/client";
+import { useTina } from "tinacms/dist/react";
+import { Layout } from "../../components/layout";
+import { InferGetStaticPropsType } from "next";
+
+// Use the props returned by get static props
+export default function BlogPostPage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const { data } = useTina({
+    query: props.query,
+    variables: props.variables,
+    data: props.data,
+  });
+  if (data && data.post) {
+    return (
+      <Layout rawData={data} data={data.global}>
+        <Post {...data.post} />
+      </Layout>
+    );
+  }
+  return (
+    <Layout>
+      <div>No data</div>;
+    </Layout>
+  );
+}
+
+export const getStaticProps = async ({ params }) => {
+  const tinaProps = await client.queries.blogPostQuery({
+    relativePath: `${params.filename}.mdx`,
+  });
+  return {
+    props: {
+      ...tinaProps,
+    },
+  };
+};
+
+/**
+ * To build the blog post pages we just iterate through the list of
+ * posts and provide their "filename" as part of the URL path
+ *
+ * So a blog post at "content/posts/hello.md" would
+ * be viewable at http://localhost:3000/posts/hello
+ */
+export const getStaticPaths = async () => {
+  const postsListData = await client.queries.postConnection();
+  return {
+    paths: postsListData.data.postConnection.edges.map((post) => ({
+      params: { filename: post.node._sys.filename },
+    })),
+    fallback: "blocking",
+  };
+};
+
+export type PostType = InferGetStaticPropsType<
+  typeof getStaticProps
+>["data"]["post"];