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