Refactored template code

This commit is contained in:
Brandon Rozek 2022-05-08 18:02:35 -04:00
parent b28e531f9f
commit c3e09727a6
20 changed files with 332 additions and 395 deletions

View file

@ -1,21 +1,21 @@
#contentBody img {
main .e-content img {
box-shadow: none;
}
#contentBody hr {
main .e-content hr {
border-bottom: 1px solid #201d1a;
}
#contentBody hr {
main .e-content hr {
background-color: #1e1b17;
}
#contentBody blockquote {
main .e-content blockquote {
color: #958c82;
border-left: 0.25em solid #201d1a;
}
#contentBody kbd {
main .e-content kbd {
color: #bbb2a9;
background-color: #050403;
border: solid 1px #39342e;
@ -23,56 +23,56 @@
box-shadow: none;
}
#contentBody h1 .octicon-link,
#contentBody h2 .octicon-link,
#contentBody h3 .octicon-link,
#contentBody h4 .octicon-link,
#contentBody h5 .octicon-link,
#contentBody h6 .octicon-link {
main .e-content h1 .octicon-link,
main .e-content h2 .octicon-link,
main .e-content h3 .octicon-link,
main .e-content h4 .octicon-link,
main .e-content h5 .octicon-link,
main .e-content h6 .octicon-link {
color: #e4e0dc;
}
#contentBody h1 {
main .e-content h1 {
border-bottom: 1px solid #363636;
}
#contentBody h2 {
main .e-content h2 {
border-bottom: 1px solid #363636;
}
#contentBody h6 {
main .e-content h6 {
font-size: 0.85em;
color: #958c82;
}
#contentBody table th,
#contentBody table td {
main .e-content table th,
main .e-content table td {
padding: 6px 13px;
border: 1px solid #363636;
background-color: #090909;
}
#contentBody img {
main .e-content img {
background-color: #090909;
}
#contentBody code {
main .e-content code {
background-color: #090909;
}
#contentBody .highlight pre,
#contentBody pre {
main .e-content .highlight pre,
main .e-content pre {
background-color: #090909;
}
#contentBody .full-commit .btn-outline:not(:disabled):hover {
main .e-content .full-commit .btn-outline:not(:disabled):hover {
color: #005cc5;
border-color: #005cc5;
}
#contentBody kbd {
main .e-content kbd {
color: #bbb2a9;
background-color: #050403;
border: solid 1px #2e2a25;
@ -80,10 +80,10 @@
box-shadow: none;
}
#contentBody :checked+.radio-label {
main .e-content :checked+.radio-label {
border-color: #0366d6;
}
#contentBody hr {
main .e-content hr {
border-bottom-color: #111;
}

View file

