Stephan Lo
8785b327dd
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
183 lines
No EOL
5.5 KiB
TOML
183 lines
No EOL
5.5 KiB
TOML
baseURL = "https://example.docsy.dev/"
|
|
title = "IPCEI-CIS Developer Framework"
|
|
|
|
# Language settings
|
|
contentDir = "content/en"
|
|
defaultContentLanguage = "en"
|
|
defaultContentLanguageInSubdir = false
|
|
# Useful when translating.
|
|
enableMissingTranslationPlaceholders = true
|
|
|
|
enableRobotsTXT = true
|
|
|
|
# Will give values to .Lastmod etc.
|
|
enableGitInfo = true
|
|
|
|
# Comment out to enable taxonomies in Docsy
|
|
# disableKinds = ["taxonomy", "taxonomyTerm"]
|
|
|
|
# You can add your own taxonomies
|
|
[taxonomies]
|
|
tag = "tags"
|
|
category = "categories"
|
|
|
|
[params.taxonomy]
|
|
# set taxonomyCloud = [] to hide taxonomy clouds
|
|
taxonomyCloud = ["tags", "categories"]
|
|
|
|
# If used, must have same length as taxonomyCloud
|
|
taxonomyCloudTitle = ["Tag Cloud", "Categories"]
|
|
|
|
# set taxonomyPageHeader = [] to hide taxonomies on the page headers
|
|
taxonomyPageHeader = ["tags", "categories"]
|
|
|
|
|
|
# Highlighting config
|
|
pygmentsCodeFences = true
|
|
pygmentsUseClasses = false
|
|
# Use the new Chroma Go highlighter in Hugo.
|
|
pygmentsUseClassic = false
|
|
#pygmentsOptions = "linenos=table"
|
|
# See https://help.farbox.com/pygments.html
|
|
pygmentsStyle = "tango"
|
|
|
|
# Configure how URLs look like per section.
|
|
[permalinks]
|
|
blog = "/:section/:year/:month/:day/:slug/"
|
|
|
|
# Image processing configuration.
|
|
[imaging]
|
|
resampleFilter = "CatmullRom"
|
|
quality = 75
|
|
anchor = "smart"
|
|
|
|
# Language configuration
|
|
|
|
[languages]
|
|
[languages.en]
|
|
languageName ="English"
|
|
# Weight used for sorting.
|
|
weight = 1
|
|
[languages.en.params]
|
|
title = "IPCEI-CIS"
|
|
description = "Developer Framework Documentation"
|
|
|
|
[markup]
|
|
[markup.goldmark]
|
|
[markup.goldmark.parser.attribute]
|
|
block = true
|
|
[markup.goldmark.renderer]
|
|
unsafe = true
|
|
[markup.highlight]
|
|
# See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
|
|
style = "tango"
|
|
# Uncomment if you want your chosen highlight style used for code blocks without a specified language
|
|
# guessSyntax = "true"
|
|
|
|
# Everything below this are Site Params
|
|
|
|
# Comment out if you don't want the "print entire section" link enabled.
|
|
[outputs]
|
|
section = ["HTML", "print", "RSS"]
|
|
|
|
[params]
|
|
privacy_policy = "https://policies.google.com/privacy"
|
|
|
|
# First one is picked as the Twitter card image if not set on page.
|
|
# images = ["images/project-illustration.png"]
|
|
|
|
# Menu title if your navbar has a versions selector to access old versions of your site.
|
|
# This menu appears only if you have at least one [params.versions] set.
|
|
version_menu = "Releases"
|
|
|
|
# Flag used in the "version-banner" partial to decide whether to display a
|
|
# banner on every page indicating that this is an archived version of the docs.
|
|
# Set this flag to "true" if you want to display the banner.
|
|
archived_version = false
|
|
|
|
# The version number for the version of the docs represented in this doc set.
|
|
# Used in the "version-banner" partial to display a version number for the
|
|
# current doc set.
|
|
version = "0.0"
|
|
|
|
# A link to latest version of the docs. Used in the "version-banner" partial to
|
|
# point people to the main doc site.
|
|
url_latest_version = "https://example.com"
|
|
|
|
# Specify a value here if your content directory is not in your repo's root directory
|
|
# github_subdir = ""
|
|
|
|
# Uncomment this if your GitHub repo does not have "main" as the default branch,
|
|
# or specify a new value if you want to reference another branch in your GitHub links
|
|
github_branch= "main"
|
|
|
|
# Google Custom Search Engine ID. Remove or comment out to disable search.
|
|
gcs_engine_id = "d72aa9b2712488cc3"
|
|
|
|
# Enable Lunr.js offline search
|
|
offlineSearch = false
|
|
|
|
# Enable syntax highlighting and copy buttons on code blocks with Prism
|
|
prism_syntax_highlighting = false
|
|
|
|
[params.copyright]
|
|
authors = "IPCEIS-CIS Authors | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0) | "
|
|
from_year = 2024
|
|
|
|
# User interface configuration
|
|
[params.ui]
|
|
# Set to true to disable breadcrumb navigation.
|
|
breadcrumb_disable = false
|
|
# Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top navbar
|
|
navbar_logo = false
|
|
# Set to true if you don't want the top navbar to be translucent when over a `block/cover`, like on the homepage.
|
|
navbar_translucent_over_cover_disable = false
|
|
# Enable to show the side bar menu in its compact state.
|
|
sidebar_menu_compact = true
|
|
# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
|
|
sidebar_search_disable = true
|
|
|
|
|
|
# Adds a reading time to the top of each doc.
|
|
# If you want this feature, but occasionally need to remove the Reading time from a single page,
|
|
# add "hide_readingtime: true" to the page's front matter
|
|
[params.ui.readingtime]
|
|
enable = false
|
|
|
|
|
|
# hugo module configuration
|
|
|
|
[module]
|
|
# Uncomment the next line to build and serve using local docsy clone declared in the named Hugo workspace:
|
|
# workspace = "docsy.work"
|
|
[module.hugoVersion]
|
|
extended = true
|
|
min = "0.151.0"
|
|
[[module.imports]]
|
|
path = "github.com/google/docsy"
|
|
disable = false
|
|
|
|
[params.mermaid]
|
|
version = "10.9.0"
|
|
|
|
[params.markmap]
|
|
enable = true
|
|
|
|
[params.plantuml]
|
|
enable = true
|
|
theme = "default"
|
|
|
|
# Set url to plantuml server
|
|
# default is http://www.plantuml.com/plantuml/svg/
|
|
svg_image_url = "https://www.plantuml.com/plantuml/svg/"
|
|
|
|
# By default the plantuml implementation uses <img /> tags to display UML diagrams.
|
|
# When svg is set to true, diagrams are displayed using <svg /> tags, maintaining functionality like links e.g.
|
|
# default = false
|
|
svg = true
|
|
|
|
# LikeC4 interactive architecture diagrams configuration
|
|
[params.likec4]
|
|
enable = true
|
|
# The webcomponent file will be generated from resources/likec4 and placed in static/js/
|
|
webcomponent_file = "likec4-webcomponent.js" |