feat: add contributing links to sidebar (magicuidesign#202)

* feat: add contributing links to sidebar

* fix: add documentation template

* fix: lint

* fix: bump node version for gh actions

.github/ISSUE_TEMPLATE/documentation.md

@@ -0,0 +1,19 @@
+---
+name: Documentation
+about: Suggest an edit for the documentation
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Describe the documentation change**
+A clear and concise description of what you'd like to see changed or added in the documentation.
+
+**Current documentation**
+If applicable, provide a link or reference to the current documentation that needs to be updated.
+
+**Proposed change**
+Describe the change you'd like to see in the documentation. Be as specific as possible.
+
+**Additional context**
+Add any other context or screenshots about the documentation request here.

.github/workflows/code-check.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -52,7 +52,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -90,7 +90,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm

app/(docs)/docs/[[...slug]]/page.tsx

@@ -6,7 +6,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Mdx } from "@/components/mdx-components";
 import { DocPager } from "@/components/pager";
 import SidebarCTA from "@/components/sidebar-cta";
-import { DashboardTableOfContents } from "@/components/toc";
 
 import "@/styles/mdx.css";
 
@@ -16,6 +15,9 @@ import { notFound } from "next/navigation";
 import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import { allDocs } from "contentlayer/generated";
 
+import { Contribute } from "@/components/contribute";
+import { TableOfContents } from "@/components/toc";
+
 interface DocPageProps {
   params: {
     slug: string[];
@@ -143,8 +145,9 @@ export default async function DocPage({ params }: DocPageProps) {
         <div className="hidden text-sm xl:block">
           <div className="sticky top-16 -mt-10 pt-4">
             <ScrollArea className="pb-10">
-              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
-                <DashboardTableOfContents toc={toc} />
+              <div className="space-y-4 sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
+                <TableOfContents toc={toc} />
+                <Contribute doc={doc} />
                 <SidebarCTA />
               </div>
             </ScrollArea>

components/contribute.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { Doc } from "contentlayer/generated";
+import { BugIcon, LightbulbIcon, PencilIcon } from "lucide-react";
+
+import { getGitHubIssueUrl } from "@/lib/github";
+
+export function Contribute({ doc }: { doc: Doc }) {
+  const contributeLinks = [
+    {
+      text: "Report an issue",
+      icon: BugIcon,
+      href: getGitHubIssueUrl({
+        owner: "magicuidesign",
+        repo: "magicui",
+        title: `[bug]: ${doc.slug}`,
+        labels: ["bug", "documentation"],
+        template: "bug_report.md",
+      }),
+    },
+    {
+      text: "Request a feature",
+      icon: LightbulbIcon,
+      href: getGitHubIssueUrl({
+        owner: "magicuidesign",
+        repo: "magicui",
+        title: `[feat]: ${doc.slug}`,
+        labels: ["enhancement"],
+        template: "feature_request.md",
+      }),
+    },
+    {
+      text: "Edit this page",
+      icon: PencilIcon,
+      href: getGitHubIssueUrl({
+        owner: "magicuidesign",
+        repo: "magicui",
+        title: `[docs]: ${doc.slug}`,
+        labels: ["documentation"],
+        template: "documentation.md",
+      }),
+    },
+  ];
+
+  return (
+    <div className="space-y-2">
+      <p className="font-medium">Contribute</p>
+      <ul className="m-0 list-none">
+        {contributeLinks.map((link, index) => (
+          <li key={index} className="mt-0 pt-2">
+            <Link
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <link.icon className="mr-2 size-4" />
+              {link.text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

components/mobile-nav.tsx

@@ -59,6 +59,7 @@ export function MobileNav() {
                 {item.items?.map((item) =>
                   !item.disabled && item.href ? (
                     <MobileLink
+                      key={item.href}
                       href={item.href}
                       onOpenChange={setOpen}
                       onClick={() => item.event && posthog.capture(item.event)}

components/sidebar-cta.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import AnimatedShinyText from "@/registry/components/magicui/animated-shiny-text";
-import WordPullUp from "@/registry/components/magicui/word-pull-up";
-
-import "@/styles/mdx.css";
-
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
 import posthog from "posthog-js";
 
+import AnimatedShinyText from "@/registry/components/magicui/animated-shiny-text";
+import WordPullUp from "@/registry/components/magicui/word-pull-up";
+
 export default function SidebarCTA() {
   return (
     <Link

components/toc.tsx

@@ -10,7 +10,7 @@ interface TocProps {
   toc: TableOfContents;
 }
 
-export function DashboardTableOfContents({ toc }: TocProps) {
+export function TableOfContents({ toc }: TocProps) {
   const refinedToc = useMemo(() => {
     if (!toc.items || toc.items.length === 0) {
       return toc;

lib/github.ts

@@ -0,0 +1,43 @@
+interface GitHubIssueUrlParams {
+  owner: string;
+  repo: string;
+  title?: string;
+  body?: string;
+  labels?: string[];
+  template?: string;
+  projects?: string[];
+  assignees?: string[];
+  milestone?: string;
+}
+
+/**
+ * Generates a GitHub issue URL with the provided parameters.
+ * https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue#creating-an-issue-from-a-url-query
+ *
+ * @param params - Parameters for the GitHub issue URL.
+ * @param params.owner - The GitHub repository owner's username.
+ * @param params.repo - The name of the GitHub repository.
+ * @param params.title - Optional title of the issue.
+ * @param params.body - Optional body content of the issue.
+ * @param params.labels - Optional array of labels for the issue.
+ * @param params.template - Optional template file name for the issue.
+ * @param params.projects - Optional array of project names to associate with the issue.
+ * @param params.assignees - Optional array of usernames to assign the issue to.
+ * @param params.milestone - Optional milestone to associate with the issue.
+ * @returns A string containing the generated GitHub issue URL.
+ */
+export function getGitHubIssueUrl(params: GitHubIssueUrlParams): string {
+  const { owner, repo, ...issueParams } = params;
+  const baseUrl = `https://github.com/${owner}/${repo}/issues/new`;
+  const urlParams = new URLSearchParams();
+
+  Object.entries(issueParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => urlParams.append(key, item));
+    } else if (value !== undefined) {
+      urlParams.append(key, value.toString());
+    }
+  });
+
+  return `${baseUrl}?${urlParams.toString()}`;
+}

package.json

@@ -51,7 +51,7 @@
     "crisp-sdk-web": "^1.0.25",
     "critters": "^0.0.24",
     "date-fns": "^2.30.0",
-    "eslint": "9.6.0",
+    "eslint": "8.55.0",
     "eslint-config-next": "14.2.4",
     "framer-motion": "^10.12.16",
     "geist": "^1.2.2",