init

examples/docs/README.md

@@ -0,0 +1,6 @@
+# Documentation
+
+This example app holds the documentation for bos-workspace. Feel free to clone [this template]() to use it in your own project.
+
+TODO:
+- [] this could be a git submodule, to a template docs repository

examples/docs/bos.config.json

@@ -0,0 +1,8 @@
+{
+  "account": "docs.bos-workspace.near",
+  "overrides": {
+    "testnet": {
+      "account": "docs.bos-workspace.testnet"
+    }
+  }
+}

examples/docs/data.json

@@ -0,0 +1,3 @@
+{
+  "docs.bos-workspace.near": {}
+}

examples/docs/widget/PR/view.jsx

@@ -0,0 +1,104 @@
+const { Router } = VM.require("devs.near/widget/Router") || {
+  Router: () => <></>,
+};
+
+const { config, ...passProps } = props;
+
+if (!config) {
+  // TODO: get from settings (or default)
+  config = {
+    router: {
+      param: "page",
+      routes: {
+        home: {
+          default: true,
+          path: "efiz.near/widget/Tree",
+          blockHeight: "final",
+          init: {
+            name: "Home",
+          },
+        },
+      },
+    },
+    blocks: {
+      Header: () => <></>, // customize your header
+      Footer: () => <></>, // customize your footer
+    },
+  };
+} else {
+  // config may be a VM require string
+  if (typeof config !== "object") {
+    config = VM.require(config) || {};
+  }
+}
+
+console.log("config", config);
+
+if (!config) {
+  return (
+    <p>
+      unable to load config:{" "}
+      {typeof config === object ? JSON.stringify(config) : config}
+    </p>
+  );
+}
+
+const { Layout } = VM.require(
+  config.layout?.src ?? "devs.near/widget/Layout"
+) || {
+  Layout: () => <></>,
+};
+
+// While something like Theme should be in the parent...
+const CSS = styled.div`
+  .container {
+    /* border: 1px solid red; */
+  }
+
+  .button {
+  }
+
+  .input {
+  }
+
+  .layout {
+    /* border: 4px solid var(--main-color); */
+  }
+
+  .header {
+    /* border: 1px solid blue; */
+  }
+
+  .content {
+  }
+
+  .footer {
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+// const Template = config.Template ?? (({children}) => <>{children}</>);
+
+return (
+  <CSS style={config.theme}>
+    <Container>
+      <Layout
+        {...(config.layout?.props ?? { variant: "standard" })}
+        blocks={config.blocks}
+      >
+        <Content>
+          <Router config={config.router} {...passProps} />
+        </Content>
+      </Layout>
+    </Container>
+  </CSS>
+);

examples/docs/widget/components/Header.jsx

@@ -0,0 +1,5 @@
+return (
+  <div className="header">
+    <h1>everything</h1>
+  </div>
+);

examples/docs/widget/home.jsx

@@ -0,0 +1,34 @@
+const LandingPageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+`;
+
+const Title = styled.h1`
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 2rem;
+`;
+
+const Button = styled.button`
+  padding: 1rem 2rem;
+  font-size: 1.2rem;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+return (
+  <LandingPageContainer>
+    <Title>bos-workspace</Title>
+  </LandingPageContainer>
+);

examples/docs/widget/index.jsx

@@ -0,0 +1,49 @@
+const config = {
+  theme: {
+    // add key values to define colors
+    // "--main-color": "blue",
+    // "--secondary-color": "red",
+    // background: "var(--main-color)",
+    // color: "var(--secondary-color)",
+  },
+  layout: {
+    src: "${config_account}/widget/layout",
+    props: {
+      variant: "standard",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => (
+      // customize your header
+      <Widget
+        src="${config_account}/widget/components.Header"
+        props={{ routes: config.router.routes, ...passProps }}
+      />
+    ),
+    Footer: () => <></>, // customize your footer
+  },
+  router: {
+    param: "page",
+    routes: {
+      home: {
+        path: "${config_account}/widget/home",
+        blockHeight: "final",
+        init: {
+          name: "Home",
+        },
+        default: true,
+      },
+    },
+  },
+};
+
+const Root = styled.div`
+  // you can override classnames here
+`;
+
+return (
+  <Root>
+    <Widget src="${config_account}/widget/PR.view" props={{ config, ...props }} />
+  </Root>
+);

examples/docs/widget/layout.jsx

@@ -0,0 +1,83 @@
+const StandardLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+const SidebarLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  .main {
+    flex-grow: 1;
+  }
+`;
+
+const SplitLayout = styled.div`
+  display: flex;
+  width: 100%;
+
+  .children {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+`;
+
+const Layout = ({ variant, blocks, children }) => {
+  const { Header, Footer, Sidebar } = blocks;
+
+  Header = Header ? Header : () => <></>;
+  Footer = Footer ? Footer : () => <></>;
+  Sidebar = Sidebar ? Sidebar : () => <></>;
+
+  if (!variant) {
+    variant = "standard";
+  }
+
+  const availableVariants = ["standard", "sidebar", "split"];
+
+  if (!availableVariants.includes(variant)) {
+    return 'Invalid Variant: "' + variant + '"';
+  }
+
+  switch (variant) {
+    case "standard":
+      return (
+        <StandardLayout>
+          <Header />
+          {children}
+          <Footer />
+        </StandardLayout>
+      );
+    case "sidebar":
+      return (
+        <StandardLayout>
+          <Header />
+          <SidebarLayout>
+            <div className="aside">
+              <Sidebar />
+            </div>
+            <div className="main">{children}</div>
+          </SidebarLayout>
+          <Footer />
+        </StandardLayout>
+      );
+    case "split":
+      return (
+        <StandardLayout>
+          <Header />
+          <SplitLayout>
+            <div className="children">
+              <Sidebar />
+            </div>
+            <div className="children">{children}</div>
+          </SplitLayout>
+          <Footer />
+        </StandardLayout>
+      );
+  }
+};
+
+return { Layout };