diff --git a/README.id.md b/README.id.md index 662385ba..ec1c34e3 100644 --- a/README.id.md +++ b/README.id.md @@ -40,7 +40,8 @@ Blowfish dirancang sebagai tema yang kuat dan ringan untuk [Hugo](https://gohugo - Daftar isi yang dapat digulir - Dukungan untuk konten multibahasa termasuk bahasa RTL - Kemampuan untuk menautkan ke artikel di situs web pihak ketiga -- Dukungan untuk beberapa shortcode seperti Galeri, Timeline, Kartu GitHub, dan Carousel +- Dukungan untuk beberapa shortcode seperti Galeri, Timeline, Kartu GitHub, dan Carousel +- Sintaks GitHub Alerts, 15 jenis, dukungan lipat - Integrasi BuyMeACoffee - Pencarian situs berbasis klien dengan Fuse.js - Diagram dan visualisasi menggunakan Mermaid diff --git a/README.ja.md b/README.ja.md index a7a73f73..ccce3140 100644 --- a/README.ja.md +++ b/README.ja.md @@ -45,6 +45,7 @@ Blowfishは[Hugo](https://gohugo.io)のために設計された強力で軽量 - RTL 言語を含む多言語コンテンツのサポート - サードパーティー ウェブサイトの投稿へのリンク - ギャラリー、タイムライン、GitHub カード、カルーセルなど、複数のショートコードに対応 +- GitHub Alerts 構文、15 種類、折りたたみ対応 - Buy Me a Coffee 連携 - Fuse.js を利用したクライアントサイドのサイト内検索 - Mermaid を使用したダイアグラムや視覚化 diff --git a/README.md b/README.md index d8f8af3b..10791da9 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu - Multilingual content support including support for RTL languages - Ability to link to posts on third-party websites - Support for several shortcodes like Gallery, Timeline, GitHub cards, and Carousels +- GitHub Alerts syntax, 15 types, collapsible support - Buymeacoffee integration - Client-side site search powered by Fuse.js - Diagrams and visualisations using Mermaid diff --git a/README.zh-cn.md b/README.zh-cn.md index 30438b77..e4879d97 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -43,6 +43,7 @@ Blowfish 是一个轻量有力的 Hugo 主题。它使用 Tailwind CSS 构建， - 支持多语言内容，包括 RTL 语言 - 可链接到第三方网站上的帖子 - 支持多种简码，如图库、时间轴、GitHub 卡片和图片灯箱 +- 支持 GitHub Alerts 语法、15 种类型和可折叠功能 - 支持 Buymeacoffee - 拥有由 Fuse.js 支持的客户端一侧网站搜索功能 - 植入了基于 Mermaid 的图表功能 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4ad6db06..38cf2122 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -9,6 +9,7 @@ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: 0.25rem; + --container-2xs: 18rem; --container-xs: 20rem; --container-xl: 36rem; --container-3xl: 48rem; @@ -37,6 +38,7 @@ --font-weight-extrabold: 800; --tracking-normal: 0em; --leading-snug: 1.375; + --leading-relaxed: 1.625; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; @@ -409,6 +411,9 @@ .ms-6 { margin-inline-start: calc(var(--spacing) * 6); } + .ms-auto { + margin-inline-start: auto; + } .-me-48 { margin-inline-end: calc(var(--spacing) * -48); } @@ -1317,6 +1322,9 @@ .scale-\[1\.02\] { scale: 1.02; } + .-rotate-90 { + rotate: calc(90deg * -1); + } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } @@ -1375,6 +1383,9 @@ .gap-1 { gap: calc(var(--spacing) * 1); } + .gap-2 { + gap: calc(var(--spacing) * 2); + } .gap-4 { gap: calc(var(--spacing) * 4); } @@ -1555,6 +1566,10 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } + .border-l-4 { + border-left-style: var(--tw-border-style); + border-left-width: 4px; + } .border-dotted { --tw-border-style: dotted; border-style: dotted; @@ -1965,6 +1980,10 @@ --tw-leading: 1.6; line-height: 1.6; } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -2012,6 +2031,9 @@ .\!text-neutral { color: rgba(var(--color-neutral), 1) !important; } + .text-inherit { + color: inherit; + } .text-neutral-50 { color: rgba(var(--color-neutral-50), 1); } @@ -2151,6 +2173,10 @@ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -2289,6 +2315,11 @@ .scrollbar-track-neutral-200 { --scrollbar-track: oklch(92.2% 0 0); } + .group-open\:rotate-0 { + &:is(:where(.group):is([open], :popover-open, :open) *) { + rotate: 0deg; + } + } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2846,6 +2877,11 @@ margin-top: calc(var(--spacing) * 0); } } + .lg\:ml-auto { + @media (width >= 1024px) { + margin-left: auto; + } + } .lg\:block { @media (width >= 1024px) { display: block; @@ -2881,6 +2917,11 @@ width: auto; } } + .lg\:max-w-2xs { + @media (width >= 1024px) { + max-width: var(--container-2xs); + } + } .lg\:max-w-7xl { @media (width >= 1024px) { max-width: var(--container-7xl); @@ -3981,6 +4022,171 @@ body.zen-mode-enable { .dark .ios-toggle::after { background: #f5f5f5; } +@layer components { + :root { + --adm-note-border: oklch(68.5% 0.169 237.323); + --adm-note-bg: oklch(97.7% 0.013 236.62); + --adm-note-text: oklch(39.1% 0.09 240.876); + --adm-tip-border: oklch(69.6% 0.17 162.48); + --adm-tip-bg: oklch(97.9% 0.021 166.113); + --adm-tip-text: oklch(37.8% 0.077 168.94); + --adm-important-border: oklch(62.7% 0.265 303.9); + --adm-important-bg: oklch(97.7% 0.014 308.299); + --adm-important-text: oklch(38.1% 0.176 304.987); + --adm-warning-border: oklch(70.5% 0.213 47.604); + --adm-warning-bg: oklch(98% 0.016 73.684); + --adm-warning-text: oklch(40.8% 0.123 38.172); + --adm-caution-border: oklch(63.7% 0.237 25.331); + --adm-caution-bg: oklch(97.1% 0.013 17.38); + --adm-caution-text: oklch(39.6% 0.141 25.723); + --adm-abstract-border: oklch(71.5% 0.143 215.221); + --adm-abstract-bg: oklch(98.4% 0.019 200.873); + --adm-abstract-text: oklch(39.8% 0.07 227.392); + --adm-bug-border: oklch(64.5% 0.246 16.439); + --adm-bug-bg: oklch(96.9% 0.015 12.422); + --adm-bug-text: oklch(41% 0.159 10.272); + --adm-danger-border: oklch(63.7% 0.237 25.331); + --adm-danger-bg: oklch(97.1% 0.013 17.38); + --adm-danger-text: oklch(39.6% 0.141 25.723); + --adm-example-border: oklch(55.8% 0.288 302.321); + --adm-example-bg: oklch(97.7% 0.014 308.299); + --adm-example-text: oklch(38.1% 0.176 304.987); + --adm-failure-border: oklch(65.6% 0.241 354.308); + --adm-failure-bg: oklch(97.1% 0.014 343.198); + --adm-failure-text: oklch(40.8% 0.153 2.432); + --adm-info-border: oklch(62.3% 0.214 259.815); + --adm-info-bg: oklch(97% 0.014 254.604); + --adm-info-text: oklch(37.9% 0.146 265.522); + --adm-question-border: oklch(76.9% 0.188 70.08); + --adm-question-bg: oklch(98.7% 0.022 95.277); + --adm-question-text: oklch(41.4% 0.112 45.904); + --adm-quote-border: oklch(55.1% 0.027 264.364); + --adm-quote-bg: oklch(98.5% 0.002 247.839); + --adm-quote-text: oklch(27.8% 0.033 256.848); + --adm-success-border: oklch(69.6% 0.17 162.48); + --adm-success-bg: oklch(97.9% 0.021 166.113); + --adm-success-text: oklch(37.8% 0.077 168.94); + --adm-todo-border: oklch(68.5% 0.169 237.323); + --adm-todo-bg: oklch(97.7% 0.013 236.62); + --adm-todo-text: oklch(44.3% 0.11 240.79); + } + html.dark { + --adm-note-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.1% 0.09 240.876) 40%, transparent), black 15%); + --adm-note-text: oklch(95.1% 0.026 236.824); + --adm-tip-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%); + --adm-tip-text: oklch(95% 0.052 163.051); + --adm-important-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%); + --adm-important-text: oklch(94.6% 0.033 307.174); + --adm-warning-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.123 38.172) 40%, transparent), black 15%); + --adm-warning-text: oklch(95.4% 0.038 75.164); + --adm-caution-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%); + --adm-caution-text: oklch(93.6% 0.032 17.717); + --adm-abstract-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.8% 0.07 227.392) 40%, transparent), black 15%); + --adm-abstract-text: oklch(95.6% 0.045 203.388); + --adm-bug-bg: color-mix(in srgb, color-mix(in oklab, oklch(41% 0.159 10.272) 40%, transparent), black 15%); + --adm-bug-text: oklch(94.1% 0.03 12.58); + --adm-danger-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%); + --adm-danger-text: oklch(93.6% 0.032 17.717); + --adm-example-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%); + --adm-example-text: oklch(94.6% 0.033 307.174); + --adm-failure-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.153 2.432) 40%, transparent), black 15%); + --adm-failure-text: oklch(94.8% 0.028 342.258); + --adm-info-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.9% 0.146 265.522) 40%, transparent), black 15%); + --adm-info-text: oklch(93.2% 0.032 255.585); + --adm-question-bg: color-mix(in srgb, color-mix(in oklab, oklch(41.4% 0.112 45.904) 40%, transparent), black 15%); + --adm-question-text: oklch(96.2% 0.059 95.617); + --adm-quote-bg: color-mix(in srgb, color-mix(in oklab, oklch(21% 0.034 264.665) 40%, transparent), black 15%); + --adm-quote-text: oklch(96.7% 0.003 264.542); + --adm-success-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%); + --adm-success-text: oklch(95% 0.052 163.051); + --adm-todo-bg: color-mix(in srgb, color-mix(in oklab, oklch(44.3% 0.11 240.79) 40%, transparent), black 15%); + --adm-todo-text: oklch(95.1% 0.026 236.824); + } + .admonition-content > :first-child { + margin-top: 0 !important; + } + .admonition-content > :last-child { + margin-bottom: 0 !important; + } + .admonition-content pre { + margin-block: 0 !important; + } + .admonition[data-type="note"] { + border-color: var(--adm-note-border); + background-color: var(--adm-note-bg); + color: var(--adm-note-text); + } + .admonition[data-type="tip"] { + border-color: var(--adm-tip-border); + background-color: var(--adm-tip-bg); + color: var(--adm-tip-text); + } + .admonition[data-type="important"] { + border-color: var(--adm-important-border); + background-color: var(--adm-important-bg); + color: var(--adm-important-text); + } + .admonition[data-type="warning"] { + border-color: var(--adm-warning-border); + background-color: var(--adm-warning-bg); + color: var(--adm-warning-text); + } + .admonition[data-type="caution"] { + border-color: var(--adm-caution-border); + background-color: var(--adm-caution-bg); + color: var(--adm-caution-text); + } + .admonition[data-type="abstract"] { + border-color: var(--adm-abstract-border); + background-color: var(--adm-abstract-bg); + color: var(--adm-abstract-text); + } + .admonition[data-type="bug"] { + border-color: var(--adm-bug-border); + background-color: var(--adm-bug-bg); + color: var(--adm-bug-text); + } + .admonition[data-type="danger"] { + border-color: var(--adm-danger-border); + background-color: var(--adm-danger-bg); + color: var(--adm-danger-text); + } + .admonition[data-type="example"] { + border-color: var(--adm-example-border); + background-color: var(--adm-example-bg); + color: var(--adm-example-text); + } + .admonition[data-type="failure"] { + border-color: var(--adm-failure-border); + background-color: var(--adm-failure-bg); + color: var(--adm-failure-text); + } + .admonition[data-type="info"] { + border-color: var(--adm-info-border); + background-color: var(--adm-info-bg); + color: var(--adm-info-text); + } + .admonition[data-type="question"] { + border-color: var(--adm-question-border); + background-color: var(--adm-question-bg); + color: var(--adm-question-text); + } + .admonition[data-type="quote"] { + border-color: var(--adm-quote-border); + background-color: var(--adm-quote-bg); + color: var(--adm-quote-text); + } + .admonition[data-type="success"] { + border-color: var(--adm-success-border); + background-color: var(--adm-success-bg); + color: var(--adm-success-text); + } + .admonition[data-type="todo"] { + border-color: var(--adm-todo-border); + background-color: var(--adm-todo-bg); + color: var(--adm-todo-text); + } +} html.dark { color-scheme: dark; } diff --git a/assets/css/components/admonition.css b/assets/css/components/admonition.css new file mode 100644 index 00000000..640a43e2 --- /dev/null +++ b/assets/css/components/admonition.css @@ -0,0 +1,220 @@ +/* + * Derived from KKKZOZ/hugo-admonitions (https://github.com/KKKZOZ/hugo-admonitions/) + * Copyright (c) 2024 KKKZOZ, Licensed under MIT License + */ +:root { + /* GitHub Core Types (5) */ + --adm-note-border: theme("colors.sky.500"); + --adm-note-bg: theme("colors.sky.50"); + --adm-note-text: theme("colors.sky.900"); + + --adm-tip-border: theme("colors.emerald.500"); + --adm-tip-bg: theme("colors.emerald.50"); + --adm-tip-text: theme("colors.emerald.900"); + + --adm-important-border: theme("colors.purple.500"); + --adm-important-bg: theme("colors.purple.50"); + --adm-important-text: theme("colors.purple.900"); + + --adm-warning-border: theme("colors.orange.500"); + --adm-warning-bg: theme("colors.orange.50"); + --adm-warning-text: theme("colors.orange.900"); + + --adm-caution-border: theme("colors.red.500"); + --adm-caution-bg: theme("colors.red.50"); + --adm-caution-text: theme("colors.red.900"); + + /* Extended Types (10) */ + --adm-abstract-border: theme("colors.cyan.500"); + --adm-abstract-bg: theme("colors.cyan.50"); + --adm-abstract-text: theme("colors.cyan.900"); + + --adm-bug-border: theme("colors.rose.500"); + --adm-bug-bg: theme("colors.rose.50"); + --adm-bug-text: theme("colors.rose.900"); + + --adm-danger-border: theme("colors.red.500"); + --adm-danger-bg: theme("colors.red.50"); + --adm-danger-text: theme("colors.red.900"); + + --adm-example-border: theme("colors.purple.600"); + --adm-example-bg: theme("colors.purple.50"); + --adm-example-text: theme("colors.purple.900"); + + --adm-failure-border: theme("colors.pink.500"); + --adm-failure-bg: theme("colors.pink.50"); + --adm-failure-text: theme("colors.pink.900"); + + --adm-info-border: theme("colors.blue.500"); + --adm-info-bg: theme("colors.blue.50"); + --adm-info-text: theme("colors.blue.900"); + + --adm-question-border: theme("colors.amber.500"); + --adm-question-bg: theme("colors.amber.50"); + --adm-question-text: theme("colors.amber.900"); + + --adm-quote-border: theme("colors.gray.500"); + --adm-quote-bg: theme("colors.gray.50"); + --adm-quote-text: theme("colors.gray.800"); + + --adm-success-border: theme("colors.emerald.500"); + --adm-success-bg: theme("colors.emerald.50"); + --adm-success-text: theme("colors.emerald.900"); + + --adm-todo-border: theme("colors.sky.500"); + --adm-todo-bg: theme("colors.sky.50"); + --adm-todo-text: theme("colors.sky.800"); +} + +html.dark { + /* GitHub Core Types (5) */ + --adm-note-bg: color-mix(in srgb, theme("colors.sky.900 / 0.4"), black 15%); + --adm-note-text: theme("colors.sky.100"); + + --adm-tip-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%); + --adm-tip-text: theme("colors.emerald.100"); + + --adm-important-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%); + --adm-important-text: theme("colors.purple.100"); + + --adm-warning-bg: color-mix(in srgb, theme("colors.orange.900 / 0.4"), black 15%); + --adm-warning-text: theme("colors.orange.100"); + + --adm-caution-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%); + --adm-caution-text: theme("colors.red.100"); + + /* Extended Types (10) */ + --adm-abstract-bg: color-mix(in srgb, theme("colors.cyan.900 / 0.4"), black 15%); + --adm-abstract-text: theme("colors.cyan.100"); + + --adm-bug-bg: color-mix(in srgb, theme("colors.rose.900 / 0.4"), black 15%); + --adm-bug-text: theme("colors.rose.100"); + + --adm-danger-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%); + --adm-danger-text: theme("colors.red.100"); + + --adm-example-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%); + --adm-example-text: theme("colors.purple.100"); + + --adm-failure-bg: color-mix(in srgb, theme("colors.pink.900 / 0.4"), black 15%); + --adm-failure-text: theme("colors.pink.100"); + + --adm-info-bg: color-mix(in srgb, theme("colors.blue.900 / 0.4"), black 15%); + --adm-info-text: theme("colors.blue.100"); + + --adm-question-bg: color-mix(in srgb, theme("colors.amber.900 / 0.4"), black 15%); + --adm-question-text: theme("colors.amber.100"); + + --adm-quote-bg: color-mix(in srgb, theme("colors.gray.900 / 0.4"), black 15%); + --adm-quote-text: theme("colors.gray.100"); + + --adm-success-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%); + --adm-success-text: theme("colors.emerald.100"); + + --adm-todo-bg: color-mix(in srgb, theme("colors.sky.800 / 0.4"), black 15%); + --adm-todo-text: theme("colors.sky.100"); +} + +/* Base Styles */ +.admonition-content > :first-child { + margin-top: 0 !important; +} + +.admonition-content > :last-child { + margin-bottom: 0 !important; +} + +.admonition-content pre { + margin-block: 0 !important; +} + +/* Type-Specific Palettes Using CSS Variables */ +.admonition[data-type="note"] { + border-color: var(--adm-note-border); + background-color: var(--adm-note-bg); + color: var(--adm-note-text); +} + +.admonition[data-type="tip"] { + border-color: var(--adm-tip-border); + background-color: var(--adm-tip-bg); + color: var(--adm-tip-text); +} + +.admonition[data-type="important"] { + border-color: var(--adm-important-border); + background-color: var(--adm-important-bg); + color: var(--adm-important-text); +} + +.admonition[data-type="warning"] { + border-color: var(--adm-warning-border); + background-color: var(--adm-warning-bg); + color: var(--adm-warning-text); +} + +.admonition[data-type="caution"] { + border-color: var(--adm-caution-border); + background-color: var(--adm-caution-bg); + color: var(--adm-caution-text); +} + +.admonition[data-type="abstract"] { + border-color: var(--adm-abstract-border); + background-color: var(--adm-abstract-bg); + color: var(--adm-abstract-text); +} + +.admonition[data-type="bug"] { + border-color: var(--adm-bug-border); + background-color: var(--adm-bug-bg); + color: var(--adm-bug-text); +} + +.admonition[data-type="danger"] { + border-color: var(--adm-danger-border); + background-color: var(--adm-danger-bg); + color: var(--adm-danger-text); +} + +.admonition[data-type="example"] { + border-color: var(--adm-example-border); + background-color: var(--adm-example-bg); + color: var(--adm-example-text); +} + +.admonition[data-type="failure"] { + border-color: var(--adm-failure-border); + background-color: var(--adm-failure-bg); + color: var(--adm-failure-text); +} + +.admonition[data-type="info"] { + border-color: var(--adm-info-border); + background-color: var(--adm-info-bg); + color: var(--adm-info-text); +} + +.admonition[data-type="question"] { + border-color: var(--adm-question-border); + background-color: var(--adm-question-bg); + color: var(--adm-question-text); +} + +.admonition[data-type="quote"] { + border-color: var(--adm-quote-border); + background-color: var(--adm-quote-bg); + color: var(--adm-quote-text); +} + +.admonition[data-type="success"] { + border-color: var(--adm-success-border); + background-color: var(--adm-success-bg); + color: var(--adm-success-text); +} + +.admonition[data-type="todo"] { + border-color: var(--adm-todo-border); + background-color: var(--adm-todo-bg); + color: var(--adm-todo-text); +} diff --git a/assets/css/main.css b/assets/css/main.css index e109f138..02587270 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -7,6 +7,7 @@ @import "./components/tabs.css" layer(utilities); @import "./components/zen-mode.css"; @import "./components/a11y.css"; +@import "./components/admonition.css" layer(components); html.dark { color-scheme: dark; diff --git a/assets/icons/circle-question.svg b/assets/icons/circle-question.svg new file mode 100644 index 00000000..01593be8 --- /dev/null +++ b/assets/icons/circle-question.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/file-lines.svg b/assets/icons/file-lines.svg new file mode 100644 index 00000000..a9fe261f --- /dev/null +++ b/assets/icons/file-lines.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/list-check.svg b/assets/icons/list-check.svg new file mode 100644 index 00000000..d786e126 --- /dev/null +++ b/assets/icons/list-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/list-ol.svg b/assets/icons/list-ol.svg new file mode 100644 index 00000000..e66942ab --- /dev/null +++ b/assets/icons/list-ol.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/quote-left.svg b/assets/icons/quote-left.svg new file mode 100644 index 00000000..fa7d0cab --- /dev/null +++ b/assets/icons/quote-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/js/print-support.js b/assets/js/print-support.js new file mode 100644 index 00000000..d63d2665 --- /dev/null +++ b/assets/js/print-support.js @@ -0,0 +1,17 @@ +(function() { + 'use strict'; + var closedDetails = []; + window.addEventListener('beforeprint', function() { + var allDetails = document.querySelectorAll('details:not([open])'); + for (var i = 0; i < allDetails.length; i++) { + allDetails[i].open = true; + closedDetails.push(allDetails[i]); + } + }); + window.addEventListener('afterprint', function() { + for (var i = 0; i < closedDetails.length; i++) { + closedDetails[i].open = false; + } + closedDetails = []; + }); +})(); diff --git a/exampleSite/content/docs/shortcodes/index.it.md b/exampleSite/content/docs/shortcodes/index.it.md index aa78e0ef..995b5894 100644 --- a/exampleSite/content/docs/shortcodes/index.it.md +++ b/exampleSite/content/docs/shortcodes/index.it.md @@ -64,6 +64,36 @@ This is an error!


+## Admonition + +Admonitions allow you to insert eye-catching callout boxes in your content. + +Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts: + +```md +> [!NOTE] +> A Note type admonition. + +> [!TIP]+ Custom Title +> A collapsible admonition with custom title. +``` + +> [!NOTE] +> A Note type admonition. + +> [!TIP]+ Custom Title +> A collapsible admonition with custom title. + +The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian. + +> [!INFO]- Supported types +> Valid admonition types include [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) and [Obsidian callout types](https://help.obsidian.md/callouts). The types are case-insensitive. +> +> **GitHub types:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION` +> **Obsidian types:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote` + +


+ ## Article `Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.* diff --git a/exampleSite/content/docs/shortcodes/index.ja.md b/exampleSite/content/docs/shortcodes/index.ja.md index 95e3ff0f..dbae5cdf 100644 --- a/exampleSite/content/docs/shortcodes/index.ja.md +++ b/exampleSite/content/docs/shortcodes/index.ja.md @@ -64,6 +64,36 @@ Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘


+## Admonition + +Admonitions は、文書内で読者の注意を引くための強調表示を挿入するための機能です。 + +Admonitions は alert ショートコードと同様の目的を持ちますが、Hugo の render hooks を用いて実装されています。両者の主な違いは構文にあります。admonitions は Markdown 構文を使用するため、異なるプラットフォーム間でも扱いやすく、一方、ショートコードは Hugo 固有の仕組みです。構文は GitHub の alerts に近い形式です。 + +```md +> [!NOTE] +> NOTE タイプの表示例。 + +> [!TIP]+ カスタムタイトル +> タイトルを指定した折りたたみ可能な表示例。 +``` + +> [!NOTE] +> NOTE タイプの表示例。 + +> [!TIP]+ カスタムタイトル +> タイトルを指定した折りたたみ可能な表示例。 + +記号（`+` または `-`）は任意で、表示を折りたたむかどうかを制御します。なお、この記号は Obsidian のみ対応しています。 + +> [!INFO]- 対応しているタイプ +> 使用可能なタイプには、[GitHub alert タイプ](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) および [Obsidian callout タイプ](https://help.obsidian.md/callouts) が含まれます。タイプ名は大文字・小文字を区別しません。 +> +> **GitHub タイプ：** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION` +> **Obsidian タイプ：** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote` + +


+ ## 記事 `Article` は、1つの記事を Markdown ファイルに埋め込みます。埋め込むファイルへの `link` は、埋め込むファイルの `.RelPermalink` である必要があります。ショートコードは、親を参照している場合は何も表示しないことに注意してください。*注: Blowfish (/blowfish/ など) のようなサブフォルダでウェブサイトを実行している場合は、そのパスをリンクに含めてください。* diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index c1e36f42..5f40e991 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -64,9 +64,39 @@ This is an error!


+## Admonition + +Admonitions allow you to insert eye-catching callout boxes in your content. + +Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts: + +```md +> [!NOTE] +> A Note type admonition. + +> [!TIP]+ Custom Title +> A collapsible admonition with custom title. +``` + +> [!NOTE] +> A Note type admonition. + +> [!TIP]+ Custom Title +> A collapsible admonition with custom title. + +The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian. + +> [!INFO]- Supported types +> Valid admonition types include [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) and [Obsidian callout types](https://help.obsidian.md/callouts). The types are case-insensitive. +> +> **GitHub types:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION` +> **Obsidian types:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote` + +


+ ## Article -`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.* +`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. _Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link._ | Parameter | Description | @@ -202,16 +232,15 @@ This shortcode is for importing code from external sources easily without copyin | `startLine` | **Optional** The line number to start the import from. | | `endLine` | **Optional** The line number to end the import at. | - - **Example:** ```md {{}} ``` + {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}} ```md @@ -221,7 +250,6 @@ This shortcode is for importing code from external sources easily without copyin {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}} -

## Codeberg Card @@ -239,6 +267,7 @@ This shortcode is for importing code from external sources easily without copyin ```md {{}} ``` + {{< codeberg repo="forgejo/forgejo" >}}


@@ -304,6 +333,7 @@ Blowfish also supports automatic conversion of images included using standard Ma ```md {{}} ``` + {{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}


@@ -340,7 +370,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl


- **Example 2: responsive gallery** ```md @@ -411,6 +440,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl ```md {{}} ``` + {{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}


@@ -438,7 +468,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl ## GitLab Card -`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). +`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). It displays realtime stats about it, such as the number of stars and forks it has. Unlike `github` it can't display the main programming language of a project. Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments. @@ -531,13 +561,10 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}


- ## Keyword - The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties. - | Parameter | Description | | --------- | --------------------------------------- | @@ -552,7 +579,7 @@ The input is written in Markdown so you can format it however you please. {{}} *Super* skill {{}} ``` -{{< keyword >}} *Super* skill {{< /keyword >}} +{{< keyword >}} _Super_ skill {{< /keyword >}} **Example2 :** @@ -569,7 +596,7 @@ The input is written in Markdown so you can format it however you please. {{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} {{< keyword icon="code" >}} **Important** skill {{< /keyword >}} {{< /keywordList >}} -{{< keyword >}} *Standalone* skill {{< /keyword >}} +{{< keyword >}} _Standalone_ skill {{< /keyword >}}


@@ -589,7 +616,7 @@ When life gives you lemons, make lemonade. When life gives you lemons, make lemonade. {{< /lead >}} -


+


## List @@ -628,7 +655,7 @@ The `where` and `value` values are used in the following query `where .Site.Regu


-## LTR/RTL +## LTR/RTL `ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally. @@ -661,10 +688,8 @@ This shortcode allows you to import markdown files from external sources. This i | --------- | ------------------------------------------------------- | | `url` | **Required** URL to an externally hosted markdown file. | - - **Example:** ```md @@ -674,7 +699,6 @@ This shortcode allows you to import markdown files from external sources. This i {{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} -

## Mermaid @@ -792,7 +816,6 @@ The `tabs` shortcode is commonly used to present different variants of a particu The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties. - | Parameter | Description | | ----------- | -------------------------------------------- | @@ -843,14 +866,12 @@ With other shortcodes {{}} ``` - {{< timeline >}} {{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. {{}} - {{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} With html code