Updating documentation

blog/hugolayout.md

@@ -491,7 +491,9 @@ If you're writing a `terms.html` you can find all page in the bundle with
 {{ end }}
 ```
 
-### Creating a search index using Scratch
+### Search
+
+#### Creating a search index using Scratch
 
 <https://gohugo.io/functions/scratch/>
 <https://regisphilibert.com/blog/2017/04/hugo-scratch-explained-variable/>
@@ -518,6 +520,14 @@ We can utilise the Hugo command scratch, which creates a temporary scratch pad t
 {{- $.Scratch.Get "index" | jsonify -}}
 ```
 
+#### Creating a search page
+
+You can create a new `single.html` in `./layouts/search/`.
+
+Then you can create a new markdown file `index.md` in `./content/search`.
+
+This markdown file should set the `type` in the front matter - this should be set to `search` so it uses the search `single.html`.
+
 ### SEO
 
 To optimise Hugo for SEO we can follow this guide: <https://regisphilibert.com/blog/2017/04/hugo-scratch-explained-variable/>.
@@ -751,3 +761,74 @@ Alternatively, you can do:
 <meta name="author" content="{{ .Site.Params.author }}" />
 {{ end }}
 ```
+
+#### Favicon
+
+TODO: Create seperate note with link to generating a favicon for a project.
+
+You can generate a favicon here: <https://favicon.io/favicon-generator/>.
+
+If you already have an icon you want to use, you can create a set of favicons out of it here: <https://realfavicongenerator.net>.
+
+You should add the following to the `head.html` to set the favicon and additional ios/android settings. Remember to set the `manifest.json`.
+
+```hugo
+<!-- Set favicon tags -->
+<link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}" />
+<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="{{ "favicon.ico" | absURL }}" />
+<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}" sizes="180x180">
+<link rel="icon" href="{{ "favicon-32x32.png" | absURL }} " sizes="32x32" type="image/png">
+<link rel="icon" href="{{ "favicon-16x16.png" | absURL }}" sizes="16x16" type="image/png">
+<link rel="manifest" href="{{ "manifest.json" | absURL }}">
+<link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | absURL }}" color="#0c344b">
+```
+
+#### Search engine tags
+
+These tell google and other search engines that they can index and scrape the site.
+
+```hugo
+<meta name="robots" content="index,follow" />
+<meta name="googlebot" content="index,follow" />
+```
+
+#### Twitter/Facebook tags
+
+More information on these is here: <https://stackoverflow.com/questions/10836135/when-do-i-need-a-fbapp-id-or-fbadmins>. These are optional if you're not maintaining a facebook app to go alongside the website.
+
+```hugo
+<meta name="twitter:site" content="{{ .Site.Params.twitter }}">
+<meta name="twitter:creator" content="{{ .Site.Params.twitter }}" />
+<meta property="fb:app_id" content="538089519640705" />
+<meta property="fb:admins" content="100000686899395" />
+```
+
+#### Other tags
+
+```hugo
+<!-- Theme Color -->
+<meta name="theme-color" content="#141414" />
+<meta name="msapplication-TileColor" content="#141414" />
+
+<meta name="keywords" content="" />
+<meta name="imagemode" content="force" />
+<meta name="coverage" content="Worldwide" />
+<meta name="distribution" content="Global" />
+<meta name="HandheldFriendly" content="True" />
+<meta name="msapplication-tap-highlight" content="no" />
+<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.header }}" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<meta name="apple-touch-fullscreen" content="yes" />
+```
+
+#### Internal templates
+
+Hugo ships with internal templates for common metadata for sites: <https://gohugo.io/templates/internal/>.
+
+```hugo
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/google_news.html" . -}}
+{{- template "_internal/schema.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+```

tasks.todo

@@ -24,12 +24,12 @@ Tasks:
 
     ✔ Change homepage description layout. @done (5/7/2020, 6:39:03 PM)
     ☐ Refactor front page like (https://www.educative.io/edpresso)
+    ☐ Another layout for cards (https://codewithhugo.com)
     ✔ Sort out colour scheme @done (5/5/2020, 4:09:10 AM)
     ✔ Document the taxonomies list page http://localhost:1313/authors/ @done (5/7/2020, 6:35:07 PM)
     ✔ Using scratch? @done (5/7/2020, 6:56:29 PM)
 
   Misc:
-    ☐ Add search to project
     ☐ Add social metadata
     ☐ Add Hugo notice (admonitions) (https://github.com/martignoni/hugo-notice)
     ✔ Add commento to project @done (5/4/2020, 4:59:34 AM)
@@ -74,3 +74,17 @@ Tasks:
 
   Final build:
     ☐ Change the front matter for `_index.md` in `post`.
+
+  Search:
+    ☐ Find simple CSS design for search bar.
+    ☐ Implement search using a library.
+    Notes:
+      - Search is done from the navbar, when enter is pressed, go to a html page for results?
+    Flow:
+      - Implement search in JS, have it return a js object
+      - Use JQuery to render a "card" with this metadata
+        - Using the title, the image and the tags etc
+    Links:
+      - https://codewithhugo.com/hugo-lunrjs-search-index/
+      - https://gist.github.com/HugoDF/aac2e529f79cf90d2050d7183571684b
+      - https://git.sr.ht/~exprez135/mediumish-taliaferro/tree/master/layouts/search-page/search.html (recursive search for subdirectories)