init - PoC works
This commit is contained in:
commit
6209600037
GPG key ID:
CA295D643074C68C
5 changed files with 483 additions and 0 deletions
8
Dockerfile
Normal file
8
Dockerfile
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
# nginxinc/nginx-unprivileged runs as uid 101 on port 8080 — no root needed
|
||||||
|
FROM docker.io/nginxinc/nginx-unprivileged:alpine
|
||||||
|
|
||||||
|
# Copy app files
|
||||||
|
COPY --chown=101:101 index.html app.js /usr/share/nginx/html/
|
||||||
|
COPY --chown=101:101 nginx-container.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
EXPOSE 8080
|
||||||
16
README.md
Normal file
16
README.md
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
# Another Mermaid Thing
|
||||||
|
|
||||||
|
Early stage, but should be working.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- local only
|
||||||
|
- stores to localstorage
|
||||||
|
- preview in iFrame for some form of sandbox
|
||||||
|
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
- please use reverse proxy with strict CSP options if hosted online
|
||||||
|
|
||||||
|
Download and run. Container follows.
|
||||||
187
app.js
Normal file
187
app.js
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
mermaid.initialize({ startOnLoad: false, theme: 'dark' });
|
||||||
|
|
||||||
|
const editor = document.getElementById('editor');
|
||||||
|
const status = document.getElementById('status');
|
||||||
|
const previewArea = document.getElementById('previewArea');
|
||||||
|
const panLayer = document.getElementById('pan-layer');
|
||||||
|
const svgFrame = document.getElementById('svg-frame');
|
||||||
|
const overlay = document.getElementById('overlay');
|
||||||
|
const placeholder = document.getElementById('placeholder');
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'mermaid-editor-content';
|
||||||
|
|
||||||
|
const DEFAULT = `flowchart TD
|
||||||
|
A[Start] --> B{Decision}
|
||||||
|
B -->|Yes| C[Do the thing]
|
||||||
|
B -->|No| D[Skip it]
|
||||||
|
C --> E[End]
|
||||||
|
D --> E`;
|
||||||
|
|
||||||
|
editor.value = localStorage.getItem(STORAGE_KEY) ?? DEFAULT;
|
||||||
|
|
||||||
|
editor.addEventListener('input', () => {
|
||||||
|
localStorage.setItem(STORAGE_KEY, editor.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Render ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
let lastSvg = null;
|
||||||
|
|
||||||
|
async function render() {
|
||||||
|
const code = editor.value.trim();
|
||||||
|
if (!code) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const id = 'mermaid-' + Date.now();
|
||||||
|
const { svg } = await mermaid.render(id, code);
|
||||||
|
lastSvg = svg;
|
||||||
|
|
||||||
|
const { w, h } = parseSvgSize(svg);
|
||||||
|
svgFrame.width = w;
|
||||||
|
svgFrame.height = h;
|
||||||
|
|
||||||
|
// Write SVG into sandboxed iframe — scripts inside cannot reach the parent page
|
||||||
|
svgFrame.srcdoc = `<!DOCTYPE html><html><head>
|
||||||
|
<style>html,body{margin:0;padding:0;background:transparent;overflow:hidden;}svg{display:block;}</style>
|
||||||
|
</head><body>${svg}</body></html>`;
|
||||||
|
|
||||||
|
svgFrame.style.display = 'block';
|
||||||
|
overlay.style.display = 'none';
|
||||||
|
|
||||||
|
setStatus('OK', '#4ade80');
|
||||||
|
requestAnimationFrame(resetView);
|
||||||
|
} catch (err) {
|
||||||
|
showError(err.message || String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseSvgSize(svgString) {
|
||||||
|
const doc = new DOMParser().parseFromString(svgString, 'image/svg+xml');
|
||||||
|
const svg = doc.querySelector('svg');
|
||||||
|
let w = parseFloat(svg?.getAttribute('width'));
|
||||||
|
let h = parseFloat(svg?.getAttribute('height'));
|
||||||
|
if (!w || !h) {
|
||||||
|
const vb = svg?.getAttribute('viewBox')?.trim().split(/[\s,]+/);
|
||||||
|
if (vb?.length === 4) { w = parseFloat(vb[2]); h = parseFloat(vb[3]); }
|
||||||
|
}
|
||||||
|
return { w: w || 800, h: h || 600 };
|
||||||
|
}
|
||||||
|
|
||||||
|
function showError(msg) {
|
||||||
|
const errEl = document.createElement('div');
|
||||||
|
errEl.className = 'error';
|
||||||
|
errEl.textContent = msg;
|
||||||
|
overlay.innerHTML = '';
|
||||||
|
overlay.appendChild(errEl);
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
setStatus('Error', '#f87171');
|
||||||
|
setTimeout(() => errEl.classList.add('fade-out'), 4000);
|
||||||
|
setTimeout(() => {
|
||||||
|
if (overlay.contains(errEl)) {
|
||||||
|
overlay.innerHTML = '';
|
||||||
|
overlay.appendChild(placeholder);
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
}, 4600);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Toolbar actions ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function clearEditor() {
|
||||||
|
editor.value = '';
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
lastSvg = null;
|
||||||
|
svgFrame.srcdoc = '';
|
||||||
|
svgFrame.style.display = 'none';
|
||||||
|
overlay.innerHTML = '';
|
||||||
|
overlay.appendChild(placeholder);
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadSvg() {
|
||||||
|
if (!lastSvg) return;
|
||||||
|
const blob = new Blob([lastSvg], { type: 'image/svg+xml' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url; a.download = 'diagram.svg'; a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copySvg() {
|
||||||
|
if (!lastSvg) return;
|
||||||
|
await navigator.clipboard.writeText(lastSvg);
|
||||||
|
setStatus('Copied!', '#60a5fa');
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(msg, color) {
|
||||||
|
status.textContent = msg;
|
||||||
|
status.style.color = color;
|
||||||
|
setTimeout(() => { status.textContent = ''; }, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Pan & zoom ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
let vt = { x: 0, y: 0, scale: 1 };
|
||||||
|
let drag = null;
|
||||||
|
|
||||||
|
function applyTransform() {
|
||||||
|
panLayer.style.transform = `translate(${vt.x}px, ${vt.y}px) scale(${vt.scale})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetView() {
|
||||||
|
const area = previewArea.getBoundingClientRect();
|
||||||
|
vt = {
|
||||||
|
x: (area.width - svgFrame.offsetWidth) / 2,
|
||||||
|
y: (area.height - svgFrame.offsetHeight) / 2,
|
||||||
|
scale: 1,
|
||||||
|
};
|
||||||
|
applyTransform();
|
||||||
|
}
|
||||||
|
|
||||||
|
previewArea.addEventListener('wheel', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const rect = previewArea.getBoundingClientRect();
|
||||||
|
const mx = e.clientX - rect.left;
|
||||||
|
const my = e.clientY - rect.top;
|
||||||
|
const delta = e.deltaY < 0 ? 1.1 : 0.9;
|
||||||
|
vt.x = mx - (mx - vt.x) * delta;
|
||||||
|
vt.y = my - (my - vt.y) * delta;
|
||||||
|
vt.scale = Math.min(10, Math.max(0.1, vt.scale * delta));
|
||||||
|
applyTransform();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
previewArea.addEventListener('mousedown', e => {
|
||||||
|
drag = { startX: e.clientX - vt.x, startY: e.clientY - vt.y };
|
||||||
|
previewArea.classList.add('dragging');
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', e => {
|
||||||
|
if (!drag) return;
|
||||||
|
vt.x = e.clientX - drag.startX;
|
||||||
|
vt.y = e.clientY - drag.startY;
|
||||||
|
applyTransform();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', () => {
|
||||||
|
drag = null;
|
||||||
|
previewArea.classList.remove('dragging');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Keyboard shortcuts ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
editor.addEventListener('keydown', e => {
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
e.preventDefault();
|
||||||
|
const s = editor.selectionStart;
|
||||||
|
editor.value = editor.value.slice(0, s) + ' ' + editor.value.slice(editor.selectionEnd);
|
||||||
|
editor.selectionStart = editor.selectionEnd = s + 2;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Init ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
render();
|
||||||
205
index.html
Normal file
205
index.html
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Simple Mermaid Editor</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
background: #0f1117;
|
||||||
|
color: #e0e0e0;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-bottom: 1px solid #2a2d3a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 { font-size: 1.1rem; font-weight: 600; color: #fff; }
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
background: #1e3a5f;
|
||||||
|
color: #60a5fa;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main { display: flex; flex: 1; overflow: hidden; }
|
||||||
|
|
||||||
|
.editor-pane {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 40%;
|
||||||
|
border-right: 1px solid #2a2d3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pane-label {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #666;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid #2a2d3a;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
flex: 1;
|
||||||
|
background: #0f1117;
|
||||||
|
color: #c9d1d9;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
padding: 16px;
|
||||||
|
font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
tab-size: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
border-top: 1px solid #2a2d3a;
|
||||||
|
padding: 8px 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar span { font-size: 0.75rem; color: #555; margin-left: auto; }
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 5px 14px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover { opacity: 0.85; }
|
||||||
|
|
||||||
|
.btn-render { background: #2563eb; color: #fff; }
|
||||||
|
.btn-muted { background: #2a2d3a; color: #aaa; }
|
||||||
|
.btn-sm { padding: 2px 10px; font-size: 0.7rem; margin-left: auto; }
|
||||||
|
|
||||||
|
/* ── Preview ── */
|
||||||
|
.preview-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||||
|
|
||||||
|
.preview-area {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-area.dragging { cursor: grabbing; }
|
||||||
|
|
||||||
|
#pan-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svg-frame {
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Placeholder / error overlay — centred, outside the pan layer */
|
||||||
|
#overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #333;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder p { margin-top: 6px; font-size: 0.78rem; color: #2a2d3a; }
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background: #2d1b1b;
|
||||||
|
border: 1px solid #5c2626;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
color: #f87171;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
max-width: 560px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.6s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error.fade-out { opacity: 0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Simple Mermaid Editor</h1>
|
||||||
|
<span class="badge">live preview</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div class="editor-pane">
|
||||||
|
<div class="pane-label">Diagram Source</div>
|
||||||
|
<textarea id="editor" spellcheck="false" placeholder="Type your Mermaid diagram here…"></textarea>
|
||||||
|
<div class="toolbar">
|
||||||
|
<button class="btn-render" onclick="render()">Render</button>
|
||||||
|
<button class="btn-muted" onclick="clearEditor()">Clear</button>
|
||||||
|
<button class="btn-muted" onclick="copySvg()">Copy SVG</button>
|
||||||
|
<button class="btn-muted" onclick="downloadSvg()">Download SVG</button>
|
||||||
|
<span id="status"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-pane">
|
||||||
|
<div class="pane-label">
|
||||||
|
Preview
|
||||||
|
<button class="btn-muted btn-sm" onclick="resetView()">Reset view</button>
|
||||||
|
</div>
|
||||||
|
<div class="preview-area" id="previewArea">
|
||||||
|
<div id="pan-layer">
|
||||||
|
<iframe id="svg-frame" sandbox="" scrolling="no"></iframe>
|
||||||
|
</div>
|
||||||
|
<div id="overlay">
|
||||||
|
<div class="placeholder" id="placeholder">
|
||||||
|
← Write a diagram and click Render
|
||||||
|
<p>or press Ctrl+Enter</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
nginx-container.conf
Normal file
67
nginx-container.conf
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
# Runs inside the container — TLS and HSTS are handled by the reverse proxy.
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 8080;
|
||||||
|
server_name _;
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Disable nginx version in error pages and headers
|
||||||
|
server_tokens off;
|
||||||
|
|
||||||
|
# ── Security headers ─────────────────────────────────────────────────────
|
||||||
|
add_header Content-Security-Policy "
|
||||||
|
default-src 'none';
|
||||||
|
script-src 'self' https://cdn.jsdelivr.net;
|
||||||
|
style-src 'unsafe-inline';
|
||||||
|
img-src 'self' data: blob:;
|
||||||
|
frame-src 'self';
|
||||||
|
child-src 'self';
|
||||||
|
connect-src 'none';
|
||||||
|
font-src 'none';
|
||||||
|
object-src 'none';
|
||||||
|
base-uri 'self';
|
||||||
|
form-action 'none';
|
||||||
|
frame-ancestors 'none';
|
||||||
|
" always;
|
||||||
|
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-Frame-Options "DENY" always;
|
||||||
|
add_header Referrer-Policy "no-referrer" always;
|
||||||
|
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()" always;
|
||||||
|
|
||||||
|
# ── Static files ─────────────────────────────────────────────────────────
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~* \.(js|css)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
|
||||||
|
# nginx overrides parent add_header inside location blocks, so repeat them
|
||||||
|
add_header Content-Security-Policy "
|
||||||
|
default-src 'none';
|
||||||
|
script-src 'self' https://cdn.jsdelivr.net;
|
||||||
|
style-src 'unsafe-inline';
|
||||||
|
img-src 'self' data: blob:;
|
||||||
|
frame-src 'self';
|
||||||
|
child-src 'self';
|
||||||
|
connect-src 'none';
|
||||||
|
font-src 'none';
|
||||||
|
object-src 'none';
|
||||||
|
base-uri 'self';
|
||||||
|
form-action 'none';
|
||||||
|
frame-ancestors 'none';
|
||||||
|
" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-Frame-Options "DENY" always;
|
||||||
|
add_header Referrer-Policy "no-referrer" always;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Block hidden files (.git, .env, etc.)
|
||||||
|
location ~ /\. {
|
||||||
|
deny all;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue