diff --git a/.github/workflows/ci-build-starters-matrix.yml b/.github/workflows/ci-build-starters-matrix.yml index c620a25d..ecdbfa6a 100644 --- a/.github/workflows/ci-build-starters-matrix.yml +++ b/.github/workflows/ci-build-starters-matrix.yml @@ -100,4 +100,4 @@ jobs: - name: Build ${{ matrix.starter.name }} working-directory: ${{ matrix.starter.path }} - run: hugo --minify + run: hugo --minify --panicOnWarning diff --git a/.github/workflows/ci-build-test-site.yml b/.github/workflows/ci-build-test-site.yml index fc7a857e..d7884a17 100644 --- a/.github/workflows/ci-build-test-site.yml +++ b/.github/workflows/ci-build-test-site.yml @@ -98,5 +98,5 @@ jobs: extended: true - name: Build - run: hugo --minify --templateMetrics --templateMetricsHints + run: hugo --minify --panicOnWarning --templateMetrics --templateMetricsHints working-directory: test diff --git a/.github/workflows/release-package-splitter.yml b/.github/workflows/release-package-splitter.yml index fb5ee33b..b21a845a 100644 --- a/.github/workflows/release-package-splitter.yml +++ b/.github/workflows/release-package-splitter.yml @@ -83,14 +83,25 @@ jobs: FIRST=true # tj-actions outputs space-separated list for DIR in $CHANGED_DIRS; do + # Normalize potential trailing slash + DIR="${DIR%/}" + + # Collapse to the starter root (first two path segments), e.g. starters/landing-page + IFS='/' read -r SEG1 SEG2 _ <<< "$DIR" + if [[ -n "$SEG1" && -n "$SEG2" ]]; then + ROOT="$SEG1/$SEG2" + else + ROOT="$DIR" + fi + # Only process if it's a known starter - if [[ -n "${STARTER_MAP[$DIR]}" ]]; then + if [[ -n "${STARTER_MAP[$ROOT]}" ]]; then if [ "$FIRST" = true ]; then FIRST=false else - JSON+="," + JSON+="," fi - JSON+="{\"local_path\":\"$DIR\",\"split_repository\":\"${STARTER_MAP[$DIR]}\"}" + JSON+="{\"local_path\":\"$ROOT\",\"split_repository\":\"${STARTER_MAP[$ROOT]}\"}" fi done JSON+="]" diff --git a/modules/blox-tailwind/blox/collection/block.html b/modules/blox-tailwind/blox/collection/block.html index 24413a63..ac09a3fd 100644 --- a/modules/blox-tailwind/blox/collection/block.html +++ b/modules/blox-tailwind/blox/collection/block.html @@ -16,10 +16,13 @@ {{ end }} {{/* Query */}} -{{ $query := site.RegularPages }} +{{ $query := site.Pages }} {{ $archive_page := "" }} {{/* Filters */}} +{{ $kinds := $block.content.filters.kinds | default (slice "page") }} +{{ $query = where $query "Kind" "in" $kinds }} + {{ if $block.content.page_type }} {{ $query = where $query "Type" $block.content.page_type }} {{ $archive_page = site.GetPage "Section" $block.content.page_type }} @@ -31,6 +34,20 @@ {{ $main_folder := index $folders 0 }} {{ $archive_page = site.GetPage "Section" $main_folder }} {{ end }} +{{ if $block.content.filters.tags }} + {{ $tags := $block.content.filters.tags }} + {{ $selected := slice }} + {{ range $tags }} + {{ $tag_page := site.GetPage (printf "tags/%s" (urlize .)) }} + {{ if $tag_page }} + {{ $selected = $selected | union $tag_page.Pages }} + {{ end }} + {{ end }} + {{ if gt (len $selected) 0 }} + {{ $query = $query | intersect $selected }} + {{ $archive_page = site.GetPage (printf "tags/%s" (urlize (index $tags 0))) }} + {{ end }} +{{ end }} {{ if $block.content.filters.tag }} {{ $archive_page = site.GetPage (printf "tags/%s" (urlize $block.content.filters.tag)) }} {{ $query = $query | intersect $archive_page.Pages }} diff --git a/modules/blox-tailwind/i18n/en.yaml b/modules/blox-tailwind/i18n/en.yaml index 04379c6b..d55ef490 100644 --- a/modules/blox-tailwind/i18n/en.yaml +++ b/modules/blox-tailwind/i18n/en.yaml @@ -26,19 +26,52 @@ - id: related translation: Related -# Callouts +# Callouts - All Obsidian-compatible types - id: callout_note translation: Note +- id: callout_abstract + translation: Abstract + +- id: callout_summary + translation: Summary + +- id: callout_info + translation: Info + +- id: callout_todo + translation: Todo + - id: callout_tip translation: Tip -- id: callout_important - translation: Important +- id: callout_success + translation: Success + +- id: callout_question + translation: Question - id: callout_warning translation: Warning +- id: callout_failure + translation: Failure + +- id: callout_danger + translation: Danger + +- id: callout_bug + translation: Bug + +- id: callout_example + translation: Example + +- id: callout_quote + translation: Quote + +- id: callout_important + translation: Important + - id: callout_caution translation: Caution diff --git a/modules/blox-tailwind/i18n/es.yaml b/modules/blox-tailwind/i18n/es.yaml index 32d7d1f6..567c952d 100644 --- a/modules/blox-tailwind/i18n/es.yaml +++ b/modules/blox-tailwind/i18n/es.yaml @@ -26,19 +26,52 @@ - id: related translation: Relacionado -# Callouts +# Callouts - All Obsidian-compatible types - id: callout_note translation: Nota +- id: callout_abstract + translation: Resumen + +- id: callout_summary + translation: Resumen + +- id: callout_info + translation: Info + +- id: callout_todo + translation: Pendiente + - id: callout_tip translation: Consejo -- id: callout_important - translation: Importante +- id: callout_success + translation: Éxito + +- id: callout_question + translation: Pregunta - id: callout_warning translation: Advertencia +- id: callout_failure + translation: Fallo + +- id: callout_danger + translation: Peligro + +- id: callout_bug + translation: Error + +- id: callout_example + translation: Ejemplo + +- id: callout_quote + translation: Cita + +- id: callout_important + translation: Importante + - id: callout_caution translation: Precaución diff --git a/modules/blox-tailwind/i18n/fr.yaml b/modules/blox-tailwind/i18n/fr.yaml index 2845cf93..065b01b9 100644 --- a/modules/blox-tailwind/i18n/fr.yaml +++ b/modules/blox-tailwind/i18n/fr.yaml @@ -26,19 +26,52 @@ - id: related translation: Sur le même sujet -# Callouts +# Callouts - All Obsidian-compatible types - id: callout_note translation: Note +- id: callout_abstract + translation: Résumé + +- id: callout_summary + translation: Résumé + +- id: callout_info + translation: Info + +- id: callout_todo + translation: À faire + - id: callout_tip translation: Conseil -- id: callout_important - translation: Important +- id: callout_success + translation: Succès + +- id: callout_question + translation: Question - id: callout_warning translation: Attention +- id: callout_failure + translation: Échec + +- id: callout_danger + translation: Danger + +- id: callout_bug + translation: Bug + +- id: callout_example + translation: Exemple + +- id: callout_quote + translation: Citation + +- id: callout_important + translation: Important + - id: callout_caution translation: Prudence diff --git a/modules/blox-tailwind/layouts/_partials/functions/get-build-id.html b/modules/blox-tailwind/layouts/_partials/functions/get-build-id.html new file mode 100644 index 00000000..18a8cbb9 --- /dev/null +++ b/modules/blox-tailwind/layouts/_partials/functions/get-build-id.html @@ -0,0 +1,5 @@ +{{/* + Get Build ID - Returns a consistent build identifier for the current build cycle. + This is cached across the entire build to prevent log duplication during dev rebuilds. +*/}} +{{- printf "%d" now.Unix -}} diff --git a/modules/blox-tailwind/layouts/_partials/functions/get_icon.html b/modules/blox-tailwind/layouts/_partials/functions/get_icon.html index fa518144..eaea85e0 100644 --- a/modules/blox-tailwind/layouts/_partials/functions/get_icon.html +++ b/modules/blox-tailwind/layouts/_partials/functions/get_icon.html @@ -20,10 +20,33 @@ {{ with index (index site.Data.icons.hb "icons") $name -}} {{ $icon = . }} {{ else }} - {{ with resources.GetMatch (path.Join "media" "icons" $pack (printf "%s.svg" $name)) }} + {{- $prefix := printf "media/icons/%s/" $pack -}} + {{- $icon_path := printf "%s%s.svg" $prefix $name -}} + {{- if not (fileExists (printf "assets/%s" $icon_path)) -}} + {{ $pageRef := "unknown location" }} + {{ if .Page }} + {{ if .Page.File }} + {{ if .Page.File.Path }} + {{ $pageRef = .Page.File.Path }} + {{ else if .Page.RelPermalink }} + {{ $pageRef = .Page.RelPermalink }} + {{ end }} + {{ else if .Page.RelPermalink }} + {{ $pageRef = .Page.RelPermalink }} + {{ end }} + {{ end }} + {{ partial "functions/logger" (dict + "page" .Page + "level" "warn" + "id" (printf "missing-icon-%s-%s" $pack $name) + "message" (printf "The icon `%s` was not found in `assets/media/icons/%s/`. Referenced in: %s" $name $pack $pageRef) + ) + }} + {{- end -}} + {{- $icon := resources.Get $icon_path -}} + {{ if $icon }} {{ $icon = .Content }} - {{else}} - {{ partial "functions/logger" (dict "page" $.Page "level" "warn" "message" (printf "The icon `%s.svg` was not found in your `assets/media/icons/%s/` folder" $name $pack)) }} + {{ else }} {{ $icon = index (index site.Data.icons.brands "icons") "hugo" }} {{ end }} {{ end }} diff --git a/modules/blox-tailwind/layouts/_partials/functions/logger.html b/modules/blox-tailwind/layouts/_partials/functions/logger.html index 98c23ea8..bcb2582e 100644 --- a/modules/blox-tailwind/layouts/_partials/functions/logger.html +++ b/modules/blox-tailwind/layouts/_partials/functions/logger.html @@ -1,51 +1,51 @@ -{{/* Hugo Blox Logger: centralized logging helper - Usage: partial "functions/logger" (dict "page" . "level" "warn" "message" (printf "..." args...)) - - level: "warn" (default) or "error" - - page: optional; current page. Defaults to dot. Used to detect adapter pages - - adapter: optional bool to force adapter-safe mode (e.g., from _content.gotmpl) -*/}} -{{- $level := lower (.level | default "warn") -}} -{{- $msg := .message | default "" -}} -{{- $page := .page | default . -}} -{{- $forceAdapter := .adapter | default false -}} -{{- $isDev := or hugo.IsServer (eq hugo.Environment "development") -}} +{{/* + Hugo Blox Logger: A pragmatic, centralized logging helper for Hugo. -{{/* Detect adapter-generated pages via explicit flag or page param */}} -{{- $isAdapter := $forceAdapter -}} -{{- if not $isAdapter -}} - {{- with $page -}} - {{- with .Params -}} - {{- if or (index . "hb_adapter") (eq (printf "%T" .) "map[string]interface {}" | and (index . "hb_adapter")) -}} - {{- $isAdapter = true -}} - {{- end -}} + This partial is the single source of truth for all build-time logging. + Hugo's template logging is limited to WARN and ERROR. INFO is only shown in the Dev HUD/JSON, not the CLI. + + Usage: + {{ partial "functions/logger" (dict + "page" . + "level" "info" | "warn" | "error" (default: "info") + "message" "Your log message here." + "id" "a-unique-id" (optional, for suppressible warnings) + "source" (dict "type" "shortcode|partial|template" "name" "callout|sections" ) (optional) + ) }} +*/}} +{{- $level := lower (.level | default "info") -}} +{{- $message := .message | default "" -}} +{{- $id := .id | default "" -}} +{{- $source := .source | default dict -}} +{{- $page := .page | default . -}} +{{- $isDev := hugo.IsServer -}} + +{{/* Store log entry for future debug widget/JSON, regardless of environment. */}} +{{- with $page -}} + {{- with .Store -}} + {{- $buildId := partialCached "functions/get-build-id.html" "hbx-build-id" -}} + {{- $log_entry := dict "level" $level "message" $message "page" ($.RelPermalink | default "/") "timestamp" now.Unix "id" $id "source" $source "buildId" $buildId -}} + {{- $current_logs := .Get "hbx_logs" | default slice -}} + {{- $currentBuildId := .Get "hbx_build_id" | default "" -}} + {{/* Clear logs if this is a new build cycle */}} + {{- if ne $currentBuildId $buildId -}} + {{- .Set "hbx_build_id" $buildId -}} + {{- $current_logs = slice -}} {{- end -}} + {{- .Set "hbx_logs" ($current_logs | append $log_entry) -}} {{- end -}} {{- end -}} -{{/* Store log entry for future debug widget */}} -{{- with $page -}} - {{- $log_entry := dict "level" $level "message" $msg "page" ($.RelPermalink | default "/") "timestamp" now.Unix -}} - {{- $current_logs := .Store.Get "hbx_logs" | default slice -}} - {{- .Store.Set "hbx_logs" ($current_logs | append $log_entry) -}} -{{- end -}} - -{{/* Multi-tier logging output */}} -{{- if $isDev -}} - {{/* Console logging for immediate dev feedback */}} - -{{- end -}} - +{{/* Emit to CLI using fmt with proper severity. Do not print INFO to CLI. */}} {{- if eq $level "error" -}} - {{- if not $isAdapter -}} - {{- errorf "%s" $msg -}} + {{- fmt.Errorf "HBX ERROR: %s" $message -}} +{{- else if eq $level "warn" -}} + {{- if $id -}} + {{- fmt.Warnidf $id "HBX WARN: %s" $message -}} {{- else -}} - {{- if $isDev -}}{{- end -}} + {{- fmt.Warnf "HBX WARN: %s" $message -}} {{- end -}} {{- else -}} - {{- if not $isAdapter -}} - {{- warnf "%s" $msg -}} - {{- else -}} - {{- if $isDev -}}{{- end -}} - {{- end -}} + {{/* info: no CLI output; visible via Dev HUD/JSON only */}} {{- end -}} {{- "" -}} diff --git a/modules/blox-tailwind/layouts/_partials/functions/render_callout.html b/modules/blox-tailwind/layouts/_partials/functions/render_callout.html new file mode 100644 index 00000000..ad1ccbbc --- /dev/null +++ b/modules/blox-tailwind/layouts/_partials/functions/render_callout.html @@ -0,0 +1,155 @@ +{{/* + Hugo Blox Builder Shared Callout Renderer + + Renders callouts with consistent styling for both shortcodes and render hooks. + + Parameters: + - type: The callout type (note, tip, important, warning, caution, or custom icon name) + - content: The callout content (HTML) + - title: Optional title for the callout + - source: "shortcode" or "renderhook" for context +*/}} + +{{ $type := (lower .type) | default "note" }} +{{ $content := .content }} +{{ $title := .title }} +{{ if or (not $title) (eq $title "") }} + {{/* Try i18n translation with "callout_" prefix, fall back to title case */}} + {{ $i18n_key := printf "callout_%s" $type }} + {{ $title = or (i18n $i18n_key) (title $type) }} +{{ end }} +{{ $source := .source | default "shortcode" }} + +{{/* Define icon and styling mappings for all Obsidian callout types */}} +{{ $alertConfigs := dict + "note" (dict + "icon" "pencil" + "class" "bg-blue-100 dark:bg-blue-900" + "textClass" "text-blue-600 dark:text-blue-300" + "borderClass" "border-blue-500" + ) + "abstract" (dict + "icon" "clipboard-document-list" + "class" "bg-cyan-100 dark:bg-cyan-900" + "textClass" "text-cyan-600 dark:text-cyan-300" + "borderClass" "border-cyan-500" + ) + "summary" (dict + "icon" "clipboard-document-list" + "class" "bg-cyan-100 dark:bg-cyan-900" + "textClass" "text-cyan-600 dark:text-cyan-300" + "borderClass" "border-cyan-500" + ) + "info" (dict + "icon" "information-circle" + "class" "bg-blue-100 dark:bg-blue-900" + "textClass" "text-blue-600 dark:text-blue-300" + "borderClass" "border-blue-500" + ) + "todo" (dict + "icon" "check-circle" + "class" "bg-blue-100 dark:bg-blue-900" + "textClass" "text-blue-600 dark:text-blue-300" + "borderClass" "border-blue-500" + ) + "tip" (dict + "icon" "light-bulb" + "class" "bg-emerald-100 dark:bg-emerald-900" + "textClass" "text-emerald-600 dark:text-emerald-300" + "borderClass" "border-emerald-500" + ) + "success" (dict + "icon" "check-circle" + "class" "bg-green-100 dark:bg-green-900" + "textClass" "text-green-600 dark:text-green-300" + "borderClass" "border-green-500" + ) + "question" (dict + "icon" "question-mark-circle" + "class" "bg-yellow-100 dark:bg-yellow-900" + "textClass" "text-yellow-700 dark:text-yellow-300" + "borderClass" "border-yellow-500" + ) + "warning" (dict + "icon" "exclamation-triangle" + "class" "bg-orange-100 dark:bg-orange-900" + "textClass" "text-orange-600 dark:text-orange-300" + "borderClass" "border-orange-500" + ) + "failure" (dict + "icon" "x-circle" + "class" "bg-red-100 dark:bg-red-900" + "textClass" "text-red-600 dark:text-red-300" + "borderClass" "border-red-500" + ) + "danger" (dict + "icon" "exclamation-triangle" + "class" "bg-red-100 dark:bg-red-900" + "textClass" "text-red-600 dark:text-red-300" + "borderClass" "border-red-500" + ) + "bug" (dict + "icon" "bug-ant" + "class" "bg-red-100 dark:bg-red-900" + "textClass" "text-red-600 dark:text-red-300" + "borderClass" "border-red-500" + ) + "example" (dict + "icon" "beaker" + "class" "bg-purple-100 dark:bg-purple-900" + "textClass" "text-purple-600 dark:text-purple-300" + "borderClass" "border-purple-500" + ) + "quote" (dict + "icon" "chat-bubble-left-right" + "class" "bg-gray-100 dark:bg-gray-800" + "textClass" "text-gray-600 dark:text-gray-300" + "borderClass" "border-gray-500" + ) + "important" (dict + "icon" "exclamation-circle" + "class" "bg-purple-100 dark:bg-purple-900" + "textClass" "text-purple-600 dark:text-purple-300" + "borderClass" "border-purple-500" + ) + "caution" (dict + "icon" "exclamation-triangle" + "class" "bg-red-100 dark:bg-red-900" + "textClass" "text-red-600 dark:text-red-300" + "borderClass" "border-red-500" + ) +}} + +{{/* Get configuration for this callout type, or use fallback */}} +{{ $config := index $alertConfigs $type }} +{{ $icon := $type }} +{{ $class := "bg-blue-100 dark:bg-blue-900" }} +{{ $textClass := "text-blue-600 dark:text-blue-300" }} +{{ $borderClass := "border-blue-500" }} + +{{ if $config }} + {{ $icon = $config.icon }} + {{ $class = $config.class }} + {{ $textClass = $config.textClass }} + {{ $borderClass = $config.borderClass }} +{{ end }} + +
+ + {{ partial "functions/get_icon" (dict "name" $icon "attributes" "height=\"24\"") }} + +
+ {{/* Display title if provided */}} + {{- with $title -}} +
+ {{- . -}} +
+ {{- end -}} + {{/* Display content */}} +
+ {{- $content -}} +
+
+
\ No newline at end of file diff --git a/modules/blox-tailwind/layouts/_partials/hbx/sections.html b/modules/blox-tailwind/layouts/_partials/hbx/sections.html index a71b80b5..da3d170c 100644 --- a/modules/blox-tailwind/layouts/_partials/hbx/sections.html +++ b/modules/blox-tailwind/layouts/_partials/hbx/sections.html @@ -31,7 +31,7 @@ {{- end -}} {{- $source = printf "data/pages/%s.yaml (sections_source)" $key -}} {{- else -}} - {{- partial "functions/logger" (dict "page" . "level" "warn" "message" (printf "HBX: sections_source '%s' not found under data/pages/" $key)) -}} + {{- partial "functions/logger" (dict "page" . "level" "warn" "id" (printf "sections-source-missing-%s" $key) "message" (printf "sections_source '%s' not found under data/pages/" $key) "source" (dict "type" "partial" "name" "hbx/sections")) -}} {{- end -}} {{- end -}} @@ -89,7 +89,7 @@ {{- end -}} {{- $sec = $merged -}} {{- else -}} - {{- partial "functions/logger" (dict "page" $ "level" "warn" "message" (printf "HBX: section ref '%s' not found under data/blocks/" $ref)) -}} + {{- partial "functions/logger" (dict "page" $ "level" "warn" "id" (printf "section-ref-missing-%s" $ref) "message" (printf "HBX: section ref '%s' not found under data/blocks/" $ref) "source" (dict "type" "partial" "name" "hbx/sections")) -}} {{- end -}} {{- end -}} {{- $resolved = $resolved | append $sec -}} @@ -98,8 +98,8 @@ {{- end -}} {{- if $sections -}} - {{- partial "functions/logger" (dict "page" . "level" "warn" "message" (printf "HBX: Using sections from %s for page %s (found %d sections)" $source $.RelPermalink (len $sections))) -}} + {{- partial "functions/logger" (dict "page" . "level" "info" "message" (printf "✅ Using sections from %s for page %s (found %d sections)" $source $.RelPermalink (len $sections)) "source" (dict "type" "partial" "name" "hbx/sections")) -}} {{- else -}} - {{- partial "functions/logger" (dict "page" . "level" "warn" "message" (printf "HBX: No sections found for page %s (checked %s)" $.RelPermalink $source)) -}} + {{- partial "functions/logger" (dict "page" . "level" "warn" "id" (printf "sections-none-%s" $.RelPermalink) "message" (printf "HBX: No sections found for page %s (checked %s)" $.RelPermalink $source) "source" (dict "type" "partial" "name" "hbx/sections")) -}} {{- end -}} {{- return $sections -}} diff --git a/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-export.html b/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-export.html index c38c63c6..5c9254b0 100644 --- a/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-export.html +++ b/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-export.html @@ -1,42 +1,67 @@ -{{/* Hugo Blox: Export Debug Logs for Future Debug Widget */}} -{{/* This hook collects all HBX logs and exports them to a JSON file for tooling */}} - -{{- if hugo.IsServer -}} - {{/* Collect all logs from all pages */}} - {{- $all_logs := slice -}} +{{/* Hugo Blox: Export Debug Logs for Dev HUD (window var) */}} +{{- if and hugo.IsServer (site.Params.hbx.log.export | default true) -}} + {{- /* Collect all logs from all pages (site-wide) */ -}} + {{- $entries := slice -}} {{- range .Site.Pages -}} - {{- $page_logs := .Store.Get "hbx_logs" | default slice -}} - {{- $all_logs = $all_logs | append $page_logs -}} + {{- with .Store -}} + {{- with .Get "hbx_logs" -}} + {{- $entries = $entries | append . -}} + {{- end -}} + {{- end -}} {{- end -}} - - {{- if $all_logs -}} - {{/* Create debug export as a resource for tooling */}} - {{- $debug_data := dict "logs" $all_logs "build_time" now.Unix "hugo_version" hugo.Version -}} - {{- $debug_json := $debug_data | jsonify -}} - {{- $debug_resource := resources.FromString "hbx-debug.json" $debug_json -}} - {{- $debug_resource.Publish -}} - - {{/* Also emit to console for immediate visibility */}} - + + {{- /* Summarize dependencies */ -}} + {{- $deps := slice -}} + {{- range $i, $d := hugo.Deps -}} + {{- $dep := dict "path" $d.Path "version" $d.Version "vendor" $d.Vendor -}} + {{- with $d.Owner -}} + {{- $dep = merge $dep (dict "owner_path" .Path) -}} + {{- end -}} + {{- with $d.Replace -}} + {{- $dep = merge $dep (dict "replace_path" .Path) -}} + {{- end -}} + {{- with $d.Time -}} + {{- $dep = merge $dep (dict "time" (printf "%v" .)) -}} + {{- end -}} + {{- $deps = $deps | append $dep -}} {{- end -}} + + {{- /* Detect blox-tailwind module version if present */ -}} + {{- $bloxTW := dict -}} + {{- range $deps -}} + {{- $p := .path -}} + {{- if and $p (in $p "blox-tailwind") -}} + {{- $bloxTW = dict "path" .path "version" .version -}} + {{- end -}} + {{- end -}} + + {{- /* Current page information */ -}} + {{- $filePath := "" -}} + {{- with .File -}} + {{- $filePath = .Path -}} + {{- end -}} + {{- $buildId := partialCached "functions/get-build-id.html" "hbx-build-id" -}} + {{- $currentPage := dict + "path" .RelPermalink + "type" .Type + "layout" (.Layout | default "") + "kind" .Kind + "section" .Section + "title" .Title + "file" $filePath + "buildId" $buildId + -}} + + {{- $payload := dict + "version" 1 + "generatedAt" (now.UTC.Format "2006-01-02T15:04:05Z07:00") + "hugo" (dict "version" hugo.Version "goVersion" hugo.GoVersion) + "deps" $deps + "modules" (dict "bloxTailwind" $bloxTW) + "entries" $entries + "currentPage" $currentPage + -}} + {{- end -}} diff --git a/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-hud.html b/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-hud.html new file mode 100644 index 00000000..3e72dec3 --- /dev/null +++ b/modules/blox-tailwind/layouts/_partials/hooks/body-end/hbx-debug-hud.html @@ -0,0 +1,298 @@ +{{/* Hugo Blox: Dev HUD (floating button + panel). Dev only. */}} +{{- if hugo.IsServer -}} + +{{- end -}} diff --git a/modules/blox-tailwind/layouts/_partials/libraries.html b/modules/blox-tailwind/layouts/_partials/libraries.html index cb5067ba..24d6aaaf 100644 --- a/modules/blox-tailwind/layouts/_partials/libraries.html +++ b/modules/blox-tailwind/layouts/_partials/libraries.html @@ -25,7 +25,7 @@ {{ if $client_jsx }} {{/* Build the client-side JSX using Hugo's official integration */}} {{ $jsx_opts := dict - "targetPath" (printf "js/%s-preact.js" $block_type) + "targetPath" (printf "assets/js/preact-built/%s.js" $block_type) "JSX" "automatic" "JSXImportSource" "preact" "format" "iife" diff --git a/modules/blox-tailwind/layouts/_partials/tailwind_sources.html b/modules/blox-tailwind/layouts/_partials/tailwind_sources.html index 094f8c87..a15bd6e6 100644 --- a/modules/blox-tailwind/layouts/_partials/tailwind_sources.html +++ b/modules/blox-tailwind/layouts/_partials/tailwind_sources.html @@ -2,50 +2,64 @@ {{/* Documentation: https://hugoblox.com/docs/ */}} {{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}} -{{/* +{{/* This partial generates Tailwind CSS @source directives that tell Tailwind where to scan for CSS classes. -CRITICAL: Tailwind scans the actual filesystem (relative to main.css), while Hugo operates on a virtual -filesystem with module mounts. This file bridges that gap by translating Hugo's virtual paths to actual -filesystem paths that Tailwind can find. - -Environments handled: -1. Test site (HUGO_BLOX_TEST_SITE=true): runs from test/, so ../modules/blox-tailwind/ for theme files -2. Starter sites (HUGO_BLOX_MONOREPO=true): run from starters/[name]/, so ../../../modules/blox-tailwind/ -3. End-user sites: use virtual mounted paths from Hugo modules (standard content/, layouts/, assets/) - -Without this, Tailwind would miss classes from: - * Hugo Blox theme templates (layouts/, blox/) - * Preact components (blox/** /*.jsx) - intentional space due to Hugo bug thinking '* /' is commend end - * Site content (content/** /*.md) - intentional space due to Hugo bug thinking '* /' is commend end - * Generated HTML classes (hugo_stats.json) +It provides a robust bridge between Hugo's virtual filesystem (which includes module mounts) +and Tailwind's real filesystem scanner. */}} -{{ $is_monorepo := eq (os.Getenv "HUGO_BLOX_MONOREPO") "true" }} -{{ $is_test_site := eq (os.Getenv "HUGO_BLOX_TEST_SITE") "true" }} {{ $paths := slice }} -{{/* 1. Always add paths relative to the current site's root (content, layouts, etc.) */}} +{{/* 1. Always scan the site's source files. */}} {{ $paths = $paths | append `content/**/*.md` }} {{ $paths = $paths | append `layouts/**/*.html` }} {{ $paths = $paths | append `assets/js/**/*.js` }} +{{ $paths = $paths | append `assets/js/**/*.jsx` }} +{{ $paths = $paths | append `assets/js/**/*.tsx` }} {{ $paths = $paths | append `hugo_stats.json` }} -{{/* 2. If in monorepo, add relative paths to the blox-tailwind module source */}} -{{ if $is_monorepo }} - {{ $module_path_prefix := "" }} - {{ if $is_test_site }} - {{/* Test site is at `test/`, so one level up to repo root */}} - {{ $module_path_prefix = "../" }} - {{ else }} - {{/* Starter sites are at `starters/[name]/`, so three levels up */}} - {{ $module_path_prefix = "../../../" }} +{{/* +2. Crucially, scan Hugo's generated JS output from Preact components. + These files are built by Hugo's `js.Build` into a predictable location within the + project's `assets` directory, making them a reliable source for Tailwind to scan. + This step happens before Tailwind runs, thanks to `templates.Defer` in `site_head.html`. +*/}} +{{ $paths = $paths | append `assets/js/preact-built/**/*.js` }} + +{{/* +3. Inline sources: extract class attributes from Preact JSX/TSX and embed them + directly so Tailwind can always see them regardless of FS layout. +*/}} +{{ $jsx_files := resources.Match "js/hbx/**/*.jsx" }} +{{ $tsx_files := resources.Match "js/hbx/**/*.tsx" }} + +{{ $extracted_classes := slice }} +{{ range $f := $jsx_files }} + {{ $code := $f.Content }} + {{ $matches := findRE `class(?:Name)?\s*=\s*"([^"]+)"` $code }} + {{ range $m := $matches }} + {{ $cls := replaceRE `^class(?:Name)?\s*=\s*"([^"]+)"$` `$1` $m }} + {{ $classes := split $cls " " }} + {{ range $class := $classes }} + {{ $extracted_classes = $extracted_classes | append $class }} + {{ end }} {{ end }} - - {{ $module_path := printf "%smodules/blox-tailwind" $module_path_prefix }} - {{ $paths = $paths | append (printf `%s/layouts/**/*.html` $module_path) }} - {{ $paths = $paths | append (printf `%s/assets/js/**/*.js` $module_path) }} - {{ $paths = $paths | append (printf `%s/blox/**/*.html` $module_path) }} - {{ $paths = $paths | append (printf `%s/blox/**/*.jsx` $module_path) }} +{{ end }} +{{ range $f := $tsx_files }} + {{ $code := $f.Content }} + {{ $matches := findRE `class(?:Name)?\s*=\s*"([^"]+)"` $code }} + {{ range $m := $matches }} + {{ $cls := replaceRE `^class(?:Name)?\s*=\s*"([^"]+)"$` `$1` $m }} + {{ $classes := split $cls " " }} + {{ range $class := $classes }} + {{ $extracted_classes = $extracted_classes | append $class }} + {{ end }} + {{ end }} +{{ end }} + +{{ $extracted_classes = $extracted_classes | uniq }} +{{ range $class := $extracted_classes }} +@source inline("{{ $class }}"); {{ end }} {{/* Generate the @source rules */}} diff --git a/modules/blox-tailwind/layouts/_shortcodes/callout.html b/modules/blox-tailwind/layouts/_shortcodes/callout.html index 5d14ac65..df22a5b1 100644 --- a/modules/blox-tailwind/layouts/_shortcodes/callout.html +++ b/modules/blox-tailwind/layouts/_shortcodes/callout.html @@ -23,7 +23,19 @@ */}} {{/* Log deprecation warning */}} -{{ partial "functions/logger" (dict "page" .Page "level" "warn" "message" "The callout shortcode is deprecated. Use standard Markdown alert syntax instead: > [!NOTE]") }} +{{ $src := "/" }} +{{ with .Page }} + {{ with .File }} + {{ $src = .Path }} + {{ end }} +{{ end }} +{{ partial "functions/logger" (dict + "page" .Page + "level" "warn" + "id" "callout-deprecated" + "message" (printf "The `callout` shortcode is deprecated in %s. Use standard Markdown alert syntax instead, such as `> [!NOTE]`." $src) + "source" (dict "type" "shortcode" "name" "callout" "docs" "https://docs.hugoblox.com/reference/markdown/#callouts") +) }} {{/* Get callout type from parameter */}} {{ $type := (.Get 0) | default "note" }} diff --git a/modules/blox-tailwind/layouts/baseof.html b/modules/blox-tailwind/layouts/baseof.html index b445d946..d86fb0c1 100644 --- a/modules/blox-tailwind/layouts/baseof.html +++ b/modules/blox-tailwind/layouts/baseof.html @@ -33,5 +33,9 @@ {{/* EXTENSIBILITY HOOK: BODY-END */}} {{ partial "functions/get_hook" (dict "hook" "body-end" "context" .) }} + + {{/* HBX Dev: ensure debug export and HUD are injected in dev */}} + {{ partial "hooks/body-end/hbx-debug-export.html" . }} + {{ partial "hooks/body-end/hbx-debug-hud.html" . }} diff --git a/modules/blox-tailwind/layouts/partials/functions/render_callout.html b/modules/blox-tailwind/layouts/partials/functions/render_callout.html deleted file mode 100644 index 4f422d6d..00000000 --- a/modules/blox-tailwind/layouts/partials/functions/render_callout.html +++ /dev/null @@ -1,80 +0,0 @@ -{{/* - Hugo Blox Builder Shared Callout Renderer - - Renders callouts with consistent styling for both shortcodes and render hooks. - - Parameters: - - type: The callout type (note, tip, important, warning, caution, or custom icon name) - - content: The callout content (HTML) - - title: Optional title for the callout - - source: "shortcode" or "renderhook" for context -*/}} - -{{ $type := (lower .type) | default "note" }} -{{ $content := .content }} -{{ $title := .title }} -{{ if not $title }} - {{/* Try i18n translation with "callout_" prefix, fall back to title case */}} - {{ $i18n_key := printf "callout_%s" $type }} - {{ $title = or (i18n $i18n_key) (title $type) }} -{{ end }} -{{ $source := .source | default "shortcode" }} - -{{/* Define icon and styling mappings for different alert types */}} -{{ $alertConfigs := dict - "note" (dict - "icon" "information-circle" - "class" "bg-primary-100 dark:bg-primary-900" - "textClass" "text-primary-600 dark:text-primary-300" - ) - "tip" (dict - "icon" "light-bulb" - "class" "bg-green-100 dark:bg-green-900" - "textClass" "text-green-600 dark:text-green-300" - ) - "important" (dict - "icon" "exclamation-circle" - "class" "bg-purple-100 dark:bg-purple-900" - "textClass" "text-purple-600 dark:text-purple-300" - ) - "warning" (dict - "icon" "exclamation-triangle" - "class" "bg-yellow-100 dark:bg-yellow-900" - "textClass" "text-red-400" - ) - "caution" (dict - "icon" "exclamation-triangle" - "class" "bg-red-100 dark:bg-red-900" - "textClass" "text-red-600 dark:text-red-300" - ) -}} - -{{/* Get configuration for this callout type, or use custom icon */}} -{{ $config := index $alertConfigs $type }} -{{ $icon := $type }} -{{ $class := "bg-primary-100 dark:bg-primary-900" }} -{{ $textClass := "text-primary-600 dark:text-primary-300" }} - -{{ if $config }} - {{ $icon = $config.icon }} - {{ $class = $config.class }} - {{ $textClass = $config.textClass }} -{{ end }} - -
- - {{ partial "functions/get_icon" (dict "name" $icon "attributes" "height=\"24\"") }} - -
- {{/* Display title if provided */}} - {{- with $title -}} -
- {{- . -}} -
- {{- end -}} - {{/* Display content */}} -
- {{- $content -}} -
-
-
\ No newline at end of file diff --git a/scripts/view-starter-dev.sh b/scripts/view-starter-dev.sh index f319e52e..9df021ae 100755 --- a/scripts/view-starter-dev.sh +++ b/scripts/view-starter-dev.sh @@ -106,6 +106,7 @@ HUGO_ARGS=( if [ "$DEBUG_MODE" = true ]; then HUGO_ARGS+=( + --panicOnWarning --logLevel debug --templateMetrics --templateMetricsHints diff --git a/scripts/view-test.sh b/scripts/view-test.sh index 0b76f1d0..b4d49b1c 100755 --- a/scripts/view-test.sh +++ b/scripts/view-test.sh @@ -84,6 +84,7 @@ HUGO_ARGS=( if [ "$DEBUG_MODE" = true ]; then HUGO_ARGS+=( + --panicOnWarning --logLevel debug --templateMetrics --templateMetricsHints diff --git a/starters/academic-cv/config/_default/menus.yaml b/starters/academic-cv/config/_default/menus.yaml index 5c5c9593..9ba6eee5 100644 --- a/starters/academic-cv/config/_default/menus.yaml +++ b/starters/academic-cv/config/_default/menus.yaml @@ -22,6 +22,6 @@ main: - name: Projects url: projects/ weight: 30 - - name: Teaching + - name: Courses url: courses/ weight: 40 diff --git a/starters/academic-cv/content/_index.md b/starters/academic-cv/content/_index.md index 322ef2a7..4356c673 100644 --- a/starters/academic-cv/content/_index.md +++ b/starters/academic-cv/content/_index.md @@ -118,6 +118,6 @@ sections: design: card: # Card background color (CSS class) - css_class: 'bg-primary-700' + css_class: 'bg-primary-300' css_style: '' --- diff --git a/starters/academic-cv/content/blog/second-brain/index.md b/starters/academic-cv/content/blog/second-brain/index.md index a96a877b..f174a9f6 100644 --- a/starters/academic-cv/content/blog/second-brain/index.md +++ b/starters/academic-cv/content/blog/second-brain/index.md @@ -115,24 +115,21 @@ renders as Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings. -By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside. +Use the `> [!NOTE]` syntax to create a callout. ```markdown -{{%/* callout note */%}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{%/* /callout */%}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ``` renders as -{{% callout note %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. Or use the `warning` callout type so your readers don't miss critical details: -{{% callout warning %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!WARNING] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ## Did you find this page helpful? Consider sharing it 🙌 diff --git a/starters/academic-cv/content/courses/_index.md b/starters/academic-cv/content/courses/_index.md index 2d5dd43a..ac725cc5 100644 --- a/starters/academic-cv/content/courses/_index.md +++ b/starters/academic-cv/content/courses/_index.md @@ -4,8 +4,9 @@ summary: My courses type: landing cascade: - - _target: - kind: page + - target: + path: '{/courses/*/**}' + type: docs params: show_breadcrumb: true @@ -15,9 +16,13 @@ sections: content: title: Courses filters: - folders: - - courses + tag: Course + kinds: + - section design: view: article-grid - columns: 2 + show_read_time: false + show_date: false + show_read_more: false + columns: 1 --- diff --git a/starters/academic-cv/content/courses/hugo-blox/_index.md b/starters/academic-cv/content/courses/hugo-blox/_index.md new file mode 100644 index 00000000..881ecd04 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/_index.md @@ -0,0 +1,28 @@ +--- +linkTitle: Hugo Blox +title: Learn Hugo Blox in 10 minutes! +date: 2025-09-24 +type: docs + +tags: + - Hugo Blox + - Course + +content_meta: + content_type: 'Course' + difficulty: 'Beginner' + prerequisites: ['Markdown'] + trending: false +--- + +👋 Welcome to your shiny new site. Ready to learn more? + + + +This course provides a brief introduction to creating and editing your site with Hugo Blox. For full documentation, refer to the [Hugo Blox Documentation](https://docs.hugoblox.com/). + +## Next + +{{< cards >}} + {{< card url="getting-started" title="Get Started" icon="document-text" subtitle="Setup your new site in just 5 minutes!" >}} +{{< /cards >}} diff --git a/starters/academic-cv/content/courses/js/featured.jpg b/starters/academic-cv/content/courses/hugo-blox/featured.jpg similarity index 100% rename from starters/academic-cv/content/courses/js/featured.jpg rename to starters/academic-cv/content/courses/hugo-blox/featured.jpg diff --git a/starters/academic-cv/content/courses/hugo-blox/getting-started.md b/starters/academic-cv/content/courses/hugo-blox/getting-started.md new file mode 100644 index 00000000..511eb215 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/getting-started.md @@ -0,0 +1,38 @@ +--- +title: Getting Started +date: 2024-02-17 +weight: 1 +type: docs +--- + +## Quick Start from Template + +{{% steps %}} + +### Create a site + +[Click to choose your starting template](https://hugoblox.com/templates) + +### Configure your new site + +[Configure your site name, description, and menu.](https://docs.hugoblox.com/tutorial/blog/) + +### Add your content + +[Edit the homepage and add your documentation pages.](https://docs.hugoblox.com/tutorial/blog/) + +### Publish your site + +Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository. + +{{% /steps %}} + +## Next + +Let's customize your new site: + +{{< cards >}} + {{< card url="../guide/project-structure" title="Project Structure" icon="document-duplicate" >}} + {{< card url="../guide/configuration" title="Configuration" icon="adjustments-vertical" >}} + {{< card url="../guide/formatting" title="Create content" icon="document-duplicate" >}} +{{< /cards >}} diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/_index.md b/starters/academic-cv/content/courses/hugo-blox/guide/_index.md new file mode 100644 index 00000000..223a44c4 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/_index.md @@ -0,0 +1,12 @@ +--- +title: Guide +weight: 2 +sidebar: + open: true +--- + +{{< cards >}} + {{< card url="formatting" title="Formatting" icon="document-duplicate" >}} + {{< card url="project-structure" title="Project Structure" icon="document-duplicate" >}} + {{< card url="configuration" title="Configuration" icon="adjustments-vertical" >}} +{{< /cards >}} diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/configuration.md b/starters/academic-cv/content/courses/hugo-blox/guide/configuration.md new file mode 100644 index 00000000..d66e59c5 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/configuration.md @@ -0,0 +1,54 @@ +--- +title: Configuration +weight: 2 +--- + +The configuration of your site can be found in `config/_default/`. + + + +## Full Documentation + +See https://docs.hugoblox.com/getting-started/customize/ + +## Navigation + +### Menu + +See https://docs.hugoblox.com/getting-started/customize/#menu-items + +## Left Sidebar + +Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page. + +### Extra Links + +Additional links can be added under the `sidebar` section of your `config/_default/menus.yaml`: + +```yaml +menu: + sidebar: + - name: "Need help?" + params: + type: separator + weight: 1 + - name: "A page" + pageRef: "/page-filename-here" + weight: 2 + - name: "An external link ↗" + url: "https://hugoblox.com" + weight: 3 +``` + +## Right Sidebar + +A table of contents is automatically generated from the headings your Markdown file. + +It can optionally be disabled by setting `toc: false` in the front matter of a page: + +```yaml +--- +title: My Page +toc: false +--- +``` diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/_index.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/_index.md new file mode 100644 index 00000000..13db4665 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/_index.md @@ -0,0 +1,13 @@ +--- +title: Formatting +--- + +Write rich, engaging content with Markdown and re-usable Hugo Blox components (shortcodes): + +{{< cards >}} + {{< card url="button" title="Button" icon="cursor-arrow-rays" >}} + {{< card url="callout" title="Callout" icon="warning" >}} + {{< card url="cards" title="Cards" icon="card" >}} + {{< card url="toggle" title="Spoiler" icon="chevron-right" >}} + {{< card url="steps" title="Steps" icon="one" >}} +{{< /cards >}} diff --git a/starters/academic-cv/content/courses/js/ambient-piano.mp3 b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/ambient-piano.mp3 similarity index 100% rename from starters/academic-cv/content/courses/js/ambient-piano.mp3 rename to starters/academic-cv/content/courses/hugo-blox/guide/formatting/ambient-piano.mp3 diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/button.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/button.md new file mode 100644 index 00000000..607276e7 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/button.md @@ -0,0 +1,202 @@ +--- +title: Buttons +linkTitle: Buttons +--- + +A modern, customizable button shortcode with gradient styling, icons, and smart link handling. + + + +## Basic Usage + +{{< button url="/contact" >}}Contact Us{{< /button >}} + +{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}} + +The above buttons are created with: + +```go-html-template +{{}}Contact Us{{}} + +{{}}Visit External Site{{}} +``` + +## Style Variants + +### Primary (Default) + +{{< button url="#" style="primary" >}}Primary Button{{< /button >}} + +```go-html-template +{{}}Primary Button{{}} +``` + +### Secondary + +{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}} + +```go-html-template +{{}}Secondary Button{{}} +``` + +### Outline + +{{< button url="#" style="outline" >}}Outline Button{{< /button >}} + +```go-html-template +{{}}Outline Button{{}} +``` + +### Ghost + +{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}} + +```go-html-template +{{}}Ghost Button{{}} +``` + +## Sizes + +### Small + +{{< button url="#" size="sm" >}}Small Button{{< /button >}} + +### Medium (Default) + +{{< button url="#" size="md" >}}Medium Button{{< /button >}} + +### Large + +{{< button url="#" size="lg" >}}Large Button{{< /button >}} + +### Extra Large + +{{< button url="#" size="xl" >}}Extra Large{{< /button >}} + +```go-html-template +{{}}Small Button{{}} +{{}}Medium Button{{}} +{{}}Large Button{{}} +{{}}Extra Large{{}} +``` + +## Alignment + +### Left (Default) + +{{< button url="#" align="left" >}}Left Aligned{{< /button >}} + +### Center + +{{< button url="#" align="center" >}}Center Aligned{{< /button >}} + +### Right + +{{< button url="#" align="right" >}}Right Aligned{{< /button >}} + +```go-html-template +{{}}Left Aligned{{}} +{{}}Center Aligned{{}} +{{}}Right Aligned{{}} +``` + +## With Icons + +### Icon Before Text + +{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}} + +### Icon After Text + +{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}} + +```go-html-template +{{}}Download{{}} +{{}}Continue{{}} +``` + +## Rounded Corners + +### Small Radius + +{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}} + +### Medium Radius (Default) + +{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}} + +### Large Radius + +{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}} + +### Pill Shape + +{{< button url="#" rounded="full" >}}Pill Button{{< /button >}} + +```go-html-template +{{}}Small Radius{{}} +{{}}Medium Radius{{}} +{{}}Large Radius{{}} +{{}}Pill Button{{}} +``` + +## Advanced Examples + +### Call-to-Action Button + +{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}} + +```go-html-template +{{}}Get Started Today{{}} +``` + +### External Link with New Tab + +{{< button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}} + +```go-html-template +{{}}View on GitHub{{}} +``` + +### Download Button + +{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}} + +```go-html-template +{{}}Download PDF{{}} +``` + +## Parameters + +| Parameter | Type | Default | Description | +| --------------- | ------- | ------------- | ----------------------------------------------------------- | +| `url` | string | `#` | **Required.** Button destination URL (internal or external) | +| `text` | string | Inner content | Button text (overrides shortcode content) | +| `new_tab` | boolean | `false` | Whether to open link in new tab | +| `style` | string | `primary` | Button style: `primary`, `secondary`, `outline`, `ghost` | +| `size` | string | `md` | Button size: `sm`, `md`, `lg`, `xl` | +| `align` | string | `left` | Button alignment: `left`, `center`, `right` | +| `icon` | string | - | Icon name from [Hero Icons](https://heroicons.com/) | +| `icon_position` | string | `left` | Icon position: `left`, `right` | +| `rounded` | string | `md` | Border radius: `sm`, `md`, `lg`, `xl`, `full` | +| `disabled` | boolean | `false` | Whether button should be disabled | + +## Security Features + +The button shortcode automatically handles security for external links: + +- **External links** get `rel="noreferrer"` attribute +- **External links opening in new tab** get `rel="noopener noreferrer"` +- **Internal links opening in new tab** get `rel="noopener"` + +This ensures safe navigation while maintaining functionality. + +## Accessibility + +The button shortcode includes built-in accessibility features: + +- Proper `role="button"` attribute +- `aria-label` support +- Keyboard focus indicators +- High contrast focus rings +- Disabled state handling diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/callout.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/callout.md new file mode 100644 index 00000000..c41715bd --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/callout.md @@ -0,0 +1,218 @@ +--- +title: Callouts +linkTitle: Callouts +--- + +Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability. + +Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles. + + + +## Usage + +### Basic Callout Types + +Hugo Blox supports all 15+ callout types from [Obsidian's documentation](https://help.obsidian.md/callouts): + +**Information & Notes:** + +```markdown +> [!NOTE] +> This is a note callout with important information that users should know. +``` + +> [!NOTE] +> This is a note callout with important information that users should know. + +```markdown +> [!INFO] +> Alternative info callout - same styling as NOTE. +``` + +> [!INFO] +> Alternative info callout - same styling as NOTE. + +```markdown +> [!ABSTRACT] +> Use for abstracts, summaries, or TL;DR sections. +``` + +> [!ABSTRACT] +> Use for abstracts, summaries, or TL;DR sections. + +**Actions & Tasks:** + +```markdown +> [!TODO] +> This is something that needs to be done. +``` + +> [!TODO] +> This is something that needs to be done. + +```markdown +> [!TIP] +> Here's a helpful tip to make your workflow more efficient! +``` + +> [!TIP] +> Here's a helpful tip to make your workflow more efficient! + +```markdown +> [!SUCCESS] +> Great job! This operation completed successfully. +``` + +> [!SUCCESS] +> Great job! This operation completed successfully. + +**Questions & Interactive:** + +```markdown +> [!QUESTION] +> What do you think about this approach? Let us know! +``` + +> [!QUESTION] +> What do you think about this approach? Let us know! + +```markdown +> [!EXAMPLE] +> Here's a practical example of how to implement this feature. +``` + +> [!EXAMPLE] +> Here's a practical example of how to implement this feature. + +```markdown +> [!QUOTE] +> "The best way to predict the future is to invent it." - Alan Kay +``` + +> [!QUOTE] +> "The best way to predict the future is to invent it." - Alan Kay + +**Warnings & Errors:** + +```markdown +> [!WARNING] +> Be careful! This action might have unexpected consequences. +``` + +> [!WARNING] +> Be careful! This action might have unexpected consequences. + +```markdown +> [!CAUTION] +> Danger! This operation is irreversible and could cause data loss. +``` + +> [!CAUTION] +> Danger! This operation is irreversible and could cause data loss. + +```markdown +> [!IMPORTANT] +> This is critical information that users must understand to proceed. +``` + +> [!IMPORTANT] +> This is critical information that users must understand to proceed. + +```markdown +> [!DANGER] +> This is extremely dangerous - proceed with extreme caution! +``` + +> [!DANGER] +> This is extremely dangerous - proceed with extreme caution! + +```markdown +> [!FAILURE] +> This operation failed. Check your configuration and try again. +``` + +> [!FAILURE] +> This operation failed. Check your configuration and try again. + +```markdown +> [!BUG] +> Known issue: This feature doesn't work properly in Safari < 14. +``` + +> [!BUG] +> Known issue: This feature doesn't work properly in Safari < 14. + +### Custom Titles + +You can customize the title of any callout: + +```markdown +> [!WARNING]+ Custom Warning Title +> This warning has a custom title instead of just "Warning". +``` + +> [!WARNING]+ Custom Warning Title +> This warning has a custom title instead of just "Warning". + +### Legacy Syntax (Deprecated) + +The old shortcode syntax still works but shows a deprecation warning: + +```markdown +{{}} +This still works but is deprecated. Use the Markdown syntax above! +{{}} +``` + +### CSS Customization + +Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has: + +- Base class: `.callout` +- Type-specific data attribute: `data-callout="note"` +- Component classes: `.callout-icon`, `.callout-title`, `.callout-content`, `.callout-body` + +**Custom CSS Example** (add to your `assets/css/custom.css`): + +```css +/* Customize NOTE callouts */ +.callout[data-callout="note"] { + border-left-width: 8px; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); +} + +/* Make SUCCESS callouts pulse */ +.callout[data-callout="success"] { + animation: pulse 2s infinite; +} + +/* Custom icon styling */ +.callout-icon svg { + transition: transform 0.2s; +} + +.callout:hover .callout-icon svg { + transform: scale(1.1); +} + +/* Dark mode overrides */ +@media (prefers-color-scheme: dark) { + .callout[data-callout="warning"] { + background-color: rgb(92 25 2); + border-color: rgb(245 158 11); + } +} +``` + +This approach matches [Obsidian's CSS customization system](https://help.obsidian.md/callouts), ensuring your styles work across platforms. + +### Benefits of the New Syntax + +- **Portable**: Works with GitHub, Obsidian, and other Markdown editors +- **Standard**: Uses widely-adopted Markdown callout syntax +- **Clean**: No Hugo-specific shortcodes needed +- **Future-proof**: Supported by the latest Hugo versions (0.132.0+) +- **Customizable**: Semantic CSS classes and data attributes for easy styling +- **Complete**: All 15+ Obsidian callout types supported +- **Multilingual**: Callout titles are automatically translated based on your site's language (and can be customized in the language packs) diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/cards.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/cards.md new file mode 100644 index 00000000..08af73d0 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/cards.md @@ -0,0 +1,31 @@ +--- +title: Cards +linkTitle: Cards +--- + +A Hugo extension to create cards. Cards can be shown as links or as plain text. + +## Usage + +{{< cards >}} + {{< card url="../" title="Learn Shortcodes" icon="academic-cap" >}} + {{< card url="" title="A card without an icon or link" >}} +{{< /cards >}} + +is rendered by: + +``` +{{}} + {{}} + {{}} +{{}} +``` + +## Options + +| Parameter | Description | +|------------|------------------------------------------------------------------------| +| `icon` | Name of the icon. Defaults to [Hero Icon Pack](https://heroicons.com/) | +| `title` | Title heading for the card. | +| `subtitle` | Subtitle heading (supports Markdown). | +| `url` | URL | diff --git a/starters/academic-cv/content/courses/js/index.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/media.md similarity index 89% rename from starters/academic-cv/content/courses/js/index.md rename to starters/academic-cv/content/courses/hugo-blox/guide/formatting/media.md index 7b01e45c..4fe7b414 100644 --- a/starters/academic-cv/content/courses/js/index.md +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/media.md @@ -1,18 +1,7 @@ --- -title: Learn JavaScript -summary: Easily learn JavaScript in 10 minutes! +title: Embed Media +summary: Easily embed audio and video media in Hugo sites date: 2023-10-24 -type: docs -math: false -tags: - - JavaScript -image: - caption: 'Embed rich media such as videos and LaTeX math' -content_meta: - content_type: 'Tutorial' - difficulty: 'Beginner' - prerequisites: ['HTML'] - trending: true --- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest. @@ -71,9 +60,8 @@ Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enabl To render _inline_ or _block_ math, wrap your LaTeX math with `{{}}$...${{}}` or `{{}}$$...$${{}}`, respectively. -{{% callout note %}} -We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. -{{% /callout %}} +> [!NOTE] +> We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax! Example **math block**: diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/steps.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/steps.md new file mode 100644 index 00000000..fb9d1890 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/steps.md @@ -0,0 +1,47 @@ +--- +title: Steps +linkTitle: Steps +--- + +Display a series of steps, such as for a tutorial. + +## Example + +{{% steps %}} + +### Step 1 + +The first step here... + +### Step 2 + +The second step here... + +### Step 3 + +The third step here... + +{{% /steps %}} + + +## Usage + +Use the Markdown level-3 headings to represent step titles within the `steps` shortcode: + +``` +{{%/* steps */%}} + +### Step 1 + +The first step here... + +### Step 2 + +The second step here... + +### Step 3 + +The third step here... + +{{%/* /steps */%}} +``` diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/formatting/toggle.md b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/toggle.md new file mode 100644 index 00000000..90805acd --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/formatting/toggle.md @@ -0,0 +1,27 @@ +--- +title: Spoilers +--- + +A Hugo shortcode to toggle collapsible content. + + + +## Example + +{{< spoiler text="Click to view the spoiler" >}} +You found me! + +Markdown is **supported**. +{{< /spoiler >}} + +## Usage + +```` +{{}} + +This is the content of the details. + +Markdown is **supported**. + +{{}} +```` diff --git a/starters/academic-cv/content/courses/hugo-blox/guide/project-structure.md b/starters/academic-cv/content/courses/hugo-blox/guide/project-structure.md new file mode 100644 index 00000000..b3a6bf09 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/guide/project-structure.md @@ -0,0 +1,59 @@ +--- +title: Project Structure +weight: 1 +--- + +## Folder Structure + +There are **4 main folders for Hugo-based sites**: + +- `content/` for your Markdown-formatted content files (homepage, etc.) + - `_index.md` the homepage (**Hugo requires that the homepage and archive pages have an underscore prefix**) +- `assets/` + - `media/` for your media files (images, videos) + - `icons/custom/` upload any custom SVG icons you want to use +- `config/_default/` for your site configuration files + - `hugo.yaml` to configure Hugo (site title, URL, Hugo options, setup per-folder page features) + - `module.yaml` to install or uninstall Hugo themes and plugins + - `params.yaml` to configure Hugo Blox options (SEO, analytics, site features) + - `menus.yaml` to configure your menu links (if the menu is enabled in `params.yaml`) + - `languages.yaml` to configure your site's language or to set language-specific options in a multilingual site +- `static/uploads/` for any files you want visitors to download, such as a PDF +- `go.mod` sets the version of Hugo themes/plugins which your site uses + + +## Hugo File Naming Convention + +Hugo gives us two options to name standard page files: as `TITLE/index.md` or `TITLE.md` where `TITLE` is your page name. + +The page name should be lowercase and using hyphens (`-`) instead of spaces. + +Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page's files (such as images) are self-contained within the page's folder, so it's more portable if you wish to share the original Markdown page with someone. + +The homepage is a special case as **Hugo requires the homepage and listing pages to be named** `_index.md`. + +## Docs Navigation + +The docs navigation is automatically generated based on the content in the `docs/` folder and is sorted alphabetically. + +The order of pages can be changed by adding the `weight` parameter in the front matter of your Markdown files. + +In the example below, the `example.md` page will appear before the `test.md` page as it has a lower `weight`: + +Page `example.md`: + +```yaml +--- +title: My Example +weight: 1 +--- +``` + +Page `test.md`: + +```yaml +--- +title: My Test +weight: 2 +--- +``` diff --git a/starters/academic-cv/content/courses/hugo-blox/reference/_index.md b/starters/academic-cv/content/courses/hugo-blox/reference/_index.md new file mode 100644 index 00000000..74cc26cf --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/reference/_index.md @@ -0,0 +1,7 @@ +--- +linkTitle: Reference +title: Reference +--- + +This section covers reference docs. + diff --git a/starters/academic-cv/content/courses/hugo-blox/reference/customization.md b/starters/academic-cv/content/courses/hugo-blox/reference/customization.md new file mode 100644 index 00000000..8c197f2f --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/reference/customization.md @@ -0,0 +1,7 @@ +--- +title: Customizing Hugo +linkTitle: Customization +weight: 1 +--- + +View the full docs at https://docs.hugoblox.com/getting-started/customize/ diff --git a/starters/academic-cv/content/courses/hugo-blox/reference/i18n.md b/starters/academic-cv/content/courses/hugo-blox/reference/i18n.md new file mode 100644 index 00000000..61327a64 --- /dev/null +++ b/starters/academic-cv/content/courses/hugo-blox/reference/i18n.md @@ -0,0 +1,9 @@ +--- +title: Internationalization (i18n) +--- + +Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo's [multilingual](https://gohugo.io/content-management/multilingual/) feature. + + + +View the full docs at https://docs.hugoblox.com/reference/language/ diff --git a/starters/academic-cv/content/courses/python/ambient-piano.mp3 b/starters/academic-cv/content/courses/python/ambient-piano.mp3 deleted file mode 100644 index 8795f38d..00000000 Binary files a/starters/academic-cv/content/courses/python/ambient-piano.mp3 and /dev/null differ diff --git a/starters/academic-cv/content/courses/python/featured.jpg b/starters/academic-cv/content/courses/python/featured.jpg deleted file mode 100644 index 5b053933..00000000 Binary files a/starters/academic-cv/content/courses/python/featured.jpg and /dev/null differ diff --git a/starters/academic-cv/content/courses/python/index.md b/starters/academic-cv/content/courses/python/index.md deleted file mode 100644 index d093ec82..00000000 --- a/starters/academic-cv/content/courses/python/index.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Learn Python -summary: Easily learn Python in 10 minutes! -date: 2023-10-24 -type: docs -math: false -tags: - - Python -image: - caption: 'Embed rich media such as videos and LaTeX math' -content_meta: - content_type: 'Course' - difficulty: 'Intermediate' - prerequisites: ['SQL'] - trending: false ---- - -[Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest. - -**Embed videos, podcasts, code, LaTeX math, and even test students!** - -On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox. - -## Video - -Teach your course by sharing videos with your students. Choose from one of the following approaches: - -{{< youtube D2vj0WcvH5c >}} - -**Youtube**: - - {{}} - -**Bilibili**: - - {{}} - -**Video file** - -Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode: - - {{}} - -## Podcast - -You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode: - - {{}} - -Try it out: - -{{< audio src="ambient-piano.mp3" >}} - -## Test students - -Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode: - -```markdown -{{}} -You found me! -{{}} -``` - -renders as - -{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}} - -## Math - -Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file. - -To render _inline_ or _block_ math, wrap your LaTeX math with `{{}}$...${{}}` or `{{}}$$...$${{}}`, respectively. - -> [!NOTE] -> We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax! - -Example **math block**: - -```latex -{{}} -$$ -\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2} -$$ -{{}} -``` - -renders as - -{{< math >}} -$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$ -{{< /math >}} - -Example **inline math** `{{}}$\nabla F(\mathbf{x}_{n})${{}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}. - -Example **multi-line math** using the math linebreak (`\\`): - -```latex -{{}} -$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ -1-p_{0}^{*} & \text{if }k=0.\end{cases}$$ -{{}} -``` - -renders as - -{{< math >}} - -$$ -f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ -1-p_{0}^{*} & \text{if }k=0.\end{cases} -$$ - -{{< /math >}} - -## Code - -Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file. - - ```python - import pandas as pd - data = pd.read_csv("data.csv") - data.head() - ``` - -renders as - -```python -import pandas as pd -data = pd.read_csv("data.csv") -data.head() -``` - -## Inline Images - -```go -{{}} Python -``` - -renders as - -{{< icon name="python" >}} Python - -## Callouts & Alerts - -Hugo Blox Builder now supports GitHub and Obsidian-style Markdown alerts for better content portability! These replace the old `callout` shortcode. - -### Basic Callout Types - -**Note** - For general information: - -```markdown -> [!NOTE] -> This is a note callout with important information that users should know. -``` - -> [!NOTE] -> This is a note callout with important information that users should know. - -**Tip** - For helpful advice: - -```markdown -> [!TIP] -> Here's a helpful tip to make your workflow more efficient! -``` - -> [!TIP] -> Here's a helpful tip to make your workflow more efficient! - -**Important** - For critical information: - -```markdown -> [!IMPORTANT] -> This is critical information that users must understand to proceed. -``` - -> [!IMPORTANT] -> This is critical information that users must understand to proceed. - -**Warning** - For potential issues: - -```markdown -> [!WARNING] -> Be careful! This action might have unexpected consequences. -``` - -> [!WARNING] -> Be careful! This action might have unexpected consequences. - -**Caution** - For dangerous actions: - -```markdown -> [!CAUTION] -> Danger! This operation is irreversible and could cause data loss. -``` - -> [!CAUTION] -> Danger! This operation is irreversible and could cause data loss. - -### Custom Titles - -You can customize the title of any callout: - -```markdown -> [!WARNING]+ Custom Warning Title -> This warning has a custom title instead of just "Warning". -``` - -> [!WARNING]+ Custom Warning Title -> This warning has a custom title instead of just "Warning". - -### Legacy Syntax (Deprecated) - -The old shortcode syntax still works but shows a deprecation warning: - -```markdown -{{}} -This still works but is deprecated. Use the Markdown syntax above! -{{}} -``` - -{{% callout note %}} -This still works but is deprecated. Use the Markdown syntax above! -{{% /callout %}} - -### Benefits of the New Syntax - -- **Portable**: Works with GitHub, Obsidian, and other Markdown processors -- **Standard**: Uses widely-adopted Markdown alert syntax -- **Clean**: No Hugo-specific shortcodes needed -- **Future-proof**: Supported by the latest Hugo versions (0.132.0+) -- **Multilingual**: Callout titles are automatically translated based on your site's language - - English: "Note", "Tip", "Important", "Warning", "Caution" - - Spanish: "Nota", "Consejo", "Importante", "Advertencia", "Precaución" - - French: "Note", "Conseil", "Important", "Attention", "Prudence" - - German: "Hinweis", "Tipp", "Wichtig", "Warnung", "Vorsicht" - - Chinese: "注意", "提示", "重要", "警告", "小心" - -## Did you find this page helpful? Consider sharing it 🙌 diff --git a/starters/academic-cv/content/events/example/index.md b/starters/academic-cv/content/events/example/index.md index c61a5137..cbd77b76 100644 --- a/starters/academic-cv/content/events/example/index.md +++ b/starters/academic-cv/content/events/example/index.md @@ -60,9 +60,8 @@ projects: - example --- -{{% callout note %}} -Click on the **Slides** button above to view the built-in slides feature. -{{% /callout %}} +> [!NOTE] +> Click on the **Slides** button above to view the built-in slides feature. Slides can be added in a few ways: diff --git a/starters/academic-cv/content/publications/conference-paper/index.md b/starters/academic-cv/content/publications/conference-paper/index.md index 90b04efe..fc4efd3b 100644 --- a/starters/academic-cv/content/publications/conference-paper/index.md +++ b/starters/academic-cv/content/publications/conference-paper/index.md @@ -81,12 +81,10 @@ projects: slides: "" --- -{{% callout note %}} -Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software. -{{% /callout %}} +> [!NOTE] +> Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software. -{{% callout note %}} -Create your slides in Markdown - click the _Slides_ button to check out the example. -{{% /callout %}} +> [!NOTE] +> Create your slides in Markdown - click the _Slides_ button to check out the example. Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/). diff --git a/starters/academic-cv/content/publications/journal-article/index.md b/starters/academic-cv/content/publications/journal-article/index.md index 9dbb33a8..1e1984a3 100644 --- a/starters/academic-cv/content/publications/journal-article/index.md +++ b/starters/academic-cv/content/publications/journal-article/index.md @@ -73,12 +73,10 @@ projects: [] slides: "" --- -{{% callout note %}} -Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software. -{{% /callout %}} +> [!NOTE] +> Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software. -{{% callout note %}} -Create your slides in Markdown - click the *Slides* button to check out the example. -{{% /callout %}} +> [!NOTE] +> Create your slides in Markdown - click the *Slides* button to check out the example. Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/). diff --git a/starters/academic-cv/content/publications/preprint/index.md b/starters/academic-cv/content/publications/preprint/index.md index 7ff64610..30b590f8 100644 --- a/starters/academic-cv/content/publications/preprint/index.md +++ b/starters/academic-cv/content/publications/preprint/index.md @@ -75,8 +75,7 @@ slides: "" This work is driven by the results in my [previous paper](/publications/conference-paper/) on LLMs. -{{% callout note %}} -Create your slides in Markdown - click the *Slides* button to check out the example. -{{% /callout %}} +> [!NOTE] +> Create your slides in Markdown - click the *Slides* button to check out the example. Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/). diff --git a/starters/blog/content/blog/second-brain/index.md b/starters/blog/content/blog/second-brain/index.md index a96a877b..f174a9f6 100644 --- a/starters/blog/content/blog/second-brain/index.md +++ b/starters/blog/content/blog/second-brain/index.md @@ -115,24 +115,21 @@ renders as Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings. -By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside. +Use the `> [!NOTE]` syntax to create a callout. ```markdown -{{%/* callout note */%}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{%/* /callout */%}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ``` renders as -{{% callout note %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. Or use the `warning` callout type so your readers don't miss critical details: -{{% callout warning %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!WARNING] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ## Did you find this page helpful? Consider sharing it 🙌 diff --git a/starters/documentation/content/docs/guide/shortcodes/callout.md b/starters/documentation/content/docs/guide/shortcodes/callout.md index 7ce7a93c..f0710680 100644 --- a/starters/documentation/content/docs/guide/shortcodes/callout.md +++ b/starters/documentation/content/docs/guide/shortcodes/callout.md @@ -13,24 +13,20 @@ Callouts are a useful feature to draw attention to important or related content ### Notes -{{% callout note %}} -A Markdown callout is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!NOTE] +> A Markdown callout is useful for displaying notices, hints, or definitions to your readers. ```markdown -{{%/* callout note */%}} -A Markdown callout is useful for displaying notices, hints, or definitions to your readers. -{{%/* /callout */%}} +> [!NOTE] +> A Markdown callout is useful for displaying notices, hints, or definitions to your readers. ``` ### Warnings -{{% callout warning %}} -Here's some important information... -{{% /callout %}} +> [!WARNING] +> Here's some important information... ```markdown -{{%/* callout warning */%}} -Here's some important information... -{{%/* /callout */%}} +> [!WARNING] +> Here's some important information... ``` diff --git a/starters/landing-page/content/_index.md b/starters/landing-page/content/_index.md index 6b2328d0..36980d25 100644 --- a/starters/landing-page/content/_index.md +++ b/starters/landing-page/content/_index.md @@ -25,9 +25,9 @@ sections: text: "Read more" url: "/blog/" design: - spacing: - padding: [0, 0, 0, 0] - margin: [0, 0, 0, 0] + # spacing: + # padding: [0, 0, 0, 0] + # margin: [0, 0, 0, 0] # For full-screen, add `min-h-screen` below css_class: "dark" background: @@ -140,6 +140,6 @@ sections: design: card: # Card background color (CSS class) - css_class: "bg-primary-700" + css_class: "bg-primary-300" css_style: "" --- diff --git a/starters/landing-page/content/blog/second-brain/index.md b/starters/landing-page/content/blog/second-brain/index.md index a96a877b..f174a9f6 100644 --- a/starters/landing-page/content/blog/second-brain/index.md +++ b/starters/landing-page/content/blog/second-brain/index.md @@ -115,24 +115,21 @@ renders as Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings. -By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside. +Use the `> [!NOTE]` syntax to create a callout. ```markdown -{{%/* callout note */%}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{%/* /callout */%}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ``` renders as -{{% callout note %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!NOTE] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. Or use the `warning` callout type so your readers don't miss critical details: -{{% callout warning %}} -A Markdown aside is useful for displaying notices, hints, or definitions to your readers. -{{% /callout %}} +> [!WARNING] +> A Markdown aside is useful for displaying notices, hints, or definitions to your readers. ## Did you find this page helpful? Consider sharing it 🙌 diff --git a/starters/landing-page/content/blog/teach-courses/index.md b/starters/landing-page/content/blog/teach-courses/index.md index f098f08f..d60232b6 100644 --- a/starters/landing-page/content/blog/teach-courses/index.md +++ b/starters/landing-page/content/blog/teach-courses/index.md @@ -69,9 +69,8 @@ Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enabl To render _inline_ or _block_ math, wrap your LaTeX math with `{{}}$...${{}}` or `{{}}$$...$${{}}`, respectively. -{{% callout note %}} -We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. -{{% /callout %}} +> [!NOTE] +> We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. Example **math block**: diff --git a/test/data/pages/home.yaml b/test/data/pages/home.yaml index 4edad934..ca48bb59 100644 --- a/test/data/pages/home.yaml +++ b/test/data/pages/home.yaml @@ -59,3 +59,5 @@ sections: color: light: "gray-50" dark: "gray-900" + +