Reorg with all new components and latest changes to gadget (#82)

* feat: add bridge and dev resources * chore: more fixes and updates * chore: fix fmt * feat: add docs for blueprint devs to run instant seal node * remove auto-insert-keys * chore: format * chore: fix links * chore: move bridge docs * Updates * feat: fix markdown theme rendering in codeblocks * chore: fmt * chore: fixes for shiki * chore: fix * chore: fmt * chore: fix * chore: attempt fix * chore: attempt fix * chore: fix * chore: fmt * feat: add more code links using file reader * chore: fix build * chore: fix * chore: fix paths * chore: fix path * chore: fix * chore: increase static page generation timeout --------- Co-authored-by: 1xstj <[email protected]> Co-authored-by: Trung-Tin Pham <[email protected]>
tangle-network · Nov 7, 2024 · 5f1dac7 · 5f1dac7
1 parent 1317509
commit 5f1dac7
Show file tree

Hide file tree

Showing 60 changed files with 1,077 additions and 562 deletions.
diff --git a/components/BlueprintIntroCards.tsx → components/CardGrid.tsx b/components/BlueprintIntroCards.tsx → components/CardGrid.tsx
@@ -2,28 +2,17 @@ import React from "react";
 import Link from "next/link";
 import { FaChevronRight } from "react-icons/fa";
 
-const BlueprintIntroCards = () => {
-  const cards = [
-    {
-      title: "Tangle's Blueprint Gadget SDK",
-      description:
-        "Learn about the Gadget SDK and how to get started building your own gadgets.",
-      link: "/developers/gadget-sdk",
-    },
-    {
-      title: "Hello World Blueprint",
-      description:
-        "Get started with a simple Hello World example using Tangle Blueprints.",
-      link: "/developers/tangle-avs",
-    },
-    {
-      title: "Build an Eigenlayer AVS",
-      description:
-        "Build an Eigenlayer AVS with the Tangle Blueprint SDK and hook into a variety of EVM compatible utilities for task automation, slashing, and more.",
-      link: "/developers/eigenlayer-avs",
-    },
-  ];
+interface Card {
+  title: string;
+  description: string;
+  link: string;
+}
 
+interface CardGridProps {
+  cards: Card[];
+}
+
+const CardGrid: React.FC<CardGridProps> = ({ cards }) => {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
       {cards.map((card, index) => (
@@ -65,4 +54,4 @@ const BlueprintIntroCards = () => {
   );
 };
 
-export default BlueprintIntroCards;
+export default CardGrid;
diff --git a/components/GithubFileReaderDisplay.tsx b/components/GithubFileReaderDisplay.tsx
@@ -1,121 +1,80 @@
 import React, { useEffect, useState } from "react";
 import { FaGithub, FaLink, FaSpinner } from "react-icons/fa";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  nightOwl,
-  oneLight,
-} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { useTheme } from "next-themes";
-
-let lightTheme = oneLight;
-let darkTheme = nightOwl;
+import {
+  dedentCode,
+  getLanguage,
+  getShikiHighlighter,
+} from "@/components/shiki";
 
 interface GithubFileReaderDisplayProps {
   url: string;
   fromLine?: number;
   toLine?: number;
   title?: string;
+  dedent?: boolean;
 }
 
 const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
   url,
   fromLine = 1,
   toLine,
   title,
+  dedent = true,
 }) => {
   const [content, setContent] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const { theme } = useTheme();
-
-  const getLanguage = (url: string) => {
-    const extension = url.split(".").pop()?.toLowerCase();
-    switch (extension) {
-      case "rs":
-        return "rust";
-      case "ts":
-      case "tsx":
-        return "typescript";
-      case "js":
-      case "jsx":
-        return "javascript";
-      case "sol":
-        return "solidity";
-      case "md":
-      case "mdx":
-        return "markdown";
-      case "toml":
-        return "toml";
-      case "yaml":
-      case "yml":
-        return "yaml";
-      case "json":
-        return "json";
-      case "sh":
-        return "bash";
-      case "py":
-        return "python";
-      case "go":
-        return "go";
-      case "cpp":
-      case "c++":
-      case "cc":
-        return "cpp";
-      case "c":
-        return "c";
-      case "java":
-        return "java";
-      case "php":
-        return "php";
-      case "rb":
-        return "ruby";
-      case "swift":
-        return "swift";
-      case "kt":
-        return "kotlin";
-      case "cs":
-        return "csharp";
-      case "html":
-        return "html";
-      case "css":
-        return "css";
-      case "scss":
-        return "scss";
-      case "sql":
-        return "sql";
-      case "graphql":
-      case "gql":
-        return "graphql";
-      default:
-        return "text";
-    }
-  };
+  const { theme: currentTheme } = useTheme();
 
   useEffect(() => {
-    const fetchGithubContent = async () => {
+    const fetchAndHighlightContent = async () => {
       try {
         const rawUrl = url
           .replace("github.com", "raw.githubusercontent.com")
           .replace("/blob/", "/");
 
-        const response = await fetch(rawUrl);
+        const [response, highlighter] = await Promise.all([
+          fetch(rawUrl),
+          getShikiHighlighter(),
+        ]);
+
         if (!response.ok) {
           throw new Error("Failed to fetch file content");
         }
 
         const text = await response.text();
         const lines = text.split("\n");
         const selectedLines = lines.slice(fromLine - 1, toLine || lines.length);
-        setContent(selectedLines.join("\n"));
+        let codeContent = selectedLines.join("\n");
+
+        // Apply dedentation if enabled
+        if (dedent) {
+          codeContent = dedentCode(codeContent);
+        }
+
+        // Set the theme based on current theme
+        const theme = currentTheme === "dark" ? "github-dark" : "github-light";
+
+        // Highlight the code with the current theme and line numbers
+        const highlightedCode = highlighter.codeToHtml(codeContent, {
+          lang: getLanguage(url),
+          theme: theme,
+        });
+
+        // Wrap the highlighted code with a div that sets the starting line number
+        const wrappedCode = `<div style="--start-line: ${fromLine}">${highlightedCode}</div>`;
+        setContent(wrappedCode);
         setLoading(false);
       } catch (err) {
+        console.error("Highlighting error:", err);
         setError(err instanceof Error ? err.message : "An error occurred");
         setLoading(false);
       }
     };
 
-    fetchGithubContent();
-  }, [url, fromLine, toLine]);
+    fetchAndHighlightContent();
+  }, [url, fromLine, toLine, currentTheme, dedent]);
 
   if (loading) {
     return (
@@ -158,23 +117,12 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
         </div>
       </div>
 
-      <SyntaxHighlighter
-        language={getLanguage(url)}
-        style={theme === "light" ? lightTheme : darkTheme}
-        customStyle={{
-          margin: 0,
-          padding: "1rem",
-          background: "transparent",
-          fontSize: "0.875rem",
-          lineHeight: "1.5",
-        }}
-        showLineNumbers
-        startingLineNumber={fromLine}
-        wrapLines
-        wrapLongLines
-      >
-        {content}
-      </SyntaxHighlighter>
+      <div className="nextra-code-block nx-relative">
+        <div
+          className="nx-bg-primary-700/5 nx-overflow-x-auto nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em]"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </div>
     </div>
   );
 };

diff --git a/components/LandingPage.tsx b/components/LandingPage.tsx
@@ -46,7 +46,7 @@ const resourcesCards = [
     icon: <FaWallet />,
     title: "TNT, Wallets and More",
     description: "Your source for Wallets, apps, staking and more.",
-    link: "../resources",
+    link: "/resources",
   },
   {
     icon: <RiToolsLine />,

diff --git a/components/NonuniformTableOfContentCards.tsx b/components/NonuniformTableOfContentCards.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import Link from "next/link";
+import { FaChevronRight } from "react-icons/fa";
+
+interface TOCItem {
+  title: string;
+  href: string;
+  subItems?: {
+    title: string;
+    description?: string;
+    href?: string;
+  }[];
+}
+
+interface NonuniformTableOfContentCardsProps {
+  items: TOCItem[];
+}
+
+const NonuniformTableOfContentCards: React.FC<
+  NonuniformTableOfContentCardsProps
+> = ({ items }) => {
+  return (
+    <div className="columns-1 md:columns-2 lg:columns-3 gap-4 my-6">
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="relative p-5 border border-gray-200 dark:border-gray-800 rounded-lg 
+                   hover:border-purple-500 dark:hover:border-purple-400
+                   transition-all duration-200 hover:shadow-lg
+                   bg-gradient-to-br from-white to-gray-50
+                   dark:from-gray-900 dark:to-gray-800
+                   break-inside-avoid-column mb-4"
+        >
+          <Link href={item.href} className="group block">
+            <div className="flex justify-between items-start mb-3">
+              <h3
+                className="text-lg font-semibold text-gray-900 dark:text-gray-100 
+                           group-hover:text-purple-600 dark:group-hover:text-purple-400
+                           transition-colors duration-200"
+              >
+                {item.title}
+              </h3>
+              <FaChevronRight
+                className="text-gray-400 group-hover:text-purple-500 
+                                       transform group-hover:translate-x-1 transition-all"
+              />
+            </div>
+          </Link>
+
+          {item.subItems && (
+            <ul className="space-y-2">
+              {item.subItems.map((subItem, subIndex) => (
+                <li key={subIndex}>
+                  <Link
+                    href={subItem.href || item.href}
+                    className="group flex items-start"
+                  >
+                    <div
+                      className="inline-flex items-start space-x-2 px-2 py-1 rounded-md
+                                  hover:bg-purple-50 dark:hover:bg-purple-900/20
+                                  transition-colors duration-200"
+                    >
+                      <span
+                        className="mt-1.5 w-1.5 h-1.5 rounded-full bg-purple-400 
+                                     group-hover:bg-purple-500 flex-shrink-0"
+                      />
+                      <div
+                        className="text-sm text-gray-600 dark:text-gray-400 
+                                    group-hover:text-gray-900 dark:group-hover:text-gray-200"
+                      >
+                        <span className="font-medium">{subItem.title}</span>
+                        {subItem.description && (
+                          <span className="block text-xs text-gray-500 dark:text-gray-500 mt-0.5">
+                            {subItem.description}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <div
+            className="absolute inset-0 rounded-lg bg-purple-500/[0.03] 
+                         opacity-0 group-hover:opacity-100 transition-opacity 
+                         pointer-events-none"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NonuniformTableOfContentCards;
diff --git a/components/StakingIntroCards.tsx b/components/StakingIntroCards.tsx