diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4a5b2722..f702bc11 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -38,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; @@ -984,6 +985,9 @@ .ml-2 { margin-left: calc(var(--spacing) * 2); } + .ml-auto { + margin-left: auto; + } .box-border { box-sizing: border-box; } @@ -1088,6 +1092,9 @@ .h-3 { height: calc(var(--spacing) * 3); } + .h-4 { + height: calc(var(--spacing) * 4); + } .h-5 { height: calc(var(--spacing) * 5); } @@ -1166,6 +1173,9 @@ .w-3 { width: calc(var(--spacing) * 3); } + .w-4 { + width: calc(var(--spacing) * 4); + } .w-5 { width: calc(var(--spacing) * 5); } @@ -1317,6 +1327,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,); } @@ -1372,6 +1385,9 @@ .justify-center { justify-content: center; } + .gap-2 { + gap: calc(var(--spacing) * 2); + } .gap-4 { gap: calc(var(--spacing) * 4); } @@ -1548,6 +1564,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; @@ -1949,6 +1969,14 @@ --tw-leading: 1.6; line-height: 1.6; } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } + .leading-snug { + --tw-leading: var(--leading-snug); + line-height: var(--leading-snug); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -1996,6 +2024,12 @@ .\!text-neutral { color: rgba(var(--color-neutral), 1) !important; } + .text-current { + color: currentcolor; + } + .text-inherit { + color: inherit; + } .text-neutral-50 { color: rgba(var(--color-neutral-50), 1); } @@ -2135,6 +2169,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); @@ -2268,6 +2306,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) { @@ -2358,6 +2401,20 @@ border-top-color: transparent; } } + .marker\:hidden { + & *::marker { + display: none; + } + &::marker { + display: none; + } + & *::-webkit-details-marker { + display: none; + } + &::-webkit-details-marker { + display: none; + } + } .before\:absolute { &::before { content: var(--tw-content); @@ -3278,11 +3335,26 @@ } } } + .print\:block { + @media print { + display: block; + } + } .print\:hidden { @media print { display: none; } } + .print\:break-inside-avoid { + @media print { + break-inside: avoid; + } + } + .\[\&\:\:-webkit-details-marker\]\:hidden { + &::-webkit-details-marker { + display: none; + } + } } @layer utilities { .prose .chroma { @@ -3522,6 +3594,174 @@ body.zen-mode-enable { .dark .ios-toggle::after { background: #f5f5f5; } +@layer components { + :root { + --adm-note-border: oklch(62.3% 0.214 259.815); + --adm-note-bg: oklch(97% 0.014 254.604); + --adm-note-text: oklch(37.9% 0.146 265.522); + --adm-tip-border: oklch(70.4% 0.14 182.503); + --adm-tip-bg: oklch(98.4% 0.014 180.72); + --adm-tip-text: oklch(38.6% 0.063 188.416); + --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-info-border: oklch(68.5% 0.169 237.323); + --adm-info-bg: oklch(97.7% 0.013 236.62); + --adm-info-text: oklch(39.1% 0.09 240.876); + --adm-todo-border: oklch(55.4% 0.046 257.417); + --adm-todo-bg: oklch(98.4% 0.003 247.858); + --adm-todo-text: oklch(27.9% 0.041 260.031); + --adm-success-border: oklch(72.3% 0.219 149.579); + --adm-success-bg: oklch(98.2% 0.018 155.826); + --adm-success-text: oklch(39.3% 0.095 152.535); + --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-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-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-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-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-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); + } + html.dark { + --adm-note-bg: color-mix(in oklab, oklch(37.9% 0.146 265.522) 60%, transparent); + --adm-note-text: oklch(93.2% 0.032 255.585); + --adm-tip-bg: color-mix(in oklab, oklch(38.6% 0.063 188.416) 60%, transparent); + --adm-tip-text: oklch(95.3% 0.051 180.801); + --adm-important-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent); + --adm-important-text: oklch(94.6% 0.033 307.174); + --adm-warning-bg: color-mix(in oklab, oklch(40.8% 0.123 38.172) 60%, transparent); + --adm-warning-text: oklch(95.4% 0.038 75.164); + --adm-caution-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent); + --adm-caution-text: oklch(93.6% 0.032 17.717); + --adm-abstract-bg: color-mix(in oklab, oklch(39.8% 0.07 227.392) 60%, transparent); + --adm-abstract-text: oklch(95.6% 0.045 203.388); + --adm-info-bg: color-mix(in oklab, oklch(39.1% 0.09 240.876) 60%, transparent); + --adm-info-text: oklch(95.1% 0.026 236.824); + --adm-todo-bg: oklch(27.9% 0.041 260.031); + --adm-todo-text: oklch(96.8% 0.007 247.896); + --adm-success-bg: color-mix(in oklab, oklch(39.3% 0.095 152.535) 60%, transparent); + --adm-success-text: oklch(96.2% 0.044 156.743); + --adm-question-bg: color-mix(in oklab, oklch(41.4% 0.112 45.904) 60%, transparent); + --adm-question-text: oklch(96.2% 0.059 95.617); + --adm-failure-bg: color-mix(in oklab, oklch(40.8% 0.153 2.432) 60%, transparent); + --adm-failure-text: oklch(94.8% 0.028 342.258); + --adm-danger-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent); + --adm-danger-text: oklch(93.6% 0.032 17.717); + --adm-bug-bg: color-mix(in oklab, oklch(41% 0.159 10.272) 60%, transparent); + --adm-bug-text: oklch(94.1% 0.03 12.58); + --adm-example-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent); + --adm-example-text: oklch(94.6% 0.033 307.174); + --adm-quote-bg: color-mix(in oklab, oklch(21% 0.034 264.665) 60%, transparent); + --adm-quote-text: oklch(96.7% 0.003 264.542); + } + .admonition .admonition-content > * { + margin-block: 0 !important; + } + .admonition .admonition-content > * + * { + margin-top: calc(var(--spacing) * 3); + } + .admonition { + margin-block: calc(var(--spacing) * 3); + } + .prose .admonition + * { + margin-top: calc(var(--spacing) * 0); + } + .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="info"] { + border-color: var(--adm-info-border); + background-color: var(--adm-info-bg); + color: var(--adm-info-text); + } + .admonition[data-type="todo"] { + border-color: var(--adm-todo-border); + background-color: var(--adm-todo-bg); + color: var(--adm-todo-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="question"] { + border-color: var(--adm-question-border); + background-color: var(--adm-question-bg); + color: var(--adm-question-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="danger"] { + border-color: var(--adm-danger-border); + background-color: var(--adm-danger-bg); + color: var(--adm-danger-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="example"] { + border-color: var(--adm-example-border); + background-color: var(--adm-example-bg); + color: var(--adm-example-text); + } + .admonition[data-type="quote"] { + border-color: var(--adm-quote-border); + background-color: var(--adm-quote-bg); + color: var(--adm-quote-text); + } +} body a, body button { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); diff --git a/assets/css/components/admonition.css b/assets/css/components/admonition.css new file mode 100644 index 00000000..d5f14d75 --- /dev/null +++ b/assets/css/components/admonition.css @@ -0,0 +1,225 @@ +/* + * 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.blue.500'); + --adm-note-bg: theme('colors.blue.50'); + --adm-note-text: theme('colors.blue.900'); + + --adm-tip-border: theme('colors.teal.500'); + --adm-tip-bg: theme('colors.teal.50'); + --adm-tip-text: theme('colors.teal.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-info-border: theme('colors.sky.500'); + --adm-info-bg: theme('colors.sky.50'); + --adm-info-text: theme('colors.sky.900'); + + --adm-todo-border: theme('colors.slate.500'); + --adm-todo-bg: theme('colors.slate.50'); + --adm-todo-text: theme('colors.slate.800'); + + --adm-success-border: theme('colors.green.500'); + --adm-success-bg: theme('colors.green.50'); + --adm-success-text: theme('colors.green.900'); + + --adm-question-border: theme('colors.amber.500'); + --adm-question-bg: theme('colors.amber.50'); + --adm-question-text: theme('colors.amber.900'); + + --adm-failure-border: theme('colors.pink.500'); + --adm-failure-bg: theme('colors.pink.50'); + --adm-failure-text: theme('colors.pink.900'); + + --adm-danger-border: theme('colors.red.500'); + --adm-danger-bg: theme('colors.red.50'); + --adm-danger-text: theme('colors.red.900'); + + --adm-bug-border: theme('colors.rose.500'); + --adm-bug-bg: theme('colors.rose.50'); + --adm-bug-text: theme('colors.rose.900'); + + --adm-example-border: theme('colors.purple.600'); + --adm-example-bg: theme('colors.purple.50'); + --adm-example-text: theme('colors.purple.900'); + + --adm-quote-border: theme('colors.gray.500'); + --adm-quote-bg: theme('colors.gray.50'); + --adm-quote-text: theme('colors.gray.800'); +} + +/* CSS Custom Properties - Dark Mode (30 variables: 15 types × 2 properties) */ +html.dark { + /* GitHub Core Types (5) */ + --adm-note-bg: theme('colors.blue.900 / 0.6'); + --adm-note-text: theme('colors.blue.100'); + + --adm-tip-bg: theme('colors.teal.900 / 0.6'); + --adm-tip-text: theme('colors.teal.100'); + + --adm-important-bg: theme('colors.purple.900 / 0.6'); + --adm-important-text: theme('colors.purple.100'); + + --adm-warning-bg: theme('colors.orange.900 / 0.6'); + --adm-warning-text: theme('colors.orange.100'); + + --adm-caution-bg: theme('colors.red.900 / 0.6'); + --adm-caution-text: theme('colors.red.100'); + + /* Extended Types (10) */ + --adm-abstract-bg: theme('colors.cyan.900 / 0.6'); + --adm-abstract-text: theme('colors.cyan.100'); + + --adm-info-bg: theme('colors.sky.900 / 0.6'); + --adm-info-text: theme('colors.sky.100'); + + --adm-todo-bg: theme('colors.slate.800'); + --adm-todo-text: theme('colors.slate.100'); + + --adm-success-bg: theme('colors.green.900 / 0.6'); + --adm-success-text: theme('colors.green.100'); + + --adm-question-bg: theme('colors.amber.900 / 0.6'); + --adm-question-text: theme('colors.amber.100'); + + --adm-failure-bg: theme('colors.pink.900 / 0.6'); + --adm-failure-text: theme('colors.pink.100'); + + --adm-danger-bg: theme('colors.red.900 / 0.6'); + --adm-danger-text: theme('colors.red.100'); + + --adm-bug-bg: theme('colors.rose.900 / 0.6'); + --adm-bug-text: theme('colors.rose.100'); + + --adm-example-bg: theme('colors.purple.900 / 0.6'); + --adm-example-text: theme('colors.purple.100'); + + --adm-quote-bg: theme('colors.gray.900 / 0.6'); + --adm-quote-text: theme('colors.gray.100'); +} + +/* Base Styles */ +.admonition .admonition-content > * { + margin-block: 0 !important; +} + +.admonition .admonition-content > * + * { + @apply mt-3; +} + +.admonition { + @apply my-3; +} + +.prose .admonition + * { + @apply mt-0; +} + +/* 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="info"] { + border-color: var(--adm-info-border); + background-color: var(--adm-info-bg); + color: var(--adm-info-text); +} + +.admonition[data-type="todo"] { + border-color: var(--adm-todo-border); + background-color: var(--adm-todo-bg); + color: var(--adm-todo-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="question"] { + border-color: var(--adm-question-border); + background-color: var(--adm-question-bg); + color: var(--adm-question-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="danger"] { + border-color: var(--adm-danger-border); + background-color: var(--adm-danger-bg); + color: var(--adm-danger-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="example"] { + border-color: var(--adm-example-border); + background-color: var(--adm-example-bg); + color: var(--adm-example-text); +} + +.admonition[data-type="quote"] { + border-color: var(--adm-quote-border); + background-color: var(--adm-quote-bg); + color: var(--adm-quote-text); +} diff --git a/assets/css/main.css b/assets/css/main.css index c270f924..afe38a8d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -6,6 +6,7 @@ @import "./components/chroma.css" layer(utilities); @import "./components/zen-mode.css"; @import "./components/a11y.css"; +@import "./components/admonition.css" layer(components); body a, body button { 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/i18n/en.yaml b/i18n/en.yaml index bcb43484..7da2c433 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -85,3 +85,5 @@ shortcode: recent: show_more: "Show More" + + diff --git a/i18n/it.yaml b/i18n/it.yaml index 26867d35..74052b05 100644 --- a/i18n/it.yaml +++ b/i18n/it.yaml @@ -72,3 +72,20 @@ shortcode: recent: show_more: "Mostra di Più" + +admonition: + note: "Nota" + abstract: "Sommario" + info: "Info" + todo: "Da fare" + tip: "Suggerimento" + important: "Importante" + success: "Successo" + question: "Domanda" + warning: "Avviso" + caution: "Attenzione" + failure: "Fallimento" + danger: "Pericolo" + bug: "Bug" + example: "Esempio" + quote: "Citazione" diff --git a/i18n/ja.yaml b/i18n/ja.yaml index e704eca7..995cf6ae 100644 --- a/i18n/ja.yaml +++ b/i18n/ja.yaml @@ -84,3 +84,20 @@ shortcode: recent: show_more: "もっと見る" + +admonition: + note: "ノート" + abstract: "概要" + info: "情報" + todo: "TODO" + tip: "ヒント" + important: "重要" + success: "成功" + question: "質問" + warning: "警告" + caution: "注意" + failure: "失敗" + danger: "危険" + bug: "バグ" + example: "例" + quote: "引用" diff --git a/i18n/zh-CN.yaml b/i18n/zh-CN.yaml index 7a4ba890..15a90d45 100644 --- a/i18n/zh-CN.yaml +++ b/i18n/zh-CN.yaml @@ -84,3 +84,20 @@ shortcode: recent: show_more: "显示更多" + +admonition: + note: "笔记" + abstract: "摘要" + info: "信息" + todo: "待办" + tip: "提示" + important: "重要" + success: "成功" + question: "问题" + warning: "警告" + caution: "注意" + failure: "失败" + danger: "危险" + bug: "错误" + example: "示例" + quote: "引用" diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html new file mode 100644 index 00000000..6a5a0bdb --- /dev/null +++ b/layouts/_default/_markup/render-blockquote.html @@ -0,0 +1,107 @@ +{{/* Admonition Render Hook */}} +{{- if eq .Type "alert" -}} + {{- $typeMap := dict + "summary" "abstract" + "tldr" "abstract" + "hint" "tip" + "check" "success" + "done" "success" + "help" "question" + "faq" "question" + "attention" "warning" + "fail" "failure" + "missing" "failure" + "error" "danger" + "cite" "quote" + -}} + + {{- $iconMap := dict + "note" "circle-info" + "abstract" "file-lines" + "info" "circle-info" + "todo" "list-check" + "tip" "lightbulb" + "important" "star" + "success" "check" + "question" "circle-question" + "warning" "triangle-exclamation" + "caution" "triangle-exclamation" + "failure" "xmark" + "danger" "fire" + "bug" "bug" + "example" "list-ol" + "quote" "quote-left" + -}} + + {{/* Resolve type aliases and validate */}} + {{- $rawType := .AlertType | lower -}} + {{- $normalizedType := index $typeMap $rawType | default $rawType -}} + + {{- $iconName := index $iconMap $normalizedType | default "circle-info" -}} + + {{/* Resolve title with i18n fallback */}} + {{- $title := .AlertTitle -}} + {{- if not $title -}} + {{- $i18nKey := printf "admonition.%s" $normalizedType -}} + {{- $i18nTitle := i18n $i18nKey -}} + {{- if and $i18nTitle (ne $i18nTitle $i18nKey) -}} + {{- $title = $i18nTitle -}} + {{- else -}} + {{- $title = $normalizedType | title -}} + {{- end -}} + {{- end -}} + + {{/* Handle collapsible state */}} + {{- $sign := .AlertSign | default "" -}} + {{- $isCollapsible := or (eq $sign "+") (eq $sign "-") -}} + {{- $isDefaultCollapsed := eq $sign "-" -}} + + {{- $containerClass := "admonition relative overflow-hidden rounded-lg border-l-4 px-4 py-3 shadow-sm print:break-inside-avoid" -}} + {{- $headerClass := "flex items-center gap-2 font-semibold text-inherit" -}} + {{- $contentClass := "admonition-content mt-3 text-base leading-relaxed text-inherit" -}} + + {{- if $isCollapsible -}} +
+ +
+ {{- partial "icon.html" $iconName -}} +
+
+ {{ $title }} +
+
+
+ {{- partial "icon.html" "chevron-down" -}} +
+
+ +
+ {{- .Text | safeHTML -}} +
+
+ {{- else -}} +
+
+
+ {{- partial "icon.html" $iconName -}} +
+
+ {{ $title }} +
+
+
+ {{- .Text | safeHTML -}} +
+
+ {{- end -}} + +{{- else -}} +
+ {{- .Text | safeHTML -}} +
+{{- end -}} diff --git a/layouts/_default/index.json b/layouts/_default/index.json index a7260a52..91ad7d53 100644 --- a/layouts/_default/index.json +++ b/layouts/_default/index.json @@ -8,10 +8,10 @@ {{- $section := .Site.GetPage "section" .Section -}} {{- if .Date -}} {{- $index = $index | append (dict - "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long")) + "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long")) "title" (.Title | emojify | safeJS) "section" ($section.Title | emojify | safeJS) - "summary" (.Summary | safeJS) + "summary" (.Summary | plainify | htmlUnescape | safeJS) "content" (.Plain | safeJS) "permalink" .RelPermalink "externalUrl" .Params.externalUrl @@ -21,7 +21,7 @@ {{- $index = $index | append (dict "title" (.Title | emojify | safeJS) "section" ($section.Title | emojify | safeJS) - "summary" (.Summary | safeJS) + "summary" (.Summary | plainify | htmlUnescape | safeJS) "content" (.Plain | safeJS) "permalink" .RelPermalink "externalUrl" .Params.externalUrl diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml index 6f046a46..f5d42854 100644 --- a/layouts/_default/rss.xml +++ b/layouts/_default/rss.xml @@ -40,7 +40,7 @@ {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} {{ with .Site.Params.Author.email }}{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}{{end}} {{ .Permalink }} - {{ .Summary | html }} + {{ .Summary | plainify | htmlUnescape | safeHTML }} {{ range ( where .Site.RegularPages ".RelPermalink" .RelPermalink | first 1 ) }} {{- $images := .Resources.ByType "image" -}} {{- $featured := $images.GetMatch "*feature*" -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 0ddba873..85fc4fd5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -157,6 +157,7 @@ {{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }} {{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }} {{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }} + {{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }} {{ if $jsResources }} {{ $bundleJS := $jsResources | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint $alg }}