New projects feed updates & organization

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 (
   <CSS>
-    <Widget
-      src="${config_account}/widget/app.view"
-      props={{ config, ...props }}
-    />
+    <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />
   </CSS>
 );

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" }}
     >
-      <Card>
+      <GridCard>
         <Widget
           src="${alias_mob}/widget/Image"
           loading=""
@@ -203,7 +203,7 @@ const ProjectCard = ({ project, type }) => {
             </div>
           </div>
         </div>
-      </Card>
+      </GridCard>
     </Link>
   );
 };

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,15 +95,15 @@ const Tag = styled.div`
   }
 `;
 
-const ProjectList = ({ project, type }) => {
+const ProjectList = ({ data, type }) => {
   const {
     accountId,
     projectAccountId,
     tags,
     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" }}
     >
-      <Card>
+      <ListCard>
         <div className="d-flex justify-content-start p-4 flex-grow-1 gap-3">
           <div className="d-flex align-items-center">
             <div
@@ -183,7 +183,7 @@ const ProjectList = ({ project, type }) => {
             </Button>
           </div>
         </div>
-      </Card>
+      </ListCard>
     </Link>
   );
 };

apps/new/widget/components/css.jsx → apps/new/widget/css.jsx

@@ -1,4 +1,6 @@
 const CSS = styled.div`
+  min-height: 100vh;
+
   @font-face {
     font-family: "Poppins";
     font-weight: 100;

apps/new/widget/home/Hero.jsx → apps/new/widget/page/home/Hero.jsx

@@ -2,44 +2,9 @@ const { Button } = VM.require("${alias_old}/widget/components") || {
   Button: () => <></>,
 };
 
-const BuilderHat = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M2 18C2 18.2652 2.10536 18.5196 2.29289 18.7071C2.48043 18.8946 2.73478 19 3 19H21C21.2652 19 21.5196 18.8946 21.7071 18.7071C21.8946 18.5196 22 18.2652 22 18V16C22 15.7348 21.8946 15.4804 21.7071 15.2929C21.5196 15.1054 21.2652 15 21 15H3C2.73478 15 2.48043 15.1054 2.29289 15.2929C2.10536 15.4804 2 15.7348 2 16V18Z"
-      stroke="#ECA227"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M10 10V5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V10"
-      stroke="#ECA227"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M4 15V12C4 10.4087 4.63214 8.88258 5.75736 7.75736C6.88258 6.63214 8.4087 6 10 6"
-      stroke="#ECA227"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M14 6C15.5913 6 17.1174 6.63214 18.2426 7.75736C19.3679 8.88258 20 10.4087 20 12V15"
-      stroke="#ECA227"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+const { BuilderHat } = VM.require("${alias_new}/widget/icons") || {
+  BuilderHat: () => <></>,
+};
 
 const HeroContainer = styled.div`
   display: flex;
@@ -306,7 +271,7 @@ const Hero = () => {
       <HeadingSection>
         <div className="row gap-3 flex-wrap">
           <Heading className="col-6">Let's Build</Heading>
-          <Widget src="${config_account}/widget/home.hero.vertical" />
+          <Widget src="${config_account}/widget/page.home.hero.Vertical" />
         </div>
         <Subheading>
           Designed to support builders in a multi-chain ecosystem.
@@ -360,7 +325,7 @@ const Hero = () => {
           </div>
           <div className="d-flex flex-column gap-2 rounded-4 overflow-hidden opacity-50">
             <Widget
-              src="${config_account}/widget/home.hero.ScrollingText"
+              src="${config_account}/widget/page.home.hero.ScrollingText"
               props={{
                 direction: "normal",
                 words: [
@@ -372,14 +337,14 @@ const Hero = () => {
               }}
             />
             <Widget
-              src="${config_account}/widget/home.hero.ScrollingText"
+              src="${config_account}/widget/page.home.hero.ScrollingText"
               props={{
                 direction: "reverse",
                 words: ["UI/UX Designers", "Roles", "Developers", "Support"],
               }}
             />
             <Widget
-              src="${config_account}/widget/home.hero.ScrollingText"
+              src="${config_account}/widget/page.home.hero.ScrollingText"
               props={{
                 direction: "normal",
                 words: [

apps/new/widget/page/home.jsx → apps/new/widget/page/home/index.jsx

@@ -1,22 +1,22 @@
-const { Hero } = VM.require("${config_account}/widget/home.Hero") || {
+const { Hero } = VM.require("${config_account}/widget/page.home.Hero") || {
   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: () => <></>,
 };