Sites Edit Overview

The Sites Edit page in VpAdmin provides a powerful and streamlined interface for managing and editing your websites, simplifying the entire publishing process from content creation to deployment. It combines a file tree view, a markdown/code editor, and robust version control tools, empowering you to fine-tune your site's content, structure, and deployment workflow with ease.

Overview

The page is divided into three main sections:

1. Left Sidebar: Provides access to the project file tree, various actions, and project-related information.

2. Resizer: A draggable separator used to adjust the width of the left sidebar.

3. Main Content Area: Displays the file content in an editor, tabs for different open files, and project management tools.

   

Left Sidebar

The left sidebar is designed for project navigation and management, and it includes several key components:

Header Toggle

• Functionality: Toggles the visibility of the header section, which contains the project selector, refresh button, and project quota progress.

• Action: Clicking the header-toggle icon toggles the header visibility.

Project Selector

• Functionality: Select a project that you want to edit.

• Action: Click the dropdown, and choose the project from the list.

Project Quota Progress

• Functionality: Displays the current site usage quota. The displayed storage capacity will vary based on the selected pricing plan for your site. For more details, please refer to Prices.

• Screenshot of Project Quota Progress:

  

Action Bar

• Functionality: Provides a set of buttons to manage the files and make changes to your site.

• Layout: The action bar includes the following buttons:

  • Show Recovery Points: Allows you to access and manage recovery points for your project, helping you revert to earlier versions.
  • Save All: Saves all the changes that you have made.
  • Expand All: Expands all the nodes in the file tree.
  • Collapse All: Collapses all the nodes in the file tree.
  • Show/Hide All Files: Toggles the display of all files or only those related to your site's content.
  • Download Project: Downloads a zip file containing your site files.
  • Show/Hide Changed Files: Toggles the display of changed files in the tree.
  • View History: Opens the commit history, allowing you to revert to a previous version.
  • Submit Changes: Submits your selected changed files as a new version of your site, but does not publish the modifications.
  • Publish Project: Publishes your website, making the changes live on your domain.

• Screenshot of Action Bar:

  

Publication Progress Bar

• Functionality: Displays the current progress of your site publication or the result of the most recent publication.

• Action: Click on the "+" button to hide/show details about the current progress. If the current site is not publishing, the result of the last publication will be displayed. If the last publication failed, you can view the error logs.

File Tree

• Functionality: Displays the site file structure, allowing you to navigate and select files for editing.

• Features:

  • Navigation: Use the arrow icon to expand and collapse folders.
  • File Selection: Click the file name to open the file in the editor.
  • Drag and Drop: Drag and drop files to organize your site; you can also drag and drop local files to upload to your site.
  • Context Menu: Hover over the context menu button to reveal a dropdown menu offering more node-related operations.

Changed Files View

• Functionality: Displays all the files that you have modified, with a status indicator. You can also compare the changes and revert modifications.

Version History View

• Functionality: Shows the history of your versions, allowing you to navigate through the project's version and revert your site to a specific version. Note: This will lose all changes made after this version. The system will automatically create a recovery point to save the current site state. Additionally, versions with a green icon have been published, while versions with a gray icon have not yet been published online.

Resizer

• Functionality: Allows you to resize the width of the left sidebar by dragging it left or right.

Main Content Area

The main content area provides an interface for viewing and editing different file formats and project details.

Tabs

• Functionality: Displays multiple open files as tabs, allowing for easy navigation.
• Features:

  • Tab Label: Shows the file name and indicates unsaved or saving status using a dot and a loading indicator.

  • Right-click Menu: Right-click a tab to access options like: close, refresh.

    

File Editor

• Functionality: Provides an editor to view and edit file content based on different formats, including markdown, code, and image.

• Features:

  • Markdown Editor: Supports rich formatting, real-time preview, and saving of Markdown documents.
  • Code Editor: Supports syntax highlighting and editing of code files.
  • Image Viewer: Displays image files.
  • Diff View: Shows the changes between two versions.

Conclusion

The Sites Edit page in VpAdmin provides a streamlined environment for website content management, enabling you to easily navigate your project, edit files, and deploy changes effectively, all while benefiting from robust version control and simplified publishing workflows. With its intuitive design and powerful features, you can seamlessly maintain and update your websites through VpAdmin.