Frontend Lib Content Components screenshot

Frontend Lib Content Components

Updated: 18 Oct 2024
11 Stars

[Moved to openedx/frontend-app-course-authoring] A library of high-level components for content handling (viewing, editing, etc. of HTML, video, problems, etc.), to be shared by multiple MFEs.

Overview

The frontend-lib-content-components is designed to provide a library of high-level components specifically for handling various content types such as HTML, video, and problems. This library aims to streamline the processes of viewing and editing these content types across multiple Micro Frontends (MFEs), allowing developers to create more consistent and efficient user experiences. Despite being unsupported and no longer receiving updates, the foundational code has been successfully integrated into the frontend-app-course-authoring repository, which paves the way for continued development.

Setting up this library requires a functional development environment, and the provided instructions guide you through the necessary steps to integrate it into your existing workflow. Leveraging these components can greatly enhance the authoring experience, particularly with the introduction of customizable Xblock editors. Even though the gallery view of the editor components may not fully capture all intended behaviors, it’s an excellent resource for rapid UI iteration.

Features

  • High-level Components: Simplifies the process of viewing and editing various content formats, enhancing development efficiency and user experience.
  • Micro Frontend Compatibility: Designed to be shared across multiple MFEs, promoting consistency in content handling.
  • Custom Xblock Editor Development: Enables developers to quickly create and configure custom editors tailored to specific content requirements.
  • Gallery View: Offers a live demo environment for faster UI-related changes, showcasing editor components with mocked-out data.
  • Integration with Studio: Easily integrate new editors into the Studio environment through a series of flags and Django Admin configurations.
  • Development Setup Guide: Comprehensive instructions ensure a smooth setup of the development workflow, even for those new to the environment.
  • Service Configuration: Clearly outlines the minimum services required to run the library, aiding in effective project management.