From 967110bfe1d8b7aba9d5e86b1678378d13f94462 Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Tue, 9 Apr 2024 02:13:54 -0700 Subject: [PATCH 01/12] Move app to every.app pattern --- apps/builddao/widget/Proposals.jsx | 2 +- apps/builddao/widget/Router.jsx | 73 +++++++ apps/builddao/widget/app.jsx | 169 +++++++++------ apps/builddao/widget/app.old.jsx | 275 ++++++++++++++++++++++++ apps/builddao/widget/app/view.jsx | 105 +++++++++ apps/builddao/widget/page/feed.jsx | 8 +- apps/builddao/widget/page/projects.jsx | 7 +- apps/builddao/widget/page/resources.jsx | 8 +- 8 files changed, 573 insertions(+), 74 deletions(-) create mode 100644 apps/builddao/widget/Router.jsx create mode 100644 apps/builddao/widget/app.old.jsx create mode 100644 apps/builddao/widget/app/view.jsx diff --git a/apps/builddao/widget/Proposals.jsx b/apps/builddao/widget/Proposals.jsx index c6665bf7..dda124f5 100644 --- a/apps/builddao/widget/Proposals.jsx +++ b/apps/builddao/widget/Proposals.jsx @@ -355,7 +355,7 @@ return ( - + {showNotificationModal && }
{proposalsComponent}
{!proposalId && (
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 e09f251c..59177901 100644 --- a/apps/builddao/widget/page/projects.jsx +++ b/apps/builddao/widget/page/projects.jsx @@ -1,4 +1,4 @@ -const { currentPath, page, ...passProps } = props; +const { currentPath, tab: page, ...passProps } = props; const { routes } = VM.require("${config_account}/widget/config.projects") ?? { routes: {}, @@ -68,7 +68,10 @@ const Content = styled.div` return ( - + 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 ( - + From a3e4b135a85259a6b741a104a6339c45bf90484b Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Tue, 9 Apr 2024 08:08:52 -0700 Subject: [PATCH 02/12] fmt --- apps/builddao/widget/components/modals/CreateProject.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/builddao/widget/components/modals/CreateProject.jsx b/apps/builddao/widget/components/modals/CreateProject.jsx index 0b5870f8..20d24fb3 100644 --- a/apps/builddao/widget/components/modals/CreateProject.jsx +++ b/apps/builddao/widget/components/modals/CreateProject.jsx @@ -1,6 +1,6 @@ const accountId = context.accountId; const { Modal, Button, InputField, TextEditor } = VM.require( - "buildhub.near/widget/components" + "buildhub.near/widget/components", ) || { Modal: () => <>, Button: () => <>, @@ -30,7 +30,7 @@ const [gitHub, setGitHub] = useState(""); const [telegram, setTelegram] = useState(""); const [website, setWebsite] = useState(""); const [selectedTabs, setSelectedTabs] = useState( - new Set(tabs.filter((tab) => tab.checked).map((tab) => tab.id.toLowerCase())) + new Set(tabs.filter((tab) => tab.checked).map((tab) => tab.id.toLowerCase())), ); const [avatar, setAvatar] = useState(""); const [coverImage, setCoverImage] = useState(""); @@ -57,7 +57,7 @@ const handleTags = (tags) => { const handleContributors = (contributors) => { let filtered = contributors.map((contributor) => - contributor.customOption ? contributor.label : contributor + contributor.customOption ? contributor.label : contributor, ); setDistributors(filtered); }; From 61055fd39a76e70b61cfbb87f655843dbc1dcc17 Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Wed, 10 Apr 2024 23:47:54 -0700 Subject: [PATCH 03/12] Move feed to new app layout --- apps/builddao/widget/Feed.jsx | 2 +- apps/builddao/widget/app/view.jsx | 2 - apps/builddao/widget/page/feed.jsx | 206 ++++++++++++++++++------- apps/builddao/widget/page/feed.old.jsx | 70 +++++++++ 4 files changed, 222 insertions(+), 58 deletions(-) create mode 100644 apps/builddao/widget/page/feed.old.jsx diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx index eece2092..86acefbb 100644 --- a/apps/builddao/widget/Feed.jsx +++ b/apps/builddao/widget/Feed.jsx @@ -26,7 +26,7 @@ const LoginContainer = styled.div` margin-bottom: 1rem; `; -const { name: feedName, template, requiredHashtags, customActions } = props; +const { feedName, template, requiredHashtags, customActions } = props; // for modals const [item, setItem] = useState(null); diff --git a/apps/builddao/widget/app/view.jsx b/apps/builddao/widget/app/view.jsx index ebe66ef1..6da56a73 100644 --- a/apps/builddao/widget/app/view.jsx +++ b/apps/builddao/widget/app/view.jsx @@ -87,8 +87,6 @@ const Content = styled.div` `; // 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 a8115268..5477e12c 100644 --- a/apps/builddao/widget/page/feed.jsx +++ b/apps/builddao/widget/page/feed.jsx @@ -1,70 +1,166 @@ -const { currentPath, tab: page, ...passProps } = props; - -const { routes } = VM.require("${config_account}/widget/config.feed") ?? { - routes: {}, -}; - const { SidebarLayout } = VM.require( "${config_account}/widget/template.SidebarLayout", ) || { SidebarLayout: () => <>, }; -if (!page) page = Object.keys(routes)[0] || "home"; - -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

; - } - } +const { Post } = VM.require("${config_account}/widget/components") || { + Post: () => <>, +}; - return ( -
- -
- ); +function formatDate(date) { + const options = { year: "numeric", month: "short", day: "numeric" }; + return date.toLocaleDateString("en-US", options); } -const Container = styled.div` - // display: flex; - height: 100%; -`; +const daoName = "Build DAO"; +const feedLink = "https://nearbuilders.org/feed"; -const Content = styled.div` - width: 100%; - height: 100%; -`; +const config = { + theme: {}, + layout: { + src: "devs.near/widget/Layout", + props: { + variant: "standard", + }, + }, + blocks: { + // these get passed to the layout and children + Header: () => <>, + Footer: () => <>, // customize your footer + }, + router: { + param: "tab", + routes: { + all: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + feedName: "All", + name: "All", + icon: "bi-list", + requiredHashtags: ["build"], + }, + default: true, + }, + updates: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + feedName: "Updates", + name: "Updates", + icon: "bi-bell", + requiredHashtags: ["build", "update"], + template: `### BUILDER UPDATE: ${formatDate(new Date())} + (posted via [${daoName} Gateway](${feedLink}?tab=update)) + + **✅ DONE** + - [what'd you do] + - [link proof] + + **⏩ NEXT** + - [what's next?] + - [what are you thinking about?] + + **🛑 BLOCKERS** + - [what's blocking you?] + - [how can someone help?] + `, + }, + }, + question: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + feedName: "Question", + name: "Question", + icon: "bi-question-lg", + requiredHashtags: ["build", "question"], + template: `## what is your question? + (posted via [${daoName} Gateway](${feedLink}?tab=question)) + + [what are you thinking about?] + [why are you asking?] + `, + }, + }, + idea: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + feedName: "Idea", + name: "Idea", + icon: "bi-lightbulb", + requiredHashtags: ["build", "idea"], + template: `## IDEA TITLE + (posted via [${daoName} Gateway](${feedLink}?tab=idea)) + + **What idea are you proposing?** + - [Describe the idea] + + **Context or additional information:** + - [Provide any context or details] + `, + }, + }, + feedback: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + feedName: "Feedback", + name: "Feedback", + icon: "bi-chat-left-text", + requiredHashtags: ["build", "feedback"], + }, + }, + events: { + path: "${config_account}/widget/events.Calendar", + blockHeight: "final", + init: { + feedName: "Events", + name: "Events", + icon: "bi-calendar", + app: "every", + thing: "event", + }, + }, + bookmarks: { + path: "${config_account}/widget/OrderedGraphFeed", + blockHeight: "final", + init: { + feedName: "Bookmarks", + name: "Bookmarks", + icon: "bi-bookmark", + itemType: "bookmark", + renderItem: (item) => { + return ( + + ); + }, + }, + }, + }, + }, +}; + +const Root = styled.div``; return ( - - - - - - - + + + ); diff --git a/apps/builddao/widget/page/feed.old.jsx b/apps/builddao/widget/page/feed.old.jsx new file mode 100644 index 00000000..a8115268 --- /dev/null +++ b/apps/builddao/widget/page/feed.old.jsx @@ -0,0 +1,70 @@ +const { currentPath, tab: page, ...passProps } = props; + +const { routes } = VM.require("${config_account}/widget/config.feed") ?? { + routes: {}, +}; + +const { SidebarLayout } = VM.require( + "${config_account}/widget/template.SidebarLayout", +) || { + SidebarLayout: () => <>, +}; + +if (!page) page = Object.keys(routes)[0] || "home"; + +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%; +`; + +const Content = styled.div` + width: 100%; + height: 100%; +`; + +return ( + + + + + + + + + +); From e1efe5c14f863dfbed12cdd50bcb00aa65ebaea1 Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Thu, 11 Apr 2024 00:31:39 -0700 Subject: [PATCH 04/12] Move all pages to new app layout' --- apps/builddao/widget/Resources.jsx | 6 +- apps/builddao/widget/app.jsx | 6 +- apps/builddao/widget/components/Navbar.jsx | 1 + .../widget/components/project/page/Task.jsx | 16 +- apps/builddao/widget/config/app.jsx | 72 --------- apps/builddao/widget/config/feed.jsx | 121 --------------- apps/builddao/widget/config/project.jsx | 30 ---- apps/builddao/widget/config/projects.jsx | 55 ------- apps/builddao/widget/config/resources.jsx | 25 ---- apps/builddao/widget/page/feed.old.jsx | 70 --------- apps/builddao/widget/page/project.jsx | 140 +++++++++--------- apps/builddao/widget/page/projects.jsx | 81 ---------- apps/builddao/widget/page/proposal.jsx | 84 +++++++++++ apps/builddao/widget/page/resources.jsx | 114 +++++++------- .../widget/template/ProjectLayout.jsx | 1 + 15 files changed, 225 insertions(+), 597 deletions(-) delete mode 100644 apps/builddao/widget/config/app.jsx delete mode 100644 apps/builddao/widget/config/feed.jsx delete mode 100644 apps/builddao/widget/config/project.jsx delete mode 100644 apps/builddao/widget/config/projects.jsx delete mode 100644 apps/builddao/widget/config/resources.jsx delete mode 100644 apps/builddao/widget/page/feed.old.jsx delete mode 100644 apps/builddao/widget/page/projects.jsx create mode 100644 apps/builddao/widget/page/proposal.jsx diff --git a/apps/builddao/widget/Resources.jsx b/apps/builddao/widget/Resources.jsx index 16ebc676..8baeb534 100644 --- a/apps/builddao/widget/Resources.jsx +++ b/apps/builddao/widget/Resources.jsx @@ -16,7 +16,7 @@ const postAccountId = props.postAccountId; if (mdPath && !postAccountId) { return (
-
{props.name}
+
{props.feedName}
); @@ -25,7 +25,7 @@ if (mdPath && !postAccountId) { if (!mdPath && postAccountId) { return (
-
{props.name}
+
{props.feedName}
-
{props.name}
+
{props.feedName}

No mdPath or post accountId configured

); diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx index 785dfc31..6c8dd496 100644 --- a/apps/builddao/widget/app.jsx +++ b/apps/builddao/widget/app.jsx @@ -18,7 +18,7 @@ const config = { // customize your header ), Footer: () => <>, // customize your footer @@ -42,10 +42,10 @@ const config = { }, }, proposal: { - path: "${config_account}/widget/page.projects", + path: "${config_account}/widget/page.proposal", blockHeight: "final", init: { - name: "Projects", + name: "Proposals", }, }, resources: { diff --git a/apps/builddao/widget/components/Navbar.jsx b/apps/builddao/widget/components/Navbar.jsx index ef31a93f..24a5e58b 100644 --- a/apps/builddao/widget/components/Navbar.jsx +++ b/apps/builddao/widget/components/Navbar.jsx @@ -206,6 +206,7 @@ const MobileContent = styled.div` function Navbar(props) { const { page, routes } = props; + console.log("navbar props", props); const [dropdown, setDropdown] = useState(false); const toggleDropdown = () => { diff --git a/apps/builddao/widget/components/project/page/Task.jsx b/apps/builddao/widget/components/project/page/Task.jsx index 7e016622..0448d75a 100644 --- a/apps/builddao/widget/components/project/page/Task.jsx +++ b/apps/builddao/widget/components/project/page/Task.jsx @@ -58,19 +58,19 @@ const Wrapper = styled.div` color: var(--primary-color) !important; } - .secondary-text{ + .secondary-text { color: var(--secondary-font-color) !important; } - + .dropdown-menu { background-color: var(--menu-bg-color) !important; color: var(--font-color) !important; li.dropdown-item { - display:flex; - gap:10px; - align-items:center; - cursor:pointer; + display: flex; + gap: 10px; + align-items: center; + cursor: pointer; color: var(--font-color) !important; &:hover { a { @@ -92,9 +92,11 @@ const Wrapper = styled.div` } } - .dropdown-item.active, .dropdown-item:active { + .dropdown-item.active, + .dropdown-item:active { background-color: var(--primary-color) !important; } + } `; const projectID = ""; diff --git a/apps/builddao/widget/config/app.jsx b/apps/builddao/widget/config/app.jsx deleted file mode 100644 index e1134b73..00000000 --- a/apps/builddao/widget/config/app.jsx +++ /dev/null @@ -1,72 +0,0 @@ -return { - type: "app", - routes: { - home: { - path: "${config_account}/widget/page.home", - blockHeight: "final", - init: { - name: "Home", - }, - }, - 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, - }, - }, -}; diff --git a/apps/builddao/widget/config/feed.jsx b/apps/builddao/widget/config/feed.jsx deleted file mode 100644 index 20a77538..00000000 --- a/apps/builddao/widget/config/feed.jsx +++ /dev/null @@ -1,121 +0,0 @@ -const { Post } = VM.require("${config_account}/widget/components") || { - Post: () => <>, -}; - -function formatDate(date) { - const options = { year: "numeric", month: "short", day: "numeric" }; - return date.toLocaleDateString("en-US", options); -} - -const daoName = "Build DAO"; -const feedLink = "https://nearbuilders.org/feed"; - -return { - type: "app", // every.near/type/app - routes: { - all: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "All", // maybe these should be moved to navbar specific - icon: "bi-list", - requiredHashtags: ["build"], - }, - }, - updates: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "Updates", - icon: "bi-bell", - requiredHashtags: ["build", "update"], - template: `### BUILDER UPDATE: ${formatDate(new Date())} -(posted via [${daoName} Gateway](${feedLink}?tab=update)) - -**✅ DONE** -- [what'd you do] -- [link proof] - -**⏩ NEXT** -- [what's next?] -- [what are you thinking about?] - -**🛑 BLOCKERS** -- [what's blocking you?] -- [how can someone help?] -`, - }, - }, - question: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "Question", - icon: "bi-question-lg", - requiredHashtags: ["build", "question"], - template: `## what is your question? -(posted via [${daoName} Gateway](${feedLink}?tab=question)) - -[what are you thinking about?] -[why are you asking?] -`, - }, - }, - idea: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "Idea", - icon: "bi-lightbulb", - requiredHashtags: ["build", "idea"], - template: `## IDEA TITLE -(posted via [${daoName} Gateway](${feedLink}?tab=idea)) - -**What idea are you proposing?** -- [Describe the idea] - -**Context or additional information:** -- [Provide any context or details] -`, - }, - }, - feedback: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "Feedback", - icon: "bi-chat-left-text", - requiredHashtags: ["build", "feedback"], - }, - }, - events: { - path: "${config_account}/widget/events.Calendar", - blockHeight: "final", - init: { - name: "Events", - icon: "bi-calendar", - app: "every", - thing: "event", - }, - }, - bookmarks: { - path: "${config_account}/widget/OrderedGraphFeed", - blockHeight: "final", - init: { - name: "Bookmarks", - icon: "bi-bookmark", - itemType: "bookmark", - renderItem: (item) => { - return ( - - ); - }, - }, - }, - }, -}; diff --git a/apps/builddao/widget/config/project.jsx b/apps/builddao/widget/config/project.jsx deleted file mode 100644 index 978bf4f2..00000000 --- a/apps/builddao/widget/config/project.jsx +++ /dev/null @@ -1,30 +0,0 @@ -return { - type: "app", - routes: { - overview: { - path: "${config_account}/widget/components.project.page.Overview", - blockHeight: "final", - init: {}, - }, - discussion: { - path: "${config_account}/widget/components.project.page.Discussion", - blockHeight: "final", - init: {}, - }, - task: { - path: "${config_account}/widget/components.project.page.Task", - blockHeight: "final", - init: {}, - }, - code: { - path: "${config_account}/widget/components.project.page.Code", - blockHeight: "final", - init: {}, - }, - roadmap: { - path: "${config_account}/widget/components.project.page.Roadmap", - blockHeight: "final", - init: {}, - }, - }, -}; diff --git a/apps/builddao/widget/config/projects.jsx b/apps/builddao/widget/config/projects.jsx deleted file mode 100644 index 30456206..00000000 --- a/apps/builddao/widget/config/projects.jsx +++ /dev/null @@ -1,55 +0,0 @@ -const { Post } = VM.require("${config_account}/widget/components") || { - Post: () => <>, -}; - -function formatDate(date) { - const options = { year: "numeric", month: "short", day: "numeric" }; - return date.toLocaleDateString("en-US", options); -} - -const daoName = "Build DAO"; -const feedLink = "https://nearbuilders.org/feed"; - -return { - type: "app", // every.near/type/app - routes: { - request: { - path: "${config_account}/widget/Feed", - blockHeight: "final", - init: { - name: "Request", - icon: "bi-file-earmark-text", - requiredHashtags: ["build", "request"], - customActions: [ - { - type: "modal", - icon: "bi-file-earmark-text", - label: "Propose", - onClick: (modalToggles) => { - const toggle = modalToggles.propose; - toggle(); - }, - }, - ], - template: `## REQUEST TITLE -(posted via [${daoName} Gateway](${feedLink}?tab=request)) - -#### Description -[Detailed description of what the proposal is about.] - -#### Why This Proposal? -[Explanation of why this proposal is necessary or beneficial.] -`, - }, - }, - proposals: { - path: "${config_account}/widget/Proposals", - blockHeight: "final", - init: { - name: "Proposals", - icon: "bi-file-earmark-text", - daoId: "build.sputnik-dao.near", - }, - }, - }, -}; diff --git a/apps/builddao/widget/config/resources.jsx b/apps/builddao/widget/config/resources.jsx deleted file mode 100644 index ff92cf30..00000000 --- a/apps/builddao/widget/config/resources.jsx +++ /dev/null @@ -1,25 +0,0 @@ -return { - type: "app", - routes: { - guide: { - path: "${config_account}/widget/Resources", - blockHeight: "final", - init: { - name: "Guide", - icon: "bi-map", - mdPath: - "https://raw.githubusercontent.com/NEARBuilders/gateway/main/resources.md", - }, - }, - deployWeb4: { - path: "${config_account}/widget/Resources", - blockHeight: "final", - init: { - name: "Deploying to Web4", - icon: "bi-rocket", - postAccountId: "efiz.near", - postBlockHeight: "113409716", - }, - }, - }, -}; diff --git a/apps/builddao/widget/page/feed.old.jsx b/apps/builddao/widget/page/feed.old.jsx deleted file mode 100644 index a8115268..00000000 --- a/apps/builddao/widget/page/feed.old.jsx +++ /dev/null @@ -1,70 +0,0 @@ -const { currentPath, tab: page, ...passProps } = props; - -const { routes } = VM.require("${config_account}/widget/config.feed") ?? { - routes: {}, -}; - -const { SidebarLayout } = VM.require( - "${config_account}/widget/template.SidebarLayout", -) || { - SidebarLayout: () => <>, -}; - -if (!page) page = Object.keys(routes)[0] || "home"; - -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%; -`; - -const Content = styled.div` - width: 100%; - height: 100%; -`; - -return ( - - - - - - - - - -); diff --git a/apps/builddao/widget/page/project.jsx b/apps/builddao/widget/page/project.jsx index 3f9e902a..dc9f4b36 100644 --- a/apps/builddao/widget/page/project.jsx +++ b/apps/builddao/widget/page/project.jsx @@ -1,5 +1,3 @@ -const { page, tab, type, app, ...passProps } = props; - const { routes } = VM.require("${config_account}/widget/config.project") ?? { routes: {}, }; @@ -26,57 +24,6 @@ if (!id || !data) { return "Loading..."; } -if (!page) page = Object.keys(routes)[0] || "home"; - -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%; -`; - -const Content = styled.div` - width: 100%; - height: 100%; -`; - function transformKeys(obj) { obj.tags = obj.tracks; delete obj.tracks; @@ -91,22 +38,79 @@ const project = transformKeys(JSON.parse(data[""])); const profile = Social.getr(`${accountId}/profile`, "final"); +const { SidebarLayout } = VM.require( + "${config_account}/widget/template.SidebarLayout", +) || { + SidebarLayout: () => <>, +}; + +const config = { + theme: {}, + layout: { + src: "devs.near/widget/Layout", + props: { + variant: "standard", + }, + }, + blocks: { + // these get passed to the layout and children + Header: () => ( + <> + + + ), + Footer: () => <>, // customize your footer + }, + router: { + param: "tab", + routes: { + overview: { + path: "${config_account}/widget/components.project.page.Overview", + blockHeight: "final", + init: {}, + default: "true", + }, + discussion: { + path: "${config_account}/widget/components.project.page.Discussion", + blockHeight: "final", + init: {}, + }, + task: { + path: "${config_account}/widget/components.project.page.Task", + blockHeight: "final", + init: {}, + }, + code: { + path: "${config_account}/widget/components.project.page.Code", + blockHeight: "final", + init: {}, + }, + roadmap: { + path: "${config_account}/widget/components.project.page.Roadmap", + blockHeight: "final", + init: {}, + }, + }, + }, +}; + +const Root = styled.div` + padding: 24px 56px; +`; + return ( - - - - - - - + ); diff --git a/apps/builddao/widget/page/projects.jsx b/apps/builddao/widget/page/projects.jsx deleted file mode 100644 index 59177901..00000000 --- a/apps/builddao/widget/page/projects.jsx +++ /dev/null @@ -1,81 +0,0 @@ -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 { SidebarLayout } = VM.require( - "${config_account}/widget/template.SidebarLayout", -) || { - SidebarLayout: () => <>, -}; - -if (!page) page = Object.keys(routes)[0] || "home"; - -const Root = styled.div` - ${theme}// can come from config -`; - -const [activeRoute, setActiveRoute] = useState(page); - -useEffect(() => { - setActiveRoute(page); -}, [page]); - -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%; -`; - -const Content = styled.div` - width: 100%; - height: 100%; -`; - -return ( - - - - - - - - - -); diff --git a/apps/builddao/widget/page/proposal.jsx b/apps/builddao/widget/page/proposal.jsx new file mode 100644 index 00000000..e404ad2a --- /dev/null +++ b/apps/builddao/widget/page/proposal.jsx @@ -0,0 +1,84 @@ +const { SidebarLayout } = VM.require( + "${config_account}/widget/template.SidebarLayout", +) || { + SidebarLayout: () => <>, +}; + +const daoName = "Build DAO"; +const feedLink = "https://nearbuilders.org/feed"; + +const config = { + theme: {}, + layout: { + src: "devs.near/widget/Layout", + props: { + variant: "standard", + }, + }, + blocks: { + // these get passed to the layout and children + Header: () => <>, + Footer: () => <>, // customize your footer + }, + router: { + param: "tab", + routes: { + request: { + path: "${config_account}/widget/Feed", + blockHeight: "final", + init: { + name: "Request", + icon: "bi-file-earmark-text", + requiredHashtags: ["build", "request"], + customActions: [ + { + type: "modal", + icon: "bi-file-earmark-text", + label: "Propose", + onClick: (modalToggles) => { + const toggle = modalToggles.propose; + toggle(); + }, + }, + ], + template: `## REQUEST TITLE +(posted via [${daoName} Gateway](${feedLink}?tab=request)) + +#### Description +[Detailed description of what the proposal is about.] + +#### Why This Proposal? +[Explanation of why this proposal is necessary or beneficial.] +`, + }, + default: true, + }, + proposals: { + path: "${config_account}/widget/Proposals", + blockHeight: "final", + init: { + name: "Proposals", + icon: "bi-file-earmark-text", + daoId: "build.sputnik-dao.near", + }, + }, + }, + }, +}; + +const Root = styled.div``; + +return ( + + + + + +); diff --git a/apps/builddao/widget/page/resources.jsx b/apps/builddao/widget/page/resources.jsx index be7f2e39..300cddfb 100644 --- a/apps/builddao/widget/page/resources.jsx +++ b/apps/builddao/widget/page/resources.jsx @@ -1,75 +1,65 @@ -const { currentPath, tab: page, ...passProps } = props; - -const { routes } = VM.require("${config_account}/widget/config.resources") ?? { - routes: {}, -}; - -const { Footer } = VM.require("${config_account}/widget/home.Home") || { - Footer: () => <>, -}; - const { SidebarLayout } = VM.require( "${config_account}/widget/template.SidebarLayout", ) || { SidebarLayout: () => <>, }; -if (!page) page = Object.keys(routes)[0] || "home"; +const config = { + theme: {}, + layout: { + src: "devs.near/widget/Layout", + props: { + variant: "standard", + }, + }, + blocks: { + // these get passed to the layout and children + Header: () => <>, + Footer: () => <>, // customize your footer + }, + router: { + param: "tab", + routes: { + guide: { + path: "${config_account}/widget/Resources", + blockHeight: "final", + init: { + feedName: "Guide", + name: "Guide", + icon: "bi-map", + mdPath: + "https://raw.githubusercontent.com/NEARBuilders/gateway/main/resources.md", + }, + default: "true", + }, + deployWeb4: { + path: "${config_account}/widget/Resources", + blockHeight: "final", + init: { + feedName: "Deploying to Web4", + name: "Deploying to Web4", + icon: "bi-rocket", + postAccountId: "efiz.near", + postBlockHeight: "113409716", + }, + }, + }, + }, +}; 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%; -`; - -const Content = styled.div` - width: 100%; - height: 100%; -`; - return ( - - - - - - -