fixed svg display using shortcode and partial.

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 3948ad1..19cf9a2 100644 (file)
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -54,6 +54,9 @@ html {
                                        ul.social-links {
                                                margin: 0;
                                                padding: 0;
+                                               li {
+                                                       display: inline-block;
+                                               }
                                        }
                                }
                        }
@@ -63,14 +66,11 @@ html {
                                padding: 1em 3em;
                                div#secondary {
                                        div#home-social-links {
-                                               margin: 1em auto;
                                                ul.social-links-list {
                                                        list-style: none;
                                                        li {
                                                                display: inline-block;
                                                                float: none;
-                                                               font-size: 4em;
-                                                               width: 2em;
                                                                text-align: center;
                                                                a {
                                                                        color: $dark-orange;
@@ -86,6 +86,9 @@ html {
                }
        }
 }
+ul {
+       list-style: none;
+}
 .screen-reader-text,
 .hidden {
        @include hide-visually;
@@ -111,18 +114,16 @@ div#backtotop {
                border: none;
                cursor: pointer;
                display: block;
-               width: 2em;
-               height: 2em;
+               width: 3em;
+               height: 3em;
                color: $dark-grey;
-               & i {
-                       color: inherit;
-               }
        }
 }
 .inline-svg {
        display: inline-block;
-       height: 1.15rem;
-       width: 1.15rem;
-       top: 0.15rem;
+       height: 3em;
+       width: 3em;
+       margin-right: 1em;
+       top: 0.15em;
        position: relative;
 }

diff --git a/data/socials.json b/data/socials.json
index 576bcba..3481b09 100644 (file)
--- a/data/socials.json
+++ b/data/socials.json
@@ -6,8 +6,8 @@
                        "user": "danixland"
                },
                {
-                       "name": "reddit",
-                       "url": "https://reddit.com/u",
+                       "name": "github",
+                       "url": "https://github.com",
                        "user": "danixland"
                },
                {
@@ -16,8 +16,8 @@
                        "user": "danixland"
                },
                {
-                       "name": "facebook",
-                       "url": "https://www.facebook.com",
+                       "name": "spotify",
+                       "url": "https://www.spotify.com",
                        "user": "danixland"
                }
        ]

diff --git a/layouts/partials/footer-addition.html b/layouts/partials/footer-addition.html
index 08ee91b..5f8396c 100644 (file)
--- a/layouts/partials/footer-addition.html
+++ b/layouts/partials/footer-addition.html
@@ -1,4 +1,5 @@
 <!-- here will appear eventual js code and other additions to the footer -->
 <div id="backtotop">
-       <a href="#top"><i class="fa-brands fa-caret-up"></i><span class="screen-reader-text">back to top</span></a>
+       {{$name := "arrow-up"}}
+       <a href="#top">{{ partial "funcs/svg.html" (dict "context" . "username" $name) }}<span class="screen-reader-text">back to top</span></a>
 </div>

diff --git a/layouts/partials/funcs/social-menu.html b/layouts/partials/funcs/social-menu.html
index 15d2d4a..16b1a4e 100644 (file)
--- a/layouts/partials/funcs/social-menu.html
+++ b/layouts/partials/funcs/social-menu.html
@@ -1,17 +1,21 @@
 {{ with .Site.Social }}
 <div id="social-menu">
        <ul class="social-links">
-               <li class="social-link social-facebook">
-                       <a href="https://facebook.com/{{ .facebook }}" target="_blank">facebook</a>
+               <li class="social-link social-spotify">
+                       {{$spotify := "spotify"}}
+                       <a href="https://spotify.com/{{ .spotify }}" target="_blank">{{ partial "funcs/svg.html" (dict "context" . "username" $spotify) }}</a>
                </li>
                <li class="social-link social-twitter">
-                       <a href="https://twitter.com/{{ .twitter }}" target="_blank">twitter</a>
+                       {{$twitter := "twitter"}}
+                       <a href="https://twitter.com/{{ .twitter }}" target="_blank">{{ partial "funcs/svg.html" (dict "context" . "username" $twitter) }}</a>
                </li>
                <li class="social-link social-instagram">
-                       <a href="https://instagram.com/{{ .instagram }}" target="_blank">instagram</a>
+                       {{$instagram := "instagram"}}
+                       <a href="https://instagram.com/{{ .instagram }}" target="_blank">{{ partial "funcs/svg.html" (dict "context" . "username" $instagram) }}</a>
                </li>
                <li class="social-link social-github">
-                       <a href="https://github.com/{{ .github }}" target="_blank">github</a>
+                       {{$github := "github"}}
+                       <a href="https://github.com/{{ .github }}" target="_blank">{{ partial "funcs/svg.html" (dict "context" . "username" $github) }}</a>
                </li>
        </ul>
 </div>

diff --git a/layouts/partials/funcs/svg.html b/layouts/partials/funcs/svg.html
index 7421dbe..7afdd22 100644 (file)
--- a/layouts/partials/funcs/svg.html
+++ b/layouts/partials/funcs/svg.html
@@ -1,6 +1,5 @@
 <span class="inline-svg">
-{{- $fname:=print "SVGs/" . ".svg" -}}
-{{- $path:="<path" -}}
-{{- $fill:="<path fill=\"currentColor\"" -}}
-{{ replace (readFile $fname) $path $fill | safeHTML }}
+{{- $fname:=print "SVGs/" .username ".svg" -}}
+{{ $icon := resources.Get $fname }}
+{{ $icon.Content | safeHTML }}
 </span>

diff --git a/layouts/partials/home-social-links.html b/layouts/partials/home-social-links.html
index c118a29..b35d32c 100644 (file)
--- a/layouts/partials/home-social-links.html
+++ b/layouts/partials/home-social-links.html
@@ -3,9 +3,9 @@
        <ul class="social-links-list">
                {{ range site.Data.socials.sites | shuffle }}
                        <li>
-                               <a href="{{ .url }}/{{ .user }}">{{ partial "funcs/svg.html" ".name" }}</a>
+                               {{$name := .name}}
+                               <a href="{{ .url }}/{{ .user }}">{{ partial "funcs/svg.html" (dict "context" . "username" $name) }}</a>
                        </li>
                {{ end }}
-                       <li class="linux">{{ partial "funcs/svg.html" "linux" }}</li>
        </ul>
 </div>

diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html
index 1575bc3..cdde6cc 100644 (file)
--- a/layouts/shortcodes/svg.html
+++ b/layouts/shortcodes/svg.html
@@ -1,4 +1,5 @@
-<pre class="inline-vg">
-{{ $favicon := resources.Get "SVGs/linux.svg" }}
-{{ $favicon | absURL | readFile | safeHTML }}
-</pre>
+<span class="inline-svg">
+{{- $fname := print "SVGs/" ( .Get 0 ) ".svg" -}}
+{{ $icon := resources.Get $fname }}
+{{ $icon.Content | safeHTML }}
+</span>