Skip to content

Commit

Permalink
refact: new html, css for list of posts and single post
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@AucT
AucT committed Sep 4, 2024
1 parent 2b68a8d commit 9509127
Show file tree
Hide file tree
Showing 17 changed files with 760 additions and 150 deletions.
507 changes: 507 additions & 0 deletions static/assets/css/newblog.css
View file

Large diffs are not rendered by default.

80 changes: 74 additions & 6 deletions themes/beaver/layouts/_default/baseof.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,74 @@
{{ 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:image" content="{{ .Permalink }}" />
<meta name="twitter:card" content="summary_large_image">
{{ 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:image" content="{{ .Permalink }}" />
<meta name="twitter:card" content="summary_large_image">
{{ end }}
{{ end }}

<link rel="stylesheet" href="{{ (resources.Get "assets/css/newblog.css" | resources.Minify | fingerprint).RelPermalink }}">
</head>

<body>
{{ partial "blog/header.html" . }}

<div class="wrapper">
{{ block "main" . }}{{ end }}
</div>

{{ partial "blog/footer.html" . }}
</body>
</html>
68 changes: 21 additions & 47 deletions themes/beaver/layouts/_default/list.html
View file
Original file line number Diff line number Diff line change
@@ -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 }}
81 changes: 22 additions & 59 deletions themes/beaver/layouts/blog/list.html
View file
Original file line number Diff line number Diff line change
@@ -1,67 +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 class="container fl-col-group fl-node-pr4hl12zykvn" data-node="pr4hl12zykvn">
<div class="fl-col fl-node-sfuljidq5a2h" data-node="sfuljidq5a2h">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-bh5ja2c6xuro" data-node="bh5ja2c6xuro">
<div class="fl-module-content fl-node-content">
<h1 class="fl-heading">Blog</h1>
</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-mrsav8gcfhel"
data-node="mrsav8gcfhel">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Browse through our blog page filled with updated information and the
latest tips to help you achieve your goals.</p>
</div>
</div>
</div>
<br />
<br />
<div class="fl-module fl-module-pp-content-grid fl-node-o6rwlh2bvzie" data-node="o6rwlh2bvzie">
<div class="fl-module-content fl-node-content">
{{ $paginator := .Paginate (sort .Pages "Params.created_at" "desc") }}

{{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
<a class="link" href="{{ .Permalink }}">
<div class="blog-post">
<div class="post-image">
{{ $image := .Resources.GetMatch (printf "*%s*" .Params.metatags.image) }}
{{ if $image }}
<img src="{{ $image.Permalink }}" alt="{{ .Title }}">
{{ else }}
<img src="/assets/img/no-image.png" alt="Placeholder Image">
{{ 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" . }}
{{ 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>

</div>
</div>
</div>
</div>
</div>
</div>
</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" . }}

{{ end }}
41 changes: 10 additions & 31 deletions themes/beaver/layouts/blog/single.html
View file
Original file line number Diff line number Diff line change
@@ -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 }}
54 changes: 54 additions & 0 deletions themes/beaver/layouts/partials/blog/footer.html
View file
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions themes/beaver/layouts/partials/blog/header.html
View file
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions themes/beaver/layouts/partials/blog/img-cropped.html
View file
Original file line number Diff line number Diff line change
@@ -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 }}
Loading

0 comments on commit 9509127

Please sign in to comment.