From be86f7fc8f1366b29da728c135a75b7f2d235120 Mon Sep 17 00:00:00 2001 From: akshatnema <20bcs022@iiitdmj.ac.in> Date: Fri, 23 Dec 2022 17:18:38 +0530 Subject: [PATCH 1/5] automated DocsButton Signed-off-by: akshatnema <20bcs022@iiitdmj.ac.in> --- components/MDX.js | 2 - components/buttons/DocsButton.js | 28 ++++------- components/layout/DocsLayout.js | 6 ++- components/layout/Layout.js | 79 +++++++++++++++++++++++++++++--- lib/api.js | 4 ++ 5 files changed, 89 insertions(+), 30 deletions(-) diff --git a/components/MDX.js b/components/MDX.js index a321f4aaeb0c..5fa8d67d8b05 100644 --- a/components/MDX.js +++ b/components/MDX.js @@ -18,7 +18,6 @@ import Figure from '../components/Figure' import Profile from '../components/Profile' import GeneratorInstallation from '../components/GeneratorInstallation' import NewsletterSubscribe from '../components/NewsletterSubscribe' -import DocsButton from '../components/buttons/DocsButton'; import { DocsCards } from '../components/docs/DocsCards' let mermaidInitialized = false; @@ -68,7 +67,6 @@ function getMDXComponents() { CodeBlock, ChapterSuggestions, YouTube, - DocsButton, Remember, Warning, Sponsors, diff --git a/components/buttons/DocsButton.js b/components/buttons/DocsButton.js index 2e7d5ed490b7..f7388038f97c 100644 --- a/components/buttons/DocsButton.js +++ b/components/buttons/DocsButton.js @@ -1,22 +1,11 @@ import Link from 'next/link'; -export default function DocsButton({ suggestions = [], className }) { - if (suggestions.length === 0) { - return null; - } - - const backPages = suggestions.filter( - (suggestion) => suggestion.type === 'back' - ); - const nextPages = suggestions.filter( - (suggestion) => suggestion.type === 'next' - ); - +export default function DocsButton({ post, className }) { + return (
- {backPages.map((suggestion, key) => ( - + { post?.prevPage &&
@@ -38,15 +27,14 @@ export default function DocsButton({ suggestions = [], className }) { Go Back
-
{suggestion.title}
+
{post.prevPage.title}
- ))} + }
- {nextPages.map((suggestion, key) => ( - + { post?.nextPage &&
@@ -68,11 +56,11 @@ export default function DocsButton({ suggestions = [], className }) { />
-
{suggestion.title}
+
{post.nextPage.title}
 - ))} + }
); diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js index 4e102dae44a1..aaded879a24d 100644 --- a/components/layout/DocsLayout.js +++ b/components/layout/DocsLayout.js @@ -7,6 +7,7 @@ import DocsContext from '../../context/DocsContext' import TOC from '../TOC' import DocsNav from '../navigation/DocsNav' import DocsMobileMenu from '../navigation/DocsMobileMenu' +import DocsButton from '../buttons/DocsButton' import NavBar from '../navigation/NavBar' import ArrowRight from '../icons/ArrowRight' import Feedback from '../Feedback' @@ -23,7 +24,7 @@ function generateEditLink(post) { return Edit this page on GitHub } -function buildNavTree(navItems) { +export function buildNavTree(navItems) { const tree = { 'welcome': { item: { title: 'Welcome', weight: 0, isRootSection: true, isSection: true, rootSectionId: 'welcome', sectionWeight: 0, slug: '/docs' }, @@ -185,6 +186,9 @@ export default function DocsLayout({ post, navItems = {}, children }) { /> { children } +
+ +
diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 4d0cf6fe39a1..a51a1afbb5d4 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -1,25 +1,92 @@ import { useRouter } from 'next/router' -import DocsLayout from './DocsLayout' +import DocsLayout, {buildNavTree} from './DocsLayout' import BlogLayout from './BlogLayout' import JobsLayout from './JobsLayout' import GenericPostLayout from './GenericPostLayout' import BlogContext from '../../context/BlogContext' import JobsContext from '../../context/JobsContext' -import { getPostBySlug, getAllPosts } from '../../lib/api' +import { getPostBySlug, getAllPosts, getDocBySlug } from '../../lib/api' export default function Layout({ children }) { const { pathname } = useRouter() + const posts = getAllPosts() + const allDocPosts = posts.filter(p => p.slug.startsWith('/docs/')) + const treePosts = buildNavTree(allDocPosts) + let structuredPosts = [] + const convertDocPosts = (docObject) => { + let docsArray = [] + docsArray.push(docObject?.item ? docObject.item : docObject) + if(docObject.children){ + let children = docObject.children + Object.keys(children).forEach((child) => { + let docChildArray = convertDocPosts(children[child]) + docsArray = [...docsArray, ...docChildArray] + }) + } + return docsArray + } + + Object.keys(treePosts).forEach((rootElement) => { + structuredPosts.push(treePosts[rootElement].item) + if(treePosts[rootElement].children){ + let children = treePosts[rootElement].children + Object.keys(children).forEach((child) => { + let docChildArray = convertDocPosts(children[child]) + structuredPosts = [...structuredPosts, ...docChildArray] + }) + } + }) + structuredPosts[0] = posts.filter(p => p.slug === '/docs')[0] + + let countDocPages = structuredPosts.length + structuredPosts = structuredPosts.map((post, index) => { + if(post?.isRootElement || post?.isSection) + return post + let nextPage = {}, prevPage = {} + let docPost = post; + if(index+10){ + if(!structuredPosts[index-1]?.isRootElement && !structuredPosts[index-1]?.isSection){ + prevPage = { + title: structuredPosts[index-1].title, + href: structuredPosts[index-1].slug + } + docPost = {...docPost, prevPage} + }else{ + if(index-2>=0){ + prevPage = { + title: structuredPosts[index-2].title, + href: structuredPosts[index-2].slug + } + docPost = {...docPost, prevPage} + } + } + } + return docPost + }) if (pathname.startsWith('/docs')) { - const posts = getAllPosts() - const post = getPostBySlug(pathname) + const post = getDocBySlug(structuredPosts, pathname) return ( p.slug.startsWith('/docs/'))}> {children} ) } else if (pathname.startsWith('/blog/')) { - const posts = getAllPosts() const post = getPostBySlug(pathname) return ( p.slug.startsWith('/blog/'))}> @@ -27,14 +94,12 @@ export default function Layout({ children }) { ) } else if (pathname === '/blog') { - const posts = getAllPosts() return ( p.slug.startsWith('/blog/')) }}> {children} ) } else if (pathname === '/jobs') { - const posts = getAllPosts() return ( p.slug.startsWith('/jobs/')) }}> {children} diff --git a/lib/api.js b/lib/api.js index 0b58b5a98325..c208cdc01c28 100644 --- a/lib/api.js +++ b/lib/api.js @@ -7,3 +7,7 @@ export function getAllPosts() { export function getPostBySlug(slug) { return posts.find(post => post.slug === slug && !post.isSection) } + +export function getDocBySlug(structuredPosts, slug) { + return structuredPosts.find(post => post.slug === slug && !post.isSection) +} \ No newline at end of file From efea397c5f7a4cce44714681203d6721a884e52a Mon Sep 17 00:00:00 2001 From: akshatnema <20bcs022@iiitdmj.ac.in> Date: Fri, 23 Dec 2022 18:02:31 +0530 Subject: [PATCH 2/5] DocsButton removed from MD files Signed-off-by: akshatnema <20bcs022@iiitdmj.ac.in> --- components/buttons/DocsButton.js | 15 +++++++-------- pages/docs/concepts/application.md | 15 --------------- pages/docs/concepts/channel.md | 16 ---------------- pages/docs/concepts/consumer.md | 16 ---------------- pages/docs/concepts/index.md | 17 ----------------- pages/docs/concepts/message.md | 16 ---------------- pages/docs/concepts/producer.md | 17 ----------------- pages/docs/concepts/protocol.md | 15 --------------- pages/docs/concepts/server.md | 17 ----------------- pages/docs/guides/index.md | 17 ----------------- pages/docs/reference/index.md | 17 ----------------- pages/docs/tools/index.md | 17 ----------------- .../getting-started/asyncapi-documents.md | 17 ----------------- .../getting-started/coming-from-openapi.md | 17 ----------------- .../event-driven-architectures.md | 17 ----------------- .../tutorials/getting-started/hello-world.md | 17 ----------------- pages/docs/tutorials/getting-started/index.md | 17 ----------------- .../docs/tutorials/getting-started/security.md | 17 ----------------- .../docs/tutorials/getting-started/servers.md | 17 ----------------- pages/docs/tutorials/index.md | 18 ------------------ .../docs/tutorials/streetlights-interactive.md | 17 ----------------- pages/docs/tutorials/streetlights.md | 17 ----------------- 22 files changed, 7 insertions(+), 359 deletions(-) diff --git a/components/buttons/DocsButton.js b/components/buttons/DocsButton.js index f7388038f97c..c8b64b4f72c5 100644 --- a/components/buttons/DocsButton.js +++ b/components/buttons/DocsButton.js @@ -1,13 +1,12 @@ import Link from 'next/link'; -export default function DocsButton({ post, className }) { - +export default function DocsButton({ post, className='' }) { return ( -
-
+
+
{ post?.prevPage && -
+
}
-
- { post?.nextPage && +
+ { post?.nextPage && -
+
Up Next diff --git a/pages/docs/concepts/application.md b/pages/docs/concepts/application.md index 1f8aafc05b87..6de5af6d8290 100644 --- a/pages/docs/concepts/application.md +++ b/pages/docs/concepts/application.md @@ -25,18 +25,3 @@ The above diagram describes a message communication traveling through a channel When writing your AsyncAPI document, make sure to describe what a user can do with your application; not what the application does. In other words, if your application is a producer, your AsyncAPI document should describe where users can subscribe to, to receive messages produced by your producer application. - - diff --git a/pages/docs/concepts/channel.md b/pages/docs/concepts/channel.md index 44a30bdd2376..96fefe067f71 100644 --- a/pages/docs/concepts/channel.md +++ b/pages/docs/concepts/channel.md @@ -20,19 +20,3 @@ graph LR C --> F[Consumer] ``` The diagram above shows the communication between a `producer` and `consumer`, with the producer sending a `message` through the `channel`. The channel then queues the message to the specific consumer. - ---- - diff --git a/pages/docs/concepts/consumer.md b/pages/docs/concepts/consumer.md index 218798726806..512970e11d4b 100644 --- a/pages/docs/concepts/consumer.md +++ b/pages/docs/concepts/consumer.md @@ -30,19 +30,3 @@ The above diagram depicts a sample flow of events from `producer` to `broker` to Subscribers can also be producers. - ---- - \ No newline at end of file diff --git a/pages/docs/concepts/index.md b/pages/docs/concepts/index.md index dfea105a254b..2077cf8073b7 100644 --- a/pages/docs/concepts/index.md +++ b/pages/docs/concepts/index.md @@ -23,20 +23,3 @@ Do you have a documentation contributor question and you're wondering how to tag Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`alequetzalli`](https://github.com/alequetzalli) 🐙. - ---- - - \ No newline at end of file diff --git a/pages/docs/concepts/message.md b/pages/docs/concepts/message.md index 37c90b95844b..12cdf528d1f3 100644 --- a/pages/docs/concepts/message.md +++ b/pages/docs/concepts/message.md @@ -33,19 +33,3 @@ graph TD ``` Overall, `events` are `messages` but not all `messages` are `events`. - ---- - diff --git a/pages/docs/concepts/producer.md b/pages/docs/concepts/producer.md index 82360f2cc953..ce17b9e31042 100644 --- a/pages/docs/concepts/producer.md +++ b/pages/docs/concepts/producer.md @@ -32,20 +32,3 @@ flowchart LR ``` In the diagram above, we see a producer publishing messages to a specific channel and a consumer subscribing to messages from that channel. We also have a second producer who publishes to one channel, but subscribes to messages from another. - ---- - - \ No newline at end of file diff --git a/pages/docs/concepts/protocol.md b/pages/docs/concepts/protocol.md index 6c96eddc3139..61a454744844 100644 --- a/pages/docs/concepts/protocol.md +++ b/pages/docs/concepts/protocol.md @@ -28,18 +28,3 @@ The diagram above depicts the message exchange flow from `producer` to `broker` The quality of service information rule is specified on a protocol level. Broker implementations and other involved actors must act accordingly. In AsyncAPI documents, all protocol-specific details that the application follows can be described using [bindings](/docs/reference/specification/v2.5.0#definitionsBindings). - - \ No newline at end of file diff --git a/pages/docs/concepts/server.md b/pages/docs/concepts/server.md index 1a2b0888d846..7d3a6441bb3e 100644 --- a/pages/docs/concepts/server.md +++ b/pages/docs/concepts/server.md @@ -36,20 +36,3 @@ flowchart TD ``` The diagram above shows the *Broker Centric Architecture*. In this case, we created three AsyncAPI files for the `producer`, `consumer1`, and `consumer2`. In these AsyncAPI files, the [`Server Object`](https://www.asyncapi.com/docs/reference/specification/latest#serverObject) provides information about the `broker`, so that API users know where to connect to start receiving or sending messages. - ---- - - \ No newline at end of file diff --git a/pages/docs/guides/index.md b/pages/docs/guides/index.md index d3100ddc1fde..72eac5ec06bc 100644 --- a/pages/docs/guides/index.md +++ b/pages/docs/guides/index.md @@ -23,20 +23,3 @@ Do you have a documentation contributor question and you're wondering how to tag Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`alequetzalli`](https://github.com/alequetzalli) 🐙. - ---- - - \ No newline at end of file diff --git a/pages/docs/reference/index.md b/pages/docs/reference/index.md index ea074e3a1dc4..285c009febcf 100644 --- a/pages/docs/reference/index.md +++ b/pages/docs/reference/index.md @@ -23,20 +23,3 @@ Do you have a documentation contributor question and you're wondering how to tag Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`alequetzalli`](https://github.com/alequetzalli) 🐙. - ---- - - \ No newline at end of file diff --git a/pages/docs/tools/index.md b/pages/docs/tools/index.md index 1cdad63aeaf3..ae3054b9dadf 100644 --- a/pages/docs/tools/index.md +++ b/pages/docs/tools/index.md @@ -163,20 +163,3 @@ The following is a list of tools that compare AsyncAPI documents. | :------------- | :------------- | :----------------- | | [diff](https://github.com/asyncapi/diff) | Diff is a library that compares two AsyncAPI documents and provides information about the differences by pointing out explicitly information like breaking changes. | JavaScript | [api-smart-diff](https://github.com/udamir/api-smart-diff) | It allows you to compare two API documents and classify changes. Supported API specifications: OpenAPI, AsyncAPI, JsonSchema. Thanks to [@udamir](https://github.com/udamir). | JavaScript - ---- - - diff --git a/pages/docs/tutorials/getting-started/asyncapi-documents.md b/pages/docs/tutorials/getting-started/asyncapi-documents.md index fa3ca77f8973..ef526918151f 100644 --- a/pages/docs/tutorials/getting-started/asyncapi-documents.md +++ b/pages/docs/tutorials/getting-started/asyncapi-documents.md @@ -38,20 +38,3 @@ channels: The AsyncAPI document is a machine-readable definition of your Event-Driven API. This document can be used afterward to generate documentation and code, validate the messages your application receives, and even apply API management policies to your messages before they arrive to your broker. Your API documentation is now machine-readable –easily parseable by code— so the myriad of useful applications is endless. - ---- - - diff --git a/pages/docs/tutorials/getting-started/coming-from-openapi.md b/pages/docs/tutorials/getting-started/coming-from-openapi.md index 8be10224b9ca..78da17d7bdb4 100644 --- a/pages/docs/tutorials/getting-started/coming-from-openapi.md +++ b/pages/docs/tutorials/getting-started/coming-from-openapi.md @@ -27,20 +27,3 @@ Aside from structural differences you must know that: As you have seen above, OpenAPI and AsyncAPI are very similar. In a real-world environment, systems don't have just REST APIs or events but a mix of both. Most of the time, the information flowing in the events is very similar to the one the REST APIs have to handle in requests and responses; thus, being able to reuse schemas is a huge win. Enough reading, it's time to get your hands dirty with some actual examples. Let's learn how to create an AsyncAPI document that defines a "Hello world" application. - ---- - - diff --git a/pages/docs/tutorials/getting-started/event-driven-architectures.md b/pages/docs/tutorials/getting-started/event-driven-architectures.md index 2455b29f562e..89a3c8f166b1 100644 --- a/pages/docs/tutorials/getting-started/event-driven-architectures.md +++ b/pages/docs/tutorials/getting-started/event-driven-architectures.md @@ -66,20 +66,3 @@ talk ["the many meanings of Event-Driven Architecture"](https://www.youtube.com/ ## Conclusion We've seen what an Event-Driven Architecture is, how it works, and explained its components. AsyncAPI defines and documents each of these components. We'll cover each of the components during the rest of this guide. To continue, choose your next step: - ---- - - diff --git a/pages/docs/tutorials/getting-started/hello-world.md b/pages/docs/tutorials/getting-started/hello-world.md index 53d305c63c81..a594695d30da 100644 --- a/pages/docs/tutorials/getting-started/hello-world.md +++ b/pages/docs/tutorials/getting-started/hello-world.md @@ -107,20 +107,3 @@ channels: The `payload` object defines how the message must be structured. In this example, the message must be a string and match the given regular expression in the format `hello {name}` string. - ---- - - diff --git a/pages/docs/tutorials/getting-started/index.md b/pages/docs/tutorials/getting-started/index.md index edb3d82067e3..0321701f1bab 100644 --- a/pages/docs/tutorials/getting-started/index.md +++ b/pages/docs/tutorials/getting-started/index.md @@ -16,20 +16,3 @@ To make this happen, the first step has been to create a specification that allo **The AsyncAPI specification settles the base for a greater and better tooling ecosystem for EDA's**. If you are looking for a solution to automate and formalize the documentation or code generation of your event-driven (micro)services, you are in the right place. Likewise, if you are aiming to establish solid standards for your events and improve the governance of your asynchronous APIs, welcome to your new home. - ---- - - diff --git a/pages/docs/tutorials/getting-started/security.md b/pages/docs/tutorials/getting-started/security.md index 7bbef23c34e4..12effbf2ace5 100644 --- a/pages/docs/tutorials/getting-started/security.md +++ b/pages/docs/tutorials/getting-started/security.md @@ -82,20 +82,3 @@ There are many more security schemes. Learn more about them