💾 Import and Export

Importing Content

Since WebEdit in its current state is designed to be used in conjunction with Astro, the import process is quite straightforward.

1. The Astro Project needs to be saved on the local machine.

2. On the Dashboard, select “Choose Directory” in the “Import” section. This will open a directory picker.

Note

This directory picker is not the standard input[type="file"] element! The Import (and Export) makes use of the novel FileSystemAccess API, which inconveniently shares its documentation with the regular File System API on MDN.

As of now, the FileSystemAccess API is only supported in modern Chromium-based browsers. This means that every time this API is used, we need to check if the browser supports it.

A helpful function named checkSupportsFileSystemAccess is provided to simplify this process.

If the browser does not support the necessary functions, the user will be asked to switch to a supported browser to use the desired feature.

3. Once the Astro Directory is selected, we will have a FileSystemDirectoryHandle object. This can be used for any CRUD operations on the directory.

Note

In the future, this Handle will be saved persistently in the browser’s storage, so we can access it later without the user having to select the directory again.

4. During the Import Process, WebEdit will iterate over every file in the selected directory.

• For supported text files (.md, .mdx, .json, .yaml), the file is given to an contentIngest function, which will automatically create everything needed for a new content entry.
• For other files, the file is uploaded using the uploadFile function, which will do everything needed to store the file in Garage, our file storage solution.

5. After the import process is finished, the user will be redirected to the newly created Site.

Exporting Content

Warning

Future work

The process of exporting content is not yet implemented in WebEdit. This feature will be added in the future.

For this feature, an export option will be added to the Dashboard. This will allow users to export single content entries, collections, or even entire sites.

This is the reason why we chose the FileSystemAccess API for the import process. Since a Handle allows us all CRUD operations, we can apply the changes made in WebEdit to the local file system, including renaming and deletion of files.

Currently, the feature is supposed to work like this:

1. On a Site, Content Entry, or Collection, the user can select the “Export” option. This will first trigger a check if the browser already has a Handle for the project. If not, the user will be asked to select the Astro Project directory.

2. With the Handle at our disposal, we can now write the changes made in WebEdit to the local file system. This will include creating, updating, and deleting files. Only the files and directories that are part of the selected Site, Collection, or Content Entry will be affected.