Add highlights to home

* Show highlights in home page if logged in. * Removed duplicated translation keys. * Show title and author in generic cover.
svera · Nov 27, 2023 · 9f174c3 · 9f174c3
1 parent fdda9ad
commit 9f174c3
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 141 deletions.
diff --git a/internal/webserver/controller/document/controller.go b/internal/webserver/controller/document/controller.go
@@ -24,9 +24,11 @@ type IdxReaderWriter interface {
 	SameAuthors(slug string, quantity int) ([]index.Document, error)
 	SameSeries(slug string, quantity int) ([]index.Document, error)
 	RemoveFile(file string) error
+	Documents(IDs []string) (map[string]index.Document, error)
 }
 
 type highlightsRepository interface {
+	Highlights(userID int, page int, resultsPerPage int) (result.Paginated[[]string], error)
 	Highlighted(userID int, doc index.Document) index.Document
 	HighlightedPaginatedResult(userID int, results result.Paginated[[]index.Document]) result.Paginated[[]index.Document]
 }

diff --git a/internal/webserver/controller/document/search.go b/internal/webserver/controller/document/search.go
@@ -55,9 +55,29 @@ func (d *Controller) Search(c *fiber.Ctx) error {
 	if err != nil {
 		return fiber.ErrInternalServerError
 	}
+
+	highlights, err := d.hlRepository.Highlights(int(session.ID), page, 6)
+	if err != nil {
+		return fiber.ErrInternalServerError
+	}
+
+	docs, err := d.idx.Documents(highlights.Hits())
+	if err != nil {
+		return fiber.ErrInternalServerError
+	}
+
+	docsSortedByHighlightedDate := make([]index.Document, len(docs))
+	for i, path := range highlights.Hits() {
+		docsSortedByHighlightedDate[i] = docs[path]
+		docsSortedByHighlightedDate[i].Highlighted = true
+	}
+
 	return c.Render("index", fiber.Map{
-		"Count":   count,
-		"Title":   "Coreander",
-		"Session": session,
+		"Count":                  count,
+		"Title":                  "Coreander",
+		"Session":                session,
+		"Highlights":             docsSortedByHighlightedDate,
+		"EmailSendingConfigured": emailSendingConfigured,
+		"EmailFrom":              d.sender.From(),
 	}, "layout")
 }
