mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-20 02:16:40 +00:00
srgg
d2f774f01f
Implement configurable columns parameter (default 2) with progressive responsive grid: 1→2→3→4→5 columns across breakpoints. Replace the fixed flex layout with CSS Grid for better multi-column control.
Example to change the default layout from 2 cols to 3 cols:
```
- block: skills
content:
title: Skills & Hobbies
username: admin
design:
show_skill_percentage: false
columns: 3
```
44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
{{/* Hugo Blox: Languages */}}
|
|
{{/* 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}}
|
|
{{ $langs := $person_page.Params.languages }}
|
|
|
|
<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="flex items-center flex-col lg:flex-row gap-x-8">
|
|
{{ range $langs }}
|
|
<div class="flex flex-col items-center">
|
|
<div class="flex items-center justify-center w-28 h-28">
|
|
<svg class="transform -rotate-90" viewBox="0 0 288 288">
|
|
<circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
|
|
class="text-gray-200 dark:text-gray-700" />
|
|
<circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
|
|
class="text-primary-600 dark:text-primary-300"
|
|
style="stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{.percent}}/100))" />
|
|
</svg>
|
|
<span class="absolute text-3xl">{{.percent}}%</span>
|
|
</div>
|
|
<span class="text-1xl">{{.name}}</span>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
</div>
|