website-and-documentation/resources/doc-likec4/documentation-platform.c4
Stephan Lo 9aea2a3583 feat(docs): add comprehensive documentation platform architecture and guides
Created a complete documentation system for new documentors, including
interactive architecture diagrams and step-by-step guides for all documentation
workflows.

New LikeC4 architecture project (resources/doc-likec4/):
- Created documentation-platform.c4 model with 252 lines covering:
  * Actors: documentor, reviewer, CI system, edge platform
  * Tools: Hugo, LikeC4, Git, VS Code, markdownlint, htmltest
  * Processes: local development, testing, CI/CD pipeline
  * Repositories: git repo, cloudlet registry
- Defined 6 comprehensive views:
  * overview: Complete documentation platform ecosystem
  * localDevelopment: Local writing and preview workflow
  * cicdPipeline: Automated testing and validation
  * deploymentFlow: From commit to production
  * fullWorkflow: End-to-end documentation lifecycle
  * testingCapabilities: Quality assurance toolchain

New documentation pages (content/en/docs/documentation/):
- _index.md: Overview and introduction for new documentors
- local-development.md: Setting up local environment, live preview
- testing.md: Running markdown, HTML, and link validation
- cicd.md: Understanding automated CI/CD pipeline
- publishing.md: Deployment to Edge Connect Munich cloudlet
- quick-reference.md: Command reference and common tasks

Hugo shortcode for embedding LikeC4 diagrams:
- Created layouts/shortcodes/likec4-view.html
- Supports loading state with animated indicator
- Graceful error handling for missing views
- Automatic shadow DOM checking to ensure webcomponent loaded
- Usage: {{< likec4-view view="viewId" project="projectName" >}}

Supporting documentation:
- resources/LIKEC4-REGENERATION.md: Guide for regenerating webcomponents
- All diagrams are interactive and explorable in the browser
- Views include zoom, pan, and element inspection

This implementation provides:
1. Self-documenting documentation platform ("meta-documentation")
2. Visual learning for complex workflows via interactive diagrams
3. Clear separation of concerns (6 focused views vs 1 overwhelming diagram)
4. Onboarding path for new team members
5. Living architecture documentation that evolves with the platform

All new documentation passes markdown linting and builds successfully.
2025-11-07 11:50:58 +01:00

371 lines
8.9 KiB
Text

