@eventcatalog/core 2.53.1 → 2.54.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/analytics/analytics.cjs +1 -1
- package/dist/analytics/analytics.js +2 -2
- package/dist/analytics/log-build.cjs +1 -1
- package/dist/analytics/log-build.js +3 -3
- package/dist/{chunk-Q363JHA2.js → chunk-7NKHMS4K.js} +1 -1
- package/dist/{chunk-K5LYWIYR.js → chunk-EUDMSTHT.js} +1 -1
- package/dist/{chunk-LUUBKWYP.js → chunk-MCSZBCOG.js} +5 -0
- package/dist/{chunk-BQDTPLND.js → chunk-ONQOSPKG.js} +1 -1
- package/dist/constants.cjs +1 -1
- package/dist/constants.js +1 -1
- package/dist/eventcatalog.cjs +22 -1
- package/dist/eventcatalog.js +22 -4
- package/dist/features.cjs +6 -0
- package/dist/features.d.cts +2 -1
- package/dist/features.d.ts +2 -1
- package/dist/features.js +3 -1
- package/eventcatalog/astro.config.mjs +0 -2
- package/eventcatalog/src/components/Header.astro +1 -1
- package/eventcatalog/src/components/Search/Search.astro +102 -0
- package/eventcatalog/src/components/Search/SearchModal.tsx +816 -0
- package/eventcatalog/src/pages/auth/error.astro +47 -35
- package/eventcatalog/src/pages/chat/feature.astro +137 -125
- package/package.json +3 -2
- package/eventcatalog/src/components/Search.astro +0 -128
|
@@ -15,41 +15,53 @@ const errorMessages = {
|
|
|
15
15
|
const errorMessage = errorMessages[error] || errorMessages.Default;
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
18
|
+
<!doctype html>
|
|
19
|
+
<html lang="en">
|
|
20
|
+
<head>
|
|
21
|
+
<meta charset="UTF-8" />
|
|
22
|
+
<meta name="viewport" content="width=device-width" />
|
|
23
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
24
|
+
<meta name="generator" content={Astro.generator} />
|
|
25
|
+
<title>Authentication Error - EventCatalog</title>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<main title="Authentication Error - EventCatalog">
|
|
29
|
+
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
30
|
+
<div class="max-w-md w-full space-y-8 text-center">
|
|
31
|
+
<div>
|
|
32
|
+
<svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
33
|
+
<path
|
|
34
|
+
stroke-linecap="round"
|
|
35
|
+
stroke-linejoin="round"
|
|
36
|
+
stroke-width="2"
|
|
37
|
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
|
38
|
+
></path>
|
|
39
|
+
</svg>
|
|
40
|
+
<h2 class="mt-6 text-3xl font-bold text-gray-900">Authentication Error</h2>
|
|
41
|
+
<p class="mt-2 text-sm text-gray-600">
|
|
42
|
+
{errorMessage}
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
35
45
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
46
|
+
<div class="space-y-4">
|
|
47
|
+
<a
|
|
48
|
+
href="/auth/login"
|
|
49
|
+
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
50
|
+
>
|
|
51
|
+
Try Again
|
|
52
|
+
</a>
|
|
43
53
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
<a
|
|
55
|
+
href="/"
|
|
56
|
+
class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
57
|
+
>
|
|
58
|
+
Back to Home
|
|
59
|
+
</a>
|
|
60
|
+
</div>
|
|
51
61
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
</main>
|
|
62
|
+
{error && <div class="mt-8 text-xs text-gray-400">Error code: {error}</div>}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</main>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
@@ -9,148 +9,160 @@ if (hasChatLicense) {
|
|
|
9
9
|
}
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
12
|
+
<!doctype html>
|
|
13
|
+
<html lang="en">
|
|
14
|
+
<head>
|
|
15
|
+
<meta charset="UTF-8" />
|
|
16
|
+
<meta name="viewport" content="width=device-width" />
|
|
17
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
18
|
+
<meta name="generator" content={Astro.generator} />
|
|
19
|
+
<title>EventCatalog chat?</title>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<VerticalSideBarLayout title="AI Chat">
|
|
23
|
+
<div class="min-h-[calc(100vh-60px)] bg-white">
|
|
24
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
25
|
+
{/* Hero Section */}
|
|
26
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
|
|
27
|
+
<div>
|
|
28
|
+
<div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
|
|
29
|
+
<BotMessageSquare className="w-4 h-4 mr-2" />
|
|
30
|
+
New: Ask your catalog anything
|
|
31
|
+
</div>
|
|
32
|
+
<h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Ask. Understand. Ship faster.</h1>
|
|
33
|
+
<p class="text-xl text-gray-600 mb-8">
|
|
34
|
+
Get answers about your events, services, and domains — instantly. Runs entirely in your browser — your data never
|
|
35
|
+
leaves your machine.
|
|
36
|
+
</p>
|
|
37
|
+
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
|
38
|
+
<a
|
|
39
|
+
href="https://demo.eventcatalog.dev/chat"
|
|
40
|
+
target="_blank"
|
|
41
|
+
class="inline-flex items-center juNot ready for AI chat? You castify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150"
|
|
42
|
+
>
|
|
43
|
+
Try the demo
|
|
44
|
+
<svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
|
|
45
|
+
<path
|
|
46
|
+
fill-rule="evenodd"
|
|
47
|
+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
48
|
+
clip-rule="evenodd"></path>
|
|
49
|
+
</svg>
|
|
50
|
+
</a>
|
|
51
|
+
<a
|
|
52
|
+
href="https://www.eventcatalog.cloud"
|
|
53
|
+
target="_blank"
|
|
54
|
+
class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
|
|
55
|
+
>
|
|
56
|
+
Try for free
|
|
57
|
+
</a>
|
|
58
|
+
</div>
|
|
59
|
+
<p class="text-sm text-gray-500">
|
|
60
|
+
Available with EventCatalog Starter or Scale plans
|
|
61
|
+
<a href="https://www.eventcatalog.dev/pricing" class="text-purple-600 font-medium block"
|
|
62
|
+
>Try free for 14 days, no credit card required</a
|
|
63
|
+
>
|
|
64
|
+
</p>
|
|
63
65
|
</div>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div class="w-3 h-3 bg-green-400 rounded-full"></div>
|
|
66
|
+
|
|
67
|
+
<div class="relative">
|
|
68
|
+
<div class="absolute -inset-4">
|
|
69
|
+
<div
|
|
70
|
+
class="w-full h-full max-w-full mx-auto opacity-30 blur-lg filter"
|
|
71
|
+
style="background: linear-gradient(90deg, #C084FC 0%, #818CF8 100%);"
|
|
72
|
+
>
|
|
72
73
|
</div>
|
|
73
74
|
</div>
|
|
74
|
-
<div class="
|
|
75
|
-
<div class="
|
|
76
|
-
<div class="bg-
|
|
77
|
-
|
|
75
|
+
<div class="relative">
|
|
76
|
+
<div class="bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
|
|
77
|
+
<div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
|
|
78
|
+
<div class="flex items-center space-x-2">
|
|
79
|
+
<div class="w-3 h-3 bg-red-400 rounded-full"></div>
|
|
80
|
+
<div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
|
|
81
|
+
<div class="w-3 h-3 bg-green-400 rounded-full"></div>
|
|
82
|
+
</div>
|
|
78
83
|
</div>
|
|
79
|
-
|
|
84
|
+
<div class="p-4 space-y-4">
|
|
85
|
+
<div class="flex justify-end">
|
|
86
|
+
<div class="bg-purple-600 text-white rounded-2xl rounded-tr-sm px-4 py-2 max-w-md text-sm">
|
|
87
|
+
What services publish order.created?
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
80
90
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
<div class="flex justify-start">
|
|
92
|
+
<div class="bg-gray-50 rounded-2xl rounded-tl-sm px-4 py-3 max-w-md shadow-sm">
|
|
93
|
+
<p class="text-gray-700 text-sm">
|
|
94
|
+
The <span class="font-semibold">Order Service</span> publishes the order.created event.
|
|
95
|
+
</p>
|
|
96
|
+
<p class="text-gray-700 text-sm mt-2 mb-1">This event is consumed by:</p>
|
|
97
|
+
<ul class="space-y-1 text-gray-600 text-sm">
|
|
98
|
+
<li>• Payment Service - Initiates payment processing</li>
|
|
99
|
+
<li>• Inventory Service - Updates stock levels</li>
|
|
100
|
+
<li>• Notification Service - Sends order confirmations</li>
|
|
101
|
+
</ul>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
92
104
|
</div>
|
|
93
105
|
</div>
|
|
94
106
|
</div>
|
|
95
107
|
</div>
|
|
96
108
|
</div>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
109
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
110
|
+
{/* Features Section */}
|
|
111
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
112
|
+
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
|
|
113
|
+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
114
|
+
<svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
|
|
115
|
+
<path
|
|
116
|
+
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
|
|
117
|
+
></path>
|
|
118
|
+
</svg>
|
|
119
|
+
</div>
|
|
120
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-2">Instant Search</h3>
|
|
121
|
+
<p class="text-gray-600">
|
|
122
|
+
Search and understand complex service relationships in seconds with natural language queries.
|
|
123
|
+
</p>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
|
|
127
|
+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
128
|
+
<svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
|
|
129
|
+
<path
|
|
130
|
+
d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"
|
|
131
|
+
></path>
|
|
132
|
+
</svg>
|
|
133
|
+
</div>
|
|
134
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Insights</h3>
|
|
135
|
+
<p class="text-gray-600">Get intelligent suggestions and insights about your architecture automatically.</p>
|
|
136
|
+
</div>
|
|
115
137
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
138
|
+
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
|
|
139
|
+
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
140
|
+
<svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
|
|
141
|
+
<path
|
|
142
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
|
|
143
|
+
></path>
|
|
144
|
+
</svg>
|
|
145
|
+
</div>
|
|
146
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
|
|
147
|
+
<p class="text-gray-600">All processing happens locally in your browser. Your data never leaves your machine.</p>
|
|
148
|
+
</div>
|
|
123
149
|
</div>
|
|
124
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Insights</h3>
|
|
125
|
-
<p class="text-gray-600">Get intelligent suggestions and insights about your architecture automatically.</p>
|
|
126
|
-
</div>
|
|
127
150
|
|
|
128
|
-
|
|
129
|
-
<div class="
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
151
|
+
{/* Bottom Link */}
|
|
152
|
+
<div class="mt-16 text-center">
|
|
153
|
+
<a
|
|
154
|
+
href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
|
|
155
|
+
target="_blank"
|
|
156
|
+
class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
|
|
157
|
+
>
|
|
158
|
+
Not ready for AI chat? You can hide this feature in settings
|
|
159
|
+
</a>
|
|
135
160
|
</div>
|
|
136
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
|
|
137
|
-
<p class="text-gray-600">All processing happens locally in your browser. Your data never leaves your machine.</p>
|
|
138
161
|
</div>
|
|
139
162
|
</div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<a
|
|
144
|
-
href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
|
|
145
|
-
target="_blank"
|
|
146
|
-
class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
|
|
147
|
-
>
|
|
148
|
-
Not ready for AI chat? You can hide this feature in settings
|
|
149
|
-
</a>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</VerticalSideBarLayout>
|
|
163
|
+
</VerticalSideBarLayout>
|
|
164
|
+
</body>
|
|
165
|
+
</html>
|
|
154
166
|
|
|
155
167
|
<style>
|
|
156
168
|
.scroll-smooth {
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"url": "https://github.com/event-catalog/eventcatalog.git"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
|
-
"version": "2.
|
|
9
|
+
"version": "2.54.1",
|
|
10
10
|
"publishConfig": {
|
|
11
11
|
"access": "public"
|
|
12
12
|
},
|
|
@@ -59,7 +59,6 @@
|
|
|
59
59
|
"astro": "^5.12.0",
|
|
60
60
|
"astro-compress": "^2.3.8",
|
|
61
61
|
"astro-expressive-code": "^0.40.1",
|
|
62
|
-
"astro-pagefind": "^1.6.0",
|
|
63
62
|
"astro-seo": "^0.8.4",
|
|
64
63
|
"auth-astro": "^4.2.0",
|
|
65
64
|
"axios": "^1.7.7",
|
|
@@ -85,6 +84,7 @@
|
|
|
85
84
|
"lucide-react": "^0.453.0",
|
|
86
85
|
"marked": "^15.0.6",
|
|
87
86
|
"mermaid": "^11.4.1",
|
|
87
|
+
"pagefind": "^1.3.0",
|
|
88
88
|
"pako": "^2.1.0",
|
|
89
89
|
"react": "^18.3.1",
|
|
90
90
|
"react-dom": "^18.3.1",
|
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
"preview": "astro preview",
|
|
143
143
|
"astro": "astro",
|
|
144
144
|
"start:catalog": "node scripts/start-catalog-locally.js",
|
|
145
|
+
"pagefind": "node scripts/pagefind.js",
|
|
145
146
|
"preview:catalog": "node scripts/preview-catalog-locally.js",
|
|
146
147
|
"generate:catalog": "node scripts/generate-catalog-locally.js",
|
|
147
148
|
"verify-build:catalog": "rimraf dist && pnpm run build:cd",
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
|
|
3
|
-
import PageFindSearch from 'astro-pagefind/components/Search';
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
<div>
|
|
7
|
-
<div class="relative flex items-center">
|
|
8
|
-
<input
|
|
9
|
-
id="search-dummy-input"
|
|
10
|
-
type="text"
|
|
11
|
-
name="search"
|
|
12
|
-
id="search"
|
|
13
|
-
placeholder="Search EventCatalog"
|
|
14
|
-
class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
|
|
15
|
-
/>
|
|
16
|
-
<MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
|
|
17
|
-
<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
|
|
18
|
-
<kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div id="search-dialog" class="hidden relative z-[100]" role="dialog" aria-modal="true">
|
|
24
|
-
<div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
|
|
25
|
-
<div id="search-background" class="fixed inset-0 z-40 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
|
|
26
|
-
<div
|
|
27
|
-
id="command-pal"
|
|
28
|
-
class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
|
|
29
|
-
>
|
|
30
|
-
<div class="relative">
|
|
31
|
-
<svg
|
|
32
|
-
class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400"
|
|
33
|
-
viewBox="0 0 20 20"
|
|
34
|
-
fill="currentColor"
|
|
35
|
-
aria-hidden="true"
|
|
36
|
-
>
|
|
37
|
-
<path
|
|
38
|
-
fill-rule="evenodd"
|
|
39
|
-
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
|
40
|
-
clip-rule="evenodd"></path>
|
|
41
|
-
</svg>
|
|
42
|
-
<PageFindSearch id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<script>
|
|
49
|
-
const dummyInput = document.getElementById('search-dummy-input');
|
|
50
|
-
const dialog = document.getElementById('search-dialog');
|
|
51
|
-
const header = document.getElementById('eventcatalog-header');
|
|
52
|
-
const verticalNav = document.getElementById('eventcatalog-vertical-nav');
|
|
53
|
-
|
|
54
|
-
// Listen for the short cut keys
|
|
55
|
-
window.addEventListener('keydown', (event) => {
|
|
56
|
-
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
dummyInput?.click();
|
|
59
|
-
}
|
|
60
|
-
if (event.key === 'Escape') {
|
|
61
|
-
if (dialog) {
|
|
62
|
-
dialog.style.display = 'none';
|
|
63
|
-
if (header) header.classList.add('backdrop-blur-sm');
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
// Fake input, to load the dialog
|
|
69
|
-
if (dummyInput) {
|
|
70
|
-
dummyInput.addEventListener('click', function (e) {
|
|
71
|
-
e.preventDefault();
|
|
72
|
-
this.blur();
|
|
73
|
-
const input = document.querySelector('.pagefind-ui__search-input');
|
|
74
|
-
setTimeout(() => {
|
|
75
|
-
// @ts-ignore
|
|
76
|
-
input && input.focus();
|
|
77
|
-
}, 10);
|
|
78
|
-
if (header) header.classList.remove('backdrop-blur-sm');
|
|
79
|
-
if (verticalNav) verticalNav.style.zIndex = '-100';
|
|
80
|
-
// @ts-ignore
|
|
81
|
-
dialog.style.display = 'block';
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// Close it
|
|
86
|
-
dialog?.addEventListener('click', function (e) {
|
|
87
|
-
// @ts-ignore
|
|
88
|
-
if (e.target.id === 'search-background') {
|
|
89
|
-
if (header) header.classList.add('backdrop-blur-sm');
|
|
90
|
-
if (verticalNav) verticalNav.style.zIndex = '10';
|
|
91
|
-
dialog.style.display = 'none';
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
// document.getElementById('search-dummy-input').addEventListener('click', function () {
|
|
96
|
-
// document.getElementById('search-dialog').style.display = 'block';
|
|
97
|
-
// });
|
|
98
|
-
</script>
|
|
99
|
-
|
|
100
|
-
<style is:global>
|
|
101
|
-
.pagefind-ui__search-input,
|
|
102
|
-
#search-dummy-input {
|
|
103
|
-
outline: none;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.pagefind-ui__drawer {
|
|
107
|
-
padding: 0 1em !important;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.pagefind-ui__result {
|
|
111
|
-
padding: 0.5em 0 !important;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.pagefind-ui__results-area {
|
|
115
|
-
margin: 0 !important;
|
|
116
|
-
}
|
|
117
|
-
</style>
|
|
118
|
-
|
|
119
|
-
<!--
|
|
120
|
-
Command palette, show/hide based on modal state.
|
|
121
|
-
|
|
122
|
-
Entering: "ease-out duration-300"
|
|
123
|
-
From: "opacity-0 scale-95"
|
|
124
|
-
To: "opacity-100 scale-100"
|
|
125
|
-
Leaving: "ease-in duration-200"
|
|
126
|
-
From: "opacity-100 scale-100"
|
|
127
|
-
To: "opacity-0 scale-95"
|
|
128
|
-
-->
|