OnlineCommunities and GetInvolved page (#367)

* OnlineCommunities and GetInvolved page * Fix build failed * Update styles
darwinia-network · Jan 9, 2024 · b3e5333 · b3e5333
1 parent e182504
commit b3e5333
Show file tree

Hide file tree

Showing 9 changed files with 442 additions and 4 deletions.
diff --git 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
@@ -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<HTMLElement | null>(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 (
+    <div className="hidden lg:flex flex-col gap-medium p-5 w-80 bg-table-bg h-fit sticky top-20">
+      <h3 className="text-bold text-white text-sm font-bold">On This Page</h3>
+      <div className="h-[1px] bg-white/50 w-full" />
+      {data.map(({ h1, sub }) => (
+        <Fragment key={h1}>
+          <Link to={`#${h1}`} className="text-sm font-light font-[JetBrainsMono-Light] text-gray hover:underline">
+            {h1}
+          </Link>
+          {sub?.map(({ h2 }) => (
+            <Link
+              key={h2}
+              to={`#${h2}`}
+              className="text-sm font-light font-[JetBrainsMono-Light] text-gray hover:underline indent-4"
+            >
+              {h2}
+            </Link>
+          ))}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/src/data/getInvolved.tsx 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
@@ -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
@@ -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",
+          },
+        ],
+      },
+    ],
+  };
+}