Skip to content

Commit

Permalink
Merge master into bot/bump-@asyncapi/raml-dt-schema-parser-4.0.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@asyncapi-bot-eve
asyncapi-bot-eve authored Dec 13, 2023
2 parents 36e8d26 + af95064 commit e08e7b9
Show file tree
Hide file tree
Showing 18 changed files with 1,556 additions and 1,657 deletions.
2 changes: 1 addition & 1 deletion modelina-website/src/components/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Select({
<select
onChange={(ev: any) => onChange(ev.target.value)}
className={twMerge(
`form-select h-full px-4 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
`form-select h-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
)}
value={value}
style={{ paddingRight: '40px' }}
Expand Down
275 changes: 147 additions & 128 deletions modelina-website/src/components/docs/Docs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,151 +1,167 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { withRouter, NextRouter } from 'next/router';
import DocsList from "../../../config/docs.json";
import Script from 'next/script';
import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import CodeBlock from '../CodeBlock';
import rehypeRaw from 'rehype-raw';
import CodeBlock from '../CodeBlock';
import GithubButton from '../buttons/GithubButton';
import Script from 'next/script';
import DocsList from "../../../config/docs.json";

interface WithRouterProps {
router: NextRouter;
}

interface ModelinaDocsProps extends WithRouterProps {
source: any,
source: any,
slug: string
}

type ModelinaDocsState = {
showMenu: boolean;
};

class Docs extends React.Component<
ModelinaDocsProps,
ModelinaDocsState
> {
constructor(props: ModelinaDocsProps) {
super(props);
this.state = {
showMenu: true
};
this.renderMenuTree = this.renderMenuTree.bind(this);
}
const Docs: React.FC<ModelinaDocsProps> = ({ source, slug, router }) => {
const [showMenu, setShowMenu] = useState(true);

/**
* Render the menu items dynamically in a depth first approach
*/
renderMenuTree(value: any, isRoot: boolean) {
const isSelected = value.slug === `/docs/${this.props.slug}`;
if(value.type === 'dir') {
const renderMenuTree = (value: any, isRoot: boolean) => {
const isSelected = value.slug === `/docs/${slug}`;
if (value.type === 'dir') {
const hasRootReadme = value.content !== null;
let headerReadme;
if(hasRootReadme) {
headerReadme = <li key={value.slug} className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setState({ showMenu: false }); } }><a href={`/docs/${value.slug.toLowerCase()}`}>{value.title}</a></li>;
if (hasRootReadme) {
headerReadme = (
<li
key={value.slug}
className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`}
onClick={() => {
setShowMenu(false);
}}
>
<a href={`/docs/${value.slug.toLowerCase()}`}>{value.title}</a>
</li>
);
} else {
headerReadme = <li key={value.slug} className={`p-2`}>{value.title}</li>;
}
return <>{headerReadme}<li key={`${value.slug}-li`}>
<ul key={`${value.slug}-ul`} className='border-l border-gray-200 pl-4 ml-3 mt-1'>
{isRoot && <li key={'apidocs'} className={`cursor-pointer p-2`}><a href={'/apidocs'}>API Docs</a></li>}
{value.subPaths.map((subPath: any) => this.renderMenuTree(subPath, false))}
</ul>
</li></>;
return (
<>
{headerReadme}
<li key={`${value.slug}-li`}>
<ul key={`${value.slug}-ul`} className='border-l border-gray-200 pl-4 ml-3 mt-1'>
{isRoot && <li key={'apidocs'} className={`cursor-pointer p-2`}><a href={'/apidocs'}>API Docs</a></li>}
{value.subPaths.map((subPath: any) => renderMenuTree(subPath, false))}
</ul>
</li>
</>
);
} else {
return <li key={value.slug} className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setState({ showMenu: false }) }}><a href={`/docs/${value.slug}`}>{value.title}</a></li>;
return (
<li
key={value.slug}
className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`}
onClick={() => {
setShowMenu(false);
}}
>
<a href={`/docs/${value.slug}`}>{value.title}</a>
</li>
);
}
}
};

render() {
let { showMenu } = this.state;
const menuItems = this.renderMenuTree(DocsList.tree, true);
const item = (DocsList.unwrapped as any)[this.props.slug];
return (
<div className="py-4 lg:py-8">
<div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
{!showMenu && (
<div className="lg:hidden">
<button onClick={() => { this.setState({ showMenu: true }) }} className="flex text-gray-500 ml-6 hover:text-gray-900 focus:outline-none" aria-label="Open sidebar">
<span>Open Navigation ➔</span>
</button>
</div>
)}
{
showMenu && (
<div className="z-60 lg:hidden">
<div className="fixed inset-0 flex z-40">
<div className="fixed inset-0">
<div
className="absolute inset-0 bg-gray-600 opacity-75"
onClick={() => { this.setState({ showMenu: false }) }}
></div>
</div>
const menuItems = renderMenuTree(DocsList.tree, true);
const item = (DocsList.unwrapped as any)[slug];

<div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
<div className="absolute top-0 right-0 -mr-14 p-1">
<button
onClick={() => { this.setState({ showMenu: false }) }}
className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
aria-label="Close sidebar"
>
<svg
className="h-6 w-6 text-white"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex-1 h-0 pt-5 overflow-y-auto">
<nav className="mt-5 px-2 mb-4">
<ul key="rootMenuList" className='border-l border-gray-200 pl-4 ml-3 mt-1'>
{ menuItems }
</ul>
</nav>
</div>
</div>
<div className="flex-shrink-0 w-14">
{/* Force sidebar to shrink to fit close icon */}
</div>
</div>
return (
<div className="py-4 lg:py-8">
<div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
{!showMenu && (
<div className="lg:hidden">
<button
onClick={() => {
setShowMenu(true);
}}
className="flex text-gray-500 ml-6 hover:text-gray-900 focus:outline-none"
aria-label="Open sidebar"
>
<span>Open Navigation ➔</span>
</button>
</div>
)}
{showMenu && (
<div className="z-60 lg:hidden">
<div className="fixed inset-0 flex z-40">
<div className="fixed inset-0">
<div
className="absolute inset-0 bg-gray-600 opacity-75"
onClick={() => {
setShowMenu(false);
}}
></div>
</div>
)
}
<div className="flex flex-row" id="main-content">
<div className="hidden lg:flex lg:flex-shrink-0">
<div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
<div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
<nav className="flex-1 bg-white">
{ menuItems }

<div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
<div className="absolute top-0 right-0 -mr-14 p-1">
<button
onClick={() => {
setShowMenu(false);
}}
className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
aria-label="Close sidebar"
>
<svg
className="h-6 w-6 text-white"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex-1 h-0 pt-5 overflow-y-auto">
<nav className="mt-5 px-2 mb-4">
<ul key="rootMenuList" className='border-l border-gray-200 pl-4 ml-3 mt-1'>
{menuItems}
</ul>
</nav>
</div>
</div>
<div className="flex-shrink-0 w-14">
{/* Force sidebar to shrink to fit close icon */}
</div>
</div>
<div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16) prose">

<div className={"flex md:justify-end my-4 md:my-0"}>
<GithubButton
text="Edit on GitHub"
href={`https://github.com/asyncapi/modelina/edit/master${item.relativeRootPath}`}
inNav="true"
/>
</div>
)}
<div className="flex flex-row" id="main-content">
<div className="hidden lg:flex lg:flex-shrink-0">
<div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
<div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
<nav className="flex-1 bg-white">{menuItems}</nav>
</div>
<ReactMarkdown
rehypePlugins={[rehypeSlug, rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={{
code({node, inline, className, children, ...props}) {
</div>
</div>
<div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16) prose">
<div className={"flex md:justify-end my-4 md:my-0"}>
<GithubButton
text="Edit on GitHub"
href={`https://github.com/asyncapi/modelina/edit/master${item.relativeRootPath}`}
inNav="true"
/>
</div>
<ReactMarkdown
rehypePlugins={[rehypeSlug, rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
if(className === 'language-mermaid') {
if (className === 'language-mermaid') {
return <pre className="mermaid bg-white flex justify-center">{children}</pre>
}
return !inline && match ? (
Expand All @@ -159,24 +175,27 @@ class Docs extends React.Component<
<code {...props} className={className}>
{children}
</code>
)}}}>
{this.props.source}
</ReactMarkdown>
<Script
type="module"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
)
}
}}
>
{source}
</ReactMarkdown>
<Script
type="module"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
mermaid.initialize({startOnLoad: true});
mermaid.contentLoaded();`,
}}
/>
</div>
}}
/>
</div>
</div>
</div>
);
}
}
export default withRouter(Docs);
</div>
);
};

export default withRouter(Docs);
Loading

0 comments on commit e08e7b9

Please sign in to comment.