Feat: Bounty layout

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -14,7 +14,7 @@
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-hover-card": "^1.0.6",
-    "@types/node": "20.3.1",
+    "@types/node": "^20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
@@ -23,10 +23,12 @@
     "contentlayer": "^0.3.3",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",
+    "fs": "^0.0.1-security",
     "lucide-react": "^0.252.0",
     "matter": "^0.2.0",
     "next": "13.4.7",
     "next-mdx-remote": "^4.4.1",
+    "path": "^0.12.7",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/app/bounties/[slug]/page.tsx

@@ -42,19 +42,19 @@ async function getPost(filepath: string): Promise<Post<Frontmatter>> {
 export default async function Bounty({ params }: IBountyProps) {
   // Get the serialized content and frontmatter
   const { serialized, frontmatter } = await getPost(
-    `./src/content/${params.slug}.mdx`
+    `./src/app/content/bounties/${params.slug}.mdx`
   );
 
   return (
-    <div className="text-zinc-400 p-16">
+    <div className="text-zinc-400 p-16 border-r border-zinc-800">
       <BountiesBreadcrumb />
 
-      <div className="px-32 py-16">
+      <div className="py-16 max-w-4xl">
         <h1 className="text-zinc-300 font-bold text-4xl">
           {frontmatter.title}
         </h1>
 
-        <span className="text-zinc-400 text-lg mt-8">
+        <span className="text-zinc-400 text-md mt-8">
           Published at {frontmatter.date}
         </span>
 

src/app/bounties/components/sidebar.tsx

@@ -1,12 +1,4 @@
 "use client";
-
-import {
-  Box,
-  ChevronDown,
-  ChevronRight,
-  ChevronRightIcon,
-  FileIcon,
-} from "lucide-react";
 import { useState } from "react";
 import SidebarItem from "./sidebarItem";
 
@@ -26,14 +18,8 @@ const defaultItems: ISidebarItem[] = [
     isOpen: false,
     subItems: [
       {
-        title: "Translation",
+        title: "Dynamic Sidebar",
         isOpen: false,
-        subItems: [
-          {
-            title: "i18n",
-            isOpen: false,
-          },
-        ],
       },
     ],
   },

src/app/bounties/components/sidebarItem.tsx

@@ -1,5 +1,6 @@
 import { Box, ChevronDown, ChevronRight } from "lucide-react";
 import { ISidebarItem } from "../sidebarItem";
+import Link from "next/link";
 
 interface ISidebarItemProps {
   item: ISidebarItem;
@@ -43,6 +44,11 @@ export default function SidebarItem({
     setSidebarItems(newSidebarItems);
   };
 
+  const parseFileName = (name: string) => {
+    if (name.replaceAll(" ", "-").toLowerCase() === "home") return "";
+    return name.replaceAll(" ", "-").toLowerCase();
+  };
+
   return (
     <div className="flex flex-col items-start">
       {item.subItems ? (
@@ -56,7 +62,7 @@ export default function SidebarItem({
                 <ChevronDown className="h-6 w-6" /> {item.title}
               </div>
 
-              <div className="pl-3">
+              <div className="pl-3 mt-2">
                 {item.subItems?.map((subItem, subIndex) => (
                   <SidebarItem
                     setSidebarItems={setSidebarItems}
@@ -77,12 +83,13 @@ export default function SidebarItem({
           )}
         </>
       ) : (
-        <div
+        <Link
           className="flex items-center hover:text-zinc-600 cursor-pointer gap-x-2"
           onClick={() => handleOpenToggle(item)}
+          href={`/bounties/${parseFileName(item.title)}`}
         >
           <Box className="h-4 w-4" /> {item.title}
-        </div>
+        </Link>
       )}
     </div>
   );

src/app/bounties/layout.tsx

@@ -9,18 +9,26 @@ export default function BountiesLayout({ children }: IBountiesLayout) {
   return (
     <>
       <div className="sm:hidden block">
-        <BountiesHeader />
+        <div className="sticky top-0 z-10">
+          <BountiesHeader />
+        </div>
 
-        <div className="flex justify-between align-top">{children}</div>
+        <div className="flex justify-between align-top overflow-y-scroll mt-16 h-screen">
+          {children}
+        </div>
       </div>
 
       <div className="hidden sm:block">
-        <BountiesHeader />
+        <div className="fixed w-full z-10">
+          <BountiesHeader />
+        </div>
 
         <div className="flex justify-between align-top">
-          {children}
+          <div className="relative mt-16 overflow-y-hidden">{children}</div>
 
-          <BountiesSidebar />
+          <div className="fixed top-0 right-0 mt-24">
+            <BountiesSidebar />
+          </div>
         </div>
       </div>
     </>

src/app/bounties/page.tsx

@@ -71,9 +71,12 @@ export default function Bounties() {
           </p>
 
           <div className="flex items-center gap-x-8">
-            <div className="flex items-center mt-4 text-sigPrimary gap-x-2 font-medium">
+            <a
+              href="https://discord.gg/k7tKxaHZBu"
+              className="flex items-center mt-4 text-sigPrimary gap-x-2 font-medium"
+            >
               <BsDiscord className="h-6 w-6" /> Sig Community
-            </div>
+            </a>
 
             <a
               href="https://twitter.com/sigcoding"

src/app/components/bountiesBreadcrumb/index.tsx

@@ -1,32 +1,36 @@
 "use client";
 
 import { ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 export default function BountiesBreadcrumb() {
   const pathname = usePathname();
   const routes = pathname.split("/");
 
-  const capitalize = (str: string) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  };
-
   return (
-    <div className="flex items-center gap-x-2">
+    <div className="flex items-center">
       {routes.map((route, index) => (
         <>
           {route === "" ? null : (
             <>
               {routes.indexOf(route) === routes.length - 1 ? (
-                <span key={index} className="flex text-zinc-500">
-                  {capitalize(route.replaceAll("-", " "))}
-                </span>
+                <Link
+                  href={`/bounties/${route}`}
+                  key={index}
+                  className="flex text-zinc-400 capitalize hover:text-zinc-300"
+                >
+                  {route.replaceAll("-", " ")}
+                </Link>
               ) : (
-                <div className="flex items-center">
-                  <span key={index} className="flex text-zinc-500">
-                    {capitalize(route)}
-                  </span>
-                  <ChevronRightIcon className="h-6 w-6 text-zinc-400" />
+                <div className="flex items-center capitalize" key={index}>
+                  <Link
+                    href={`/bounties`}
+                    className="flex text-zinc-500 hover:text-zinc-300"
+                  >
+                    {route}
+                  </Link>
+                  <ChevronRightIcon className="h-6 w-6 text-zinc-400 " />
                 </div>
               )}
             </>

src/app/content/bounties/dynamic-sidebar.mdx

@@ -0,0 +1,30 @@
+---
+title: Dynamic Sidebar
+date: "28/06/2023"
+---
+
+# Bounty - Dynamic Sidebar
+
+## Take a look at our open-source repo at: <span>[Github](https://github.com/igorfelipeduca/sig-bounties)</span>
+
+As you can see, our sidebar currently is not dynamic. Our routes are set in a variable called `defaultItems` inside the file `src/app/bounties/components/sidebar.tsx`. We want to make it dynamic, so we can add new routes without having to change the code.
+
+## **TODO**
+[ ] Read the files, folders and subfolders inside of the `src/app/content/bounties` directory and render all of the found directories as items in the sidebar.
+
+[ ] Turn the readed directories into routes in the sidebar.
+
+## **How does it need to look?**
+
+<img src="https://i.ibb.co/XjYW5Rg/sidebar-preview.png" />
+
+You need to make sure that the sidebar is dynamic, so if we add a new folder inside of the `src/app/content/bounties` directory, it will automatically be added to the sidebar.
+Also, while there is a subfolder inside of the folder, it needs to have a arrow that when clicked, will open the subfolder and show the subfolder's content.
+
+## **How much do we pay?**
+
+This is quite a simple bounty and I don't think it will take that much time to complete. So we will pay **R$50,00** for this bounty.
+
+## In case of troubleshooting or questions
+You can send me a DM on Discord: `@ducaswtf` or in my Twitter that is also `@ducaswtf`
+If you want other people to help you, come and enter in our Community Discord: [Sig Community](https://discord.gg/k7tKxaHZBu)

src/app/mdx-content.tsx

@@ -10,12 +10,27 @@ type MdxContentProps = {
 const MdxComponents = {
   /** h1 colored in yellow */
   h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
-    <h1 className="text-xl font-medium" {...props} />
+    <h1 className="text-2xl font-medium py-2" {...props} />
+  ),
+  h2: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h2 className="text-xl font-medium py-2" {...props} />
   ),
   /** Card component */
   Card: (props: React.HTMLProps<HTMLDivElement>) => (
     <div className="p-8 rounded-lg bg-zinc-800 text-zinc-300" {...props} />
   ),
+  a: (props: React.HTMLProps<HTMLAnchorElement>) => (
+    <a href={props.href} {...props} className="text-sigPrimary underline" />
+  ),
+  p: (props: React.HTMLProps<HTMLParagraphElement>) => (
+    <p {...props} className="text-lg py-4" />
+  ),
+  code: (props: any) => (
+    <code
+      {...props}
+      className="text-sm mx-1 bg-zinc-600/30 p-1 rounded-sm text-zinc-200 font-medium"
+    />
+  ),
 };
 
 export function MdxContent({ source }: MdxContentProps) {

yarn.lock

@@ -1032,12 +1032,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/[email protected]":
-  version "20.3.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
-  integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
-
-"@types/node@>=12.12.47", "@types/node@>=13.7.0":
+"@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^20.3.2":
   version "20.3.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.2.tgz#fa6a90f2600e052a03c18b8cb3fd83dd4e599898"
   integrity sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==
@@ -2242,6 +2237,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fs@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
+  integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -2684,6 +2684,11 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+[email protected]:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
+
 [email protected]:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
@@ -4066,6 +4071,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 periscopic@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.1.0.tgz#7e9037bf51c5855bd33b48928828db4afa79d97a"
@@ -4162,6 +4175,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+process@^0.11.1:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -5050,6 +5068,13 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"