diff --git a/app/Http/Controllers/WriterController.php b/app/Http/Controllers/WriterController.php index 0c55f09..3df6783 100644 --- a/app/Http/Controllers/WriterController.php +++ b/app/Http/Controllers/WriterController.php @@ -52,25 +52,27 @@ class WriterController extends Controller public function livePreview(Request $request): View { // Upload the file - $header_image_path = $request->headerImage->storeAs('header-image-previews'); + logger('hey', ['stuff' => request()->all()]); + sleep(2); + $header_image_path = $request->headerImage?->storeAs('header-image-previews'); $article_empty = new Article(); - $article_empty->markdown_body = $request->markdownBody; - $article_empty->generateMarkupFromMarkdown(); + $article_empty->markdown_body = $request->get('markdown-body'); + $article_empty->convertMarkdownToMarkup(); $article = [ 'title' => $request->title ?? null, 'header_image_url' => $header_image_path ?? null, 'subtitle' => $request->subtitle ?? null, 'author' => [ - 'display_name' => auth()->user()->author->displayName, + 'display_name' => auth()->user()->author?->displayName, ], - 'published_at' => $request->publicationDate ?? null, + 'published_at' => $request->get('publication-date') ?? 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]); + return view('shared.single-article', ['article' => $article]); } } diff --git a/resources/views/guest/article.blade.php b/resources/views/guest/article.blade.php index 1940f85..410e881 100644 --- a/resources/views/guest/article.blade.php +++ b/resources/views/guest/article.blade.php @@ -3,20 +3,7 @@ @section('title', $article['title']) @section('content') -
-   ← Go Back - -

{{ $article['title'] }}

-

{{ $article['subtitle'] }}

-

{{ $article['author']['display_name'] }}

-

Published At: {{ $article['published_at'] }}

- -
- {!! $article['body'] !!} -
-
+ +@include('shared.single-article') + @endsection diff --git a/resources/views/layouts/writer.blade.php b/resources/views/layouts/writer.blade.php index 51e0a49..f06511a 100644 --- a/resources/views/layouts/writer.blade.php +++ b/resources/views/layouts/writer.blade.php @@ -10,6 +10,12 @@ {{-- Include HTMX on the writer-side to enchance our interactivity --}} + + {{ config('blog.publishing_name') }} | @yield('title') diff --git a/resources/views/shared/single-article.blade.php b/resources/views/shared/single-article.blade.php new file mode 100644 index 0000000..53832c2 --- /dev/null +++ b/resources/views/shared/single-article.blade.php @@ -0,0 +1,16 @@ +
+   ← Go Back + +

{{ $article['title'] }}

+

{{ $article['subtitle'] }}

+

{{ $article['author']['display_name'] }}

+

Published At: {{ $article['published_at'] }}

+ +
+ {!! $article['body'] !!} +
+
diff --git a/resources/views/writer/new-article.blade.php b/resources/views/writer/new-article.blade.php index b1e2282..b856702 100644 --- a/resources/views/writer/new-article.blade.php +++ b/resources/views/writer/new-article.blade.php @@ -18,16 +18,63 @@ #markdown-body { width: 40vw; } + +/* HTML:
*/ +.loader { + width: 45px; + height: 30px; + background: + linear-gradient(#004ce4 0 0) 0 100%/100% 50%, + linear-gradient(#004ce4 0 0) 0 0 /calc(100%/3) 100%; + background-repeat: no-repeat; + position: relative; + clip-path: inset(-100% 0 0 0); + animation: l2-0 2s infinite steps(4); +} +.loader::before, +.loader::after { + content: ""; + position: absolute; + inset:-50% 0 50%; + background: + linear-gradient(#00e622 0 0) 0 0 /calc(2*100%/3) 50%, + linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%; + background-repeat: no-repeat; + animation: inherit; + animation-name: l2-1; +} +.loader::after { + inset:-100% 0 100%; + background: + linear-gradient(#e50021 0 0) 0 0/100% 50%, + linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%; + background-repeat: no-repeat; + animation-name: l2-2; +} +@keyframes l2-0{ + 0% {transform: translateY(-250%);clip-path: inset(100% 0 0 0)} + 25%,100% {transform: translateY(0);clip-path: inset(-100% 0 0 0)} +} +@keyframes l2-1{ + 0% ,25% {transform: translateY(-250%)} + 50%,100% {transform: translateY(0)} +} +@keyframes l2-2{ + 0% ,50% {transform: translateY(-250%)} + 75%,100% {transform: translateY(0)} +}
-
+ @@ -47,23 +94,29 @@ document.addEventListener("DOMContentLoaded", (event) => { Preview -
+
-

Enjoy a live(ish) preview of what your article will look like

+ Live Preview +
+
@if(isset($article_preview))
@else -

Nothing to see yet!

+
+

Nothing to see yet!

+
@endif