Add conflict resolution diff UI and app branding
This commit is contained in:
@@ -1,52 +1,68 @@
|
||||
{{ define "base" }}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{{ .Title }}</title>
|
||||
<link rel="stylesheet" href="/static/site.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||||
</head>
|
||||
<body class="{{ .BodyClass }}">
|
||||
<header class="site-header">
|
||||
<div class="site-header__inner">
|
||||
<a class="site-brand" href="/">MD Hub Secure</a>
|
||||
<form class="site-search" action="/" method="get">
|
||||
<input type="search" name="q" placeholder="Search..." aria-label="Search documents" />
|
||||
<button type="submit" aria-label="Search">🔍</button>
|
||||
</form>
|
||||
<nav class="site-nav">
|
||||
<a href="/">Docs</a>
|
||||
{{ if .WebEnabled }}<a href="/app/">App</a>{{ end }}
|
||||
<a href="/health">Health</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-main">
|
||||
{{ if eq .BodyTemplate "index_content" }}
|
||||
{{ template "index_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "document_content" }}
|
||||
{{ template "document_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "search_content" }}
|
||||
{{ template "search_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "error_content" }}
|
||||
{{ template "error_content" .Data }}
|
||||
{{ end }}
|
||||
</main>
|
||||
<div class="offline-notice" data-offline-notice hidden>
|
||||
<span aria-hidden="true" class="offline-icon"></span>
|
||||
<p>You are offline. Some content may be stale.</p>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>{{ .Title }}</title>
|
||||
<link rel="icon" type="image/png" href="/static/favicon.png" />
|
||||
<link rel="apple-touch-icon" href="/static/favicon.png" />
|
||||
<link rel="stylesheet" href="/static/site.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="{{ .BodyClass }}">
|
||||
<header class="site-header">
|
||||
<div class="site-header__inner">
|
||||
<a class="site-brand" href="/" aria-label="Cairnquire home">
|
||||
<img src="/static/cairnquire%20logo%402x.webp" alt="" width="160" height="40" decoding="async" />
|
||||
<span class="sr-only">Cairnquire</span>
|
||||
</a>
|
||||
<form class="site-search" action="/" method="get">
|
||||
<input type="search" name="q" placeholder="Search..." aria-label="Search documents" />
|
||||
<button type="submit" aria-label="Search">🔍</button>
|
||||
</form>
|
||||
<nav class="site-nav">
|
||||
<a href="/">Docs</a>
|
||||
{{ if .WebEnabled }}<a href="/app/">Admin</a>{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="version-notice" data-version-notice hidden>
|
||||
<p>A newer version is available.</p>
|
||||
<button type="button" data-version-reload>Reload</button>
|
||||
</div>
|
||||
<script src="/static/cache.js" defer></script>
|
||||
<script src="/static/realtime.js" defer></script>
|
||||
<script src="/static/render.js" defer></script>
|
||||
</body>
|
||||
</header>
|
||||
<main class="site-main">
|
||||
{{ if eq .BodyTemplate "index_content" }}
|
||||
{{ template "index_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "document_content" }}
|
||||
{{ template "document_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "document_edit_content" }}
|
||||
{{ template "document_edit_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "search_content" }}
|
||||
{{ template "search_content" .Data }}
|
||||
{{ else if eq .BodyTemplate "error_content" }}
|
||||
{{ template "error_content" .Data }}
|
||||
{{ end }}
|
||||
</main>
|
||||
<div class="offline-notice" data-offline-notice hidden>
|
||||
<span aria-hidden="true" class="offline-icon"></span>
|
||||
<p>You are offline. Some content may be stale.</p>
|
||||
</div>
|
||||
<div class="cached-notice" data-cached-notice hidden>
|
||||
<span aria-hidden="true" class="cached-icon"></span>
|
||||
<p>Viewing cached offline content.</p>
|
||||
</div>
|
||||
<div class="version-notice" data-version-notice hidden>
|
||||
<p>A newer version is available.</p>
|
||||
<button type="button" data-version-reload>Reload</button>
|
||||
</div>
|
||||
<script src="/static/cache.js" defer></script>
|
||||
<script src="/static/sync.js" defer></script>
|
||||
<script src="/static/realtime.js" defer></script>
|
||||
<script src="/static/editor.js" defer></script>
|
||||
<script src="/static/render.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
||||
@@ -19,29 +19,37 @@
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="document-meta">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<dl class="meta-grid">
|
||||
<div>
|
||||
<dt>File</dt>
|
||||
<dd><code>{{ .Path }}</code></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Hash</dt>
|
||||
<dd><code>{{ .Hash }}</code></dd>
|
||||
</div>
|
||||
{{ if .Tags }}
|
||||
<div class="document-meta__header">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<a class="document-edit-link" href="/docs/{{ trimMd .Path }}/edit">Edit</a>
|
||||
</div>
|
||||
<details class="document-meta-panel">
|
||||
<summary>
|
||||
<span>Document details</span>
|
||||
</summary>
|
||||
<dl class="meta-grid">
|
||||
<div>
|
||||
<dt>Tags</dt>
|
||||
<dd>
|
||||
<ul class="tag-list">
|
||||
{{ range .Tags }}
|
||||
<li><a href="/?tag={{ . }}">#{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</dd>
|
||||
<dt>File</dt>
|
||||
<dd><code>{{ .Path }}</code></dd>
|
||||
</div>
|
||||
{{ end }}
|
||||
</dl>
|
||||
<div>
|
||||
<dt>Hash</dt>
|
||||
<dd><code>{{ .Hash }}</code></dd>
|
||||
</div>
|
||||
{{ if .Tags }}
|
||||
<div>
|
||||
<dt>Tags</dt>
|
||||
<dd>
|
||||
<ul class="tag-list">
|
||||
{{ range .Tags }}
|
||||
<li><a href="/?tag={{ . }}">#{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
{{ end }}
|
||||
</dl>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="markdown-body">
|
||||
@@ -57,7 +65,7 @@
|
||||
<section class="miller-column {{ if eq .Title "Content" }}miller-column--root{{ end }}" aria-label="{{ .Title }}">
|
||||
<h2 title="{{ .Title }}">
|
||||
{{ if eq .Title "Content" }}
|
||||
<span class="browser-icon browser-icon--root" aria-hidden="true"></span>
|
||||
{{ template "icon-library" }}
|
||||
{{ end }}
|
||||
<span class="miller-column-title-text">{{ .Title }}</span>
|
||||
</h2>
|
||||
@@ -66,10 +74,10 @@
|
||||
<li>
|
||||
<a class="{{ if .Active }}is-active{{ end }} {{ if .IsFolder }}is-folder{{ end }}" href="{{ .URL }}" title="{{ .Name }}">
|
||||
<span class="browser-item-label">
|
||||
<span class="browser-icon {{ if .IsFolder }}browser-icon--folder{{ else }}browser-icon--page{{ end }}" aria-hidden="true"></span>
|
||||
{{ if .IsFolder }}{{ template "icon-folder" }}{{ else }}{{ template "icon-file-text" }}{{ end }}
|
||||
<span class="browser-item-name">{{ .Name }}</span>
|
||||
</span>
|
||||
{{ if .IsFolder }}<span class="browser-item-chevron" aria-hidden="true">›</span>{{ end }}
|
||||
{{ if .IsFolder }}{{ template "icon-chevron-right" }}{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
@@ -78,3 +86,34 @@
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ define "icon-folder" }}
|
||||
<svg class="browser-icon browser-icon--folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
|
||||
</svg>
|
||||
{{ end }}
|
||||
|
||||
{{ define "icon-file-text" }}
|
||||
<svg class="browser-icon browser-icon--page" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
|
||||
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
|
||||
<path d="M10 9H8"></path>
|
||||
<path d="M16 13H8"></path>
|
||||
<path d="M16 17H8"></path>
|
||||
</svg>
|
||||
{{ end }}
|
||||
|
||||
{{ define "icon-library" }}
|
||||
<svg class="browser-icon browser-icon--root" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m16 6 4 14"></path>
|
||||
<path d="M12 6v14"></path>
|
||||
<path d="M8 8v12"></path>
|
||||
<path d="M4 4v16"></path>
|
||||
</svg>
|
||||
{{ end }}
|
||||
|
||||
{{ define "icon-chevron-right" }}
|
||||
<svg class="browser-item-chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
{{ end }}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
{{ define "document_edit.gohtml" }}{{ template "base" . }}{{ end }}
|
||||
|
||||
{{ define "document_edit_content" }}
|
||||
<section class="workspace-shell workspace-shell--document-edit">
|
||||
{{ template "browser" .Browser }}
|
||||
<article class="document-shell document-shell--editor" data-document-path="{{ .Path }}" data-document-hash="{{ .Hash }}">
|
||||
<nav class="breadcrumbs" aria-label="Breadcrumb">
|
||||
<ol>
|
||||
{{ $lastIdx := sub (len .Breadcrumbs) 1 }}
|
||||
{{ range $i, $crumb := .Breadcrumbs }}
|
||||
<li>
|
||||
{{ if eq $i $lastIdx }}
|
||||
<span aria-current="page">{{ $crumb.Name }}</span>
|
||||
{{ else }}
|
||||
<a href="{{ $crumb.URL }}">{{ $crumb.Name }}</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="document-meta">
|
||||
<div class="document-meta__header document-meta__header--editor">
|
||||
<div>
|
||||
<p class="eyebrow">Editing</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
<a class="document-edit-link" href="/docs/{{ trimMd .Path }}">Done</a>
|
||||
</div>
|
||||
<details class="document-meta-panel">
|
||||
<summary>
|
||||
<span>Editor details</span>
|
||||
<span class="editor-status" data-sync-status>Saved</span>
|
||||
</summary>
|
||||
<dl class="meta-grid">
|
||||
<div>
|
||||
<dt>File</dt>
|
||||
<dd><code>{{ .Path }}</code></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Hash</dt>
|
||||
<dd><code data-editor-hash>{{ .Hash }}</code></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Status</dt>
|
||||
<dd><span class="editor-status" data-sync-status-secondary>Saved</span></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</details>
|
||||
<div class="editor-conflict" data-conflict-notice hidden>
|
||||
<div class="editor-conflict__header">
|
||||
<div>
|
||||
<strong>Conflict detected.</strong>
|
||||
<span>The server has a newer copy (<code data-conflict-hash></code>). Resolve it before saving more edits.</span>
|
||||
</div>
|
||||
<div class="editor-conflict__actions">
|
||||
<button type="button" data-conflict-apply disabled>Apply Resolution</button>
|
||||
<button type="button" data-conflict-dismiss>Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
<p data-conflict-status>Red deletions are from the server copy. Green additions are from your queued edit.</p>
|
||||
<div class="editor-conflict__legend" aria-label="Diff color meaning">
|
||||
<span><span class="editor-conflict__swatch editor-conflict__swatch--server"></span>Red / - Server copy</span>
|
||||
<span><span class="editor-conflict__swatch editor-conflict__swatch--local"></span>Green / + Your edit</span>
|
||||
</div>
|
||||
<div class="editor-conflict__choices" role="group" aria-label="Resolution starting point">
|
||||
<button type="button" data-conflict-use="server">Use Server</button>
|
||||
<button type="button" data-conflict-use="local">Use My Edit</button>
|
||||
<button type="button" data-conflict-use="both">Use Both</button>
|
||||
</div>
|
||||
<div class="editor-conflict__diff" data-conflict-diff></div>
|
||||
<div class="editor-conflict__resolution">
|
||||
<label for="conflict-resolution">Resolved document</label>
|
||||
<div data-conflict-monaco-mount></div>
|
||||
<textarea id="conflict-resolution" data-conflict-resolution spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="editor-form" data-editor-form data-document-path="{{ .Path }}">
|
||||
<label class="sr-only" for="document-editor">Markdown editor</label>
|
||||
<div data-monaco-mount></div>
|
||||
<textarea id="document-editor" name="content" data-document-editor spellcheck="false">{{ .Source }}</textarea>
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ template "browser" .Browser }}
|
||||
<section class="empty-preview">
|
||||
<p class="eyebrow">Documents</p>
|
||||
<h1>MD Hub Secure</h1>
|
||||
<h1>Cairnquire</h1>
|
||||
</section>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user