Jonathan
/
word-salad
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Article Editor with live previewer

This commit is contained in:
Jonathan Nielson 2024-08-04 17:53:04 -05:00
parent d2d75d2efb
commit a63063acf7
3 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/Http/Controllers/WriterController.php
View File

@ -2,6 +2,7 @@
namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Http\Request;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Auth;
@ -47,4 +48,29 @@ class WriterController extends Controller
{
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]);
}
}

66
resources/views/writer/new-article.blade.php
View File

@ -3,7 +3,69 @@
@section('title', 'Write New Article')
@section('content')
<div>
New Article
<style>
#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>
@endsection

1
routes/web.php
View File

@ -50,4 +50,5 @@ Route::middleware('auth')->group(function () {
Route::get('/writer', [WriterController::class, 'dashboard'])->name('dashboard');
Route::post('/logout', [WriterController::class, 'logout'])->name('logout');
Route::get('writer/new-article', [WriterController::class, 'newArticle'])->name('new_article');
Route::post('writer/live-preview', [WriterController::class, 'livePreview'])->name('live_preview');
});