diff --git a/apps/new/widget/Index.jsx b/apps/new/widget/Index.jsx index 9cb5f95d..d3b2e29a 100644 --- a/apps/new/widget/Index.jsx +++ b/apps/new/widget/Index.jsx @@ -1,4 +1,4 @@ -const { CSS } = VM.require("${config_account}/widget/components.css") || { +const { CSS } = VM.require("${config_account}/widget/css") || { CSS: () => <>, }; @@ -22,18 +22,18 @@ const config = { param: "page", routes: { home: { - path: "${config_account}/widget/page.home", + path: "${config_account}/widget/page.home.index", blockHeight: "final", init: { name: "Home", }, default: true, }, - build: { - path: "${config_account}/widget/build", + projects: { + path: "${config_account}/widget/page.projects.index", blockHeight: "final", init: { - name: "Build", + name: "Projects", }, }, }, @@ -42,9 +42,6 @@ const config = { return ( - + ); diff --git a/apps/new/widget/app/view.jsx b/apps/new/widget/app/view.jsx deleted file mode 100644 index 41f2f98c..00000000 --- a/apps/new/widget/app/view.jsx +++ /dev/null @@ -1,104 +0,0 @@ -const { Router } = VM.require("${alias_old}/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) || {}; - } -} - -if (!config) { - return ( -

- unable to load config:{" "} - {typeof config === object ? JSON.stringify(config) : config} -

- ); -} - -const { Layout } = VM.require( - config.layout?.src ?? "${alias_devs}/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%; - - .main { - min-height: 100vh; - } -`; - -const Content = styled.div` - width: 100%; - height: 100%; - background: var(--bg-1, #000); -`; - -// const Template = config.Template ?? (({children}) => <>{children}); -return ( - - - - - - - - - -); diff --git a/apps/new/widget/components/project/card.jsx b/apps/new/widget/components/project/card.jsx index 23e0aafa..925714d5 100644 --- a/apps/new/widget/components/project/card.jsx +++ b/apps/new/widget/components/project/card.jsx @@ -3,7 +3,7 @@ const { Avatar, Button } = VM.require("${alias_old}/widget/components") || { Button: () => <>, }; -const { href } = VM.require("${alias_old}/widget/lib.url") || { +const { href } = VM.require("${alias_devs}/widget/lib.url") || { href: () => {}, }; @@ -13,7 +13,7 @@ const { ProfileImages } = VM.require( ProfileImages: () => <>, }; -const Card = styled.div` +const GridCard = styled.div` border-radius: 16px; background: var(--bg-2, #23242b); @@ -94,7 +94,7 @@ const Tag = styled.div` } `; -const ProjectCard = ({ project, type }) => { +const ProjectCard = ({ data, variant }) => { const { accountId, description, @@ -103,7 +103,7 @@ const ProjectCard = ({ project, type }) => { collaborators, metadata, projectID, - } = project; + } = data; const profile = Social.getr(`${projectAccountId}/profile`); @@ -119,7 +119,7 @@ const ProjectCard = ({ project, type }) => { })} style={{ textDecoration: "none", display: "flex", flexGrow: "1" }} > - + { - + ); }; diff --git a/apps/new/widget/components/project/list.jsx b/apps/new/widget/components/project/list.jsx index 8ca7bb58..43e6e40d 100644 --- a/apps/new/widget/components/project/list.jsx +++ b/apps/new/widget/components/project/list.jsx @@ -3,7 +3,7 @@ const { Avatar, Button } = VM.require("${alias_old}/widget/components") || { Button: () => <>, }; -const { href } = VM.require("${alias_old}/widget/lib.url") || { +const { href } = VM.require("${alias_devs}/widget/lib.url") || { href: () => {}, }; @@ -13,7 +13,7 @@ const { ProfileImages } = VM.require( ProfileImages: () => <>, }; -const Card = styled.div` +const ListCard = styled.div` border-radius: 16px; background: var(--bg-2, #23242b); @@ -95,7 +95,7 @@ const Tag = styled.div` } `; -const ProjectList = ({ project, type }) => { +const ProjectList = ({ data, type }) => { const { accountId, projectAccountId, @@ -103,7 +103,7 @@ const ProjectList = ({ project, type }) => { collaborators, metadata, projectID, - } = project; + } = data; const profile = Social.getr(`${projectAccountId}/profile`); @@ -119,7 +119,7 @@ const ProjectList = ({ project, type }) => { })} style={{ textDecoration: "none", display: "flex", flexGrow: "1" }} > - +
{
- + ); }; diff --git a/apps/new/widget/components/css.jsx b/apps/new/widget/css.jsx similarity index 99% rename from apps/new/widget/components/css.jsx rename to apps/new/widget/css.jsx index 3e14603d..cfbc9c63 100644 --- a/apps/new/widget/components/css.jsx +++ b/apps/new/widget/css.jsx @@ -1,4 +1,6 @@ const CSS = styled.div` + min-height: 100vh; + @font-face { font-family: "Poppins"; font-weight: 100; diff --git a/apps/new/widget/Icons/Icons.jsx b/apps/new/widget/icons.jsx similarity index 100% rename from apps/new/widget/Icons/Icons.jsx rename to apps/new/widget/icons.jsx diff --git a/apps/new/widget/home/Build.jsx b/apps/new/widget/page/home/Build.jsx similarity index 100% rename from apps/new/widget/home/Build.jsx rename to apps/new/widget/page/home/Build.jsx diff --git a/apps/new/widget/home/BuildSomething.jsx b/apps/new/widget/page/home/BuildSomething.jsx similarity index 100% rename from apps/new/widget/home/BuildSomething.jsx rename to apps/new/widget/page/home/BuildSomething.jsx diff --git a/apps/new/widget/home/CTA.jsx b/apps/new/widget/page/home/CTA.jsx similarity index 100% rename from apps/new/widget/home/CTA.jsx rename to apps/new/widget/page/home/CTA.jsx diff --git a/apps/new/widget/home/Cards.jsx b/apps/new/widget/page/home/Cards.jsx similarity index 100% rename from apps/new/widget/home/Cards.jsx rename to apps/new/widget/page/home/Cards.jsx diff --git a/apps/new/widget/home/Hero.jsx b/apps/new/widget/page/home/Hero.jsx similarity index 85% rename from apps/new/widget/home/Hero.jsx rename to apps/new/widget/page/home/Hero.jsx index 7a27ba18..ddb95322 100644 --- a/apps/new/widget/home/Hero.jsx +++ b/apps/new/widget/page/home/Hero.jsx @@ -2,44 +2,9 @@ const { Button } = VM.require("${alias_old}/widget/components") || { Button: () => <>, }; -const BuilderHat = () => ( - - - - - - -); +const { BuilderHat } = VM.require("${alias_new}/widget/icons") || { + BuilderHat: () => <>, +}; const HeroContainer = styled.div` display: flex; @@ -306,7 +271,7 @@ const Hero = () => {
Let's Build - +
Designed to support builders in a multi-chain ecosystem. @@ -360,7 +325,7 @@ const Hero = () => {
{ }} /> <>, }; -const { Build } = VM.require("${config_account}/widget/home.Build") || { +const { Build } = VM.require("${config_account}/widget/page.home.Build") || { Build: () => <>, }; -const { Cards } = VM.require("${config_account}/widget/home.Cards") || { +const { Cards } = VM.require("${config_account}/widget/page.home.Cards") || { Cards: () => <>, }; const { BuildSomething } = VM.require( - "${config_account}/widget/home.BuildSomething", + "${config_account}/widget/page.home.BuildSomething", ) || { BuildSomething: () => <>, }; -const { CTA } = VM.require("${config_account}/widget/home.CTA") || { +const { CTA } = VM.require("${config_account}/widget/page.home.CTA") || { CTA: () => <>, }; diff --git a/apps/new/widget/page/projects.jsx b/apps/new/widget/page/projects/List.jsx similarity index 86% rename from apps/new/widget/page/projects.jsx rename to apps/new/widget/page/projects/List.jsx index 615bbf35..239a7574 100644 --- a/apps/new/widget/page/projects.jsx +++ b/apps/new/widget/page/projects/List.jsx @@ -19,22 +19,21 @@ const type = props.type || "project"; const flattenObject = (obj) => { let paths = []; - try { - Object.keys(obj).forEach((key) => { - const projects = Object.keys(obj?.[key]?.[app]?.[type] ?? {}); - projects.map((path) => { - if (!path || !path.includes("_")) { - return; - } - const convertedStr = path.replace(/_/g, "/"); - paths.push(convertedStr); - }); + Object.keys(obj).forEach((key) => { + const projects = Object.keys(obj?.[key]?.[app]?.[type] ?? {}); + (projects || []).map((path) => { + if (!path || !path.includes("_")) { + return; + } + const convertedStr = path.replace(/_/g, "/"); + paths.push(convertedStr); }); - } catch (e) {} + }); return paths; }; -const fetchProjects = () => { +/** This may be moved to a separate, common SDK */ +const fetchThings = () => { const keys = Social.keys(`*/${app}/${type}/*`, "final", { order: "desc", subscribe: true, @@ -61,7 +60,7 @@ const fetchProjects = () => { return projects; }; -const data = fetchProjects(); +const data = fetchThings({ app: "${alias_old}", type: "project" }); if (!data) { return "Loading..."; @@ -70,7 +69,7 @@ if (!data) { const processData = useCallback( (data) => { const accounts = Object.entries(data ?? {}); - const allProjects = accounts + const allProjects = (accounts || []) .map((account) => { const accountId = account[0]; return Object.entries(account?.[1]?.[type] ?? {}).map((kv) => { @@ -194,7 +193,7 @@ const filteredProjects = useMemo(() => { }, [filters, projects]); const tagFilters = useMemo(() => { - let tags = projects.map((project) => project.tags).flat(); + let tags = (projects || []).map((project) => project.tags).flat(); tags = [...new Set(tags)]; return tags; }, [projects]); @@ -232,7 +231,8 @@ const Subheading = styled.h3` margin: 0; `; -const view = Storage.get("projectsView") ?? "grid"; +const view = Storage.get("${config_account}:projects-view") ?? "grid"; +const setView = (v) => Storage.set("${config_account}:projects-view", v); return ( Storage.set("projectsView", "grid")} + onClick={() => setView("grid")} > @@ -342,7 +342,7 @@ return ( type="icon" className="rounded-2" variant={view === "list" ? "primary" : null} - onClick={() => Storage.set("projectsView", "list")} + onClick={() => setView("list")} > @@ -350,24 +350,24 @@ return (
- {view === "grid" ? ( - - {filteredProjects.length === 0 && ( -

No Projects Found

+ {filteredProjects && filteredProjects.length > 0 ? ( + <> + {view === "grid" ? ( + + {filteredProjects.map((project) => ( + + ))} + + ) : ( +
+ {filteredProjects.map((project) => ( + + ))} +
)} - {filteredProjects.map((project) => ( - - ))} - + ) : ( -
- {filteredProjects.length === 0 && ( -

No Projects Found

- )} - {filteredProjects.map((project) => ( - - ))} -
+

No Projects Found

)} ); diff --git a/apps/new/widget/build.jsx b/apps/new/widget/page/projects/index.jsx similarity index 93% rename from apps/new/widget/build.jsx rename to apps/new/widget/page/projects/index.jsx index fc29bd6b..616d005a 100644 --- a/apps/new/widget/build.jsx +++ b/apps/new/widget/page/projects/index.jsx @@ -1,8 +1,5 @@ const config = { - theme: { - "--color": "white", - color: "var(--color)", - }, + theme: {}, layout: { src: "${alias_devs}/widget/Layout", props: { @@ -17,7 +14,7 @@ const config = { src="${config_account}/widget/components.sidebar" props={{ routes: config.router.routes, - currentRoute: "/builddao.near/widget/Index?page=build", + currentRoute: "/${config_account}/widget/Index?page=projects", ...props, }} /> @@ -42,7 +39,7 @@ const config = { }, }, allProjects: { - path: "${config_account}/widget/page.projects", + path: "${config_account}/widget/page.projects.List", blockHeight: "final", init: { name: "All Projects",