app use Template

widget/PR/App.jsx

@@ -32,61 +32,25 @@ if (!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 ?? "${alias_devs}/widget/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}</>);
+const Template = VM.require("${config_account}/widget/PR.Template");
 
 return (
-  <CSS style={config.theme}>
-    <Container className="window">
-      <Layout {...(config.layout?.props ?? { variant: "standard" })} blocks={config.blocks}>
-        <Content>
-          <Router config={config.router} {...passProps} />
-        </Content>
-      </Layout>
-    </Container>
-  </CSS>
+  <Template
+    theme={{}}
+    layout={{
+      ...(config.layout ?? {
+        src: "${alias_devs}/widget/Layout",
+        props: {
+          variant: "sidebar",
+        },
+      }),
+    }}
+    blocks={config.blocks}
+  >
+    <Router config={config.router} {...passProps} />
+  </Template>
 );

widget/PR/Template.jsx

@@ -0,0 +1,27 @@
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+return ({ layout, theme, blocks, children }) => {
+
+  const Layout = VM.require(layout?.src ?? "${alias_devs}/widget/Layout") || {
+    Layout: () => <></>,
+  };
+
+  return (
+    <Container style={theme} id="template-container">
+      <Layout
+        {...(layout?.initialProps ?? { variant: "standard" })}
+        blocks={blocks}
+      >
+        {children}
+      </Layout>
+    </Container>
+  );
+};

widget/document.jsx

@@ -2,20 +2,22 @@ const { basePath, param, _params } = props;
 
 let adapter = "${config_account}/widget/utils.adapter"; // this could come from props
 
-const { MarkdownViewer } = VM.require("${alias_devs}/widget/markdown.view") || {
-  MarkdownViewer: () => null,
-};
+const { MarkdownViewer } = VM.require("${alias_devs}/widget/markdown.view");
+
+const Template = VM.require("${config_account}/widget/PR.Template");
 
 const { get } = VM.require(adapter);
 
 const data = get(_params);
 
-if (!data) {
+if (!data) { // this could be a part of the template
   return <p>Page not found</p>;
 }
 
 return (
-  <div className="content">
-    <MarkdownViewer value={data} />
-  </div>
+  <Template theme={{ "--main-bg-color": "green" }}>
+    <div style={{ backgroundColor: "var(--main-bg-color)" }}>
+      <MarkdownViewer value={data} />
+    </div>
+  </Template>
 );

widget/index.jsx

@@ -21,7 +21,7 @@ const config = {
   },
   layout: {
     src: "${alias_devs}/widget/Layout",
-    props: {
+    initialProps: {
       variant: "sidebar",
     },
   },
@@ -79,7 +79,7 @@ const config = {
   },
 };
 
-const Root = styled.div`
+const CSS = styled.div`
   * {
     box-sizing: border-box;
     font-weight: 400;
@@ -221,10 +221,10 @@ const Root = styled.div`
 `;
 
 return (
-  <Root>
+  <CSS>
     <Widget
       src="${config_account}/widget/PR.App"
       props={{ config, ...props }}
     />
-  </Root>
+  </CSS>
 );