feat(tailwind): port brand icons, tags page, search, Awards block, card zoom

This commit is contained in:
George Cushen 2023-11-16 07:57:40 +00:00
commit 358962ce08
20 changed files with 277 additions and 34 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

View file

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"><path d="m307.031 292.969h-14.062v14.062h14.062z" fill="#fff"/><path d="m600 0h-600v600h600z" fill="#fff"/><path d="m600 0h-600v600h600z" fill="#0056d2"/><g fill="#fff"><path d="m117.913 300.434c0-19.301 15.923-34.875 35.859-34.875 20.07 0 35.992 15.574 35.992 34.875 0 19.167-15.922 35.007-35.992 35.007-19.936 0-35.859-15.973-35.859-35.007zm54.725 0c0-9.583-8.43-18.104-18.866-18.104-10.303 0-18.598 8.521-18.598 18.104 0 9.717 8.429 18.236 18.598 18.236 10.436 0 18.866-8.519 18.866-18.236z"/><path d="m478.15 300.965c0-21.164 17.326-35.406 33.036-35.406 10.747 0 16.924 3.194 21.086 9.452l1.612-8.253h16.116v67.353h-16.116l-2.015-6.923c-4.701 5.059-10.61 8.253-20.546 8.253-15.713 0-33.173-13.577-33.173-34.476zm54.795-.133c0-10.247-8.463-18.502-18.936-18.502-10.341 0-18.668 8.388-18.668 18.771 0 9.316 8.461 17.702 18.668 17.702 10.607-.133 18.936-8.519 18.936-17.971z"/><path d="m458.833 274.982v-7.721h-17.101v66.211h17.101v-35.724c0-10.729 5.221-16.356 14.487-16.356.652 0 1.176 0 1.697.131l3.133-15.964c-8.875.131-15.272 3.14-19.317 9.423z"/><path d="m284.158 274.982v-7.721h-17.623l.135 66.211h17.625l-.137-35.724c0-10.729 5.382-16.356 14.801-16.356.672 0 1.209 0 1.75.131l3.228-15.964c-9.15.131-15.741 3.14-19.779 9.423z"/><path d="m196.654 307.776v-41.233h17.209v39.104c0 8.645 4.73 13.699 13.006 13.699 9.196 0 14.583-5.718 14.583-16.624v-36.179h17.209v67.3h-17.209v-7.845c-4.073 6.383-10.641 9.442-19.706 9.442-15.502.133-25.092-11.172-25.092-27.664z"/><path d="m365.945 300.369c0-18.867 13.621-34.942 34.985-34.809 19.893 0 33.913 15.942 33.913 34.541 0 1.861-.134 3.854-.401 5.582l-51.405-.133c2.004 8.104 8.678 13.816 18.693 13.949 6.141 0 12.685-2.259 16.69-7.308l11.885 9.567c-6.144 8.634-16.959 13.683-28.441 13.683-20.297-.265-35.919-15.411-35.919-35.072zm51.408-6.909c-.937-6.777-8.145-12.091-16.423-12.091-8.145 0-14.689 4.783-17.226 11.958z"/><path d="m303.937 319.559 15.522-8.073c2.542 5.558 7.76 8.734 14.984 8.734 6.691 0 9.234-2.118 9.234-5.029 0-10.721-36.93-4.234-36.93-28.853 0-13.631 12.043-20.779 26.894-20.779 11.239 0 21.274 4.897 26.76 14.163l-15.388 8.073c-2.272-4.5-6.555-7.015-12.041-7.015-5.352 0-7.894 1.854-7.894 4.897 0 10.456 36.93 3.837 36.93 28.853 0 12.97-10.704 20.911-27.966 20.911-14.717-.132-25.02-4.897-30.105-15.882z"/><path d="m50 300.074c0-19.161 15.7897-34.515 35.5599-34.515 12.7377 0 23.7511 6.301 30.1201 15.747l-14.861 8.532c-3.4503-4.724-8.8902-7.873-15.2591-7.873-10.2169 0-18.4434 8.398-18.4434 17.978 0 9.578 8.359 17.976 18.4434 17.976 6.6342 0 12.4724-3.411 15.6571-8.529l14.728 8.66c-6.236 9.843-17.5148 16.406-30.3851 16.406-19.7702.131-35.5599-15.616-35.5599-34.382z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 34"><path d="M14.001 25.028v-7.224l11.393-6.498-2.77-1.588-8.623 4.918V7.391c0-.491-.265-.95-.69-1.194L2.938.245a1.974 1.974 0 00-2.006.06A1.98 1.98 0 000 1.992v20.375c0 .69.35 1.321.934 1.687a1.973 1.973 0 002.002.061l8.317-4.743v6.457c0 .494.266.952.695 1.196l10.658 6.067 2.771-1.589-11.376-6.475zm-2.748-16.84v8.016l-8.504 4.85V3.31l8.504 4.88z" fill="#03EF62" fill-rule="evenodd"></path></svg>

