internal/templates/grouped-entries.gohtml

@@ -22,20 +22,18 @@
 	<div class="container">
 		<section class="header">
 			<h1 class="title">{{.PrimaryGroup.Title}}</h1>
-			<span class="date">generated on {{.GeneratedDate.Format
-				"Jan 2, 2006"}}</span>
-		</section>
-
-		<section class="summary">
-			<h2 class="group-entries-title">Summary</h2>
-      {{if .PrimaryGroup.Summary}}
-			<p>{{textToHTML .PrimaryGroup.Summary}}</p>
-			{{end}}
-			<p>
-				This digest has {{.PrimaryGroup.TotalEntries}} entries from {{.PrimaryGroup.TotalFeeds}} feeds.
+			<p class="subtitle">
+				generated <a href=".." title="Back to Overview">{{.GeneratedDate.Format "Jan 2, 2006"}}</a>, with {{.PrimaryGroup.TotalEntries}} entries from {{.PrimaryGroup.TotalFeeds}} feeds.
 			</p>
 		</section>
 
+		{{if .PrimaryGroup.Summary}}
+		<section class="summary">
+			<h2 class="group-entries-title">Summary</h2>
+			<div>{{textToHTML .PrimaryGroup.Summary}}</div>
+		</section>
+		{{end}}
+
 		<section class="entries">
     {{range .PrimaryGroup.SubGroups}}
     <h3 class="sub-group-title">{{.Title}}</h3>

internal/templates/overview.gohtml

@@ -9,33 +9,39 @@
 <body>
     <div class="container">
         <section class="header">
-            <h1>Miniflux Digest Overview</h1>
-            <span class="date">generated on {{.GeneratedDate.Format "Jan 2, 2006"}}</span>
+            <h1 class="title">Miniflux Digest Overview</h1>
+            <p class="subtitle">
+                Generated on {{.GeneratedDate.Format "Jan 2, 2006"}}, with {{.TotalEntries}} entries from {{.TotalFeeds}} feeds.
+            </p>
         </section>
 
+        {{if .OverviewSummary}}
         <section class="summary">
-            <h2>Summary</h2>
-            {{if .OverviewSummary}}
-            <p>{{.OverviewSummary}}</p>
-            {{end}}
-            <p>You have {{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
+            <h2 class="group-entries-title">Summary</h2>
+            <div>{{.OverviewSummary}}</div>
         </section>
+        {{end}}
 
         <section class="grouped-digests">
-            <h2>Grouped Digests</h2>
-            <ul>
-                {{range .PrimaryGroups}}
-                    <li>
-                        <h3><a href="digests/{{.Slug}}.html">{{.Title}}</a></h3>
-                        {{if .Summary}}
-                        <p>{{.Summary}}</p>
-                        {{else}}
-                        <p>{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
-												{{end}}
-                    </li>
-                {{end}}
-            </ul>
+            <h2 class="group-entries-title">Grouped Digests</h2>
+            {{range .PrimaryGroups}}
+                <section class="entry">
+                    <summary class="entry">
+                        <a href="digests/{{.Slug}}.html" class="entry-link">{{.Title}}</a>
+                    </summary>
+                    {{if .Summary}}
+                    <div class="entry-content">
+                        {{.Summary}}
+                    </div>
+                    {{end}}
+                    <div class="entry-meta">
+                        <div class="entry-meta-tab">{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</div>
+                        <div class="entry-meta-tab" style="margin-left: auto;"><a href="#" class="mark-as-read-link">Mark as read</a></div>
+                    </div>
+                </section>
+            {{end}}
         </section>
     </div>
+    <script>{{include "static/overview.js"}}</script>
 </body>
 </html>

internal/templates/static/overview.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const markAsReadLinks = document.querySelectorAll('.mark-as-read-link');
+
+    markAsReadLinks.forEach(link => {
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            const entry = event.target.closest('section.entry');
+            if (entry) {
+                entry.classList.toggle('viewed');
+                if (entry.classList.contains('viewed')) {
+                    event.target.textContent = 'Mark as unread';
+                } else {
+                    event.target.textContent = 'Mark as read';
+                }
+            }
+        });
+    });
+
+    const entries = document.querySelectorAll('.grouped-digests .entry');
+    entries.forEach(entry => {
+        entry.addEventListener('click', (event) => {
+            // Don't do anything if a link in the meta section was clicked
+            if (event.target.closest('.entry-meta')) {
+                return;
+            }
+
+            // Find the main link and navigate to it
+            const mainLink = entry.querySelector('a.entry-link');
+            if (mainLink) {
+                mainLink.click();
+            }
+        });
+        // Add a cursor pointer to the whole card except the meta section
+        entry.style.cursor = 'pointer';
+    });
+
+    // Remove cursor pointer from the meta section
+    const metaSections = document.querySelectorAll('.entry-meta');
+    metaSections.forEach(meta => {
+        meta.style.cursor = 'auto';
+    });
+});

internal/templates/static/style.css

@@ -68,20 +68,36 @@ body {
 
 .container {
     max-width: 800px;
+    min-width: 360px;
     margin: 2rem auto;
     padding: 1.5rem;
 }
 
 section.header {
     margin-bottom: 1.5rem;
-    text-align: center;
+    text-align: left;
 }
 
 section.header h1.title {
     font-size: 1.875rem;
     font-weight: 700;
     color: var(--header-title-color);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0;
+}
+
+.subtitle {
+    font-size: 0.9rem;
+    color: var(--header-date-color);
+    margin-top: 0;
+}
+
+.subtitle a {
+    color: var(--entry-link-color);
+    text-decoration: none;
+}
+
+.subtitle a:hover {
+    text-decoration: underline;
 }
 
 section.header .date {
@@ -89,7 +105,7 @@ section.header .date {
     color: var(--header-date-color);
 }
 
-section.summary p:first-of-type {
+section.summary div:first-of-type {
     margin: 1rem auto;
     padding: 0.5rem 1rem;
     background-color: var(--container-background);
@@ -100,10 +116,9 @@ section.summary p:first-of-type {
 h2.group-entries-title {
     font-size: 1.25rem;
     font-weight: 500;
-    color: var(--group-title-color);
+    color: var(--text-color);
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
-    padding-left: 0.5rem;
 }
 
 section.entry {

scripts/preview/main.go

@@ -79,7 +79,7 @@ func generateMockDigest(cfg *config.Config) *models.OverviewTemplateData {
 	}
 
 	log.Println("generateDigestData: Building digest data...")
-	return digestSvc.BuildDigestData(
+	data := digestSvc.BuildDigestData(
 		entries,
 		icons,
 		cfg.Digest.GroupBy,
@@ -87,6 +87,17 @@ func generateMockDigest(cfg *config.Config) *models.OverviewTemplateData {
 		cfg.Digest.SortBy,
 		cfg.Miniflux.Host,
 	)
+
+	if len(data.PrimaryGroups) > 0 {
+		data.PrimaryGroups[0].Summary = "This is a mock summary for the first group to test the layout."
+	}
+	if len(data.PrimaryGroups) > 2 {
+		data.PrimaryGroups[2].Summary = "This is another mock summary for a different group, showing that not all groups have summaries."
+	}
+
+	data.OverviewSummary = "This is a mock overview summary to see how it looks on the page. It should provide a high-level overview of all the digests included below."
+
+	return data
 }
 
 func generateMinifluxDigest(cfg *config.Config, minifluxClientService services.MinifluxClientService) *models.OverviewTemplateData {