Initial commit

pages/404.js

@@ -0,0 +1,24 @@
+import { Hero } from "../components/blocks/hero";
+import { Layout } from "../components/layout";
+
+export default function FourOhFour() {
+  return (
+    <Layout>
+      <Hero
+        data={{
+          color: "default",
+          headline: "404 – Page Not Found",
+          text: "Oops! It seems there's nothing here, how embarrassing.",
+          actions: [
+            {
+              label: "Return Home",
+              type: "button",
+              icon: true,
+              link: "/",
+            },
+          ],
+        }}
+      />
+    </Layout>
+  );
+}

pages/[filename].tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { InferGetStaticPropsType } from "next";
+import { Blocks } from "../components/blocks-renderer";
+import { useTina } from "tinacms/dist/react";
+import { Layout } from "../components/layout";
+import { client } from "../tina/__generated__/client";
+
+export default function HomePage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const { data } = useTina(props);
+
+  return (
+    <Layout rawData={data} data={data.global as any}>
+      <Blocks {...data.page} />
+    </Layout>
+  );
+}
+
+export const getStaticProps = async ({ params }) => {
+  const tinaProps = await client.queries.contentQuery({
+    relativePath: `${params.filename}.md`,
+  });
+  const props = {
+    ...tinaProps,
+    enableVisualEditing: process.env.VERCEL_ENV === "preview",
+  };
+  return {
+    props: JSON.parse(JSON.stringify(props)) as typeof props,
+  };
+};
+
+export const getStaticPaths = async () => {
+  const pagesListData = await client.queries.pageConnection();
+  return {
+    paths: pagesListData.data.pageConnection?.edges?.map((page) => ({
+      params: { filename: page?.node?._sys.filename },
+    })),
+    fallback: false,
+  };
+};

pages/_app.tsx

@@ -0,0 +1,7 @@
+import "../styles.css";
+
+const App = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />;
+};
+
+export default App;

pages/posts.tsx

@@ -0,0 +1,35 @@
+import { Container } from "../components/util/container";
+import { Section } from "../components/util/section";
+import { Posts } from "../components/posts";
+import { client } from "../tina/__generated__/client";
+import { Layout } from "../components/layout";
+import { InferGetStaticPropsType } from "next";
+
+export default function HomePage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const posts = props.data.postConnection.edges;
+
+  return (
+    <Layout>
+      <Section className="flex-1">
+        <Container size="large" width="small">
+          <Posts data={posts} />
+        </Container>
+      </Section>
+    </Layout>
+  );
+}
+
+export const getStaticProps = async () => {
+  const tinaProps = await client.queries.pageQuery();
+  return {
+    props: {
+      ...tinaProps,
+    },
+  };
+};
+
+export type PostsType = InferGetStaticPropsType<
+  typeof getStaticProps
+>["data"]["postConnection"]["edges"][number];

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"];