After

Width:  |  Height:  |  Size: 469 B

View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 552.88 310.72" style="enable-background:new 0 0 552.88 310.72;" xml:space="preserve">
<style type="text/css">
.st0{fill:#02262B;}
.st1{fill:#FFFFFF;}
</style>
<polygon class="st0" points="353.43,50.96 364.08,0 51.3,0 0,245.01 261.52,245.01 247.12,310.72 497.63,310.72 552.88,50.96 "/>
<path class="st1" d="M106.6,213.73c-7.09,0-13.79-1.16-20.09-3.49c-6.3-2.32-11.8-5.75-16.49-10.28
c-4.69-4.53-8.39-10.1-11.11-16.72c-2.72-6.62-4.08-14.22-4.08-22.81c0-11.74,1.63-22.44,4.9-32.09
c3.27-9.65,7.82-17.92,13.65-24.82c5.83-6.89,12.82-12.23,20.98-16.01c8.15-3.78,17.08-5.67,26.77-5.67
c6.54,0,12.74,1.14,18.62,3.43c5.87,2.29,11.01,5.61,15.42,9.99c4.41,4.37,7.92,9.75,10.52,16.13c2.6,6.38,3.9,13.71,3.9,21.98
c0,1.26-0.04,2.74-0.12,4.43c-0.08,1.7-0.2,3.43-0.36,5.2c-0.16,1.77-0.32,3.51-0.47,5.2c-0.16,1.69-0.35,3.13-0.59,4.31H76.22
c-0.08,1.11-0.14,2.17-0.18,3.19c-0.04,1.03-0.06,2.09-0.06,3.19c0,6.54,0.95,12.11,2.84,16.72c1.89,4.61,4.35,8.37,7.39,11.29
c3.03,2.92,6.44,5.02,10.22,6.32c3.78,1.3,7.6,1.95,11.46,1.95c8.43,0,15.21-1.46,20.33-4.37c5.12-2.91,9.02-6.85,11.7-11.82h21.63
c-1.34,4.89-3.55,9.46-6.62,13.71c-3.07,4.25-6.95,7.94-11.64,11.05c-4.69,3.11-10.13,5.56-16.31,7.33
C120.8,212.84,114,213.73,106.6,213.73z M148.08,136.08c0.08-0.39,0.14-1.12,0.18-2.19c0.04-1.06,0.06-2.11,0.06-3.13
c0-4.18-0.61-8.14-1.83-11.88c-1.22-3.74-3.05-7.03-5.5-9.87c-2.44-2.84-5.48-5.08-9.1-6.74c-3.63-1.65-7.84-2.48-12.65-2.48
c-4.89,0-9.46,0.87-13.71,2.6c-4.26,1.73-8.12,4.2-11.58,7.39c-3.47,3.19-6.46,7.01-8.98,11.46c-2.52,4.45-4.53,9.4-6.03,14.83
H148.08z"/>
<path class="st1" d="M227.58,213.73c-6.38,0-12.37-1.2-17.97-3.61c-5.6-2.4-10.5-5.85-14.71-10.34c-4.22-4.49-7.55-9.93-9.99-16.31
c-2.44-6.38-3.66-13.51-3.66-21.39c0-7.64,0.77-14.95,2.3-21.92s3.72-13.43,6.56-19.38c2.84-5.95,6.24-11.33,10.22-16.13
c3.98-4.81,8.39-8.9,13.24-12.29c4.85-3.39,10.08-5.99,15.72-7.8c5.63-1.81,11.52-2.72,17.67-2.72c4.57,0,8.92,0.63,13.06,1.89
c4.14,1.26,7.88,3.01,11.23,5.26c3.35,2.25,6.22,4.96,8.63,8.15c2.4,3.19,4.16,6.68,5.26,10.46h1.89l15.72-74.11h20.68l-37.82,178
h-19.62l3.66-17.37h-1.89c-4.65,6.07-10.48,10.85-17.49,14.36C243.26,211.97,235.69,213.73,227.58,213.73z M234.08,195.41
c6.62,0,12.74-1.55,18.38-4.67c5.63-3.11,10.54-7.37,14.71-12.76c4.18-5.4,7.45-11.74,9.81-19.03c2.36-7.29,3.55-15.15,3.55-23.58
c0-5.44-0.75-10.32-2.25-14.66c-1.5-4.33-3.63-8.02-6.38-11.05c-2.76-3.03-6.11-5.38-10.05-7.03c-3.94-1.66-8.39-2.48-13.36-2.48
c-6.54,0-12.61,1.46-18.2,4.37c-5.6,2.92-10.44,6.97-14.54,12.17c-4.1,5.2-7.33,11.41-9.69,18.61s-3.55,15.11-3.55,23.7
c0,5.36,0.77,10.28,2.31,14.77c1.54,4.49,3.68,8.33,6.44,11.52c2.76,3.19,6.07,5.67,9.93,7.45
C225.05,194.52,229.35,195.41,234.08,195.41z"/>
<g>
<polygon class="st1" points="508.94,84.45 462.81,84.45 412.49,146.75 410.01,146.75 383.4,84.45 336.74,84.45 376.74,174.94
290.39,277.23 335.9,277.23 391.32,211.52 395.06,211.52 425,277.23 470.79,277.23 426.51,179.47 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -95,6 +95,11 @@ circle-stack: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
</svg>
magnifying-glass: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" /></svg>
# Phosphor
cat: <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M96,140a12,12,0,1,1-12-12A12,12,0,0,1,96,140Zm76-12a12,12,0,1,0,12,12A12,12,0,0,0,172,128Zm60-80v88c0,52.93-46.65,96-104,96S24,188.93,24,136V48A16,16,0,0,1,51.31,36.69c.14.14.26.27.38.41L69,57a111.22,111.22,0,0,1,118.1,0L204.31,37.1c.12-.14.24-.27.38-.41A16,16,0,0,1,232,48Zm-16,0-21.56,24.8A8,8,0,0,1,183.63,74,88.86,88.86,0,0,0,168,64.75V88a8,8,0,1,1-16,0V59.05a97.43,97.43,0,0,0-16-2.72V88a8,8,0,1,1-16,0V56.33a97.43,97.43,0,0,0-16,2.72V88a8,8,0,1,1-16,0V64.75A88.86,88.86,0,0,0,72.37,74a8,8,0,0,1-10.81-1.17L40,48v88c0,41.66,35.21,76,80,79.67V195.31l-13.66-13.66a8,8,0,0,1,11.32-11.31L128,180.68l10.34-10.34a8,8,0,0,1,11.32,11.31L136,195.31v20.36c44.79-3.69,80-38,80-79.67Z"></path></svg>
person-simple-walk: <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M152,80a32,32,0,1,0-32-32A32,32,0,0,0,152,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,152,32Zm64,112a8,8,0,0,1-8,8c-35.31,0-52.95-17.81-67.12-32.12-2.74-2.77-5.36-5.4-8-7.84l-13.43,30.88,37.2,26.57A8,8,0,0,1,160,176v56a8,8,0,0,1-16,0V180.12l-31.07-22.2L79.34,235.19A8,8,0,0,1,72,240a7.84,7.84,0,0,1-3.19-.67,8,8,0,0,1-4.15-10.52l54.08-124.37c-9.31-1.65-20.92,1.2-34.7,8.58a163.88,163.88,0,0,0-30.57,21.77,8,8,0,0,1-10.95-11.66c2.5-2.35,61.69-57.23,98.72-25.08,3.83,3.32,7.48,7,11,10.57C166.19,122.7,179.36,136,208,136A8,8,0,0,1,216,144Z"></path></svg>

View file

@ -1,13 +1,13 @@
{{ define "main" }}
<div class="flex justify-center">
<article class="container prose prose-slate lg:prose-xl dark:prose-invert">
<div class="max-w-prose mx-auto flex justify-left">
<article class="prose prose-slate lg:prose-xl dark:prose-invert">
<h1 class="lg:text-6xl">{{ .Title }}</h1>
{{ .Content }}
</article>
</div>
<div class="container max-w-[65ch] mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden my-5"><!--max-w-md md:max-w-2xl-->
<div class="max-w-prose mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden my-5"><!--max-w-md md:max-w-2xl-->
{{ range .Pages.ByDate.Reverse }}
{{ $resource := partial "functions/get_featured_image.html" . }}
{{ $anchor := .Params.image.focal_point | default "Center" }}

View file

@ -1,6 +1,14 @@
{{ define "main" }}
<div class="flex flex-col justify-center">
<article class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert">
{{/* Check whether to show breadcrumb navigation. */}}
{{ $show_breadcrumb := .Params.show_breadcrumb }}
{{ if $show_breadcrumb }}
<div class="mb-3">
{{ partial "components/breadcrumb" . }}
</div>
{{ end }}
<h1 class="lg:text-6xl">{{ .Title }}</h1>
{{ $featured := partial "functions/get_featured_image.html" . }}

View file

@ -0,0 +1,32 @@
{{ define "main" }}
<div class="max-w-prose mx-auto flex justify-left">
<article class="prose prose-slate lg:prose-xl dark:prose-invert max-w-none">
<h1 class="lg:text-6xl !mb-4">{{ .Title }}</h1>
{{ .Content }}
</article>
</div>
<div class="max-w-prose mx-auto my-5">
<div class="flex flex-row gap-6 flex-wrap">
{{- $type := .Type }}
{{- range $key, $value := .Data.Terms.Alphabetical }}
{{- $name := .Name }}
{{- $count := .Count }}
{{- with site.GetPage (printf "/%s/%s" $type $name) }}
<a href="{{ .RelPermalink }}" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
{{ .Name }}
<span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
{{ $count }}
</span>
</a>
{{- end }}
{{- end }}
</div>
</div>
{{- end -}}

View file

@ -0,0 +1,64 @@
{{/* Hugo Blox: Awards */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $author := $block.content.username | default "admin" }}
{{ $person_page_path := (printf "/authors/%s" $author) }}
{{ $person_page := site.GetPage $person_page_path }}
{{ if not $person_page }}
{{ errorf "Could not find an author page at `%s`. Please check the value of `author` in your Skill block and create an associated author page if one does not already exist. See https://docs.hugoblox.com/page-builder/#about " $person_page_path }}
{{end}}
{{ $awards := $person_page.Params.awards }}
<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
<div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | markdownify | emojify }}
</div>
{{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
<div class="w-full flex flex-col gap-6">
{{ if $awards }}
{{ range $idx, $key := sort $awards ".date_start" "desc" }}
<div class="w-full p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
{{- $icon := .icon }}
{{ with $icon }}
<div class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3">
{{ partial "functions/get_icon" (dict "name" $icon "pack" "brands" "attributes" "style=\"height: 100%;\"") }}
</div>
{{ end}}
{{with .url}}<a href={{.}} target="_blank" rel="noopener">{{end}}
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">{{.title | markdownify | emojify}}</h5>
{{with .url}}</a>{{end}}
<div class="block mb-3 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">
{{.awarder}} &#8729;
{{ if .date}}
{{ (time .date) | time.Format ($block.design.date_format | default "January 2006") }}
{{else}}
{{ i18n "present" | default "Present" }}
{{end}}
</div>
{{with .summary}}
<div class="mb-3 font-normal text-gray-500 dark:text-gray-400 prose">{{. | markdownify | emojify}}</div>
{{end}}
{{ with .certificate_url }}
<a href="{{.}}" target="_blank" rel="noopener" class="inline-flex items-center text-blue-600 hover:underline">
{{ i18n "see_certificate" | default "See certificate" }}
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
</a>
{{ end }}
</div>
{{end}}
{{end}}
</div>
</div>

View file

@ -77,11 +77,19 @@
{{ $columns := $block.design.columns | default "2" }}
{{ if $block.content.text }}
<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
<div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | emojify | $page.RenderString }}
</div>
{{ with $block.content.text }}<p>{{ . | emojify | $page.RenderString }}</p>{{ end }}
</div>
{{ end }}
<div class="container max-w-[65ch] mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden my-5"><!--max-w-md md:max-w-2xl-->
{{ with $block.content.text }}{{ . | emojify | $page.RenderString }}{{ end }}
{{ range $index, $item := $query }}
{{ partial "functions/render_view" (dict "page" $block "item" . "view" ($block.design.view | default "card") "index" $index) }}
{{end}}

