jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-12-03 04:18:57 -05:00
Code Issues Activity

Google AMP support & switch to NPM builds (#14)

Browse Source
This commit is contained in:
Jake Jarvis
2019-11-19 15:23:16 -05:00
committed by GitHub
parent d42a00247f
commit d6ad47c57b
30 changed files with 463 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
layouts/_default/single.amp.html Normal file
View File

@@ -0,0 +1,178 @@
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<title>{{ .Title }} &ndash; {{ .Site.Title }}</title>
{{ with .OutputFormats.Get "html" }}<link rel="canonical" href="{{ .Permalink }}">{{ end }}
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
{{ hugo.Generator }}
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta name="author" content="{{ .Site.Author.name }}">
{{ partial "open-graph.html" . }}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #ffffff;
color: #222222;
}
a {
color: #0e6dc2;
}
hr {
width: 60%;
margin: 0.75em auto;
border: 1px solid #dddddd;
}
blockquote {
border-left: 5px solid #0e6dc2;
margin-left: 0.5em;
padding-left: 1em;
}
article {
font-size: 1rem;
line-height: 1.8rem;
padding: 0 20px;
}
h1.title {
text-align: center;
font-size: 2.2rem;
line-height: 3rem;
margin-top: 1rem;
margin-bottom: 0.25rem;
}
p.meta {
text-align: center;
margin: 0.25rem;
color: #777777;
}
p.meta a {
text-decoration: none;
color: #444444;
}
p.center, p.image, p.caption, p.video {
text-align: center;
}
header {
width: 100%;
border-bottom: 1px solid #bbbbbb;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 30px;
}
nav a {
text-decoration: none;
}
nav a#logo {
display: flex;
align-items: center;
color: #333333;
padding: 10px 0;
}
nav a#logo svg {
height: 45px;
width: 30px;
}
nav a#logo span {
margin-left: 16px;
font-size: 1.5rem;
font-weight: 500;
}
nav ul {
list-style: none;
display: flex;
align-items: center;
font-size: 1.5em;
line-height: 1;
padding: 0;
}
nav ul li {
width: 60px;
text-align: right;
}
footer {
width: 100%;
padding: 20px;
border-top: 1px solid #bbbbbb;
color: #555;
}
footer a {
text-decoration: none;
}
footer a.back-to-top {
position: absolute;
right: 20px;
}
code {
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
font-size: 0.9em;
padding: 0.2em;
background: #f4f4f4;
border: 1px solid #dddddd;
}
pre code {
display: block;
padding: 1em 1.5em;
margin: 1.4em 0;
line-height: 1.6;
border-left: 3px solid #0e6dc2;
max-width: 100%;
overflow-x: scroll;
page-break-inside: avoid;
object-fit: scale-down;
}
div.highlight span.k, div.highlight span.kc, div.highlight span.kd, div.highlight span.kp, div.highlight span.kr, div.highlight span.kt, div.highlight span.no { color: #03748a; }
div.highlight span.n, div.highlight span.bp, div.highlight span.nb, div.highlight span.ni, div.highlight span.fm, div.highlight span.nl, div.highlight span.nn, div.highlight span.py, div.highlight span.nv, div.highlight span.vc, div.highlight span.vg, div.highlight span.vi, div.highlight span.vm, div.highlight span.p { color: #111111; }
div.highlight span.na, div.highlight span.nc, div.highlight span.nd, div.highlight span.ne, div.highlight span.nf, div.highlight span.nx { color: #489c44; }
div.highlight span.err, div.highlight span.nt, div.highlight span.o, div.highlight span.ow, div.highlight span.kn { color: #e8003d; }
div.highlight span.l, div.highlight span.se, div.highlight span.m, div.highlight span.mb, div.highlight span.mf, div.highlight span.mh, div.highlight span.mi, div.highlight span.il, div.highlight span.mo { color: #8145ec; }
div.highlight span.ld, div.highlight span.s, div.highlight span.sa, div.highlight span.sb, div.highlight span.sc, div.highlight span.dl, div.highlight span.sd, div.highlight span.s2, div.highlight span.sh, div.highlight span.si, div.highlight span.sx, div.highlight span.sr, div.highlight span.s1, div.highlight span.ss { color: #c17005; }
div.highlight span.c, div.highlight span.ch, div.highlight span.cm, div.highlight span.c1, div.highlight span.cs, div.highlight span.cp, div.highlight span.cpf { color: #6b6859; }
div.highlight span.ge { font-style: italic; }
div.highlight span.gs { font-weight: bold; }
</style>
<link rel="icon" href="{{ "favicon-192.png" | absURL }}" sizes="192x192">
<link rel="icon" href="{{ "favicon-48.png" | absURL }}" sizes="48x48">
<link rel="icon" href="{{ "favicon-32.png" | absURL }}" sizes="32x32">
<link rel="icon" href="{{ "favicon-16.png" | absURL }}" sizes="16x16">
<link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}">
<link rel="alternate" type="application/rss+xml" href="{{ "index.xml" | absURL }}" title="{{ .Site.Title }} (RSS)">
<link rel="manifest" href="{{ "manifest.json" | absURL }}">
{{ partial "schema.html" . }}
</head>
<body>
<header>
<nav>
<a id="logo" href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">
{{ partial "logo.html" . }}
<span id="name">{{ .Site.Title }}</span>
</a>
<ul>
<li><a href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
<li><a href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
<li><a 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>
<article>
<h1 class="title">{{ .Title }}</h1>
<p class="meta">by <a class="author" href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a> on <a class="date" href="{{ .Permalink }}">{{ .Date.Format "January 2, 2006" }}</a></p>
{{ .Content }}
</article>
<footer>
Content by <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>, licensed under <a 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="back-to-top" href="#top">↑ Back to top.</a>
</footer>
</body>
</html>
{{"<!--" | safeHTML}} {{ hugo.Environment }} {{"-->" | safeHTML}}
{{"<!--" | safeHTML}} {{ hugo.Version }} {{"-->" | safeHTML}}

2
layouts/partials/commento.html Normal file
View File

@@ -0,0 +1,2 @@
<div id="commento"></div>
<script src="https://comments.jarv.is/js/commento.js"></script>

32
layouts/partials/header.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
{{"<!--\n ,,, ,,,\n ;\" ^; ;\" \",\n ; s$$$$$s ;\n , ss$$$$$$$ss ,\"\n ;$$$$$$$$$$$$$$$$\n $$$$$$$$$$$$$$$$$$ Hello, human. :)\n $$$$$\"\"\"$$$\"\"\"$$$$$$\n $$$$$ p\"$$$\"q $$$$$ https://jarv.is/humans.txt\n $$$$ .$$$$$. $$$$\n $$$$$$$$$$$$$$$$$\n \"$$$$\"*\"$$$$\"\n \"$$.$$\"\n-->" | safeHTML}}
<html lang="en">
<head>
@@ -8,32 +8,7 @@
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta name="author" content="{{ .Site.Author.name }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="og:image" content="{{ if .Params.image }}{{ .Permalink }}images/{{ .Params.image }}{{ else }}{{ "me.jpg" | absURL }}{{ end }}">
{{- if .IsPage }}
{{- if not .PublishDate.IsZero }}
<meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTMLAttr }}">
{{- else if not .Date.IsZero }}
<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTMLAttr }}">
{{- end }}
{{- with .Site.Author.facebook }}
<meta property="article:author" content="https://www.facebook.com/{{ . }}">{{ end }}
{{- with .Params.tags }}{{ range . }}
<meta property="article:tag" content="{{ . }}">{{ end }}{{ end }}
{{- end }}
<meta property="fb:admins" content="{{ .Site.Author.facebook_id }}">
<meta property="fb:app_id" content="{{ .Site.Params.facebook_app_id }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="{{ .Site.Params.domain }}">
<meta name="twitter:site" content="{{ .Site.Author.twitter }}">
<meta name="twitter:creator" content="{{ .Site.Author.twitter }}">
<meta name="twitter:dnt" content="on">
<meta name="twitter:widgets:csp" content="on">
{{ partial "open-graph.html" . }}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
@@ -49,6 +24,9 @@
<link rel="icon" href="{{ "favicon-16.png" | absURL }}" sizes="16x16">
<link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}">
<link rel="canonical" href="{{ .Permalink }}">
{{- if and (eq .Type "notes") (eq .Kind "page") }}{{ with .OutputFormats.Get "amp" }}
<link rel="amphtml" href="{{ .Permalink }}">
{{- end }}{{ end }}
<link rel="alternate" type="application/rss+xml" href="{{ "index.xml" | absURL }}" title="{{ .Site.Title }} (RSS)">
<link rel="author" href="{{ "humans.txt" | absURL }}">
</head>

26
layouts/partials/open-graph.html Normal file
View File

@@ -0,0 +1,26 @@
<meta property="og:title" content="{{ .Title }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="og:image" content="{{ if .Params.image }}{{ (printf "%s%s%s" (.OutputFormats.Get "html").Permalink "images/" .Params.image ) }}{{ else }}{{ "me.jpg" | absURL }}{{ end }}">
{{- if .IsPage }}
{{- if not .PublishDate.IsZero }}
<meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTMLAttr }}">
{{- else if not .Date.IsZero }}
<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTMLAttr }}">
{{- end }}
{{- with .Site.Author.facebook }}
<meta property="article:author" content="https://www.facebook.com/{{ . }}">{{ end }}
{{- with .Params.tags }}{{ range . }}
<meta property="article:tag" content="{{ . }}">{{ end }}{{ end }}
{{- end }}
<meta property="fb:admins" content="{{ .Site.Author.facebook_id }}">
<meta property="fb:app_id" content="{{ .Site.Params.facebook_app_id }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="{{ .Site.Params.domain }}">
<meta name="twitter:site" content="{{ .Site.Author.twitter }}">
<meta name="twitter:creator" content="{{ .Site.Author.twitter }}">
<meta name="twitter:dnt" content="on">
<meta name="twitter:widgets:csp" content="on">

