From c8cafdc379b6d6eac7b39496fca43222e4a26a7c Mon Sep 17 00:00:00 2001 From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> Date: Sun, 3 Dec 2023 12:21:09 -0500 Subject: [PATCH 01/30] feat: init feed --- apps/homepage/widget/Feed.jsx | 41 +++++++++++++++++++++++++++++ src/App.js | 5 ++++ src/components/navigation/Navbar.js | 9 +++++++ src/data/widgets.js | 1 + src/pages/FeedPage.js | 23 ++++++++++++++++ 5 files changed, 79 insertions(+) create mode 100644 apps/homepage/widget/Feed.jsx create mode 100644 src/pages/FeedPage.js diff --git a/apps/homepage/widget/Feed.jsx b/apps/homepage/widget/Feed.jsx new file mode 100644 index 00000000..958df292 --- /dev/null +++ b/apps/homepage/widget/Feed.jsx @@ -0,0 +1,41 @@ +const { Feed } = VM.require("devs.near/widget/Module.Feed"); + +Feed = Feed || (() => <>); // make sure you have this or else it can break + +return ( + ( + } + src="mob.near/widget/MainPage.N.Post" + props={{ accountId: p.accountId, blockHeight: p.blockHeight }} + /> + )} + /> +); diff --git a/src/App.js b/src/App.js index 10030d0d..804eec3b 100644 --- a/src/App.js +++ b/src/App.js @@ -37,6 +37,7 @@ import ViewPage from "./pages/ViewPage"; import JoinPage from "./pages/JoinPage"; import ProposePage from "./pages/ProposePage"; import { Navbar } from "./components/navigation/Navbar"; +import FeedPage from "./pages/FeedPage"; export const refreshAllowanceObj = {}; const documentationHref = "https://docs.near.org/bos"; @@ -185,6 +186,10 @@ function App() { + + + + diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js index 2ff382ae..0e8385df 100644 --- a/src/components/navigation/Navbar.js +++ b/src/components/navigation/Navbar.js @@ -176,6 +176,15 @@ export function Navbar(props) { Editor Docs + + Feed +
{!props.signedIn && ( diff --git a/src/data/widgets.js b/src/data/widgets.js index ab5fcc90..e928fd54 100644 --- a/src/data/widgets.js +++ b/src/data/widgets.js @@ -21,6 +21,7 @@ const TestnetWidgets = { const MainnetWidgets = { image: "mob.near/widget/Image", default: "buildhub.near/widget/home", + feed: "buildhub.near/widget/Feed", viewSource: "mob.near/widget/WidgetSource", widgetMetadataEditor: "buildhub.near/widget/WidgetMetadataEditor", widgetMetadata: "buildhub.near/widget/WidgetMetadata", diff --git a/src/pages/FeedPage.js b/src/pages/FeedPage.js new file mode 100644 index 00000000..27f7b3d7 --- /dev/null +++ b/src/pages/FeedPage.js @@ -0,0 +1,23 @@ +import { Widget } from "near-social-vm"; +import React from "react"; +import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy"; +import { useBosLoaderStore } from "../stores/bos-loader"; + +export default function FeedPage(props) { + useHashRouterLegacy(); + const redirectMapStore = useBosLoaderStore(); + + const src = props.widgets.feed; + + return ( +
+ +
+ ); +} From 73d5ebbac6833eb8b74cca801a2b50cf2682d93d Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Mon, 11 Dec 2023 15:27:23 +0500 Subject: [PATCH 02/30] feat: Feed Design --- apps/homepage/widget/Feed.jsx | 259 +++++++-- .../widget/components/post/post-header.jsx | 160 ++++++ apps/homepage/widget/components/post/post.jsx | 300 +++++++++++ apps/homepage/widget/feed/aside.jsx | 134 +++++ package.json | 1 + src/App.scss | 1 + src/components/navigation/Navbar.js | 39 +- src/pages/FeedPage.js | 2 +- yarn.lock | 505 +++++++++++++++++- 9 files changed, 1324 insertions(+), 77 deletions(-) create mode 100644 apps/homepage/widget/components/post/post-header.jsx create mode 100644 apps/homepage/widget/components/post/post.jsx create mode 100644 apps/homepage/widget/feed/aside.jsx diff --git a/apps/homepage/widget/Feed.jsx b/apps/homepage/widget/Feed.jsx index 958df292..20594489 100644 --- a/apps/homepage/widget/Feed.jsx +++ b/apps/homepage/widget/Feed.jsx @@ -2,40 +2,233 @@ const { Feed } = VM.require("devs.near/widget/Module.Feed"); Feed = Feed || (() => <>); // make sure you have this or else it can break +const profile = + props.profile || Social.get(`${context.accountId}/profile/**`, "final") || {}; + +const StyledPost = styled.div` + margin: 1rem 0; + .post { + border-radius: 16px; + border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2)); + color: #b6b6b8; + padding: 24px !important; + background-color: #0b0c14; + transition: all 300ms; + + &:hover { + background-color: #171929 !important; + .expand-post { + background-image: linear-gradient( + to bottom, + rgb(23, 25, 41, 0), + rgb(23, 25, 41, 1) 25% + ) !important; + } + } + + .post-header { + span, + .text-muted { + color: #fff !important; + } + } + + .buttons { + border-top: 1px solid #3c3d43; + padding: 0.5rem; + } + + .expand-post { + background-image: linear-gradient( + to bottom, + rgb(11, 12, 20, 0), + rgb(11, 12, 20, 1) 25% + ) !important; + } + } + + .dropdown-menu { + background-color: #0b0c14 !important; + color: #fff !important; + + li.dropdown-item { + color: #fff !important; + &:hover { + a { + color: #0b0c14 !important; + } + } + } + + .link-dark, + .dropdown-item { + color: #fff !important; + + &:hover { + color: #0b0c14 !important; + + span { + color: #0b0c14 !important; + } + } + } + } + + textarea { + color: #b6b6b8 !important; + } +`; + +const NewPost = styled.div` + display: flex; + padding: 12px 16px; + align-items: center; + gap: 24px; + align-self: stretch; + + border-radius: 12px; + background: var(--bg-2, #23242b); + + img.logo { + width: 40px; + height: 40px; + + border-radius: 40px; + background: lightgray 50% / cover no-repeat; + } + + textarea { + flex: 1 1 0; + border: 0; + background-color: #23242b; + width: 100%; + } + + button.post { + all: unset; + display: flex; + padding: 10px 20px; + justify-content: center; + align-items: center; + gap: 4px; + + border-radius: 8px; + background: var(--Yellow, #ffaf51); + + color: var(--black-100, #000); + + /* Other/Button_text */ + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + @media screen and (max-width: 768px) { + flex-direction: column; + align-items: start; + } +`; + +const Container = styled.div` + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; + + @media screen and (max-width: 768px) { + display: flex; + flex-direction: column; + } +`; + +const Aside = styled.div` + grid-column: span 1 / span 1; +`; + +const MainContent = styled.div` + grid-column: span 4 / span 4; +`; + +const [currentFeed, setCurrentFeed] = useState("updates"); + +const feed = () => { + if (currentFeed === "updates") + return ( + ( + + } + src="buildhub.near/widget/components.post.post" + props={{ + accountId: p.accountId, + blockHeight: p.blockHeight, + noBorder: true, + }} + /> + + )} + /> + ); + else if (currentFeed === "bugs") return "Bugs Feed"; + else if (currentFeed === "resources") return "Resource Feed"; +}; + return ( - ( + + + + + +