@ -1,82 +1,82 @@
#contentBody a {
main .e-content a {
background-color: transparent;
}
#contentBody a:active,
#contentBody a:hover {
main .e-content a:active,
main .e-content a:hover {
outline-width: 0;
}
#contentBody strong {
main .e-content strong {
font-weight: inherit;
}
#contentBody strong {
main .e-content strong {
font-weight: bolder;
}
#contentBody h1 {
main .e-content h1 {
font-size: 2em;
margin: 0.67em 0;
}
#contentBody img {
main .e-content img {
border-style: none;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}
#contentBody code,
#contentBody kbd,
#contentBody pre {
main .e-content code,
main .e-content kbd,
main .e-content pre {
font-family: monospace, monospace;
font-size: 1em;
}
#contentBody hr {
main .e-content hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
#contentBody input {
main .e-content input {
font: inherit;
margin: 0;
}
#contentBody input {
main .e-content input {
overflow: visible;
}
#contentBody [type="checkbox"] {
main .e-content [type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
#contentBody * {
main .e-content * {
box-sizing: border-box;
}
#contentBody input {
main .e-content input {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
#contentBody a {
main .e-content a {
/* color: #0366d6; */
/* text-decoration: none; */
text-decoration: underline;
}
#contentBody a:hover {
main .e-content a:hover {
text-decoration: underline;
}
#contentBody strong {
main .e-content strong {
font-weight: 600;
}
#contentBody hr {
main .e-content hr {
height: 0;
margin: 15px 0;
overflow: hidden;
@ -85,190 +85,190 @@
border-bottom: 1px solid #dfe2e5;
}
#contentBody hr::before {
main .e-content hr::before {
display: table;
content: "";
}
#contentBody hr::after {
main .e-content hr::after {
display: table;
clear: both;
content: "";
}
#contentBody table {
main .e-content table {
border-spacing: 0;
border-collapse: collapse;
}
#contentBody td,
#contentBody th {
main .e-content td,
main .e-content th {
padding: 0;
}
#contentBody h1,
#contentBody h2,
#contentBody h3,
#contentBody h4,
#contentBody h5,
#contentBody h6 {
main .e-content h1,
main .e-content h2,
main .e-content h3,
main .e-content h4,
main .e-content h5,
main .e-content h6 {
margin-top: 0;
margin-bottom: 0;
}
#contentBody h1 {
main .e-content h1 {
font-size: 32px;
font-weight: 600;
}
#contentBody h2 {
main .e-content h2 {
font-size: 24px;
font-weight: 600;
}
#contentBody h3 {
main .e-content h3 {
font-size: 20px;
font-weight: 600;
}
#contentBody h4 {
main .e-content h4 {
font-size: 16px;
font-weight: 600;
}
#contentBody h5 {
main .e-content h5 {
font-size: 14px;
font-weight: 600;
}
#contentBody h6 {
main .e-content h6 {
font-size: 12px;
font-weight: 600;
}
#contentBody p {
main .e-content p {
margin-top: 0;
margin-bottom: 10px;
}
#contentBody blockquote {
main .e-content blockquote {
margin: 0;
}
#contentBody ul,
#contentBody ol {
main .e-content ul,
main .e-content ol {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
#contentBody ol ol,
#contentBody ul ol {
main .e-content ol ol,
main .e-content ul ol {
list-style-type: lower-roman;
}
#contentBody ul ul ol,
#contentBody ul ol ol,
#contentBody ol ul ol,
#contentBody ol ol ol {
main .e-content ul ul ol,
main .e-content ul ol ol,
main .e-content ol ul ol,
main .e-content ol ol ol {
list-style-type: lower-alpha;
}
#contentBody dd {
main .e-content dd {
margin-left: 0;
}
#contentBody code {
main .e-content code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
}
#contentBody pre {
main .e-content pre {
margin-top: 0;
margin-bottom: 0;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
}
#contentBody .octicon {
main .e-content .octicon {
vertical-align: text-bottom;
}
#contentBody .pl-0 {
main .e-content .pl-0 {
padding-left: 0 !important;
}
#contentBody .pl-1 {
main .e-content .pl-1 {
padding-left: 4px !important;
}
#contentBody .pl-2 {
main .e-content .pl-2 {
padding-left: 8px !important;
}
#contentBody .pl-3 {
main .e-content .pl-3 {
padding-left: 16px !important;
}
#contentBody .pl-4 {
main .e-content .pl-4 {
padding-left: 24px !important;
}
#contentBody .pl-5 {
main .e-content .pl-5 {
padding-left: 32px !important;
}
#contentBody .pl-6 {
main .e-content .pl-6 {
padding-left: 40px !important;
}
#contentBody::before {
main .e-content::before {
display: table;
content: "";
}
#contentBody::after {
main .e-content::after {
display: table;
clear: both;
content: "";
}
#contentBody>*:first-child {
main .e-content>*:first-child {
margin-top: 0 !important;
}
#contentBody>*:last-child {
main .e-content>*:last-child {
margin-bottom: 0 !important;
}
#contentBody a:not([href]) {
main .e-content a:not([href]) {
color: inherit;
text-decoration: none;
}
#contentBody .anchor {
main .e-content .anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
}
#contentBody .anchor:focus {
main .e-content .anchor:focus {
outline: none;
}
#contentBody p,
#contentBody blockquote,
#contentBody ul,
#contentBody ol,
#contentBody dl,
#contentBody table,
#contentBody pre {
main .e-content p,
main .e-content blockquote,
main .e-content ul,
main .e-content ol,
main .e-content dl,
main .e-content table,
main .e-content pre {
margin-top: 0;
margin-bottom: 16px;
}
#contentBody hr {
main .e-content hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
@ -276,21 +276,21 @@
border: 0;
}
#contentBody blockquote {
main .e-content blockquote {
padding: 0 1em;
color: #6a737d;
border-left: 0.25em solid #dfe2e5;
}
#contentBody blockquote>:first-child {
main .e-content blockquote>:first-child {
margin-top: 0;
}
#contentBody blockquote>:last-child {
main .e-content blockquote>:last-child {
margin-bottom: 0;
}
#contentBody kbd {
main .e-content kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
@ -304,106 +304,106 @@
box-shadow: inset 0 -1px 0 #959da5;
}
#contentBody h1,
#contentBody h2,
#contentBody h3,
#contentBody h4,
#contentBody h5,
#contentBody h6 {
main .e-content h1,
main .e-content h2,
main .e-content h3,
main .e-content h4,
main .e-content h5,
main .e-content h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
#contentBody h1 .octicon-link,
#contentBody h2 .octicon-link,
#contentBody h3 .octicon-link,
#contentBody h4 .octicon-link,
#contentBody h5 .octicon-link,
#contentBody h6 .octicon-link {
main .e-content h1 .octicon-link,
main .e-content h2 .octicon-link,
main .e-content h3 .octicon-link,
main .e-content h4 .octicon-link,
main .e-content h5 .octicon-link,
main .e-content h6 .octicon-link {
color: #1b1f23;
vertical-align: middle;
visibility: hidden;
}
#contentBody h1:hover .anchor,
#contentBody h2:hover .anchor,
#contentBody h3:hover .anchor,
#contentBody h4:hover .anchor,
#contentBody h5:hover .anchor,
#contentBody h6:hover .anchor {
main .e-content h1:hover .anchor,
main .e-content h2:hover .anchor,
main .e-content h3:hover .anchor,
main .e-content h4:hover .anchor,
main .e-content h5:hover .anchor,
main .e-content h6:hover .anchor {
text-decoration: none;
}
#contentBody h1:hover .anchor .octicon-link,
#contentBody h2:hover .anchor .octicon-link,
#contentBody h3:hover .anchor .octicon-link,
#contentBody h4:hover .anchor .octicon-link,
#contentBody h5:hover .anchor .octicon-link,
#contentBody h6:hover .anchor .octicon-link {
main .e-content h1:hover .anchor .octicon-link,
main .e-content h2:hover .anchor .octicon-link,
main .e-content h3:hover .anchor .octicon-link,
main .e-content h4:hover .anchor .octicon-link,
main .e-content h5:hover .anchor .octicon-link,
main .e-content h6:hover .anchor .octicon-link {
visibility: visible;
}
#contentBody h1 {
main .e-content h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid #c9c9c9;
}
#contentBody h2 {
main .e-content h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid #c9c9c9;
}
#contentBody h3 {
main .e-content h3 {
font-size: 1.25em;
}
#contentBody h4 {
main .e-content h4 {
font-size: 1em;
}
#contentBody h5 {
main .e-content h5 {
font-size: 0.875em;
}
#contentBody h6 {
main .e-content h6 {
font-size: 0.85em;
color: #6a737d;
}
#contentBody ul,
#contentBody ol {
main .e-content ul,
main .e-content ol {
padding-left: 2em;
}
#contentBody ul ul,
#contentBody ul ol,
#contentBody ol ol,
#contentBody ol ul {
main .e-content ul ul,
main .e-content ul ol,
main .e-content ol ol,
main .e-content ol ul {
margin-top: 0;
margin-bottom: 0;
}
#contentBody li {
main .e-content li {
word-wrap: break-all;
}
#contentBody li>p {
main .e-content li>p {
margin-top: 16px;
}
#contentBody li+li {
main .e-content li+li {
margin-top: 0.25em;
}
#contentBody dl {
main .e-content dl {
padding: 0;
}
#contentBody dl dt {
main .e-content dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
@ -411,43 +411,43 @@
font-weight: 600;
}
#contentBody dl dd {
main .e-content dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
#contentBody table {
main .e-content table {
display: block;
width: 100%;
overflow: auto;
}
#contentBody table th {
main .e-content table th {
font-weight: 600;
}
#contentBody table th,
#contentBody table td {
main .e-content table th,
main .e-content table td {
padding: 6px 13px;
border: 1px solid #c9c9c9;
background-color: #f6f6f6;
}
#contentBody img {
main .e-content img {
max-width: 100%;
box-sizing: content-box;
background-color: #f6f6f6;
}
#contentBody img[align=right] {
main .e-content img[align=right] {
padding-left: 20px;
}
#contentBody img[align=left] {
main .e-content img[align=left] {
padding-right: 20px;
}
#contentBody code {
main .e-content code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
@ -455,11 +455,11 @@
border-radius: 3px;
}
#contentBody pre {
main .e-content pre {
word-wrap: normal;
}
#contentBody pre>code {
main .e-content pre>code {
padding: 0;
margin: 0;
font-size: 100%;
@ -469,17 +469,17 @@
border: 0;
}
#contentBody .highlight {
main .e-content .highlight {
margin-bottom: 16px;
}
#contentBody .highlight pre {
main .e-content .highlight pre {
margin-bottom: 0;
word-break: normal;
}
#contentBody .highlight pre,
#contentBody pre {
main .e-content .highlight pre,
main .e-content pre {
padding: 16px;
overflow: auto;
font-size: 85%;
@ -487,7 +487,7 @@
background-color: #f6f6f6;
}
#contentBody pre code {
main .e-content pre code {
display: inline;
max-width: auto;
padding: 0;
@ -499,12 +499,12 @@
border: 0;
}
#contentBody .full-commit .btn-outline:not(:disabled):hover {
main .e-content .full-commit .btn-outline:not(:disabled):hover {
color: #005cc5;
border-color: #005cc5;
}
#contentBody kbd {
main .e-content kbd {
display: inline-block;
padding: 3px 5px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@ -518,25 +518,25 @@
box-shadow: inset 0 -1px 0 #c6cbd1;
}
#contentBody :checked+.radio-label {
main .e-content :checked+.radio-label {
position: relative;
z-index: 1;
border-color: #0366d6;
}
#contentBody .task-list-item {
main .e-content .task-list-item {
list-style-type: none;
}
#contentBody .task-list-item+.task-list-item {
main .e-content .task-list-item+.task-list-item {
margin-top: 3px;
}
#contentBody .task-list-item input {
main .e-content .task-list-item input {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
#contentBody hr {
main .e-content hr {
border-bottom-color: #eee;
}

View file

@ -97,6 +97,8 @@ a:active {
main {
padding: 20px 10px;
max-width: 800px;
margin: 0 auto;
}
mark {
@ -245,13 +247,16 @@ mark {
}
/* Page */
#contentBody {
max-width: 800px;
margin: 0 auto;
/* padding: 20px 10px; */
main .e-content {
text-align: left;
}
main .e-content h2 {
padding-bottom: .3em;
font-size: 1.5em;
border-bottom: 1px solid #c9c9c9;
}
/*
** Home Page

View file

@ -1,10 +1,12 @@
{{ define "main"}}
{{ define "main" }}
{{ partial "header.html" . }}
<!-- content -->
<main>
<div id="contentBody">
{{ .Content }}
</div>
<main class="h-entry">
{{ .Scratch.Set "beforeDateString" "Published on "}}
{{ partial "date.html" . }}
<div class="e-content">
{{ .Content }}
</div>
</main>
{{ partial "footer.html" . }}
{{ end }}

View file

@ -3,6 +3,7 @@
"ref": "{{ $page.Permalink }}",
"title": {{ $page.Title | jsonify }},
"section": "{{ $page.Section }}",
"tags": {{ $page.Params.tags | jsonify }},
"date" : {{ $page.Date.Format "2006.01.02" | jsonify }},
"body": {{ $page.Plain | jsonify }}
}

View file

@ -1,24 +1,10 @@
{{ define "main"}}
{{ partial "header.html" . }}
<main>
{{ if not .Date.IsZero }}
<!-- date -->
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
<p class="date">{{ .Date.Format $singlePageDateFormat }}</p>
{{ end }}
<!-- tags -->
<div id="tags">
<ul>
{{ range .Param "tags" }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
<li><a href="{{ .Permalink }}">{{ $name }}</a></li>
{{ end }}
{{ end }}
</ul>
</div>
{{ partial "date.html" . }}
{{ partial "tags_list_page.html" . }}
<!-- content -->
<div id="contentBody">
<div class="e-content">
{{ .Content }}
</div>
</main>

View file

@ -1,7 +0,0 @@
<!DOCTYPE html>
<html>
{{ partial "head.html" . }}
<body>
{{ block "main" . }}{{ end }}
</body>
</html>

View file

@ -1,42 +1,21 @@
{{ define "main"}}
{{ partial "header.html" . }}
<main>
<!-- search box -->
<div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." />
<img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
</div>
<!-- search results -->
<div id="searchResults"></div>
<!-- tags -->
<div id="tags">
<ul>
{{ range .Site.Taxonomies.tags.ByCount }}
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
{{ end }}
</ul>
</div>
{{ partial "search.html" . }}
{{ partial "tags_list_all.html" . }}
<!-- contents -->
<div id="contentsList">
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
{{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
{{ if (ne $index 0) }}
<hr class="separator">
{{ end }}
<p class="date">{{ .Key }}</p>
{{ range .Pages }}
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
{{ end }}
{{ if (ne $index 0) }}
<hr class="separator">
{{ end }}
<p class="date">{{ .Key }}</p>
{{ range .Pages }}
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
{{ end }}
{{ end }}
</div>
</main>
{{ partial "footer.html" . }}
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
{{ $lunr := resources.Get "js/lunr.js" }}
{{ $search := resources.Get "js/search.js" }}
<script src="{{ $jquery.Permalink }}"></script>
<script src="{{ $mark.Permalink }}"></script>
<script src="{{ $lunr.Permalink }}"></script>
<script src="{{ $search.Permalink }}"></script>
{{ end }}

View file

@ -1,10 +0,0 @@
[{{ range $index, $page := .Pages }}{{ if ne $index 0 }},{{ end }}
{
"ref": "{{ $page.Permalink }}",
"title": {{ $page.Title | jsonify }},
"section": "{{ $page.Section }}",
"tags": {{ $page.Params.tags | jsonify }},
"date" : {{ $page.Date.Format "2006.01.02" | jsonify }},
"body": {{ $page.Plain | jsonify }}
}
{{ end }}]

View file

@ -1,76 +1,41 @@
{{ define "main"}}
{{ .Scratch.Set "customTitleHeaderSet" true }}
{{ .Scratch.Set "customTitleHeader" "Blog" }}
{{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
{{ partial "header.html" . }}
<main>
<article class="h-entry">
{{ .Scratch.Set "customTitleHeaderSet" true }}
{{ .Scratch.Set "customTitleHeader" "Blog" }}
{{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
{{ partial "header.html" . }}
<main>
<h1 class='title'>{{ .Title }}</h1>
<a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
<!-- date -->
{{ if not .Date.IsZero }}
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
{{ $pubdate := .Date.Format $singlePageDateFormat }}
<p class="date">Published on <time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ $pubdate }}</time></p>
{{- if .Lastmod }}
{{- $lastmod := .Lastmod.Format $singlePageDateFormat }}
{{- if ne $lastmod $pubdate }}
<p class="date-updated">Updated on <time class='dt-updated' datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ $lastmod }}</time></p>
{{- end }}
{{ end }}
{{ end }}
{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
{{ if gt $readTime 60 }}
<p>
Reading Time:
{{ math.Ceil (div $readTime 60) }} minutes.
</p>
{{ end }}
<!-- tags -->
<div id="tags">
<ul>
{{ range .Param "tags" }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
<li><a class="p-category" href="{{ .Permalink }}">{{ $name }}</a></li>
{{ end }}
{{ end }}
</ul>
</div>
<!-- content -->
<div id="contentBody" class="e-content">
{{ .Content }}
</div>
<h1 class='title'>{{ .Title }}</h1>
<a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
{{ .Scratch.Set "beforeDateString" "Published on "}}
{{ partial "date.html" . }}
{{ partial "reading_time.html" . }}
{{ partial "tags_list_page.html" . }}
<!-- content -->
<div class="e-content">
{{ .Content }}
</div>
</article>
<!-- Webmentions -->
<div id="webmentions"></div>
<form method="post" action="https://webmention.io/brandonrozek.com/webmention">
<p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
<input type="url" name="source" id="webmention-source">
<input type="hidden" name="target" value="{{ .Permalink }}">
<button type="submit">Ping!</button>
</form>
</main>
{{ $webmentionjs := resources.Get "js/webmention.min.js" }}
<script src="{{ $webmentionjs.Permalink }}" async></script>
<!-- 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>
{{ partial "footer.html" . }}
{{ partial "webmentions.html" . }}
</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>
{{ partial "footer.html" . }}
{{ end }}

View file

@ -1,41 +1,24 @@
{{ define "main"}}
{{ partial "header.html" . }}
<main>
<!-- search box -->
<div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." />
<img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
</div>
<!-- search results -->
<div id="searchResults"></div>
<!-- contents -->
<div id="feedList">
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
{{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
{{ range .Pages }}
<article class="h-entry">
<h2 class='title p-name'>{{ .Title }}</h2>
<!-- date -->
{{ if not .Date.IsZero }}
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
<p class="date"><time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ .Date.Format $singlePageDateFormat }}</time></p>
{{ partial "search.html" . }}
<!-- contents -->
<div id="feedList">
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
{{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
{{ range .Pages }}
<article class="h-entry">
<h2 class='title p-name'>{{ .Title }}</h2>
{{ .Scratch.Set "noDateUpdate" true }}
{{ partial "date.html" . }}
<a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
{{ end }}
<div id="contentBody" class="e-content">
{{ .Content }}
</div>
</article>
{{ end }}
{{ end }}
</div>
<div class="e-content">
{{ .Content }}
</div>
</article>
{{ end }}
{{ end }}
</div>
</main>
{{ partial "footer.html" . }}
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
{{ $lunr := resources.Get "js/lunr.js" }}
{{ $search := resources.Get "js/search.js" }}
<script src="{{ $jquery.Permalink }}"></script>
<script src="{{ $mark.Permalink }}"></script>
<script src="{{ $lunr.Permalink }}"></script>
<script src="{{ $search.Permalink }}"></script>
{{ end }}

View file

@ -0,0 +1,14 @@
{{ if not .Date.IsZero }}
{{ $publishString := .Scratch.Get "beforeDateString" }}
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
{{ $pubdate := .Date.Format $singlePageDateFormat }}
<p class="date">{{ $publishString }}<time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ $pubdate }}</time></p>
{{- if and (not (.Scratch.Get "noDateUpdate")) .Lastmod }}
{{- $lastmod := .Lastmod.Format $singlePageDateFormat }}
{{- if ne $lastmod $pubdate }}
<p class="date-updated">Updated on <time class='dt-updated' datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ $lastmod }}</time></p>
{{- end }}
{{ end }}
{{ end }}

View file

@ -0,0 +1,8 @@
<!-- Reading Time -->
{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
{{ if gt $readTime 60 }}
<p>
Reading Time:
{{ math.Ceil (div $readTime 60) }} minutes.
</p>
{{ end }}

View file

@ -0,0 +1,16 @@
<!-- search box -->
<div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." />
<img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
</div>
<!-- search results -->
<div id="searchResults"></div>
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
{{ $lunr := resources.Get "js/lunr.js" }}
{{ $search := resources.Get "js/search.js" }}
<script src="{{ $jquery.Permalink }}"></script>
<script src="{{ $mark.Permalink }}"></script>
<script src="{{ $lunr.Permalink }}"></script>
<script src="{{ $search.Permalink }}"></script>

View file

@ -1,7 +1,3 @@
{{ define "main"}}
{{ partial "header.html" }}
<h1>{{ .Title }}</h1>
<main>
<!-- tags -->
<div id="tags">
<ul>
@ -10,6 +6,3 @@
{{ end }}
</ul>
</div>
</main>
{{ partial "footer.html" . }}
{{ end }}

View file

@ -0,0 +1,11 @@
<!-- List the tags that apply to this page -->
<div id="tags">
<ul>
{{ range .Param "tags" }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
<li><a href="{{ .Permalink }}">{{ $name }}</a></li>
{{ end }}
{{ end }}
</ul>
</div>

View file

@ -0,0 +1,11 @@
<!-- Webmentions -->
<div id="webmentions"></div>
<form method="post" action="https://webmention.io/brandonrozek.com/webmention">
<p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
<input type="url" name="source" id="webmention-source">
<input type="hidden" name="target" value="{{ .Permalink }}">
<button type="submit">Ping!</button>
</form>
</main>
{{ $webmentionjs := resources.Get "js/webmention.min.js" }}
<script src="{{ $webmentionjs.Permalink }}" async></script>

View file

@ -4,34 +4,38 @@
<style>
.toot {
margin-bottom: 2rem;
padding: 15px;
border: 1px solid #656565;
border-radius: 10px;
}
.toot .date {
vertical-align: top;
margin-bottom: 0;
}
.toot .e-content img {
display: inline-block;
border: 2px solid black;
}
.toot .e-content p:first-of-type {
display: inline-block;
}
</style>
{{ range sort $dataJ "created_at" "desc" }}
{{ if ne .content "" }}
<article class="toot h-entry">
<div>
<div class="e-content">
<img width=50 src="{{ .account.avatar }}"/>
<p class="date">Published on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p>
{{ .content | safeHTML }}
</div>
</div>
<div class=".toot-social">
<span><i class='fas fa-share'></i> {{ .replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .favourites_count }} </span>
<span>| Source: <a href="{{ .url }}">{{ .url }}</a></span>
</div>
<div class=".toot-social">
<span><i class='fas fa-share'></i> {{ .replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .favourites_count }} </span>
<span>| Source: <a href="{{ .url }}">{{ .url }}</a></span>
</div>
</article>
{{ end }}
{{ end }}

View file

@ -1,20 +1,8 @@
{{ define "main"}}
{{ partial "header.html" . }}
<!-- search box -->
<div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." />
<img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
</div>
<!-- search results -->
<div id="searchResults"></div>
<!-- tags -->
<div id="tags">
<ul>
{{ range .Site.Taxonomies.tags.ByCount }}
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
{{ end }}
</ul>
</div>
<main>
{{ partial "search.html" . }}
{{ partial "tags_list_all.html" . }}
<!-- contents -->
<div id="contentsList">
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
@ -28,11 +16,5 @@
{{ end }}
{{ end }}
</div>
{{ partial "footer.html" . }}
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
{{ $lunr := resources.Get "js/lunr.js" }}
{{ $search := resources.Get "js/search.js" }}
{{ $js := slice $jquery $mark $lunr $search | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $js.Permalink }}"></script>
</main>
{{ end }}

View file

@ -1,13 +1,7 @@
{{ define "main"}}
<h1>{{ .Title }}</h1>
{{ partial "header.html" . }}
<!-- tags -->
<div id="tags">
<ul>
{{ range .Site.Taxonomies.tags.ByCount }}
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
{{ end }}
</ul>
</div>
<main>
{{ partial "tags_list_all.html" . }}
</main>
{{ partial "footer.html" . }}
{{ end }}