diff --git a/components/doc/DocumentDisplay.tsx b/components/doc/DocumentDisplay.tsx deleted file mode 100644 index e8587db..0000000 --- a/components/doc/DocumentDisplay.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { marked } from "marked"; -import MarkdownStyledLayout from "@/components/doc/MarkdownStyledLayout"; - -export type DocumentDisplayProps = { - title?: string; - content: string; -}; - -const DocumentDisplay = ({ title, content }: DocumentDisplayProps) => { - const getHtmlContent = (markdownContent: string) => ({ - __html: marked(markdownContent), - }); - - return ( - - -

{title || "Untitled Document"}

- - - - ); -}; - -export default DocumentDisplay; diff --git a/components/docs/DocumentDisplay.tsx b/components/docs/DocumentDisplay.tsx new file mode 100644 index 0000000..5c76789 --- /dev/null +++ b/components/docs/DocumentDisplay.tsx @@ -0,0 +1,42 @@ +import { marked } from "marked"; +import MarkdownStyledLayout from "@/components/docs/MarkdownStyledLayout"; +import { getHtmlContent, replaceLinkPlaceholders } from "@/utils/docs/docUtils"; +import { useEffect, useState } from "react"; + +export type DocumentDisplayProps = { + title?: string; + content: string; +}; + +const DocumentDisplay = ({ title, content }: DocumentDisplayProps) => { + const htmlContent = getHtmlContent(content); + const [stateContent, setContent] = useState(""); + useEffect(() => { + if (typeof htmlContent === "string") { + setContent(htmlContent); + } + // ensure it's Promise + if (typeof htmlContent === "object") { + ( + htmlContent as unknown as { + then: (arg0: (content: string) => void) => void; + } + ).then((content) => setContent(content)); + } + }, [htmlContent]); + const contentWithLinks = replaceLinkPlaceholders(stateContent); + return ( + + +

{title || "Untitled Document"}

+ + + + ); +}; + +export default DocumentDisplay; diff --git a/components/doc/DocumentList.tsx b/components/docs/DocumentList.tsx similarity index 96% rename from components/doc/DocumentList.tsx rename to components/docs/DocumentList.tsx index dae6f0c..4192faa 100644 --- a/components/doc/DocumentList.tsx +++ b/components/docs/DocumentList.tsx @@ -10,6 +10,7 @@ export type DocumentListProps = { }; const DocumentList = ({ docs, currentSlug }: DocumentListProps) => { + console.log({ docs, currentSlug }); return (
    diff --git a/components/doc/MarkdownStyledLayout.tsx b/components/docs/MarkdownStyledLayout.tsx similarity index 100% rename from components/doc/MarkdownStyledLayout.tsx rename to components/docs/MarkdownStyledLayout.tsx diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx index 079af12..13bd07e 100644 --- a/pages/docs/[...slug].tsx +++ b/pages/docs/[...slug].tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; -import DocumentList from "@/components/doc/DocumentList"; -import DocumentDisplay from "@/components/doc/DocumentDisplay"; +import DocumentList from "@/components/docs/DocumentList"; +import DocumentDisplay from "@/components/docs/DocumentDisplay"; import { Docs, Doc, getAllDocs, getDocBySlug } from "@/utils/docs/docUtils"; // Ensure these imports are correct import fs from "fs"; import path from "path"; @@ -28,6 +28,11 @@ export default function DocPage({ docs }: { docs: Docs }) { const documentSlug = decodeURIComponent( Array.isArray(slug) ? slug.join("/") : slug || "" ); + console.log({ + documentSlug, + slug, + docs, + }); const selectedDoc = getDocBySlug(docs, documentSlug); useEffect(() => { diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx index 84159f8..c2b2f42 100644 --- a/pages/docs/index.tsx +++ b/pages/docs/index.tsx @@ -1,112 +1,38 @@ -import MarkdownStyledLayout from "@/components/doc/MarkdownStyledLayout"; +import Link from "next/link"; + +export default function DocumentationPage() { + const handleClick = () => { + // Handle the navigation back to the site + window.history.back(); + }; -export default function DocPage() { return ( - -

    - Welcome to Adamant Finance Documentation -

    -

    - Welcome to the central hub for all Adamant Finance technical - documentation. Whether you are a developer, a stakeholder, or just - curious about the inner workings of Adamant Finance, you'll find - detailed documentation on our APIs, implementation procedures, and more. -

    -

    What You Will Find Here

    -

    API Documentation

    -

    - Dive into the specifics of our API, exploring endpoints, responses, and - detailed use cases. Our API documentation is structured to give you - insights into how to integrate and utilize our systems efficiently. -

    - -

    Explore other API resources:

    - -

    - Standard Operating Procedures (SOP) -

    -

    - For those looking to understand our operational frameworks and - procedures: -

    - -

    Miscellaneous Resources

    - -

    Getting Started

    -

    - To get started with our documentation, we recommend reading the{" "} - - Azure API Overview - {" "} - as it provides a comprehensive introduction to the capabilities and - design of our financial APIs. -

    -

    - Feel free to navigate through the sections using the links provided in - each document. Each section is designed to be standalone, allowing you - to jump directly to the information you need. -

    -

    Feedback

    -

    - Your feedback is important to us. If you have comments or questions, - please feel free to reach out to us at{" "} - support@adamantfi.com. We are - committed to continuously improving our documentation to better serve - your needs. -

    -

    Thank you for choosing Adamant Finance. Happy exploring!

    -     +
    +
    +

    + Developer Documentation +

    +

    + Access all the necessary documentation for developing on the AdamantFi + platform. +

    +
    + + + Go to Documentation + +
    +
    +
    ); } diff --git a/pages/docs/index2.tsx b/pages/docs/index2.tsx new file mode 100644 index 0000000..e42565b --- /dev/null +++ b/pages/docs/index2.tsx @@ -0,0 +1,117 @@ +import MarkdownStyledLayout from "@/components/docs/MarkdownStyledLayout"; +import Link from "next/link"; + +export default function DocPage() { + return ( + +

    + Welcome to Adamant Finance Documentation +

    +

    + Welcome to the central hub for all Adamant Finance technical + documentation. Whether you are a developer, a stakeholder, or just + curious about the inner workings of Adamant Finance, you'll find + detailed documentation on our APIs, implementation procedures, and more. +

    +

    What You Will Find Here

    +

    API Documentation

    +

    + Dive into the specifics of our API, exploring endpoints, responses, and + detailed use cases. Our API documentation is structured to give you + insights into how to integrate and utilize our systems efficiently. +

    +
      +
    • + + Azure API Overview + +
      • +
    • + + Endpoint Details + +
      • +
    • + + Response Interfaces + +
      • +
    +

    Explore other API resources:

    +
      +
    • + 24hr Volume +
      • +
    • + + Config Mainnet + +
      • +
    • + Rewards +
      • +
    • + + Secret Tokens + +
      • +
    • + + Sefi Comment + +
      • +
    • + Tokens +
      • +
    +

    + Standard Operating Procedures (SOP) +

    +

    + For those looking to understand our operational frameworks and + procedures: +

    +
      +
    • + + Generating TypeScript Interfaces from JSON + +
      • +
    • + + Setting up JSON-to-TS CLI + +
      • +
    +

    Miscellaneous Resources

    +
      +
    • + SecretSwap Icons +
      • +
    +

    Getting Started

    +

    + To get started with our documentation, we recommend reading the{" "} + + Azure API Overview + {" "} + as it provides a comprehensive introduction to the capabilities and + design of our financial APIs. +

    +

    + Feel free to navigate through the sections using the links provided in + each document. Each section is designed to be standalone, allowing you + to jump directly to the information you need. +

    +

    Feedback

    +

    + Your feedback is important to us. If you have comments or questions, + please feel free to reach out to us at{" "} + support@adamantfi.com. + We are committed to continuously improving our documentation to better + serve your needs. +

    +

    Thank you for choosing Adamant Finance. Happy exploring!

    +     + ); +} diff --git a/utils/docs/docUtils.tsx b/utils/docs/docUtils.tsx index 89f0f60..bd92944 100644 --- a/utils/docs/docUtils.tsx +++ b/utils/docs/docUtils.tsx @@ -1,6 +1,7 @@ import path from "path"; import matter from "gray-matter"; import { marked } from "marked"; +import Link from "next/link"; export type Doc = { title: string; @@ -10,6 +11,27 @@ export type Doc = { export type Docs = Doc[]; +// Set up a custom renderer +const renderer = new marked.Renderer(); + +const originalLinkRenderer = renderer.link.bind(renderer); +renderer.link = (href, title, text) => { + if (href.startsWith("/")) { + // Use a placeholder that's unlikely to occur in normal text + return `@@LINK@@${href}@@${text}@@LINK@@`; + } else { + return originalLinkRenderer(href, title, text); + } +}; +marked.setOptions({ + renderer, +}); + +// Function to convert Markdown content to HTML +export const getHtmlContent = (markdownContent: string) => ({ + __html: marked(markdownContent), +}); + // Recursively read all markdown files export function getAllDocs( fs: typeof import("fs"), @@ -48,8 +70,20 @@ export function getDocBySlug( const slugPath = `/${Array.isArray(slug) ? slug.join("/") : slug}`; return docs.find((doc) => doc.slug === slugPath); } - -// Function to convert Markdown content to HTML -export const getHtmlContent = (markdownContent: string) => ({ - __html: marked(markdownContent), -}); +// Replace placeholders with Link components in your React component +export const replaceLinkPlaceholders = (htmlString: string) => { + const parts = htmlString.split("@@LINK@@"); + const processed = parts.map((part, index) => { + if (index % 2 === 1) { + // Odd indices are link parts + const [href, text] = part.split("@@"); + return ( + + {text} + + ); + } + return part; + }); + return processed; +};