diff --git a/keystone.js b/keystone.js index 061a9b7..8354c93 100644 --- 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 index be3933e..e664c26 100644 --- 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 index cfabaf8..3a504af 100644 --- 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 index 7cf4802..c61ca02 100644 --- 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 index 46165fe..38e8d71 100644 --- 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) %}
{% if post.image.exists %} diff --git a/templates/views/layouts/blog-default.html b/templates/views/layouts/blog-default.html new file mode 100644 index 0000000..cc95aa1 --- /dev/null +++ b/templates/views/layouts/blog-default.html @@ -0,0 +1,202 @@ +{% import "mixins/flash-messages.html" as FM %} + + + + + + + + {% if data.post %} + {% if data.post.meta.description %} + + + + {% else %} + + + + {% endif %} + {{ data.post.title }} + + + + + + + + + + + + {% for category in data.post.categories %} + + {% endfor %} + {% else %} + She Code Africa - Blog + + + + + + + + + + + + {% endif %} + + + {# Customise the stylesheet for your site by editing /public/styles/site.sass #} + + + + + + + + + + + + {# This file provides the default styling for the KeystoneJS Content Editor #} + {% if user and user.canAccessKeystone %} + + {% endif %} + + {# HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries + Safely remove this block if you are not targeting IE8 #} + + + + + {# 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 %} + + + + {# HEADER #} +
+ +
+ + {# 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 %} +
+ + {# 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. #} + + + {# Customise which Bootstrap javascript files are served by including + them specifically here, instead of bootstrap-3.3.5.min.js #} + + + {# 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 %} + + {% endif %} + + {# Add scripts that are globally required by your site here. #} + + + {# Include template-specific javascript files by extending the js block #} + {% block js %}{% endblock %} + + diff --git a/templates/views/layouts/default.html b/templates/views/layouts/default.html index 17f6d18..42d3c73 100644 --- a/templates/views/layouts/default.html +++ b/templates/views/layouts/default.html @@ -2,29 +2,49 @@ - - - - - {% if data.post and data.post.meta.description %} - {% else %} - {% endif %} - - {{ data.post.title | default("SHECODE AFRICA") }} - - - {# Customise the stylesheet for your site by editing /public/styles/site.sass #} - - - - - - - - - {# This file provides the default styling for the KeystoneJS Content Editor #} {% if user and user.canAccessKeystone %} - {% endif %} {# HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries Safely remove this block if you are not targeting IE8 #} - + {# Customise the stylesheet for your site by editing /public/styles/site.sass #} + + + + + + + + + + + + {# This file provides the default styling for the KeystoneJS Content Editor #} + {% if user and user.canAccessKeystone %} + + {% endif %} + + {# HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries + Safely remove this block if you are not targeting IE8 #} + diff --git a/templates/views/post.html b/templates/views/post.html index a2a7371..d4e11b9 100644 --- a/templates/views/post.html +++ b/templates/views/post.html @@ -1,9 +1,25 @@ -{% extends "layouts/default.html" %} +{% extends "layouts/blog-default.html" %} {% block content %}
-
+ +
+
{% endblock %}