Add inital socials

Author: Stuart Reilly

README.md

@@ -53,9 +53,18 @@ root named after your Scott Logic username. Within this you will need a set of f
 be obvious what needs changing. Then add yourself to `_data/authors.yml`, again using an existing author as a template.
 You will need to add
 
-- an entry under `authors`
+- an entry under `authors` with the following fields where _italic_ fields are required
+  - _name_
+  - _picture_
+  - author-summary
+  - twitter-url
+  - twitter-handle
+  - linkedin-url
+  - linkedin-handle
 - your username under `active-authors`
 
+If both _social_-url and _social_-handle are provided, _social_-url is used.
+
 Finally, if you performed a _sparse checkout_ as recommended, you will need to add directory `_posts` in the root of
 your local copy.
 
@@ -160,7 +169,7 @@ npm run scripts
 npm run style
 ```
 
-##### Useful Command Line Flags
+##### Useful Command Line Flags for Jekyll
 * `--livereload` - trigger a build on file change (excluding SCSS or JS) and refresh the brower once built
 * `--incremental` - use the experimental incremental build mode which after the initial build, only builds changed files
 

_includes/featured_post.html

@@ -15,7 +15,7 @@ <h3 class="cell">
     </div>
 </div>
 <div class="shape cell large-3 medium-2 small-1 grid-y align-center">
-    <!-- Allow shape to be overridden during include -->
+    {% comment %} Allow shape to be overridden during include {% endcomment %}
     {% if shape == nil %}
         {% capture shape %}{% include post_shape.html post=post %}{% endcapture %}
         {% assign shape = shape | strip %}

_includes/social.html

@@ -1,7 +1,29 @@
 {% capture url %}{{ site.canonical.url }}{{ page.url }}{% endcapture %}
-<div class="social">
-  <applause-button color="{% include post_colour_hex.html post=page %}"
-    url="{{ site.canonical.url }}{{ page.url }}"
-    api="{{ site.applause-button-api.url }}"
-    multiclap="true"/>
+<div class="social-wrapper">
+    <div class="social">
+        <applause-button color="{% include post_colour_hex.html post=page %}"
+                         url="{{ site.canonical.url }}{{ page.url }}"
+                         api="{{ site.applause-button-api.url }}"
+                         multiclap="true"></applause-button>
+        <hr/>
+        <div class="social-list">
+            {% if author.linkedin-url != nil %}
+                {% assign linkedin_url = author.linkedin-url %}
+            {% elsif author.linkedin-handle != nil %}
+                {% assign linkedin_url = "https://linkedin.com/in/ | append: author.linkedin-handle %}
+            {% endif %}
+            {% if linkedin_url != nil %}
+                <a href="{{linkedin_url}}">LINK</a>
+            {% endif %}
+
+            {% if author.twitter-url != nil %}
+                {% assign twitter_url = author.twitter-url %}
+            {% elsif author.twitter-handle != nil %}
+                {% assign twitter_url = "https://twitter.com/" | append: author.twitter-handle %}
+            {% endif %}
+            {% if twitter_url != nil %}
+                <a href="{{twitter_url}}">TWIT</a>
+            {% endif %}
+        </div>
+    </div>
 </div>

_layouts/default_post.html

@@ -5,7 +5,7 @@
 {% assign author = site.data.authors.authors[page.author] %}
 {% assign authorUsername = page.author %}
 <div class="default-post {% include post_colour.html post=page %} grid-container">
-  <div class="hero grid-x">
+  <div class="hero grid-x large-offset-1">
     <div class="content cell large-7 medium-9 small-11 grid-y grid-padding-y">
       <div class="cell large-offset-2 medium-offset-1 small-offset-1">
         {% include category_display.html post = page %}

scss/_applause-button.scss

@@ -0,0 +1,44 @@
+.social {
+  display: block;
+  position: sticky;
+  top: 6rem;
+  width: 4rem;
+  z-index: 100; /* always on top */
+
+  hr {
+    width: 95%;
+  }
+
+  .social-list {
+    text-align: center;
+    a {
+      line-height: 3rem;
+    }
+  }
+
+  applause-button {
+    .clap-count {
+      border-radius: 50%;
+      padding-inline: 0.5rem;
+      background-color: white;
+      font-size: 1.25rem;
+    }
+
+    &.clap .clap-count {
+      animation-name: hideThenShow !important;
+    }
+
+    .style-root {
+      gap: 0.25rem;
+      flex-direction: column-reverse;
+    }
+
+    button.shockwave {
+      background-color: white;
+
+      svg {
+        overflow: visible;
+      }
+    }
+  }
+}

scss/_social.scss

@@ -25,6 +25,6 @@
 @use "code";
 @use "video-post";
 @use "read-more";
-@use "applause-button";
+@use "social";
 @use "cookie-consent";
 @use "table";