specification {
element person {
style {
shape person
}
}
element system {
style {
shape rectangle
}
}
element tool {
style {
shape rectangle
}
}
element component {
style {
shape rectangle
}
}
element process {
style {
shape rectangle
}
}
element environment {
style {
shape cylinder
}
}
element repository {
style {
shape storage
}
}
}
model {
// === Personas ===
documentor = person 'Documentor' {
description 'Content creator and maintainer of the developer platform documentation'
technology 'Hugo, Markdown, LikeC4'
}
// === Documentation Platform System ===
docPlatform = system 'Documentation Platform' {
description 'Hugo-based documentation system with integrated architecture visualization'
// Core Components
hugoSite = component 'Hugo Site' {
description 'Static site generator based on Hugo with Docsy theme'
technology 'Hugo Extended, Docsy'
}
contentRepo = repository 'Content Repository' {
description 'Markdown files, images, and configuration'
technology 'Git, Markdown'
contentPages = component 'Content Pages' {
description 'Documentation pages in Markdown format'
technology 'Markdown'
}
archModels = component 'Architecture Models' {
description 'LikeC4 architecture models and views'
technology 'LikeC4 DSL'
}
assets = component 'Static Assets' {
description 'CSS, JavaScript, images, fonts'
technology 'CSS, JavaScript'
}
}
likec4Integration = component 'LikeC4 Integration' {
description 'Architecture diagram visualization embedded in documentation'
technology 'LikeC4, Web Components'
}
// Build & Development Tools
taskfile = tool 'Taskfile' {
description 'Task automation for local development, build, and testing'
technology 'Task (go-task)'
}
devServer = process 'Development Server' {
description 'Local Hugo server with hot reload for content development'
technology 'Hugo Server'
}
}
// === CI/CD Pipeline ===
cicdPipeline = system 'CI/CD Pipeline' {
description 'Automated testing and deployment pipeline'
githubActions = process 'GitHub Actions' {
description 'Automated testing workflow on push/PR'
technology 'GitHub Actions'
testBuild = component 'Build Test' {
description 'Hugo build validation'
technology 'Hugo'
}
testMarkdown = component 'Markdown Lint' {
description 'Markdown syntax and style checking'
technology 'markdownlint'
}
testHtml = component 'HTML Validation' {
description 'Generated HTML validation'
technology 'htmlvalidate'
}
testLinks = component 'Link Checker' {
description 'Broken link detection'
technology 'htmltest'
}
}
containerBuild = process 'Container Build' {
description 'OCI/Docker image creation with Hugo site'
technology 'Docker'
}
}
// === Deployment ===
deploymentEnv = system 'Deployment Environment' {
description 'Edge deployment infrastructure'
edgeConnect = environment 'Edge Connect' {
description 'Edge deployment orchestration platform'
technology 'EdgeConnect'
}
k8sCluster = environment 'Kubernetes Cluster' {
description 'K8s cluster on edge cloudlet (Munich)'
technology 'Kubernetes'
docService = component 'Documentation Service' {
description 'LoadBalancer service exposing docs on port 80'
technology 'K8s Service'
}
docDeployment = component 'Documentation Deployment' {
description 'Pod running Hugo-generated static site'
technology 'K8s Deployment, Nginx'
}
}
}
// === Relationships: Documentor Workflow ===
documentor -> contentRepo.contentPages 'writes documentation' {
description 'Creates and updates Markdown content'
}
documentor -> contentRepo.archModels 'creates architecture models' {
description 'Defines C4 models with LikeC4 DSL'
}
documentor -> taskfile 'executes local tasks' {
description 'task serve, task build, task test'
}
// === Relationships: Local Development ===
taskfile -> devServer 'starts' {
description 'task serve'
}
devServer -> hugoSite 'renders' {
description 'Live reload on content changes'
}
hugoSite -> contentRepo 'reads content from' {
description 'Processes Markdown and templates'
}
hugoSite -> likec4Integration 'integrates' {
description 'Embeds architecture diagrams'
}
likec4Integration -> contentRepo.archModels 'visualizes' {
description 'Renders C4 models as interactive diagrams'
}
// === Relationships: Testing ===
taskfile -> githubActions.testBuild 'can run locally' {
description 'task test:build'
}
taskfile -> githubActions.testMarkdown 'can run locally' {
description 'task test:markdown'
}
taskfile -> githubActions.testHtml 'can run locally' {
description 'task test:html'
}
taskfile -> githubActions.testLinks 'can run locally' {
description 'task test:links'
}
// === Relationships: CI/CD ===
contentRepo -> githubActions 'triggers on push/PR' {
description 'Webhook on main branch'
}
githubActions.testBuild -> hugoSite 'builds' {
description 'hugo --gc --minify'
}
githubActions.testMarkdown -> contentRepo.contentPages 'validates' {
description 'Lints Markdown files'
}
githubActions.testHtml -> hugoSite 'validates output' {
description 'Checks generated HTML'
}
githubActions.testLinks -> hugoSite 'checks links in' {
description 'Detects broken links'
}
githubActions -> containerBuild 'triggers on success' {
description 'Builds Docker image with Hugo output'
}
containerBuild -> hugoSite 'packages' {
description 'public/ directory served by Nginx'
}
// === Relationships: Deployment ===
containerBuild -> deploymentEnv.edgeConnect 'pushes image to' {
description 'Tagged container image'
}
deploymentEnv.edgeConnect -> deploymentEnv.k8sCluster 'deploys to' {
description 'Via edgeconnectdeployment.yaml'
}
deploymentEnv.k8sCluster.docDeployment -> deploymentEnv.k8sCluster.docService 'exposed by' {
description 'Port 80'
}
documentor -> deploymentEnv.k8sCluster.docService 'views published docs' {
description 'HTTPS access to live documentation'
}
}
// === Views ===
views {
view overview of docPlatform {
title 'Documentation Platform Overview'
description 'High-level overview of the Hugo-based documentation platform for documentors'
include *
style documentor {
color green
}
style docPlatform {
color blue
}
}
view localDevelopment of docPlatform {
title 'Local Development Workflow'
description 'How a documentor works locally with the documentation'
include documentor
include docPlatform
include docPlatform.contentRepo -> *
include docPlatform.hugoSite
include docPlatform.likec4Integration
include docPlatform.taskfile
include docPlatform.devServer
style documentor {
color green
}
style docPlatform.taskfile {
color amber
}
style docPlatform.devServer {
color amber
}
}
view cicdPipeline of cicdPipeline {
title 'CI/CD Pipeline'
description 'Automated testing and container build process'
include cicdPipeline
include cicdPipeline.githubActions -> *
include cicdPipeline.containerBuild
include docPlatform.contentRepo
include docPlatform.hugoSite
style cicdPipeline.githubActions {
color blue
}
style cicdPipeline.containerBuild {
color indigo
}
}
view deploymentFlow {
title 'Deployment to Edge Environment'
description 'How the documentation is deployed to the edge infrastructure'
include cicdPipeline.containerBuild
include deploymentEnv
include deploymentEnv.edgeConnect
include deploymentEnv.k8sCluster -> *
include documentor
style deploymentEnv {
color muted
}
style deploymentEnv.k8sCluster {
color secondary
}
}
view fullWorkflow {
title 'Complete Documentor Workflow'
description 'End-to-end view from content creation to published documentation'
include documentor
include docPlatform.contentRepo
include docPlatform.taskfile
include cicdPipeline.githubActions
include cicdPipeline.containerBuild
include deploymentEnv.edgeConnect
include deploymentEnv.k8sCluster
style documentor {
color green
}
style docPlatform.taskfile {
color amber
}
style cicdPipeline.githubActions {
color blue
}
style deploymentEnv.k8sCluster {
color secondary
}
}
view testingCapabilities of cicdPipeline.githubActions {
title 'Testing Capabilities'
description 'All automated tests that ensure documentation quality'
include *
include docPlatform.hugoSite
include docPlatform.contentRepo.contentPages
include docPlatform.taskfile
style cicdPipeline.githubActions {
color blue
}
}
}