mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-12-03 04:18:57 -05:00
enable AMP on more layouts/pages
This commit is contained in:
19
layouts/_default/etc.amp.html
Normal file
19
layouts/_default/etc.amp.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{{ partial "amp/head" . }}
|
||||
|
||||
<article class="layout layout-etc">
|
||||
{{ with .OutputFormats.Get "html" }}
|
||||
<div id="meta">
|
||||
<a href="{{ .Permalink }}" title="View Full Version">View Full Version</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .OutputFormats.Get "html" }}
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ $.Title | markdownify }}</a></h1>
|
||||
{{ end }}
|
||||
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{{ partial "amp/foot" . }}
|
||||
@@ -1,267 +1,17 @@
|
||||
<!doctype html>
|
||||
<html ⚡ lang="en">
|
||||
<head>
|
||||
{{ partial "functions/init" . }}
|
||||
<meta charset="utf-8">
|
||||
{{ hugo.Generator }}
|
||||
{{ if ne hugo.Environment "production" }}<meta name="robots" content="noindex, nofollow">{{ end }}
|
||||
<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>
|
||||
{{ if .HasShortcode "video" }}<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "youtube" }}<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "tweet" }}<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "facebook" }}<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "gist" }}<script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "instagram" }}<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>{{ end }}
|
||||
{{ if .HasShortcode "vimeo" }}<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>{{ end }}
|
||||
<title>{{ .Scratch.Get "plainTitle" }} – {{ .Site.Title }}</title>
|
||||
{{ with .OutputFormats.Get "html" }}<link rel="canonical" href="{{ .Permalink }}">{{ end }}
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
{{ with .Site.Author.name }}<meta name="author" content="{{ . }}">{{ end }}
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
|
||||
{{ partial "head/open-graph" . }}
|
||||
{{ partial "amp/head" . }}
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
|
||||
<article class="layout layout-single">
|
||||
<div id="meta">
|
||||
<span title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</span>{{ with .OutputFormats.Get "html" }}<span class="dash">—</span><a href="{{ .Permalink }}" title="View Full Version">View Full Version</a>{{ end }}
|
||||
</div>
|
||||
|
||||
<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: "Inter", sans-serif;
|
||||
font-kerning: normal;
|
||||
font-size: 0.92em;
|
||||
letter-spacing: -0.011em;
|
||||
background-color: #ffffff;
|
||||
color: #222222;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
a {
|
||||
color: #0e6dc2;
|
||||
text-decoration: none;
|
||||
}
|
||||
hr {
|
||||
margin: 1.25em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
strong {
|
||||
letter-spacing: 0.008em;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 5px solid #0e6dc2;
|
||||
margin-left: 0.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
article {
|
||||
max-width: {{ printf "%d%s" .Site.Params.Theme.maxWidth "px" }};
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
div#content {
|
||||
font-size: 1.025em;
|
||||
letter-spacing: -0.008em;
|
||||
}
|
||||
div#content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
h1.title {
|
||||
font-size: 2.1em;
|
||||
line-height: 1.3;
|
||||
margin-top: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
margin-left: -0.03em;
|
||||
}
|
||||
h1.title a {
|
||||
color: inherit;
|
||||
}
|
||||
div#meta {
|
||||
font-size: 0.925em;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 1.5em;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
div#meta a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
div#meta span.dash {
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
p.center, p.image, p.caption {
|
||||
text-align: center;
|
||||
}
|
||||
p.caption {
|
||||
margin-top: -1em;
|
||||
font-size: 0.95em;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
h2 {
|
||||
padding-bottom: 0.1em;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
}
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: #fcfcfc;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav {
|
||||
max-width: {{ printf "%d%s" .Site.Params.Theme.maxWidth "px" }};
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
nav a#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #515151;
|
||||
padding: 16px 0;
|
||||
}
|
||||
nav a#logo svg {
|
||||
height: 40px;
|
||||
width: 28px;
|
||||
}
|
||||
nav a#logo span {
|
||||
margin-left: 15px;
|
||||
font-size: 1.45em;
|
||||
font-weight: 500;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.75em;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
nav ul li {
|
||||
width: 65px;
|
||||
text-align: right;
|
||||
}
|
||||
footer {
|
||||
padding: 20px 15px;
|
||||
background-color: #fcfcfc;
|
||||
border-top: 1px solid #e3e3e3;
|
||||
color: #555;
|
||||
line-height: 1.8;
|
||||
}
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
footer div {
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
footer div.row {
|
||||
width: 100%;
|
||||
max-width: {{ printf "%d%s" .Site.Params.Theme.maxWidth "px" }};
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
div.left {
|
||||
text-align: left;
|
||||
}
|
||||
div.right {
|
||||
text-align: right;
|
||||
}
|
||||
div.highlight, code {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
letter-spacing: 0;
|
||||
page-break-inside: avoid;
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
p code {
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.1em 0.25em;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
div.highlight {
|
||||
border: 1px solid #dddddd;
|
||||
background-color: #fbfbfb;
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
object-fit: scale-down;
|
||||
margin: 1em 0;
|
||||
}
|
||||
div.highlight pre {
|
||||
display: block;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
div.highlight code {
|
||||
margin: 0;
|
||||
}
|
||||
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: #0e6dc2; }
|
||||
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: #337a15; }
|
||||
div.highlight span.err, div.highlight span.nt, div.highlight span.o, div.highlight span.ow, div.highlight span.kn { color: #d43d2e; }
|
||||
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: #7e3df3; }
|
||||
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: #bd5500; }
|
||||
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; }
|
||||
div.highlight span.lnt { color: #999999; user-select: none; }
|
||||
{{ with .OutputFormats.Get "html" }}
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ $.Title | markdownify }}</a></h1>
|
||||
{{ end }}
|
||||
|
||||
{{/* Page-specific styles set via front matter */}}
|
||||
{{- with .Params.css }}
|
||||
{{- replace . " !important" "" | safeCSS -}}
|
||||
{{ end -}}
|
||||
</style>
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32 48") }}
|
||||
{{ partialCached "head/feeds" . }}
|
||||
{{ partial "head/schema" . }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a id="logo" href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">
|
||||
{{ partial "functions/inline-svg" (dict "src" "img/logo.svg" "width" 30 "height" 45) }}
|
||||
<span id="name">{{ .Site.Title }}</span>
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="{{ .Site.BaseURL }}" title="Home">🏠</a></li>
|
||||
<li><a href="{{ "notes/" | absURL }}" title="Notes">📝</a></li>
|
||||
<li><a href="mailto:jake@jarv.is" title="Email Me">📬</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div id="meta">
|
||||
<span title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</span>{{ with .OutputFormats.Get "html" }}<span class="dash">—</span><a href="{{ .Permalink }}" title="View Full Version">View Full Version</a>{{ end }}
|
||||
</div>
|
||||
|
||||
{{ with .OutputFormats.Get "html" }}
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ $.Title | markdownify }}</a></h1>
|
||||
{{ end }}
|
||||
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<div class="row">
|
||||
<div class="left">Content by <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>, licensed under <a class="no-underline" href="{{ "license/" | absURL }}"{{ with .Site.Params.license.nameLong }} title="{{ . }}"{{ end }}>{{ .Site.Params.license.name }}</a>.</div>
|
||||
<div class="right"><a class="back-to-top" href="#top">↑ Back to top.</a></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{ if eq hugo.Environment "production" }}
|
||||
<!-- https://docs.simpleanalytics.com/without-javascript -->
|
||||
<amp-pixel src="{{ "api/send_view" | absURL }}?noscript=true&type=pageview&hostname=CANONICAL_HOSTNAME&path=CANONICAL_PATH&referrer=DOCUMENT_REFERRER&https=true&ua=USER_AGENT&width=VIEWPORT_WIDTH" layout="nodisplay"></amp-pixel>
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{{ partialCached "functions/debug" . }}
|
||||
{{ partial "amp/foot" . }}
|
||||
|
||||
28
layouts/_default/video.amp.html
Normal file
28
layouts/_default/video.amp.html
Normal file
@@ -0,0 +1,28 @@
|
||||
{{ partial "amp/head" . }}
|
||||
|
||||
<article class="layout layout-video">
|
||||
{{ with .OutputFormats.Get "html" }}
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ $.Title | markdownify }}</a></h1>
|
||||
{{ end }}
|
||||
|
||||
<amp-video
|
||||
layout="responsive"
|
||||
width="940"
|
||||
height="530"
|
||||
{{ with .Resources.GetMatch "thumb.*" }}poster="{{ .Permalink }}"{{ end }}
|
||||
controls>
|
||||
{{ with .Page.Resources.GetMatch "*.webm" }}<source src="{{ .Permalink }}" type="video/webm">{{ end }}
|
||||
{{ with .Page.Resources.GetMatch "*.mp4" }}<source src="{{ .Permalink }}" type="video/mp4">{{ end }}
|
||||
{{ with .Page.Resources.GetMatch "*.ogg" }}<source src="{{ .Permalink }}" type="video/ogg">{{ end }}
|
||||
|
||||
{{ with .Page.Resources.GetMatch "*.vtt" }}<track src="{{ .Permalink }}" kind="captions" label="English" srclang="en" default>{{ end }}
|
||||
|
||||
<div fallback>
|
||||
<p>Your browser does not support HTML5 video. {{ with .Page.Resources.GetMatch "*.mp4" }}<a href="{{ .Permalink }}">Load the .mp4 video directly.</a>{{ end }}</p>
|
||||
</div>
|
||||
</amp-video>
|
||||
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
{{ partial "amp/foot" . }}
|
||||
Reference in New Issue
Block a user