Skip to content

Commit 444842d

Browse files
avvertixavvertix
committed
Improve agent mode
1 parent 1578402 commit 444842d

10 files changed

Lines changed: 27 additions & 158 deletions

‎source/_assets/css/main.css‎

Lines changed: 2 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ html[data-agent] {
265265
}
266266

267267
/* Strip all decorative CSS from every element */
268-
html[data-agent] * {
268+
html[data-agent] *:not(.ignore-agent) {
269269
font-family: inherit;
270270
background-image: none !important;
271271
box-shadow: none !important;
@@ -297,6 +297,7 @@ html[data-agent] nav {
297297
}
298298

299299
html[data-agent] header svg,
300+
html[data-agent] .ignore-agent svg,
300301
html[data-agent] nav svg {
301302
display: revert !important;
302303
}
@@ -413,111 +414,6 @@ html[data-agent] [data-agent-content] {
413414
display: block !important;
414415
}
415416

416-
/* ── .ignore-agent: opt an element and its descendants out of agent rendering ─
417-
Add class="ignore-agent" to any container to preserve its normal visual
418-
rendering in agent mode. All agent-mode overrides are reverted.
419-
──────────────────────────────────────────────────────────────────────────── */
420-
html[data-agent] .ignore-agent,
421-
html[data-agent] .ignore-agent * {
422-
font-family: revert;
423-
background-image: revert !important;
424-
background-color: revert;
425-
box-shadow: revert !important;
426-
text-shadow: revert !important;
427-
border-color: revert !important;
428-
border-radius: revert !important;
429-
color: revert;
430-
}
431-
432-
html[data-agent] .ignore-agent svg,
433-
html[data-agent] .ignore-agent img,
434-
html[data-agent] .ignore-agent picture,
435-
html[data-agent] .ignore-agent video,
436-
html[data-agent] .ignore-agent iframe,
437-
html[data-agent] .ignore-agent [aria-hidden="true"],
438-
html[data-agent] .ignore-agent [role="presentation"] {
439-
display: revert !important;
440-
}
441-
442-
html[data-agent] .ignore-agent h1::before,
443-
html[data-agent] .ignore-agent h2::before,
444-
html[data-agent] .ignore-agent h3::before,
445-
html[data-agent] .ignore-agent h4::before,
446-
html[data-agent] .ignore-agent h5::before,
447-
html[data-agent] .ignore-agent h6::before {
448-
content: none;
449-
}
450-
451-
html[data-agent] .ignore-agent h1,
452-
html[data-agent] .ignore-agent h2,
453-
html[data-agent] .ignore-agent h3,
454-
html[data-agent] .ignore-agent h4,
455-
html[data-agent] .ignore-agent h5,
456-
html[data-agent] .ignore-agent h6 {
457-
font-size: revert;
458-
font-weight: revert;
459-
margin: revert;
460-
}
461-
462-
html[data-agent] .ignore-agent a[href]::after,
463-
html[data-agent] .ignore-agent a[aria-current]::before {
464-
content: none;
465-
}
466-
467-
html[data-agent] .ignore-agent ul {
468-
list-style: revert;
469-
padding-left: revert;
470-
}
471-
472-
html[data-agent] .ignore-agent ul > li::before {
473-
content: none;
474-
}
475-
476-
html[data-agent] .ignore-agent blockquote > p::before {
477-
content: none;
478-
}
479-
480-
html[data-agent] .ignore-agent :not(pre) > code::before,
481-
html[data-agent] .ignore-agent :not(pre) > code::after {
482-
content: none;
483-
}
484-
485-
html[data-agent] .ignore-agent pre::before,
486-
html[data-agent] .ignore-agent pre::after {
487-
content: none;
488-
}
489-
490-
html[data-agent] .ignore-agent hr {
491-
display: revert;
492-
border: revert !important;
493-
}
494-
495-
html[data-agent] .ignore-agent hr::before {
496-
content: none;
497-
}
498-
499-
500-
/* ─── Agent suggestions thinking animation ────────────────────────────────── */
501-
502-
@keyframes agent-thinking-dot {
503-
0%, 80%, 100% {
504-
opacity: 0.3;
505-
transform: translateY(0);
506-
}
507-
40% {
508-
opacity: 1;
509-
transform: translateY(-4px);
510-
}
511-
}
512-
513-
.agent-thinking-dot {
514-
display: inline-block;
515-
width: 5px;
516-
height: 5px;
517-
border-radius: 9999px;
518-
background-color: currentColor;
519-
animation: agent-thinking-dot 1.4s ease-in-out infinite;
520-
}
521417

522418

523419
/* ─── Hit area utilities (via shadcn registry) ────────────────────────────────
@@ -743,29 +639,3 @@ html[data-agent] .ignore-agent hr::before {
743639
letter-spacing: -0.04em;
744640
font-variant-numeric: tabular-nums;
745641
}
746-
747-
/* Thin rule separator with corner tick marks */
748-
.rule-industrial {
749-
position: relative;
750-
border-top: 1px solid;
751-
}
752-
753-
.rule-industrial::before,
754-
.rule-industrial::after {
755-
content: '';
756-
position: absolute;
757-
top: -3px;
758-
width: 5px;
759-
height: 5px;
760-
border-top: 1px solid currentColor;
761-
}
762-
763-
.rule-industrial::before {
764-
left: 0;
765-
border-left: 1px solid currentColor;
766-
}
767-
768-
.rule-industrial::after {
769-
right: 0;
770-
border-right: 1px solid currentColor;
771-
}

‎source/_components/button.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<button {{ $attributes->merge(['type' => 'button'])->class(['select-none inline-flex items-center px-3 h-[34px] shadow-sm text-sm leading-4 ring-1 ring-zinc-950/10 font-medium text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-600 agent:dark:bg-zinc-100 dark:text-white agent:dark:text-zinc-950! dark:hover:bg-zinc-500 agent:dark:hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-accent-500 whitespace-nowrap transition-button']) }} >
1+
<button {{ $attributes->merge(['type' => 'button'])->class(['select-none inline-flex items-center px-3 h-[34px] text-sm leading-4 font-medium text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 whitespace-nowrap transition-button']) }} >
22
{{ $slot }}
33
</button>

‎source/_components/card.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
default => 'text-sm/5',
1414
};
1515
@endphp
16-
<div class="flex flex-col rounded-lg p-5 {{ $bgClasses }}">
16+
<div class="flex flex-col rounded-lg p-5 agent:p-0 {{ $bgClasses }}">
1717
@if (!empty($title ?? ''))
18-
<div class="flex items-center gap-2 mb-2">
18+
<div class="flex items-center gap-2 mb-2 agent:items-start">
1919
@if (!empty($badge ?? ''))
20-
<span class="inline-block text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClasses }}">{{ ucfirst($badge) }}</span>
20+
<span class=" inline-block agent:hidden text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClasses }}">{{ ucfirst($badge) }}</span>
2121
@endif
2222
<h3 class="text-sm font-semibold text-zinc-950 dark:text-white">{{ $title }}</h3>
2323
</div>

‎source/_components/comparison-card.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="flex flex-col rounded-lg p-6 bg-white/50 dark:bg-white/10 ring-1 ring-zinc-300 dark:ring-zinc-500">
1+
<div class="flex flex-col rounded-lg p-6 bg-white/50 dark:bg-white/10 ring-1 ring-zinc-300 dark:ring-zinc-500 agent:p-0">
22
<div class="flex items-baseline gap-2 mb-3">
33
<h3 class="text-base font-semibold text-zinc-950 dark:text-white"><span class="sr-only">Content-md</span> vs. {{ $versus }}</h3>
44
</div>

‎source/_components/copy-as-markdown-button.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
x-data="{ copied: false }" x-bind:data-copied="copied"
33
@click="navigator.clipboard.writeText(document.getElementById('markdown-template').content.textContent.trim()).then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
44
{{-- class="grid-cols-2 grid-flow-col-dense gap-2" --}}
5-
class="gap-2"
5+
class="ignore-agent ring-1 ring-zinc-950/10 shadow-sm gap-2"
66
aria-label="Copy markdown to clipboard"
77
>
88

99
<svg
1010
data-icon
11-
class="shrink-0 [:where(&)]:size-5 [[data-copied]_&]:hidden size-5!"
11+
class="shrink-0 [:where(&)]:size-5 [[data-copied]_&]:hidden! size-5!"
1212
aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1313
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
1414
</svg>
1515

16-
<svg class="shrink-0 [:where(&)]:size-5 hidden text-accent-500 [[data-copied]_&]:block size-5!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
16+
<svg class="shrink-0 [:where(&)]:size-5 hidden! text-orange-500 [[data-copied]_&]:block! size-5!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
1717
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
1818
</svg>
1919

‎source/_components/format-example.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<x-container class="mt-4 mb-8">
1+
<x-container class="mt-4 mb-8 agent:mt-0 agent:mb-0">
22
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start agent:flex agent:flex-col">
33

44
<div class="rounded-lg overflow-hidden agent:hidden shadow-2xl">

‎source/_components/ghost-button.blade.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<button {{ $attributes->merge(['type' => 'button'])->class(['select-none inline-flex items-center px-3 h-[34px] text-sm leading-4 font-medium text-zinc-700 hover:bg-zinc-50 dark:text-white dark:hover:bg-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 whitespace-nowrap transition-button']) }} >
2+
{{ $slot }}
3+
</button>

‎source/_components/page-hero.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{ $decoration ?? '' }}
77
</div>
88

