Add gitignore and static icons :beach: (#70)

* Add gitignore and static icons

* Add social icons bar

* Add more social icons, fix styling for header

* Fix dark theme bug

* Remove AWS icon

* Add math typesetting to readme features

* Templatize social icons

* Add documentation and fix menu icon

* Add more icons in example site

* Fix lang in code blocks

* Fix codeblocks lang and use twitch icon

* Reduce spacing around and between social icons

* Fix icon sizing

* Hard code width and height

* Fix language in code blocks

* Update language

* Update Readme

* Add screenshot

* Update screenshots

Co-authored-by: Yash Mehrotra <yashmehrotra95@gmail.com>

exampleSite/config.toml

@@ -21,7 +21,14 @@ pygmentsStyle = "monokai"
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
         onload="renderMathInElement(document.body);"></script>
   """
-  showPostsOnHomePage = "popular"
+  socialIcons = [
+    {name = "twitter", url = "https://example.com"},
+    {name = "linkedin", url = "https://example.com"},
+    {name = "stackoverflow", url = "https://example.com"},
+    {name = "dribbble", url = "https://example.com"},
+    {name = "instagram", url = "https://example.com"},
+    {name = "twitch", url = "https://example.com"},
+  ]
   metaKeywords = ["blog", "gokarna", "hugo"]
 
 [menu]
@@ -45,16 +52,16 @@ pygmentsStyle = "monokai"
     url = "/tags/"
     weight = 4
 
-  [[menu.main]]
-    identifier = "coffee"
-    pre = "<span data-feather='coffee'></span>"
-    url = "https://www.buymeacoffee.com/avijitgupta"
-    weight = 5
-
   [[menu.main]]
     identifier = "github"
     pre = "<span data-feather='github'></span>"
     url = "https://github.com/526avijitgupta/gokarna"
+    weight = 5
+
+  [[menu.main]]
+    identifier = "buymeacoffee"
+    pre = "<span data-feather='coffee'></span>"
+    url = "https://www.buymeacoffee.com/avijitgupta"
     weight = 6
 
   [[menu.main]]

exampleSite/content/posts/theme-documentation-advanced.md

@@ -11,7 +11,7 @@ Gokarna is an opinionated theme with a focus on minimalism and simplicity.
 
 ## Content Types
 
-This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata. 
+This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata.
 
 ### Post
 
@@ -54,20 +54,54 @@ The `weight` attribute can be added in the markdown metadata for `post` types. W
 2. Show recent posts on home page if the value is set to `recent`
 3. Do not show anything if the variable is unset or an empty string.
 
-## Icons in header
+## Icons
+Gokarna supports popular social media icons (Github, Linkedin, Twitter, StackOverflow, Dribbble, etc.) out of the box. See full list of supported icons [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
 
-We have used [feather](https://feathericons.com) as our icons library. Here is an example of how to add custom icons in the header:
+### Icons on homepage
 
+To display icons on the homepage, simply update the `socialIcons` config param with a list of name and url of each icon. The specified `name` should exactly match one of the names from [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
+If you want to add more icons, you can download the svg directly from [here](https://simpleicons.org/)  and place them in your local icons directory (`/static/icons/`)
+
+```toml
+  [params]
+    socialIcons = [
+      {name = "twitter", url = "https://example.com"},
+      {name = "linkedin", url = "https://example.com"},
+      {name = "stackoverflow", url = "https://example.com"},
+    ]
 ```
+
+Preview:
+
+![Icons on homepage Preview](/images/theme-documentation-advanced/icons-homepage-preview.png "Icons on homepage Preview")
+
+
+### Icons in header
+
+[Feather](https://feathericons.com) icons has a comprehensive list of icons which are more general purpose and not limited to social media.
+Therefore, we use feather as an additional source of icons. Here is an example of how to add custom icons in the header using feather:
+
+```toml
   [[menu.main]]
     identifier = "github"
     url = "https://github.com"
     weight = 3
-
-    # We use feather-icons
+    # Using feather-icons
     pre = "<span data-feather='github'></span>"
 ```
 
+The same icon in this case could also be added without feather:
+
+```toml
+  [[menu.main]]
+    identifier = "github"
+    url = "https://www.buymeacoffee.com/"
+    weight = 3
+    # Without using feather-icons
+    pre = "<img class='svg-inject' src='/icons/github.svg' />"
+```
+
+
 ## Custom Head HTML
 
 The goal of this feature is to give the user more control over the theme. It's functioning is very straightforward - "You can inject any HTML you want in the `<head>` tag" . This may seem simple at first, but it opens up a lot of possibilities.
@@ -92,7 +126,7 @@ We preferred privacy friendly tools like [Umami](https://umami.is/) & [Fathom An
 
 Giving users the freedom to add anything in the HTML via config.toml seemed like an elegant way to solve the problem.
 
-```markdown
+```toml
 [params]
   customHeadHTML = """
     <script async defer data-website-id="website-id" src="https://analytics.example.com/script.js"></script>
@@ -103,7 +137,7 @@ Giving users the freedom to add anything in the HTML via config.toml seemed like
 
 Katex is a math typesetting library for the web which lets you write beautiful equations. To use it, add the javascript as mentioned in [their documentation](https://katex.org/docs/browser.html) in our `params.customHeadHTML`.
 
-```markdown
+```toml
 [params]
   customHeadHTML = """
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">