structure

examples/docs/widget/PR/Router.jsx

@@ -0,0 +1,73 @@
+const { href } = VM.require("devs.near/widget/lib.url") || {
+  href: () => "/",
+};
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+function findDefaultRoute(routesObject) {
+  const routeKey =
+    routesObject &&
+    Object.keys(routesObject).find((key) => {
+      const route = routesObject[key];
+      return route.default === true;
+    });
+
+  if (routeKey) {
+    return routesObject[routeKey];
+  } else {
+    return null;
+  }
+}
+
+function Router({ config, ...passProps }) {
+  const { routes, PageNotFound, debug, param } = config;
+
+  if (!param) param = "page";
+
+  const defaultRoute =
+    findDefaultRoute(routes) ??
+    (routes && Object.keys(routes).length && routes[Object.keys(routes)[0]]);
+  const activeRoute =
+    (routes &&
+      routes.hasOwnProperty(passProps[param]) &&
+      routes[passProps[param]]) ||
+    defaultRoute;
+
+  if (!PageNotFound) PageNotFound = () => <p>404 Not Found</p>;
+
+  if (!activeRoute) {
+    // Handle 404 or default case for unknown routes
+    return <PageNotFound />;
+  }
+
+  // An improvement may be to "lazy load", e.g. load all widgets at once and only "display" the active one
+  // potentionally add a "lazy: true" prop to the route object
+
+  // for each route, if lazy, load the widget and store it in a map
+  // set display for the active route
+
+  // we may want to convert this to a widget for that purpose, to manage state?
+  if (debug) {
+    return (
+      <div key={JSON.stringify(activeRoute)}>
+        <pre>{JSON.stringify(activeRoute, null, 2)}</pre>
+        <pre>{JSON.stringify(props, null, 2)}</pre>
+      </div>
+    );
+  } else {
+    return (
+      <Content key={param + JSON.stringify(activeRoute)}>
+        <Widget
+          src={activeRoute.path}
+          props={activeRoute.init}
+          loading={<div style={{ height: "100%", width: "100%" }} />}
+        />
+      </Content>
+    );
+  }
+}
+
+return { Router };

examples/docs/widget/PR/view.jsx

@@ -1,4 +1,4 @@
-const { Router } = VM.require("devs.near/widget/Router") || {
+const { Router } = VM.require("${config_account}/widget/PR.Router") || {
   Router: () => <></>,
 };
 

examples/docs/widget/components/Header.jsx

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

examples/docs/widget/components/Sidebar.jsx

@@ -0,0 +1,20 @@
+const pages = {
+  home: {
+    path: "${config_account}/widget/home",
+    blockHeight: "final",
+    init: {
+      name: "Home",
+    },
+    default: true,
+  },
+};
+
+return (
+  <div className="sidebar">
+    {Object.keys(pages).map((pageKey) => (
+      <button className="button" key={pageKey}>
+        {pages[pageKey].init.name}
+      </button>
+    ))}
+  </div>
+);

examples/docs/widget/home.jsx

@@ -27,8 +27,41 @@ const Button = styled.button`
   }
 `;
 
+const BosWorkspaceInfo = styled.p`
+  text-align: center;
+  font-size: 1.1rem;
+  color: #444;
+  margin: 2rem;
+`;
+
+const CodeSnippet = styled.div`
+  background-color: #f5f5f5;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  font-size: 0.9rem;
+`;
+
 return (
   <LandingPageContainer>
     <Title>bos-workspace</Title>
+    <BosWorkspaceInfo>
+      bos-workspace is a comprehensive toolset designed to simplify the
+      development and deployment of NEAR components and applications. With
+      support for hot reload, TypeScript, and multiple app management, it caters
+      to developers looking for an efficient and scalable developer environment.
+    </BosWorkspaceInfo>
+    <Title>Quickstart</Title>
+    <BosWorkspaceInfo>
+      To begin, either use this template repository or install bos-workspace
+      within an existing project:
+    </BosWorkspaceInfo>
+    <CodeSnippet>yarn add -D bos-workspace</CodeSnippet>
+    <BosWorkspaceInfo>
+      Then, you can clone widgets from an existing account via:
+    </BosWorkspaceInfo>
+    <CodeSnippet>bos-workspace clone [accountId]</CodeSnippet>
+    <BosWorkspaceInfo>
+      Or ensure the proper workspace structure and usage.
+    </BosWorkspaceInfo>
   </LandingPageContainer>
 );

examples/docs/widget/index.jsx

@@ -9,7 +9,7 @@ const config = {
   layout: {
     src: "${config_account}/widget/layout",
     props: {
-      variant: "standard",
+      variant: "sidebar",
     },
   },
   blocks: {
@@ -22,6 +22,12 @@ const config = {
       />
     ),
     Footer: () => <></>, // customize your footer
+    Sidebar: () => (
+      <Widget
+        src="${config_account}/widget/components.Sidebar"
+        props={{ routes: config.router.routes, ...passProps }}
+      />
+    ),
   },
   router: {
     param: "page",
@@ -39,11 +45,30 @@ const config = {
 };
 
 const Root = styled.div`
+  .sidebar {
+    min-width: 250px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .button {
+    width: 100%;
+    padding: 10px;
+    border: "none";
+    background-color: "#007bff";
+    color: "#fff";
+    border-radius: "5px";
+    cursor: "pointer";
+  }
   // you can override classnames here
 `;
 
 return (
   <Root>
-    <Widget src="${config_account}/widget/PR.view" props={{ config, ...props }} />
+    <Widget
+      src="${config_account}/widget/PR.view"
+      props={{ config, ...props }}
+    />
   </Root>
 );