WIP: Article Editor with live previewer
This commit is contained in:
parent
d2d75d2efb
commit
a63063acf7
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Models\Article;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Illuminate\Contracts\View\View;
|
use Illuminate\Contracts\View\View;
|
||||||
use Illuminate\Support\Facades\Auth;
|
use Illuminate\Support\Facades\Auth;
|
||||||
|
|
@ -47,4 +48,29 @@ class WriterController extends Controller
|
||||||
{
|
{
|
||||||
return view('writer.new-article');
|
return view('writer.new-article');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function livePreview(Request $request): View
|
||||||
|
{
|
||||||
|
// Upload the file
|
||||||
|
$header_image_path = $request->headerImage->storeAs('header-image-previews');
|
||||||
|
$article_empty = new Article();
|
||||||
|
$article_empty->markdown_body = $request->markdownBody;
|
||||||
|
$article_empty->generateMarkupFromMarkdown();
|
||||||
|
|
||||||
|
$article = [
|
||||||
|
'title' => $request->title ?? null,
|
||||||
|
'header_image_url' => $header_image_path ?? null,
|
||||||
|
'subtitle' => $request->subtitle ?? null,
|
||||||
|
'author' => [
|
||||||
|
'display_name' => auth()->user()->author->displayName,
|
||||||
|
],
|
||||||
|
'published_at' => $request->publicationDate ?? null,
|
||||||
|
'primary_link' => $request->primary_link ?? null,
|
||||||
|
'secondary_link' => $request->secondary_link ?? null,
|
||||||
|
'mastodon_handle' => $request->mastodon_handle ?? null,
|
||||||
|
'body' => $article_empty->body,
|
||||||
|
];
|
||||||
|
|
||||||
|
return view('guest.article', ['article' => $article]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,69 @@
|
||||||
@section('title', 'Write New Article')
|
@section('title', 'Write New Article')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div>
|
<style>
|
||||||
New Article
|
#page-body-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
#new-article-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#markdown-body {
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", (event) => {
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="page-body-container">
|
||||||
|
<section id="new-article-form-container">
|
||||||
|
<form id="new-article-form" method="POST" action="route('')">
|
||||||
|
<label for="publication-date">Publication Date</label>
|
||||||
|
<input id="publication-date" name="publication-date" type="datetime-local" class="affects-preview" />
|
||||||
|
<label for="title">Title</label>
|
||||||
|
<input id="title" name="title" type="text" class="affects-preview" />
|
||||||
|
<label for="subtitle">Subtitle</label>
|
||||||
|
<input id="subtitle" name="subtitle" type="text" class="affects-preview" />
|
||||||
|
<label for="slug">Slug</label>
|
||||||
|
<input id="slug" name="slug" type="text" class="affects-preview" />
|
||||||
|
<label for="header-image">Header Image</label>
|
||||||
|
<input id="header-image" name="header-image" type="file" accept="image/png, image/jpeg, image/jpg, image/webp" class="affects-preview" />
|
||||||
|
<label for="markdown-body">Markdown Body</label>
|
||||||
|
<textarea id="markdown-body" rows="12" name="markdown-body" placeholder="Github-flavored markdown is supported!" class="affects-preview"></textarea>
|
||||||
|
<button
|
||||||
|
id="preview-article"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Preview
|
||||||
|
</button>
|
||||||
|
<button id="save-article" type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
<button
|
||||||
|
data-hx-post="{{ route('live_preview') }}"
|
||||||
|
data-hx-trigger="click delay:2s"
|
||||||
|
data-hx-target="#true-container"
|
||||||
|
data-hx-swap="innerHTML"
|
||||||
|
>
|
||||||
|
HTMX Preview
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
<section id="new-article-preview-container">
|
||||||
|
<h4>Enjoy a live(ish) preview of what your article will look like</h4>
|
||||||
|
<div id="preview-inner-container">
|
||||||
|
@if(isset($article_preview))
|
||||||
|
<div id="true-container"></div>
|
||||||
|
@else
|
||||||
|
<p>Nothing to see yet!</p>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
||||||
|
|
@ -50,4 +50,5 @@ Route::middleware('auth')->group(function () {
|
||||||
Route::get('/writer', [WriterController::class, 'dashboard'])->name('dashboard');
|
Route::get('/writer', [WriterController::class, 'dashboard'])->name('dashboard');
|
||||||
Route::post('/logout', [WriterController::class, 'logout'])->name('logout');
|
Route::post('/logout', [WriterController::class, 'logout'])->name('logout');
|
||||||
Route::get('writer/new-article', [WriterController::class, 'newArticle'])->name('new_article');
|
Route::get('writer/new-article', [WriterController::class, 'newArticle'])->name('new_article');
|
||||||
|
Route::post('writer/live-preview', [WriterController::class, 'livePreview'])->name('live_preview');
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue