From 5552fc3f5ac0468ab9b3f9b63d42051b442262a8 Mon Sep 17 00:00:00 2001
From: vimux <vimux@protonmail.com>
Date: Mon, 28 May 2018 15:31:50 +0300
Subject: [PATCH] Add initial "no posts" empty state

---
 i18n/en.yaml        | 13 +++++++++++++
 layouts/index.html  |  8 ++++++++
 static/css/main.css | 12 ++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/i18n/en.yaml b/i18n/en.yaml
index 644b07b..83eed25 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -16,6 +16,19 @@
 - id: footer_credits
   translation: "Powered by <a href=\"https://gohugo.io/\" rel=\"nofollow noopener\" target=\"_blank\">Hugo</a> and <a href=\"https://github.com/vimux/binario\" rel=\"nofollow noopener\" target=\"_blank\">Binario</a> theme."
 
+# "No posts" empty state
+- id: empty_title
+  translation: "You don't have any posts yet!"
+
+- id: empty_text_start
+  translation: "As posts are added in your <code>mainSection</code> folders"
+
+- id: empty_text_end
+  translation: "they'll appear here"
+
+- id: empty_tip
+  translation: "<b>Tip:</b> You could change <code>mainSection</code> folders in site config file."
+
 # 404
 - id: page404_title
   translation: "404 Page not found"
diff --git a/layouts/index.html b/layouts/index.html
index 1c9e774..2e06036 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,6 +9,14 @@
 			</div>
 		{{ end }}
 		</div>
+		{{- if eq $paginator.TotalNumberOfElements 0 }}
+			<div class="empty block center">
+				<div class="empty__icon">¯\_(ツ)_/¯</div>
+				<h3 class="empty__title">{{ T "empty_title" }}</h3>
+				<p class="empty__text">{{ T "empty_text_start" | safeHTML }} ({{ delimit (apply $mainSections "printf" "<code>content/%s</code>" ".") ", " | safeHTML }}), {{ T "empty_text_end" }}.</p>
+				<p class="empty__tip">{{ T "empty_tip" | safeHTML }}</p>
+			</div>
+		{{- end }}
 		{{ partial "pagination.html" . }}
 	</div>
 {{ partial "footer.html" . }}
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 09cf35f..3e38cec 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -767,6 +767,18 @@ mark {
 	font-size: 1.5rem;
 }
 
+/* Empty state */
+.empty__icon {
+	font-size: 3.5rem;
+	margin-bottom: 2rem;
+}
+
+.empty__tip {
+	padding: .5rem;
+	background-color: #202020;
+	margin: 4rem 0 0;
+}
+
 /* Footer */
 .footer {
 	padding: .625rem 0;