diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/admin/base.html | 34 | ||||
| -rw-r--r-- | templates/admin/error.html | 7 | ||||
| -rw-r--r-- | templates/admin/form.html | 62 | ||||
| -rw-r--r-- | templates/admin/list.html | 40 |
4 files changed, 143 insertions, 0 deletions
diff --git a/templates/admin/base.html b/templates/admin/base.html new file mode 100644 index 0000000..f88bba6 --- /dev/null +++ b/templates/admin/base.html @@ -0,0 +1,34 @@ +{{define "base"}} +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Admin — {{.Title}}</title> + <link rel="stylesheet" href="/styles/admin.css"> + <link rel="stylesheet" href="/lib/milkdown-crepe/style.css"> + <script type="importmap"> + { + "imports": { + "@milkdown/crepe": "/lib/node_modules/@milkdown/crepe" + } + } + </script> +</head> + +<body> + <nav> + <span class="brand">Admin</span> + <a href="/admin/">Posts</a> + <a href="/admin/new">New Post</a> + </nav> + <main> + {{if eq .ContentTemplate "list-content"}}{{template "list-content" .}}{{end}} + {{if eq .ContentTemplate "form-content"}}{{template "form-content" .}}{{end}} + {{if eq .ContentTemplate "error-content"}}{{template "error-content" .}}{{end}} + </main> +</body> + +</html> +{{end}}
\ No newline at end of file diff --git a/templates/admin/error.html b/templates/admin/error.html new file mode 100644 index 0000000..36a4a8a --- /dev/null +++ b/templates/admin/error.html @@ -0,0 +1,7 @@ +{{define "error-content"}} + <div class="alert"> + <h2>Error</h2> + <p>{{.Message}}</p> + <p><a href="javascript:history.back()">Go back</a></p> + </div> +{{end}} diff --git a/templates/admin/form.html b/templates/admin/form.html new file mode 100644 index 0000000..1b577c9 --- /dev/null +++ b/templates/admin/form.html @@ -0,0 +1,62 @@ +{{define "form-content"}} + <h1>{{.Title}}</h1> + <form method="POST" action="{{.Action}}"> + <label for="title">Title</label> + <input type="text" id="title" name="title" value="{{.Post.Title}}" required autofocus> + + <label for="date">Date</label> + <input type="date" id="date" name="date" value="{{.Post.Date}}"> + + <label for="tags">Tags</label> + <input type="text" id="tags" name="tags" value="{{.Post.Tags}}" placeholder="tag1, tag2, tag3"> + <p class="hint">Comma-separated list of tags.</p> + + <label for="content">Content (Markdown)</label> + <textarea id="content" name="content" style="display: none;">{{.Post.Content}}</textarea> + <div id="editor" style="border: 1px solid #ccc; border-radius: 4px; min-height: 340px;"></div> + + <div class="form-actions"> + <button type="submit" class="btn btn-primary"> + {{if .IsNew}}Create Post{{else}}Save Changes{{end}} + </button> + <a href="/admin/" class="btn btn-secondary">Cancel</a> + </div> + </form> + + <script type="module"> + import { Crepe } from '@milkdown/crepe'; + + const contentField = document.getElementById('content'); + const editorContainer = document.getElementById('editor'); + const form = contentField.closest('form'); + + // Initialize Crepe with the textarea content + const crepe = new Crepe({ + root: editorContainer, + defaultValue: contentField.value, + }); + + // Sync editor content back to textarea before form submission + form.addEventListener('submit', async (e) => { + e.preventDefault(); + + try { + // Get the markdown content from Crepe + const markdown = await crepe.getMarkdown(); + contentField.value = markdown; + } catch (err) { + console.error('Failed to get markdown from editor:', err); + } + + // Submit the form + form.submit(); + }); + </script> + + <noscript> + <style> + #editor { display: none; } + #content { display: block !important; } + </style> + </noscript> +{{end}} diff --git a/templates/admin/list.html b/templates/admin/list.html new file mode 100644 index 0000000..561e317 --- /dev/null +++ b/templates/admin/list.html @@ -0,0 +1,40 @@ +{{define "list-content"}} + <h1>Posts</h1> + {{if .Posts}} + <table> + <thead> + <tr> + <th>Title</th> + <th>Date</th> + <th>Tags</th> + <th></th> + </tr> + </thead> + <tbody> + {{range .Posts}} + <tr> + <td>{{.Title}}</td> + <td>{{.Date}}</td> + <td> + {{if .Tags}} + <div class="tags"> + {{range (splitTags .Tags)}}<span class="tag">{{.}}</span>{{end}} + </div> + {{end}} + </td> + <td> + <div class="actions"> + <a href="/admin/{{.Slug}}/edit" class="btn btn-secondary">Edit</a> + <form method="POST" action="/admin/{{.Slug}}/delete" onsubmit="return confirm('Delete {{.Title}}?')"> + <button type="submit" class="btn btn-danger">Delete</button> + </form> + </div> + </td> + </tr> + {{end}} + </tbody> + </table> + {{else}} + <div class="empty">No posts yet. <a href="/admin/new">Create one.</a></div> + {{end}} +{{end}} |