9-
<div class="relative mt-8 pb-12 col-start-1 row-start-1">
9+
<div class="relative mt-8 pb-12 col-start-1 row-start-1 agent:pb-0">
1010
<x-container class="mb-6">
1111
<div class="flex flex-col gap-6">
1212
<div class="flex flex-col items-start gap-6">

‎source/_layouts/main.blade.php‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -77,22 +77,18 @@
7777
},
7878
setAgent(val) { this.agent = val; this.applyAll() },
7979
}"
80-
class="shadow-xl ignore-agent z-50 fixed bottom-3.5 right-3.5 border border-zinc-600/20 bg-zinc-100 dark:border-white/10 dark:bg-zinc-900">
81-
<div class="px-4 flex items-center justify-end gap-3 py-2 text-xs agent:text-sm">
80+
class="ignore-agent shadow-xl z-50 fixed bottom-3.5 right-3.5 border border-zinc-600/20 bg-zinc-100! dark:border-white/10 dark:bg-zinc-900!">
81+
<div class="px-4 flex items-center justify-end gap-3 py-2 text-xs">
8282
<span class="sr-only">Switch viewing mode</span>
8383
<div class="flex items-center gap-1">
84-
<button @click="setAgent(false)" class=" ignore-agent hit-area-y-2 flex items-center gap-1.5 rounded px-2 py-1 text-zinc-600 hover:text-accent-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/10 transition" :class="{ 'text-accent-600 font-medium': !agent }">
85-
<span class="inline-flex w-3.5 h-3.5 rounded-sm border! border-current items-center justify-center">
86-
<svg x-show="!agent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="currentColor" class="w-2.5 h-2.5"><path d="M10 3L5 8.5 2 5.5l-.8.8L5 10.1 10.8 3.8z"/></svg>
87-
</span>
84+
<x-ghost-button @click="setAgent(false)" class="hit-area-y-2 gap-1.5 rounded [[data-active]_&]:text-orange-700! [[data-active]_&]:agent:text-orange-700!" x-bind:data-active="!agent">
85+
<span class="ignore-agent inline-flex [[data-active]_&]:bg-current w-3.5 h-3.5 rounded-sm border! border-current items-center justify-center"></span>
8886
Human
89-
</button>
90-
<button @click="setAgent(true)" class=" ignore-agent hit-area-y-2 flex items-center gap-1.5 rounded px-2 py-1 text-zinc-600 hover:text-accent-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/10 transition" :class="{ 'text-accent-600 font-medium': agent }">
91-
<span class="inline-flex w-3.5 h-3.5 rounded-sm border! border-current items-center justify-center">
92-
<svg x-show="agent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="currentColor" class="w-2.5 h-2.5"><path d="M10 3L5 8.5 2 5.5l-.8.8L5 10.1 10.8 3.8z"/></svg>
93-
</span>
87+
</x-ghost-button>
88+
<x-ghost-button @click="setAgent(true)" class="hit-area-y-2 gap-1.5 rounded [[data-active]_&]:text-orange-700! [[data-active]_&]:agent:text-orange-700!" x-bind:data-active="agent">
89+
<span class="ignore-agent inline-flex [[data-active]_&]:bg-current w-3.5 h-3.5 rounded-sm border! border-current items-center justify-center"></span>
9490
Agent
95-
</button>
91+
</x-ghost-button>
9692
</div>
9793
<div class=" ignore-agent">
9894
<x-copy-as-markdown-button />
@@ -102,13 +98,13 @@ class="shadow-xl ignore-agent z-50 fixed bottom-3.5 right-3.5 border border-zinc
10298

