214 lines
9.1 KiB
Plaintext
214 lines
9.1 KiB
Plaintext
@model CatherineLynwood.Models.Blog
|
||
@using System.Text.RegularExpressions
|
||
|
||
@{
|
||
ViewData["Title"] = $"{Model.Title}";
|
||
}
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<partial name="_Breadcrumb" model="Model" />
|
||
</div>
|
||
</div>
|
||
<article>
|
||
@if (Model.ShowThanks)
|
||
{
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="alert alert-success alert-dismissible fade show">
|
||
<strong class="alert-heading">Success!</strong><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><br />
|
||
<p>
|
||
Your comments have been submitted and are awaiting approval. Thank you for your feedback.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<header>
|
||
<h1 class="d-inline-block">@Model.Title</h1> <h2 class="h1 d-inline-block">@Model.SubTitle</h2>
|
||
<p>Posted on @Model.PublishDate.ToString("MMMM d, yyyy") by Catherine Lynwood</p>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
@if (!string.IsNullOrWhiteSpace(Model.AudioTranscriptUrl))
|
||
{
|
||
<div class="row justify-content-center p-3">
|
||
<div class="col-md-6 bg-white rounded-5">
|
||
<audio controls>
|
||
<source src="/audio/@Model.AudioTranscriptUrl" type="audio/mpeg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-md-12">
|
||
@if (Model.BlogImages.Count > 0)
|
||
{
|
||
<div class="float-md-start w-md-50">
|
||
<div id="carouselExampleCaptions" class="carousel slide px-3 pb-3" data-bs-ride="false">
|
||
<div class="carousel-indicators">
|
||
@{
|
||
int i = 0;
|
||
|
||
foreach (var image in Model.BlogImages)
|
||
{
|
||
if (image == Model.BlogImages.First())
|
||
{
|
||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="@i" class="active" aria-current="true" aria-label="Slide @(i + 1)"></button>
|
||
}
|
||
else
|
||
{
|
||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="@i" aria-label="Slide @(i + 1)"></button>
|
||
}
|
||
|
||
i++;
|
||
}
|
||
}
|
||
|
||
</div>
|
||
<div class="carousel-inner">
|
||
@foreach (var image in Model.BlogImages)
|
||
{
|
||
if (image == Model.BlogImages.First())
|
||
{
|
||
<div class="carousel-item active">
|
||
<responsive-image src="@image.ImageUrl" alt="@image.ImageCaption" class="d-block w-100 rounded-5 border border-3 border-dark shadow-lg" display-width-percentage="50"></responsive-image>
|
||
<div class="carousel-caption d-none d-md-block">
|
||
<p class="h5">@image.ImageCaption</p>
|
||
<p>@image.ImageText</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="carousel-item">
|
||
<responsive-image src="@image.ImageUrl" alt="@image.ImageCaption" class="d-block w-100 rounded-5 border border-3 border-dark shadow-lg" display-width-percentage="50"></responsive-image>
|
||
<div class="carousel-caption d-none d-md-block">
|
||
<h5>@image.ImageCaption</h5>
|
||
<p>@image.ImageText</p>
|
||
</div>
|
||
</div>
|
||
};
|
||
}
|
||
|
||
</div>
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">Previous</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">Next</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
}
|
||
@if (!string.IsNullOrWhiteSpace(Model.ContentTop))
|
||
{
|
||
@Html.Raw(Model.ContentTop)
|
||
}
|
||
@if (!string.IsNullOrWhiteSpace(Model.AudioTeaserUrl))
|
||
{
|
||
<div class="row justify-content-center bg-white text-dark rounded-3 p-3">
|
||
<div class="col-auto">
|
||
<audio controls>
|
||
<source src="/audio/@Model.AudioTeaserUrl" type="audio/mpeg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
@if (!string.IsNullOrWhiteSpace(Model.AudioTeaserText))
|
||
{
|
||
<div class="col-12" style="max-height: 120px; overflow-y: auto;">
|
||
@Html.Raw(Model.AudioTeaserText)
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
@if (!string.IsNullOrWhiteSpace(Model.ContentBottom))
|
||
{
|
||
@Html.Raw(Model.ContentBottom)
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
@await Component.InvokeAsync("BlogCommentComponent", new { BlogID = Model.BlogID })
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
@section Scripts {
|
||
<script>
|
||
const player = new Plyr('audio');
|
||
</script>
|
||
|
||
@if (!string.IsNullOrEmpty(Model.VideoUrl))
|
||
{
|
||
<script>
|
||
window.addEventListener("load", () => {
|
||
setTimeout(() => {
|
||
const video = document.getElementById("heroVideo");
|
||
const source = document.createElement("source");
|
||
source.src = "/videos/@Model.VideoUrl";
|
||
source.type = "video/mp4";
|
||
video.appendChild(source);
|
||
video.load(); // Triggers actual file load
|
||
video.play().catch(err => {
|
||
console.warn("Autoplay failed:", err);
|
||
});
|
||
}, 2000); // Adjust delay (e.g., 1000–3000ms) based on your needs
|
||
});
|
||
</script>
|
||
}
|
||
}
|
||
|
||
@section Meta {
|
||
<MetaTag meta-title="@Model.Title"
|
||
meta-description="@Model.IndexText"
|
||
meta-keywords="Catherine Lynwood blog, The Alpha Flame, psychological thriller, indie fiction, 1980s fiction, dark secrets, strong female characters"
|
||
meta-author="Catherine Lynwood"
|
||
meta-url="https://www.catherinelynwood.com/the-alpha-flame/blog/@Model.BlogUrl"
|
||
meta-image="@(string.IsNullOrWhiteSpace(Model.ImageUrl) ? null : $"https://www.catherinelynwood.com/images/webp/{Model.DefaultWebpImage}")"
|
||
meta-image-alt="@Model.ImageAlt"
|
||
og-site-name="Catherine Lynwood - The Alpha Flame"
|
||
article-published-time="@Model.PublishDate"
|
||
article-modified-time="@DateTime.UtcNow"
|
||
twitter-card-type="@(string.IsNullOrWhiteSpace(Model.VideoUrl) ? "summary_large_image" : "player")"
|
||
twitter-site-handle="@@CathLynwood"
|
||
twitter-creator-handle="@@CathLynwood"
|
||
twitter-video-url="@(string.IsNullOrWhiteSpace(Model.VideoUrl) ? null : $"https://www.catherinelynwood.com/videos/{Model.VideoUrl}")"
|
||
twitter-player-width="@(string.IsNullOrWhiteSpace(Model.VideoUrl) ? null : 480)"
|
||
twitter-player-height="@(string.IsNullOrWhiteSpace(Model.VideoUrl) ? null : 80)" />
|
||
|
||
|
||
<script type="application/ld+json">
|
||
@Html.Raw(Model.SchemaJsonLd)
|
||
</script>
|
||
|
||
<script>
|
||
function disableSubmit(form) {
|
||
const button = form.querySelector('button[type="submit"]');
|
||
if (button) {
|
||
button.disabled = true;
|
||
button.innerText = 'Sending...'; // Optional
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style>
|
||
ul {
|
||
list-style-type: none;
|
||
padding-left: 0;
|
||
margin-left: 0;
|
||
}
|
||
</style>
|
||
}
|
||
|