Commit 5328cf1a authored by Sylvain Kerkour's avatar Sylvain Kerkour

new theme

parent cbdaff92
////////////////////////////////////////////////////////////////////////////////////////////////////
// vars
////////////////////////////////////////////////////////////////////////////////////////////////////
window.apiBaseUrl = 'https://shibui.bloom42.com/api';
// window.apiBaseUrl = 'http://localhost:8000/api';
window.shibuiProjectId = 'ONUWIORPF5ZWQ2LCOVUS6UDSN5VGKY3UF4YQ';
////////////////////////////////////////////////////////////////////////////////////////////////////
// Functions
////////////////////////////////////////////////////////////////////////////////////////////////////
function _redirect(domain){
var hostname = location.hostname;
var path = location.pathname.replace('/blog', '');;
if (hostname != domain && hostname != 'localhost' && hostname != '127.0.0.1') {
location.href = 'https://' + domain + path;
}
}
function rot13(s) {
return (s ? s : this).split('').map(function(_){
if (!_.match(/[A-Za-z]/)) return _;
c = Math.floor(_.charCodeAt(0) / 97);
k = (_.toLowerCase().charCodeAt(0) - 83) % 26 || 26;
return String.fromCharCode(k + ((c == 0) ? 64 : 96));
}).join('');
}
function displayError(message) {
$('#fe-alert').html('<div class="alert alert-danger" role="alert">'
+ message +
'</div>');
$('#fe-alert').show();
}
function displaySuccess(message) {
$('#fe-alert').html('<div class="alert alert-success" role="alert">'
+ message +
'</div>');
$('#fe-alert').show();
}
function hideAlert() {
$('#fe-alert').hide();
}
function hideLoader() {
$('.loader').hide();
}
function showLoader() {
$('.loader').show();
}
function graphqlReq(query, variables) {
var payload = {
query: query,
variables: variables,
};
var data = {
data : JSON.stringify(payload),
contentType : 'application/json',
type : 'POST',
};
return $.ajax(window.apiBaseUrl+'/graphql', data);
}
function subscribeToNewsletter(email) {
showLoader();
hideAlert();
var query = 'mutation($input: SubscribeContactInput!) { subscribeContact(input: $input) }';
var variables = {
input: {
projectId: window.shibuiProjectId,
email: email,
},
};
graphqlReq(query, variables)
.done(function(data) {
if (data.errors && data.errors.length > 0) {
displayError(data.errors[0].message);
return ;
}
window.location.href = '/confirm';
})
.fail(function() {
displayError('Error subscribing. Please try again.');
})
.always(function() {
hideLoader();
})
}
function unsubscribe() {
hideAlert();
var urlParams = new URLSearchParams(window.location.search);
var token = urlParams.get('token');
var contactId = urlParams.get('contact');
if (token == null || contactId == null) {
hideLoader();
displayError('Error unsuscribing. Please click again on the link provided in the email.');
return;
}
var query = 'mutation($input: UnsubscribeContactInput!) { unsubscribeContact(input: $input) }';
var variables = {
input: {
id: decodeURIComponent(contactId),
token: token,
},
};
graphqlReq(query, variables)
.done(function(data) {
if (data.errors && data.errors.length > 0) {
displayError(data.errors[0].message);
return ;
}
displaySuccess('You no longer will receive our emails. Have a good day!');
})
.fail(function() {
displayError('Error unsuscribing. Please click again on the link provided in the email.');
})
.always(function() {
hideLoader();
})
}
////////////////////////////////////////////////////////////////////////////////////////////////////
// now
////////////////////////////////////////////////////////////////////////////////////////////////////
_redirect('fatalentropy.com');
hideLoader();
////////////////////////////////////////////////////////////////////////////////////////////////////
// document ready
////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
// deofuscate emails
......@@ -13,4 +151,56 @@ $(document).ready(function() {
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank').attr('rel', 'noopener');
// subscribe
if ($("#fe-subscribe-button-input").length) {
$("#fe-subscribe-button-input").click(function(e) {
e.preventDefault();
subscribeToNewsletter($('#fe-subscribe-email-input').val());
});
}
if ($("#fe-thank-you").length) {
var urlParams = new URLSearchParams(window.location.search);
var token = urlParams.get('token');
var contactId = urlParams.get('contact');
if (token == null || contactId == null) {
hideLoader();
displayError('Error confirming your subscription. Please click again on the link provided in the email.');
return;
}
var query = 'mutation($input: VerifyContactInput!) { verifyContact(input: $input) }';
var variables = {
input: {
id: decodeURIComponent(contactId),
token: token,
},
};
graphqlReq(query, variables)
.done(function(data) {
if (data.errors && data.errors.length > 0) {
displayError(data.errors[0].message);
return ;
}
displaySuccess('You are now subscribed to <b>Open Source Weekly</b>');
})
.fail(function() {
displayError('Error confirming your subscription. Please click again on the link provided in the email.');
})
.always(function() {
hideLoader();
})
}
if ($("#osw-unsubscribe-btn").length) {
$("#osw-unsubscribe-btn").click(function(e) {
e.preventDefault();
unsubscribe();
});
}
});
......@@ -7,3 +7,5 @@ $font-family-code: monospace;
$font-size-base: 18px;
$font-size-small: 16px;
$font-color: #424242;
$links-color: #5522FA;
$border-radius: 5px;
@import "theme.scss";
nav {
.active {
text-decoration: underline;
}
.description {
a {
color: $links-color;
}
opacity: 0.8;
font-size: $font-size-base;
}
}
.entry-title {
color: $font-color;
a, a:visited {
color: $font-color;
text-decoration: none;
}
}
.center, .center p {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.left, .left p {
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.post-meta, .entry-meta {
margin: 0;
text-align: center;
color: #8a8a8a;
font-size: 20px;
}
.read-more {
margin: 21px 0;
font-weight: bold;
}
.pagination {
font-weight: bold;
margin: 21px 0px;
}
.loader {
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
width: 42px;
height: 42px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
// .subscribe-form {
// display: flex;
// align-content: center;
// input {
// margin-right: 10px;
// }
// }
.alert {
border-radius: $border-radius;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
}
.alert-info {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
......@@ -10,22 +10,112 @@ body {
@media (max-width: 600px) {
font-size: $font-size-small;
}
max-width: 800px;
max-width: 700px;
padding: 0 21px;
padding-bottom: 21px;
}
nav {
.active {
a, a:visited {
color: $font-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h1, h2, h3, h4, h5, h6 {
// font-weight: 420;
word-break: break-word;
color: $font-color;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);
box-sizing: content-box;
height: 0;
overflow: visible;
}
img, video {
max-width: 100%;
height: auto;
}
button {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
font-family: $font-family-sans-serif;
color: #fff;
background-color: #007bff;
border-color: #007bff;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
border-color: #0062cc;
text-decoration: none;
}
input,
select,
textarea {
border: 1px solid #e9e9e9;
border-radius: $border-radius;
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
font-size: 20px;
}
nav {
font-size: $font-size-base + 2px;
a {
padding-right: 5px;
}
}
a {
text-decoration: none;
&:not(.anchor):hover {
text-decoration: underline;
main {
a, a:visited {
color: $links-color;
&:hover {
color: $links-color;
}
}
h1, h2, h3, h4, h5, h6 {
// font-weight: 420;
word-break: break-word;
color: $font-color;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 21px;
margin-bottom: 21px;
}
}
......@@ -21,7 +21,7 @@ enableGitInfo = true
description = "Strong opinions and crazy ideas on open source, minimalism, sustainability and everything in between. By Sylvain Kerkour, creator of Bloom."
descriptionHtml = """
Strong opinions and crazy ideas on open source, minimalism, sustainability and everything in between. By Sylvain Kerkour, creator of
<a target="_blank" href="https://www.bloom.sh" rel="noopener" style="color: yellow; text-decoration: underline;">Bloom</a>.
<a href="https://www.bloom.sh">Bloom</a>
"""
git = "https://gitlab.com/bloom42/blog"
obfuscatedEmail = '<n uers="znvygb:[email protected]">[email protected]</n>'
......
......@@ -5,24 +5,44 @@ date = 2019-02-05T01:42:42+02:00
+++
# Subscribe to {{< sitename >}}
# Subscribe
<br />
## RSS
I’ll write you once a week about open source, sustainability and avoiding complexity. <br />
Love RSS? Use this URL in your favorite RSS reader: <br />
[{{< rssurl >}}]({{< rssurl >}})
<small>
I hate spam even more than you do.
I'll never share your email and you can unsubscribe at anytime. Also there is no tracking or ads.
</small>
<br />
## Twitter
<noscript>
<strong>We're sorry but Fatal Entropy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="fe-alert"></div>
<div class="loader center" style="display: none;"></div>
<form>
<div class="subscribe-form center">
<input type="email" id="fe-subscribe-email-input" aria-describedby="email-subscribe" placeholder="[email protected]">
<button id="fe-subscribe-button-input">Subscribe</button>
</div>
</form>
Follow
<a href="https://twitter.com/@42bloom" target="_blank" rel="noopener">@42bloom</a> on Twitter to never miss one of our posts.
<br />
## RSS
Prefer RSS? Use this URL in your favorite RSS reader: <br />
[{{< rssurl >}}]({{< rssurl >}})
## Mastodon
<a href="https://mastodon.social/@42bloom" target="_blank" rel="me noopener">@[email protected]</a>
Prefer Mastodon? Follow <a href="https://mastodon.social/@42bloom" target="_blank" rel="me noopener">@[email protected]</a>
## Twitter
Prefer Twitter? Follow
<a href="https://twitter.com/@42bloom" target="_blank" rel="noopener">@42bloom</a>
......@@ -12,50 +12,15 @@ date = 2019-02-05T01:42:42+02:00
<br />
<div id="osw-alert"></div>
<div id="fe-alert"></div>
<div class="loader center"></div>
<div id="fe-thank-you"></div>
<div class="spinner-border text-primary" role="status" id="osw-loader">
<span class="sr-only">Loading...</span>
</div>
The next issue will be coming soon, but in the mean time you can check out the **[last issues](/)**.
Also, just so you know, you can always click reply to any issue to give feedback or ask questions.
</div>
<script type="text/javascript">
$(document).ready(function() {
var urlParams = new URLSearchParams(window.location.search);
var token = urlParams.get('token');
var contactId = urlParams.get('contact');
if (token == null || contactId == null) {
hideLoader();
displayError('Error confirming your subscription. Please click again on the link provided in the email.');
return;
}
var query = 'mutation($input: VerifyContactInput!) { verifyContact(input: $input) }';
var variables = {
input: {
id: decodeURIComponent(contactId),
token: token,
},
};
graphqlReq(query, variables)
.done(function(data) {
if (data.errors && data.errors.length > 0) {
displayError(data.errors[0].message);
return ;
}
displaySuccess('You are now subscribed to <b>Open Source Weekly</b>');
})
.fail(function() {
displayError('Error confirming your subscription. Please click again on the link provided in the email.');
})
.always(function() {
hideLoader();
})
});
</script>
<!DOCTYPE html>
<html lang="{{ $.Site.Language }}">
{{ partial "head.html" . }}
<script type="text/javascript">
window.obfuscatedEmail = {{ .Site.Params.ObfuscatedEmail | safeHTML }};
</script>
<body>
<header>
{{ partial "nav.html" . }}
......
......@@ -3,6 +3,7 @@
<a href="{{ .Site.BaseURL }}" {{ if eq "/" .Permalink }}class="active"{{ end }}>Home</a>
<a href="{{ "/subscribe" | relURL }}" {{ if eq "/subscribe/" (.Permalink | relURL) }}class="active"{{ end }}>Subscribe</a>
<a href="{{ "/about" | relURL }}" {{ if eq "/about/" (.Permalink | relURL) }}class="active"{{ end }}>About</a>
<p class="description">{{ .Site.Params.DescriptionHtml | safeHTML }}</p>
</nav>
<!-- <div class='site-container'>
......
{{ $pag := $.Paginator }}
<div class="pagination center">
{{ if gt $pag.TotalPages 1 }}
<ul>
{{ if $pag.HasPrev }}
<li>
<a href="{{ $pag.Prev.URL }}">&larr; Newer Posts</a>
</li>
{{ end }}
{{ if (and $pag.HasNext $pag.HasPrev) }}
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
{{ end }}
{{ if $pag.HasNext }}
<li>
<a href="{{ $pag.Next.URL }}">Older Posts &rarr;</a>
</li>
{{ end }}
</ul>
</div>
{{ end }}
<!-- post list -->
{{ range $index, $element := $.Paginator.Pages }}
<div class="entry-preview pt-3 pb-3">
<a href="{{ .Permalink }}">
<h2 class="entry-title text-center mb-2">{{ .Title }}</h2>
</a>
<p class="entry-meta mb-3">
<div class="center">
<h2 class="entry-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<p class="entry-meta">
<span classn="entry-author"><a href="https://kerkour.fr">{{ index .Params.authors 0 }}</a></span>
/
<time datetime={{ .Date.Format "2006-01-02T15:04:05Z0700" }} class="entry-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
......@@ -12,7 +12,7 @@
<h3 class="entry-subtitle">
{{ .Params.subtitle }}
</h3>
<div class="entry-preview-content">
<div class="left">
{{ with .Description }}
{{ . }}
{{ else }}
......@@ -21,22 +21,16 @@