reorganize and manage assets with Vite

[DocArmoryTech]

Description

This branch addresses issues in the website/app/static/ directory, unused and misplaced assets, JavaScript bundles of unclear origin.

The changes introduce Vite as a build tool into a new website/app/assets/ directory. The primary goals are to improve maintainability, enhance clarity of asset origins, and streamline the build process.

Motivation and Context

The static/ directory previously included:

• Numerous unused assets
• Improperly placed assets
• Unclear bundle origins (markdown-it.js, mermaid-markdown.js, editor.js) lacked clear source code or build processes.

These changes introduce a structured approach to asset management, leveraging Vite for bundling and optimization, and ensure that all assets are correctly placed and referenced in the Flask app.

Changes

1. Introduced Vite Build Tool

• Added Vite to manage and bundle static assets, improving build performance and enabling modern JavaScript workflows.
• Created configuration files:
  • vite.config.mjs: Base configuration for general asset processing.
  • vite.editor.config.js: Specific configuration for building editor.js.
  • vite.markdown-it.config.js: Specific configuration for building markdown-it.js.
  • vite.mermaid-markdown.config.js: Specific configuration for building mermaid-markdown.js.
• Added package.json and package-lock.json to define dependencies and ensure reproducible builds.

2. Created website/app/assets/ Directory

• Introduced a new website/app/assets/ directory to house source assets and build configurations:

  website/app/assets/
  ├── package.json
  ├── package-lock.json
  ├── src
  │   ├── css
  │   │   └── core.css
  │   └── js
  │       ├── editor.js
  │       ├── markdown-it.js
  │       └── mermaid-markdown.js
  ├── vite.config.mjs
  ├── vite.editor.config.js
  ├── vite.markdown-it.config.js
  └── vite.mermaid-markdown.config.js
  

• The src/ subdirectory organizes source CSS and JavaScript files, improving clarity and maintainability.

3. Rebuilt JavaScript Bundles

• Analyzed three JavaScript bundles of unclear origin: markdown-it.js, mermaid-markdown.js, and editor.js.
• Derived source JavaScript for each bundle and configured Vite to generate equivalent outputs.
• Ensured the rebuilt bundles maintain identical functionality while providing transparency.

4. Reorganized and Copied Assets

• Used Vite to copy assets to appropriate locations in website/app/static/ (e.g., static/css/, static/js/, static/fonts/).
• Created a clear directory structure in static/ to reflect asset types, improving accessibility for developers and the Flask app.
• Transformed FontAwesome CSS URLs referencing ../webfonts to ../../fonts/vendors to ensure correct resolution of font files.

[adulau]

Thanks a lot for the PR. I assigned @DavidCruciani who is the one leading the web interface part of the modules.

[adulau]

Thanks a lot for the PR. I assigned @DavidCruciani who is the one leading the web interface part of the modules.