Sebastian Krüger
a71eef9006
This commit introduces a comprehensive collection of utility scripts for shell automation, color manipulation, and documentation generation: Core Scripts: - artifact_github_download.sh: Download GitHub Action artifacts via CLI - css_color_filter.sh: Generate CSS filter values using SPSA algorithm - css_color_palette.sh: Generate comprehensive color palettes (monochromatic, triadic, etc.) - css_json_convert.sh: Convert CSS variables to JSON/YAML formats - doc_bash_generate.sh: Auto-generate README.md with animated GIF demos - doc_rust_generate.sh: Generate Rust project documentation - jinja_template_render.sh: Render Jinja2 templates from CLI - mime_mp4_gif.sh: Convert MP4 videos to GIF format Documentation Features: - Comprehensive README.md with table of contents - 8 animated GIF demos showing real command examples - Sandboxed demo execution in temporary directories - 15-second timeout protection for intensive computations - Automatic example extraction from --help output Technical Implementation: - Pure bash color utilities using only bc for arithmetic - tput-based color codes for portability - IFS-safe string parsing using parameter expansion - Stdout/stderr isolation to prevent contamination - Base64 encoding for multi-line text preservation All scripts include detailed --help documentation with usage examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2.7 KiB
Django/Jinja
91 lines
2.7 KiB
Django/Jinja
<script type="module">
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'dark',
|
|
themeVariables: {
|
|
primaryColor: '{{primaryColor}}',
|
|
primaryTextColor: '{{primaryTextColor}}',
|
|
primaryBorderColor: '{{primaryBorderColor}}',
|
|
lineColor: '{{lineColor}}',
|
|
secondaryColor: '#{{secondaryColor}}',
|
|
tertiaryColor: '{{secondaryColor}}',
|
|
background: '{{background}}',
|
|
mainBkg: '{{mainBkg}}',
|
|
secondBkg: '{{secondBkg}}',
|
|
border1: '{{border1}}',
|
|
border2: '{{border2}}',
|
|
note: '{{note}}',
|
|
noteBkgColor: '{{noteBkgColor}}',
|
|
noteTextColor: '{{noteTextColor}}',
|
|
noteBorderColor: '{{noteBorderColor}}',
|
|
arrowheadColor: '{{arrowheadColor}}',
|
|
fontFamily: '{{fontFamily}}',
|
|
fontSize: '{{fontSize}}',
|
|
darkMode: '{{darkMode}}',
|
|
edgeLabelBackground: '{{edgeLabelBackground}}',
|
|
clusterBkg: '{{clusterBkg}}',
|
|
clusterBorder: '{{clusterBorder}}',
|
|
defaultLinkColor: '{{defaultLinkColor}}',
|
|
titleColor: '{{titleColor}}',
|
|
nodeTextColor: '{{nodeTextColor}}'
|
|
},
|
|
flowchart: {
|
|
htmlLabels: true,
|
|
curve: 'basis',
|
|
useMaxWidth: true,
|
|
padding: 20
|
|
},
|
|
securityLevel: 'loose'
|
|
});
|
|
|
|
// Use both DOMContentLoaded and load events for better compatibility
|
|
function initMermaid() {
|
|
const mermaidBlocks = document.querySelectorAll(
|
|
'pre.language-mermaid code'
|
|
);
|
|
|
|
if (mermaidBlocks.length === 0) {
|
|
console.log('No mermaid blocks found');
|
|
return;
|
|
}
|
|
|
|
console.log(`Found ${mermaidBlocks.length} mermaid blocks, converting...`);
|
|
|
|
mermaidBlocks.forEach((block, index) => {
|
|
const mermaidDiv = document.createElement('div');
|
|
mermaidDiv.className = 'mermaid';
|
|
mermaidDiv.id = `mermaid-diagram-${index}`;
|
|
mermaidDiv.textContent = block.textContent;
|
|
block.parentElement.replaceWith(mermaidDiv);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
mermaid
|
|
.run()
|
|
.then(() => {
|
|
console.log('Mermaid diagrams rendered successfully');
|
|
})
|
|
.catch((err) => {
|
|
console.error('Mermaid rendering error:', err);
|
|
});
|
|
}, 100);
|
|
}
|
|
|
|
// Try multiple event listeners to ensure it runs
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initMermaid);
|
|
} else {
|
|
// DOM already loaded
|
|
initMermaid();
|
|
}
|
|
|
|
window.addEventListener('load', () => {
|
|
// Failsafe: run again on window load if diagrams still missing
|
|
if (document.querySelectorAll('.mermaid svg').length === 0) {
|
|
initMermaid();
|
|
}
|
|
});
|
|
</script>
|