jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-23 11:14:24 -04:00
Code Issues Activity

global header/navbar on all pages like a grown-up website (#17)

Browse Source
This commit is contained in:
Jake Jarvis
2019-11-24 18:07:12 -05:00
committed by GitHub
parent 2bb25a6a5f
commit 8ccd15ab87
30 changed files with 616 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -17,6 +17,8 @@ This site is built with [Hugo extended](https://github.com/gohugoio/hugo). To en
#### Usage:
Simply run `yarn docker:serve` ([install Yarn](https://yarnpkg.com/en/docs/install) first) or build manually with:
```bash
docker build -t jarv.is:develop -f Dockerfile .
docker run -v $(pwd):/src -p 1313:1313 jarv.is:develop

6
assets/sass/abstracts/_responsive.scss
View File

@@ -3,7 +3,11 @@
// Responsive Awesomeness
@media screen and (max-width: $responsive-width) {
@include responsive--global();
@include responsive--header();
@include responsive--footer();
@include responsive--home();
@include responsive--notes();
@include responsive--list();
@include responsive--single();
@include responsive--videos();
}

7
assets/sass/abstracts/_variables.scss
View File

@@ -2,7 +2,9 @@
// Global Colors
$color-background: #ffffff;
$color-gray-background: #fbfbfb;
$color-text: #222222;
$color-medium-dark: #313131;
$color-medium: #444444;
$color-light: #666666;
$color-medium-light: #757575;
@@ -52,6 +54,11 @@ $colors-home:(
);
$color-serverless: #87cef7;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// Other Settings
$link-opacity: 40%;
$link-underline-size: 2px;

81
assets/sass/components/_footer.scss Normal file
View File

@@ -0,0 +1,81 @@
@charset "UTF-8";
// Global Footer Styles
footer {
width: 100%;
display: flex;
justify-content: space-between;
line-height: 1.7;
padding: 1.5em;
box-sizing: border-box;
color: $color-light;
border-top: 1px solid $color-super-light;
/* stylelint-disable-next-line no-descending-specificity */
a {
color: inherit;
}
div {
&#copyright,
&#poweredby {
width: 40%;
font-size: 0.85em;
line-height: 2;
}
&#copyright {
text-align: left;
}
&#poweredby {
text-align: right;
a#source {
border-bottom: 1px solid $color-super-light;
}
}
&#panda {
width: 20%;
text-align: center;
font-size: 1.7em;
line-height: 1;
a {
display: inline-block;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.6) rotate(10deg);
}
}
}
}
}
// Responsive
@mixin responsive--footer() {
footer {
padding-bottom: 0;
div {
&#panda {
display: none;
}
&#copyright,
&#poweredby {
line-height: 1.8;
width: 50%;
}
&#poweredby {
a#hugo::after {
content: "\A";
white-space: pre;
}
}
}
}
}

5
assets/sass/pages/_global.scss → assets/sass/components/_global.scss
View File

@@ -11,9 +11,11 @@ body {
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
box-sizing: border-box;
}
a {
a {
color: $color-links;
text-decoration: none;
background-image: underline-hack($color-links);
@@ -31,7 +33,6 @@ body {
&.no-underline {
background: none !important;
}
}
}

109
assets/sass/components/_header.scss Normal file
View File

@@ -0,0 +1,109 @@
@charset "UTF-8";
// Global Header Styles
header {
width: 100%;
background-color: $color-gray-background;
border-bottom: 1px solid $color-super-light;
nav {
width: 100%;
padding: 0.5em 1.5em;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
a#logo {
display: flex;
align-items: center;
color: $color-medium-dark;
padding: 15px;
img,
svg {
width: 30px;
height: 45px;
}
h1#name {
margin: 0 0 0 20px;
font-size: 1.4em;
font-weight: 500;
}
// mix up logo colors on hover
&:hover {
color: $color-links;
svg {
g#c1 {
fill: $color-logo1;
}
g#c2 {
fill: $color-logo2;
}
g#c3 {
fill: $color-logo3;
}
}
}
}
// Horizontal emoji links
ul {
list-style: none;
display: flex;
align-items: center;
font-size: 1.5em;
line-height: 1;
padding: 0;
margin-right: 15px;
li {
width: 60px;
text-align: right;
a {
display: inline-block;
transition: transform 0.15s ease-in-out;
&:hover {
transform: scale(1.4);
}
}
}
}
}
}
// Responsive
@mixin responsive--header() {
header nav {
padding: 0.4em 1em;
a#logo {
padding: 10px;
img,
svg {
width: 40px;
height: 60px;
}
h1#name {
display: none;
}
}
ul {
font-size: 1.75em;
margin-right: 10px;
li {
width: 55px;
}
}
}
}

19
assets/sass/components/_logo.scss
View File

@@ -1,22 +1,3 @@
@charset "UTF-8";
// nifty color swapping on svg logo hover
a#logo {
&:hover {
$logo-original1: #6fbc4e;
$logo-original2: #ffb900;
$logo-original3: #009cdf;
svg {
g#c1 {
fill: $logo-original2;
}
g#c2 {
fill: $logo-original3;
}
g#c3 {
fill: $logo-original1;
}
}
}
}

7
assets/sass/main.scss
View File

@@ -7,11 +7,14 @@
@import 'abstracts/functions';
// Global Styles
@import 'pages/global';
@import 'components/global';
@import 'components/header';
@import 'components/footer';
// Pages
@import 'pages/home';
@import 'pages/notes';
@import 'pages/list';
@import 'pages/single';
@import 'pages/videos';
// Responsive Mixins

121
assets/sass/pages/_home.scss
View File

@@ -1,12 +1,12 @@
@charset "UTF-8";
// Home Styles
body#home {
font-size: 1.5em;
main#home {
font-size: 1.35em;
font-weight: 300;
line-height: 1.5;
max-width: 1070px;
padding: 50px 65px;
max-width: 980px;
padding: 1.5em 1.75em;
margin: 0 auto;
a {
// Loop through $colors-home -- the main reason I switched to SASS :)
@@ -18,20 +18,24 @@ body#home {
}
}
h1 {
margin: 0;
font-size: 1.5em;
h2 {
margin: 0 0 0.6em 0;
font-size: 1.4em;
font-weight: 500;
line-height: 1.2;
a {
color: inherit;
span#wave {
display: inline-block;
animation-name: wave;
animation-duration: 2.5s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}
}
h2 {
h3 {
margin: 0.6em 0;
font-size: 1.2em;
font-size: 1.15em;
font-weight: 400;
line-height: 1.4;
}
@@ -75,109 +79,30 @@ body#home {
}
}
footer {
display: flex;
justify-content: space-between;
div {
vertical-align: middle;
height: 100%;
&#blog {
width: 40%;
text-align: left;
p#blog {
font-size: 0.9em;
line-height: 2;
margin-bottom: 0;
span {
margin-right: 4px;
}
}
&#info {
width: 40%;
text-align: right;
font-size: 0.55em;
line-height: 3.35; // magic numbers don't judge
color: $color-light;
a {
color: inherit;
&#source {
border-bottom: 1px solid $color-super-light;
}
}
}
&#panda {
width: 20%;
text-align: center;
font-size: 1.25em;
line-height: 1.4; // magic numbers don't judge
a {
display: inline-block;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.6) rotate(10deg);
}
}
}
}
}
h1 span#wave {
display: inline-block;
animation-name: wave;
animation-duration: 2.5s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}
}
// Responsive
@mixin responsive--home() {
body#home {
font-size: 1em;
padding: 25px;
main#home {
font-size: 1.1em;
p {
p, p#blog {
font-size: 1.1em;
}
img#me {
width: 68px;
height: 68px;
width: 100px;
height: 100px;
padding: 2px;
}
footer div {
&#panda {
display: none;
}
&#blog,
&#info {
width: 50%;
}
&#blog {
font-size: 1em;
line-height: 1.5;
}
&#info {
font-size: 0.7em;
line-height: 2.1; // magic numbers don't judge
span#copyright::after {
content: "\A";
white-space: pre;
}
}
}
}
}

64
assets/sass/pages/_list.scss Normal file
View File

@@ -0,0 +1,64 @@
@charset "UTF-8";
// Archive/List Styles
main#list {
max-width: 1010px;
padding: 1.5em 3em;
margin: 0 auto;
section.year {
font-size: 1.1em;
/* stylelint-disable-next-line no-descending-specificity */
h2 {
font-size: 1.8em;
margin: 0;
}
/* stylelint-disable-next-line no-descending-specificity */
ul {
list-style-type: none;
padding-left: 0;
display: block;
}
/* stylelint-disable-next-line no-descending-specificity */
li {
display: flex;
div.date {
color: $color-light;
width: 5.25em;
flex-shrink: 0;
}
&::after {
content: '';
display: block;
clear: both;
}
/* stylelint-disable-next-line no-descending-specificity */
&:last-child {
margin-bottom: 1.8em;
}
/* stylelint-disable-next-line no-descending-specificity */
+ li {
margin-top: 1.3em;
}
}
}
}
// Responsive
@mixin responsive--list() {
main#list {
padding: 1em 1.2em;
section.year {
font-size: 1em;
}
}
}

389
assets/sass/pages/_notes.scss
View File

@@ -1,389 +0,0 @@
@charset "UTF-8";
// Blog Styles
body#notes {
line-height: 1.5;
font-weight: 400;
max-width: 1010px;
padding: 0 50px 35px 50px;
header {
border-bottom: 1px solid $color-super-light;
margin-bottom: 25px;
nav {
width: 100%;
padding: 8px 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
a#logo {
display: flex;
align-items: center;
color: $color-medium;
padding: 15px;
&:hover {
color: $color-links;
}
img,
svg {
width: 30px;
height: 45px;
}
span#name {
margin-left: 20px;
font-size: 1.4em;
font-weight: 500;
}
}
ul {
list-style: none;
display: flex;
align-items: center;
font-size: 1.5em;
line-height: 1;
padding: 0;
margin-right: 15px;
li {
width: 60px;
text-align: right;
a {
display: inline-block;
transition: transform 0.15s ease-in-out;
&:hover {
transform: scale(1.4);
}
}
}
}
}
}
footer {
border-top: 1px solid $color-super-light;
line-height: 1.7;
padding-top: 1.5em;
margin-top: 2em;
color: $color-light;
display: flex;
justify-content: space-between;
/* stylelint-disable-next-line no-descending-specificity */
a {
color: inherit;
}
div {
&#copyright,
&#poweredby {
width: 40%;
font-size: 0.85em;
line-height: 2;
}
&#copyright {
text-align: left;
}
&#poweredby {
text-align: right;
a#source {
border-bottom: 1px solid $color-super-light;
}
}
&#panda {
width: 20%;
text-align: center;
font-size: 1.7em;
line-height: 1;
a {
display: inline-block;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.6) rotate(10deg);
}
}
}
}
}
main {
&#single article div {
&#meta {
color: $color-light;
font-size: 0.85em;
line-height: 1.5;
letter-spacing: 1px;
a {
color: inherit;
}
div#tags {
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 0.5em;
span.tag {
margin: 0 0.6em;
}
}
}
&#info {
text-align: center;
h1 {
margin: 0.3em 0;
font-size: 2em;
line-height: 1.4;
a {
color: inherit;
}
}
}
&#content {
line-height: 1.8;
h1,
h2,
h3 {
margin-top: 0.9em;
margin-bottom: 0.5em;
font-weight: 500;
line-height: 1.5;
}
img,
figure {
height: auto;
max-width: 100%;
margin: 1em auto;
display: block;
}
// reduce margin between image and caption
figure img {
margin-bottom: 0.4em;
}
// image captions -- two different markdown hacks
img + em,
figure figcaption {
display: block;
font-size: 0.9em;
font-style: normal;
color: $color-light;
text-align: center;
}
blockquote {
border-left: 5px solid $color-links;
margin-left: 0.5em;
padding-left: 1em;
}
ul {
list-style-position: outside;
list-style-type: square;
margin-left: 1.5em;
padding-left: 0;
li {
padding-left: 0.25em;
}
}
hr {
width: 60%;
margin: 0.75em auto;
border: 1px solid $color-super-light;
}
video.embed {
display: block;
margin: 1em auto;
max-width: 100%;
height: auto;
border: 0;
}
div.embed.video-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
iframe.youtube-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: inline-block;
}
}
iframe.twitter-tweet, twitter-widget {
margin: 0 auto;
display: block;
}
iframe {
border: 0;
}
code {
// https://markdotto.com/2018/02/07/github-system-fonts/
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
font-size: 0.9em;
padding: 0.2em;
background: $color-super-duper-light;
border: 1px solid $color-super-light;
}
pre code {
display: block;
padding: 1em 1.5em;
margin: 1.4em 0;
line-height: 1.6;
border-left: 3px solid $color-links;
max-width: 100%;
overflow-x: scroll;
page-break-inside: avoid;
object-fit: scale-down;
}
}
}
&#archive section.year {
font-size: 1.1em;
/* stylelint-disable-next-line no-descending-specificity */
ul {
list-style-type: none;
padding-left: 0;
display: block;
}
/* stylelint-disable-next-line no-descending-specificity */
li {
display: flex;
div.date {
color: $color-light;
width: 5.25em;
flex-shrink: 0;
}
&::after {
content: '';
display: block;
clear: both;
}
/* stylelint-disable-next-line no-descending-specificity */
&:last-child {
margin-bottom: 1.8em;
}
/* stylelint-disable-next-line no-descending-specificity */
+ li {
margin-top: 1.3em;
}
}
/* stylelint-disable-next-line no-descending-specificity */
h2 {
font-size: 1.8em;
}
}
}
}
// Responsive
@mixin responsive--notes() {
body#notes {
padding: 0 20px;
width: 100%;
max-width: 100%;
header {
nav {
padding: 5px 0;
a#logo {
padding: 10px;
img,
svg {
width: 40px;
height: 60px;
}
span#name {
display: none;
}
}
ul {
font-size: 1.75em;
margin-right: 10px;
li {
width: 55px;
}
}
}
}
footer div {
&#panda {
display: none;
}
&#copyright,
&#poweredby {
line-height: 1.8;
width: 50%;
}
&#poweredby {
a#hugo::after {
content: "\A";
white-space: pre;
}
}
}
main#archive section.year {
font-size: 1em;
}
main#single article {
width: 100%;
max-width: 100%;
div#info h1 {
font-size: 1.7em;
}
}
}
}

177
assets/sass/pages/_single.scss Normal file
View File

@@ -0,0 +1,177 @@
@charset "UTF-8";
// Post Styles
main#single {
max-width: 910px;
padding: 1em 3em;
margin: 0 auto;
article div {
&#meta {
color: $color-light;
font-size: 0.85em;
line-height: 1.5;
letter-spacing: 1px;
a {
color: inherit;
}
div#tags {
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 0.5em;
span.tag {
margin: 0 0.6em;
}
}
}
&#info {
text-align: center;
h1 {
margin: 0.3em 0;
font-size: 2em;
line-height: 1.4;
a {
color: inherit;
}
}
}
&#content {
font-weight: 400;
line-height: 1.8;
h1,
h2,
h3 {
margin-top: 0.9em;
margin-bottom: 0.5em;
font-weight: 500;
line-height: 1.5;
}
img,
figure {
height: auto;
max-width: 100%;
margin: 1em auto;
display: block;
}
// reduce margin between image and caption
figure img {
margin-bottom: 0.4em;
}
// image captions -- two different markdown hacks
img + em,
figure figcaption {
display: block;
font-size: 0.9em;
font-style: normal;
color: $color-light;
text-align: center;
}
blockquote {
border-left: 5px solid $color-links;
margin-left: 0.5em;
padding-left: 1em;
}
ul {
list-style-position: outside;
list-style-type: square;
margin-left: 1.5em;
padding-left: 0;
li {
padding-left: 0.25em;
}
}
hr {
width: 60%;
margin: 0.75em auto;
border: 1px solid $color-super-light;
}
video.embed {
display: block;
margin: 1em auto;
max-width: 100%;
height: auto;
border: 0;
}
div.embed.video-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
iframe.youtube-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: inline-block;
}
}
iframe.twitter-tweet, twitter-widget {
margin: 0 auto;
display: block;
}
iframe {
border: 0;
}
code {
// https://markdotto.com/2018/02/07/github-system-fonts/
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
font-size: 0.9em;
padding: 0.2em;
background: $color-super-duper-light;
border: 1px solid $color-super-light;
}
pre code {
display: block;
padding: 1em 1.5em;
margin: 1.4em 0;
line-height: 1.6;
border-left: 3px solid $color-links;
max-width: 100%;
overflow-x: scroll;
page-break-inside: avoid;
object-fit: scale-down;
}
}
}
}
// Responsive
@mixin responsive--single() {
main#single {
padding: 0.8em 1.2em;
article {
width: 100%;
max-width: 100%;
div#info h1 {
font-size: 1.7em;
}
}
}
}

18
assets/sass/pages/_videos.scss
View File

@@ -1,29 +1,21 @@
@charset "UTF-8";
// Video Styles
body#videos {
margin: 75px auto;
main#video {
margin: 20px auto;
text-align: center;
p {
font-size: 0.85em;
line-height: 1.5em;
color: #777777;
margin: 0;
padding: 0 10px;
margin: 20px 10px;
}
a {
font-weight: bold;
}
a#logo svg {
height: 48px;
width: 48px;
padding: 4px;
margin: 16px 0 8px 0;
}
video {
width: $responsive-width;
height: auto;
@@ -34,12 +26,12 @@ body#videos {
// Responsive
@mixin responsive--videos() {
body#videos {
main#video {
margin: 20px 0;
h1 {
font-size: 1.6em;
padding: 0 10px;
padding: 0 15px;
}
video {

6
config.toml
View File

@@ -28,6 +28,7 @@ disableAliases = true
facebook = "jakejarvis"
facebook_id = "1329090853"
linkedin = "jakejarvis"
mastodon = "mastodon.social/@jakejarvis"
[params]
description = "Hello! I'm a frontend web developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and progressive web apps."
@@ -78,10 +79,8 @@ disableAliases = true
quality = 75
[blackfriday]
hrefTargetBlank = true
nofollowLinks = true
noreferrerLinks = true
# noopenerLinks = true # requires custom fork w/ custom blackfriday: https://github.com/jakejarvis/hugo/tree/noopener
plainIDAnchors = true
fractions = false
@@ -92,7 +91,8 @@ disableAliases = true
privacyEnhanced = true
# TODO: find better way than double-mounting content as weird hack to allow
# access to image resources from templates
# access to image resources from templates.
# https://gohugo.io/hugo-modules/configuration/#module-config-mounts
[module]
[[module.mounts]]
source = "content"

15
content/_index.html
View File

@@ -1,21 +1,19 @@
---
title: "Jake Jarvis – Front-End Web Developer in Boston, MA"
date: 2019-11-22 16:26:21-0400
date: 2019-11-24 13:57:25-0400
type: home
---
<header>
<img id="me" src="/me.jpg" height="160" width="160" alt="Photo of Jake Jarvis" title="Photo of Jake Jarvis">
<h1>Hi! I'm <a class="no-underline" rel="me author" href="/" title="Jake Jarvis">Jake Jarvis</a>. <span id="wave">&#x1F44B;<!--&#x1F3FB;--></span></h1>
<h2>I'm a frontend web developer based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" title="&quot;Boston Accent Trailer - Late Night with Seth Meyers&quot; on YouTube" id="boston" target="_blank" rel="noopener noreferrer nofollow">Boston</a>.</h2>
</header>
<img id="me" src="/me.jpg" height="160" width="160" alt="Photo of Jake Jarvis">
<h2>Hey! I'm Jake. <span id="wave">&#x1F44B;<!--&#x1F3FB;--></span></h2>
<h3>I'm a frontend web developer based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" title="&quot;Boston Accent Trailer - Late Night with Seth Meyers&quot; on YouTube" id="boston" target="_blank" rel="noopener noreferrer nofollow">Boston</a>.</h3>
<p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title="&quot;The Brutal Lifecycle of JavaScript Frameworks&quot; by Ian Allen" id="javascript" target="_blank" rel="noopener noreferrer nofollow">modern JavaScript frameworks</a> like <a href="https://reactjs.org/" title="React Official Website" id="react" target="_blank" rel="noopener noreferrer nofollow">React</a>, <a href="https://angular.io/" title="Angular Official Website" id="angular" target="_blank" rel="noopener noreferrer nofollow">Angular</a>, and <a href="https://vuejs.org/" title="Vue.js Official Website" id="vue" target="_blank" rel="noopener noreferrer nofollow">Vue</a> in front of <a href="https://nodejs.org/en/" title="Node.js Official Website" id="node" target="_blank" rel="noopener noreferrer nofollow">Node</a> and <a href="https://golang.org/" title="Golang Official Website" id="golang" target="_blank" rel="noopener noreferrer nofollow">Go</a> backends...</p>
<p>...but I'm fluent in classics like <a href="https://stitcher.io/blog/php-in-2019" title="&quot;PHP in 2019&quot; by Brent Roose" id="php" target="_blank" rel="noopener noreferrer nofollow">PHP</a>, <a href="https://www.ruby-lang.org/en/" title="Ruby Official Website" id="ruby" target="_blank" rel="noopener noreferrer nofollow">Ruby</a>, <a href="https://go.java/index.html" title="Java Official Website" id="java" target="_blank" rel="noopener noreferrer nofollow">Java</a>, <a href="https://isocpp.org/" title="Standard C++ Official Website" id="cpp" target="_blank" rel="noopener noreferrer nofollow">C++</a>, and <a href="https://www.python.org/" title="Python Official Website" id="python" target="_blank" rel="noopener noreferrer nofollow">Python</a> as well.</p>
<p>Whenever possible, I also prioritize my experience with <a href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd" id="infosec" target="_blank" rel="me noopener noreferrer">information security</a>, <a href="https://martinfowler.com/articles/serverless.html" title="&quot;Serverless Architectures&quot; by Mike Roberts" id="server" target="_blank" rel="noopener noreferrer nofollow">server<span id="serverless">(less)</span> architecture</a>, <a href="https://github.com/kamranahmedse/developer-roadmap/blob/67a72aab113e79c11e292ada394606f079f6a263/images/devops.png" title="&quot;DevOps Roadmap&quot; by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps &amp; CI</a>, and the <a href="https://engineering.fb.com/data-center-engineering/tupperware/" title="&quot;Containerized Deployment at Facebook&quot; by Kenny Yu &amp; Chunqiang Tang" id="containers" target="_blank" rel="noopener noreferrer nofollow">containerization of everything</a>.</p>
<p>I fell in love with <a href="/y2k/" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="/notes/my-first-code/" title="Jake's Bulletin Board, circa 2003" id="jbb" target="_blank" rel="noopener">backend programming</a> when my only source of income was <a href="/birthday/" title="🎉 Cranky Birthday Boy on VHS Tape 📼" id="birthday" target="_blank" rel="noopener">the Tooth Fairy</a>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p>
<p>I fell in love with <a href="/y2k/" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="/notes/my-first-code/" title="Jake's Bulletin Board, circa 2003" id="jbb">backend programming</a> when my only source of income was <a href="/birthday/" title="🎉 Cranky Birthday Boy on VHS Tape 📼" id="birthday">the Tooth Fairy</a>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p>
<p>Since then, my side projects
<a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title="&quot;Student designs iPhone JoeyTracker app&quot; on The Tufts Daily" id="news-1" target="_blank" rel="noopener noreferrer nofollow">have</a> <!-- https://archive.fo/LZ3y0 --> <!-- /daily.pdf -->
<a href="/leo/" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2" target="_blank" rel="noopener">been</a>
<a href="/leo/" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2">been</a>
<a href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm" title="&quot;The new Facebook is on a roll&quot; on CNN Money" id="news-3" target="_blank" rel="noopener noreferrer nofollow">featured</a> <!-- https://archive.fo/Juzjc -->
<a href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" title="&quot;Your Next Client? The CEO&#39;s Son&quot; on Advertising Age" id="news-4" target="_blank" rel="noopener noreferrer nofollow">in</a> <!-- https://archive.fo/Hzuyx -->
<a href="https://books.google.com/books?id=RRUkLhyGZVgC&amp;lpg=PA226&amp;dq=%22jake%20jarvis%22&amp;pg=PA226#v=onepage&amp;q=%22jake%20jarvis%22&amp;f=false" title="&quot;The Facebook Effect&quot; by David Kirkpatrick (Google Books)" id="news-5" target="_blank" rel="noopener noreferrer nofollow">various</a>
@@ -24,3 +22,4 @@ type: home
</p>
<p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="/resume.pdf" title="View PDF Resume" id="resume" target="_blank" rel="noopener">PDF resume here</a>.</p>
<p>If any of this fits with what you're looking for, I'd love to hear from you via <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a><sup>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
<p id="blog"><a href="/notes/" title="My Blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</a></p>

BIN
content/me_large.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 258 KiB

After

Width:  |  Height:  |  Size: 352 KiB

16
content/notes/netlify-analytics-review/index.md
View File

@@ -22,17 +22,17 @@ I've been trying out [Netlify Analytics](https://www.netlify.com/products/analyt
---
## 👍&nbsp; Pros
## 👍&nbsp; Pros {#pros}
Pretty much all of the benefits of Netlify Analytics stem from the fact that it's **purely server-side software**. This is what singularly sets it apart from [Google Analytics](https://analytics.google.com/analytics/web/) — by _far_ the [status quo](https://trends.builtwith.com/analytics/Google-Analytics) — and even self-hosted, open-source applications I've tried like [Matomo](https://github.com/matomo-org/matomo) and [Fathom](https://github.com/usefathom/fathom).
### ⚡&nbsp; Speed
### ⚡&nbsp; Speed {#speed}
To start using Netlify Analytics, you press a few buttons on the Netlify dashboard and voilà. No need to copy and paste some obfuscated JavaScript snippet into the `<head>` of each page, which is a painful task for those of us who care about speed and efficiency on the web.
On top of sending yet another DNS request to one of Google's domains — and more HTTP payloads for each outgoing click, file downloaded, etc. — Google's `analytics.js` script is currently 43 KB. For a site like [nytimes.com](https://www.nytimes.com/), which transfers **nearly 20 MB** on its homepage, this is negligible. But for simple sites like mine, which I've [painstakingly optimized](https://gtmetrix.com/reports/jarv.is/uOzCBKlv) (mostly for fun, don't judge), that doubles the size of my homepage. Matomo's script, weighing in at 65 KB, made it even worse.
### 🕵️‍♂️&nbsp; Privacy
### 🕵️‍♂️&nbsp; Privacy {#privacy}
This is the big one.
@@ -46,7 +46,7 @@ Instead, Netlify Analytics pulls and compiles data from server logs on each of t
Netlify does store some short-term data, like IP addresses, as any normal hosting provider does. But for the purposes of analytics, the data is anonymized and only used to determine things like unique visitors vs. individual page views — and not shown to the customer. [Netlify's DPA](https://www.netlify.com/gdpr/) (Data Processing Agreement) is one of the most conservative I've seen on the web.
### 🛑&nbsp; AdBlock Immunity
### 🛑&nbsp; AdBlock Immunity {#adblock-immunity}
Ad blocking is becoming commonplace on the World Wide Web with [over 25% of users](https://www.statista.com/statistics/804008/ad-blocking-reach-usage-us/) reportedly installing extensions to do so as soon as their new browser touches the net. And for good reason, since most of them also [block cross-site tracking scripts](https://moz.com/blog/analytics-black-holes) like Google's by default.
@@ -62,15 +62,15 @@ _Side note: This section has also become cluttered with requests from script kid
---
## 👎&nbsp; Cons
## 👎&nbsp; Cons {#cons}
### 💰&nbsp; Price
### 💰&nbsp; Price {#price}
Netlify is one of the most awesome free-as-in-beer services on the web today, providing a fast CDN and instant deployments at zero cost (up to a pretty insane amount, of course). But if you want to add Netlify Analytics, your bill suddenly jumps to [$9 a month](https://www.netlify.com/pricing/#analytics). **Nine dollars!** That's over **$100 per year!** If you have more than 250,000 visitors per month, the cost can be even higher (to the point where you'll need to contact Netlify's sales team).
It makes sense that Netlify needs to subsidize the cost of providing free enterprise-grade web hosting for the rest of its non-enterprise users to stay alive. But when Google Analytics is free, this is a pretty tough ask for any hobbyist — even if Google is [getting more from them](https://support.google.com/analytics/answer/1011397?hl=en) than they are from Google. 😬
### 📈&nbsp; Accuracy
### 📈&nbsp; Accuracy {#accuracy}
{{< image src="images/sources-bandwidth.png" alt="Referrer and bandwidth tracking on Netlify Analytics" >}}
@@ -82,7 +82,7 @@ Another benefit of using Google's own analytics service becomes glaringly appare
One more note: since Netlify doesn't process IP addresses or user agents, bots crawling your site (like [Googlebot](https://support.google.com/webmasters/answer/182072?hl=en) and [Bingbot](https://www.bing.com/webmaster/help/which-crawlers-does-bing-use-8c184ec0)) get counted towards your stats, possibly overinflating your ego a little more than it should.
### ⏱️&nbsp; Historical Data
### ⏱️&nbsp; Historical Data {#historical-data}
{{< image src="images/overview.png" alt="Overview of Netlify Analytics stats" >}}

36
content/notes/presidential-candidates-404-pages/index.md
View File

@@ -19,7 +19,7 @@ More recently, though, little-known hidden Easter eggs on ["404 Not Found"](http
---
## 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404)
## 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404) {#warren}
I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday Night Live. And [unfortunately](https://twitter.com/realdonaldtrump/status/1097116612279316480), seeing a campaign embrace SNL is like a breath of fresh air these days. [Watch all of the Kate McWarren videos so far here; you won't regret it.](http://www.nbc.com/saturday-night-live/cast/kate-mckinnon-15056/impersonation/elizabeth-warren-287903)
@@ -27,7 +27,7 @@ I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday
---
## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/)
## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/) {#sanders}
Although the designer who selected this GIF likely had _thousands_ of choices when searching "[Bernie finger wagging GIF](https://www.google.com/search?q=Bernie+finger+wagging+GIF&tbm=isch&tbs=itp:animated)," the text beside it is well-written and funny — even though we both know putting a page at [berniesanders.com/zxcliaosid](https://berniesanders.com/zxcliaosid/) probably won't be a top priority of a President Sanders.
@@ -35,7 +35,7 @@ Although the designer who selected this GIF likely had _thousands_ of choices wh
---
## 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404)
## 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404) {#biden}
Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and his choice of vanilla ice cream.
@@ -43,7 +43,7 @@ Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and
---
## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404)
## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404) {#orourke}
A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.com/texas/statements/2019/mar/14/club-growth/beto-orourke-arrested-dwi-flee-scene/) in the '90s — but still a clever ask for a donation and a great use of a GIF, even if it's left over from his Senate campaign.
@@ -51,7 +51,7 @@ A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.c
---
## 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404)
## 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404) {#harris}
Another clean and simple page with a top-notch GIF. It injected some emotion into visiting [kamalaharris.com/alskdjf](https://kamalaharris.com/alskdjf).
@@ -59,7 +59,7 @@ Another clean and simple page with a top-notch GIF. It injected some emotion int
---
## 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/)
## 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/) {#buttigeg}
I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404 page is no exception. In case you didn't know, Pete for America has an entire ["Design Toolkit"](https://design.peteforamerica.com/) publicly available for all to view and use, with really cool and in-depth explanations for all of their choices — even their [color palette](https://design.peteforamerica.com/colors). Very progressive indeed.
@@ -67,7 +67,7 @@ I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404
---
## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/)
## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/) {#booker}
Love the photo choice. But although pains me to go against my Senator from my home state, I still _cannot stand_ his choice of font. Oh well, I guess that's now a criterion for running for president in 2020.
@@ -75,7 +75,7 @@ Love the photo choice. But although pains me to go against my Senator from my ho
---
## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404)
## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404) {#yang}
Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzoif](https://www.yang2020.com/alsdjfzoif) — the actual URL I visited to grab this screenshot — but the Bitmoji Andrew looks pretty chill.
@@ -83,7 +83,7 @@ Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzo
---
## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404)
## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404) {#klobuchar}
This is the 404 page of someone who won't forget the [Midwestern roots](https://en.wikipedia.org/wiki/Uff_da) she comes from once she moves into the White House...or writes a memoir about her campaign from her Minnesota home.
@@ -91,7 +91,7 @@ This is the 404 page of someone who won't forget the [Midwestern roots](https://
---
## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404)
## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404) {#bullock}
I'll never publicly say anything against a good Dad joke. This is no exception.
@@ -99,7 +99,7 @@ I'll never publicly say anything against a good Dad joke. This is no exception.
---
## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404)
## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404) {#bennet}
Another quality Dad joke here.
@@ -107,7 +107,7 @@ Another quality Dad joke here.
---
## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404)
## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404) {#delaney}
Yet another Dad joke? I honestly had the hardest time ranking these three.
@@ -115,7 +115,7 @@ Yet another Dad joke? I honestly had the hardest time ranking these three.
---
## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404)
## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404) {#williamson}
A 404 page only a motivational author and speaker running for president could envision.
@@ -123,7 +123,7 @@ A 404 page only a motivational author and speaker running for president could en
---
## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404)
## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404) {#trump}
I guess this would be slightly humorous...four years ago. Time to move on from your middle-school crush, Donny.
@@ -135,25 +135,25 @@ I guess this would be slightly humorous...four years ago. Time to move on from y
These candidates haven't configured a custom 404 page, settling for the default Drupal or WordPress text. Do they _really_ think they can run the free world with their websites in this shape? 🙄 _&lt;/s&gt;_
### Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404)
### Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404) {#castro}
{{< image src="images/castro.png" alt="Julián Castro" >}}
---
### Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404)
### Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404) {#messam}
{{< image src="images/messam.png" alt="Wayne Messam" >}}
---
### Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404)
### Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404) {#gabbard}
{{< image src="images/gabbard.png" alt="Tulsi Gabbard" >}}
---
### Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404)
### Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404) {#sestak}
{{< image src="images/sestak.png" alt="Joe Sestak" >}}

4
layouts/_default/list.html
View File

@@ -1,6 +1,5 @@
{{ partial "header.html" . }}
{{ partial "blog-header.html" . }}
<main id="archive">
<main id="list">
{{- range (where .Site.RegularPages "Type" "notes").GroupByDate "2006" }}
<section class="year">
<h2>{{ .Key }}</h2>
@@ -15,5 +14,4 @@
</section>
{{- end }}
</main>
{{ partial "blog-footer.html" . }}
{{ partial "footer.html" . }}

2
layouts/_default/single.html
View File

@@ -1,5 +1,4 @@
{{ partial "header.html" . }}
{{ partial "blog-header.html" . }}
<main id="single">
<article>
<div id="info">
@@ -20,5 +19,4 @@
</div>
</article>
</main>
{{ partial "blog-footer.html" . }}
{{ partial "footer.html" . }}

16
layouts/_default/video.html
View File

@@ -1,7 +1,8 @@
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
<main id="video">
<h1>{{ .Title }}</h1>
<video poster="{{ with .Resources.GetMatch "images/*.png" }}{{ .Permalink }}{{ end }}" controls crossorigin playsinline preload="none">
<video poster="{{ with .Resources.GetMatch "images/*.png" }}{{ .Permalink }}{{ end }}" controls crossorigin playsinline preload="none">
<!-- Video files -->
{{ with .Resources.GetMatch "*.webm" }}<source src="{{ .Permalink }}" type="video/webm">{{ end }}
{{ with .Resources.GetMatch "*.mp4" }}<source src="{{ .Permalink }}" type="video/mp4">{{ end }}
@@ -11,11 +12,8 @@
<!-- Fallback for browsers that don't support the <video> element -->
Your browser doesn't support HTML5 video. {{ with .Resources.GetMatch "*.mp4" }}<a href="{{ .Permalink }}">Click here to view the raw .mp4 video.</a>{{ end }}
</video>
<div>
<a class="no-underline" id="logo" href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}" aria-label="{{ .Site.Title }}">
{{ partial "logo.html" . }}
</a>
</div>
{{ .Content }}
</video>
{{ .Content }}
</main>
{{ partial "footer.html" . }}

19
layouts/index.headers
View File

@@ -1,7 +1,24 @@
# Smart security headers
# Sensible default security headers
# - More info: https://scotthelme.co.uk/hardening-your-http-response-headers/
# - Test website: https://securityheaders.com/
/*
X-Frame-Options: sameorigin
X-XSS-Protection: 1; mode=block
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff
# Recommended MIME type for RSS feed
/index.xml
Content-Type: application/rss+xml
# Recommended MIME type for PWA manifests
# https://github.com/w3c/manifest/issues/689
/manifest.json
Content-Type: application/manifest+json; charset=UTF-8
/*.webmanifest
Content-Type: application/manifest+json; charset=UTF-8

11
layouts/index.html
View File

@@ -1,10 +1,5 @@
{{ partial "header.html" . }}
<main>
{{ .Content }}
<footer>
<div id="blog"><a href="{{ "notes/" | absURL }}" title="{{ .Site.Author.name }}&#39;s Blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</a></div>
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
<div id="info"><span id="copyright"><a class="no-underline" href="{{ .Site.Params.wayback }}" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">&copy; {{ .Site.Params.copyrightFirstYear }} &ndash;</a> {{ now.Format "2006" }} <a class="no-underline" href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">{{ .Site.Title }}</a>.</span> <a class="no-underline" href="{{ .Site.Params.gitRepo }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
</footer>
</main>
<main id="home">
{{ .Content }}
</main>
{{ partial "footer.html" . }}

11
layouts/index.redirects
View File

@@ -2,7 +2,12 @@
# https://www.netlify.com/docs/redirects/
{{ range $p := .Site.Pages -}}
{{ range .Aliases }}
{{- . | printf "%-35s" }} {{ $p.RelPermalink }}
{{- range .Aliases }}
{{- . | printf "%-35s" }} {{ $p.RelPermalink }} 301
{{ end -}}
{{- end -}}
{{- end }}
# Rewrite generated manifest.json to manifest.webmanifest
# https://github.com/w3c/manifest/issues/689
/manifest.webmanifest /manifest.json 200

5
layouts/partials/blog-footer.html
View File

@@ -1,5 +0,0 @@
<footer>
<div id="copyright">Posts licensed under <a class="no-underline" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener noreferrer nofollow">CC-BY-4.0</a>, <a class="no-underline" href="{{ .Site.Params.wayback }}" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">{{ .Site.Params.copyrightFirstYear }} &ndash;</a> {{ now.Format "2006" }}.</div>
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
<div id="poweredby"><a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener noreferrer nofollow">Powered by Hugo.</a> <a class="no-underline" href="{{ .Site.Params.gitRepo }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
</footer>

14
layouts/partials/blog-header.html
View File

@@ -1,14 +0,0 @@
<header>
<nav>
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" title="{{ .Site.Title }}" aria-label="{{ .Site.Title }}">
{{ partial "logo.html" . }}
<span id="name">{{ .Site.Title }}</span>
</a>
<ul>
<li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
<li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
<li><a class="no-underline" href="https://github.com/{{ .Site.Author.github }}" title="GitHub" target="_blank" rel="me noopener noreferrer">&#x1F468;&#x200D;&#x1F4BB;</a></li>
<li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li>
</ul>
</nav>
</header>

5
layouts/partials/footer.html
View File

@@ -1,3 +1,8 @@
<footer>
<div id="copyright">Content licensed under <a class="no-underline" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener noreferrer nofollow">CC-BY-4.0</a>, <a class="no-underline" href="{{ .Site.Params.wayback }}" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">{{ .Site.Params.copyrightFirstYear }} &ndash;</a> {{ now.Format "2006" }}.</div>
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
<div id="poweredby"><a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener noreferrer nofollow">Powered by Hugo.</a> <a class="no-underline" href="{{ .Site.Params.gitRepo }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
</footer>
</body>
</html>

16
layouts/partials/header.html
View File

@@ -34,4 +34,18 @@
{{ partial "schema-person.html" . }}
{{ end }}
</head>
<body id="{{ .Type }}">
<body>
<header>
<nav>
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" title="{{ .Site.Title }}" aria-label="{{ .Site.Title }}">
{{ partial "logo.html" . }}
<h1 id="name">{{ .Site.Title }}</h1>
</a>
<ul>
<li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
<li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
<li><a class="no-underline" href="https://github.com/{{ .Site.Author.github }}" title="GitHub" target="_blank" rel="me noopener noreferrer">&#x1F468;&#x200D;&#x1F4BB;</a></li>
<li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li>
</ul>
</nav>
</header>

14
layouts/partials/schema-article.html
View File

@@ -29,9 +29,17 @@
"image": {
"@type": "ImageObject",
"url": {{ "me_large.jpg" | absURL }},
"width": "1000",
"height": "1000"
}
"width": "1200",
"height": "1200"
},
"sameAs": [
{{ .Site.BaseURL }},
{{ printf "%s%s" "https://github.com/" .Site.Author.github }},
{{ printf "%s%s" "https://twitter.com/" .Site.Author.twitter }},
{{ printf "%s%s" "https://www.facebook.com/" .Site.Author.facebook }},
{{ printf "%s%s%s" "https://www.linkedin.com/in/" .Site.Author.linkedin "/" }},
{{ printf "%s%s" "https://" .Site.Author.mastodon }}
]
},
"publisher": {
"@type": "Organization",

13
layouts/partials/schema-person.html
View File

@@ -9,15 +9,16 @@
"image": {
"@type": "ImageObject",
"url": {{ "me_large.jpg" | absURL }},
"width": "1000",
"height": "1000"
"width": "1200",
"height": "1200"
},
"sameAs": [
{{ .Site.BaseURL }},
"https://github.com/{{ .Site.Author.github }}",
"https://twitter.com/{{ .Site.Author.twitter }}",
"https://www.facebook.com/{{ .Site.Author.facebook }}",
"https://www.linkedin.com/in/{{ .Site.Author.linkedin }}/"
{{ printf "%s%s" "https://github.com/" .Site.Author.github }},
{{ printf "%s%s" "https://twitter.com/" .Site.Author.twitter }},
{{ printf "%s%s" "https://www.facebook.com/" .Site.Author.facebook }},
{{ printf "%s%s%s" "https://www.linkedin.com/in/" .Site.Author.linkedin "/" }},
{{ printf "%s%s" "https://" .Site.Author.mastodon }}
]
}
</script>