View file

@ -14,7 +14,7 @@
{{ errorf "Could not find an author page at `%s`. Please check the value of `author` in your About widget and create an associated author page if one does not already exist. See https://docs.hugoblox.com/page-builder/#about " $person_page_path }}
{{end}}
{{ $person := $person_page.Params }}
{{ $is_education_first := $block.design.is_education_first | default false }}
<div class="flex flex-col items-center max-w-prose mx-auto">
<!-- <article class="prose prose-slate lg:prose-xl dark:prose-invert">-->
@ -24,11 +24,11 @@
<!-- </article>-->
<!-- Need Gap >= 3 when flex-row due to negative margin on cols (-start-3) -->
<div class="flex flex-col lg:flex-row lg:gap-x-6 w-100 px-6 sm:px-0">
<div class="flex flex-col lg:gap-x-6 w-100 px-6 sm:px-0 {{ if $is_education_first }}flex-col-reverse{{end}}">
{{ if $person.work }}
<div class="w-full lg:w-1/2">
<h3 class="mb-5 text-xl font-bold text-gray-900 dark:text-white">{{ i18n "work_experience" | default "Experience" }}</h3>
<div class="w-full">
<h3 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">{{ i18n "work_experience" | default "Experience" }}</h3>
<ol class="relative border-s border-gray-200 dark:border-gray-700">
{{ range $idx, $key := $person.work }}
<li class="mb-10 ms-6">
@ -39,7 +39,7 @@
<!-- <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 ms-3">Latest</span>-->
</h3>
<span class="block mb-2 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">{{.company_name}}</span>
<time class="block mb-2 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">
<time class="block mb-3 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">
{{ if .date_start}}
{{ (time .date_start) | time.Format ($block.design.date_format | default "January 2006") }}
{{ end }}
@ -49,7 +49,7 @@
{{ i18n "present" | default "Present" }}
{{end}}
</time>
<div class="mb-4 text-base font-normal text-gray-500 dark:text-gray-300 text-wrap list-disc">{{.summary | $page.RenderString}}</div>
<div class="mb-4 text-base font-normal text-gray-500 dark:text-gray-300 text-wrap prose prose-slate dark:prose-invert">{{.summary | $page.RenderString}}</div>
{{ with .button }}
<a href="{{.url}}" target="_blank" rel="noopener" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"><svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@ -65,8 +65,8 @@
{{ end }}
{{ if $person.education }}
<div class="w-full lg:w-1/2">
<h3 class="mb-5 text-xl font-bold text-gray-900 dark:text-white">{{ i18n "education" }}</h3>
<div class="w-full">
<h3 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">{{ i18n "education" }}</h3>
<ol class="relative border-s border-gray-200 dark:border-gray-700">
{{ range $idx, $key := $person.education }}
<li class="mb-10 ms-6">
@ -78,7 +78,7 @@
<!-- <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 ms-3">Latest</span>-->
</h3>
<span class="block mb-2 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">{{.institution}}</span>
<time class="block mb-2 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">
<time class="block mb-3 text-sm font-normal leading-none text-gray-500 dark:text-gray-300">
{{ if .date_start }}
{{ (time .date_start) | time.Format ($block.design.date_format | default "January 2006") }}
{{ end }}
@ -88,7 +88,7 @@
{{ i18n "present" | default "Present" }}
{{end}}
</time>
<div class="mb-4 text-base font-normal text-gray-500 dark:text-gray-300 list-disc">{{.summary | $page.RenderString}}</div>
<div class="mb-4 text-base font-normal text-gray-500 dark:text-gray-300 prose prose-slate dark:prose-invert">{{.summary | $page.RenderString}}</div>
{{ with .button }}
<a href="{{.url}}" target="_blank" rel="noopener" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"><svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">