diff --git a/internal/webserver/embedded/css/display.css b/internal/webserver/embedded/css/display.css
@@ -75,7 +75,7 @@ a.collapse-control.collapsed:after {
     --bs-link-color: white;
     --bs-link-hover-color: white;
     --bs-link-color-rgb: 255, 255, 255;
-    --bs-link-hover-color-rgb: 139, 185, 254;
+    --bs-link-hover-color-rgb: 255, 255, 255;
     .pagination {
         --bs-pagination-active-bg: #ffffff;
         --bs-pagination-active-color: #000000;
@@ -87,3 +87,7 @@ a.collapse-control.collapsed:after {
         background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
     }
 }
+
+.card-img-overlay a, .card-img-overlay p, .card-img-overlay h2, .card-img-overlay h3 {
+    color: rgba(255,255,255,0.8);
+}
diff --git a/internal/webserver/embedded/images/generic.jpg b/internal/webserver/embedded/images/generic.jpg
diff --git a/internal/webserver/embedded/js/cover-loader.js b/internal/webserver/embedded/js/cover-loader.js
@@ -0,0 +1,30 @@
+window.onload = function () {
+    let imgs = document.querySelectorAll('.cover');
+    for (i = 0; i < imgs.length; i++) {
+        let img = imgs[i];
+
+        if (!img.getAttribute('data-src')) {
+            continue;
+        }
+
+        img.addEventListener('error', function onError(e) {
+            this.setAttribute('src', '/images/generic.jpg');
+        });
+
+        img.setAttribute('src', img.getAttribute('data-src'));
+
+        img.addEventListener('load', (event) => {
+            if (img.getAttribute('src') == '/images/generic.jpg') {
+                return;
+            }
+            let cardTitle = img.nextElementSibling.getElementsByClassName('card-title')[0];
+            let cardTitleLink = cardTitle.getElementsByTagName('a')[0]
+            if (cardTitleLink) {
+                cardTitleLink.text = '';
+            } else {
+                cardTitle.innerHTML = ''
+            }
+            img.nextElementSibling.getElementsByClassName('card-text')[0].innerHTML = '';
+        });
+    }
+}
diff --git a/internal/webserver/embedded/translations/es.yml b/internal/webserver/embedded/translations/es.yml
@@ -75,8 +75,6 @@
 "Request": "Solicitar"
 "A reset password request for Coreander has been received. You can proceed by clicking in the following link or pasting it in your browser": "Hemos recibido una petición para actualizar tu contraseña en Coreander. Si has sido tu, puedes continuar haciendo click en el siguiente enlace o pegándolo en tu navegador"
 "If you didn't request this, you can safely disregard this email.": "Si no has sido tu, puedes ignorar este correo."
-"New password": "Nueva contraseña"
-"Confirm new password": "Confirmar nueva contraseña"
 "We've received your password recovery request. If the address you introduced is registered in our system, you'll receive an email with further instructions in your inbox.": "Hemos recibido tu petición para recuperar tu contraseña. Si la dirección que has indicado está registrada en el sistema, recibiras un correo con indicaciones en tu bandeja de entrada."
 "Password recovery request": "Petición de recuperación de contraseña"
 "Set new password": "Introduce tu nueva contraseña"
@@ -108,3 +106,4 @@
 "Remove from highlights": "Quitar de destacados"
 "%d highlighted documents": "%d documentos destacados"
 "Method not allowed": "Método no permitido"
+"Your highlights": "Tus destacados"
diff --git a/internal/webserver/embedded/translations/fr.yml b/internal/webserver/embedded/translations/fr.yml
@@ -60,7 +60,7 @@
 "Profile updated": "Profil mis à jour"
 "Current password": "Mot de passe actuel"
 "New password": "Nouveau mot de passe"
-"Confirm new password": "Confirmar nueva contraseña"
+"Confirm new password": "Confirmer le nouveau mot de passe"
 "Default send to email address": "Adresse e-mail d'envoi par défaut"
 "Please, fix the following issues": "S'il vous plaît, corrigez les problèmes suivants"
 "Delete user": "Supprimer l'utilisateur"
@@ -75,8 +75,6 @@
 "Request": "Solliciter"
 "A reset password request for Coreander has been received. You can proceed by clicking in the following link or pasting it in your browser": "Une demande de réinitialisation du mot de passe pour Coreander a été reçue. Vous pouvez continuer en cliquant sur le lien suivant ou en le collant dans votre navigateur"
 "If you didn't request this, you can safely disregard this email.": "Si vous ne l'avez pas demandé, vous pouvez ignorer cet e-mail en toute sécurité."
-"New password": "Nouveau mot de passe"
-"Confirm new password": "Confirmer le nouveau mot de passe"
 "We've received your password recovery request. If the address you introduced is registered in our system, you'll receive an email with further instructions in your inbox.": "Nous avons reçu votre demande de récupération de mot de passe. Si l'adresse que vous avez introduite est enregistrée dans notre système, vous recevrez un e-mail contenant des instructions supplémentaires dans votre boîte de réception."
 "Password recovery request": "Demande de récupération de mot de passe"
 "Set new password": "Définir un nouveau mot de passe"
@@ -108,3 +106,4 @@
 "Remove from highlights": "Retirer des favoris"
 "%d highlighted documents": "%d documents favoris"
 "Method not allowed": "Méthode Non Autorisée"
+"Your highlights": "Vos favoris"
diff --git a/internal/webserver/embedded/views/actions.js.html b/internal/webserver/embedded/views/actions.js.html
@@ -78,16 +78,4 @@
             console.log(error);
         });
     }
-
-    window.onload = function () {
-        let imgs = document.querySelectorAll('.cover');
-        for (i = 0; i < imgs.length; i++) {
-            if (imgs[i].getAttribute('data-src')) {
-                imgs[i].addEventListener('error', function onError(e) {
-                    this.setAttribute('src', '/images/generic.jpg');
-                });
-                imgs[i].setAttribute('src', imgs[i].getAttribute('data-src'));
-            }
-        }
-    }
 </script>
diff --git a/internal/webserver/embedded/views/document.html b/internal/webserver/embedded/views/document.html
@@ -6,11 +6,22 @@
 
 <div class="container">
     <div class="row mt-5">
-        <div class="col-md-4 col-sm-12 pe-3">
+        <div class="card col-md-4 col-sm-12 pe-3 border border-0">
             <img src="/images/generic.jpg" data-src="/cover/{{.Document.Slug}}" loading="lazy"
                 class="border border-2 mb-3 cover img-fluid"
                 alt='{{t $lang "\"%s\" cover" .Document.Title}}'>
 
+            <div class="card-img-overlay">
+                <h2 class="card-title text-center mx-1 mt-5">{{.Document.Title}}</h2>
+                <h3 class="card-text text-center mx-1 mt-3">
+                    {{if .Document.Authors}}
+                        {{join .Document.Authors ", "}}
+                    {{else}}
+                        {{t $lang "Unknown author"}}
+                    {{end}}
+                </h3>
+            </div>
+
             <div class="d-grid gap-2 mb-5 actions">
                 <a href="/{{$lang}}/read/{{.Document.Slug}}" class="btn btn-primary">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
@@ -135,7 +146,13 @@ <h4>{{t $lang "Other documents in collection \"%s\"" .Document.Series}}</h4>
                             {{t $lang "See all" }}</a>
                 </div>
 
-                {{template "partials/related" dict "Lang" $lang "Related" .SameSeries}}
+                <div class="row mt-3 pe-0">
+                    {{range $i, $doc := .SameSeries}}
+                        <div class="col-6 col-lg-3 pe-0">
+                            {{template "partials/related" dict "Lang" $lang "Document" $doc}}
+                        </div>
+                    {{end}}
+                </div>
             </section>
             {{end}}         
 
