refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents
Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
This commit is contained in:
parent
76937ccadf
commit
3239cfbc62
89 changed files with 520 additions and 130 deletions
|
|
@ -25,12 +25,12 @@ This document describes the high-level architecture of our Enterprise Developmen
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let attempts = 0;
|
||||
const maxAttempts = 10;
|
||||
|
||||
|
||||
function checkLikeC4Loading() {
|
||||
attempts++;
|
||||
const component = document.querySelector('likec4-view');
|
||||
const loading = document.getElementById('likec4-loading');
|
||||
|
||||
|
||||
if (component && component.shadowRoot && component.shadowRoot.children.length > 0) {
|
||||
if (loading) loading.style.display = 'none';
|
||||
console.log('LikeC4 component loaded successfully');
|
||||
|
|
@ -44,7 +44,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
setTimeout(checkLikeC4Loading, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Check if LikeC4 loader is available
|
||||
if (typeof window.customElements !== 'undefined') {
|
||||
setTimeout(checkLikeC4Loading, 1500);
|
||||
|
|
@ -110,11 +110,11 @@ The interactive diagram above shows the relationships between different componen
|
|||
|
||||
To update or modify the architecture diagrams:
|
||||
|
||||
1. Edit the `.c4` files in `resources/likec4/`
|
||||
1. Edit the `.c4` files in `resources/edp-likec4/`
|
||||
2. Regenerate the webcomponent:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
npx likec4 codegen webcomponent \
|
||||
--webcomponent-prefix likec4 \
|
||||
--outfile ../../static/js/likec4-webcomponent.js
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ LikeC4 enables you to create interactive C4 architecture diagrams as code. The d
|
|||
Navigate to the LikeC4 directory and install dependencies:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
npm install
|
||||
```
|
||||
|
||||
|
|
@ -39,6 +39,7 @@ npx likec4 codegen webcomponent \
|
|||
```
|
||||
|
||||
This command:
|
||||
|
||||
- Reads all `.c4` files from `models/` and `views/`
|
||||
- Generates a single JavaScript file with all architecture views
|
||||
- Outputs to `static/js/likec4-webcomponent.js`
|
||||
|
|
@ -54,8 +55,8 @@ The integration should already be configured in:
|
|||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
resources/likec4/
|
||||
```plaintext
|
||||
resources/edp-likec4/
|
||||
├── models/ # C4 model definitions
|
||||
│ ├── components/ # Component models
|
||||
│ ├── containers/ # Container models
|
||||
|
|
@ -93,11 +94,12 @@ Add this to any Markdown file:
|
|||
To find available view IDs, search the `.c4` files:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
grep -r "view\s\+\w" views/ models/ --include="*.c4"
|
||||
```
|
||||
|
||||
Common views:
|
||||
|
||||
- `otc-faas` - OTC FaaS deployment
|
||||
- `edp` - EDP overview
|
||||
- `landscape` - Developer landscape
|
||||
|
|
@ -128,14 +130,14 @@ Click on components in the diagram to explore the architecture.
|
|||
|
||||
### 1. Modify Architecture Models
|
||||
|
||||
Edit the `.c4` files in `resources/likec4/`:
|
||||
Edit the `.c4` files in `resources/edp-likec4/`:
|
||||
|
||||
```bash
|
||||
# Edit a model
|
||||
vi resources/likec4/models/containers/argocd.c4
|
||||
vi resources/edp-likec4/models/containers/argocd.c4
|
||||
|
||||
# Or edit a view
|
||||
vi resources/likec4/views/deployment/otc/otc-faas.c4
|
||||
vi resources/edp-likec4/views/deployment/otc/otc-faas.c4
|
||||
```
|
||||
|
||||
### 2. Preview Changes Locally
|
||||
|
|
@ -143,7 +145,7 @@ vi resources/likec4/views/deployment/otc/otc-faas.c4
|
|||
Use the LikeC4 CLI to preview:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
|
||||
# Start preview server
|
||||
npx likec4 start
|
||||
|
|
@ -156,7 +158,7 @@ npx likec4 start
|
|||
After making changes:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
npx likec4 codegen webcomponent \
|
||||
--webcomponent-prefix likec4 \
|
||||
--outfile ../../static/js/likec4-webcomponent.js
|
||||
|
|
@ -178,7 +180,7 @@ hugo server -D
|
|||
Commit both the model files and the regenerated web component:
|
||||
|
||||
```bash
|
||||
git add resources/likec4/
|
||||
git add resources/edp-likec4/
|
||||
git add static/js/likec4-webcomponent.js
|
||||
git commit -m "feat: update architecture diagrams"
|
||||
```
|
||||
|
|
@ -242,12 +244,15 @@ Then update `layouts/partials/hooks/head-end.html`:
|
|||
|
||||
1. **Check browser console** (F12 → Console)
|
||||
2. **Verify webcomponent exists:**
|
||||
|
||||
```bash
|
||||
ls -lh static/js/likec4-webcomponent.js
|
||||
```
|
||||
|
||||
3. **Regenerate if missing:**
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
npm install
|
||||
npx likec4 codegen webcomponent \
|
||||
--webcomponent-prefix likec4 \
|
||||
|
|
@ -258,8 +263,9 @@ Then update `layouts/partials/hooks/head-end.html`:
|
|||
|
||||
- Check view ID matches exactly (case-sensitive)
|
||||
- Search for the view in `.c4` files:
|
||||
|
||||
```bash
|
||||
grep -r "view otc-faas" resources/likec4/
|
||||
grep -r "view otc-faas" resources/edp-likec4/
|
||||
```
|
||||
|
||||
### Styling Issues
|
||||
|
|
@ -272,7 +278,7 @@ Then update `layouts/partials/hooks/head-end.html`:
|
|||
If LikeC4 codegen fails:
|
||||
|
||||
```bash
|
||||
cd resources/likec4
|
||||
cd resources/edp-likec4
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue