Fixed amp pages

2024-11-21 07:46:30 -05:00 · 2023-09-26 15:54:37 -04:00 · 2023-09-26 15:54:37 -04:00 · 1964f176d2
commit 1964f176d2
parent 37dbee8a2f
19 changed files with 637 additions and 17 deletions
--- a/layouts/_default/baseof.amp.html
+++ b/layouts/_default/baseof.amp.html
@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html amp lang="en">
+  {{ partial "head.amp.html" . }}
+  <body>
+    {{ block "main" . }}{{ end }}
+  </body>
+  {{ partial "footer.amp.html" . }}
+</html>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -4,4 +4,5 @@
  <body>
    {{ block "main" . }}{{ end }}
  </body>
+  {{ partial "footer.html" . }}
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -8,5 +8,4 @@
      {{ .Content }}
    </div>
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -8,5 +8,4 @@
    {{ .Content }}
  </div>
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/_default/stats.html
+++ b/layouts/_default/stats.html
@ -117,5 +117,4 @@
    </div>
  </article>
 </main>
-{{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -43,5 +43,4 @@
    {{ end }}
  </div>
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/blog/single.amp.html
+++ b/layouts/blog/single.amp.html
@ -0,0 +1,46 @@
+{{ define "main"}}
+{{ .Scratch.Set "customTitleHeaderSet" true }}
+{{ .Scratch.Set "customTitleHeader" "Blog" }}
+{{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
+{{ partial "header.html" . }}
+<main>
+  <article class="h-entry">
+    <h1 class='title p-name'>{{ .Title }}</h1>
+    <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
+    <div style="display: none;" rel="author" class="h-card p-author">
+      <img class="u-photo" src="{{ .Site.BaseURL }}img/avatar.jpg"/>
+      <span > {{ .Site.Params.Author }}</span>
+    </div>
+    {{ .Scratch.Set "beforeDateString" "Published on "}}
+    {{ partial "date.html" . }}
+    {{ partial "reading_time.html" . }}
+    {{ partial "tags/page.html" . }}
+    <!-- content -->
+    <div class="e-content">
+      {{ .Content }}
+    </div>
+  </article>
+  {{ partial "sharepost.html" . }}
+  <a href='mailto:{{ .Site.Params.email }}?subject=Re: "{{ .Title }}"' class="reply-button">Reply via Email</a>
+
+</main>
+<!-- Metadata -->
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "NewsArticle",
+    "headline": "{{ .Title }}",
+    "image": [
+      "{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}"
+     ],
+    "datePublished": "{{ .Date.Format "2006-01-02" }}",
+    "author": [{
+        "@type": "Person",
+        "name": "{{ .Site.Params.Author }}",
+        "url": "{{ .Site.BaseURL }}",
+        "email": "mailto://{{ .Site.Params.email }}",
+        "image": "{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}"
+      }]
+  }
+  </script>
+{{ end }}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -44,5 +44,4 @@
      }]
  }
  </script>