View file

@ -16,7 +16,7 @@
<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
<div class="mb-5 text-xl font-bold text-gray-900 dark:text-white">
<div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | markdownify | emojify }}
</div>

View file

@ -7,14 +7,11 @@
{{ $block := .wcBlock }}
{{ $text := $block.content.text | emojify | $page.RenderString }}
<div class="flex flex-col justify-center">
<article class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert">
<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
{{ with $block.content.title }}
<h2>{{ . }}</h2>
{{end}}
<div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | markdownify | emojify }}
</div>
{{ $text }}
</article>
{{ with $block.content.text }}<p class="prose prose-slate lg:prose-xl dark:prose-invert max-w-prose">{{ . | markdownify | emojify }}</p>{{ end }}
</div>

View file

@ -14,6 +14,15 @@
{{end}}
{{ $skills := $person_page.Params.skills }}
<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
<div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | markdownify | emojify }}
</div>
{{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
<div class="flex flex-col lg:flex-row items-center max-w-prose mx-auto gap-3">
{{ range $skills }}

View file

@ -1,4 +1,57 @@
<!-- Main navigation container -->
{{/* Show site search? */}}
{{ $show_search := site.Params.header.navbar.show_search | default false }}
{{ if $show_search }}
{{ $pf_css := resources.Get "dist/pagefind/pagefind-ui.css" }}
{{ $pf_css = $pf_css | resources.Fingerprint "sha256" }}
<link type="text/css" rel="stylesheet" href="{{ $pf_css.RelPermalink }}" integrity="{{ $pf_css.Data.Integrity }}" />
{{ $pf_js := resources.Get "dist/pagefind/pagefind-ui.js" }}
{{ $pf_js = $pf_js | resources.Fingerprint "sha256" }}
<script src="{{ $pf_js.RelPermalink }}" integrity="{{ $pf_js.Data.Integrity }}"></script>
<style>
html.dark {
--pagefind-ui-primary: #eeeeee;
--pagefind-ui-text: #eeeeee;
--pagefind-ui-background: #152028;
--pagefind-ui-border: #152028;
--pagefind-ui-tag: #152028;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: true });
});
document.addEventListener('DOMContentLoaded', () => {
let element = document.getElementById('search');
let trigger = document.getElementById('search_toggle');
if (trigger) {
trigger.addEventListener('click', () => {
element.classList.toggle('hidden');
element.querySelector("input").value = ""
element.querySelector("input").focus()
if (!element.classList.contains('hidden')) {
let clear_trigger = document.querySelector('.pagefind-ui__search-clear');
if (clear_trigger && !clear_trigger.hasAttribute('listenerOnClick')) {
clear_trigger.setAttribute('listenerOnClick', 'true');
clear_trigger.addEventListener('click', () => {
element.classList.toggle('hidden');
});
}
}
});
}
});
</script>
{{ end }}
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-white py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-slate-900 lg:flex-wrap lg:justify-start lg:py-4"
data-te-navbar-ref>
@ -35,7 +88,7 @@
<!-- Main links -->
{{- $currentPage := . }}
<ul
class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row"
class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row items-center"
data-te-navbar-nav-ref>
{{- range site.Menus.main }}
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
@ -47,7 +100,7 @@
class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
data-te-nav-item-ref>
<a
class=" lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white {{ $activeClass }}"
aria-current="page"
href="{{ .URL | relLangURL }}"
@ -56,6 +109,20 @@
>
</li>
{{ end }}
{{ if $show_search }}
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
<a
class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white"
aria-current="page"
href="#"
id="search_toggle"
>{{- i18n "search" -}}</a
>
</li>
{{ end }}
{{ $show_theme_chooser := site.Params.header.navbar.show_theme_chooser | default true }}
{{ if $show_theme_chooser }}
<li>
<button class="theme-toggle mt-1" accesskey="t" title="">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
@ -78,10 +145,16 @@
</svg>
</button>
</li>
{{ end }}
</ul>
</div>
</div>
</nav>
{{ if $show_search }}
<div id="search" class="hidden p-3"></div>
{{ end }}
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");

View file

@ -3,8 +3,12 @@
{{- $icon := index site.Data.icons .name -}}
{{/* Currently, only other pack supported is `brands` icon pack in sub-folder */}}
{{ $pack := .pack | default "" }}
{{ $pack = cond (gt (len $pack) 0) (printf "%s/" $pack) "" }}
{{ if not $icon }}
{{ with resources.GetMatch (printf "media/icons/%s.svg" .name) }}
{{ with resources.GetMatch (printf "media/icons/%s%s.svg" $pack .name) }}
{{ $icon = .Content }}
{{else}}
{{ warnf "The icon `%s.svg` was not found in your `assets/media/icons/` folder" .name }}

View file

@ -5,11 +5,11 @@
<a href="{{ $item.RelPermalink }}" class="mb-5">
<div class="md:flex">
<div class="md:flex-shrink-0">
<div class="md:flex-shrink-0 overflow-hidden">
{{ with $resource }}
{{ $image := .Fill (printf "655x655 %s" $anchor) }}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<img class="h-48 w-full object-cover md:w-48" loading="lazy" src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}" alt="{{ $item.Title | plainify }}">
<img class="h-48 w-full object-cover md:w-48 hover:scale-125 transition duration-500 cursor-pointer object-cover" loading="lazy" src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}" alt="{{ $item.Title | plainify }}">
{{end}}
</div>
<div class="p-8">

