| 1 |
{% extends "base.html" %} |
| 2 |
|
| 3 |
{% block title %}{% if editing %}Edit Post{% else %}New Post{% endif %} - {{ project_slug }} - Dashboard{% endblock %} |
| 4 |
{% block body_attrs %} class="padded-page blog-editor"{% endblock %} |
| 5 |
|
| 6 |
{% block content %} |
| 7 |
{% include "partials/site_header.html" %} |
| 8 |
|
| 9 |
<div class="container"> |
| 10 |
<div class="breadcrumb"> |
| 11 |
<a href="/dashboard">Dashboard</a> / |
| 12 |
<a href="/dashboard/project/{{ project_slug }}">{{ project_slug }}</a> / |
| 13 |
<a href="/dashboard/project/{{ project_slug }}" onclick="setTimeout(function(){document.getElementById('tab-blog').click()},100)">Blog</a> / |
| 14 |
{% if editing %}Edit{% else %}New Post{% endif %} |
| 15 |
</div> |
| 16 |
|
| 17 |
<h1 class="page-title">{% if editing %}Edit Post{% else %}New Blog Post{% endif %}<span class="dot">.</span></h1> |
| 18 |
|
| 19 |
<div class="editor-form" id="blog-editor" data-project-id="{{ project_id }}" data-project-slug="{{ project_slug }}"{% if editing %} data-post-id="{{ post_id }}"{% endif %}> |
| 20 |
<div class="form-group"> |
| 21 |
<label for="post-title">Title</label> |
| 22 |
<input type="text" id="post-title" class="blog-editor-input input--sm w-full" placeholder="Post title" |
| 23 |
value="{{ post_title }}"> |
| 24 |
</div> |
| 25 |
<div class="form-group"> |
| 26 |
<label for="post-slug">Slug (optional, auto-generated from title)</label> |
| 27 |
<input type="text" id="post-slug" class="blog-editor-input input--sm w-full" placeholder="post-slug" |
| 28 |
value="{{ post_slug }}" |
| 29 |
hx-post="/api/validate/blog-slug" |
| 30 |
hx-trigger="keyup changed delay:500ms" |
| 31 |
hx-target="#blog-slug-status" |
| 32 |
hx-indicator="#blog-slug-spinner" |
| 33 |
hx-vals='{"project_id": "{{ project_id }}"}'> |
| 34 |
<span id="blog-slug-spinner" class="htmx-indicator blog-editor-slug-spinner">Checking...</span> |
| 35 |
<span id="blog-slug-status"></span> |
| 36 |
</div> |
| 37 |
<div class="form-group"> |
| 38 |
<label for="post-body">Content (Markdown)</label> |
| 39 |
<textarea id="post-body" rows="20" class="blog-editor-input input--sm w-full" placeholder="Write your post in Markdown...">{{ post_body }}</textarea> |
| 40 |
<button type="button" class="btn-secondary blog-editor-media-btn" onclick="mediaPickerOpen('post-body')">Insert Image</button> |
| 41 |
</div> |
| 42 |
{% if is_changelog_project %} |
| 43 |
<div class="form-group blog-editor-landing-toggle"> |
| 44 |
<label for="post-show-on-landing"> |
| 45 |
<input type="checkbox" id="post-show-on-landing"{% if post_show_on_landing %} checked{% endif %}> |
| 46 |
Show on landing |
| 47 |
</label> |
| 48 |
<p class="hint">Surfaces this post as the "Last shipped" line on the landing page. The most recent published post with this set wins; uncheck to retire it.</p> |
| 49 |
</div> |
| 50 |
{% endif %} |
| 51 |
<div class="blog-editor-actions"> |
| 52 |
<button class="btn-primary" id="save-draft-btn">{% if editing %}Save as Draft{% else %}Save Draft{% endif %}</button> |
| 53 |
<button class="btn-secondary" id="publish-btn">{% if editing && post_is_published %}Update{% else %}Publish{% endif %}</button> |
| 54 |
<a href="/dashboard/project/{{ project_slug }}" onclick="setTimeout(function(){document.getElementById('tab-blog').click()},100)"> |
| 55 |
<button class="btn-secondary" type="button">Cancel</button> |
| 56 |
</a> |
| 57 |
</div> |
| 58 |
<div id="post-status" class="blog-editor-status"></div> |
| 59 |
</div> |
| 60 |
</div> |
| 61 |
|
| 62 |
{% endblock %} |
| 63 |
|
| 64 |
{% block scripts %} |
| 65 |
<script src="/static/media-picker.js"></script> |
| 66 |
<script src="/static/blog-editor.js"></script> |
| 67 |
{% endblock %} |
| 68 |
|