docs

Documentation

This directory contains technical documentation for the HiFiBerryOS WebUI project.

Architecture

This project is built on VueJS. VueJS provides a way to seperate different components, thus creating separation of concerns. Using this framework also improves the reusability of code.

The project also uses the pinia store for local storage synchronization.

Folder overview

• .vscode: Recommended VSCode extensions
• debian: Debian packaging files
• debug: Scripts to help debugging the project
• docs: Project documentation
• public: Assets, such as fonts, images or the favicon
• src: Code of the project
• src/api: API abstraction layers
• src/assets: SCSS stuff
• src/components: Components that are used throughout the website
• src/composables: Reuse logic using vue's Composition API
• src/helpers: Useful helpers functions
• src/layouts: Available layouts for vuejs
• src/router: Router definitions. Those file/s in here define what to show when going to what url
• src/services: Functions and types that connect with external services
• src/stores: Pinia stores
• src/types: Types that are used throughout the project
• src/utils: Utility function definitions
• src/views: The different ui views

Available Documentation

• Button System - Comprehensive guide to the button mixin system, including usage examples and best practices
• Known Issues & Fixes - Current issues, fixes needed, and technical notes
• Missing Icons - Icons that are currently missing

Contributing

When adding new components or systems, please:

1. Document any new mixins or utilities in the appropriate files
2. Include usage examples and best practices
3. Update this index file with new documentation links