Skip to content

Added social share options and open graph tags #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Added social share options and open graph tags #50

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b0b096a
Change default admin credentails
yemisi-o Nov 9, 2019
3337c94
Revert "Change default admin credentails"
yemisi-o Nov 9, 2019
3ae25aa
Merge branch 'develop' into local develop
yemisi-o Nov 18, 2019
29af2ee
Add Social Share to Post Page and Open Graph Tags
yemisi-o Dec 1, 2019
1afa99f
Merge branch 'develop' of https://github.com/she-code-africa/SCA-Webs…
yemisi-o Dec 1, 2019
f669263
Fixed merge conflicts
yemisi-o Dec 1, 2019
f2a0e5f
Merge 'develop' into branch
yemisi-o Jan 3, 2020
daed41b
Updated icon styling based on feedback
yemisi-o Jan 3, 2020
be1194e
Fixed social share broken links
yemisi-o Jan 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 69 additions & 7 deletions public/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -958,7 +958,7 @@ ul.nav li.dropdown:hover>ul.dropdown-menu {
}

.share button {
<<<<<<< HEAD margin-top: 21px;
margin-top: 21px;
width: 90px;
height: 37px;
}
Expand All @@ -968,12 +968,6 @@ ul.nav li.dropdown:hover>ul.dropdown-menu {
font-size: 7px;
}


}
=======margin-top: 25px;
box-shadow: 0px 0px 7px #FF4EAE;

}
@media only screen and (min-width:1440px) {
.blog-welcome {
margin: 11% 37% 30px 37%;
Expand Down Expand Up @@ -1157,6 +1151,74 @@ 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;
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;
}

/* Brand Colors */
.fa-facebook-f {
background: #3B5998;
}

.fa-twitter {
background: #55ACEE;
}

.fa-linkedin {
background: #007bb5;
}

/*job page*/
#job-content {
margin: 50px 0;
Expand Down
4 changes: 3 additions & 1 deletion templates/views/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
202 changes: 202 additions & 0 deletions templates/views/layouts/blog-default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
66 changes: 43 additions & 23 deletions templates/views/layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,49 @@

<!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 and data.post.meta.description %}
<meta name="description" content="{{ data.post.meta.description }}"> {% else %}
<meta name="description" content="She Code Africa"> {% endif %}

<title>{{ data.post.title | default("SHECODE AFRICA") }}</title>

<!-- 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]>
<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">
<meta name="description"
content="Celeberating and empowering young girls and women in technology (Code Queens) across Africa">
<meta property="og:type" content="website">
<meta property="og:title" content="She Code Africa - Celebrating Africa's Code Queens">
<meta property="og:description"
content="Celeberating and empowering young girls and women in technology (Code Queens) across Africa">
<meta property="og:url" content="https://shecodeafrica.com">
<meta property="og:image" content="https://">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description"
content="Celeberating and empowering young girls and women in technology (Code Queens) 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">

<title> SHE CODE AFRICA</title>

<!-- 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]-->
Expand Down
Loading