Fix SEO issues and update docs

apvarun · Jul 17, 2021 · 21bc39d · 21bc39d
1 parent d1b97f8
commit 21bc39d
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -12,8 +12,10 @@ Blist is a clean and fast blog theme for your Hugo site.
 
 - Responsive content
 - Blog pagination
+- Text Search
 - Social links
 - Dark mode
+- Fast performance
 
 ## Preview
 
@@ -43,7 +45,6 @@ Blist theme ships with an fully configured example site. For a quick preview:
 
 Copy the `package.json` file from `themes/showcase` folder to your hugo website root folder, and run `npm install`.
 
-
 ```sh
 cd themes/blist/exampleSite/
 hugo serve --themesDir ../..
@@ -68,7 +69,7 @@ The following explains how to add content to your Hugo site. You can find sample
     ├── blog       # Blog Section
     │   ├── post1   # Post 1
     │   ├── post2   # Post 2
-    │   └── _index     
+    │   └── _index
     └── ...
 
 ## Configure your site
@@ -79,14 +80,41 @@ From `exampleSite/`, copy `config.toml` to the root folder of your Hugo site and
 
 Menu in Blist theme is pre-set to have all section names. You can include custom links in header using the `menu.main` option config.toml.
 
+## Darkmode
+
+`[params.darkModeToggle]` enables the dark mode toggle in header. The preference is then saved so that the mode is automatically chosen for return visits.
+
+## Search
+
+`[params.enableSearch]` option is used to enable search option in the theme.
+
+- Adds the search icon in header
+- Generates the search index
+- Uses fuse.js to enable searching through content
+
+In order to search, you can either click on the search icon from header or press `Ctrl/Cmd + /` key combination.
+
+**Note:**
+
+Make sure to enable JSON in outputs array.
+
+```
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+```
+
 ### Latex
 
 Enable Mathematical options: set `math: true` in your markdown frontmatter
 
-## Google Analytics
+### Google Analytics
 
 Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics).
 
+## Performance
+
+[![Pagespeed Insights Performance](https://github.com/apvarun/blist-hugo-theme/raw/main/images/pagespeed-performance.png)](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblist.vercel.app&tab=mobile)
+
 ## Issues
 
 If you have a question, please [open an issue](https://github.com/apvarun/blist-hugo-theme/issues) for help and to help those who come after you. The more information you can provide, the better!

diff --git a/images/pagespeed-performance.png b/images/pagespeed-performance.png
diff --git a/layouts/partials/blog-card.html b/layouts/partials/blog-card.html
@@ -1,7 +1,7 @@
 <a class="p-2" href="{{ .Permalink }}">
   {{ if .Params.thumbnail }}
   <div class="relative">
-    <img src="{{ .Params.thumbnail }}" class="rounded-lg shadow-sm w-full h-52 object-cover" />
+    <img src="{{ .Params.thumbnail }}" alt="{{ .Params.title }}" class="rounded-lg shadow-sm w-full h-52 object-cover" />
     <div class="absolute top-4 right-4 rounded shadow bg-white text-gray-900 dark:bg-gray-900 dark:text-white text-sm px-2 py-0.5">
       {{ .Params.date.Format "Jan 2, 06" }}
     </div>

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -7,9 +7,7 @@
   <title>
     {{ block "title" . }} {{- .Title }} - {{ .Site.Title -}} {{ end }}
   </title>
-  {{- if .Description }}
-  <meta name="description" content="{{ .Description }}" />
-  {{ end -}}
+  <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}" />
   {{- if .Keywords }}
   <meta name="keywords" content="{{ delimit .Keywords "," }}" />
   {{ end -}}

diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
@@ -4,6 +4,6 @@
       <h1 class="text-4xl font-bold mb-4">{{ .Site.Params.homepage.title }}</h1>
       <p class="font-light text-lg">{{ .Site.Params.homepage.description }}</p>
     </div>
-    <img class="rounded-lg shadow-sm" src="{{ .Site.Params.homepage.photo }}" />
+    <img class="rounded-lg shadow-sm" src="{{ .Site.Params.homepage.photo }}" alt="{{ .Site.Title }}" />
   </div>
 </section>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
@@ -2,7 +2,7 @@
   <div class="container px-6 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
     <div>
       <div class="text-2xl font-bold mb-2">Follow me</div>
-      <p class="opacity-50">{{ .Site.Params.homepage.social.description }}</p>
+      <p class="opacity-60">{{ .Site.Params.homepage.social.description }}</p>
     </div>
     <ul class="flex justify-center gap-4">
       {{ with .Site.Params.homepage.social.twitter }}