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:
Stephan Lo 2025-11-07 11:50:17 +01:00
parent 76937ccadf
commit 3239cfbc62
89 changed files with 520 additions and 130 deletions

View file

@ -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

View file

@ -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
```