she-code-africa · yemisi-o · Nov 9, 2019 · Nov 9, 2019 · Nov 18, 2019 · Dec 1, 2019
diff --git a/keystone.js b/keystone.js
@@ -58,6 +58,8 @@ keystone.set('nav', {
     teams: ['teams', 'team-categories']
 });
 
+keystone.set('baseUrl', 'https://shecodeafrica.org/');
+
 // Start Keystone to connect to your database and initialise the web server
 
 

diff --git a/models/Post.js b/models/Post.js
@@ -33,5 +33,9 @@ Post.schema.virtual('content.full').get(function () {
 	return this.content.extended || this.content.brief;
 });
 
+Post.schema.virtual('fullPostUrl').get(function () {
+	return keystone.get('baseUrl') + 'blog/post/' + this.slug;
+});
+
 Post.defaultColumns = 'title, state|20%, author|20%, publishedDate|20%, pageView|20%';
 Post.register();
diff --git a/public/styles/main.css b/public/styles/main.css
@@ -1060,7 +1060,7 @@ div.__shecodecard > div > div > div > p.__shecodevmvp1 {
 }
 
 .share button {
-  margin-top: 21px;
+    margin-top: 21px;
     width: 90px;
     height: 37px;
 }
@@ -1259,6 +1259,80 @@ box-shadow: 0px 0px 7px #FF4EAE;
     }
 }
 
+/* Social Share Buttons */
+@media (min-width:769px) {
+  .social-share-mobile {
+    display: none;
+  }
+}
+
+.social-share-mobile ul {
+  padding-left: 0;
+}
+
+.social-share-mobile ul li {
+  list-style: none;
+  display: inline-flex;
+  padding: 5px;
+}
+
+.social-share-desktop {
+  display: none;
+}
+
+@media (min-width:1024px) {
+  .social-share-desktop {
+    position: sticky;
+    position: -webkit-sticky;
+    bottom: 5rem;
+    top: 15rem;
+    display: block;
+  }
+
+  .social-share-desktop ul li {
+    display: block;
+  }
+}
+
+/* Social Button Styles */
+.social-share-icon {
+  border-radius: 50%;
+  padding: 12px;
+  font-size: 22px !important;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  text-decoration: none;
+  margin: 5px;
+  color: white;
+}
+
+/* Hover Effect */
+.social-share-icon:hover {
+  opacity: 0.8;
+  text-align: center;
+  text-decoration: none;
+  color: white;
+}
+.social-share-icon:visited {
+	color: white;
+}
+.fa {
+	padding-top: 15px;
+}
+/* Brand Colors */
+.fa-facebook-f {
+  background: #3B5998;
+}
+
+.fa-twitter {
+  background: #55ACEE;
+}
+
+.fa-linkedin {
+  background: #007bb5;
+}
+
 /*job page*/
 #job-content {
     margin: 50px 0;

diff --git a/routes/middleware.js b/routes/middleware.js
@@ -29,6 +29,8 @@ exports.initLocals = function(req, res, next) {
         // { label: 'Contact', key: 'contact', href: '/contact' },
     ];
 
+    // Initialise base url for full blog post links
+	res.locals.baseUrl = req.baseUrl;
 
     res.locals.user = req.user;
     next();

diff --git a/templates/views/blog.html b/templates/views/blog.html
@@ -1,4 +1,6 @@
-{% extends "layouts/default.html" %} {% macro blogPost(post) %}
+{% extends "layouts/blog-default.html" %} 
+
+{% macro blogPost(post) %}
 <div class="col-sm-6 blog-post" data-ks-editable="editable(user, { list: " Post ", id: post.id })">
     <div class="post-circle">
         {% if post.image.exists %}

