Add option to share blogpost to social media (#164)
diff --git a/landing-pages/site/assets/icons/facebook-small.svg b/landing-pages/site/assets/icons/facebook-small.svg
new file mode 100644
index 0000000..44fb202
--- /dev/null
+++ b/landing-pages/site/assets/icons/facebook-small.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.332" height="21.2" viewBox="0 0 21.332 21.2">
+ <g id="Group_1748" data-name="Group 1748" transform="translate(-1654.242 -1377.267)">
+ <path id="Path_1379" d="M1766.91 1472.142v-.022h-2.955v.022z" fill="none" data-name="Path 1379" transform="translate(-97.392 -84.198)"/>
+ <path id="Path_1380" d="M1712.911 1420.842v-2.351c0-2.669 1.582-4.152 4.02-4.152a15.28 15.28 0 0 1 2.362.218v-.009a15.3 15.3 0 0 0-2.373-.22c-2.439 0-4.02 1.483-4.02 4.152v2.351h-2.724v3.076h.011v-3.065z" fill="none" data-name="Path 1380" transform="translate(-49.651 -32.898)"/>
+ <path id="Path_1381" d="M1675.574 1387.933a10.666 10.666 0 1 0-12.325 10.534v-7.448h-2.713v-.011h-.011v-3.076h2.724v-2.351c0-2.669 1.582-4.152 4.02-4.152a15.307 15.307 0 0 1 2.373.22v.009h.011v2.615h-1.34a1.553 1.553 0 0 0-1.747 1.67v1.977h2.955v.022h.014l-.472 3.076h-2.483v7.433a10.635 10.635 0 0 0 8.994-10.518z" fill="#51504f" data-name="Path 1381"/>
+ <path id="Rectangle_882" d="M0 0h2.713v.011H0z" fill="#51504f" data-name="Rectangle 882" transform="translate(1660.536 1391.009)"/>
+ <path id="Path_1382" d="M1765.607 1418.958a1.553 1.553 0 0 0-1.747 1.67v2h.011v-1.977a1.553 1.553 0 0 1 1.747-1.67h1.34v-2.614h-.011v2.594z" fill="#51504f" data-name="Path 1382" transform="translate(-97.305 -34.705)"/>
+ <path id="Path_1383" d="M1766.365 1475.391l.472-3.076h-.014l-.469 3.054h-2.494v7.459h.022v-7.433z" fill="#51504f" data-name="Path 1383" transform="translate(-97.305 -84.371)"/>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/scss/_share-social-media.scss b/landing-pages/site/assets/scss/_share-social-media.scss
new file mode 100644
index 0000000..6152ddd
--- /dev/null
+++ b/landing-pages/site/assets/scss/_share-social-media.scss
@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.share-section {
+ &--icons-wrapper {
+ display: flex;
+ }
+
+ &--icon {
+ margin-right: 12px;
+ cursor: pointer;
+ }
+}
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index 30f9c4a..edb755d 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -50,3 +50,4 @@
@import "content-drawer";
@import "dropdown";
@import "highlights";
+@import "share-social-media";
diff --git a/landing-pages/site/layouts/blog/single.html b/landing-pages/site/layouts/blog/single.html
index 6210fb6..ad484ef 100644
--- a/landing-pages/site/layouts/blog/single.html
+++ b/landing-pages/site/layouts/blog/single.html
@@ -20,6 +20,7 @@
{{ define "main" }}
<div class="blogpost-content">
{{ .Render "content" }}
+ {{ partial "share-social-media.html" . }}
<div class="no-width-restriction no-desktop">
{{ partial "pager.html" . }}
</div>
diff --git a/landing-pages/site/layouts/partials/share-social-media.html b/landing-pages/site/layouts/partials/share-social-media.html
new file mode 100644
index 0000000..fe816a4
--- /dev/null
+++ b/landing-pages/site/layouts/partials/share-social-media.html
@@ -0,0 +1,36 @@
+{{/*
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+*/}}
+
+<div class="mt-5">
+ <p class="bodytext__medium--greyish-brown font-weight-500 mb-2">Share</p>
+ <div class="share-section--icons-wrapper">
+ <div class="share-section--icon"
+ onclick="window.open(`https://twitter.com/intent/tweet?url=${window.location.href}&original_referer=${window.location.origin}`,'targetWindow', `toolbar=no, location=no, status=no, menubar=no, directories=no, scrollbars=no, resizable=no, centerscreen=yes, chrome=yes, width=550, height=400, top=${window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - 200} left=${window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - 275}`); return false;">
+ {{ with resources.Get "icons/twitter-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </div>
+ <div class="share-section--icon"
+ onclick="window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`,'targetWindow', `toolbar=no, location=no, status=no, menubar=no, directories=no, scrollbars=no, resizable=no, centerscreen=yes, chrome=yes, width=750, height=600, top=${window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - 300} left=${window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - 375}`); return false;">
+ {{ with resources.Get "icons/linkedin-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </div>
+ <div class="share-section--icon"
+ onclick="window.open(`https://www.facebook.com/sharer/sharer.php?u=${window.location.href}`,'targetWindow', `toolbar=no, location=no, status=no, menubar=no, directories=no, scrollbars=no, resizable=no, centerscreen=yes, chrome=yes, width=550, height=400, top=${window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - 200} left=${window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - 275}`); return false;">
+ {{ with resources.Get "icons/facebook-small.svg" }}{{ .Content | safeHTML }}{{ end }}
+ </div>
+ </div>
+</div>
