Project-new

apps/new/widget/Index.jsx

@@ -36,6 +36,14 @@ const config = {
           name: "Projects",
         },
       },
+      project: {
+        path: "${config_account}/widget/page.project.Index",
+        blockHeight: "final",
+        init: {
+          name: "Project",
+        },
+        hide: true,
+      },
       resources: {
         path: "${config_account}/widget/page.resources.Index",
         blockHeight: "final",

apps/new/widget/components/project/Card.jsx

@@ -111,7 +111,7 @@ const ProjectCard = ({ data, variant }) => {
   return (
     <Link
       href={href({
-        widgetSrc: `${alias_old}/widget/app`,
+        widgetSrc: `${config_account}/widget/Index`,
         params: {
           page: "project",
           id: `${accountId}/${type}/${projectID}`,

apps/new/widget/page/project/Index.jsx

@@ -0,0 +1,64 @@
+const { Layout } = VM.require(
+  "${config_account}/widget/page.project.Layout",
+) || {
+  Layout: () => <></>,
+};
+const config = {
+  theme: {},
+  layout: {
+    src: "${alias_devs}/widget/Layout",
+    props: {
+      variant: "sidebar",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => <></>,
+    Sidebar: () => (
+      <Widget
+        src="${config_account}/widget/components.Sidebar"
+        props={{
+          routes: config.router.routes,
+          currentRoute: "/${config_account}/widget/Index?page=projects",
+          ...props,
+        }}
+      />
+    ),
+    Footer: () => <></>,
+  },
+  router: {
+    param: "tab",
+    routes: {
+      myProjects: {
+        init: {
+          name: "My Projects",
+          icon: "bi bi-star",
+        },
+      },
+      myToolkits: {
+        init: {
+          name: "My Toolkits",
+          icon: "bi bi-database",
+        },
+      },
+      projectsInvolved: {
+        init: {
+          name: "Projects Involved",
+          icon: "bi bi-clipboard",
+        },
+      },
+      project: {
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
+        default: true,
+        hide: true,
+      },
+    },
+  },
+};
+
+return (
+  <div className="mt-3 container-xl">
+    <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />
+  </div>
+);

apps/new/widget/page/project/Layout.jsx

@@ -0,0 +1,118 @@
+const { Metadata } = VM.require(
+  "${config_account}/widget/page.project.Metadata",
+) || {
+  Metadata: () => <></>,
+};
+
+const { href } = VM.require("${alias_old}/widget/lib.url") || {
+  href: () => {},
+};
+const Layout = ({
+  projectAccountId,
+  profile,
+  routes,
+  children,
+  project,
+  id,
+  tab,
+}) => {
+  const { title } = project;
+
+  if (!projectAccountId) {
+    return <p className="fw-bold text-white">No Account ID</p>;
+  }
+
+  const Nav = styled.div`
+    .nav-pills {
+      background: var(--bg-1, #0b0c14);
+      font-weight: 500;
+      --bs-nav-pills-border-radius: 0;
+      --bs-nav-link-color: var(--font-color, #fff);
+      --bs-nav-pills-link-active-color: var(--font-color, #fff);
+      --bs-nav-pills-link-active-bg: var(--bg-1, #0b0c14);
+      --bs-nav-link-padding-y: 0.75rem;
+      border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+      padding-top: 3px;
+    }
+    .nav-link.active {
+      border-bottom: 2px solid var(--Yellow, #ffaf51);
+    }
+
+    .nav-item:not(:has(> .disabled)):hover {
+      background: rgba(13, 110, 253, 0.15);
+    }
+  `;
+  return (
+    <>
+      <div className="my-3 w-100">
+        <Link
+          style={{ textDecoration: "none" }}
+          to={href({
+            widgetSrc: "${config_account}/widget/Index",
+            params: {
+              page: "projects",
+            },
+          })}
+        >
+          <span className="text-white">
+            <i className="bi bi-chevron-left"></i> Back to Projects
+          </span>
+        </Link>
+      </div>
+      <Metadata
+        title={title}
+        profile={profile}
+        projectAccountId={projectAccountId}
+      />
+      <Nav>
+        <ul className="nav nav-pills nav-fill" id="pills-tab" role="tablist">
+          {routes &&
+            Object.keys(routes).map((it) => (
+              <li className="nav-item" role="presentation" key={it}>
+                <Link
+                  to={href({
+                    widgetSrc: `${config_account}/widget/Index`,
+                    params: {
+                      page: "project",
+                      id: id,
+                      tab: it,
+                    },
+                  })}
+                  key={it}
+                  style={{ textDecoration: "none" }}
+                >
+                  <button
+                    className={`nav-link ${it === tab ? "active" : ""}`}
+                    id={`pills-${id}-tab`}
+                    data-bs-toggle="pill"
+                    data-bs-target={`#pills-${it}`}
+                    type="button"
+                    role="tab"
+                    aria-controls={`pills-${it}`}
+                    aria-selected={i === 0}
+                  >
+                    {it.slice(0, 1).toUpperCase() + it.slice(1)}
+                  </button>
+                </Link>
+              </li>
+            ))}
+        </ul>
+      </Nav>
+      <div
+        className="tab-content"
+        style={{ marginTop: 8 }}
+        id="pills-tabContent"
+      >
+        <div
+          className="tab-pane fade show active"
+          id="pills-overview"
+          role="tabpanel"
+          aria-labelledby="pills-overview-tab"
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+return { Layout };

apps/new/widget/page/project/Main.jsx

@@ -0,0 +1,126 @@
+const { id } = props;
+
+const data = JSON.parse(Social.get(id, "final") ?? {});
+if (!id || !data) {
+  return "Loading...";
+}
+
+const profileData = {
+  name: data.title,
+  description: data.description,
+  linktree: {
+    github: data.github,
+    telegram: data.telegram,
+    twitter: data.twitter,
+    website: data.website,
+  },
+  backgroundImage: data.backgroundImage?.image ?? data.backgroundImage,
+  image: data.profileImage?.image ?? data.profileImage,
+};
+
+const profile = Social.getr(`${data.projectAccountId}/profile`);
+
+const { Layout } = VM.require(
+  "${config_account}/widget/page.project.Layout",
+) || {
+  Layout: () => <></>,
+};
+const config = {
+  theme: {},
+  layout: {
+    src: "${alias_devs}/widget/Layout",
+    props: {
+      variant: "standard",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => (
+      <>
+        <Layout
+          profile={profileData}
+          projectAccountId={data.projectAccountId}
+          page={page}
+          routes={config.router.routes}
+          project={project}
+          id={id}
+          {...props}
+        ></Layout>
+      </>
+    ),
+    Sidebar: () => (
+      <Widget
+        src="${config_account}/widget/components.Sidebar"
+        props={{
+          routes: config.router.routes,
+          currentRoute: "/${config_account}/widget/Index?page=project",
+          ...props,
+        }}
+      />
+    ),
+    Footer: () => <></>,
+  },
+  router: {
+    param: "tab",
+    routes: {
+      overview: {
+        path: "${config_account}/widget/page.project.tabs.Overview",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+        default: "true",
+      },
+      activity: {
+        path: "${config_account}/widget/page.project.tabs.Discussion",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      discussion: {
+        path: "${config_account}/widget/page.project.tabs.Discussion",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      tasks: {
+        path: "${config_account}/widget/page.project.tabs.Task",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      code: {
+        path: "${config_account}/widget/page.project.tabs.Code",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      roadmap: {
+        path: "${config_account}/widget/page.project.tabs.Roadmap",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+    },
+  },
+};
+
+// remove unselected tabs
+if (Array.isArray(data?.tabs)) {
+  Object.keys(config.router.routes).forEach((key) => {
+    if (!data.tabs.includes(key)) {
+      delete config.router.routes[key];
+    }
+  });
+}
+
+return (
+  <div className="mt-3 container-xl">
+    <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />
+  </div>
+);