diff --git a/apps/builddao/widget/Router.jsx b/apps/builddao/widget/Router.jsx
new file mode 100644
index 00000000..67311b49
--- /dev/null
+++ b/apps/builddao/widget/Router.jsx
@@ -0,0 +1,73 @@
+const { href } = VM.require("buildhub.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 = () =>
404 Not Found
;
+
+ if (!activeRoute) {
+ // Handle 404 or default case for unknown routes
+ return
;
+ }
+
+ // 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 (
+
+
{JSON.stringify(activeRoute, null, 2)}
+
{JSON.stringify(props, null, 2)}
+
+ );
+ } else {
+ return (
+
+ }
+ />
+
+ );
+ }
+}
+
+return { Router };
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
index a44f65e0..785dfc31 100644
--- a/apps/builddao/widget/app.jsx
+++ b/apps/builddao/widget/app.jsx
@@ -1,17 +1,103 @@
-const { page, tab, ...passProps } = props;
-
-const { routes } = VM.require("${config_account}/widget/config.app") ?? {
- routes: {},
-};
-
-const { AppLayout } = VM.require(
- "${config_account}/widget/template.AppLayout",
-) || {
- AppLayout: () => <>,
+const config = {
+ theme: {
+ // add key values to define colors
+ "--main-color": "black",
+ "--secondary-color": "white",
+ background: "var(--main-color)",
+ color: "var(--secondary-color)",
+ },
+ layout: {
+ src: "devs.near/widget/Layout",
+ props: {
+ variant: "standard",
+ },
+ },
+ blocks: {
+ // these get passed to the layout and children
+ Header: () => (
+ // customize your header
+
+ ),
+ Footer: () => <>, // customize your footer
+ },
+ router: {
+ param: "page",
+ routes: {
+ home: {
+ path: "${config_account}/widget/page.home",
+ blockHeight: "final",
+ init: {
+ name: "Home",
+ },
+ default: true,
+ },
+ feed: {
+ path: "${config_account}/widget/page.feed",
+ blockHeight: "final",
+ init: {
+ name: "Feed",
+ },
+ },
+ proposal: {
+ path: "${config_account}/widget/page.projects",
+ blockHeight: "final",
+ init: {
+ name: "Projects",
+ },
+ },
+ resources: {
+ path: "${config_account}/widget/page.resources",
+ blockHeight: "final",
+ init: {
+ name: "Resources",
+ },
+ },
+ library: {
+ path: "${config_account}/widget/page.library",
+ blockHeight: "final",
+ init: {
+ name: "Library",
+ },
+ },
+ profile: {
+ path: "${config_account}/widget/page.profile",
+ blockHeight: "final",
+ init: {
+ name: "Profile",
+ },
+ hide: true,
+ },
+ inspect: {
+ path: "${config_account}/widget/page.inspect",
+ blockHeight: "final",
+ init: {
+ name: "Inspect",
+ },
+ hide: true,
+ },
+ projects: {
+ path: "${config_account}/widget/page.project-feed",
+ blockHeight: "final",
+ init: {
+ name: "Project Feed",
+ },
+ hide: true,
+ },
+ project: {
+ path: "${config_account}/widget/page.project",
+ blockHeight: "final",
+ init: {
+ name: "Project Page",
+ },
+ hide: true,
+ },
+ },
+ },
};
-if (!page) page = Object.keys(routes)[0] || "home";
-
const Root = styled.div`
--stroke-color: rgba(255, 255, 255, 0.2);
--bg-1: #000;
@@ -214,62 +300,11 @@ const Root = styled.div`
}
`;
-function Router({ active, routes }) {
- // this may be converted to a module at devs.near/widget/Router
- const routeParts = active.split(".");
-
- let currentRoute = routes;
- let src = "";
- let defaultProps = {};
-
- for (let part of routeParts) {
- if (currentRoute[part]) {
- currentRoute = currentRoute[part];
- src = currentRoute.path;
-
- if (currentRoute.init) {
- defaultProps = { ...defaultProps, ...currentRoute.init };
- }
- } else {
- // Handle 404 or default case for unknown routes
- return
404 Not Found
;
- }
- }
-
- return (
-
-
-
- );
-}
-
-const Container = styled.div`
- display: flex;
- height: 100%;
- font-family: InterVariable, sans-serif;
-`;
-
-const Content = styled.div`
- width: 100%;
- height: 100%;
-`;
-
return (
-
-
-
-
-
-
-
+
);
diff --git a/apps/builddao/widget/app.old.jsx b/apps/builddao/widget/app.old.jsx
new file mode 100644
index 00000000..a44f65e0
--- /dev/null
+++ b/apps/builddao/widget/app.old.jsx
@@ -0,0 +1,275 @@
+const { page, tab, ...passProps } = props;
+
+const { routes } = VM.require("${config_account}/widget/config.app") ?? {
+ routes: {},
+};
+
+const { AppLayout } = VM.require(
+ "${config_account}/widget/template.AppLayout",
+) || {
+ AppLayout: () => <>,
+};
+
+if (!page) page = Object.keys(routes)[0] || "home";
+
+const Root = styled.div`
+ --stroke-color: rgba(255, 255, 255, 0.2);
+ --bg-1: #000;
+ --bg-1-hover: #010002;
+ --bg-1-hover-transparent: rgba(13, 2, 15, 0);
+ --bg-2: #23242b;
+ --label-color: #fff;
+ --font-color: #fff;
+ --font-muted-color: #cdd0d5;
+ --black: #000;
+ --system-red: #fd2a5c;
+ --yellow: #eca227;
+
+ --compose-bg: #23242b;
+
+ --post-bg: #23242b;
+ --post-bg-hover: #1d1f25;
+ --post-bg-transparent: rgba(23, 24, 28, 0);
+
+ --button-primary-bg: #eca227;
+ --button-outline-bg: transparent;
+ --button-default-bg: #23242b;
+
+ --button-primary-color: #000;
+ --button-outline-color: #fff;
+ --button-default-color: #fff;
+
+ --button-primary-hover-bg: #e49b48;
+ --button-outline-hover-bg: rgba(255, 255, 255, 0.2);
+ --button-default-hover-bg: #17181c;
+
+ /* Poppins Font */
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 100;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 200;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 300;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 400;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 500;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 600;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 700;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 800;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+ @font-face {
+ font-family: "Poppins";
+ font-weight: 900;
+ font-style: normal;
+ src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot");
+ src:
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot?#iefix")
+ format("embedded-opentype"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff2")
+ format("woff2"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff")
+ format("woff"),
+ url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.ttf")
+ format("truetype");
+ font-display: swap;
+ }
+
+ /* Inter Font */
+ @font-face {
+ font-family: InterVariable;
+ font-style: normal;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0")
+ format("woff2");
+ }
+ @font-face {
+ font-family: InterVariable;
+ font-style: italic;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0")
+ format("woff2");
+ }
+
+ /* Typeahead Fix */
+ .rbt-token-removeable {
+ background: #007bff;
+ color: #fff;
+ }
+`;
+
+function Router({ active, routes }) {
+ // this may be converted to a module at devs.near/widget/Router
+ const routeParts = active.split(".");
+
+ let currentRoute = routes;
+ let src = "";
+ let defaultProps = {};
+
+ for (let part of routeParts) {
+ if (currentRoute[part]) {
+ currentRoute = currentRoute[part];
+ src = currentRoute.path;
+
+ if (currentRoute.init) {
+ defaultProps = { ...defaultProps, ...currentRoute.init };
+ }
+ } else {
+ // Handle 404 or default case for unknown routes
+ return
404 Not Found
;
+ }
+ }
+
+ return (
+
+
+
+ );
+}
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ font-family: InterVariable, sans-serif;
+`;
+
+const Content = styled.div`
+ width: 100%;
+ height: 100%;
+`;
+
+return (
+
+
+
+
+
+
+
+
+
+);
diff --git a/apps/builddao/widget/app/view.jsx b/apps/builddao/widget/app/view.jsx
new file mode 100644
index 00000000..ebe66ef1
--- /dev/null
+++ b/apps/builddao/widget/app/view.jsx
@@ -0,0 +1,105 @@
+const { Router } = VM.require("${config_account}/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 (
+
+ unable to load config:{" "}
+ {typeof config === object ? JSON.stringify(config) : config}
+
+ );
+}
+
+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});
+console.log("view props", passProps);
+
+return (
+
+
+
+
+
+
+
+
+
+);
diff --git a/apps/builddao/widget/page/feed.jsx b/apps/builddao/widget/page/feed.jsx
index 18a7d65c..a8115268 100644
--- a/apps/builddao/widget/page/feed.jsx
+++ b/apps/builddao/widget/page/feed.jsx
@@ -1,4 +1,4 @@
-const { currentPath, page, ...passProps } = props;
+const { currentPath, tab: page, ...passProps } = props;
const { routes } = VM.require("${config_account}/widget/config.feed") ?? {
routes: {},
@@ -56,7 +56,11 @@ const Content = styled.div`
return (
-
+
diff --git a/apps/builddao/widget/page/projects.jsx b/apps/builddao/widget/page/projects.jsx
index 4aaa9f22..ce43e442 100644
--- a/apps/builddao/widget/page/projects.jsx
+++ b/apps/builddao/widget/page/projects.jsx
@@ -1,3 +1,13 @@
+const { currentPath, tab: page, ...passProps } = props;
+
+const { routes } = VM.require("${config_account}/widget/config.projects") ?? {
+ routes: {},
+};
+
+const { theme } = VM.require("${config_account}/widget/config.theme") ?? {
+ theme: {},
+};
+
const { Button } = VM.require("${config_account}/widget/components") || {
Button: () => <>,
};
diff --git a/apps/builddao/widget/page/resources.jsx b/apps/builddao/widget/page/resources.jsx
index 2237ed9f..be7f2e39 100644
--- a/apps/builddao/widget/page/resources.jsx
+++ b/apps/builddao/widget/page/resources.jsx
@@ -1,4 +1,4 @@
-const { currentPath, page, ...passProps } = props;
+const { currentPath, tab: page, ...passProps } = props;
const { routes } = VM.require("${config_account}/widget/config.resources") ?? {
routes: {},
@@ -60,7 +60,11 @@ const Content = styled.div`
return (
-
+