260 lines
11 KiB
Plaintext
260 lines
11 KiB
Plaintext
@model CatherineLynwood.Models.BlogIndex
|
||
|
||
@{
|
||
ViewData["Title"] = "Catherine's Blog";
|
||
}
|
||
|
||
@* <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">The Alpha Flame Blog</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h1>The Alpha Flame Blog</h1>
|
||
<p>Follow along as Catherine Lynwood shares updates, reflections, and glimpses into the worlds and characters she is passionate about bringing to life.</p>
|
||
</div>
|
||
</div>
|
||
<form asp-action="Blog" 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" id="basic-addon1">Sort by</span>
|
||
|
||
<select asp-for="BlogFilter.SortDirection" class="form-select js-submit-on-change" name="SortDirection" 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" id="basic-addon1">Results per page</span>
|
||
<select asp-for="BlogFilter.ResultsPerPage" class="form-select js-submit-on-change" name="ResultsPerPage" aria-label="Results per page">
|
||
<option value="10">10</option>
|
||
<option value="20">20</option>
|
||
<option value="30">30</option>
|
||
<option value="40">40</option>
|
||
<option value="50">50</option>
|
||
</select>
|
||
|
||
<button class="btn btn-dark" type="button" data-bs-toggle="collapse" data-bs-target="#categories">Show Categories</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hidden field for PageNumber -->
|
||
<input type="hidden" asp-for="BlogFilter.PageNumber" value="@Model.BlogFilter.PageNumber" name="PageNumber" id="PageNumber" />
|
||
<input type="hidden" asp-for="BlogFilter.TotalPages" value="@Model.BlogFilter.TotalPages" name="PreviousTotalPages" />
|
||
|
||
<div class="col-12 @(Model.ShowAdvanced ? "collapse show" : "collapse")" id="categories">
|
||
<div class="row">
|
||
<div class="col-md-10">
|
||
<ul class="list-inline">
|
||
@foreach (var item in Model.BlogCategories)
|
||
{
|
||
<li class="list-inline-item p-1">
|
||
<div class="form-check form-switch text-dark">
|
||
<input class="form-check-input"
|
||
type="checkbox"
|
||
role="switch"
|
||
id="switch-@item.CategoryID"
|
||
name="Categories"
|
||
value="@item.CategoryID"
|
||
checked="@item.Selected">
|
||
<label class="form-check-label" for="switch-@item.CategoryID">
|
||
@item.Category
|
||
</label>
|
||
</div>
|
||
</li>
|
||
}
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<button class="btn btn-dark w-100" type="submit">Apply Category Filter</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
@if (Model.BlogFilter.TotalPages > 1)
|
||
{
|
||
<div class="col-12">
|
||
<!-- Pagination Component -->
|
||
<nav aria-label="Page navigation" class="d-flex justify-content-center mt-3">
|
||
<ul class="pagination">
|
||
<!-- Previous button -->
|
||
<li class="page-item @(Model.BlogFilter.PageNumber <= 1 ? "disabled" : "")">
|
||
<a class="page-link" href="javascript:void(0);" onclick="setPageNumber(@(Model.BlogFilter.PageNumber - 1))" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Page numbers -->
|
||
@for (int i = 1; i <= Model.BlogFilter.TotalPages; i++)
|
||
{
|
||
<li class="page-item @(Model.BlogFilter.PageNumber == i ? "active" : "")">
|
||
<a class="page-link" href="javascript:void(0);" onclick="setPageNumber(@i)">@i</a>
|
||
</li>
|
||
}
|
||
|
||
<!-- Next button -->
|
||
<li class="page-item @(Model.BlogFilter.PageNumber >= Model.BlogFilter.TotalPages ? "disabled" : "")">
|
||
<a class="page-link" href="javascript:void(0);" onclick="setPageNumber(@(Model.BlogFilter.PageNumber + 1))" 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" 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" 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">
|
||
@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">
|
||
<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" 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>
|
||
}
|
||
|
||
|
||
|
||
@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>
|
||
function setPageNumber(pageNumber) {
|
||
// Set the hidden PageNumber input value
|
||
document.getElementById('PageNumber').value = pageNumber;
|
||
|
||
// Submit the form
|
||
document.querySelector('form').submit();
|
||
}
|
||
|
||
$(document).on('change', '.js-submit-on-change', function(e){
|
||
$(this).closest('form').submit();
|
||
})
|
||
</script>
|
||
|
||
|
||
} |