-{{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/feed/list.html
+++ b/layouts/feed/list.html
@ -20,5 +20,4 @@
      {{ end }}
    </div>
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/observations/list.html
+++ b/layouts/observations/list.html
@ -36,5 +36,4 @@
    {{ end }}
    {{ end }}
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/observations/single.html
+++ b/layouts/observations/single.html
@ -36,7 +36,4 @@
    </article>
    {{ end }}
 </main>
-
-
-{{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/paper/single.html
+++ b/layouts/paper/single.html
@ -65,5 +65,4 @@
    </div>
  </article>
 </main>
-{{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/partials/footer.amp.html
+++ b/layouts/partials/footer.amp.html
@ -0,0 +1,41 @@
+<footer>
+  <p>
+  &copy; {{ dateFormat "2006" now  }} {{ .Site.Params.Author }}.
+  Powered by <a href="https://gohugo.io/">Hugo</a>
+  using a modified version of the <a href="https://github.com/koirand/pulp/">pulp</a> theme.
+  </p>
+  <div class="footer-navs block-center">
+    <nav>
+      <p>Content Pages</p>
+      <ul id="footer-nav-sections">
+      {{ range .Site.Sections }}
+      {{ if not .Params.hidden }}
+        <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+      {{ end }}
+      {{ end }}
+      </ul>
+    </nav>
+
+    <nav>
+      <p>Social</p>
+      <ul>
+      {{ range .Site.Menus.profile }}
+        <li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Name }}</a></li>
+      {{ end }}
+      </ul>
+    </nav>
+
+    <nav>
+      <p>More Pages</p>
+      <ul>
+      {{ $sectionPages := where .Site.Pages "Section" "" }}
+        {{ range $sectionPages }}
+        {{ if and (not .Params.hidden) (ne .Permalink .Site.BaseURL)}}
+          <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+        {{ end }}
+      {{ end }}
+      </ul>
+    </nav>
+
+  </div>
+</footer>
--- a/layouts/partials/head.amp.html
+++ b/layouts/partials/head.amp.html
@ -0,0 +1,78 @@
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <title>
+    {{- if eq .Title .Site.Title -}}
+      {{ .Site.Title }}
+    {{- else -}}
+      {{ .Title }} | {{ .Site.Title }}
+    {{- end -}}
+  </title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="supported-color-schemes" content="light dark">
+  <meta name="author" content="{{ .Site.Params.Author }}">
+  <meta name="robots" content="index,follow">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="hub" href="https://pubsubhubbub.superfeedr.com/">
+  <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}{{ .Site.Params.favicon }}">
+  <link rel="pgpkey" href="https://keys.openpgp.org/pks/lookup?op=get&options=mr&search={{ .Site.Params.email }}">
+
+  <!-- Identities -->
+  {{- range .Site.Params.identities -}}
+    <link href="{{.}}" rel="me">
+  {{ end -}}
+
+  <!-- Webmentions -->
+  {{ $siteHost := (urls.Parse .Site.BaseURL).Host -}}
+  <link rel="webmention" href="https://webmention.io/{{ $siteHost }}/webmention">
+  <link rel="pingback" href="https://webmention.io/{{ $siteHost }}/xmlrpc">
+
+  <!-- RSS / Alternative Links -->
+  {{- if .IsHome -}}
+  <link rel="alternate" type="application/json" href="{{ .Site.BaseURL }}blog/index.json" title="Brandon Rozek's Blog">
+  <link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}blog/index.xml" title="Brandon Rozek's Blog">
+  <link rel="alternate" type="application/json" href="{{ .Site.BaseURL }}presentations/index.json" title="Brandon Rozek's Presentations}">
+  <link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}presentations/index.xml" title="Brandon Rozek's Presentations">
+  {{ else }}
+  {{ range .AlternativeOutputFormats -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+  {{ end }}
+  {{ end -}}
+
+  {{ partial "style.amp" .}}
+
+  <!-- CSS
+  {{- $style := resources.Get "css/style.css" -}}
+  {{- $markdown := resources.Get "css/markdown.css" -}}
+  {{- $syntaxHighlight := resources.Get "css/syntax-highlight.css" -}}
+  {{ $css := slice $style $markdown $syntaxHighlight | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
+  <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
+  
+  {{- $styleDark := resources.Get "css/style-dark.css" -}}
+  {{- $markdownDark := resources.Get "css/markdown-dark.css" -}}
+  {{ $cssDark := slice $styleDark $markdownDark | resources.Concat "css/style-dark.css" | resources.Minify | resources.Fingerprint }}
+  <link rel="stylesheet" href="{{ $cssDark.Permalink }}" media="(prefers-color-scheme: dark)" integrity="{{ $cssDark.Data.Integrity }}"> -->
+
+  {{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates */}}
+  {{- template "_internal/opengraph.html" . -}}
+  {{- template "_internal/schema.html" . -}}
+  {{- partial "external/twitter_cards.html" . -}}
+
+  {{ partial "citation.html" . }}
+
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@type": "Person",
+      "email": "mailto://{{ .Site.Params.email }}",
+      "image": "{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}",
+      "name": "{{ .Site.Params.Author }}",
+      "url": "{{ .Site.BaseURL }}"
+    }
+  </script>
+
+
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <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>
+</head>
--- a/layouts/partials/style.amp.html
+++ b/layouts/partials/style.amp.html
@ -0,0 +1,463 @@
+<style amp-custom>
+/*
+** General
+*/
+:root {
+    --bg-color: #efefef;
+    --acent-color: #5c3c2e;
+    --text-color: #313131;
+    --text-font: 'IBM Plex Mono', sans-serif;
+    --header-font: 'IBM Plex Mono', monospace;
+    --header-color: black;
+  }
+  
+  html, body {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: var(--bg-color);
+    /* background-image: url(/img/winter.png); */
+    background-color: #fafafa;
+    color: var(--text-color);
+    text-align: center;
+    font-family: var(--text-font);
+    font-weight: 300;
+    line-height: 1.5;
+    font-size: 16px;
+    word-wrap: break-word;
+  }
+  
+  a .fa, a .fas, a .fab {
+    color: var(--acent-color);
+  }
+  
+  a:link, a:visited, a:hover, a:active {
+    color: var(--text-color);
+  }
+  
+  mark {
+    color: var(--text-color);
+    font-weight: bold;
+  }
+  
+  strong {
+    font-weight: 700;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--header-font);
+    font-weight: 600;
+  }
+  
+  .block-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+  
+  
+  /*
+  ** HEADER
+  */
+  .avatarMask {
+    clip-path: circle(48px at center);
+    -webkit-clip-path: circle(48px at center);
+  }
+  
+  /* Topbar Header */
+  
+  .header-top {
+    padding: 0.25rem;
+    padding-left: 3rem;
+    border-bottom: 1px dashed var(--acent-color);
+    background-color: #fafafa;
+    font-size: 0.9rem;
+    color: var(--header-color);
+  }
+  
+  .header-top a { color: var(--header-color); }
+  
+  .header-flex {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    max-width: 62.5rem;
+  }
+  
+  .header-top .title { margin-right: 1rem; max-width: 25rem; }
+  
+  .header-top .h-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap-reverse;
+    width: 21.875rem;
+  }
+  
+  @media (max-width: 550px) {
+    .header-top {
+      padding-left: 1.25rem;
+    }
+    .header-top .title { margin-right: 0; }
+    .header-flex { flex-direction: column; }
+    .header-top .h-card {
+      flex-direction: column-reverse;
+      width: auto;
+    }
+  }
+  
+  /* END HEADER */
+  
+  /*
+  ** NAVIGATION
+  */
+  .nav-home ul {
+    /* max-width: 300px; */
+    margin: 1.25rem auto;
+    padding: 0;
+    list-style: none;
+  }
+  
+  .nav-home li {
+    margin: 0 0.625rem;
+  }
+  
+  /* END NAVIGATION */
+  
+  /*
+  ** SEARCH
+  */ 
+  
+  #searchBox {
+    position: relative;
+    height: 30px;
+    margin: 20px auto;
+  }
+  
+  #searchBox #searchBoxInput {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0 35px 0 15px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 15px;
+    outline: 0;
+    /* font-size: 15px; */
+    color: #707070;
+    background-color:#f6f6f6;
+    border: solid 1px #c9c9c9;
+    box-sizing: border-box;
+  }
+  
+  #searchBox #searchBoxInput::placeholder {
+    color: #c9c9c9;
+  }
+  
+  #searchBox #searchBoxIcon {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    top: 5px;
+    right: 10px;
+  }
+  
+  #searchResults {
+    display: none;
+    position: absolute;
+    max-width: 1000px;
+    /* min-width: 300px; */
+    margin: 0 auto;
+    top: 230px;
+    left: 0;
+    right: 0;
+    padding: 5px;
+    background-color:#f6f6f6;
+    border: solid 1px #c9c9c9;
+    border-radius: 5px;
+    text-align: left;
+    box-sizing: border-box;
+  }
+  
+  #searchResults .searchResultPage {
+    padding: 20px
+  }
+  
+  #searchResults .searchResultTitle {
+    font-weight: bold;
+    margin: 5px 0;
+  }
+  
+  #searchResults .searchResultBody {
+    font-size: 14px;
+  }
+  
+  #searchResults mark {
+    background-color: #dddfdf;
+  }
+  
+  /* END SEARCH */
+  
+  /*
+  ** TAGS
+  */
+  .tags {
+    text-align: left;
+  }
+  .tags ul {
+    margin: 0 auto;
+    display: flex;
+    padding: 0;
+    flex-wrap: wrap;
+    list-style: none;
+  }
+  
+  .tags-page ul {
+    justify-content: center;
+  }
+  
+  .tags li a {
+    display: block;
+    height: 24px;
+    margin: 5px;
+    padding: 0 5px;
+    padding-bottom: 5px;
+    border-radius: 5px;
+    font-size: 1.25rem;
+    border: 1px solid #888a8a;
+    text-decoration: none;
+  }
+  
+  .tags li a:hover {
+    border: 1px solid black;
+  }
+  
+  /* END TAGS */
+  
+  /*
+  ** BLOG LIST PAGE
+  */
+  
+  .bloglist-teaser {
+    font-size: 1.75rem;
+    max-width: 40.625rem;
+    text-align: left;
+  }
+  
+  .bloglist-date {
+    font-size: 1.75rem;
+    font-weight: 600;
+    color: var(--acent-color);
+  }
+  
+  .bloglist {
+    text-align: left;
+    font-size: 1.5rem;
+    padding: 20px 0;
+  }
+  
+  .bloglist-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .bloglist-item p {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  
+  .bloglist-item-tag a {
+    color: gray;
+    text-decoration: none;
+    font-size: 0.75em;
+  }
+  
+  .bloglist-item-tag a:hover {
+    color: #555;
+  }
+  
+  @media (max-width: 850px) {
+    .bloglist-item-tag {
+      display: none;
+    }
+  }
+  
+  .bloglist hr.separator {
+    width: 10px;
+    margin: 30px auto;
+    border: solid 2 px #c9c9c9;
+  }
+  
+  /*
+  ** FEED LIST PAGE
+  */
+  #feedList {
+    text-align: left;
+    max-width: 1000px;
+  }
+  
+  #feedList h2 {
+    margin-bottom: 0.25rem;
+  }
+  
+  #feedList .date {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-bottom: 1px solid #c9c9c9;
+  }
+  
+  /*
+  ** STANDARD PAGE
+  */
+  main {
+    font-size: 1.25em;
+    padding: 20px 10px;
+    max-width: 1000px;
+    margin: 0 auto;
+    min-height: calc(100vh - 250px);
+  }
+  
+  article {
+    padding-bottom: 2rem;
+  }
+  
+  main .e-content {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    text-align: left;
+  }
+  
+  .e-content a:hover {
+    background-color: var(--acent-color);
+    /* box-shadow: inset 1000px 0 0 0 var(--acent-color); */
+    color: white;
+  }
+  
+  main .e-content h2 {
+    padding-bottom: .3em;
+    /* font-size: 1.5em; */
+    border-bottom: 1px solid var(--acent-color);
+    color: var(--acent-color);
+  }
+  
+  /*
+  ** Home Page
+  */
+  .main-home {
+    min-height: calc(100vh - 100px);
+    /* max-width: 600px; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .main-home .h-card {
+    max-width: 600px;
+  }
+  
+  .main-home .h-card .avatar {
+    height: 250px;
+  }
+  
+  .main-home .h-card .avatarMask {
+    clip-path: circle(120px at center);
+    -webkit-clip-path: circle(120px at center);
+  }
+  
+  /* END HOME PAGE */
+  
+  /*
+  ** Footer
+  */
+  
+  footer {
+    padding-top: 0.5rem;
+    background-color: #363636;
+    color: #ededed;
+    min-height: 100%;
+    font-size: 1rem;
+    box-sizing:border-box;
+  }
+  footer a:link, footer a:visited, footer a:hover, footer a:active {
+    color: white;
+  }
+  
+  .footer-navs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 62.5rem;
+    padding: 1rem;
+    text-align: left;
+  }
+  
+  /* END FOOTER */
+  
+  /*
+  ** MASTODON TOOTS
+  */
+  .toot {
+    margin-bottom: 2rem;
+    padding: 1rem;
+    border: 1px solid #656565;
+    border-radius: 10px;
+  }
+  .toot .date {
+    vertical-align: top;
+    margin-bottom: 0;
+  }
+  .toot-avatar { display: inline-block; }
+  .toot img { border: 2px solid black; }
+  
+  .toot .date {
+    display: inline-block;
+  }
+  
+  main .e-content .toot-photos img {
+    width: 100%;
+    max-width: 18.75rem;
+  }
+  .toot-social { margin-top: 1rem; }
+  
+  /* END TOOTS */
+  
+  /*
+  ** EXTRA
+  */
+  #webmentions img { max-height: 1.2rem; margin-right: -1ex; }
+  
+  .date-updated { margin-top: -18px; }
+  
+  .pgpform {
+    width: 100%; 
+    min-height: 10rem;
+    font-size: 1rem;
+  }
+  
+  .pgpbutton {
+    font-size: 1rem;
+  }
+  
+  .reply-button {
+    border: 1px solid var(--text-color); 
+    padding: 5px; 
+    border-radius: 0.5rem;
+    box-shadow: 5px 5px var(--acent-color);
+  }
+  
+  .reply-button:hover {
+    box-shadow: 2px 2px var(--acent-color);
+  }
+</style>
--- a/layouts/toots/list.html
+++ b/layouts/toots/list.html
@ -25,5 +25,4 @@
    {{ end }}
    {{ end }}
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/toots/single.html
+++ b/layouts/toots/single.html
@ -20,7 +20,4 @@
  {{ .Scratch.Set "toot" $dataJ }}
  {{ partial "external/toot.html" . }}
 </main>
-
-
-{{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/tracks/list.html
+++ b/layouts/tracks/list.html
@ -16,5 +16,4 @@
      {{ end }}
    </div>
  </main>
-  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/tracks/single.html
+++ b/layouts/tracks/single.html
@ -24,5 +24,4 @@
  </article>
  {{ partial "webmentions.html" . }}
 </main>
-{{ partial "footer.html" . }}
 {{ end }}