38
layouts/partials/schema.html Normal file
View File

@@ -0,0 +1,38 @@
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {{ with .OutputFormats.Get "html" }}{{ .Permalink }}{{ end }},
"headline": {{ .Title }},
"datePublished": {{ .PublishDate.Format "2006-01-02T15:04:05-07:00" }},
"dateModified": {{ .PublishDate.Format "2006-01-02T15:04:05-07:00" }},
"description": {{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }},
"keywords": "{{ with .Params.tags }}{{ range $index, $tag := . }}{{ if gt $index 0 }}, {{ end }}{{ $tag }}{{ end }}{{ end }}",
"author": {
"@type": "Person",
"name": {{ .Site.Author.name }},
"url": {{ .Site.BaseURL }},
"image": {
"@type": "ImageObject",
"url": {{ "me.jpg" | absURL }},
"width": 320,
"height": 320
}
},
"publisher": {
"@type": "Organization",
"name": {{ .Site.Author.name }},
"url": {{ .Site.BaseURL }},
"logo": {
"@type": "ImageObject",
"url": {{ "favicon-512.png" | absURL }},
"width": 512,
"height": 512
}
},
"image": {
"@type": "ImageObject",
"url": {{ if .Params.image }}{{ (printf "%s%s%s" (.OutputFormats.Get "html").Permalink "images/" .Params.image ) }}{{ else }}{{ "me.jpg" | absURL }}{{ end }}
}
}
</script>