@@ -152,7 +169,13 @@ <h4>
                             {{t $lang "See all" }}</a>
                 </div>
 
-                {{template "partials/related" dict "Lang" $lang "Related" .SameAuthors}}
+                <div class="row mt-3 pe-0">
+                    {{range $i, $doc := .SameAuthors}}
+                    <div class="col-6 col-lg-3 pe-0">
+                        {{template "partials/related" dict "Lang" $lang "Document" $doc}}
+                    </div>
+                    {{end}}
+                </div>
             </section>
             {{end}}   
 
@@ -166,7 +189,13 @@ <h4>{{t $lang "Other documents with similar subjects"}}</h4>
                             {{t $lang "See all" }}</a>
                 </div>
 
-                {{template "partials/related" dict "Lang" $lang "Related" .SameSubjects}}
+                <div class="row mt-3 pe-0">
+                    {{range $i, $doc := .SameSubjects}}
+                    <div class="col-6 col-lg-3 pe-0">
+                        {{template "partials/related" dict "Lang" $lang "Document" $doc}}
+                    </div>
+                    {{end}}
+                </div>
             </section>
             {{end}}         
         </div>
@@ -177,3 +206,4 @@ <h4>{{t $lang "Other documents with similar subjects"}}</h4>
 {{template "partials/delete-modal" .}}
 
 {{template "actions.js" dict "Lang" $lang}}
+<script type="text/javascript" src="/js/cover-loader.js"></script>
diff --git a/internal/webserver/embedded/views/index.html b/internal/webserver/embedded/views/index.html
@@ -3,17 +3,55 @@
         {{template "partials/searchbox" .}}
         <p>{{t .Lang "%d documents available" .Count}}</p>
     </section>
-    <section class="pt-5 text-center">
-        <h2 class="mb-3">{{t .Lang "Search tips"}}</h2>
-        <p>{{t .Lang "Use %s prefix in search box to search by authors only" `<span
-                class="font-monospace">Authors:</span>`}}</p>
-        <p>{{t .Lang "Use %s prefix in search box to search by title only" `<span
-                class="font-monospace">Title:</span>`}}</p>
-        <p>{{t .Lang "Use %s prefix in search box to search by series only" `<span
-                class="font-monospace">Series:</span>`}}</p>
-        <p>{{t .Lang "Use %s prefix in search box to search by subjects only" `<span
-                class="font-monospace">Subjects:</span>`}}</p>
-        <p>{{t .Lang "Enclose your search terms in double quotes to require all those terms and with the same order"}}
-        </p>
-    </section>
+    {{if and (.Session) (ne .Session.Name "")}}
+        <section class="row pt-5">
+                <div class="col-9">
+                        <h2>{{t .Lang "Your highlights" }}</h2>
+                </div>
+                <div class="col-3 text-end">
+                        <a  href="/{{.Lang}}/highlights/{{.Session.Uuid}}">
+                                {{t .Lang "See all" }}
+                        </a>
+                </div>
+
+                <div class="row mt-3 pe-0">
+                    {{$lang := .Lang}}
+                    {{$emailSendingConfigured := .EmailSendingConfigured}}
+                    {{$session := .Session}}
+                    {{$emailFrom := .EmailFrom}}
+
+                    {{range $i, $doc := .Highlights}}
+                    <div class="col-6 col-md-3 col-lg-2 pe-0">
+                        {{template "partials/related" dict "Lang" $lang "Document" $doc}}
+                        <div class="mb-5 actions">
+                            <div class="dropdown">
+                                <button type="button" class="btn btn-primary dropdown-toggle w-100" data-bs-toggle="dropdown"
+                                    aria-expanded="false" data-bs-auto-close="outside">
+                                    {{t $lang "Actions"}}
+                                </button>
+                                {{ template "partials/actions" dict "Lang" $lang "Document" $doc "EmailSendingConfigured"
+                                $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom}}
+                            </div>                        
+                        </div>
+                    </div>
+                    {{end}}
+                </div>
+        </section>
+        {{template "actions.js" dict "Lang" $lang}}
+        <script type="text/javascript" src="/js/cover-loader.js"></script>
+    {{else}}
+        <section class="pt-5 text-center">
+                <h2 class="mb-3">{{t .Lang "Search tips"}}</h2>
+                <p>{{t .Lang "Use %s prefix in search box to search by authors only" `<span
+                        class="font-monospace">Authors:</span>`}}</p>
+                <p>{{t .Lang "Use %s prefix in search box to search by title only" `<span
+                        class="font-monospace">Title:</span>`}}</p>
+                <p>{{t .Lang "Use %s prefix in search box to search by series only" `<span
+                        class="font-monospace">Series:</span>`}}</p>
+                <p>{{t .Lang "Use %s prefix in search box to search by subjects only" `<span
+                        class="font-monospace">Subjects:</span>`}}</p>
+                <p>{{t .Lang "Enclose your search terms in double quotes to require all those terms and with the same order"}}
+                </p>
+        </section>
+    {{end}}
 </div>