Add social icons next to the author's name (#137)
diff --git a/landing-pages/site/assets/icons/github-small.svg b/landing-pages/site/assets/icons/github-small.svg
new file mode 100644
index 0000000..595bf3d
--- /dev/null
+++ b/landing-pages/site/assets/icons/github-small.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.737" height="21.2" viewBox="0 0 21.737 21.2">
+ <path id="Path_1378" d="M33.971 1181.31a10.87 10.87 0 0 0-3.435 21.182c.543.1.742-.236.742-.524 0-.258-.009-.941-.015-1.848-3.023.657-3.661-1.457-3.661-1.457a2.876 2.876 0 0 0-1.207-1.59c-.987-.674.075-.661.075-.661a2.283 2.283 0 0 1 1.665 1.12 2.314 2.314 0 0 0 3.163.9 2.322 2.322 0 0 1 .69-1.453c-2.413-.274-4.951-1.207-4.951-5.371a4.2 4.2 0 0 1 1.119-2.917 3.908 3.908 0 0 1 .107-2.876s.913-.292 2.989 1.114a10.3 10.3 0 0 1 5.442 0c2.075-1.406 2.986-1.114 2.986-1.114a3.9 3.9 0 0 1 .108 2.876 4.2 4.2 0 0 1 1.117 2.917c0 4.175-2.541 5.094-4.962 5.363a2.6 2.6 0 0 1 .738 2.013c0 1.453-.013 2.625-.013 2.982 0 .291.2.629.747.523a10.87 10.87 0 0 0-3.443-21.18z" fill="#51504f" fill-rule="evenodd" data-name="Path 1378" transform="translate(-23.103 -1181.31)"/>
+</svg>
diff --git a/landing-pages/site/assets/icons/linkedin-small.svg b/landing-pages/site/assets/icons/linkedin-small.svg
new file mode 100644
index 0000000..711824a
--- /dev/null
+++ b/landing-pages/site/assets/icons/linkedin-small.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 21">
+ <g id="Group_1745" data-name="Group 1745" transform="translate(.155 -.055)">
+ <ellipse id="Ellipse_20" cx="10" cy="10.5" fill="#51504f" data-name="Ellipse 20" rx="10" ry="10.5" transform="translate(-.155 .055)"/>
+ <g id="Group_698" data-name="Group 698" transform="translate(5.843 5.004)">
+ <path id="Path_644" d="M-1311.072 1423.962a.9.9 0 0 1-.972.9.888.888 0 0 1-.937-.9.9.9 0 0 1 .961-.9.892.892 0 0 1 .948.9zm-1.862 7.413v-5.8h1.8v5.8z" fill="#fff" data-name="Path 644" transform="translate(1312.981 -1423.061)"/>
+ <path id="Path_645" d="M-1284.253 1448.767c0-.723-.024-1.328-.047-1.85h1.565l.083.806h.035a2.084 2.084 0 0 1 1.791-.937c1.186 0 2.076.795 2.076 2.5v3.428h-1.8v-3.214c0-.747-.261-1.257-.914-1.257a.989.989 0 0 0-.925.676 1.29 1.29 0 0 0-.06.451v3.345h-1.8z" fill="#fff" data-name="Path 645" transform="translate(1287.182 -1444.402)"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/twitter-small.svg b/landing-pages/site/assets/icons/twitter-small.svg
new file mode 100644
index 0000000..22754b3
--- /dev/null
+++ b/landing-pages/site/assets/icons/twitter-small.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21">
+ <g id="Group_1746" data-name="Group 1746" transform="translate(.076 -.055)">
+ <ellipse id="Ellipse_19" cx="11" cy="10.5" fill="#51504f" data-name="Ellipse 19" rx="11" ry="10.5"
+ transform="translate(-.076 .055)"/>
+ <g id="Logo_FIXED" data-name="Logo — FIXED" transform="translate(5.568 5.872)">
+ <path id="Path_643"
+ d="M-1554.714 1446.466a6.538 6.538 0 0 0 6.581-6.581v-.3a4.711 4.711 0 0 0 1.155-1.2 4.7 4.7 0 0 1-1.331.365 2.328 2.328 0 0 0 1.019-1.281 4.6 4.6 0 0 1-1.47.559 2.309 2.309 0 0 0-1.687-.73 2.316 2.316 0 0 0-2.314 2.314 2.555 2.555 0 0 0 .059.528 6.569 6.569 0 0 1-4.767-2.418 2.311 2.311 0 0 0-.311 1.164 2.319 2.319 0 0 0 1.028 1.926 2.34 2.34 0 0 1-1.047-.289v.031a2.318 2.318 0 0 0 1.854 2.269 2.257 2.257 0 0 1-.609.081 2.281 2.281 0 0 1-.433-.041 2.313 2.313 0 0 0 2.161 1.606 4.639 4.639 0 0 1-2.873.992 4.445 4.445 0 0 1-.55-.031 6.578 6.578 0 0 0 3.541 1.033"
+ fill="#fff" data-name="Path 643" transform="translate(1558.255 -1437.301)"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/scss/_blog-page.scss b/landing-pages/site/assets/scss/_blog-page.scss
index b1aaaac..92dd7cf 100644
--- a/landing-pages/site/assets/scss/_blog-page.scss
+++ b/landing-pages/site/assets/scss/_blog-page.scss
@@ -86,6 +86,11 @@
@extend .bodytext__medium--cerulean-blue;
font-weight: 500;
margin-bottom: 30px;
+ margin-right: 17px;
+ }
+
+ &--social-media-icon {
+ margin-right: 7px;
}
&--description {
@@ -108,6 +113,7 @@
flex-direction: column;
margin-bottom: 19px;
}
+
&--title {
font-family: $primary-font !important;
font-size: 24px !important;
@@ -115,9 +121,11 @@
max-width: 272px;
margin-bottom: 13px;
}
+
&--author {
margin-bottom: 20px;
}
+
&--description {
font-family: $primary-font !important;
font-weight: normal !important;
@@ -128,6 +136,7 @@
}
}
}
+
.blog-pager {
margin-top: 60px;
display: flex;
diff --git a/landing-pages/site/content/en/blog/Grumpy-cat.md b/landing-pages/site/content/en/blog/Grumpy-cat.md
index 233741a..4a4d57d 100644
--- a/landing-pages/site/content/en/blog/Grumpy-cat.md
+++ b/landing-pages/site/content/en/blog/Grumpy-cat.md
@@ -2,6 +2,9 @@
title: "Grumpy cat"
linkTitle: "Grumpy cat"
author: "Jarek Potiuk"
+twitter: "higrys"
+github: "potiuk"
+linkedin: "jarekpotiuk"
description: "Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day."
tags: ["Community"]
date: 2019-09-24
diff --git a/landing-pages/site/layouts/blog/content.html b/landing-pages/site/layouts/blog/content.html
index d587707..344811e 100644
--- a/landing-pages/site/layouts/blog/content.html
+++ b/landing-pages/site/layouts/blog/content.html
@@ -29,7 +29,26 @@
<span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
</div>
<p class="blogpost-content__metadata--title">{{ .Title }}</p>
- <p class="blogpost-content__metadata--author">{{ .Params.author }}</p>
+ <div class="blogpost-content__metadata--author">
+ <span class="blogpost-content__metadata--author">
+ {{ .Params.author }}
+ </span>
+ {{ with .Params.twitter }}
+ <a href="https://twitter.com/{{ . }}/" class="blogpost-content__metadata--social-media-icon">
+ {{ with resources.Get "icons/twitter-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </a>
+ {{ end }}
+ {{ with .Params.github }}
+ <a href="https://github.com/{{ . }}/" class="blogpost-content__metadata--social-media-icon">
+ {{ with resources.Get "icons/github-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </a>
+ {{ end }}
+ {{ with .Params.linkedin }}
+ <a href="https://linkedin.com/in/{{ . }}/" class="blogpost-content__metadata--social-media-icon">
+ {{ with resources.Get "icons/linkedin-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </a>
+ {{ end }}
+ </div>
<p class="blogpost-content__metadata--description">{{ .Params.description }}</p>
</div>
<div class="markdown-content">