View file

@ -15,16 +15,18 @@ trap "exitfn" INT # Set up SIGINT trap to call function.
# due to Hugo limitation requiring Hugo to be run from site dir
cd "starters/$1"
WC_DEMO=true \
HUGO_ENVIRONMENT=development \
HUGOxPARAMSxCMSxLOCAL_BACKEND=true \
HUGO_MODULE_REPLACEMENTS="github.com/HugoBlox/hugo-blox-builder/modules/blox-bootstrap/v5 -> ../../../modules/blox-bootstrap,
export WC_DEMO=true \
export HUGO_ENVIRONMENT=development \
export HUGOxPARAMSxDECAP_CMSxLOCAL_BACKEND=true \
export HUGO_MODULE_REPLACEMENTS="github.com/HugoBlox/hugo-blox-builder/modules/blox-bootstrap/v5 -> ../../../modules/blox-bootstrap,
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify -> ../../../modules/blox-plugin-netlify,
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-reveal -> ../../../modules/blox-plugin-reveal,
github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind -> ../../../modules/blox-tailwind,
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-decap-cms -> ../../../modules/blox-plugin-decap-cms,
github.com/HugoBlox/hugo-blox-builder/modules/blox-core -> ../../../modules/blox-core,
github.com/HugoBlox/hugo-blox-builder/modules/blox-seo -> ../../../modules/blox-seo" \
hugo && \
npm_config_yes=true npx pagefind --site "public" --output-subdir ../static/pagefind && \
hugo server --panicOnWarning --renderStaticToDisk -F --port 8081 --bind 0.0.0.0
trap SIGINT # Restore signal handling to previous before exit.