diff --git a/templates/views/layouts/blog-default.html b/templates/views/layouts/blog-default.html
@@ -0,0 +1,202 @@
+{% import "mixins/flash-messages.html" as FM %}
+
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+        {% if data.post %}
+            {% if data.post.meta.description %}
+                <meta name="description" content="{{ data.post.meta.description }}">
+                <meta property="og:description" content="{{ data.post.meta.description }}">
+                <meta name="twitter:description" content="{{ data.post.meta.description }}">
+            {% else %}
+                <meta name="description" content="{{ data.post.content.brief }}">
+                <meta property="og:description" content="{{ data.post.content.brief }}">
+                <meta name="twitter:description" content="{{ data.post.content.brief }}">
+            {% endif %}
+            <title>{{ data.post.title }}</title>
+            <meta property="og:title" content="{{ data.post.title }}">
+			<meta property="og:type" content="article">
+			<meta property="og:image" content="{{ data.post.image.url }}">
+			<meta property="og:site_name" content="She Code Africa">
+			<meta name="twitter:title" content="{{ data.post.title }}">
+			<meta name="twitter:card" content="summary_large_image">
+			<meta name="twitter:image" content="{{ data.post.image.url }}">
+			<meta property="og:url" content="{{ data.post.fullPostUrl }}">
+			<meta name="twitter:url" content="{{ data.post.fullPostUrl }}">
+			<meta name="twitter:site" content="@shecodeafrica">
+			<meta property="article:published_time" content="{{ data.post.publishedDate }}">
+			{% for category in data.post.categories %}
+				<meta property="article:tag" content="{{ category.name }}">
+			{% endfor %}
+		{% else %}
+			<title>She Code Africa - Blog</title>
+			<meta name="description"
+				content="A blog by She Code Africa for celeberating and empowering women in technology across Africa">
+			<meta name="keywords" content="She Code Africa, Women in Tech, Tech Community, African Women, Developers">
+			<meta property="og:title" content="She Code Africa - Blog">
+			<meta property="og:image" content="https://">
+			<meta name="twitter:image:src" content="https://">
+			<meta name="twitter:card" content="summary_large_image">
+			<meta name="twitter:description"
+				content="A blog by She Code Africa for celeberating and empowering women in technology across Africa">
+			<meta name="twitter:title" content="She Code Africa - Celebrating Africa's Code Queens">
+			<meta name="twitter:site" content="@shecodeafrica">
+			<meta name="twitter:image" content="https://">
+			<meta name="twitter:creator" content="@shecodeafrica">
+        {% endif %}
+
+		<!-- STYLESHEETS -->
+		{# Customise the stylesheet for your site by editing /public/styles/site.sass #}
+		<link href="/styles/site.css" rel="stylesheet">
+		<!-- CUSTOM STYLES -->
+		<link rel="stylesheet" type="text/css" href="/styles/main.css">
+		<link rel="stylesheet" type="text/css" href="/styles/index.css">
+		<!-- WEBFONT -->
+		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
+
+		<!-- ICON -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+		{# This file provides the default styling for the KeystoneJS Content Editor #}
+		{% if user and user.canAccessKeystone %}
+			<link href="/keystone/styles/content/editor.min.css" rel="stylesheet">
+		{% endif %}
+
+		{# HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries
+		  Safely remove this block if you are not targeting IE8 #}
+		<!--[if lt IE 9]>
+			<script src="//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.js"></script>
+			<script src="//cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
+		<![endif]-->
+
+		<style type="text/css">
+
+
+		</style>
+
+		{# Include template-specific stylesheets by extending the css block #}
+		{% block css %}{% endblock %}
+
+		{# Add any other template-specific HEAD tags by extending the head block #}
+		{% block head %}{% endblock %}
+	</head>
+	<body>
+
+		{# HEADER #}
+		<header>
+			<nav class="navbar __shecodenavbar" role="navigation">
+				<div class="container">
+					<!-- TOGGLE -->
+					<div class="navbar-header">
+						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+							<span class="sr-only">Toggle navigation</span>
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+						</button>
+						<a class="navbar-brand" href="/"><img src="/images/shecodelogo.svg" class="__shecodelogo"></a>
+					</div>
+					<!-- TOGGLING LINKS -->
+					<div class="collapse navbar-collapse navbar-ex1-collapse __shecodenavcol">
+						<ul class="nav navbar-nav navbar-right">
+							{% for link in navLinks %}
+								<li class="__shecodelink {{ 'active' if link.key == section else '' }}">
+									<a href="{{ link.href }}">{{ link.label }}</a>
+								</li>
+							{% endfor %}
+							{% if user %}
+								{% if user.canAccessKeystone %}
+									<li class="__shecodelink"><a href="/keystone">Open Keystone</a></li>
+								{% endif %}
+								<li class="__shecodelink"><a href="/keystone/signout">Sign Out</a></li>
+							{% else %}
+								<li class="__shecodelink"><a href="/keystone/signin">Sign In</a></li>
+							{% endif %}
+						</ul>
+					</div>
+				</div>
+			</nav>
+		</header>
+
+		{# BODY #}
+		<div id="body">
+			{# NOTE:
+			   There is no .container wrapping class around body blocks to allow more flexibility in design.
+			   Remember to include it in your templates when you override the intro and content blocks! #}
+
+			{# The Intro block appears above flash messages (used for temporary information display) #}
+			{% block intro %}{% endblock %}
+
+			{# Flash messages allow you to display once-off status messages to users, e.g. form
+			   validation errors, success messages, etc. #}
+			{{ FM.flashMessages(messages) }}
+
+			{# The content block should contain the body of your template"s content #}
+			{% block content %}{% endblock %}
+		</div>
+
+		{# FOOTER #}
+		<footer>
+			<div class="__footerbg">
+				<div class="container">
+					<div class="row">
+						<div class="col-lg-4 col-md-4 col-sm-4">
+							<p class="__footerp">Get Involved</p>
+							<p class="__footera"><a href="">Patnership</a></p>
+							<p class="__footera"><a href="">Sponsor/Donate</a></p>
+							<p class="__footera"><a href="">Host an Event</a></p>
+							<p class="__footera"><a href="">Start an S.C.A Chapter</a></p>
+						</div>
+						<div class="col-lg-4 col-md-4 col-sm-4">
+							<p class="__footerp">About Us</p>
+							<p class="__footera"><a href="">FAQ</a></p>
+							<p class="__footera"><a href="" >Meet The Team</a></p>
+							<p class="__footera"><a href="" >Join The Team</a></p>
+							<p class="__footera"><a href="" >Terms And Condition</a></p>
+						</div>
+						<div class="col-lg-4 col-md-4 col-sm-4">
+							<p class="__footerp">Membership</p>
+							<p class="__footera"><a href="">Sign Up</a></p>
+							<p class="__footera"><a href="">Sign In</a></p>
+							<p class="__footera"><a href="">Upcoming Events</a></p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="__footerdownbg">
+				<div class="container">
+					<p class="text-center"><a href="" target="_blank"> All right reserved. She code Africa. 2019</a></p>
+					<p class="text-center">Powered by <a href="http://keystonejs.com" target="_blank">KeystoneJS</a>.</p>
+				</div>
+			</div>
+		</footer>
+
+
+		{# JAVASCRIPT #}
+
+		{# jQuery 1.11.3 is included by default, and required by both Bootstrap
+			and the KeystoneJS Content Editor. If you are not targeting IE8,
+			you can upgrade to 2.1.4 (also bundled) for better performance. #}
+		<script src="/js/jquery/jquery-3.1.1.min.js"></script>
+
+		{# Customise which Bootstrap javascript files are served by including
+			them specifically here, instead of bootstrap-3.3.5.min.js #}
+		<script src="/js/bootstrap/bootstrap.min.js"></script>
+
+		{# The KeystoneJS Content Editor provides support for ks-editable data attributes,
+			which generate links to edit content for users who can access Keystone #}
+		{% if user and user.canAccessKeystone %}
+			<script src="/keystone/js/content/editor.js"></script>
+		{% endif %}
+
+		{# Add scripts that are globally required by your site here. #}
+		<script src="/js/jquery/main.js"></script>
+
+		{# Include template-specific javascript files by extending the js block #}
+		{% block js %}{% endblock %}
+	</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,8 @@ keystone.set('nav', { @@
         teams: ['teams', 'team-categories']
     });
+    keystone.set('baseUrl', 'https://shecodeafrica.org/');
     // Start Keystone to connect to your database and initialise the web server
@@ Expand Down @@