jason/ja.son-williams.ca
1
0
Fork 0
Code Issues 23 Pull Requests Projects 1 Wiki Activity

Adding lazy-load version of feed component to load data using AJAX after page content has been rendered.

Browse Source
This commit is contained in:
Jason Williams
2020-10-23 22:54:30 +00:00
parent 2a8454d197
commit af4f1366a0
71 changed files with 1753 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
www/themes/jason-williamsca/pages/contact.htm
View File

@@ -28,18 +28,22 @@ emails_date_format = "Y-m-d"
<div class="col-lg-7">
<h1>Contact Me</h1>
<p>The simplest and quickest way to contact me is by completing the form below.</p>
{% component 'contactform' %}
{% component 'contactform' %}
</div>
<div class="col-lg-5">
<h2>Old School</h2>
<p>Sometimes the more traditional ways of getting in touch are just better...</p>
<p>IMG</p>
<p>4<sup>th</sup> Floor, 1207 11 Ave SW,<br>
Calgary, AB, T3C 0M5</p>
<p><img style="width: 100%;" src="https://api.mapbox.com/styles/v1/jason32dev/ckgehopjc2o1y19o09aqs4x11/static/pin-l+B05C71(-113.9771279,51.1112454)/-113.9771279,51.1112454,14,0/545x150@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA"></p>
<p>3699 63 Ave NW,<br>
Calgary, AB, T3J 0G7</p>
<p><a href="tel:+18252575025">(825) 257-5025</a></p>
<h2>New Cool</h2>
<p>...and sometimes it's better to keep up with the times.</p>
{% partial 'social' nocode = true nocontact = true %}
</div>
<div class="col-lg-7">
<h2>Encryption</h2>
<p>If you wish, you may use my <a href="/pgp"><i class="fas fa-key"></i> PGP public key</a> to encrypt anything that you send me.</p>
</div>
</div>

41
www/themes/jason-williamsca/pages/feed.htm
View File

@@ -1,6 +1,43 @@
title = "Feed"
url = "/feed"
url = "/feed/:channel?/:tag?/"
layout = "default"
is_hidden = 0
[ShortFeed]
channelFilter = "{{ :channel }}"
tagFilter = "{{ :tag }}"
maxItems = 50
[ChannelList]
includeEmpty = 0
[TagList]
==
<p>Feed</p>
<?php
function onStart()
{
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
$this->addJs('assets/javascript/feedlayout.js');
//$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');
}
?>
==
<div class="row">
<div class="col-lg-9">
<h1>Feed</h1>
<div id="feedarea" class="col-container masonry">
{% partial 'feed/template' feeditemclass='col-sm-12 col-md-6 col-xl-4' %}
</div>
</div>
<div class="col-lg-3">
<h2>Channels</h2>
{% component 'ChannelList' %}
<h2>Tags</h2>
<div id="tagcloud" style="height: 500px;"></div>
</div>
</div>
{% put scripts %}
<script type="text/javascript">const tagData = {{ tags | raw }};</script>
{% endput %}

29
www/themes/jason-williamsca/pages/maintenance.htm Normal file
View File

