Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,19 @@ | ||
| import { AsyncAPIStudio } from './studio'; | ||
|
|
||
| import type { FunctionComponent } from "react"; | ||
| import { useEffect } from "react"; | ||
| import { driverObj } from "./helpers/driver"; | ||
|
|
||
| export const App: FunctionComponent = () => { | ||
| useEffect(() => { | ||
| const alreadyVisitedSession = sessionStorage.getItem("alreadyVisited"); | ||
| const alreadyVisitedLocal = localStorage.getItem("alreadyVisited"); | ||
| if (!alreadyVisitedSession && !alreadyVisitedLocal) { | ||
| sessionStorage.setItem("alreadyVisited", "true"); | ||
|
Check failure on line 12 in apps/studio/src/App.tsx
|
||
| localStorage.setItem("alreadyVisited", "true"); | ||
|
Check failure on line 13 in apps/studio/src/App.tsx
|
||
| driverObj.drive(); | ||
| } | ||
| }, []); | ||
|
|
||
| return <AsyncAPIStudio />; | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { driver } from "driver.js"; | ||
| import "driver.js/dist/driver.css"; | ||
|
|
||
| export const driverObj = driver({ | ||
| popoverClass: "driverjs-theme", | ||
| showProgress: true, | ||
| showButtons: ["next", "previous", "close"], | ||
| nextBtnText: "Next", | ||
| prevBtnText: "Back", | ||
|
|
||
| steps: [ | ||
| { | ||
| element: "#tour-example", | ||
| popover: { | ||
| title: "Welcome to AsyncAPI Studio", | ||
| description: | ||
| "Discover a powerful tool for designing, documenting, and managing AsyncAPI-based applications. This tour will guide you through key features to enhance your API development workflow.", | ||
| side: "left", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#navbar", | ||
| popover: { | ||
| title: "Control Center", | ||
| description: | ||
| "This controle center allows you to toggle the editor, information panel, and HTML preview on or off. It's also your gateway to creating new API templates for various protocols like Apache Kafka, WebSocket, HTTP, and more. Customize your workspace and jumpstart your API design process from here.", | ||
| side: "left", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#information", | ||
| popover: { | ||
| title: "Information Panel", | ||
| description: | ||
| "Explore your API structure using this information panel. Quickly access Servers, Channels, Operations, Messages, and Schemas - the building blocks of your AsyncAPI specification.", | ||
| side: "left", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#editor", | ||
| popover: { | ||
| title: "The Powerful Editor", | ||
| description: | ||
| "Create and edit your AsyncAPI documents with ease. Enjoy features like syntax highlighting, auto-completion, and real-time validation to streamline your API design process.", | ||
| side: "bottom", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#editor-dropdown", | ||
| popover: { | ||
| title: "Share and Editor Options", | ||
| description: | ||
| "Collaborate on your work and access document management tools. Import, export, and convert your API specifications with just a few clicks.", | ||
| side: "top", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#terminal", | ||
| popover: { | ||
| title: "Terminal", | ||
| description: | ||
| "Quickly identify and resolve issues in your specification. View errors, warnings, and helpful messages to ensure your API documentation is error-free.", | ||
| side: "bottom", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#html-preview", | ||
| popover: { | ||
| title: "Instant HTML Preview", | ||
| description: | ||
| "See your API documentation come to life in real-time. This panel renders a human-readable version of your specification as you make changes.", | ||
| side: "top", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#studio-setting", | ||
| popover: { | ||
| title: "Studio Settings", | ||
| description: | ||
| "Customize your AsyncAPI Studio experience. Adjust preferences and settings to tailor the tool to your workflow.", | ||
| side: "top", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#communicate", | ||
| popover: { | ||
| title: "Join AsyncAPI Community", | ||
| description: | ||
| "Connect with fellow AsyncAPI developers. Join our Slack community to share ideas, get help, and stay updated on AsyncAPI news and events.", | ||
| side: "top", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| { | ||
| element: "#Thank-you", | ||
| popover: { | ||
| title: "Thank You", | ||
| description: | ||
| "Thanks for exploring AsyncAPI Studio. We hope you find it valuable for your API projects. Feel free to reach out with any questions or feedback. Happy coding!", | ||
| side: "top", | ||
| align: "start", | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.