initial flow created

package.json

@@ -20,5 +20,8 @@
     "react-dom": "18.2.0",
     "styled-components": "5.3.6",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

src/components/AddGithubRepo.tsx

@@ -0,0 +1,45 @@
+import { Block, Button, Flex, TextInput } from "@cube-dev/ui-kit";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+function AddGithubRepo() {
+  const [value, setValue] = useState("");
+  const [valid, setValid] = useState(true);
+
+  const router = useRouter();
+  function handleSubmit(value: string) {
+    const githubRegex = "^https:\\/\\/[^\\/:]+[\\/:]([^\\/:]+)\\/(.+)";
+    const chunks = value.match(githubRegex);
+
+    if (!value) {
+      return setValid(false);
+    }
+
+    if (value.startsWith("https://github.com")) {
+      const chunks = value.match(githubRegex);
+      if (chunks && chunks.length === 3) {
+        router.push(`${chunks[1]}/${chunks[2]}`);
+        return setValid(true);
+      }
+    }
+
+    setValue("");
+  }
+
+  return (
+    <Flex gap="1rem" flow="column">
+      <TextInput
+        value={value}
+        onChange={setValue}
+        label="Add github repo"
+        placeholder="http://github.com/staranbeer/blog"
+      />
+      <Button onPress={() => handleSubmit(value)} type="primary">
+        Submit
+      </Button>
+      {!valid && <Block color="#ff0000">please enter a valid repo</Block>}
+    </Flex>
+  );
+}
+
+export default AddGithubRepo;

src/pages/[...docs].tsx

@@ -0,0 +1,29 @@
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export async function getServerSideProps() {
+  return { props: { name: "taran" } };
+}
+
+function Docs({ name }: InferGetServerSidePropsType<GetServerSideProps>) {
+
+  const router = useRouter();
+
+  const [owner, setOwner] = useState<string>("");
+  const [repo, setRepo] = useState<string>("");
+
+  useEffect(() => {
+    if (router.query.docs) {
+      setOwner(router.query.docs[0]);
+      setRepo(router.query.docs[1]);
+    }
+    console.log(owner, repo);
+  }, []);
+
+  return <div>{name}</div>;
+}
+
+export default Docs;
+
+// https://github.com/staranbeer/blog

src/pages/_app.tsx

@@ -0,0 +1,13 @@
+import "../../styles/globals.css";
+import type { AppProps } from "next/app";
+import { Root, SSRProvider } from "@cube-dev/ui-kit";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <Root>
+      <SSRProvider>
+        <Component {...pageProps} />
+      </SSRProvider>
+    </Root>
+  );
+}

src/pages/_document.tsx

@@ -0,0 +1,25 @@
+import Document, { DocumentContext } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

src/pages/index.tsx

@@ -0,0 +1,17 @@
+import { Button, Flex, TextInput } from "@cube-dev/ui-kit";
+import AddGithubRepo from "../components/AddGithubRepo";
+
+function Home() {
+  return (
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      styles={{ minHeight: "100vh" }}
+      overflow="hidden"
+    >
+      <AddGithubRepo />
+    </Flex>
+  );
+}
+
+export default Home;