0
layouts/partials/stats.html → layouts/partials/track.html
View File

7
layouts/shortcodes/codepen.amp.html Normal file
View File

@@ -0,0 +1,7 @@
<amp-iframe
layout="responsive"
width="1200"
height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}"
scrolling="no"
src="https://codepen.io/{{ .Get "username" }}/embed/{{ .Get "id" }}/?height={{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}&amp;theme-id=light&amp;default-tab={{ .Get "left-tab" }}{{ if .Get "right-tab" }},{{ .Get "right-tab" }}{{ end }}">
</amp-iframe>

1
layouts/shortcodes/gh-buttons.amp.html Normal file
View File

@@ -0,0 +1 @@
<p class="center"><a href="https://github.com/{{ .Get "username" }}/{{ .Get "repo" }}" target="_blank" rel="noopener noreferrer nofollow">View on GitHub</a></p>

40
layouts/shortcodes/image.amp.html Normal file
View File

@@ -0,0 +1,40 @@
{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
{{- .Scratch.Set "image" $original -}}
<!-- TODO: automatically pull max-width of page -->
{{- $maxWidth := 910 -}}
{{- $setWidth := 0 -}}
{{- if .Get "width" -}}
{{- $setWidth = (int (.Get "width")) -}}
{{- $retinaWidth := (mul $setWidth 2) -}}
{{- if gt $original.Width $retinaWidth -}}
{{- $finalWidth := (printf "%dx" $retinaWidth ) -}}
{{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
{{- end -}}
{{- else -}}
{{- $setWidth = $maxWidth -}}
{{- if gt $original.Width 1820 -}}
{{- .Scratch.Set "image" ($original.Resize "1820x") -}}
{{- end -}}
{{- end -}}
{{- $image := .Scratch.Get "image" -}}
{{- $origRatio := (div (float $image.Height) $image.Width) -}}
{{- $displayWidth := $setWidth -}}
{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}
<p class="image">
<amp-img
alt="{{ .Get "alt" }}"
src="{{ $image.Permalink }}"
width="{{ $displayWidth }}"
height="{{ $displayHeight }}"
layout="intrinsic"
>
</amp-img>
</p>
{{- with (.Get "caption") }}<p class="caption"><em>{{ . }}</em></p>{{ end -}}

4
layouts/shortcodes/image.html
View File

@@ -7,7 +7,7 @@
{{- $maxWidth := 910 -}}
{{- $setWidth := 0 -}}
{{- if .Get "width" }}
{{- if .Get "width" -}}
{{- $setWidth = (int (.Get "width")) -}}
{{- $retinaWidth := (mul $setWidth 2) -}}
@@ -24,7 +24,7 @@
{{- $image := .Scratch.Get "image" -}}
{{- $origRatio := (div (float $image.Height) $image.Width) }}
{{- $origRatio := (div (float $image.Height) $image.Width) -}}
{{- $displayWidth := $setWidth -}}
{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}

9
layouts/shortcodes/tweet.amp.html Normal file
View File

@@ -0,0 +1,9 @@
<p class="center">
<amp-twitter
width="375"
height="472"
layout="responsive"
data-tweetid="{{ index .Params 0 }}"
>
</amp-twitter>
</p>

23
layouts/shortcodes/video.amp.html Normal file
View File

@@ -0,0 +1,23 @@
{{- $video_webm := .Page.Resources.GetMatch (.Get "webm") -}}
{{- $video_mp4 := .Page.Resources.GetMatch (.Get "mp4") -}}
{{- $video_ogg := .Page.Resources.GetMatch (.Get "ogg") -}}
{{- $img_poster := .Page.Resources.GetMatch (.Get "poster") -}}
<p class="video">
<amp-video
layout="responsive"
width="{{ if .Get "width" }}{{ .Get "width" }}{{ else }}910{{ end }}"
height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}600{{ end }}"
{{- if .Get "poster" }} poster="{{ $img_poster.Permalink }}"{{ end }}
{{- if .Get "autoplay" }} autoplay{{ end }}
{{- if .Get "loop" }} loop{{ end }}
{{- if ne (.Get "nocontrols") "1" }} controls{{ end }}>
{{ if .Get "webm" }}<source src="{{ $video_webm.Permalink }}" type="video/webm">{{ end }}
{{ if .Get "mp4" }}<source src="{{ $video_mp4.Permalink }}" type="video/mp4">{{ end }}
{{ if .Get "ogg" }}<source src="{{ $video_ogg.Permalink }}" type="video/ogg">{{ end }}
<div fallback>
Your browser does not support HTML5 video. <a href="{{ $video_mp4.Permalink }}">Load the .mp4 video directly.</a>
</div>
</amp-video>
</p>

8
layouts/shortcodes/youtube.amp.html Normal file
View File

@@ -0,0 +1,8 @@
<p class="center">
<amp-youtube
data-videoid="{{ index .Params 0 }}"
layout="responsive"
width="480"
height="270"
></amp-youtube>
</p>