website-and-documentation/resources/doc-likec4/documentation-platform.c4

372 lines
8.9 KiB
Text
Raw Normal View History

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