mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 22:14:08 +00:00
feat: port callout and icon shortcodes to Tailwind
And migrate others across without changes.
This commit is contained in:
George Cushen committed
1 parent
590de1357a
commit
973ff9099e
12 files changed
+252
-2
No files matched your search
@@ -4,3 +4,4 @@
|
||||
/*! Wowchemy Components | https://wowchemy.com */
|
||||
@import "./components/all.css";
|
||||
@import "./blocks/all.css";
|
||||
@import "themes/default.css";
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Default Wowchemy color theme */
|
||||
:root {
|
||||
/* Neutral */
|
||||
--color-neutral: 255, 255, 255;
|
||||
--color-neutral-50: 248, 250, 252;
|
||||
--color-neutral-100: 241, 245, 249;
|
||||
--color-neutral-200: 226, 232, 240;
|
||||
--color-neutral-300: 203, 213, 225;
|
||||
--color-neutral-400: 148, 163, 184;
|
||||
--color-neutral-500: 100, 116, 139;
|
||||
--color-neutral-600: 71, 85, 105;
|
||||
--color-neutral-700: 51, 65, 85;
|
||||
--color-neutral-800: 30, 41, 59;
|
||||
--color-neutral-900: 15, 23, 42;
|
||||
/* Primary */
|
||||
--color-primary-50: 239, 246, 255;
|
||||
--color-primary-100: 219, 234, 254;
|
||||
--color-primary-200: 191, 219, 254;
|
||||
--color-primary-300: 147, 197, 253;
|
||||
--color-primary-400: 96, 165, 250;
|
||||
--color-primary-500: 59, 130, 246;
|
||||
--color-primary-600: 37, 99, 235;
|
||||
--color-primary-700: 29, 78, 216;
|
||||
--color-primary-800: 30, 64, 175;
|
||||
--color-primary-900: 30, 58, 138;
|
||||
}
|
||||
@@ -26,3 +26,15 @@ send: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" st
|
||||
rss: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
|
||||
</svg>
|
||||
|
||||
# Callouts
|
||||
information-circle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
exclamation-triangle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
|
||||
# Skills
|
||||
|
||||
python: <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg>
|
||||
@@ -15,7 +15,7 @@
|
||||
href="{{ $link | safeURL }}"
|
||||
{{ $target | safeHTMLAttr }}
|
||||
aria-label="{{ .icon | title }}"
|
||||
>{{ partial "functions/get_icon" (dict "name" .icon "attributes" "height=\"1em\"") }}</a>
|
||||
>{{ partial "functions/get_icon" (dict "name" .icon "attributes" "style=\"height: 1em;\"") }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,41 @@
|
||||
{{/* Audio Shortcode for Wowchemy. */}}
|
||||
{{/* Load audio from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
|
||||
{{/* Supports primarily MP3 and MP4. */}}
|
||||
|
||||
{{/*
|
||||
Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#audio
|
||||
|
||||
Parameters
|
||||
----------
|
||||
src :
|
||||
Path to file or url for the audio file.
|
||||
If a local file, first it is searched in the page directory, and then in `assets/media/` .
|
||||
id : optional
|
||||
Custom id "audio-{id}" to associate to the <audio> tag.
|
||||
*/}}
|
||||
|
||||
{{ $destination := .Get "src" }}
|
||||
{{ $is_remote := strings.HasPrefix $destination "http" }}
|
||||
{{- $asset := "" -}}
|
||||
{{- if not $is_remote -}}
|
||||
{{- $asset = (.Page.Resources.ByType "audio").GetMatch $destination -}}
|
||||
{{- if not $asset -}}
|
||||
{{- $asset = resources.Get (path.Join "media" $destination) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ if $asset }}
|
||||
{{ $destination = $asset.RelPermalink }}
|
||||
{{ else }}
|
||||
{{ $destination = $destination | safeURL }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ $audio_type := strings.TrimPrefix "." (path.Ext $destination) | lower }}
|
||||
|
||||
{{/* Set MP3 mime type to mpeg. */}}
|
||||
{{ $audio_type = replace $audio_type "mp3" "mpeg" }}
|
||||
|
||||
<audio controls {{ with (.Get "id") }}id="audio-{{.|anchorize}}"{{end}}>
|
||||
<source src="{{$destination}}" type="audio/{{$audio_type}}">
|
||||
</audio>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="bilibili">
|
||||
<iframe src="//player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" allow="fullscreen"></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
{{/*
|
||||
Docs: https://university.wowchemy.com/reference/markdown/#callouts
|
||||
|
||||
Parameters
|
||||
----------
|
||||
#0 : optional, positional
|
||||
Name of the icon to display in the callout component.
|
||||
Default Wowchemy available options include "note" and "warning".
|
||||
Otherwise, you can add your own icon to assets/media/icons/ and reference its name when calling the shortcode.
|
||||
*/}}
|
||||
{{ $icon := "information-circle" }}
|
||||
{{ with (.Get 0) }}
|
||||
{{ if eq . "note" }}
|
||||
{{ $icon = "information-circle" }}
|
||||
{{ else if eq . "warning" }}
|
||||
{{ $icon = "triangle-exclamation" }}
|
||||
{{ else }}
|
||||
{{ $icon = . }}
|
||||
{{end}}
|
||||
{{end}}
|
||||
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="pr-3 pt-1 text-primary-400">
|
||||
{{ partial "functions/get_icon" (dict "name" $icon "attributes" "height=\"24\"") }}
|
||||
</span>
|
||||
<span class="dark:text-neutral-300">
|
||||
{{- .Inner | markdownify | emojify -}}
|
||||
</span>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{{/*
|
||||
Docs: https://university.wowchemy.com/reference/markdown/#inline-image
|
||||
|
||||
Parameters
|
||||
----------
|
||||
name :
|
||||
Icon name.
|
||||
padding_left : default "0"
|
||||
Left padding.
|
||||
padding_right : default "1"
|
||||
Right padding.
|
||||
*/}}
|
||||
|
||||
{{- if (.Get "name") -}}
|
||||
{{- $icon := .Get "name" -}}
|
||||
{{- $padding_right := (.Get "padding_right") | default 1 -}}{{/* Defaulting to 1 prevents no spacing when minimizing HTML. */}}
|
||||
<span class="inline-block {{with (.Get "padding_left")}}pl-{{.}}{{end}} {{with $padding_right}}pr-{{.}}{{end}}">
|
||||
{{ partial "functions/get_icon" (dict "name" $icon "attributes" "style=\"height: 1em; transform: translateY(0.1em);\"") }}
|
||||
</span>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,19 @@
|
||||
{{/*
|
||||
Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#mention-a-user
|
||||
|
||||
Parameters
|
||||
----------
|
||||
#0 : positional
|
||||
User account in Wowchemy to mention.
|
||||
*/}}
|
||||
|
||||
{{- $username := .Get 0 -}}
|
||||
{{- $username_url := $username | urlize -}}
|
||||
{{- $taxonomy := "authors" -}}
|
||||
{{- $profile_page := site.GetPage (printf "/%s/%s" $taxonomy $username_url) -}}
|
||||
{{- $name := $profile_page.Title | default ($username|markdownify) -}}
|
||||
{{- with $profile_page -}}
|
||||
<a href="{{$profile_page.RelPermalink}}">{{$name}}</a>
|
||||
{{- else -}}
|
||||
{{- $name -}}
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,19 @@
|
||||
{{/*
|
||||
Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#toggle-list
|
||||
|
||||
Parameters
|
||||
----------
|
||||
text :
|
||||
Spoiler title.
|
||||
class : optional
|
||||
Additional class for <details> tag.
|
||||
style : optional
|
||||
Additional style for <details> tag.
|
||||
*/}}
|
||||
|
||||
{{- $id := printf "spoiler-%d" .Ordinal -}}
|
||||
|
||||
<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
|
||||
<summary>{{ .Get "text" | markdownify | emojify }}</summary>
|
||||
<p>{{ .Inner | markdownify | emojify }}</p>
|
||||
</details>
|
||||
@@ -0,0 +1,53 @@
|
||||
{{/* Video Shortcode for Wowchemy. */}}
|
||||
{{/* Load video from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
|
||||
|
||||
{{/*
|
||||
Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#videos
|
||||
|
||||
Parameters
|
||||
----------
|
||||
src :
|
||||
Path to file or url for the video file.
|
||||
If a local file, first it is searched in the page directory, and then in `assets/media/` .
|
||||
poster : optional
|
||||
Path or url for the preview image.
|
||||
Defaults to {src without file extension}.jpg .
|
||||
If not found, defaults to "".
|
||||
controls : optional
|
||||
If present, display video controls, otherwise the video is set to autoplay.
|
||||
id : optional
|
||||
Custom id "video-{id}" to associate to the <video> tag.
|
||||
*/}}
|
||||
|
||||
{{ $destination := .Get "src" }}
|
||||
{{ $video_ext_with_dot := path.Ext (.Get "src") }}
|
||||
{{ $video_ext := strings.TrimPrefix "." $video_ext_with_dot }}
|
||||
{{ $video_type := $video_ext }}
|
||||
{{ $destination_preview := (.Get "poster") | default (replace $destination $video_ext_with_dot ".jpg") }}
|
||||
{{ $is_remote := strings.HasPrefix $destination "http" }}
|
||||
{{- $asset := "" -}}
|
||||
{{- $asset_preview := "" -}}
|
||||
{{- if not $is_remote -}}
|
||||
{{- $asset = (.Page.Resources.ByType "video").GetMatch $destination -}}
|
||||
{{- $asset_preview = (.Page.Resources.ByType "image").GetMatch $destination_preview -}}
|
||||
{{- if not $asset -}}
|
||||
{{- $asset = resources.Get (path.Join "media" $destination) -}}
|
||||
{{- $asset_preview = resources.Get (path.Join "media" $destination_preview) -}}
|
||||
{{- end -}}
|
||||
{{ $video_type = $asset.MediaType.SubType }}
|
||||
{{- end -}}
|
||||
|
||||
{{ if $asset }}
|
||||
{{ $destination = $asset.RelPermalink }}
|
||||
{{ else }}
|
||||
{{ $destination = $destination | safeURL }}
|
||||
{{ end }}
|
||||
|
||||
{{ $poster := (.Get "poster") | default "" }}
|
||||
{{ if $asset_preview }}
|
||||
{{ $poster = $asset_preview.RelPermalink }}
|
||||
{{ end }}
|
||||
|
||||
<video {{if (.Get "controls")}}controls{{else}}autoplay loop{{end}} {{with $poster}}poster="{{.}}"{{end}} {{ with (.Get "id") }}id="video-{{.|anchorize}}"{{end}}>
|
||||
<source src="{{$destination}}" type="video/{{$video_type}}">
|
||||
</video>
|
||||
@@ -6,10 +6,38 @@ module.exports = {
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
safelist: [
|
||||
'task-list',
|
||||
'task-list', /* As it's added via JS */
|
||||
],
|
||||
darkMode: ['class'],
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
neutral: {
|
||||
DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",
|
||||
50: "rgba(var(--color-neutral-50), <alpha-value>)",
|
||||
100: "rgba(var(--color-neutral-100), <alpha-value>)",
|
||||
200: "rgba(var(--color-neutral-200), <alpha-value>)",
|
||||
300: "rgba(var(--color-neutral-300), <alpha-value>)",
|
||||
400: "rgba(var(--color-neutral-400), <alpha-value>)",
|
||||
500: "rgba(var(--color-neutral-500), <alpha-value>)",
|
||||
600: "rgba(var(--color-neutral-600), <alpha-value>)",
|
||||
700: "rgba(var(--color-neutral-700), <alpha-value>)",
|
||||
800: "rgba(var(--color-neutral-800), <alpha-value>)",
|
||||
900: "rgba(var(--color-neutral-900), <alpha-value>)",
|
||||
},
|
||||
primary: {
|
||||
50: "rgba(var(--color-primary-50), <alpha-value>)",
|
||||
100: "rgba(var(--color-primary-100), <alpha-value>)",
|
||||
200: "rgba(var(--color-primary-200), <alpha-value>)",
|
||||
300: "rgba(var(--color-primary-300), <alpha-value>)",
|
||||
400: "rgba(var(--color-primary-400), <alpha-value>)",
|
||||
500: "rgba(var(--color-primary-500), <alpha-value>)",
|
||||
600: "rgba(var(--color-primary-600), <alpha-value>)",
|
||||
700: "rgba(var(--color-primary-700), <alpha-value>)",
|
||||
800: "rgba(var(--color-primary-800), <alpha-value>)",
|
||||
900: "rgba(var(--color-primary-900), <alpha-value>)",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
'sans': ['"Inter var"', ...defaultTheme.fontFamily.sans],
|
||||
|
||||
Reference in new issue
Block a user