Skip to content

Unit 7: single/list/home refactor + shared icons + print partial #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stradichenko wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Unit 7: single/list/home refactor + shared icons + print partial #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 14 additions & 16 deletions layouts/_default/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,36 @@
<header class="page-header">
<h1 class="page-title">{{ .Title }}</h1>
</header>

<div class="knowledge-graph-wrapper">
{{ partial "knowledge-graph.html" . }}
</div>

<div class="page-content">
{{ .Content }}
</div>

<div class="pages-list">
{{ range .Pages }}
{{ $page := . }}
<article class="page-item">
<h2 class="page-item-title">
<a href="{{ .RelPermalink }}" class="page-link">{{ .LinkTitle }}</a>
</h2>

<div class="page-metadata">
{{ if .Date }}
{{ with .Date }}
<span class="page-date">
<i class="icon-calendar"></i> {{ .Date.Format "January 2, 2006" }}
{{ partial "icons.html" (dict "name" "calendar" "class" "meta-icon") }}
<time datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format "January 2, 2006" }}</time>
</span>
{{ end }}

{{ if .Params.categories }}
<span class="page-categories">
<i class="icon-folder"></i>
{{ partial "icons.html" (dict "name" "folder" "class" "meta-icon") }}
{{ $maxCategories := 2 }}
{{ $categoryCount := len .Params.categories }}
{{ $allCategories := .Params.categories }}

{{ range $index, $category := .Params.categories }}
{{ if lt $index $maxCategories }}
{{- if gt $index 0 }}, {{ end -}}
Expand All @@ -46,14 +45,13 @@ <h2 class="page-item-title">
{{- end -}}
</span>
{{ end }}

{{ if .Params.tags }}
<span class="page-tags">
<i class="icon-tag"></i>
{{ partial "icons.html" (dict "name" "tag" "class" "meta-icon") }}
{{ $maxTags := 3 }}
{{ $tagCount := len .Params.tags }}
{{ $allTags := .Params.tags }}

{{ range $index, $tag := .Params.tags }}
{{ if lt $index $maxTags }}
{{- if gt $index 0 }}, {{ end -}}
Expand All @@ -67,13 +65,13 @@ <h2 class="page-item-title">
</span>
{{ end }}
</div>

{{ with .Description }}
<div class="page-description">
{{ . }}
</div>
{{ end }}

{{ with .Summary }}
<div class="page-summary">
{{ . }}
Expand Down
192 changes: 39 additions & 153 deletions layouts/_default/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{{ if and .Params.toc .TableOfContents }}
<aside class="toc-sidebar">
<div class="toc">
<h2>Table of Contents</h2>
<h2>{{ T "TableOfContents" | default "Table of Contents" }}</h2>
<nav id="TableOfContents">
{{ .TableOfContents }}
</nav>
Expand All @@ -13,7 +13,7 @@ <h2>Table of Contents</h2>
{{ end }}



<!-- Main content -->
<article class="main-content">
<header class="post-header">
Expand All @@ -24,84 +24,86 @@ <h1 class="post-title">{{ .Title }}</h1>
{{/* PDF button moved to metadata section */}}
</div>
</div>

<!-- Header Image -->
{{ with .Params.image }}
{{ $imagePath := . }}
{{ $imageRes := resources.Get $imagePath }}
{{ $imageExists := false }}
{{ with resources.Get $imagePath }}
{{ $imgWidth := 0 }}
{{ $imgHeight := 0 }}
{{ with $imageRes }}
{{ $imageExists = true }}
{{ if .MediaType }}
{{ if hasPrefix .MediaType.MainType "image" }}
{{ $imgWidth = .Width }}
{{ $imgHeight = .Height }}
{{ end }}
{{ end }}
{{ else }}
{{ with fileExists (printf "static/%s" $imagePath) }}
{{ $imageExists = true }}
{{ end }}
{{ end }}

{{ if $imageExists }}
<div class="post-header-image">
{{ $altText := $.Params.alt | default $.Title }}
<img src="{{ $imagePath | relURL }}" alt="{{ $altText }}" class="header-image">
<img src="{{ $imagePath | relURL }}" alt="{{ $altText }}" class="header-image"
loading="lazy" decoding="async"
{{ with $imgWidth }}width="{{ . }}"{{ end }}
{{ with $imgHeight }}height="{{ . }}"{{ end }}>
<div class="header-image-overlay">{{ $altText }}</div>
</div>
{{ end }}
{{ end }}

