diff options
author | Leonardo Faria <leonardofaria@gmail.com> | 2020-05-03 04:16:57 +0300 |
---|---|---|
committer | Leonardo Faria <leonardofaria@gmail.com> | 2020-05-03 04:16:57 +0300 |
commit | 79421f29b05a6859fe7aeb72a2917997a6f5b1f7 (patch) | |
tree | a3c919627b31364a90d25a26cb9dc5c703ba21a1 | |
parent | 1bdddd60d41f45acf16ead9e7c6884d212708961 (diff) |
Add author box in post
-rw-r--r-- | assets/css/site.css | 50 | ||||
-rw-r--r-- | exampleSite/config.toml | 2 | ||||
-rw-r--r-- | layouts/_default/single.html | 32 |
3 files changed, 76 insertions, 8 deletions
diff --git a/assets/css/site.css b/assets/css/site.css index a6668bd..25cd48f 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -2,6 +2,10 @@ background-image: linear-gradient(to top, rgba(217, 219, 224, 0.7) 0, rgb(249, 250, 251) 500px); } +.bg-twitter { + background-color: #4fafed; +} + .header { position: relative; min-height: 400px; @@ -261,13 +265,49 @@ @apply text-2xl; } -.comments { - @apply my-4; - @apply py-4; +.author { + @apply my-5; + @apply pt-10; + @apply pb-5; @apply border-t; @apply border-gray-400; + @apply flex; + @apply items-center; +} + +.author .author__avatar { + @apply border; + @apply border-gray-400; + @apply p-1; + @apply w-10; + @apply h-10; + @apply rounded-full; + @apply mr-3; +} + +.author .author__bio { + @apply flex-grow; } -.comments h2 { - @apply mt-0; +.author .author__share { + @apply text-white; + @apply text-xs; + @apply font-bold; + @apply rounded-md; + @apply no-underline; + @apply flex; + @apply items-center; + @apply px-3; + @apply py-2; +} + +.author .author__share:hover { + @apply text-white; +} + +.comments { + @apply my-5; + @apply py-5; + @apply border-t; + @apply border-gray-400; } diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 183b372..eb4a801 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -43,6 +43,8 @@ tag = "tags" # logo = "images/logo.png" # TODO: add support avatar = "images/avatar.jpg" + authorBio = "Bento is a doggo who likes to code. Follow him on <a href='#'>Twitter</a>" + [[menu.main]] name = "About" url = "/about" diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9b1638b..a6f7f6b 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -16,11 +16,37 @@ </header> {{ end }} - {{ .Content }} + <div class="py-5"> + {{ .Content }} + </div> + + {{if not .Params.hideAuthorBio }} + <section class="author"> + {{if or (eq (substr .Site.Params.avatar 0 7) "http://") (eq (substr .Site.Params.avatar 0 8) "https://")}} + <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar}}"> + {{ else }} + <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar | relURL}}"> + {{ end }} + + <span class="author__bio">{{ .Site.Params.authorBio | safeHTML }}</span> + + {{ $title := .Title }} + {{ $url := printf "%s" .URL | absLangURL }} + {{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }} + <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Params.twitter }}{{ . }}{{ end }}" class="author__share bg-twitter hover:color-white hover:opacity-75"> + <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> + <title>Twitter</title> + <path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path> + </svg> + + Tweet + </a> + </section> + {{ end }} {{if not .Params.hideComments }} - <section class="comments"> - <h2 class="comments__title">Comments</h2> + <section class="comments "> + <h2>Comments</h2> {{ template "_internal/disqus.html" . }} </section> {{ end }} |