diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx index 1018338..7c60086 100644 --- a/app/[...slug]/page.tsx +++ b/app/[...slug]/page.tsx @@ -6,6 +6,7 @@ import {getMDXComponents} from '@/mdx-components'; import { AutoTypeTable, type AutoTypeTableProps } from 'fumadocs-typescript/ui'; import type {ComponentProps, FC} from 'react'; import {createGenerator} from "fumadocs-typescript"; +import FunctionCard from "@/src/components/FunctionCard"; export default async function Page(props: { params: Promise<{ slug?: string[] }>; @@ -26,6 +27,9 @@ export default async function Page(props: { ( + + ), AutoTypeTable: (props: Partial) => ( ), diff --git a/package-lock.json b/package-lock.json index 7fccec8..608c8bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,13 @@ "version": "0.0.0", "hasInstallScript": true, "dependencies": { - "@tabler/icons-react": "^3.41.0", + "@code0-tech/sagittarius-graphql-types": "^0.0.0-experimental-2414125487-fbc8a5ec8a2dd07cc76957d4315281c246e98d57", + "@tabler/icons-react": "^3.40.0", "fumadocs-core": "^16.7.7", "fumadocs-mdx": "^14.2.11", "fumadocs-typescript": "^5.2.0", "fumadocs-ui": "^16.7.7", + "js-md5": "^0.8.3", "next": "16.1.7", "react": "^19.1.0", "react-dom": "^19.1.0" @@ -42,6 +44,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@code0-tech/sagittarius-graphql-types": { + "version": "0.0.0-experimental-2414125487-fbc8a5ec8a2dd07cc76957d4315281c246e98d57", + "resolved": "https://registry.npmjs.org/@code0-tech/sagittarius-graphql-types/-/sagittarius-graphql-types-0.0.0-experimental-2414125487-fbc8a5ec8a2dd07cc76957d4315281c246e98d57.tgz", + "integrity": "sha512-IRi0I6PLniH9ONZicXaMKaYEhdJn1cIDMrpPNCGWry0Ww6cGoU21mC3s88Ot/uGxPJ9VJJJjguVNQRc3w/FUwg==" + }, "node_modules/@emnapi/runtime": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", @@ -2191,9 +2198,9 @@ } }, "node_modules/@tabler/icons": { - "version": "3.41.0", - "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.41.0.tgz", - "integrity": "sha512-arlig0nkaC9UGqTZuT1MMZepX29t3Ysx5HSy2UvmR+CZrhlNxZrCM6Z4qYBoaIO+2ICZykttjBCSpf+p/t0H3w==", + "version": "3.40.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.40.0.tgz", + "integrity": "sha512-V/Q4VgNPKubRTiLdmWjV/zscYcj5IIk+euicUtaVVqF6luSC9rDngYWgST5/yh3Mrg/mYUwRv1YVTk71Jp0twQ==", "license": "MIT", "funding": { "type": "github", @@ -2201,12 +2208,12 @@ } }, "node_modules/@tabler/icons-react": { - "version": "3.41.0", - "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.41.0.tgz", - "integrity": "sha512-8XKc3wZKf1icxqwIPSOO61M+dtf8yJPwAE/rtFAVzc5Ros+OjCqowfcoI5IpKK09RSo8s0hHrWvydGgnXqYILg==", + "version": "3.40.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.40.0.tgz", + "integrity": "sha512-oO5+6QCnna4a//mYubx4euZfECtzQZFDGsDMIdzZUhbdyBCT+3bRVFBPueGIcemWld4Vb/0UQ39C/cmGfGylAg==", "license": "MIT", "dependencies": { - "@tabler/icons": "3.41.0" + "@tabler/icons": "3.40.0" }, "funding": { "type": "github", @@ -2536,7 +2543,6 @@ "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "*" } @@ -2545,8 +2551,7 @@ "version": "2.0.13", "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/ms": { "version": "2.1.0", @@ -2570,7 +2575,6 @@ "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -2581,7 +2585,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -2603,7 +2606,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3190,7 +3192,6 @@ "resolved": "https://registry.npmjs.org/fumadocs-core/-/fumadocs-core-16.7.7.tgz", "integrity": "sha512-Eqh3AZ24loMnwNJZlereRwBp1q2nB/JOJ5xsIG4bF6tFZ2mTzc3rToKoRRAVNhNFwMVqlZBGVXWo+rjx1hOtjQ==", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/intl-localematcher": "^0.8.2", "@orama/orama": "^3.1.18", @@ -3410,7 +3411,6 @@ "resolved": "https://registry.npmjs.org/fumadocs-ui/-/fumadocs-ui-16.7.7.tgz", "integrity": "sha512-yeDkVgROkTH+FP38CFcGGlkeNGiiDyNNQpmm0btt9rg653kTITuMAzXU5F8PZ+8upwPIgOdJwFcdxuQEobjO9w==", "license": "MIT", - "peer": true, "dependencies": { "@fumadocs/tailwind": "0.0.3", "@radix-ui/react-accordion": "^1.2.12", @@ -3776,6 +3776,12 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/js-md5": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz", + "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==", + "license": "MIT" + }, "node_modules/js-yaml": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", @@ -4064,7 +4070,6 @@ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz", "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==", "license": "ISC", - "peer": true, "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } @@ -5199,7 +5204,6 @@ "resolved": "https://registry.npmjs.org/next/-/next-16.1.7.tgz", "integrity": "sha512-WM0L7WrSvKwoLegLYr6V+mz+RIofqQgVAfHhMp9a88ms0cFX8iX9ew+snpWlSBwpkURJOUdvCEt3uLl3NNzvWg==", "license": "MIT", - "peer": true, "dependencies": { "@next/env": "16.1.7", "@swc/helpers": "0.5.15", @@ -5443,7 +5447,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5453,7 +5456,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -5966,8 +5968,7 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz", "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==", "devOptional": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tapable": { "version": "2.3.2", @@ -6049,7 +6050,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 4d8f38d..1930d0a 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,13 @@ "postinstall": "fumadocs-mdx" }, "dependencies": { - "@tabler/icons-react": "^3.41.0", + "@code0-tech/sagittarius-graphql-types": "^0.0.0-experimental-2414125487-fbc8a5ec8a2dd07cc76957d4315281c246e98d57", + "@tabler/icons-react": "^3.40.0", "fumadocs-core": "^16.7.7", "fumadocs-mdx": "^14.2.11", - "fumadocs-ui": "^16.7.7", "fumadocs-typescript": "^5.2.0", + "fumadocs-ui": "^16.7.7", + "js-md5": "^0.8.3", "next": "16.1.7", "react": "^19.1.0", "react-dom": "^19.1.0" diff --git a/src/components/FunctionCard.tsx b/src/components/FunctionCard.tsx new file mode 100644 index 0000000..2699bff --- /dev/null +++ b/src/components/FunctionCard.tsx @@ -0,0 +1,114 @@ +import {FunctionDefinition} from "@code0-tech/sagittarius-graphql-types"; +import React from "react"; +import {Card as FumaCard} from "fumadocs-ui/components/card"; +import {IconNote, IconX} from "@tabler/icons-react"; +import {md5} from "js-md5"; + +export interface FunctionCardProps { + definition?: FunctionDefinition +} + +const GOLDEN_ANGLE = 137.50776405003785 + +const extractIdNumber = (s: string) => { + const m = s.match(/\/(\d+)\s*$/) + return m ? Number(m[1]) : null +} + +export const hashToColor = (s: string, from: number = 25, to: number = 320): string => { + const range = to - from; + const n = extractIdNumber(s); + if (n != null) { + const hue = from + ((n * GOLDEN_ANGLE) % range); + return `hsl(${hue}, 100%, 72%)`; + } + + const h = md5(md5(s)); + const a = parseInt(h.slice(0, 8), 16); + return `hsl(${from + (a % range)}, 100%, 72%)`; +} + +const FunctionCard: React.FC = (props) => { + + const {definition} = props + + const splitTemplate = (str: string) => + str + .split(/(\$\{[^}]+\})/) + .filter(Boolean) + .flatMap(part => + part.startsWith("${") + ? [part.slice(2, -1)] // variable name ohne ${} + : part.split(/(\s*,\s*)/) // Kommas einzeln extrahieren + .filter(Boolean) + .flatMap(p => p.trim() === "," ? [","] : p.trim() ? [p.trim()] : []) + ); + + + const displayMessage = splitTemplate(definition?.displayMessages?.[0].content ?? "Some ${example} function") + const renderedMessage = displayMessage.map((part, index) => { + if (definition?.parameterDefinitions?.nodes?.find(pd => pd?.identifier === part)) { + return + {part} + + } + + return {part} + }) + + console.log(definition) + + return +
+ +
+ + {renderedMessage} +
+ + +
+ + {definition?.names?.[0].content} + +
+
+ {definition?.parameterDefinitions?.nodes?.map(pd => ( +
+ {pd?.names?.[0].content} +

{pd?.descriptions?.[0].content}

+
+
+ ))} +
+ +
+ +} + +export default FunctionCard; \ No newline at end of file