<div class="page-metadata">

<!-- PDF Button - positioned after TTS -->
{{ partial "pdf-button.html" . }}
<!-- TTS Button - positioned first in metadata -->
{{ partial "tts-button.html" . }}





<!-- Author -->
{{ with .Params.author }}
<div class="page-author">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
{{ partial "icons.html" (dict "name" "user" "class" "meta-icon") }}
<span>{{ . }}</span>
</div>
{{ end }}

<!-- Created Date -->
{{ with .Date }}
{{ $dateMachine := . | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := . | time.Format ":date_long" }}
<div class="page-date">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
<span>Created: <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
{{ partial "icons.html" (dict "name" "calendar" "class" "meta-icon") }}
<span>{{ T "Created" | default "Created" }}: <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
</div>
{{ end }}

<!-- Updated Date -->
{{ if ne .Lastmod .Date }}
{{ with .Lastmod }}
{{ $lastmodMachine := . | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $lastmodHuman := . | time.Format ":date_long" }}
<div class="page-updated">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
<span>Updated: <time datetime="{{ $lastmodMachine }}">{{ $lastmodHuman }}</time></span>
{{ partial "icons.html" (dict "name" "clock" "class" "meta-icon") }}
<span>{{ T "Updated" | default "Updated" }}: <time datetime="{{ $lastmodMachine }}">{{ $lastmodHuman }}</time></span>
</div>
{{ end }}
{{ end }}

<!-- Categories - Updated with folder icon -->
{{ if .Params.categories }}
<div class="page-categories">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
</svg>
{{ partial "icons.html" (dict "name" "folder" "class" "meta-icon") }}
{{ $maxCategories := 2 }}
{{ $categoryCount := len .Params.categories }}
{{ $allCategories := .Params.categories }}

{{ range $index, $category := .Params.categories }}
{{ if lt $index $maxCategories }}
{{- if gt $index 0 }}, {{ end -}}
Expand All @@ -114,18 +116,14 @@ <h1 class="post-title">{{ .Title }}</h1>
{{- end }}
</div>
{{ end }}

<!-- Tags -->
{{ if .Params.tags }}
<div class="page-tags">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/>
<path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</svg>
{{ partial "icons.html" (dict "name" "tag" "class" "meta-icon") }}
{{ $maxTags := 3 }}
{{ $tagCount := len .Params.tags }}
{{ $allTags := .Params.tags }}

{{ range $index, $tag := .Params.tags }}
{{ if lt $index $maxTags }}
{{- if gt $index 0 }}, {{ end -}}
Expand All @@ -141,16 +139,16 @@ <h1 class="post-title">{{ .Title }}</h1>
</div>
</div>
</header>

<div class="post-content">
{{ .Content }}
</div>

<!-- References will be inserted here by JavaScript -->

<!-- Add comments section -->
{{ if ne .Params.comments false }}
{{ if .Site.Params.comments.remark42.enabled }}
{{ if site.Params.comments.remark42.enabled }}
{{ partial "comments/remark42.html" . }}
{{ end }}
{{ end }}
Expand All @@ -162,119 +160,7 @@ <h1 class="post-title">{{ .Title }}</h1>
</aside>
</div>

<!-- Resource bundling for scripts and styles based on page requirements -->
{{ $scripts := slice }}
{{ $styles := slice }}

<!-- Add tooltip styles -->
{{ with resources.Get "css/tooltip.css" }}
{{ $styles = $styles | append . }}
{{ end }}

<!-- Unconditionally add sidenotes resources -->
{{ with resources.Get "css/references.css" }}
{{ $styles = $styles | append . }}
{{ end }}

{{ $sidenotesJS := resources.Get "js/sidenotes.js" }}
{{ $referencesJS := resources.Get "js/references.js" }}
{{ $scripts = $scripts | append $sidenotesJS $referencesJS }}

<!-- Add single.css LAST for styling specific to single posts to ensure precedence -->
{{ with resources.Get "css/single.css" }}
{{ $styles = $styles | append . }}
{{ end }}

<!-- Add TOC resources if needed -->
{{ if and .Params.toc .TableOfContents }}
{{ $tocJS := resources.Get "js/toc.js" }}
{{ $scripts = $scripts | append $tocJS }}
{{ end }}