@@ -0,0 +1,29 @@
title = "ja.son-williams.ca"
url = "/maintenance"
is_hidden = 0
==
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>son-williams.ca</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Merriweather:300italic,300' rel='stylesheet' type='text/css'>
<style type="text/css">
* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {height: 100%; color: #000000;}
#view {height: 100%; width: 100%; overflow: hidden;}
#verticalcenter {margin: 0; position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
#verticalcenter p {font-family: 'Merriweather', serif; text-align: center; font-size: 24px; font-weight: 300; font-style: italic;}
#view p#pilink {position: absolute; bottom: 20px; right: 20px; font-size: 20px;}
#view p#pilink a {text-decoration: none; color: #BBC3D0;}
</style>
</head>
<body>
<div id="view">
<div id="verticalcenter">
<p>ja.son-williams.ca</p>
</div>
<p id="pilink"><a href="/backend">&pi;</a></p>
</div>
</body>
</html>

17
www/themes/jason-williamsca/pages/pgp-public-key.htm Normal file
View File

@@ -0,0 +1,17 @@
title = "PGP Public Key"
url = "/pgp"
layout = "default"
is_hidden = 0
==
<div class="row">
<div class="col-lg-7">
<h1>PGP Public Key</h1>
{% partial 'pgpkey' %}
</div>
<div class="col-lg-5">
<h2>About</h2>
<p>If you wish, you may use my PGP public key here to encrypt anything that you send me. Of course I'll need a way to get my hands on your public key in order to be able to decrypt it, so please make sure you provide that or that you've published it to a well-known public directory like <a href="https://keyserver.pgp.com">keyserver.pgp.com</a>.</p>
<h2>Contact Me</h2>
{% partial 'social' noinfrequent = true nocode = true %}
</div>
</div>

35
www/themes/jason-williamsca/pages/resume.htm
View File

@@ -9,7 +9,6 @@ function onStart()
$this['sideMenu'] = 'resumemenu';
$this->addCss('assets/css/resume.css');
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js');
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js');
$this->addJs('assets/javascript/resume.js');
}
?>
@@ -31,8 +30,8 @@ function onStart()
<section class="resume-section d-flex align-items-center" id="skills">
<div class="w-100">
<h1>Skills &amp; Expertise</h1>
<div class="masonry">
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="col-container masonry masonry-horizontal">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card card-inline inline">
<div class="card-body">
<h2 class="card-title">Product Management</h2>
@@ -49,7 +48,7 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card card-inline inline">
<div class="card-body">
<h2 class="card-title">Project Management</h2>
@@ -69,7 +68,7 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card card-inline inline">
<div class="card-body">
<h2 class="card-title">Lean Six-Sigma</h2>
@@ -86,7 +85,7 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card card-inline inline">
<div class="card-body">
<h2 class="card-title">Business Analysis</h2>
@@ -103,7 +102,7 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card card-inline inline">
<div class="card-body">
<h2 class="card-title">Business Technology</h2>
@@ -162,7 +161,7 @@ function onStart()
<p>My primary focus was leading projects within the retail arm of the bank, I also acted as a single point of contact representing the retail banking business unit on large-scale, enterprise wide initiatives, playing a leading role in stakeholder, resource and organizational change management.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">March 2013 - September 2017</span>
<span class="text-primary">November 2014 - September 2017</span>
</div>
</div>
@@ -185,7 +184,7 @@ function onStart()
<p>Acted as the primary point of contact for small and medium business customers based throughout the UK and beyond, providing banking support and services. Assisted with transactional queries both simple and complex. Sold and advised clients on a wide variety of products and services. Demonstrated a commitment to providing industry leading levels of customer service, and received multiple individual awards for excellent customer satisfaction scores.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">March 2013 - Present</span>
<span class="text-primary">March 2010 - July 2010</span>
</div>
</div>
</div>
@@ -263,10 +262,10 @@ function onStart()
<section class="resume-section d-flex align-items-center" id="press">
<div class="w-100">
<h1>Press</h1>
<div class="masonry" data-blah="blah">
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="col-container masonry masonry-horizontal">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card">
<img class="card-img-top" src="{{ 'istock-1051617224-100798650-large.jpg'|media }}">
<img class="card-img-top" src="{{ 'istock-1051617224-100798650-large.jpg' | media }}">
<div class="card-body">
<h2 class="card-title">Connected RPA Delivers A Digital Workforce</h2>
<h3>Computerworld · June 2019</h3>
@@ -276,9 +275,9 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card">
<img class="card-img-top" src="{{ 'disrupting-industry.png'|media }}">
<img class="card-img-top" src="{{ 'disrupting-industry.png' | media }}">
<div class="card-body">
<h2 class="card-title">This Canadian financial institution disrupted their industry with AI!</h2>
<h3>AI Week · August 2018</h3>
@@ -288,9 +287,9 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card">
<img class="card-img-top" src="{{ 'atb-financial-g-suite.jpg'|media }}">
<img class="card-img-top" src="{{ 'atb-financial-g-suite.jpg' | media }}">
<div class="card-body">
<h2 class="card-title">Why ATB Financial moved its entire organization to G Suite</h2>
<h3>TechRepublic · March 2018</h3>
@@ -300,9 +299,9 @@ function onStart()
</div>
</div>
<div class="masonry-wrapper col-sm-6 col-xl-4">
<div class="masonry-item col-sm-6 col-xl-4">
<div class="card">
<img class="card-img-top" src="{{ 'bryan-kenny.jpg'|media }}">
<img class="card-img-top" src="{{ 'bryan-kenny.jpg' | media }}">
<div class="card-body">
<h2 class="card-title">High-tech bank helps Edmonton's homeless access financial services</h2>
<h3>CBC · September 2017</h3>

6
www/themes/jason-williamsca/pages/shrapnel.htm Normal file
View File

@@ -0,0 +1,6 @@
title = "Shrapnel"
url = "/feed/shrapnel/:post/"
layout = "default"
is_hidden = 0
==
<h1>Shrapnel Post</h1>

8
www/themes/jason-williamsca/pages/test.htm Normal file
View File

@@ -0,0 +1,8 @@
title = "Test"
url = "/test"
is_hidden = 0
[ShortFeed]
maxItems = 10
==
{% component 'ShortFeed' %}

15
www/themes/jason-williamsca/pages/uh-oh.htm Normal file
View File

@@ -0,0 +1,15 @@
title = "Uh oh"
url = "/404"
layout = "default"
is_hidden = 0
==
<div class="row">
<div class="col-lg-7">
<h1>Uh oh</h1>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412499226&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>
<div class="col-lg-5">
<p style="margin-top: 6rem;">Well this is embarassing for one of us. The page you asked for is nowhere to be found. Bad link? Mistyped address? I'm not sure.</p>
<p>There's not really all that much stuff here, so you could always try making a selection from the menu at the top right of the page. If you think something's wrong, <a href="/contact">contact me</a>.
</div>
</div>

13
www/themes/jason-williamsca/pages/welcome.htm
View File

@@ -2,6 +2,17 @@ title = "Welcome"
url = "/"
layout = "default"
is_hidden = 0
[LazyLoadShortFeed]
maxItems = 5
renderPartial = "feed/template"
==
<?php
function onStart()
{
$this->addJs('assets/javascript/feedlayout.js');
}
?>
==
<div class="row">
<div class="col-lg-5 order-lg-2">
@@ -15,5 +26,7 @@ is_hidden = 0
</div>
<div class="col-lg-7 order-lg-1">
<h1>Feed</h1>
{% partial 'feed/placeholder' feeditemclass='col-sm-12 col-md-6' %}
<a class="btn btn-outline-primary d-none show-onfeedloaded" href="/feed" role="button">View More...</a>
</div>
</div>