{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"start-with-the-web-editor","__idx":0},"children":["Start with the web editor"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the Reunite editor to create, edit, and manage content in your Redocly project directly from your browser."," ","This guide shows you how to create your first project, add content, customize navigation, and publish changes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-begin","__idx":1},"children":["Before you begin"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure you have the following:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://auth.cloud.redocly.com/registration"},"children":["Redocly account with an organization"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["a project that uses the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Starter"]}," template in your Reunite organization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See: ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/manage-projects#create-a-project-from-a-template"},"children":["Create a project from a template"]}," for instructions on creating a project."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"create-a-branch","__idx":2},"children":["Create a branch"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Learn more about branches"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reunite uses Git for version control."," ","Changes are made on development branches and are introduced to the main branch of the project through pull requests."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Branches"]}," are copies where you can make changes to the project without affecting the production project until you are ready."," ","If you want changes from a branch to be added to the production project, you merge a pull request."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before you make any changes to your project, create a new branch."," ","This new branch is a place where you can make changes without affecting the published site until you are ready."," ","Iterate on your changes based on reviews by your team."," ","After the updates have been approved, you can merge your changes into the published site."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create a new branch:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["From the Reunite editor, click the name of the current branch at the top of the page."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/current-branch-1a305df1983bdb3f.png","alt":"Screenshot where current branch is on project page","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enter the name for your new branch, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["new-dev-branch"]},", and select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create branch"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reunite automatically replaces spaces with hyphens ",{"$$mdtype":"Tag","name":"kbd","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-"]}]},"because spaces are not allowed in branch names."]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-content-to-the-landing-page","__idx":3},"children":["Add content to the landing page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the landing page for each directory in your project is either an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.md"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.page.tsx"]}," file."," ","New projects in Reunite come with a landing page file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Replace the content in the current landing page file."," ","Add your own content or use the following sample Markdown:"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Example content"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdown","data-title":"index.md","header":{"title":"index.md","controls":{"copy":{}}},"source":"# Start something new\n\nThere's a real excitement to starting something new.\n\n- A blank page\n- A fresh opportunity\n- Limitless potential\n\n## Good for writers\n\nWriters need strong tooling so they can deliver a lot of content in a short time.\nEfficiency is key, so this platform supports [Markdoc](https://markdoc.dev/) format (it's a lot like Markdown, but with added niceness).\n\nBuild-in link checking and branch previews lets writers move quickly and safely when creating content or managing updates.\n\n## Good for readers\n\nClean layout and a visible table of contents makes good content a pleasure to read and process.\n","lang":"markdown"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The content can be a Markdown file with all the supported features of Markdoc, or a React file."," ","It can also be an API description (such as an OpenAPI, GraphQL, or AsyncAPI description)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For all formatting options, see the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdown"},"children":["Markdown guide"]},"."," ","For details about the editor toolbar and features, see ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/use-editor"},"children":["Use the editor"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you have added some content to your landing page, you can preview your project."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Autosave"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Reunite editor automatically saves your changes as you make edits to your files."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"preview-your-changes","__idx":4},"children":["Preview your changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reunite includes a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab where you can view your changes as you make them in the editor."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Preview how your changes look in a sample build before publishing to production."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-the-live-webview-tab","__idx":5},"children":["In the live Webview tab"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab shows formatting updates to ensure they render correctly before you publish."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/webview-preview-5a3e5f3baac70768.png","alt":"Screenshot of the Webview tab in the editor","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Change the view to meet your needs, such as seeing how the landing page renders on mobile screens."," ","See ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/use-webview"},"children":["Use the Webview"]}," to learn more about the options available in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-the-deployment-preview","__idx":6},"children":["In the deployment preview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reunite creates deployment previews for all branches that have an open pull request."," ","The deployment preview includes all changes you have committed to your branch."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Learn more about pull requests"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reunite uses ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Git"]}," for ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["version control"]},"."," ","Changes are made on ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["development branches"]}," and are introduced to the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["main branch"]}," of the project through ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["pull requests"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before you can open a pull request, you must make a commit to your development branch."," ","A ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["commit"]}," is a way of storing your changes to the branch in Git."," ","You can continue to make updates to your branch and make additional commits."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After you have committed, you can ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/pull-request/open-pull-request"},"children":["open a pull request"]}," with your commits."," ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Pull requests"]}," show the differences between your branch and the main branch."," ","They run checks for broken links, create deployment preview builds, and allow team members to review changes before merging."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To see a preview build of your project:",{"$$mdtype":"Tag","name":"Link","attributes":{"id":"commit-steps"},"children":[]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Commit your updates."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Steps to commit"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Commit"]}," button, or the commit icon."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/commit-icon-0331679fa4116dbc.png","alt":"Screenshot with commit icon","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Review the diff by clicking on the modified file."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/modified-file-6df7aba6538ca739.png","alt":"Screenshot with list of modified files under commit button","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you are finished reviewing the diff, you can close the tab on the (changes) file."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["(Optional) you can deselect the files you want to exclude from the commit."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enter a commit message describing your updates."," ","For example, \"Update index.md\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Commit"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After you commit changes to the branch, open a pull request."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Steps to open a pull request"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create pull request icon"]},", or the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create pull request"]}," button on the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Commit"]}," tab."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/create-pull-request-controls-bd962438ab2355f6.png","alt":"Screenshot of the Commit tab with arrows pointing to Create pull request icon and button","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["(Optional) In the page that opens:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Edit the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Title"]}," to your preference, By default, Reunite uses the first commit message."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Provide a short description for the pull request."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create pull request"]}," button."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/pull-request-form-3d864ed44d4c30c6.png","alt":"Screenshot of the Create pull request page","framed":true,"withLightbox":true},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Preview"]}," button in the top right corner of the page."," ","You might need to wait until the deployment completes before you can access the preview deployment."," ","Otherwise you will be redirected to the deployment details page."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/view-preview-branch-0137483036ac3387.png","alt":"Screenshot of preview drop-down with Preview branch selected","framed":true,"withLightbox":true},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A deployment preview of the project with your changes opens in a separate browser window."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-more-pages","__idx":7},"children":["Add more pages"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You have now updated the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.md"]}," page and seen a deployment preview."," ","Let's return to the editor to make some more changes to your project."," ","To return to the editor, click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Editor"]}," in the navigation pane on the left side of the page."," ","If you only see icons, you may need to click the \"greater than\" symbol to expand the navigation pane."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Since a single Markdown page isn't exciting, you can add a few more."," ","Using the following steps, create the following two new files:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style-guide.md"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["about.md"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create a new Markdown file:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["+"]}," icon in the top right corner of the file tree in your editor."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/add-new-file-bdbd5156bd6d4b1e.png","alt":"Screenshot of the plus icon selected and displaying the dropdown menu","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New file"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enter the file name into the text field and press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["return"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enter"]}," on your keyboard."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add your own content to the Markdown files or use the following example content:"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Example content"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdown","data-title":"style-guide.md","header":{"title":"style-guide.md","controls":{"copy":{}}},"source":"# Style guide\n\n10-second style guide:\n\n- Please write in sentences.\n- Use bullet lists, tables, and subheadings to break up the text.\n- Every page needs links to other interesting pages.\n- Never use future tense.\n\n","lang":"markdown"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdown","data-title":"about.md","header":{"title":"about.md","controls":{"copy":{}}},"source":"# About\n\nThis is an _excellent_ project.\nYou will learn **all** the things.\n\n","lang":"markdown"},"children":[]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"success","name":"Tip"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can turn on word wrap in the editor."," ","Select the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["More actions"]}," menu in the top right corner of the editing pane and select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Word wrap"]},"."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/word-wrap-051d311cfe6bc767.png","alt":"Screenshot showing word wrap option in the editor in Reunite","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-an-api-description","__idx":8},"children":["Add an API description"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly projects often include API reference documentation generated from an API description file, such as OpenAPI."," ","In this step, you can add an OpenAPI file named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openapi.yaml"]}," to the root of the project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can add an API description file to your project in the following ways:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New file"]},": Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["+"]}," icon in the top right corner of the file tree and select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New file"]},"."," ","Enter ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openapi.yaml"]}," as the file name and press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["return"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enter"]}," on your keyboard."," ","You can then paste your OpenAPI content into the editor."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/add-new-file-bdbd5156bd6d4b1e.png","alt":"Screenshot of the plus icon selected and displaying the dropdown menu","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Drag and drop"]},": Drag an existing OpenAPI file from your computer and drop it directly into the file tree pane to upload it."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adding this file allows you to include your API documentation in the navigation."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize-the-sidebar-navigation","__idx":9},"children":["Customize the sidebar navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you add more files to your project, a link to those files is automatically added to the generated sidebar navigation menu."," ","This generated sidebar is based on the file structure of your project."," ","It requires an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.md"]}," file at the root of your project, in other words, not in a folder."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Where is the sidebar?"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The sidebar navigation menu usually displays on the left side of the page in the Webview."," ","However, when the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab is a small width, the menu hides under a slide drawer menu icon in the top right of the tab."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/slide-drawer-icon-82406542f01cfcf2.png","alt":"Screenshot that shows the slide drawer icon in the top right corner of the Webview tab","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To customize the sidebar navigation for your project, you need to add and configure a new file named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," to the root of your project."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-sidebarsyaml-file","__idx":10},"children":["Add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file gives you control over the sidebar navigation menu."," ","You add it as you would any new file."," ","It must be named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file to your project:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["+"]}," icon in the top right corner of the file tree in your editor.\\",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/add-new-file-bdbd5156bd6d4b1e.png","alt":"Screenshot of the plus icon selected and displaying the dropdown menu","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New file"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," as the file name into the text field and press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["return"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enter"]}," on your keyboard."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you have added a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file to your project, you can configure it."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-the-sidebarsyaml-file","__idx":11},"children":["Configure the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After you have added a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file to your project, add to it the pages and links you want included."," ","Use YAML syntax for the sidebar navigation entries."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following sample configuration to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"sidebars.yaml","header":{"title":"sidebars.yaml","controls":{"copy":{}}},"source":"- page: index.md\n  label: Home\n- page: style-guide.md\n- page: about.md\n- group: Museum API\n  items:\n    - page: ./openapi.yaml\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The sample configuration adds the index page with the link text \"Home\" and your new Markdown pages, using the first heading as the link text."," ","It also adds the Museum API reference documentation, generated from the OpenAPI file."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After adding a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file to a project, any pages you want listed in your sidebar navigation, must be included in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You now have more pages and a sidebar to customize the navigation for those pages."," ","Let's update the look and feel of your project to better reflect your brand."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-a-logo","__idx":12},"children":["Add a logo"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["One way to customize your project to better reflect your brand is by updating the logo."," ","To update the logo, you need to add a logo image file to your project, and add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," configuration to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-an-image-file","__idx":13},"children":["Add an image file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Images should be stored in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["images"]}," folders close to the content where they are referenced."," ","Use multiple ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["images"]}," folders throughout your project."," ","For this task, you need an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["images"]}," folder at the root of the project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For the following steps, you can use your own image or download the following sample logo image:"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Download a sample logo image"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use the Redocly logo:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Right-click on the image."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save Image As..."]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo.png"]}," as the name for the image."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select where you want to save the image."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]},"."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/logo-8b3107965e26965b.png","alt":"Redocly logo","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can add an image file to your project by dragging and dropping."," ","Drag the logo image file from your computer and drop it into your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.md"]}," file."," ","Afterward, a correctly formatted image Markdown tag is added to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.md"]}," file."," ","Also, the image is automatically saved to an automatically generated ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["images"]}," folder at the root of your project."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-logo-configuration","__idx":14},"children":["Add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you have your logo added to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["images"]}," folder in your project, you can configure the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," option in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," configuration file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," configuration:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," configuration file in the file tree."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Copy and paste the following configuration into the file using the editor:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"logo:\n  image: ./images/logo.png\n  link: /\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you used a different image or updated the logo name - update the file path in the configuration to reflect your changes."]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The logo updates immediately in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab."," ","If you don't see your changes, try refreshing the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab by clicking the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/use-webview#reload"},"children":["Reload"]}," button."," ","You can also commit your update to view it ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#in-the-deployment-preview"},"children":["in the preview build"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"update-styles","__idx":15},"children":["Update styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize your project's appearance using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-styles"},"children":["CSS variables"]},"."," ","Create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file to override the default styling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-a-theme-folder","__idx":16},"children":["Create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," folder"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["+"]}," icon in the top right corner of the file tree."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/add-new-folder-a576237281d6370b.png","alt":"Screenshot of the plus icon selected and displaying the dropdown menu","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New folder"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enter ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," and press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["return"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enter"]}," on your keyboard."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-a-stylescss-file","__idx":17},"children":["Create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]}," file"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Right-click on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," folder."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New file"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-css-variables","__idx":18},"children":["Add CSS variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]}," file to change the heading color:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n   --heading-text-color: red;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use hexadecimal codes, rgba values, or HTML color names."," ","The editor includes a color picker when you hover over color values."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/color-picker-aa6912e87c3f77a9.png","alt":"Screenshot of the color picker tool in the Reunite editor","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The headings' color updates immediately in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webview"]}," tab."," ","If you don't see your changes, try restarting Webview by clicking the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/use-webview#reload"},"children":["Reload"]}," button."," ","You can also commit your update to view it ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#in-the-deployment-preview"},"children":["in the preview build"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":19},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars"},"children":["Configure sidebars"]}]}," - Configure ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," with nested items and groups for custom navigation structure"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]}]}," - Complete reference for customizing colors, fonts, spacing, and visual styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config"},"children":["Configuration options"]}]}," - All configuration options available in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file for project customization"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/user-profile-menu"},"children":["Reunite user profile menu"]}]}," - Manage notification settings, Git provider connections, and Reunite appearance preferences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/learn/markdoc"},"children":["Markdown overview for technical writers"]}]}," - Learn Markdoc syntax for adding interactive elements to your documentation"]}]}]},"frontmatter":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements","html","img","partial"],"title":"Start with the web editor","lastModified":"2026-10-01T23:00:57.000Z"}