<!-- Add tooltip.js -->
{{ $tooltipJS := resources.Get "js/tooltip.js" }}
{{ $scripts = $scripts | append $tooltipJS }}

<!-- Always include table-wrapper.js -->
{{ $tableWrapperJS := resources.Get "js/table-wrapper.js" }}
{{ $scripts = $scripts | append $tableWrapperJS }}

<!-- Add BibTeX support -->
{{ $bibtexJS := resources.Get "js/bibtex.js" }}
{{ $scripts = $scripts | append $bibtexJS }}

<!-- Add PDF button resources -->
{{ with resources.Get "css/components/pdf-button.css" }}
{{ $styles = $styles | append . }}
{{ end }}

<!-- Add TTS button resources -->
{{ with resources.Get "css/components/tts-button.css" }}
{{ $styles = $styles | append . }}
{{ end }}

{{ $pdfJS := resources.Get "js/pdf-generator.js" }}
{{ $ttsJS := resources.Get "js/tts.js" }}
{{ if $pdfJS }}
{{ $scripts = $scripts | append $pdfJS }}
{{ else }}
{{ warnf "PDF generator script not found: js/pdf-generator.js" }}
{{ end }}
{{ if site.Params.enableHDVoice }}
{{ with resources.Get "js/piper-tts.js" }}
{{ $scripts = $scripts | append . }}
{{ end }}
{{ end }}
{{ if $ttsJS }}
{{ $scripts = $scripts | append $ttsJS }}
{{ else }}
{{ warnf "TTS script not found: js/tts.js" }}
{{ end }}

<!-- Add PDF print styles to the styles bundle -->
{{ with resources.Get "css/components/pdf-print.css" }}
{{ $styles = $styles | append . }}
{{ end }}

<!-- Add copy button resources -->
{{ with resources.Get "css/components/copy-button.css" }}
{{ $styles = $styles | append . }}
{{ end }}

<!-- Add copy button JavaScript -->
{{ $copyButtonJS := resources.Get "js/copy-button.js" }}
{{ $scripts = $scripts | append $copyButtonJS }}

<!-- Output the combined and minified resources -->
<!-- Scripts -->
{{ if gt (len $scripts) 0 }}
{{ $combinedScripts := $scripts | resources.Concat "js/single-page.js" | minify | fingerprint }}
<script src="{{ $combinedScripts.RelPermalink }}" integrity="{{ $combinedScripts.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ else }}
{{ warnf "No scripts to bundle on single page" }}
{{ end }}

<!-- PDF print CSS custom properties from site params -->
{{ with site.Params.pdf }}
<style media="print">
:root {
--pdf-font-family: {{ with .fontFamily }}{{ . | safeCSS }}{{ else }}"Palatino Linotype", "Book Antiqua", Palatino, "EB Garamond", Georgia, "Times New Roman", serif{{ end }};
--pdf-code-font-family: {{ with .codeFontFamily }}{{ . | safeCSS }}{{ else }}"Courier New", Courier, "Liberation Mono", monospace{{ end }};
--pdf-font-size: {{ with .fontSize }}{{ . | safeCSS }}{{ else }}11pt{{ end }};
--pdf-title-font-size: {{ with .titleFontSize }}{{ . | safeCSS }}{{ else }}17pt{{ end }};
--pdf-heading-font-size: {{ with .headingFontSize }}{{ . | safeCSS }}{{ else }}14pt{{ end }};
--pdf-subheading-font-size: {{ with .subheadingFontSize }}{{ . | safeCSS }}{{ else }}12pt{{ end }};
--pdf-notes-font-size: {{ with .notesFontSize }}{{ . | safeCSS }}{{ else }}9pt{{ end }};
--pdf-bibliography-font-size: {{ with .bibliographyFontSize }}{{ . | safeCSS }}{{ else }}9.5pt{{ end }};
--pdf-page-number-font-size: {{ with .pageNumberFontSize }}{{ . | safeCSS }}{{ else }}10pt{{ end }};
}
</style>
{{ end }}

<!-- Styles -->
{{ if gt (len $styles) 0 }}
{{ $combinedStyles := $styles | resources.Concat "css/single-page.css" | resources.Minify | fingerprint }}
<link rel="stylesheet" href="{{ $combinedStyles.RelPermalink }}" integrity="{{ $combinedStyles.Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ partial "print-vars.html" . }}

{{ end }}
Loading