10399
{{-- Header --}}
104100
<header class="border-b border-zinc-100 dark:border-zinc-800 agent:hidden">
105-
<x-container class="flex items-center justify-between py-4">
101+
<x-container class="flex items-center justify-between py-4 agent:flex-col agent:items-start agent:gap-4">
106102
<a href="/" class="inline-flex gap-1 items-center text-xl sm:text-3xl font-mono font-medium text-zinc-950 dark:text-white hover:text-orange-600 dark:hover:text-orange-300 transition-button">
107103
<x-logo class="text-orange-600 dark:text-orange-400 size-6 sm:size-8" />
108104
content-md
109105
</a>
110-
<nav class="relative flex items-center gap-6 text-sm">
111-
<div class="hidden sm:flex items-center gap-6 ">
106+
<nav class="relative flex items-center gap-6 text-sm agent:flex-col agent:items-start">
107+
<div class="hidden sm:flex items-center gap-6 agent:flex-col agent:flex agent:items-start agent:gap-3">
112108
<a href="/writers" class="text-zinc-600 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-button">Write content-md</a>
113109
<a href="/consumers" class="text-zinc-600 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-button">Read content-md</a>
114110
<a href="/specification" class="text-zinc-600 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-button">Specification</a>

‎source/index.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</x-slot>
2222

2323
<x-slot name="extra">
24-
<div class="flex items-center gap-3">
24+
<div class="flex items-center gap-3 agent:hidden">
2525
<div class="flex -space-x-1">
2626
<a href="https://www.linkedin.com/in/alessio-vertemati-b1b60244/" target="_blank" rel="noopener noreferrer" class="group relative block size-8 shrink-0">
2727
<img src="/assets/images/team/alessio.jpg" alt="Alessio" class="block size-8 rounded-full object-cover ring-2 ring-orange-50 transition-all relative">

0 commit comments

Comments
 (0)