first commit

examples/with-edgedb/components/Header.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Link from "next/link";
+
+const Header: React.FC = () => {
+  return (
+    <nav>
+      <div className="left">
+        <Link href="/">Blog</Link>
+        <Link href="/drafts">Drafts</Link>
+      </div>
+      <div className="right">
+        <Link href="/create">+ New draft</Link>
+      </div>
+      <style jsx>{`
+        nav {
+          display: flex;
+          padding: 2rem;
+          align-items: center;
+        }
+
+        .bold {
+          font-weight: bold;
+        }
+
+        a {
+          text-decoration: none;
+          color: #000;
+          display: inline-block;
+        }
+
+        a + a {
+          margin-left: 1rem;
+        }
+
+        .right {
+          margin-left: auto;
+        }
+
+        .right a {
+          border: 2px solid black;
+          padding: 0.5rem 1rem;
+          border-radius: 3px;
+        }
+      `}</style>
+    </nav>
+  );
+};
+
+export default Header;

examples/with-edgedb/components/Layout.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from "react";
+import Header from "./Header";
+
+type Props = {
+  children: ReactNode;
+};
+
+const Layout: React.FC<Props> = (props) => (
+  <div style={{ paddingBottom: "30px" }}>
+    <Header />
+    <div className="layout">{props.children}</div>
+    <style jsx global>{`
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        font-size: 16px;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+          Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
+        background: rgba(0, 0, 0, 0);
+      }
+
+      input,
+      textarea,
+      button {
+        font-size: 16px;
+      }
+
+      button {
+        cursor: pointer;
+      }
+    `}</style>
+    <style jsx>{`
+      .layout {
+        padding: 0 2rem;
+      }
+    `}</style>
+  </div>
+);
+
+export default Layout;

examples/with-edgedb/components/Post.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Streamdown } from "streamdown";
+import Link from "next/link";
+import { PostProps } from "../pages/blog/[id]";
+
+const Post: React.FC<{ post: PostProps }> = ({ post }) => {
+  return (
+    <Link href={`/blog/${post.id}`}>
+      <div>
+        <h2>{post.title}</h2>
+        <small>By {post.authorName}</small>
+        <br />
+        <br />
+        <Streamdown mode="static" className="streamdown">
+          {post.content || ""}
+        </Streamdown>
+        <style jsx>{`
+          div {
+            color: inherit;
+            padding: 2rem;
+            cursor: pointer;
+          }
+          h2 {
+            margin: 0px;
+            padding-bottom: 4px;
+          }
+          small {
+            color: #888;
+          }
+          .streamdown,
+          .streamdown > p {
+            margin: 0px;
+          }
+        `}</style>
+      </div>
+    </Link>
+  );
+};
+
+export default Post;