mirror/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-06-19 07:35:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply new empty state to docs.docker.com

Browse Source 
Signed-off-by: Derek Misler <derek.misler@docker.com>
This commit is contained in:
Derek Misler
2026-04-08 13:50:21 -04:00
parent 75ad2e55e5
commit 68ba732d88
7 changed files with 320 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/dhi.svg
+1 -1
View File
@@ -1,5 +1,5 @@
<svg
class="w-5 h-5 text-gray-800 dark:text-white"
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

assets/icons/gordon-happy.svg
+8
View File
@@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.45806 6.98145C11.5069 6.88872 13.4159 6.87248 15.4336 6.94824C16.455 6.9866 16.8836 7.00573 17.3682 7.11914C19.2852 7.56782 20.9855 9.33327 21.3624 11.2656C21.4571 11.7521 21.46 12.2718 21.46 13.4941C21.46 14.9264 21.4566 15.5405 21.3575 16.0371C20.9383 18.1365 19.2977 19.7781 17.1983 20.1973C16.7016 20.2964 16.0878 20.2998 14.6553 20.2998H10.0811C8.71799 20.2998 8.13354 20.2968 7.66021 20.207C5.52066 19.801 3.84742 18.1268 3.44146 15.9873C3.35176 15.5141 3.34869 14.9297 3.34869 13.5674C3.34869 12.3454 3.35173 11.824 3.43658 11.3633C3.80589 9.3592 5.46871 7.61849 7.45415 7.15918C7.91165 7.0534 8.37143 7.03063 9.45806 6.98145ZM17.3516 8.40332C14.4842 7.70661 11.4527 7.75081 8.43853 8.29297C7.43795 8.47297 6.93663 8.56368 6.43755 8.88184C6.0328 9.14005 5.61786 9.59152 5.39458 10.0166C5.01948 10.7313 5.01331 11.6205 4.94439 12.4062C4.80742 13.8649 4.73843 14.595 4.97271 15.0908C5.1886 15.5473 5.5117 15.8616 5.97369 16.0654C6.4755 16.2867 7.25812 16.1923 8.82232 16.0039C11.6796 15.6597 13.9776 15.7223 16.5342 16.0283C17.8763 16.189 18.5479 16.269 19.0274 16.0732C19.4599 15.8964 19.7926 15.6018 20.0196 15.1934C20.2708 14.7405 20.2715 14.0947 20.2715 12.8057C20.2715 11.9806 20.3631 11.0803 20.0352 10.3037C19.8562 9.88029 19.4279 9.33546 19.0586 9.06152C18.5706 8.69964 18.1638 8.60067 17.3516 8.40332Z" fill="currentColor"/>
<path d="M2.86333 10.7393C2.79805 10.9707 2.7531 11.2053 2.7149 11.4424C2.64844 11.9339 2.64849 12.5225 2.64849 13.5674L2.65044 14.4492C2.65537 15.2237 2.67513 15.7025 2.75396 16.1182C2.82942 16.4813 2.92441 16.8374 3.05962 17.1836C3.05835 17.1803 3.05698 17.1771 3.05572 17.1738C1.93813 17.1766 1.02699 16.2761 1.01861 15.1572L1.00005 12.6875C0.992369 11.6362 1.8232 10.7782 2.86333 10.7393Z" fill="currentColor"/>
<path d="M21.8536 10.4102C23.1521 10.6254 24.0736 11.8198 23.9278 13.1475L23.7588 14.6836C23.6379 15.7836 22.8507 16.646 21.8438 16.9199C21.9017 16.7485 21.9536 16.5736 21.9961 16.3955C22.1373 15.7443 22.1538 15.0859 22.1583 14.4209L22.1602 13.4941C22.1602 12.2987 22.1605 11.7 22.0499 11.1318C22.0023 10.8879 21.9358 10.6469 21.8536 10.4102Z" fill="currentColor"/>
<path d="M13.5411 6.2041C13.2066 6.20089 12.873 6.20049 12.5391 6.20215C12.5873 5.59323 12.6651 5.08294 12.7676 4.63965C12.1906 4.29963 11.8018 3.67326 11.8018 2.95508C11.8021 1.87531 12.678 1.00005 13.7579 1C14.8377 1.00001 15.7127 1.87528 15.7129 2.95508C15.7129 4.04353 14.8176 4.92299 13.7325 4.90918C13.6498 5.27685 13.5841 5.70041 13.5411 6.2041Z" fill="currentColor"/>
<path d="M8 12C8.33333 11.3334 9.5 11 10.5 12" stroke="currentColor" stroke-linecap="round"/>
<path d="M16.5 12C16.1667 11.3334 15 11 14 12" stroke="currentColor" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

