AverageMarcus/next-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update template to support showing top 5 for each category

Browse Source 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble
2026-03-01 11:14:45 +00:00
parent 2b7dd60e0d
commit 48bdd1174e
1 changed files with 131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
templates/index.html
View File

@@ -43,6 +43,35 @@
padding: 6px; padding: 6px;
} }
.modal {
display: none;
position: absolute;
top: 25%;
left: 25%;
height: 430px;
width: 50%;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
box-shadow: 2px 2px 2px #ccc;
padding: 4px;
}
.modal.show {
display: block;
}
.modal .books {
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
overflow-x: scroll;
}
.modal .books div {
margin: 6px;
display: flex;
flex-direction: column;
}
main > .category:nth-of-type(1), main > .category:nth-of-type(1),
main > .category:nth-of-type(2), main > .category:nth-of-type(2),
main > .category:nth-of-type(3) { main > .category:nth-of-type(3) {
@@ -59,6 +88,10 @@
main > .category:nth-of-type(3) { main > .category:nth-of-type(3) {
grid-column: span 2; grid-column: span 2;
} }
.modal .books {
flex-direction: column;
}
} }
</style> </style>
</head> </head>
@@ -86,7 +119,29 @@
</a> </a>
<a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a> <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
<div class="rating">⭐ {{ $book.Rating }}</div> <div class="rating">⭐ {{ $book.Rating }}</div>
<div class="more-link"><a href="#">[ Show More ]</a></div>
<div class="modal">
<div><a href="#" class="close">[Close]</a></div>
<div class="books">
{{ range $i, $Book := (index .Books $cat) }}
{{ if eq $i 1 }}
{{ continue }}
{{ end }}
<div>
<a href="{{ $Book.Link }}" target="_blank">
<img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
</a>
<a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
<div class="rating">⭐ {{ $Book.Rating }}</div>
</div> </div>
{{ if eq $i 5 }}
{{ break }}
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ $cat := "Non-Fiction" }} {{ $cat := "Non-Fiction" }}
{{ $book := index (index .Books $cat) 0 }} {{ $book := index (index .Books $cat) 0 }}
<div class="category"> <div class="category">
@@ -96,7 +151,29 @@
</a> </a>
<a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a> <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
<div class="rating">⭐ {{ $book.Rating }}</div> <div class="rating">⭐ {{ $book.Rating }}</div>
<div class="more-link"><a href="#">[ Show More ]</a></div>
<div class="modal">
<div><a href="#" class="close">[Close]</a></div>
<div class="books">
{{ range $i, $Book := (index .Books $cat) }}
{{ if eq $i 1 }}
{{ continue }}
{{ end }}
<div>
<a href="{{ $Book.Link }}" target="_blank">
<img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
</a>
<a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
<div class="rating">⭐ {{ $Book.Rating }}</div>
</div> </div>
{{ if eq $i 5 }}
{{ break }}
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ $cat := "Comics" }} {{ $cat := "Comics" }}
{{ $book := index (index .Books $cat) 0 }} {{ $book := index (index .Books $cat) 0 }}
<div class="category"> <div class="category">
@@ -106,6 +183,27 @@
</a> </a>
<a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a> <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
<div class="rating">⭐ {{ $book.Rating }}</div> <div class="rating">⭐ {{ $book.Rating }}</div>
<div class="more-link"><a href="#">[ Show More ]</a></div>
<div class="modal">
<div><a href="#" class="close">[Close]</a></div>
<div class="books">
{{ range $i, $Book := (index .Books $cat) }}
{{ if eq $i 1 }}
{{ continue }}
{{ end }}
<div>
<a href="{{ $Book.Link }}" target="_blank">
<img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
</a>
<a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
<div class="rating">⭐ {{ $Book.Rating }}</div>
</div>
{{ if eq $i 5 }}
{{ break }}
{{ end }}
{{ end }}
</div>
</div>
</div> </div>
{{ range $cat, $Books := .Books }} {{ range $cat, $Books := .Books }}
@@ -120,9 +218,42 @@
</a> </a>
<a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a> <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
<div class="rating">⭐ {{ $book.Rating }}</div> <div class="rating">⭐ {{ $book.Rating }}</div>
<div class="more-link"><a href="#">[ Show More ]</a></div>
<div class="modal">
<div><a href="#" class="close">[Close]</a></div>
<div class="books">
{{ range $i, $Book := $Books }}
{{ if eq $i 1 }}
{{ continue }}
{{ end }}
<div>
<a href="{{ $Book.Link }}" target="_blank">
<img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
</a>
<a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
<div class="rating">⭐ {{ $Book.Rating }}</div>
</div>
{{ if eq $i 5 }}
{{ break }}
{{ end }}
{{ end }}
</div>
</div>
</div> </div>
{{ end }} {{ end }}
</main> </main>
<script>
[...document.querySelectorAll('.more-link')].forEach(more => {
const toggleModal = function(event) {
event.preventDefault();
more.parentElement.querySelector('.modal').classList.toggle('show');
}
more.parentElement.querySelector('.modal .close').addEventListener('click', toggleModal);
more.querySelector('a').addEventListener('click', toggleModal);
});
</script>
{{ else }} {{ else }}
<div class="container" style="text-align: center;padding: 4rem;"> <div class="container" style="text-align: center;padding: 4rem;">
<h2>Still loading book recommendations...</h2> <h2>Still loading book recommendations...</h2>