279 lines
12 KiB
Plaintext
279 lines
12 KiB
Plaintext
@model CatherineLynwood.Models.BlogIndex
|
||
@using Humanizer
|
||
@using CatherineLynwood.Helpers
|
||
@{
|
||
ViewData["Title"] = "A Cuppa With Catherine";
|
||
}
|
||
|
||
@* <style>
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.card-img {
|
||
filter: grayscale(80%);
|
||
transition: filter 0.3s;
|
||
}
|
||
|
||
.card:hover .card-img {
|
||
filter: grayscale(0%);
|
||
}
|
||
</style> *@
|
||
|
||
<div class="row">
|
||
<div class="col-12 col-md">
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">A Cuppa With Catherine</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row my-4">
|
||
<div class="col-12 text-center">
|
||
<h1 class="display-4">
|
||
<i class="fad fa-coffee" style="--fa-primary-color: #ffffff; --fa-secondary-color: #042830;"></i>
|
||
A Cuppa With Catherine
|
||
</h1>
|
||
<p class="lead mt-3 px-3">
|
||
Pop the kettle on and settle in for a cuppa. Catherine Lynwood invites you to share in her updates, reflections, and the worlds and characters she brings to life—like old friends having a natter over tea.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form method="get" class="row border border-1 rounded-3 bg-white mx-0 mb-3">
|
||
<div class="col-12 pt-3">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-2 col-md-10 col-lg-9 col-xl-8 col-xxl-7">
|
||
<div class="input-group mb-3">
|
||
<span class="input-group-text d-none d-sm-inline">Sort by</span>
|
||
|
||
<select asp-for="BlogFilter.SortDirection" class="form-select js-submit-on-change" aria-label="Sort direction">
|
||
<option value="1">Newest first</option>
|
||
<option value="2">Oldest first</option>
|
||
</select>
|
||
|
||
<span class="input-group-text d-none d-sm-inline">Results per page</span>
|
||
|
||
<select asp-for="BlogFilter.ResultsPerPage" class="form-select js-submit-on-change" aria-label="Results per page">
|
||
<option value="6">6</option>
|
||
<option value="12">12</option>
|
||
<option value="18">18</option>
|
||
<option value="24">24</option>
|
||
<option value="30">30</option>
|
||
</select>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@if (Model.BlogFilter.TotalPages > 1)
|
||
{
|
||
<div class="col-12">
|
||
<nav aria-label="Page navigation" class="d-flex justify-content-center mt-3">
|
||
<ul class="pagination">
|
||
<li class="page-item @(Model.BlogFilter.PageNumber <= 1 ? "disabled" : "")">
|
||
<a class="page-link" href="@BlogUrlHelper.GetPageUrl(Model.BlogFilter.PageNumber - 1, Model.BlogFilter)" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
|
||
@for (int i = 1; i <= Model.BlogFilter.TotalPages; i++)
|
||
{
|
||
var url = BlogUrlHelper.GetPageUrl(i, Model.BlogFilter);
|
||
<li class="page-item @(Model.BlogFilter.PageNumber == i ? "active" : "")">
|
||
<a class="page-link" href="@url">@i</a>
|
||
</li>
|
||
}
|
||
|
||
<li class="page-item @(Model.BlogFilter.PageNumber >= Model.BlogFilter.TotalPages ? "disabled" : "")">
|
||
<a class="page-link" href="@BlogUrlHelper.GetPageUrl(Model.BlogFilter.PageNumber + 1, Model.BlogFilter)" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
}
|
||
</form>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
@if (Model.IsMobile)
|
||
{
|
||
<div class="row">
|
||
@foreach (var item in Model.Blogs)
|
||
{
|
||
<div class="col-12 mb-4">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body d-flex align-items-center">
|
||
<div class="row w-100">
|
||
<div class="col-4">
|
||
<a asp-controller="TheAlphaFlame" asp-action="BlogItem" asp-route-slug="@item.BlogUrl"
|
||
asp-route-PageNumber="@Model.BlogFilter.PageNumber"
|
||
asp-route-SortDirection="@Model.BlogFilter.SortDirection"
|
||
asp-route-ResultsPerPage="@Model.BlogFilter.ResultsPerPage"
|
||
class="me-3">
|
||
<responsive-image src="@item.ImageUrl" alt="@item.ImageAlt" class="img-fluid" display-width-percentage="30" style="width: 100%; height: auto;"></responsive-image>
|
||
</a>
|
||
</div>
|
||
<div class="col-8">
|
||
<h2 class="h5 card-title mb-1">@item.Title</h2>
|
||
<small class="text-muted d-block mb-2">@item.SubTitle</small>
|
||
<div class="card-text mb-2" style="max-height: 120px; overflow-y: auto;">
|
||
@Html.Raw(item.IndexText)
|
||
</div>
|
||
<a asp-controller="TheAlphaFlame" asp-action="BlogItem" asp-route-slug="@item.BlogUrl"
|
||
asp-route-PageNumber="@Model.BlogFilter.PageNumber"
|
||
asp-route-SortDirection="@Model.BlogFilter.SortDirection"
|
||
asp-route-ResultsPerPage="@Model.BlogFilter.ResultsPerPage"
|
||
class="text-dark float-end">Read more...</a>
|
||
<div class="text-muted mt-2">@item.PublishDate.ToString("dd MMMM yyyy")</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="row">
|
||
@if (!string.IsNullOrEmpty(Model.NextBlog.Title))
|
||
{
|
||
<div class="col-12 mb-3">
|
||
<div class="card h-100 shadow-lg border-3 border-dark">
|
||
<div class="row g-0">
|
||
<div class="col-md-1">
|
||
<responsive-image src="@Model.NextBlog.ImageUrl" class="img-fluid rounded-start-3" alt="@Model.NextBlog.ImageAlt" display-width-percentage="30"></responsive-image>
|
||
</div>
|
||
<div class="col-md-11">
|
||
<div class="card-body">
|
||
<p class="h5">Coming up in @Model.NextBlog.PublishDate.Humanize(true) - <em>@Model.NextBlog.Title</em></p>
|
||
<p class="card-text">@Html.Raw(Model.NextBlog.IndexText)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
@foreach (var item in Model.Blogs)
|
||
{
|
||
|
||
<div class="col-sm-6 col-md-4 mb-4 d-flex">
|
||
<div class="card shadow-sm">
|
||
<div class="card-header text-center">
|
||
<h2 class="h5 card-title">@item.Title</h2>
|
||
<small class="text-muted">@item.SubTitle</small>
|
||
</div>
|
||
<a asp-controller="TheAlphaFlame" asp-action="BlogItem" asp-route-slug="@item.BlogUrl"
|
||
asp-route-PageNumber="@Model.BlogFilter.PageNumber"
|
||
asp-route-SortDirection="@Model.BlogFilter.SortDirection"
|
||
asp-route-ResultsPerPage="@Model.BlogFilter.ResultsPerPage">
|
||
<responsive-image src="@item.ImageUrl" alt="@item.ImageAlt" class="card-img rounded-0" display-width-percentage="30"></responsive-image>
|
||
</a>
|
||
<div class="card-body">
|
||
<p class="card-text">@Html.Raw(item.IndexText)</p>
|
||
<p class="float-end">
|
||
<a asp-controller="TheAlphaFlame" asp-action="BlogItem" asp-route-slug="@item.BlogUrl"
|
||
asp-route-PageNumber="@Model.BlogFilter.PageNumber"
|
||
asp-route-SortDirection="@Model.BlogFilter.SortDirection"
|
||
asp-route-ResultsPerPage="@Model.BlogFilter.ResultsPerPage"
|
||
class="text-primary-emphasis">Read more...</a>
|
||
</p>
|
||
<h6>@item.PublishDate.ToString("dd MMMM yyyy")</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
}
|
||
</div>
|
||
}
|
||
|
||
@if (Model.Blogs.Count == 0)
|
||
{
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<p>No blog posts found.</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="col-12 mb-3">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<p class="h5">Got an idea for a future blog post?</p>
|
||
<p>If you would like to ask me a question or have a suggestion for a future blog them please don't be shy. <a asp-controller="AskAQuestion" asp-action="Index"> Go to my ask a question form and let me know.</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
@section Meta {
|
||
<meta name="description" content="Explore the blog of Catherine Lynwood, author of *The Alpha Flame*, for updates, insights, and behind-the-scenes stories. Follow Catherine’s journey as a writer, discover inspiration for her novels, and delve into discussions on women’s fiction, mystery, and family secrets.">
|
||
<meta name="keywords" content="Catherine Lynwood blog, The Alpha Flame updates, women’s fiction blog, author Catherine Lynwood insights, mystery novel blog, family secrets stories, strong female protagonists, 1980s fiction blog, book updates and stories, author’s journey blog, Catherine Lynwood writing process">
|
||
<meta name="author" content="Catherine Lynwood">
|
||
|
||
@{
|
||
var blogPostsJson = string.Join(",", Model.Blogs.Select(item => $@"
|
||
{{
|
||
""@type"": ""BlogPosting"",
|
||
""headline"": ""{item.Title}"",
|
||
""datePublished"": ""{item.PublishDate:yyyy-MM-dd}"",
|
||
""author"": {{
|
||
""@type"": ""Person"",
|
||
""name"": ""Catherine Lynwood""
|
||
}},
|
||
""description"": ""{item.IndexText}"",
|
||
""url"": ""{item.BlogUrl}"",
|
||
""image"": {{
|
||
""@type"": ""ImageObject"",
|
||
""url"": ""{item.ImageUrl}"",
|
||
""description"": ""{item.ImageDescription}""
|
||
}}
|
||
}}"));
|
||
|
||
var jsonLdSchema = $@"
|
||
{{
|
||
""@context"": ""https://schema.org"",
|
||
""@type"": ""Blog"",
|
||
""name"": ""Catherine Lynwood’s Blog"",
|
||
""description"": ""Catherine Lynwood shares updates, insights, and stories behind her novel *The Alpha Flame* and her writing journey."",
|
||
""url"": ""https://www.catherinelynwood.com/the-alpha-flame/blog"",
|
||
""blogPost"": [{blogPostsJson}]
|
||
}}";
|
||
}
|
||
|
||
<script type="application/ld+json">
|
||
@Html.Raw(jsonLdSchema)
|
||
</script>
|
||
|
||
|
||
|
||
}
|
||
|
||
@section Scripts {
|
||
<script>
|
||
$(document).on('change', '.js-submit-on-change', function () {
|
||
$(this).closest('form').submit();
|
||
});
|
||
</script>
|
||
<script>
|
||
function disableSubmit(form) {
|
||
const button = form.querySelector('button[type="submit"]');
|
||
if (button) {
|
||
button.disabled = true;
|
||
button.innerText = 'Sending...'; // Optional
|
||
}
|
||
}
|
||
</script>
|
||
} |