assets/icons/gordon.svg
+8
View File
@@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1329 9.83887C16.0755 9.95803 16.7429 10.8191 16.6241 11.7617L16.4786 12.915C16.3541 13.8995 15.5254 14.689 14.5411 14.5635C13.5522 14.4372 12.9407 13.4627 13.0655 12.4736L13.21 11.3311C13.3291 10.3882 14.19 9.71983 15.1329 9.83887Z" fill="currentColor"/>
<path d="M8.7813 9.75293C9.72891 9.82425 10.4393 10.6501 10.3682 11.5977L10.2784 12.7939C10.2035 13.7885 9.41068 14.6231 8.41607 14.5498C7.42582 14.4766 6.77123 13.5361 6.84576 12.5459L6.93658 11.3398C7.0079 10.3922 7.83369 9.68175 8.7813 9.75293Z" fill="currentColor"/>
<path d="M9.45806 6.98145C11.5069 6.88872 13.4159 6.87248 15.4336 6.94824C16.455 6.9866 16.8836 7.00573 17.3682 7.11914C19.2852 7.56782 20.9855 9.33327 21.3624 11.2656C21.4571 11.7521 21.46 12.2718 21.46 13.4941C21.46 14.9264 21.4566 15.5405 21.3575 16.0371C20.9383 18.1365 19.2977 19.7781 17.1983 20.1973C16.7016 20.2964 16.0878 20.2998 14.6553 20.2998H10.0811C8.71799 20.2998 8.13354 20.2968 7.66021 20.207C5.52066 19.801 3.84742 18.1268 3.44146 15.9873C3.35176 15.5141 3.34869 14.9297 3.34869 13.5674C3.34869 12.3454 3.35173 11.824 3.43658 11.3633C3.80589 9.3592 5.46871 7.61849 7.45415 7.15918C7.91165 7.0534 8.37143 7.03063 9.45806 6.98145ZM17.3516 8.40332C14.4842 7.70661 11.4527 7.75081 8.43853 8.29297C7.43795 8.47297 6.93663 8.56368 6.43755 8.88184C6.0328 9.14005 5.61786 9.59152 5.39458 10.0166C5.01948 10.7313 5.01331 11.6205 4.94439 12.4062C4.80742 13.8649 4.73843 14.595 4.97271 15.0908C5.1886 15.5473 5.5117 15.8616 5.97369 16.0654C6.4755 16.2867 7.25812 16.1923 8.82232 16.0039C11.6796 15.6597 13.9776 15.7223 16.5342 16.0283C17.8763 16.189 18.5479 16.269 19.0274 16.0732C19.4599 15.8964 19.7926 15.6018 20.0196 15.1934C20.2708 14.7405 20.2715 14.0947 20.2715 12.8057C20.2715 11.9806 20.3631 11.0803 20.0352 10.3037C19.8562 9.88029 19.4279 9.33546 19.0586 9.06152C18.5706 8.69964 18.1638 8.60067 17.3516 8.40332Z" fill="currentColor"/>
<path d="M2.86333 10.7393C2.79805 10.9707 2.7531 11.2053 2.7149 11.4424C2.64844 11.9339 2.64849 12.5225 2.64849 13.5674L2.65044 14.4492C2.65537 15.2237 2.67513 15.7025 2.75396 16.1182C2.82942 16.4813 2.92441 16.8374 3.05962 17.1836C3.05835 17.1803 3.05698 17.1771 3.05572 17.1738C1.93813 17.1766 1.02699 16.2761 1.01861 15.1572L1.00005 12.6875C0.992369 11.6362 1.8232 10.7782 2.86333 10.7393Z" fill="currentColor"/>
<path d="M21.8536 10.4102C23.1521 10.6254 24.0736 11.8198 23.9278 13.1475L23.7588 14.6836C23.6379 15.7836 22.8507 16.646 21.8438 16.9199C21.9017 16.7485 21.9536 16.5736 21.9961 16.3955C22.1373 15.7443 22.1538 15.0859 22.1583 14.4209L22.1602 13.4941C22.1602 12.2987 22.1605 11.7 22.0499 11.1318C22.0023 10.8879 21.9358 10.6469 21.8536 10.4102Z" fill="currentColor"/>
<path d="M13.5411 6.2041C13.2066 6.20089 12.873 6.20049 12.5391 6.20215C12.5873 5.59323 12.6651 5.08294 12.7676 4.63965C12.1906 4.29963 11.8018 3.67326 11.8018 2.95508C11.8021 1.87531 12.678 1.00005 13.7579 1C14.8377 1.00001 15.7127 1.87528 15.7129 2.95508C15.7129 4.04353 14.8176 4.92299 13.7325 4.90918C13.6498 5.27685 13.5841 5.70041 13.5411 6.2041Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

