social services icons support #6

Mitrichius · May 17, 2021 · 2692830 · 2692830
1 parent dc52fdf
commit 2692830
Show file tree

Hide file tree

Showing 27 changed files with 268 additions and 106 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ Anubis is a simple minimalist theme for [Hugo blog engine](https://gohugo.io/).
 - Archive
 - Open Graph and Twitter Cards support
 - Mobile support
+- Social icons
 - Google Analytics
 - Disqus
 - Utteranc.es
@@ -86,6 +87,12 @@ params:
     url: https://yourdomain.com/webemntions/receive
     login: hugo-theme-anubis
     pingback: true
+  social:
+  - id: github
+    name: gohugoio
+#  - id: hugo
+#    url: "https://gohugo.io/"
+#    icon: "hugo"
 
 markup:
   goldmark:
@@ -113,6 +120,51 @@ Options:
 - `dark` - dark theme by default, can be switched by user to light theme and back. Theme settings are saved for user 
 - `auto` - theme based on user system settings by default, can be switched by user to dark/light theme. Theme settings are saved for user 
 
+### Social icons
+#### Predefined icons
+To add icon from predefined list, add to `params.social` config:
+- id of social network
+- name for placeholder (usually it's your nickname or login)  
+
+Predefined list:
+ - email
+ - facebook
+ - github
+ - instagram
+ - linkedin
+ - patreon
+ - reddit
+ - snapchat
+ - soundcloud
+ - spotify
+ - telegram
+ - twitch
+ - twitter
+ - vk
+ - youtube
+
+Example:
+```
+  - id: github
+    name: gohugoio
+```
+Config like this generate github icon with "https://github.com/gohugoio" url.
+
+#### Custom icons
+To add custom icon, add to `params.social` config:
+- id of social network/site
+- full url to your network/site
+Also you need to create directory `static/fa-icons` and add svg icon of your network/site with name equals to `id` from config.
+
+Example:
+```
+  - id: google
+    url: "https://www.google.com/search?q=I'm+lucky"
+```
+Icon should be "static/fa-icons/google.svg"
+
+If you want font awesome icons, download "Font Awesome For Desktop" and open svg directory.
+
 ### Google Analytics
 Only works for production environment. You either build your site with variable like
 `HUGO_ENV=production hugo --minify`

diff --git a/assets/css/dark.css b/assets/css/dark.css
@@ -9,6 +9,9 @@
 --thead-bg-color: #343a40;
 --table-border-color: lightgrey;
 
+--nav-bg-color: #242424;
+--nav-link-color: #b6b6b6;
+
 --pre-color: #333;
 --pre-bg-color: #f1f1f1;
 

diff --git a/assets/css/light.css b/assets/css/light.css
@@ -10,6 +10,9 @@
     --thead-bg-color: lightgrey;
     --table-border-color: lightgrey;
 
+    --nav-bg-color: #fafafa;
+    --nav-link-color: #696969;
+
     --pre-color: #333;
     --pre-bg-color: #f1f1f1;
 

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -181,9 +181,9 @@ hr {
 
 /* Header */
 
-header {
-    display: flex;
-    justify-content: space-between;
+.common-header {
+    padding-bottom: 1.5em;
+    border-bottom: thin solid var(--hr-color);
 }
 
 header a {
@@ -203,25 +203,64 @@ header h2 {
     font-weight: normal;
 }
 
-header nav {
+.header-top {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    vertical-align: middle;
+}
+
+.site-title {
+    white-space: nowrap;
+}
+
+header nav:not(:empty){
+    background: var(--nav-bg-color);
     margin-top: 1em;
     max-width: 100%;
-    text-align: right;
+    text-align: center;
+    padding: 0.5em 0;
 }
 
 header nav a {
-    margin-left: 2em;
+    display: inline-block;
+    margin: 0 2.5%;
 }
 
-.site-title {
-    white-space: nowrap;
+/* Social icons */
+.social-icons {
+    margin-top: 1em;
+    margin-bottom: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
-.common-header {
-    padding-bottom: 1.5em;
-    border-bottom: thin solid var(--hr-color);
+.social-icons li {
+    display: inline;
 }
 
+.social-icons li:not(:first-of-type) {
+    margin-left: 0.5em;
+}
+
+.social-icons a:hover,
+.social-icons a:focus,
+.social-icons a:active {
+    color: inherit;
+    border-bottom: none;
+    text-decoration: none;
+}
+
+.inline-svg {
+    display: inline-block;
+    height: 1.15rem;
+    width: 1.15rem;
+    top: 0.15rem;
+    position: relative;
+}
+
+
 /* Pages */
 main h1 {
     margin-top: 1em;
@@ -238,7 +277,7 @@ main h1 {
 /* Articles */
 
 .post-navigation {
-    background: var(--pagination-bg-color);
+    background: var(--nav-bg-color);
     text-align: center;
     margin-top: 1em;
     max-width: 100%;
@@ -250,7 +289,7 @@ main h1 {
 }
 
 .post-navigation a {
-    color: var(--pagination-link-color);
+    color: var(--nav-link-color);
     margin-left: 2em;
 }
 
@@ -495,27 +534,6 @@ ul.language-select > li, ul.footer-menu > li {
         font-size: 14px;
     }
 
-    header {
-        display: block;
-    }
-
-    .site-header {
-        text-align: center;
-    }
-
-    header nav:not(:empty){
-        background: var(--pagination-bg-color);
-        margin-top: 1em;
-        max-width: 100%;
-        text-align: center;
-        padding: 0.5em 0;
-    }
-
-    header nav a {
-        display: inline-block;
-        margin: 0 2.5%;
-    }
-
     .post-navigation {
         background: var(--pagination-bg-color);
         text-align: center;

diff --git a/data/social.yaml b/data/social.yaml
@@ -0,0 +1,16 @@
+social_icons:
+  email: mailto:%s
+  facebook: https://www.facebook.com/%s
+  github: https://github.com/%s
+  instagram: https://www.instagram.com/%s
+  linkedin: https://www.linkedin.com/in/%s
+  patreon: https://www.patreon.com/%s
+  reddit: https://www.reddit.com/user/%s
+  snapchat: https://www.snapchat.com/s/%s
+  soundcloud: https://soundcloud.com/%s
+  spotify: https://open.spotify.com/user/%s
+  telegram: tg://resolve?domain=%s
+  twitch: https://www.twitch.tv/%s
+  twitter: https://twitter.com/%s
+  vk: https://vk.com/%s
+  youtube: https://www.youtube.com/c/%s
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -8,41 +8,49 @@ disqusShortname = ""
 googleAnalytics = ""
 
 [author]
-  name = "Dmitry Kolosov"
+name = "Dmitry Kolosov"
 
 [params]
-   author = "Dmitry Kolosov"
-   description = "Anubis is a simple minimalist theme for Hugo blog engine."
-   dateFormat = "2006-01-02"
-   paginationSinglePost = true
-   style = "light-without-switcher"
-   readMore = false
-
-   # utteranc.es support
-   utterancesRepo = ""  # mandatory
-   utterancesTheme = "" # optional
-   utterancesIssue = "" # optional
-   utterancesLabel = "" # optional
+author = "Dmitry Kolosov"
+description = "Anubis is a simple minimalist theme for Hugo blog engine."
+dateFormat = "2006-01-02"
+paginationSinglePost = true
+style = "light-without-switcher"
+readMore = false
+
+# utteranc.es support
+utterancesRepo = ""  # mandatory
+utterancesTheme = "" # optional
+utterancesIssue = "" # optional
+utterancesLabel = "" # optional
+
+  [[params.social]]
+  id = "github"
+  name = "gohugoio"
+
+  [[params.social]]
+  id = "telegram1"
+  url = "https://ya.ru"
 
 [menu]
 
-  [[menu.main]]
-    identifier = "about"
-    name = "About"
-    url = "/about/"
-    weight = 1
-
-  [[menu.main]]
-    identifier = "tags"
-    name = "Tags"
-    url = "/tags/"
-    weight = 2
-
-  [[menu.main]]
-    name = "Archive"
-    identifier = "archive"
-    url = "/posts/"
-    weight = 3
+[[menu.main]]
+identifier = "about"
+name = "About"
+url = "/about/"
+weight = 1
+
+[[menu.main]]
+identifier = "tags"
+name = "Tags"
+url = "/tags/"
+weight = 2
+
+[[menu.main]]
+name = "Archive"
+identifier = "archive"
+url = "/posts/"
+weight = 3
 
 [taxonomies]
 category = "categories"

diff --git a/exampleSite/static/fa-icons/docs.svg b/exampleSite/static/fa-icons/docs.svg