refact: new html, css for list of posts and single post

update mobile nav border color remove blog/list and use only default/list close metatags update pagination partial update pagination css (used bootstrap large) don't minify css for development improve pagination add rss for blog make nav links 18px to be in sync with navbar from other pages minify css remove dark mode improve css for pre without language improve css for inline code remove redundant baseof fix format fix head add indentation, new line add new lines to html improve style for blockquote h1 improve css for code add new lines extract html header and footer for posts list and single post to partial add svg shortcode for later use format share improve link color on dark mode format css code add new line for css increase line-height from 1.5 to 1.6 ue baseOf for blog list, blog single instead of header and footer add 60ch max-width for article content move related posts to partial move share to partial add new line add line-height hugo menu contact us improvement add title for github improve footer link colors improve social icons improve font-size add favicon small css improvements add red color for code as in previous theme use params for menu update also posts list by tag remove not needed semicolumn New html css for posts list, post single
jetthoughts · Sep 5, 2024 · 4136371 · 4136371
1 parent 2b68a8d
commit 4136371
Show file tree

Hide file tree

Showing 18 changed files with 936 additions and 229 deletions.
diff --git a/static/assets/css/newblog.css b/static/assets/css/newblog.css
diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html
@@ -1,6 +1,82 @@
-{{ partial "page/header.html" . }}
-{{ block "main" . }}
-{{ end }}
-{{ block "footer" . }}
-{{ end }}
-{{ partial "page/footer.html" . }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/png" href="data:image/png;base64,">
+<title>{{ .Title }}</title>
+<meta name="description" content="{{ .Params.description }}" />
+{{ if and (eq .Kind "taxonomy") (eq .Section "tags") }}
+{{ $canonical := .Permalink | replace "/tags/" "/blog/tags/" }}
+<link rel="canonical" href="{{ $canonical }}" />
+{{ else }}
+<link rel="canonical" href="{{ .Permalink }}" />
+{{ end }}
+
+<link rel="icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-32x32.png" sizes="32x32" />
+<link rel="icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-192x192.png" sizes="192x192" />
+<link rel="apple-touch-icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-180x180.png" />
+
+<meta property="og:locale" content="en_US" />
+<meta property="og:title" content="{{ .Title }} | JetThoughts" />
+<meta property="og:description" content="{{ .Params.description }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:site_name" content="JetThoughts" />
+<meta property="og:updated_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" }}" />
+
+<meta name="twitter:title" content="{{ .Title}} | JetThoughts" />
+<meta name="twitter:site" content="@jetthoughts" />
+<meta name="twitter:creator" content="@jetthoughts" />
+
+{{ if eq .Section "blog" }}
+{{ with .Params.created_at }}
+<meta property="article:published_time" content="{{ . | time.Format "2006-01-02T15:04:05Z07:00" }}" />
+{{ end }}
+<meta property="article:modified_time" content="{{ .Lastmod | time.Format "2006-01-02T15:04:05Z07:00" }}" />
+{{ end }}
+
+{{ $url := .RelPermalink }}
+{{ if or (eq $url "/blog/") (strings.HasPrefix $url "/blog/page/") }}
+<meta name="robots" content="NOODP">
+{{ end }}
+
+{{ with .Page.Resources.GetMatch .Page.Params.metatags.image }}
+<meta property="og:image" content="{{ .Permalink }}" />
+<meta property="og:image:width" content="{{ .Width }}" />
+<meta property="og:image:height" content="{{ .Height }}" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image" content="{{ .Permalink }}" />
+{{ end }}
+
+{{ if eq .Type "tags" }}
+{{ $blogIndex := .Site.GetPage "blog" }} <!-- Get the blog index page -->
+{{ with $blogIndex.Resources.GetMatch $blogIndex.Params.metatags.image }}
+<meta property="og:image" content="{{ .Permalink }}" />
+<meta property="og:image:width" content="{{ .Width }}" />
+<meta property="og:image:height" content="{{ .Height }}" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image" content="{{ .Permalink }}" />
+{{ end }}
+{{ end }}
+
+{{ $css := resources.Get "assets/css/newblog.css" }}
+{{ if eq hugo.Environment "production" }}
+{{ $css = $css | resources.Minify | fingerprint }}
+{{ end }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
+
+{{ range .AlternativeOutputFormats -}}
+{{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+{{ end }}
+</head>
+
+<body>
+{{ partial "blog/header.html" . }} 
+
+<div class="wrapper">
+    {{ block "main" . }}{{ end }}
+</div>
+
+{{ partial "blog/footer.html" . }}
+</body>
+</html>
diff --git a/themes/beaver/layouts/_default/list.html b/themes/beaver/layouts/_default/list.html
@@ -1,56 +1,30 @@
 {{ define "main" }}
-  <div id="fl-main-content" class="fl-page-content" itemprop="mainContentOfPage" role="main">
-    <div class="fl-builder-content fl-builder-content-741 fl-builder-global-templates-locked" data-post-id="741">
-      <div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-efmcw3bh18k5 fl-row-default-height fl-row-align-center fl-row-has-layers"
-        data-node="efmcw3bh18k5">
-        <div class="fl-row-content-wrap">
-          <div class="blog fl-row-content fl-row-fixed-width fl-node-content">
 
-            <div style="max-width: 960px; margin:0 auto; padding-left:18px;padding-right:18px">
-              <div style="max-width: 43rem;">
-                <h1 class="fl-heading" style="margin: 0!important;padding: 0!important">Blog</h1>
+{{ $paginator := .Paginate (sort .Pages "Params.created_at" "desc") }}
 
-                <p>Browse through our blog page filled with updated information and the
-                latest tips to help you achieve your goals.</p>
+{{ range $paginator.Pages }}
+<a class="blog-post-link" href="{{ .Permalink }}" title="{{ .Title }}">
+  <div class="blog-post">
+  <div class="post-image">
+    {{ partial "blog/img-cropped.html" (dict "Page" . "width" 150 "height" 150) }}
+  </div>
 
-                <br>
-
-                {{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
-                <a class="link" href="{{ .Permalink }}">
-                  <div class="blog-post">
-                    <div class="post-image">
-                      {{ $cdnPrefix := "https://imagecdn.app/v1/images/" }}
-                      {{ $src := "" }}
-                      {{ with .Params.cover_image }}
-                        {{ $encodedSrc := printf "%s%s" $cdnPrefix (urlquery .) }}
-                        {{ $src = printf "%s?width=150&height=150" $encodedSrc }}
-                      {{ else }}
-                        {{ $src = "/assets/img/no-image.png" }}
-                      {{ end }}
+  <div class="post-content">
+    <h2 class="post-title">{{ .Title }}</h2>
+    <div class="post-meta">
+      <div class="post-tags">{{ range .Params.tags }}<a href="/blog/tags/{{ . | urlize }}/">#{{ . }}</a> {{ end }}
+      </div>
+      {{ if .Params.created_at }}
+      <span class="post-date">{{ dateFormat "Jan 2, 2006" .Params.created_at }}</span>
+      {{ end }}
+    </div>
+  </div>
+  </div>
+</a>
 
-                      <img src="{{ $src }}" alt="Placeholder Image" loading="lazy" decoding="async">
+{{ end }}
 
-                    </div>
-                    <div class="post-content">
-                      <h2 class="post-title">{{ .Title }}</h2>
-                      <div class="post-meta">
-                        <div class="post-tags">{{ range .Params.tags }}<a href="/blog/tags/{{ . | urlize }}/">#{{ . }}</a> {{ end }}</div>
-                        {{ if .Params.created_at }}
-                        <span class="post-date">{{ dateFormat "Jan 2, 2006" .Params.created_at }}</span>
-                        {{ end }}
-                      </div>
-                    </div>
-                  </div>
-                </a>
-                {{ end }}
 
-                {{ partial "pagination.html" . }}
-            </div>
+{{ partial "pagination.html" . }}
 
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 {{ end }}
diff --git a/themes/beaver/layouts/blog/list.html b/themes/beaver/layouts/blog/list.html
diff --git a/themes/beaver/layouts/blog/single.html b/themes/beaver/layouts/blog/single.html
@@ -1,39 +1,18 @@
-{{ partial "page/header.html" . }}
+{{ define "main" }}
 
-<div id="fl-main-content" class="blog" itemprop="mainContentOfPage" role="main">
-  <div class="fl-row-content fl-row-fixed-width fl-node-content">
+<article>
+  <h1 class="heading">{{ .Title }}</h1>
+  <div class="i">Last modified: {{ .Lastmod.Format "January 2, 2006" }}</div>
 
-        <article class="single-content" style="max-width: 960px; margin:0 auto; padding-left:18px;padding-right:18px"
-          itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
+  <div class="post-tags" style="margin-bottom: 1rem;">{{ range .Params.tags }}<a href="/blog/tags/{{ . | urlize }}/">#{{ . }}</a> {{ end }}</div>
 
-          <h1 class="heading">{{ .Title }}</h1>
-          <div class="post-tags" style="margin-bottom: 1rem;">{{ range .Params.tags }}<a href="/blog/tags/{{ . | urlize }}/">#{{ . }}</a> {{ end }}</div>
+  {{ .Content }}
 
-          <div class="fl-rich-text" style="max-width: 43rem;">
-            {{ .Content }}
-          </div>
-          </article>
+</article>
 
-          <div class="single-post-wrapper">
-          <aside class="social-share">
-              <a href="https://x.com/intent/tweet?url={{ .Permalink }}" target="_blank" title="Share on X" aria-label="Share on X">
-                {{ partial "svg" "x" }}
-              </a>
-              <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook"" aria-label="Share on Facebook">
-                {{ partial "svg" "facebook" }}
-              </a>
-              <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" title="Share on LinkedIn" aria-label="Share on LinkedIn">
-                {{ partial "svg" "linkedin" }}
-              </a>
-        </aside>
-      </div>
 
+{{ partial "blog/share.html" . }}
 
-          <aside class="single-content single-post-wrapper" style="margin-top:4rem">
-          {{ partial "blog/related-posts.html" . }}
-          </aside>
+{{ partial "blog/related-posts.html" . }}
 
-  </div>
-</div>
-
-{{ partial "page/footer.html" . }}
+{{ end }}
diff --git a/themes/beaver/layouts/partials/blog/footer.html b/themes/beaver/layouts/partials/blog/footer.html
@@ -0,0 +1,54 @@
+<footer class="footer">
+    <div class="footer-container">
+        <div class="flex-container">
+        <div class="info flex2">
+            <a href="/" title="Go to homepage"><img loading="lazy" width="200" height="36.5" alt="JetThoughts" src="/wp-content/uploads/2022/09/jet-thoughts-white.png"></a>
+            <p>{{ .Site.Params.description }}</p>
+            <p><a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a></p>
+            <p><a href="tel:{{ .Site.Params.phone }}">{{ .Site.Params.phone }}</a></p>
+        </div>
+        <div class="services flex1">
+            <h3>Services</h3>
+            <ul>
+                {{ range .Site.Menus.services }}
+                <li><a href="/clients/">{{ .Name }}</a></li>
+                {{ end }}
+            </ul>
+        </div>
+        <div class="company flex1">
+            <h3>Company</h3>
+            <ul>
+                {{ range .Site.Menus.company }}
+                <li><a href="/clients/">{{ .Name }}</a></li>
+                {{ end }}
+            </ul>
+        </div>
+        <div class="resources flex1">
+            <h3>Resources</h3>
+            <ul>
+                {{ range .Site.Menus.resources }}
+                <li><a href="/clients/">{{ .Name }}</a></li>
+                {{ end }}
+            </ul>
+        </div>
+    </div>
+</div>
+    <div class="footer-bottom">
+        <p>{{ .Site.Params.copyright }}</p>
+        <p class="social-icons">
+            <a href="https://www.facebook.com/jetthoughts/" target="_blank" title="Facebook" aria-label="Facebook" role="button" rel="noopener noreferrer external">
+                {{ partial "svg" "mini/facebook" }}
+            </a>
+            <a href="https://twitter.com/jetthoughts/" target="_blank" title="Twitter" aria-label="Twitter" role="button" rel="noopener noreferrer external">
+                {{ partial "svg" "mini/x" }}
+            </a>
+            <a href="https://www.linkedin.com/company/jetthoughts/" target="_blank" title="LinkedIn" aria-label="LinkedIn" role="button" rel="noopener noreferrer external">
+                {{ partial "svg" "mini/linkedin" }}
+            </a>
+            <a href="https://github.com/jetthoughts/" target="_blank" title="Github" aria-label="Github" role="button" rel="noopener noreferrer external">
+                {{ partial "svg" "mini/github" }}
+            </a>
+        </p>
+        <p><a href="/privacy-policy/">Privacy Policy</a></p>
+    </div>
+</footer>
diff --git a/themes/beaver/layouts/partials/blog/header.html b/themes/beaver/layouts/partials/blog/header.html
@@ -0,0 +1,24 @@
+<header class="header">
+<nav class="navbar">
+    <a class="logo" href="/" title="JetThoughts">
+        {{ partial "svg" "jetthoughts" }}
+    </a>
+
+    <input type="checkbox" id="menu-toggle" class="menu-toggle">
+    <label for="menu-toggle" class="menu-icon">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+    </label>
+
+    <div class="nav-links">
+        {{ range .Site.Menus.main }}
+        {{ if eq .URL "/contact-us/" }}
+        <a class="btn" href="{{ .URL }}">{{ .Name }}</a>
+        {{ else }}
+        <a class="nav-item {{ if eq .URL $.RelPermalink }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+        {{ end }}
+        {{ end }}
+    </div>
+</nav>
+</header>
diff --git a/themes/beaver/layouts/partials/blog/img-cropped.html b/themes/beaver/layouts/partials/blog/img-cropped.html
@@ -0,0 +1,15 @@
+{{ $image := .Page.Resources.GetMatch (printf "*%s*" .Page.Params.metatags.image) }}
+{{ if $image }}
+{{ $cropped := $image.Fill (printf "%dx%d Center" .width .height) }}
+{{ $webp := $cropped.Resize (printf "%dx%d webp" .width .height) }}
+
+
+    <picture>
+    <source srcset="{{ $webp.Permalink }}" type="image/webp">
+    <source srcset="{{ $cropped.Permalink }}" type="{{ $cropped.MediaType }}">
+    <img src="{{ $cropped.Permalink }}" alt="{{ .Page.Title }}" width="{{ .width }}" height="{{ .height }}">
+    </picture>
+
+{{ else }}
+  <img src="/assets/img/no-image.png" alt="Placeholder Image" width="{{ .width }}" height="{{ .height }}">
+{{ end }}