diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 3f29db4d..e64dd8c3 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -15,6 +15,14 @@ html { @apply bg-black; } +.text-light { + font-family: 'JetBrainsMono-Light'; +} + +.text-bold { + font-family: 'JetBrainsMono-Bold'; +} + /*components styles*/ /* BUG FIX ALERT 🐛 : If you use @apply, always make sure that your styles end up with the "none brackets" styles. diff --git a/src/components/PageTable/index.tsx b/src/components/PageTable/index.tsx new file mode 100644 index 00000000..a530263c --- /dev/null +++ b/src/components/PageTable/index.tsx @@ -0,0 +1,47 @@ +import { Fragment, useEffect, useRef } from "react"; +import { Link, useLocation } from "react-router-dom"; + +interface Props { + data: { h1: string; sub?: { h2: string }[] }[]; +} + +export default function PageTable({ data }: Props) { + const { hash } = useLocation(); + const elementRef = useRef(null); + + useEffect(() => { + if (hash.length > 1) { + elementRef.current = document.getElementById(decodeURIComponent(hash.slice(1))); + } + + if (elementRef.current) { + setTimeout(() => { + elementRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); + elementRef.current = null; + }, 100); + } + }, [hash]); + + return ( +
+

On This Page

+
+ {data.map(({ h1, sub }) => ( + + + {h1} + + {sub?.map(({ h2 }) => ( + + {h2} + + ))} + + ))} +
+ ); +} diff --git a/src/data/getInvolved.tsx b/src/data/getInvolved.tsx new file mode 100644 index 00000000..66017b1d --- /dev/null +++ b/src/data/getInvolved.tsx @@ -0,0 +1,115 @@ +interface Section { + icon: string; + items?: (string | { label: string; path: string; isExternal?: boolean })[][]; + description?: string; + content?: { link: { label: string; path: string; isExternal?: boolean }; text?: string }[]; + sub?: ({ h2: string } & Section)[]; +} + +interface GetInvolvedData { + title: string; + summary: string; + sections: ({ + h1: string; + } & Section)[]; +} + +export default function useGetInvolvedData(): GetInvolvedData { + return { + title: "Get involved", + summary: + "The Darwinia community includes people of many different backgrounds and skillsets. Whether you're a developer, a UI designer, or a researcher, there are ways to get involved. Here's a list of suggestions that might help you get started.", + sections: [ + { + h1: "Developers", + icon: "🧑‍💻", + items: [ + [ + "Join the ", + { label: "Darwinia Technical Discord", path: "https://discord.com/invite/fZDWmJKWCw", isExternal: true }, + ], + [ + "Learn about and try Darwinia at ", + { label: "https://docs.darwinia.network/", path: "https://docs.darwinia.network/", isExternal: true }, + ], + [ + { + label: "Apply for a Grant Program, tooling", + path: "https://github.com/darwinia-network/collaboration/blob/master/grant/README.md#darwinia-foundation-grants-program", + isExternal: true, + }, + ", and infrastructure areas where the Darwinia Ecosystem is actively seeking grant applications", + ], + [ + { + label: "Run collator node", + path: "https://docs.darwinia.network/how-to-become-a-collator-af6bce360d5b49ddacc56e4587510210", + isExternal: true, + }, + " in helping to further decentralize Darwinia", + ], + ], + }, + { + h1: "Non-technical Skillsets", + icon: "🔊", + description: + "If you're not a developer, it can be hard to know where to start in Darwinia. Here are a few suggestions, along with resources for specific professional backgrounds.", + sub: [ + { + h2: "Content Creator", + icon: "⌨️", + description: + "Educate the community and the broader public about Darwinia through writing informative and insightful content in videos, blogs, graphic designs, podcasts, or any other artistic production form.", + }, + { + h2: "Meetup Organizer", + icon: "🤝", + description: + "Host online or offline Darwinia meetups/ technical workshops/hackathons, connect with local blockchain enthusiasts to educate them on what Darwina is, and discover the potential users/partners through discussion and communication.", + }, + { + h2: "Translator", + icon: "🌎", + description: + "Translate and share Darwinia-related content in different languages and expand Darwinia's ecological application to non-English speaking communities.", + }, + { + h2: "Stake your RING", + icon: "🧑‍💼", + description: "By staking your RING you can earn rewards whilst helping to secure the Darwinia.", + content: [ + { + link: { label: "Staking Discord", path: "https://discord.gg/hp9fzFNap8", isExternal: true }, + text: "welcome to all interested in staking on Darwinia", + }, + { + link: { + label: "Staking guide", + path: "https://docs.darwinia.network/staking-guide-d7387bfc4d3f4604860651f268ed00ba", + isExternal: true, + }, + }, + ], + }, + ], + }, + { + h1: "Join A DAO", + icon: "🗳️", + description: + "These DAOs offer opportunities for you to find groups that you identify with, find collaborators, and grow your impact on the Darwinia community.", + content: [ + { + link: { label: "DCDAO", path: "https://twitter.com/Official_DCDAO", isExternal: true }, + text: "community self-organized workgroup that aims to contribute to the growth and development of the Darwinia community", + }, + { + link: { label: "SubAPI DAO", path: "https://github.com/subapidao", isExternal: true }, + text: "targeting to be a SubDAO of Darwinia, working on Oracle and API integration", + }, + ], + }, + ], + }; +} diff --git a/src/data/menu.tsx b/src/data/menu.tsx index f0e2d8d4..3c33e3d5 100644 --- a/src/data/menu.tsx +++ b/src/data/menu.tsx @@ -85,13 +85,11 @@ const getMenu = (_t: TFunction): Menu[] => { navigations: [ { label: "Online Communities", - path: "https://www.notion.so/darwinia/Online-communities-fe79f25c50e7412189fff9583c3df5d2", - external: true, + path: "/online-communities", }, { label: "Get Involved", - path: "https://www.notion.so/darwinia/Get-involved-664339c01069475da197718e8003544c", - external: true, + path: "/get-involved", }, { label: "Grants", diff --git a/src/data/onlineCommunities.ts b/src/data/onlineCommunities.ts new file mode 100644 index 00000000..5bf577c2 --- /dev/null +++ b/src/data/onlineCommunities.ts @@ -0,0 +1,99 @@ +interface OnlineCommunitiesData { + title: string; + summary: string; + sections: { h1: string; content: { link: { label: string; path: string; isExternal?: boolean }; text: string }[] }[]; +} + +export function useOnlineCommunitiesData(): OnlineCommunitiesData { + return { + title: "Online communities", + summary: + "Darwinia enthusiasts gather in these online forums to share news, talk about recent developments, debate technical issues, and imagine the future.", + sections: [ + { + h1: "Forums", + content: [ + { + link: { + label: "Darwinia GitHub", + path: "https://github.com/orgs/darwinia-network/discussions", + isExternal: true, + }, + text: "all things Darwinia", + }, + { + link: { label: "DIP GitHub", path: "https://github.com/darwinia-network/DIPs", isExternal: true }, + text: "focused on Darwinia improvement proposals", + }, + { + link: { label: "Darwinia SubSquare", path: "https://darwinia2.subsquare.io/", isExternal: true }, + text: "discussion for Darwinia on-chain proposal", + }, + { + link: { label: "DCDAO GitHub", path: "https://github.com/orgs/dcdao/discussions", isExternal: true }, + text: "focused on Darwinia community development", + }, + ], + }, + { + h1: "Chat Rooms", + content: [ + { + link: { label: "Darwinia Discord", path: "https://discord.gg/jbRk7znn4Q", isExternal: true }, + text: "all things Darwinia", + }, + { + link: { label: "Staking Discord", path: "https://discord.gg/hp9fzFNap8", isExternal: true }, + text: "welcome to all interested in staking on Darwinia", + }, + { + link: { label: "Collator Discord", path: "https://discord.gg/5fxkpeNMgH", isExternal: true }, + text: "discussion and help for Darwinia collators", + }, + { + link: { label: "Governance Discord", path: "https://discord.gg/XYTB92UwKW", isExternal: true }, + text: "discussion for Darwinia on-chain proposals", + }, + { + link: { label: "Technical Discord", path: "https://discord.gg/fZDWmJKWCw", isExternal: true }, + text: "discussion and help for Darwinia developers", + }, + { + link: { label: "Technical Telegram", path: "https://t.me/DarwiniaDev", isExternal: true }, + text: "discussion and help for Darwinia developers", + }, + { + link: { label: "Darwinia Telegram", path: "https://t.me/DarwiniaNetwork", isExternal: true }, + text: "all things Darwinia", + }, + ], + }, + { + h1: "Twitter & Blog", + content: [ + { + link: { label: "Twitter", path: "https://twitter.com/DarwiniaNetwork", isExternal: true }, + text: "keep up to date with the latest from the Darwinia", + }, + { + link: { label: "Blog", path: "https://medium.com/darwinianetwork", isExternal: true }, + text: "discover the latest news, deep dives, tutorials, and more from the Darwinia", + }, + ], + }, + { + h1: "Decentralized Autonomous Organizations (DAOs)", + content: [ + { + link: { label: "DCDAO", path: "https://twitter.com/Official_DCDAO", isExternal: true }, + text: "community self-organized workgroup that aims to contribute to the growth and development of the Darwinia community", + }, + { + link: { label: "SubAPI DAO", path: "https://github.com/subapidao", isExternal: true }, + text: "targeting to be a SubDAO of Darwinia, working on Oracle and API integration", + }, + ], + }, + ], + }; +} diff --git a/src/pages/GetInvolved/index.tsx b/src/pages/GetInvolved/index.tsx new file mode 100644 index 00000000..6d34250f --- /dev/null +++ b/src/pages/GetInvolved/index.tsx @@ -0,0 +1,114 @@ +import { Fragment, PropsWithChildren } from "react"; +import Footer from "../../components/Footer"; +import PageTable from "../../components/PageTable"; +import { useFooterData } from "../../data/footer"; +import useGetInvolvedData from "../../data/getInvolved"; +import { Link } from "react-router-dom"; + +export default function GetInvolvedPage() { + const { title, summary, sections } = useGetInvolvedData(); + const { footerData } = useFooterData(); + + return ( +
+
+
+ Home/ Community +

{title}

+
+

{summary}

+ + {sections.map((section) => ( + +

+ {section.icon} {section.h1} +

+ {section.description ? {section.description} : null} + {section.items?.length ? : null} + {section.content?.length ? : null} + {section.sub?.map((sub) => ( + +

+ {sub.icon} {sub.h2} +

+ {sub.description ? {sub.description} : null} + {sub.items?.length ? : null} + {sub.content?.length ? : null} + + ))} + + ))} +
+ +
+
+
+ ); +} + +function H1({ id, children }: PropsWithChildren<{ id: string }>) { + return ( +

+ {children} +

+ ); +} + +function H2({ id, children }: PropsWithChildren<{ id: string }>) { + return ( +
+ {children} +
+ ); +} + +function Description({ children }: PropsWithChildren) { + return

{children}

; +} + +function Items({ data }: { data: (string | { label: string; path: string; isExternal?: boolean })[][] }) { + return ( +
    + {data.map((item, index) => ( +
  • + {item.map((i, k) => ( + + {typeof i === "string" ? ( + {i} + ) : i.isExternal ? ( + + {i.label} + + ) : ( + + {i.label} + + )} + + ))} +
    • + ))} +
+ ); +} + +function Content({ data }: { data: { link: { label: string; path: string; isExternal?: boolean }; text?: string }[] }) { + return ( +
    + {data.map(({ link, text }, index) => ( +
  • + {link.isExternal ? ( + + {link.label} + + ) : ( + + {link.label} + + )} + {text ? - {text} : null} +
    • + ))} +
+ ); +} diff --git a/src/pages/OnlineCommunities/index.tsx b/src/pages/OnlineCommunities/index.tsx new file mode 100644 index 00000000..f02f7f5c --- /dev/null +++ b/src/pages/OnlineCommunities/index.tsx @@ -0,0 +1,48 @@ +import { Link } from "react-router-dom"; +import Footer from "../../components/Footer"; +import { useFooterData } from "../../data/footer"; +import { useOnlineCommunitiesData } from "../../data/onlineCommunities"; +import { Fragment } from "react"; +import PageTable from "../../components/PageTable"; + +export default function OnlineCommunitiesPage() { + const { title, summary, sections } = useOnlineCommunitiesData(); + const { footerData } = useFooterData(); + + return ( +
+
+
+ Home/ Community +

{title}

+
+

{summary}

+ + {sections.map((section) => ( + +

+ {section.h1} +

+ {section.content.map(({ link, text }, index) => ( +
+ {link.isExternal ? ( + + {link.label} + + ) : ( + + {link.label} + + )} + - {text} +
+ ))} + + ))} +
+ +
+
+ ); +} diff --git a/src/routes/routesList.ts b/src/routes/routesList.ts index 7b8f6005..4059cdda 100644 --- a/src/routes/routesList.ts +++ b/src/routes/routesList.ts @@ -38,6 +38,14 @@ const routesList = [ path: "/papers/:paperId", component: lazy(() => import("../pages/PaperSummary")), }, + { + path: "/online-communities", + component: lazy(() => import("../pages/OnlineCommunities")), + }, + { + path: "/get-involved", + component: lazy(() => import("../pages/GetInvolved")), + }, /* { path: "/contact-us", component: lazy(() => import("../pages/Contact")), diff --git a/tailwind.config.js b/tailwind.config.js index de2c5dec..6623a458 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,7 @@ module.exports = { gray: "#C6C6C6", white: "#FFFFFF", halfWhite: "rgba(255, 255, 255, 0.5)", + "table-bg": "#222020", }, spacing: { small: "0.3125rem", // 5px