assets/images/gordon-robot.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

layouts/_partials/gordon-chat.html
+286 -226
View File
@@ -334,31 +334,45 @@
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:top-2 md:right-2 md:h-[calc(100vh-1rem)] md:w-[min(80ch,90vw)] dark:bg-gray-900"
class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-none bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] dark:bg-gray-950"
>
<!-- Header -->
<div
class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700"
class="z-10 flex items-center justify-between bg-blue-500 px-6 py-3 shadow-lg/30 dark:shadow-lg/60"
>
<div class="flex items-center gap-3">
{{ partial "utils/svg.html" "images/gordon-logo.svg" }}
</div>
<div class="flex items-center gap-2">
<button
@click="clearChat()"
title="Clear chat"
class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
:disabled="messages.length === 0"
:class="{ 'opacity-50 cursor-not-allowed': messages.length === 0 }"
>
<span class="icon-svg">
{{ partialCached "icon" "refresh" "refresh" }}
</span>
</button>
<div data-tooltip-wrapper class="relative">
<button
@click="clearChat()"
aria-label="Start a new chat"
class="cursor-pointer rounded p-2 text-white transition-colors enabled:hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-50"
:disabled="messages.length === 0"
>
<span class="icon-svg">
{{ partialCached "icon" "replay" "replay" }}
</span>
</button>
<div
id="gordon-tooltip"
data-tooltip-body
class="absolute top-0 left-0 hidden rounded-sm bg-gray-900 p-2 text-sm whitespace-nowrap text-white"
role="tooltip"
x-show="messages.length > 0"
>
Start a new chat
<div
data-tooltip-arrow
class="absolute h-2 w-2 rotate-45 bg-gray-900"
></div>
</div>
</div>
<button
@click="$store.gordon.close()"
class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
title="Close chat"
title="Close chat drawer"
class="cursor-pointer rounded p-2 text-white transition-colors hover:bg-white/15"
aria-label="Close chat"
>
<span class="icon-svg">
@@ -372,167 +386,201 @@
<div
x-ref="messagesContainer"
class="flex-1 space-y-4 p-6"
style="scrollbar-width: none; &::-webkit-scrollbar: { display: none; }"
:class="{ 'overflow-y-auto': messages.length > 0 }"
>
<!-- Welcome message when empty -->
<template x-if="messages.length === 0">
<div
class="flex h-full flex-col items-center justify-center text-center"
class="flex h-full flex-col items-center justify-start overflow-y-auto px-2 pt-4 pb-2 text-center"
>
<div class="mb-4 rounded-full bg-blue-100 p-4 dark:bg-blue-900">
<span class="icon-svg text-blue-600 dark:text-blue-400">
{{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
</span>
<div class="mx-auto mb-2 w-4/5 max-w-xs" aria-hidden="true">
<div
class="motion-safe:animate-[robotFloat_5s_ease-in-out_infinite]"
>
{{ partial "utils/svg.html" "images/gordon-robot.svg" }}
</div>
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
Ask me about Docker
</h3>
<p class="max-w-sm text-gray-600 dark:text-gray-400">
Get instant answers to your Docker questions. I can help with
commands, concepts, troubleshooting, and best practices.
</p>
<div class="mt-8 flex flex-col items-center gap-3 text-sm">
<p class="mb-1 text-gray-500 dark:text-gray-400">Try asking:</p>
<button
@click="currentQuestion = 'How do Docker Hardened Images work?'; askQuestion()"
class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
>
How do Docker Hardened Images work?
</button>
<button
@click="currentQuestion = 'What is MCP Toolkit?'; askQuestion()"
class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
>
What is MCP Toolkit?
</button>
<button
@click="currentQuestion = 'How do I create an org?'; askQuestion()"
class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
>
How do I create an org?
</button>
<div class="flex w-full flex-col items-center justify-start gap-3">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
What can I help you with?
</h3>
<p class="max-w-sm text-lg text-gray-600 dark:text-gray-400">
I'm Gordon, your AI assistant for Docker and documentation
questions.
</p>
<div class="w-full text-left">
<p
class="text-sm font-bold text-gray-600 uppercase dark:text-gray-400"
>
Try asking
</p>
</div>
{{- $gordonSuggestions := slice
(dict
"title" "Get started with Docker"
"question" "Help me get started with Docker. What should I do first?"
"icon" "icons/rocket.svg")
(dict
"title" "Docker Hardened Images"
"question" "How do Docker Hardened Images work?"
"icon" "icons/dhi.svg")
(dict
"title" "MCP Toolkit"
"question" "What is MCP Toolkit?"
"icon" "icons/toolkit.svg")
(dict
"title" "Create an org"
"question" "How do I create an org?"
"icon" "icons/headset.svg")
-}}
<div class="grid w-full grid-cols-2 gap-2">
{{- range $gordonSuggestions }}
<button
@click="currentQuestion = {{ .question | jsonify }}; askQuestion()"
class="cursor-pointer rounded-xl border border-gray-200 bg-white p-3 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
>
<div class="flex items-center gap-3">
<span
class="icon-svg shrink-0 rounded-lg bg-blue-100 p-1 text-blue-500 dark:bg-gray-700 dark:text-blue-400"
>
{{ partialCached "icon" .icon .icon }}
</span>
<p class="text-sm font-medium">{{ .title }}</p>
</div>
</button>
{{- end }}
</div>
</div>
</div>
</template>
<!-- Messages -->
<template x-for="(message, index) in messages" :key="index">
<div
:class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'"
>
<div class="flex max-w-full flex-col gap-2">
<div
:class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'"
class="prose prose-sm dark:prose-invert rounded-lg px-4"
>
<template x-if="!message.content && message.isStreaming">
<div class="flex gap-1 py-3">
<span
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 0ms"
></span>
<span
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 150ms"
></span>
<span
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 300ms"
></span>
</div>
</template>
<template x-if="message.content">
<div x-html="formatMessageContent(message.content)"></div>
</template>
</div>
<!-- Feedback buttons for assistant messages -->
<template
x-if="message.role === 'assistant' && !message.isStreaming"
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 text-xs">
<!-- "Was this helpful?" prompt with sparkle icon -->
<div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400">
<span class="icon-svg icon-xs text-blue-500 dark:text-blue-400">
{{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
</span>
<span class="font-medium">Was this helpful?</span>
</div>
<!-- Feedback buttons group -->
<div class="flex items-center gap-2">
<!-- Thumbs up - Helpful -->
<button
@click="submitFeedback(index, 'positive')"
:class="message.feedback === 'positive'
? 'bg-green-100 text-green-700 ring ring-green-500 dark:bg-green-900/50 dark:text-green-400 dark:ring-green-600'
: 'bg-gray-100 text-gray-600 hover:bg-green-50 hover:text-green-600 hover:ring hover:ring-green dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-green-900/30 dark:hover:text-green-400 dark:hover:ring-green'"
class="cursor-pointer rounded-full px-3 py-1.5 transition-all duration-200 flex items-center gap-1.5"
title="Helpful"
>
<span class="icon-svg icon-sm transition-transform">
{{ partialCached "icon" "thumb_up" "thumb_up" }}
</span>
<span class="hidden sm:inline font-medium">Helpful</span>
</button>
<!-- Thumbs down - Not quite -->
<button
@click="submitFeedback(index, 'negative')"
:class="message.feedback === 'negative'
? 'bg-red-100 text-red-700 ring ring-red-500 dark:bg-red-900/50 dark:text-red-400 dark:ring-red-600'
: 'bg-gray-100 text-gray-600 hover:bg-red-50 hover:text-red-600 hover:ring hover:ring-red dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-900/30 dark:hover:text-red-400 dark:hover:ring-red'"
class="cursor-pointer rounded-full px-3 py-1.5 transition-all duration-200 flex items-center gap-1.5"
title="Not quite"
>
<span class="icon-svg icon-sm transition-transform">
{{ partialCached "icon" "thumb_down" "thumb_down" }}
</span>
<span class="hidden sm:inline font-medium">Not quite</span>
</button>
</div>
<!-- Separator -->
<div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
<!-- Copy button -->
<button
@click="copyAnswer(index)"
class="cursor-pointer rounded-full px-3 py-1.5 transition-all duration-200 flex items-center gap-1.5 bg-gray-100 text-gray-600 hover:bg-blue-50 hover:text-blue-700 hover:ring hover:ring-blue dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-blue-900/30 dark:hover:text-blue-300 dark:hover:ring-blue-400"
:title="message.copied ? 'Copied!' : 'Copy answer'"
>
<div x-show="messages.length > 0" class="relative flex flex-col gap-4">
<template x-for="(message, index) in messages" :key="index">
<div
:class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'"
>
<div class="flex max-w-full flex-col gap-2">
<div
:class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'"
class="prose prose-sm dark:prose-invert rounded-lg px-4"
>
<template x-if="!message.content && message.isStreaming">
<div class="flex gap-1 py-3">
<span
x-show="message.copied !== true"
class="icon-svg icon-sm"
>
{{ partialCached "icon" "content_copy" "content_copy" }}
</span>
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 0ms"
></span>
<span
x-show="message.copied === true"
class="icon-svg icon-sm"
>
{{ partialCached "icon" "check_circle" "check_circle" }}
</span>
<span class="hidden sm:inline font-medium">Copy</span>
</button>
</div>
<!-- Error message -->
<template x-if="message.feedbackError">
<div
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
class="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400"
>
<span x-text="message.feedbackError"></span>
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 150ms"
></span>
<span
class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
style="animation-delay: 300ms"
></span>
</div>
</template>
<template x-if="message.content">
<div x-html="formatMessageContent(message.content)"></div>
</template>
</div>
</template>
<!-- Feedback buttons for assistant messages -->
<template
x-if="message.role === 'assistant' && !message.isStreaming"
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 text-xs">
<!-- "Was this helpful?" prompt with gordon icon -->
<div
class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400"
>
<span class="icon-svg icon-sm">
{{ partialCached "icon" "icons/gordon.svg" "icons/gordon.svg" }}
</span>
<span class="font-medium">Was this helpful?</span>
</div>
<!-- Feedback buttons group -->
<div class="flex items-center gap-2">
<!-- Thumbs up - Helpful -->
<button
@click="submitFeedback(index, 'positive')"
:class="message.feedback === 'positive'
? 'bg-green-100 text-green-700 ring ring-green-500 dark:bg-green-900/50 dark:text-green-400 dark:ring-green-600'
: 'bg-gray-100 text-gray-600 hover:bg-green-50 hover:text-green-600 hover:ring hover:ring-green dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-green-900/30 dark:hover:text-green-400 dark:hover:ring-green'"
class="flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
title="Helpful"
>
<span class="icon-svg icon-sm transition-transform">
{{ partialCached "icon" "thumb_up" "thumb_up" }}
</span>
<span class="hidden font-medium sm:inline"
>Helpful</span
>
</button>
<!-- Thumbs down - Not quite -->
<button
@click="submitFeedback(index, 'negative')"
:class="message.feedback === 'negative'
? 'bg-red-100 text-red-700 ring ring-red-500 dark:bg-red-900/50 dark:text-red-400 dark:ring-red-600'
: 'bg-gray-100 text-gray-600 hover:bg-red-50 hover:text-red-600 hover:ring hover:ring-red dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-900/30 dark:hover:text-red-400 dark:hover:ring-red'"
class="flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
title="Not quite"
>
<span class="icon-svg icon-sm transition-transform">
{{ partialCached "icon" "thumb_down" "thumb_down" }}
</span>
<span class="hidden font-medium sm:inline"
>Not quite</span
>
</button>
</div>
<!-- Separator -->
<div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
<!-- Copy button -->
<button
@click="copyAnswer(index)"
class="hover:ring-blue flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-gray-600 transition-all duration-200 hover:bg-blue-50 hover:text-blue-700 hover:ring dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-blue-900/30 dark:hover:text-blue-300 dark:hover:ring-blue-400"
:title="message.copied ? 'Copied!' : 'Copy answer'"
>
<span
x-show="message.copied !== true"
class="icon-svg icon-sm"
>
{{ partialCached "icon" "content_copy" "content_copy" }}
</span>
<span
x-show="message.copied === true"
class="icon-svg icon-sm"
>
{{ partialCached "icon" "check_circle" "check_circle" }}
</span>
<span class="hidden font-medium sm:inline">Copy</span>
</button>
</div>
<!-- Error message -->
<template x-if="message.feedbackError">
<div
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
class="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400"
>
<span x-text="message.feedbackError"></span>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
</template>
</template>
</div>
<!-- Error message -->
<template x-if="error">
@@ -579,81 +627,82 @@
</div>
<!-- Input area -->
<div class="border-t border-gray-200 p-4 dark:border-gray-700">
<form @submit.prevent="askQuestion()" class="space-y-2">
<div class="flex items-center gap-2">
<div class="relative flex-1 self-stretch">
<textarea
x-ref="input"
x-model="currentQuestion"
@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
placeholder="Ask a question about Docker..."
rows="1"
:disabled="isLoading || isThreadLimitReached()"
class="block min-h-[3rem] w-full resize-none rounded-lg border border-gray-300 p-3 leading-normal focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"
:class="{ 'cursor-not-allowed': isThreadLimitReached() }"
></textarea>
</div>
<button
type="submit"
:disabled="!currentQuestion.trim() || isLoading || isThreadLimitReached()"
:title="isLoading ? 'Sending...' : (isThreadLimitReached() ? 'Thread limit reached. Start a new thread.' : 'Send question')"
class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
>
<template x-if="!isLoading">
<span class="icon-svg">
{{ partialCached "icon" "send" "send" }}
</span>
</template>
<template x-if="isLoading">
<span class="icon-svg animate-spin">
{{ partialCached "icon" "progress_activity" "progress_activity" }}
</span>
</template>
</button>
<form @submit.prevent="askQuestion()" class="space-y-2 p-4 pt-0">
<div class="relative w-full">
<div class="relative flex-1 self-stretch">
<textarea
id="question"
x-ref="input"
x-model="currentQuestion"
@input="$el.style.height = 'auto'; $el.style.height = Math.min(160, $el.scrollHeight) + 'px'"
@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
placeholder="Ask a question about Docker..."
rows="3"
:disabled="isLoading || isThreadLimitReached()"
class="block min-h-[3rem] w-full resize-none rounded-lg border border-gray-300 bg-white p-3 leading-normal focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none enabled:hover:border-white disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:focus:border-blue-400"
></textarea>
</div>
<div class="flex items-center justify-between" x-data="{ showTooltip: false }">
<div class="relative">
<!-- Tooltip -->
<div
x-show="showTooltip"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute bottom-full left-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
style="display: none;"
>
<div class="relative">
<p>
When enabled, Gordon considers the current page you're viewing
to provide more relevant answers.
</p>
<!-- Arrow -->
<div
class="absolute -bottom-3 left-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"
></div>
</div>
<button
type="submit"
:disabled="!currentQuestion.trim() || isLoading || isThreadLimitReached()"
:title="isLoading ? 'Sending...' : (isThreadLimitReached() ? 'Thread limit reached. Start a new thread.' : 'Send question')"
class="absolute top-2 right-2 cursor-pointer rounded p-2 text-blue-500 transition-colors enabled:hover:bg-blue-500/15 disabled:cursor-not-allowed disabled:text-gray-500"
>
<template x-if="!isLoading">
<span class="icon-svg">
{{ partialCached "icon" "send" "send" }}
</span>
</template>
<template x-if="isLoading">
<span class="icon-svg animate-spin">
{{ partialCached "icon" "progress_activity" "progress_activity" }}
</span>
</template>
</button>
</div>
<div
class="flex items-center justify-between"
x-data="{ showTooltip: false }"
>
<div class="relative">
<!-- Tooltip -->
<div
x-show="showTooltip"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute bottom-full left-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
style="display: none;"
>
<div class="relative">
<p>
When enabled, Gordon considers the current page you're viewing
to provide more relevant answers.
</p>
<!-- Arrow -->
<div
class="absolute -bottom-3 left-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"
></div>
</div>
</div>
<a
href="https://github.com/docker/docs/issues/23966"
target="_blank"
rel="noopener noreferrer"
class="text-xs text-gray-500 underline hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
>
Share feedback
</a>
</div>
</form>
</div>
<a
href="https://github.com/docker/docs/issues/23966"
target="_blank"
rel="noopener noreferrer"
class="text-xs text-gray-500 underline hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
>
Share feedback
</a>
</div>
</form>
<!-- Disclaimer -->
<div
class="rounded-b-lg border-t border-gray-200 bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
class="bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
>
Answers are generated based on the documentation.
</div>
@@ -662,6 +711,17 @@
<!-- Styles for Gordon chat -->
<style>
/* Robot floating animation */
@keyframes robotFloat {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(1deg);
}
}
/* Code block styles */
#gordon-chat pre {
background: #0d1117;
layouts/_partials/header.html
+7 -4
View File
@@ -52,10 +52,13 @@
@click="$store.gordon.toggle()"
aria-label="Ask Gordon, AI assistant"
aria-describedby="gordon-tooltip"
class="shimmer open-kapa-widget flex cursor-pointer items-center gap-2 rounded-lg border border-blue-500 bg-blue-700 p-2 text-white transition-colors focus:ring focus:ring-blue-400 focus:outline-none"
class="group shimmer open-kapa-widget flex cursor-pointer items-center gap-2 rounded-lg border border-blue-500 bg-blue-700 p-2 text-white transition-colors focus:ring focus:ring-blue-400 focus:outline-none"
>
<span class="icon-svg">
{{ partial "utils/svg.html" "/icons/sparkle.svg" }}
<span class="icon-svg group-hover:hidden">
{{ partialCached "icon" "icons/gordon.svg" "icons/gordon.svg" }}
</span>
<span class="icon-svg hidden group-hover:block">
{{ partialCached "icon" "icons/gordon-happy.svg" "icons/gordon-happy.svg" }}
</span>
<span class="hidden px-1 lg:inline">Gordon</span>
</button>
@@ -65,7 +68,7 @@
class="absolute top-0 left-0 hidden rounded-sm bg-gray-900 p-2 text-sm whitespace-nowrap text-white"
role="tooltip"
>
Ask Gordon — AI assistant for Docker docs
Gordon, your AI assistant for Docker docs
<div
data-tooltip-arrow
class="absolute h-2 w-2 rotate-45 bg-gray-900"
layouts/home.html
+9 -6
View File
@@ -24,13 +24,16 @@
How can we help?
</h1>
<!-- AI Search Input -->
<div class="py-6 mx-auto max-w-2xl" x-data="{ query: '' }">
<div class="mx-auto max-w-2xl py-6" x-data="{ query: '' }">
<div
class="flex items-center gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 shadow-lg transition focus-within:scale-[1.02] focus-within:border-blue-500 hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900"
class="group flex items-center gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 shadow-lg transition focus-within:scale-[1.02] focus-within:border-blue-500 hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900"
>
<div class="shrink-0 rounded-xl bg-blue-500 p-2 text-white">
<span class="icon-svg-stroke">
{{ partial "icon" "icons/sparkle.svg" }}
<div class="shrink-0 rounded-xl text-blue-500">
<span class="icon-svg group-hover:hidden">
{{ partialCached "icon" "icons/gordon.svg" "icons/gordon.svg" }}
</span>
<span class="icon-svg hidden group-hover:block">
{{ partialCached "icon" "icons/gordon-happy.svg" "icons/gordon-happy.svg" }}
</span>
</div>
<input
@@ -56,7 +59,7 @@
<div class="mt-6 flex flex-wrap justify-center gap-3" x-data>
{{ range slice
"How do I get started with Docker?"
"Can I run my AI agent in a sandbox?"
"Can I run my AI agent in a sandbox?"
"What is a container?"
"What are Docker Hardened Images?"
"Why should I use Docker Compose?"