126 lines
4.1 KiB
PHP
126 lines
4.1 KiB
PHP
@extends('layouts.writer')
|
|
|
|
@section('title', 'Write New Article')
|
|
|
|
@section('content')
|
|
<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;
|
|
}
|
|
|
|
/* HTML: <div class="loader"></div> */
|
|
.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)}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
document.getElementById('preview-article').style.display = 'none';
|
|
document.getElementById('htmx-preview-button').style.display = 'none';
|
|
});
|
|
</script>
|
|
|
|
<div id="page-body-container">
|
|
<section id="new-article-form-container">
|
|
<form id="new-article-form" method="POST" action="{{route('save_article')}}">
|
|
@csrf
|
|
<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>
|
|
<button
|
|
id="htmx-preview-button"
|
|
data-hx-post="{{ route('live_preview') }}"
|
|
data-hx-trigger="click, keyup changed delay:1100ms from:.affects-preview"
|
|
data-hx-target="#true-container"
|
|
data-hx-swap="innerHTML"
|
|
data-hx-indicator="#preview-indicator"
|
|
>
|
|
HTMX Preview
|
|
</button>
|
|
</form>
|
|
</section>
|
|
<section id="new-article-preview-container">
|
|
<span>Live Preview</span>
|
|
<span id="preview-indicator" class="htmx-indicator"><div class="loader"></div></span>
|
|
<div class="checkmark"></div>
|
|
<div id="preview-inner-container">
|
|
@if(isset($article_preview))
|
|
<div id="true-container"></div>
|
|
@else
|
|
<div id="true-container">
|
|
<p>Nothing to see yet!</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|