diff options
author | Jimmy Cai <github@jimmycai.com> | 2021-10-23 12:58:55 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-23 12:58:55 +0300 |
commit | 661e59b85d6761905da906018a26120a0b45ef5e (patch) | |
tree | 6775f178cbf79c5d01a846ac8c707eff297fbf7b | |
parent | 7c59ac77137a9bbf2d9b4430aeca7006fb044da0 (diff) |
feat: social menu (#401)
-rw-r--r-- | assets/icons/brand-github.svg | 6 | ||||
-rw-r--r-- | assets/icons/brand-twitter.svg | 6 | ||||
-rw-r--r-- | assets/scss/partials/menu.scss | 15 | ||||
-rw-r--r-- | exampleSite/config.yaml | 13 | ||||
-rw-r--r-- | layouts/partials/sidebar/left.html | 20 |
5 files changed, 60 insertions, 0 deletions
diff --git a/assets/icons/brand-github.svg b/assets/icons/brand-github.svg new file mode 100644 index 0000000..1fe7e0b --- /dev/null +++ b/assets/icons/brand-github.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"/> + <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> +</svg> + + diff --git a/assets/icons/brand-twitter.svg b/assets/icons/brand-twitter.svg new file mode 100644 index 0000000..17ab1b1 --- /dev/null +++ b/assets/icons/brand-twitter.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"/> + <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /> +</svg> + + diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 2c7ad74..1d612d1 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -201,3 +201,18 @@ } } } + +.social-menu { + list-style: none; + padding: 0%; + display: flex; + flex-direction: row; + gap: 10px; + + svg { + width: 24px; + height: 24px; + stroke: var(--body-text-color); + stroke-width: 1.33; + } +} diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index d5cf58d..db3a8a9 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -178,6 +178,19 @@ menu: ### For demonstration purpose, the home link will be open in a new tab newTab: true icon: home + + social: + - identifier: github + name: GitHub + url: https://github.com/CaiJimmy/hugo-theme-stack + params: + icon: brand-github + + - identifier: twitter + name: Twitter + url: https://twitter.com + params: + icon: brand-twitter related: includeNewer: true diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html index 9d4dd3e..108c029 100644 --- a/layouts/partials/sidebar/left.html +++ b/layouts/partials/sidebar/left.html @@ -29,8 +29,28 @@ </figure> {{ end }} {{ end }} + <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1> <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2> + + {{- with .Site.Menus.social -}} + <ol class="social-menu"> + {{ range . }} + <li> + <a + href='{{ .URL | relLangURL }}' + {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }} + {{ with .Name }}title="{{ . }}"{{ end }} + > + {{ $icon := default "link" .Params.Icon }} + {{ with $icon }} + {{ partial "helper/icon" . }} + {{ end }} + </a> + </li> + {{ end }} + </ol> + {{- end -}} </header> <ol class="menu" id="main-menu"> |