diff --git a/assets/css/index.css b/assets/css/index.css index 1d4b839d13..111532dd19 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1531,6 +1531,100 @@ a[href*="#no-click"], img[src*="#no-click"] { @apply bg-redis-pen-200 font-semibold; } +/* Deprecated Command Styles */ +.deprecated-badge { + display: inline-flex !important; + align-items: center !important; + padding: 0.25rem 0.5rem !important; + font-size: 0.75rem !important; + font-weight: 700 !important; + background-color: rgb(220, 255, 30) !important; + color: #000000 !important; + border-radius: 9999px !important; + border: none !important; + flex-shrink: 0 !important; +} + +.deprecated-tooltip { + position: absolute !important; + z-index: 9999 !important; + padding: 0.5rem 0.75rem !important; + font-size: 0.875rem !important; + font-weight: 500 !important; + color: white !important; + background-color: #111827 !important; + border-radius: 0.5rem !important; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; + opacity: 0 !important; + visibility: hidden !important; + transition: opacity 300ms ease-in-out !important; + pointer-events: none !important; + white-space: nowrap !important; + bottom: calc(100% + 8px) !important; + left: 50% !important; + transform: translateX(-50%) !important; + max-width: 250px !important; + white-space: normal !important; + word-wrap: break-word !important; +} + +/* Adjust tooltip position when near right edge */ +.deprecated-tooltip-trigger:nth-last-child(-n+2) .deprecated-tooltip, +.deprecated-tooltip-trigger:last-child .deprecated-tooltip { + left: auto !important; + right: 0 !important; + transform: none !important; +} + +/* Adjust tooltip position when near left edge */ +.deprecated-tooltip-trigger:nth-child(-n+2) .deprecated-tooltip, +.deprecated-tooltip-trigger:first-child .deprecated-tooltip { + left: 0 !important; + right: auto !important; + transform: none !important; +} + +.deprecated-tooltip::before { + content: '' !important; + position: absolute !important; + top: 100% !important; + left: 50% !important; + transform: translateX(-50%) !important; + width: 0 !important; + height: 0 !important; + border-left: 5px solid transparent !important; + border-right: 5px solid transparent !important; + border-top: 5px solid #111827 !important; +} + +.deprecated-tooltip-trigger { + position: relative !important; + display: inline-flex !important; + z-index: 10 !important; +} + +.deprecated-tooltip-trigger:hover .deprecated-tooltip { + opacity: 1 !important; + visibility: visible !important; +} + +.command-title-deprecated { + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + flex-wrap: nowrap !important; +} + +.command-title-deprecated .truncate { + flex: 1 1 0% !important; + min-width: 0 !important; +} + +/* Fix alignment on individual command pages */ +.prose h1.command-name .command-title-deprecated { + align-items: center !important; +} + /* Utility Classes */ .agent-builder-hidden { display: none !important; diff --git a/layouts/commands/list.html b/layouts/commands/list.html index 0e88917392..1ce6eb1cf6 100644 --- a/layouts/commands/list.html +++ b/layouts/commands/list.html @@ -111,8 +111,20 @@

Commands

data-version data-top > -

- {{ .Title }} +

+
+ {{ .Title }} + {{ if (and (isset .Params "doc_flags") (in .Params.doc_flags "deprecated")) }} +
+ Deprecated + {{ if (isset .Params "replaced_by") }} +
+ Use {{ .Params.replaced_by | markdownify | plainify }} instead +
+ {{ end }} +
+ {{ end }} +

{{ .Params.summary }} diff --git a/layouts/commands/single.html b/layouts/commands/single.html index 89efd5a7b0..e1008c6069 100644 --- a/layouts/commands/single.html +++ b/layouts/commands/single.html @@ -12,10 +12,12 @@ {{ partial "breadcrumbs" . }}

- {{- .Title }} - {{- if (isset .Params "deprecated_since") }} - (deprecated) - {{- end }} +
+ {{- .Title }} + {{- if (and (isset .Params "doc_flags") (in .Params.doc_flags "deprecated")) }} + Deprecated + {{- end }} +

{{ if (isset .Params "deprecated_since") }}