132 lines
110 KiB
HTML
132 lines
110 KiB
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style id="nuxt-ui-colors">@layer theme {
|
||
:root, :host {
|
||
--ui-color-primary-50: var(--color-violet-50, oklch(96.9% 0.016 293.756));
|
||
--ui-color-primary-100: var(--color-violet-100, oklch(94.3% 0.029 294.588));
|
||
--ui-color-primary-200: var(--color-violet-200, oklch(89.4% 0.057 293.283));
|
||
--ui-color-primary-300: var(--color-violet-300, oklch(81.1% 0.111 293.571));
|
||
--ui-color-primary-400: var(--color-violet-400, oklch(70.2% 0.183 293.541));
|
||
--ui-color-primary-500: var(--color-violet-500, oklch(60.6% 0.25 292.717));
|
||
--ui-color-primary-600: var(--color-violet-600, oklch(54.1% 0.281 293.009));
|
||
--ui-color-primary-700: var(--color-violet-700, oklch(49.1% 0.27 292.581));
|
||
--ui-color-primary-800: var(--color-violet-800, oklch(43.2% 0.232 292.759));
|
||
--ui-color-primary-900: var(--color-violet-900, oklch(38% 0.189 293.745));
|
||
--ui-color-primary-950: var(--color-violet-950, oklch(28.3% 0.141 291.089));
|
||
--ui-color-secondary-50: var(--color-blue-50, oklch(97% 0.014 254.604));
|
||
--ui-color-secondary-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
|
||
--ui-color-secondary-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
|
||
--ui-color-secondary-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
|
||
--ui-color-secondary-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
|
||
--ui-color-secondary-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
|
||
--ui-color-secondary-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
|
||
--ui-color-secondary-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
|
||
--ui-color-secondary-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
|
||
--ui-color-secondary-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
|
||
--ui-color-secondary-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
|
||
--ui-color-success-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
|
||
--ui-color-success-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
|
||
--ui-color-success-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
|
||
--ui-color-success-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
|
||
--ui-color-success-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
|
||
--ui-color-success-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
|
||
--ui-color-success-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
|
||
--ui-color-success-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
|
||
--ui-color-success-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
|
||
--ui-color-success-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
|
||
--ui-color-success-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
|
||
--ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
|
||
--ui-color-info-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
|
||
--ui-color-info-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
|
||
--ui-color-info-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
|
||
--ui-color-info-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
|
||
--ui-color-info-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
|
||
--ui-color-info-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
|
||
--ui-color-info-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
|
||
--ui-color-info-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
|
||
--ui-color-info-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
|
||
--ui-color-info-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
|
||
--ui-color-warning-50: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
|
||
--ui-color-warning-100: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
|
||
--ui-color-warning-200: var(--color-yellow-200, oklch(94.5% 0.129 101.54));
|
||
--ui-color-warning-300: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
|
||
--ui-color-warning-400: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
|
||
--ui-color-warning-500: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
|
||
--ui-color-warning-600: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
|
||
--ui-color-warning-700: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
|
||
--ui-color-warning-800: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
|
||
--ui-color-warning-900: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
|
||
--ui-color-warning-950: var(--color-yellow-950, oklch(28.6% 0.066 53.813));
|
||
--ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
|
||
--ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
|
||
--ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
|
||
--ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
|
||
--ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
|
||
--ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
|
||
--ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
|
||
--ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
|
||
--ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
|
||
--ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
|
||
--ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
|
||
--ui-color-neutral-50: var(--color-zinc-50, oklch(98.5% 0 0));
|
||
--ui-color-neutral-100: var(--color-zinc-100, oklch(96.7% 0.001 286.375));
|
||
--ui-color-neutral-200: var(--color-zinc-200, oklch(92% 0.004 286.32));
|
||
--ui-color-neutral-300: var(--color-zinc-300, oklch(87.1% 0.006 286.286));
|
||
--ui-color-neutral-400: var(--color-zinc-400, oklch(70.5% 0.015 286.067));
|
||
--ui-color-neutral-500: var(--color-zinc-500, oklch(55.2% 0.016 285.938));
|
||
--ui-color-neutral-600: var(--color-zinc-600, oklch(44.2% 0.017 285.786));
|
||
--ui-color-neutral-700: var(--color-zinc-700, oklch(37% 0.013 285.805));
|
||
--ui-color-neutral-800: var(--color-zinc-800, oklch(27.4% 0.006 286.033));
|
||
--ui-color-neutral-900: var(--color-zinc-900, oklch(21% 0.006 285.885));
|
||
--ui-color-neutral-950: var(--color-zinc-950, oklch(14.1% 0.005 285.823));
|
||
}
|
||
:root, :host, .light {
|
||
--ui-primary: var(--ui-color-primary-500);
|
||
--ui-secondary: var(--ui-color-secondary-500);
|
||
--ui-success: var(--ui-color-success-500);
|
||
--ui-info: var(--ui-color-info-500);
|
||
--ui-warning: var(--ui-color-warning-500);
|
||
--ui-error: var(--ui-color-error-500);
|
||
}
|
||
.dark {
|
||
--ui-primary: var(--ui-color-primary-400);
|
||
--ui-secondary: var(--ui-color-secondary-400);
|
||
--ui-success: var(--ui-color-success-400);
|
||
--ui-info: var(--ui-color-info-400);
|
||
--ui-warning: var(--ui-color-warning-400);
|
||
--ui-error: var(--ui-color-error-400);
|
||
}
|
||
}</style><title>Installation - Comments</title><style>@media(min-width:1024px){.docus-sub-header{--ui-header-height:112px}}</style><link rel="stylesheet" href="/comments/assets/entry.DORe4TYg.css" crossorigin><style>@layer base {:where(.i-lucide\:alert-circle){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:arrow-up-circle){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 12l-4-4l-4 4m4 4V8'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:arrow-up-right){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E")}:where(.i-lucide\:at-sign){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:bell){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E")}:where(.i-lucide\:chevron-down){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E")}:where(.i-lucide\:copy){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:database){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:download){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10l5 5l5-5'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:hash){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3E%3C/svg%3E")}:where(.i-lucide\:heart-handshake){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676a.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052a2.12 2.12 0 0 0-.004-3a2.124 2.124 0 1 0 3-3a2.124 2.124 0 0 0 3.004 0a2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0a2 2 0 0 1 0-2.828l2.823-2.762'/%3E%3C/svg%3E")}:where(.i-lucide\:kanban){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 3v14m7-14v8m7-8v18'/%3E%3C/svg%3E")}:where(.i-lucide\:moon){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E")}:where(.i-lucide\:paperclip){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m16 6l-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/svg%3E")}:where(.i-lucide\:pen){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E")}:where(.i-lucide\:scale){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3v18m7-13l3 8a5 5 0 0 1-6 0zV7'/%3E%3Cpath d='M3 7h1a17 17 0 0 0 8-2a17 17 0 0 0 8 2h1M5 8l3 8a5 5 0 0 1-6 0zV7m2 14h10'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:search){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:settings){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:shield){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E")}:where(.i-lucide\:sliders){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 8h4m-2 13v-9m0-4V3m5 13h4m-2-4V3m0 18v-5M3 14h4m-2-4V3m0 18v-7'/%3E%3C/svg%3E")}:where(.i-lucide\:smile){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:sun){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:terminal){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19h8M4 17l6-6l-6-6'/%3E%3C/svg%3E")}:where(.i-simple-icons\:discord){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0a13 13 0 0 0-.617-1.25a.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.08.08 0 0 0 .084-.028a14 14 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13 13 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10 10 0 0 0 .372-.292a.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127a12.3 12.3 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028a19.8 19.8 0 0 0 6.002-3.03a.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418'/%3E%3C/svg%3E")}:where(.i-simple-icons\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}:where(.i-simple-icons\:laravel){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M23.642 5.43a.4.4 0 0 1 .014.1v5.149c0 .135-.073.26-.189.326l-4.323 2.49v4.934a.38.38 0 0 1-.188.326L9.93 23.949a.3.3 0 0 1-.066.027l-.024.01a.35.35 0 0 1-.192 0q-.016-.005-.03-.012q-.031-.01-.062-.025L.533 18.755a.38.38 0 0 1-.189-.326V2.974q0-.05.014-.098c.003-.012.01-.02.014-.032a.4.4 0 0 1 .023-.058c.004-.013.015-.022.023-.033l.033-.045l.037-.027q.02-.018.041-.034H.53L5.043.05a.38.38 0 0 1 .375 0L9.93 2.647h.002q.021.015.04.033l.038.027c.013.014.02.03.033.045c.008.011.02.021.025.033q.014.029.024.058c.003.011.01.021.013.032q.014.047.014.098v9.652l3.76-2.164V5.527q0-.05.013-.098q.007-.014.013-.032l.024-.059c.007-.012.018-.02.025-.033l.033-.043q.019-.017.037-.028q.02-.017.041-.032h.001l4.513-2.598a.38.38 0 0 1 .375 0l4.513 2.598c.016.01.027.021.042.031l.036.028l.034.044c.008.012.019.021.024.033a.3.3 0 0 1 .024.06q.01.015.015.032m-.74 5.032V6.179l-1.578.908l-2.182 1.256v4.283zm-4.51 7.75v-4.287l-2.147 1.225l-6.126 3.498v4.325zM1.093 3.624v14.588l8.273 4.761v-4.325l-4.322-2.445l-.002-.003H5.04L5 16.169l-.035-.027l-.001-.002q-.018-.018-.031-.04q-.016-.016-.028-.036h-.002l-.02-.047c-.006-.016-.014-.027-.018-.043l-.008-.057q-.005-.02-.006-.041V5.789l-2.18-1.257zM5.23.81L1.47 2.974l3.76 2.164l3.758-2.164zm1.956 13.505l2.182-1.256V3.624l-1.58.91l-2.182 1.255v9.435zm11.581-10.95l-3.76 2.163l3.76 2.163l3.759-2.164zm-.376 4.978L16.21 7.087l-1.58-.907v4.283l2.182 1.256l1.58.908zm-8.65 9.654l5.514-3.148l2.756-1.572l-3.757-2.163l-4.323 2.489l-3.941 2.27z'/%3E%3C/svg%3E")}:where(.i-vscode-icons\:file-type-css){display:inline-block;width:1em;height:1em;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='%23639' d='M1.995 1.994h23.52a4.48 4.48 0 0 1 4.48 4.48v19.04a4.48 4.48 0 0 1-4.48 4.48H6.475a4.48 4.48 0 0 1-4.48-4.48Z'/%3E%3Cpath fill='%23fff' d='M9.079 24.87v-4.704c0-1.876 1.204-2.884 3.024-2.884c1.792-.028 2.912 1.148 2.856 3.136h-2.072c.056-.756-.28-1.316-.84-1.288c-.7 0-.896.476-.896 1.372v4.088c0 .868.28 1.288.896 1.316c.644 0 .896-.644.84-1.372h2.072c.112 2.044-1.176 3.248-2.996 3.22c-1.764 0-2.884-.98-2.884-2.884m6.636-.336h1.932c.028.896.308 1.456.924 1.456s.84-.364.84-1.204c0-.7-.308-1.092-1.064-1.456l-.728-.336c-1.288-.616-1.82-1.372-1.82-2.884c0-1.68 1.064-2.856 2.8-2.856s2.66 1.204 2.688 3.164h-1.876c0-.812-.168-1.372-.784-1.372c-.56 0-.84.28-.84.98s.252.98.924 1.26l.672.308c1.428.672 2.044 1.54 2.044 3.164c0 1.932-1.092 2.996-2.884 2.996s-2.8-1.232-2.828-3.22m6.328 0h1.96c0 .896.308 1.456.896 1.456s.84-.364.84-1.204c0-.7-.28-1.092-1.064-1.456l-.728-.336c-1.288-.616-1.792-1.372-1.792-2.884c0-1.68 1.036-2.856 2.8-2.856s2.632 1.204 2.688 3.164h-1.876c-.028-.812-.196-1.372-.812-1.372c-.56 0-.812.28-.812.98s.224.98.896 1.26l.7.308c1.4.672 2.016 1.54 2.016 3.164c0 1.932-1.092 2.996-2.884 2.996s-2.8-1.232-2.828-3.22'/%3E%3C/svg%3E")}:where(.i-vscode-icons\:file-type-php){display:inline-block;width:1em;height:1em;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cdefs%3E%3CradialGradient id='SVGQRCVdbYF' cx='-16.114' cy='20.532' r='18.384' gradientTransform='translate(26.52 -9.307)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%234c6b96'/%3E%3Cstop offset='1' stop-color='%23231f20'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='16' cy='16' fill='url(%23SVGQRCVdbYF)' rx='14' ry='7.365'/%3E%3Cellipse cx='16' cy='16' fill='%236280b6' rx='13.453' ry='6.818'/%3E%3Cpath fill='%23fff' d='m18.725 18.2l.667-3.434a1.75 1.75 0 0 0-.372-1.719a2.93 2.93 0 0 0-2-.525h-1.153l.331-1.7a.22.22 0 0 0-.215-.26h-1.6a.22.22 0 0 0-.215.177l-.709 3.646a2.05 2.05 0 0 0-.477-1.054a2.78 2.78 0 0 0-2.2-.807H7.7a.22.22 0 0 0-.215.177l-1.434 7.38a.22.22 0 0 0 .215.26h1.603a.22.22 0 0 0 .215-.177l.347-1.785h1.2a5.2 5.2 0 0 0 1.568-.2a3.1 3.1 0 0 0 1.15-.689a3.5 3.5 0 0 0 .68-.844l-.287 1.475a.22.22 0 0 0 .215.26h1.6a.22.22 0 0 0 .215-.177l.787-4.051h1.094c.466 0 .6.093.64.133s.1.165.025.569l-.635 3.265a.22.22 0 0 0 .215.26h1.62a.22.22 0 0 0 .207-.18m-7.395-2.834a1.75 1.75 0 0 1-.561 1.092a2.17 2.17 0 0 1-1.315.321h-.712l.515-2.651h.921c.677 0 .949.145 1.059.266a1.18 1.18 0 0 1 .093.972m14.216-2.034a2.78 2.78 0 0 0-2.2-.807h-3.091a.22.22 0 0 0-.215.177l-1.434 7.38a.22.22 0 0 0 .215.26h1.608a.22.22 0 0 0 .215-.177l.347-1.785h1.2a5.2 5.2 0 0 0 1.568-.2a3.1 3.1 0 0 0 1.15-.689a3.43 3.43 0 0 0 1.076-1.927a2.51 2.51 0 0 0-.439-2.232m-1.667 2.034a1.75 1.75 0 0 1-.561 1.092a2.17 2.17 0 0 1-1.318.32h-.71l.515-2.651h.921c.677 0 .949.145 1.059.266a1.18 1.18 0 0 1 .094.973'/%3E%3Cpath fill='%23000004' d='M10.178 13.908a1.65 1.65 0 0 1 1.221.338a1.34 1.34 0 0 1 .145 1.161a1.95 1.95 0 0 1-.642 1.223a2.36 2.36 0 0 1-1.448.37h-.978l.6-3.089Zm-3.917 6.216h1.608l.381-1.962h1.377a5 5 0 0 0 1.5-.191a2.84 2.84 0 0 0 1.07-.642a3.2 3.2 0 0 0 1.01-1.808a2.3 2.3 0 0 0-.385-2.044a2.57 2.57 0 0 0-2.035-.732H7.7Zm8.126-9.342h1.6l-.387 1.962h1.421a2.77 2.77 0 0 1 1.85.468a1.55 1.55 0 0 1 .305 1.516l-.667 3.434H16.89l.635-3.265a.89.89 0 0 0-.08-.76a1.12 1.12 0 0 0-.8-.2H15.37l-.822 4.228h-1.6Zm8.34 3.126a1.65 1.65 0 0 1 1.221.338a1.34 1.34 0 0 1 .145 1.161a1.95 1.95 0 0 1-.642 1.223A2.36 2.36 0 0 1 22 17h-.978l.6-3.089Zm-3.917 6.216h1.608l.381-1.962h1.377a5 5 0 0 0 1.5-.191a2.84 2.84 0 0 0 1.07-.642a3.2 3.2 0 0 0 1.01-1.808a2.3 2.3 0 0 0-.385-2.044a2.57 2.57 0 0 0-2.035-.732h-3.092Z'/%3E%3C/svg%3E")}}</style><link rel="preload" as="fetch" crossorigin="anonymous" href="/comments/getting-started/installation/_payload.json?3bcd59e5-3446-4db1-b838-99b09adecd48"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/Sa-_S7_w.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/CZKfTBmy.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/PGrg6JrO.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/Dt_cdDua.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DgfQJ90r.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DXTdElLG.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/BuEXHZM4.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/BN_7HF1G.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DKqmGj5l.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/Bfu_U5-L.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DjjroVRY.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/CAvwm2Ra.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/B6ew2NSL.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DkGvnzxz.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/CxnGnurX.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/DBvuT6Rn.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/CEq-pUOP.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/Bg3yXSss.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/YPsXU7de.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/r1MYRSZy.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/BidMfeEk.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/By6s8kVp.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/D_5BbqUW.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/dDXv_e4b.js"><link rel="modulepreload" as="script" crossorigin href="/comments/assets/CgIOeGUO.js"><script type="module" src="/comments/assets/Sa-_S7_w.js" crossorigin></script><meta property="og:image" content="https://relaticle.github.io/comments/__og-image__/static/getting-started/installation/og.png"><meta property="og:image:type" content="image/png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://relaticle.github.io/comments/__og-image__/static/getting-started/installation/og.png"><meta name="twitter:image:src" content="https://relaticle.github.io/comments/__og-image__/static/getting-started/installation/og.png"><meta property="og:image:width" content="1200"><meta name="twitter:image:width" content="1200"><meta property="og:image:height" content="600"><meta name="twitter:image:height" content="600"><link rel="icon" type="image/x-icon" href="/comments/favicon.ico"><meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><link rel="icon" href="/favicon.ico"><meta name="description" content="Install Comments and add commenting to your Filament resources."><meta property="og:site_name" content="Comments"><meta property="og:title" content="Installation"><meta property="og:description" content="Install Comments and add commenting to your Filament resources."><meta property="og:type" content="article"><meta property="og:url" content="https://relaticle.github.io/getting-started/installation"><link rel="canonical" href="https://relaticle.github.io/getting-started/installation"><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"Installation","description":"Install Comments and add commenting to your Filament resources.","url":"https://relaticle.github.io/getting-started/installation","mainEntityOfPage":{"@type":"WebPage","@id":"https://relaticle.github.io/getting-started/installation"},"publisher":{"@type":"Organization","name":"Comments"}}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Getting Started","item":"https://relaticle.github.io/getting-started"},{"@type":"ListItem","position":2,"name":"Installation","item":"https://relaticle.github.io/getting-started/installation"}]}</script><script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script></head><body><div id="__nuxt" class="isolate"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="nuxt-loading-indicator" style="position:fixed;top:0;right:0;left:0;pointer-events:none;width:auto;height:3px;opacity:0;background:var(--ui-primary);background-size:0% auto;transform:scaleX(0%);transform-origin:left;transition:transform 0.1s, height 0.4s, opacity 0.4s;z-index:999999;"></div><div class="transition-[margin-right] duration-200 ease-linear will-change-[margin-right]" style="margin-right:0;"><div class="sticky top-0 z-50"><!----><!--[--><!----><!----><!----><header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50"><!--[--><!--]--><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container"><!--[--><div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><!----><!--[--><a href="/comments/" aria-label="Comments" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5"><!--[--><!--[--><!--[--><!--[--><img onerror="this.setAttribute('data-error', 1)" alt="Comments Logo" data-nuxt-img srcset="/comments/logo-light.svg 1x, /comments/logo-light.svg 2x" class="dark:hidden h-8 w-auto shrink-0 h-6 w-auto shrink-0" src="/comments/logo-light.svg"><img onerror="this.setAttribute('data-error', 1)" alt="Comments Logo" data-nuxt-img srcset="/comments/logo-dark.svg 1x, /comments/logo-dark.svg 2x" class="hidden dark:block h-8 w-auto shrink-0 h-6 w-auto shrink-0" src="/comments/logo-dark.svg"><!--]--><!--]--><!--]--><!--]--></a><!--]--></div><div data-slot="center" class="hidden lg:flex flex-1"><!--[--><!--[--><!----><!--[--><!--[--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated w-full"><!--[--><!--[--><span class="iconify i-lucide:search shrink-0 size-4 mr-1" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><span data-slot="label" class="truncate">Search…</span><!--]--><!--[--><div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><!--[--><!--[--><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated"><!--[--> <!--]--></kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated"><!--[-->k<!--]--></kbd><!--]--><!--]--></div><!--]--><!--]--></button><!--]--><!--]--><!--]--><!--]--></div><div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><!--[--><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--[--><!----><!--]--><!--[-->1.x<!--]--><!--[--><!----><!--]--></span><div></div><!----><!--[--><!----><!--[--><!--[--><button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><!--[--><!--[--><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><span data-slot="label" class="truncate hidden">Search…</span><!--]--><!--[--><div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><!--[--><!--[--><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated"><!--[--> <!--]--></kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated"><!--[-->k<!--]--></kbd><!--]--><!--]--></div><!--]--><!--]--></button><!--]--><!--]--><!--]--><!--[--><div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md"></div><!--]--><!--[--><!--[--><!--[--><a href="https://github.com/relaticle/comments" rel="noopener noreferrer" target="_blank" aria-label="GitHub" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!--]--><!--]--><!--[--><!--[--><!--[--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 -me-1.5 lg:hidden"><!--[--><!--[--><!----><!--]--><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6" class="outline-none"></line><line x1="4" y1="12" x2="20" y2="12" class="outline-none"></line><line x1="4" y1="18" x2="20" y2="18" class="outline-none"></line></svg><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><!--]--></div><!--]--></div><!--[--><!--]--></header><!--[--><!----><!----><!--v-if--><!--]--><!--]--></div><main class="min-h-[calc(100vh-var(--ui-header-height))]"><!--[--><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"><!--[--><div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10"><aside data-slot="left" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:col-span-2"><div data-slot="container" class="relative"><!----><!--[--><div></div><!--[--><!----><nav data-slot="root"><ul class="isolate -mx-2.5 -mt-1.5"><!--[--><!--[--><!--[--><li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><!--[--><!--[--><button type="button" aria-controls aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-3-0" data-reka-collection-item data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary"><!--[--><!--[--><!--[--><!--[--><!----><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Getting Started<!--]--><!----></span><span data-slot="linkTrailing" class="ms-auto gap-1.5 items-center hidden"><!--[--><!----><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" style="" data-slot="linkTrailingIcon"></span><!--]--></span><!--]--><!--]--><!--]--></button><div role="region" aria-labelledby="reka-accordion-trigger-v-0-3-0" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-3-1"><!--[--><!--[--><!--[--><!----><ul data-slot="root" class="ms-5 border-s border-default"><!--[--><!--[--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-primary after:bg-primary"><!--[--><!--[--><!--[--><span class="iconify i-lucide:download shrink-0 size-4 mr-1 text-primary group-data-[state=open]:text-primary" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Installation<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/getting-started/upgrading" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:arrow-up-circle shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Upgrading<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--]--><!--]--></ul><!--]--><!--]--><!--]--></div><!--]--><!--]--></li><!--]--><!--[--><li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><!--[--><!--[--><button type="button" aria-controls aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-3-2" data-reka-collection-item data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary"><!--[--><!--[--><!--[--><!--[--><!----><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Essentials<!--]--><!----></span><span data-slot="linkTrailing" class="ms-auto gap-1.5 items-center hidden"><!--[--><!----><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" style="" data-slot="linkTrailingIcon"></span><!--]--></span><!--]--><!--]--><!--]--></button><div role="region" aria-labelledby="reka-accordion-trigger-v-0-3-2" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-3-3"><!--[--><!--[--><!--[--><!----><ul data-slot="root" class="ms-5 border-s border-default"><!--[--><!--[--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/configuration" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:settings shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Configuration<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/authorization" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:shield shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Authorization<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/mentions" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:at-sign shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Mentions<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/reactions" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:smile shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Reactions<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/attachments" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:paperclip shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Attachments<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/notifications" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:bell shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Notifications<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/essentials/database-schema" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:database shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Database Schema<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--]--><!--]--></ul><!--]--><!--]--><!--]--></div><!--]--><!--]--></li><!--]--><!--[--><li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><!--[--><!--[--><button type="button" aria-controls aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-3-4" data-reka-collection-item data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary"><!--[--><!--[--><!--[--><!--[--><!----><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Community<!--]--><!----></span><span data-slot="linkTrailing" class="ms-auto gap-1.5 items-center hidden"><!--[--><!----><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" style="" data-slot="linkTrailingIcon"></span><!--]--></span><!--]--><!--]--><!--]--></button><div role="region" aria-labelledby="reka-accordion-trigger-v-0-3-4" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-3-5"><!--[--><!--[--><!--[--><!----><ul data-slot="root" class="ms-5 border-s border-default"><!--[--><!--[--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/community/contributing" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:heart-handshake shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->Contributing<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--[--><li data-slot="item" class="ps-1.5 -ms-px"><!--[--><a href="/comments/community/license" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:scale shrink-0 size-4 mr-1 text-dimmed group-hover:text-default group-data-[state=open]:text-default transition-colors" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkTitle" class="truncate"><!--[-->License<!--]--><!----></span><!----><!--]--><!--]--></a><!--]--></li><!--]--><!--]--><!--]--></ul><!--]--><!--]--><!--]--></div><!--]--><!--]--></li><!--]--><!--]--><!--]--></ul></nav><!--]--><!--]--><!--[--><!--]--></div></aside><div data-slot="center" class="lg:col-span-8"><!--[--><!--[--><div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10"><!----><div data-slot="center" class="lg:col-span-8"><!--[--><div data-slot="root" class="relative border-b border-default py-8"><div data-slot="headline" class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5"><!--[-->Getting Started<!--]--></div><div data-slot="container" class=""><div data-slot="wrapper" class="flex lg:flex-row lg:items-center lg:justify-between gap-4 flex-row items-center flex-wrap justify-between"><h1 data-slot="title" class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted"><!--[-->Installation<!--]--></h1><div data-slot="links" class="flex flex-wrap items-center gap-1.5"><!--[--><!--[--><!--]--><div data-orientation="horizontal" class="relative inline-flex -space-x-px"><!--[--><!--[--><!--[--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 text-neutral size-3.5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><span data-slot="label" class="truncate">Copy page</span><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><!--[--><!--[--><!--[--><!--[--><!--[--><button type="button" id="reka-dropdown-menu-trigger-v-0-3-14-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] text-xs gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5 border-l border-muted"><!--[--><!--[--><span class="iconify i-lucide:chevron-down shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><!--[--><!----><!--v-if--><!--]--><!--]--><!--]--><!--]--><!--]--></div><!--]--></div></div><div data-slot="description" class="text-lg text-pretty text-muted mt-4"><!--[-->Get started with Comments in minutes.<!--]--></div><!--[--><!--]--></div></div><div class="mt-8 pb-24 space-y-12"><!--[--><div><h2 id="requirements" class="relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#requirements" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Requirements<!--]--></a></h2><ul class="list-disc ps-6 my-5 marker:text-(--ui-border-accented)"><!--[--><li class="my-1.5 ps-1.5 leading-7 [&>ul]:my-0"><!--[--><strong><!--[-->PHP:<!--]--></strong> 8.2+<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&>ul]:my-0"><!--[--><strong><!--[-->Laravel:<!--]--></strong> 12+<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&>ul]:my-0"><!--[--><strong><!--[-->Filament:<!--]--></strong> 4.x / 5.x<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&>ul]:my-0"><!--[--><strong><!--[-->Livewire:<!--]--></strong> 3.5+ / 4.x<!--]--></li><!--]--></ul><h2 id="quick-setup" class="relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#quick-setup" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Quick Setup<!--]--></a></h2><div class="ms-4 border-s border-default ps-8 [counter-reset:step] [&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-7 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-elevated [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-sm [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-bg [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden"><!--[--><h3 id="install-package" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#install-package" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Install Package<!--]--></a></h3><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-lucide:terminal size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">Terminal</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sBMFI">composer</span><span class="sfazB"> require</span><span class="sfazB"> relaticle/comments
|
||
</span></span></code><!--]--></pre></div><h3 id="publish-and-run-migrations" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#publish-and-run-migrations" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Publish and Run Migrations<!--]--></a></h3><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-lucide:terminal size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">Terminal</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sBMFI">php</span><span class="sfazB"> artisan</span><span class="sfazB"> vendor:publish</span><span class="sfazB"> --tag=comments-migrations
|
||
</span></span><span class="line" line="2"><span class="sBMFI">php</span><span class="sfazB"> artisan</span><span class="sfazB"> migrate
|
||
</span></span></code><!--]--></pre></div><h3 id="include-css-assets" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#include-css-assets" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Include CSS Assets<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->Prerequisite: You need a custom Filament theme to include the Comments styles.<!--]--></p><Alert type="warning">If you haven't set up a custom theme for Filament, follow the <!--[--><a href="https://filamentphp.com/docs/5.x/styling/overview#creating-a-custom-theme" rel="nofollow" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary focus-visible:has-[>code]:outline-0 [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary transition-colors [&>code]:transition-colors"><!--[--><!--[--><!--[-->Filament Docs<!--]--><!--]--><!--]--></a><!--]--> first.</Alert><p class="my-5 leading-7 text-pretty"><!--[-->Add the plugin's views to your theme CSS file:<!--]--></p><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-vscode-icons:file-type-css size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">resources/css/filament/admin/theme.css</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="s7zQu">@source</span><span class="sTEyZ"> "../../../../vendor/relaticle/comments/resources/views/**/*.blade.php"</span><span class="sMK4o">;
|
||
</span></span></code><!--]--></pre></div><h3 id="register-the-plugin" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#register-the-plugin" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Register the Plugin<!--]--></a></h3><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-vscode-icons:file-type-php size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">AdminPanelProvider.php</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">CommentsPlugin</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="2"><span emptylineplaceholder="true">
|
||
</span></span><span class="line" line="3"><span class="spNyl">public</span><span class="spNyl"> function</span><span class="s2Zo4"> panel</span><span class="sMK4o">(</span><span class="sBMFI">Panel</span><span class="sMK4o"> $</span><span class="sTEyZ">panel</span><span class="sMK4o">):</span><span class="sBMFI"> Panel
|
||
</span></span><span class="line" line="4"><span class="sMK4o">{
|
||
</span></span><span class="line" line="5"><span class="s7zQu"> return</span><span class="sMK4o"> $</span><span class="sTEyZ">panel
|
||
</span></span><span class="line" line="6"><span class="sMK4o"> -></span><span class="s2Zo4">plugins</span><span class="sMK4o">([
|
||
</span></span><span class="line" line="7"><span class="sBMFI"> CommentsPlugin</span><span class="sMK4o">::</span><span class="s2Zo4">make</span><span class="sMK4o">(),
|
||
</span></span><span class="line" line="8"><span class="sMK4o"> ]);
|
||
</span></span><span class="line" line="9"><span class="sMK4o">}
|
||
</span></span></code><!--]--></pre></div><h3 id="set-up-your-models" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#set-up-your-models" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Set Up Your Models<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->Add the <code class="px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block border border-muted text-highlighted bg-muted"><!--[-->HasComments<!--]--></code> trait to any model you want to comment on:<!--]--></p><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-vscode-icons:file-type-php size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">app/Models/Project.php</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">Concerns</span><span class="sMK4o">\</span><span class="sTEyZ">HasComments</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="2"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">Contracts</span><span class="sMK4o">\</span><span class="sTEyZ">Commentable</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="3"><span emptylineplaceholder="true">
|
||
</span></span><span class="line" line="4"><span class="spNyl">class</span><span class="sBMFI"> Project</span><span class="spNyl"> extends</span><span class="sBMFI"> Model</span><span class="spNyl"> implements</span><span class="sBMFI"> Commentable
|
||
</span></span><span class="line" line="5"><span class="sMK4o">{
|
||
</span></span><span class="line" line="6"><span class="sbssI"> use</span><span class="sTEyZ"> HasComments</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="7"><span class="sMK4o">}
|
||
</span></span></code><!--]--></pre></div><p class="my-5 leading-7 text-pretty"><!--[-->Add the <code class="px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block border border-muted text-highlighted bg-muted"><!--[-->CanComment<!--]--></code> trait to your User model:<!--]--></p><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-vscode-icons:file-type-php size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">app/Models/User.php</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">Concerns</span><span class="sMK4o">\</span><span class="sTEyZ">CanComment</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="2"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">Contracts</span><span class="sMK4o">\</span><span class="sTEyZ">Commentator</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="3"><span emptylineplaceholder="true">
|
||
</span></span><span class="line" line="4"><span class="spNyl">class</span><span class="sBMFI"> User</span><span class="spNyl"> extends</span><span class="sBMFI"> Authenticatable</span><span class="spNyl"> implements</span><span class="sBMFI"> Commentator
|
||
</span></span><span class="line" line="5"><span class="sMK4o">{
|
||
</span></span><span class="line" line="6"><span class="sbssI"> use</span><span class="sTEyZ"> CanComment</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="7"><span class="sMK4o">}
|
||
</span></span></code><!--]--></pre></div><h3 id="add-to-your-resources" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#add-to-your-resources" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Add to Your Resources<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->Use the slide-over action on view or edit pages:<!--]--></p><div class="relative group [&>pre]:rounded-t-none [&>pre]:my-0 my-5" style=""><div class="flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3"><span class="iconify i-vscode-icons:file-type-php size-4 shrink-0" aria-hidden="true" style=""></span><span class="text-default text-sm/6">app/Filament/Resources/ProjectResource/Pages/ViewProject.php</span></div><!--[--><!--[--><button type="button" aria-label="Copy code to clipboard" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition"><!--[--><!--[--><span class="iconify i-lucide:copy shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><pre class="group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50! language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" style=""><!--[--><code><span class="line" line="1"><span class="sbssI">use</span><span class="sTEyZ"> Relaticle</span><span class="sMK4o">\</span><span class="sTEyZ">Comments</span><span class="sMK4o">\</span><span class="sTEyZ">Filament</span><span class="sMK4o">\</span><span class="sTEyZ">Actions</span><span class="sMK4o">\</span><span class="sTEyZ">CommentsAction</span><span class="sMK4o">;
|
||
</span></span><span class="line" line="2"><span emptylineplaceholder="true">
|
||
</span></span><span class="line" line="3"><span class="spNyl">protected</span><span class="spNyl"> function</span><span class="s2Zo4"> getHeaderActions</span><span class="sMK4o">():</span><span class="sbssI"> array
|
||
</span></span><span class="line" line="4"><span class="sMK4o">{
|
||
</span></span><span class="line" line="5"><span class="s7zQu"> return</span><span class="sMK4o"> [
|
||
</span></span><span class="line" line="6"><span class="sBMFI"> CommentsAction</span><span class="sMK4o">::</span><span class="s2Zo4">make</span><span class="sMK4o">(),
|
||
</span></span><span class="line" line="7"><span class="sMK4o"> ];
|
||
</span></span><span class="line" line="8"><span class="sMK4o">}
|
||
</span></span></code><!--]--></pre></div><!--]--></div><p class="my-5 leading-7 text-pretty"><!--[--><strong><!--[-->Done!<!--]--></strong> Visit your Filament panel to see comments in action.<!--]--></p><h2 id="optional-configuration" class="relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:transition-colors"><a href="#optional-configuration" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Optional Configuration<!--]--></a></h2><div class="relative my-5 overflow-x-auto"><table class="w-full border-separate border-spacing-0 rounded-md"><!--[--><thead class="bg-muted"><!--[--><tr class="[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md"><!--[--><th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left"><!--[-->Command<!--]--></th><th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left"><!--[-->Action<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr class="[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md"><!--[--><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[--><code class="px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block border border-muted text-highlighted bg-muted"><!--[-->php artisan vendor:publish --tag=comments-config<!--]--></code><!--]--></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[-->Publish the configuration file<!--]--></td><!--]--></tr><tr class="[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md"><!--[--><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[--><code class="px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block border border-muted text-highlighted bg-muted"><!--[-->php artisan vendor:publish --tag=comments-views<!--]--></code><!--]--></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[-->Publish the Blade views for customization<!--]--></td><!--]--></tr><tr class="[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md"><!--[--><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[--><code class="px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block border border-muted text-highlighted bg-muted"><!--[-->php artisan vendor:publish --tag=comments-translations<!--]--></code><!--]--></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5 text-left"><!--[-->Publish the translation files<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div><style>html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}</style></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!--[--><div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><!--[--><div class="flex items-center gap-2 text-sm text-muted"><!--[--><!--[--><a href="https://github.com/relaticle/comments/edit/1.x/docs/content/1.getting-started/1.installation.md" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"><!--[--><!--[--><span class="iconify i-lucide:pen shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[-->Edit this page<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><span>or</span><!--[--><!--[--><a href="https://github.com/relaticle/comments/issues/new/choose" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"><!--[--><!--[--><span class="iconify i-lucide:alert-circle shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[-->Report an issue<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--></div><!--]--></div><div data-slot="border" class="border-default w-full border-solid border-t"></div><!--]--><!--]--><!--]--></div><!--[--><!----><div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><span class="hidden sm:block"> </span><a href="/comments/getting-started/upgrading" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-end"><!--[--><!--[--><!--[--><div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><!--[--><span class="iconify i-lucide:arrow-up-circle size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--></div><p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate"><!--[-->Upgrading<!--]--></p><p data-slot="linkDescription" class="text-sm text-muted line-clamp-2"><!--[-->Upgrade guide for Comments.<!--]--></p><!--]--><!--]--><!--]--></a></div><!--]--><!--]--></div><!--]--></div><div data-slot="right" class="lg:col-span-2 order-first lg:order-last"><!--[--><!----><!----><!----><nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]"><!--[--><div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col"><!----><!--[--><button type="button" aria-controls aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><!--[--><!--[--><!--[--><!--]--><span data-slot="title" class="truncate"><!--[-->On this page<!--]--></span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><!--[--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" style="" data-slot="trailingIcon"></span><!--]--></span><!--]--><!--]--></button><div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-3-14-1" hidden data-state="closed" style="--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;"><!--v-if--></div><p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><!--[--><!--[--><!--]--><span data-slot="title" class="truncate"><!--[-->On this page<!--]--></span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><!--[--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" style="" data-slot="trailingIcon"></span><!--]--></span><!--]--></p><div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex"><!--[--><div data-slot="indicator" class="absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full" style=""><div data-slot="indicatorLine" class="hidden"></div><!----></div><!--[--><ul class="min-w-0 ms-2.5 ps-4 border-s border-default"><!--[--><li class="min-w-0 -ms-px"><a href="#requirements" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Requirements</span><!--]--></a><!----></li><li class=""><a href="#quick-setup" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Quick Setup</span><!--]--></a><ul class="ms-3"><!--[--><li class="min-w-0 -ms-px"><a href="#install-package" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Install Package</span><!--]--></a><!----></li><li class="min-w-0 -ms-px"><a href="#publish-and-run-migrations" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Publish and Run Migrations</span><!--]--></a><!----></li><li class="min-w-0 -ms-px"><a href="#include-css-assets" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Include CSS Assets</span><!--]--></a><!----></li><li class="min-w-0 -ms-px"><a href="#register-the-plugin" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Register the Plugin</span><!--]--></a><!----></li><li class="min-w-0 -ms-px"><a href="#set-up-your-models" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Set Up Your Models</span><!--]--></a><!----></li><li class="min-w-0 -ms-px"><a href="#add-to-your-resources" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Add to Your Resources</span><!--]--></a><!----></li><!--]--></ul></li><li class="min-w-0 -ms-px"><a href="#optional-configuration" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><!--[--><span data-slot="linkText" class="truncate">Optional Configuration</span><!--]--></a><!----></li><!--]--></ul><!--]--><!--]--></div><!--]--><div data-slot="bottom" class="hidden lg:flex lg:flex-col gap-6 mt-6"><!--[--><div class="space-y-6"><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-dashed border-t"></div><!----><!--]--><!--]--></div><nav data-slot="root" class="flex flex-col gap-3"><p data-slot="title" class="text-sm font-semibold flex items-center gap-1.5"><!--[-->Ecosystem<!--]--></p><ul data-slot="list" class="flex flex-col gap-2"><!--[--><li data-slot="item" class="relative"><!--[--><!--[--><a href="https://filaforms.app" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-simple-icons:laravel shrink-0 size-4" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkLabel" class="truncate"><!--[-->FilaForms<!--]--><span class="iconify i-lucide:arrow-up-right absolute top-0 text-dimmed size-2.5" aria-hidden="true" style="" data-slot="linkLabelExternalIcon"></span></span><!--[--><!--]--><!--]--><!--]--></a><!--]--><!--]--></li><li data-slot="item" class="relative"><!--[--><!--[--><a href="https://relaticle.github.io/custom-fields" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:sliders shrink-0 size-4" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkLabel" class="truncate"><!--[-->Custom Fields<!--]--><span class="iconify i-lucide:arrow-up-right absolute top-0 text-dimmed size-2.5" aria-hidden="true" style="" data-slot="linkLabelExternalIcon"></span></span><!--[--><!--]--><!--]--><!--]--></a><!--]--><!--]--></li><li data-slot="item" class="relative"><!--[--><!--[--><a href="https://relaticle.github.io/flowforge" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><!--[--><!--[--><!--[--><span class="iconify i-lucide:kanban shrink-0 size-4" aria-hidden="true" style="" data-slot="linkLeadingIcon"></span><!--]--><span data-slot="linkLabel" class="truncate"><!--[-->Flowforge<!--]--><span class="iconify i-lucide:arrow-up-right absolute top-0 text-dimmed size-2.5" aria-hidden="true" style="" data-slot="linkLabelExternalIcon"></span></span><!--[--><!--]--><!--]--><!--]--></a><!--]--><!--]--></li><!--]--></ul></nav><!----><!----></div><!--]--></div></div><!--]--></nav><!--]--><!----></div></div><!--]--><!--]--></div><!----></div><!--]--></div><!--]--></main><footer data-slot="root"><!----><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container"><!--[--><div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"><!--[--><!--[--><!--[--><!--[--><!--[--><a href="https://discord.gg/b9WxzUce4Q" rel="noopener noreferrer" target="_blank" aria-label="discord social link" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-simple-icons:discord shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!--[--><!--[--><a href="https://github.com/relaticle/comments" rel="noopener noreferrer" target="_blank" aria-label="GitHub repository" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-simple-icons:github shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!--]--><!--[--><!--[--><button type="button" aria-label="Switch to dark mode" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-lucide:moon shrink-0 size-5 hidden dark:inline-block" aria-hidden="true" style=""></span><span class="iconify i-lucide:sun shrink-0 size-5 dark:hidden" aria-hidden="true" style=""></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><!--]--><!--]--></div><div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"><!--[--><!--]--></div><div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"><!--[--><div class="text-sm text-muted"> Copyright © 2026</div><!--]--></div><!--]--></div><!----></footer></div><span></span><!--]--><!--]--><!--[--><!--]--><!--v-if--><!--]--><!--[--><!--]--><!--]--><!--]--></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{docsVersion:"1.x",assistant:{enabled:false,apiPath:"/__docus__/assistant"},"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"}},fathom:{siteId:"",config:{manual:false}},mdc:{components:{prose:true,map:{accordion:"ProseAccordion","accordion-item":"ProseAccordionItem",badge:"ProseBadge",callout:"ProseCallout",card:"ProseCard","card-group":"ProseCardGroup",caution:"ProseCaution","code-collapse":"ProseCodeCollapse","code-group":"ProseCodeGroup","code-icon":"ProseCodeIcon","code-preview":"ProseCodePreview","code-tree":"ProseCodeTree",collapsible:"ProseCollapsible",field:"ProseField","field-group":"ProseFieldGroup",icon:"ProseIcon",kbd:"ProseKbd",note:"ProseNote",steps:"ProseSteps",tabs:"ProseTabs","tabs-item":"ProseTabsItem",tip:"ProseTip",warning:"ProseWarning"},customElements:[]},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}},highlight:{noApiRoute:true,theme:{light:"material-theme-lighter",default:"material-theme",dark:"material-theme-palenight"},shikiEngine:"javascript",langs:["bash","diff","json","js","ts","html","css","vue","shell","mdc","md","yaml","php","blade","bash","json"],highlighter:"shiki"}},content:{wsUrl:""},"nuxt-robots":{version:"5.7.1",isNuxtContentV2:false,debug:false,credits:true,groups:[{userAgent:["*"],allow:["/"],disallow:[],contentUsage:[],contentSignal:[],_indexable:true,_rules:[{pattern:"/",allow:true}],_normalized:true}],sitemap:["/sitemap.xml"],header:true,robotsEnabledValue:"index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",robotsDisabledValue:"noindex, nofollow",cacheControl:"max-age=14400, must-revalidate",botDetection:true,pageMetaRobots:{}}},app:{baseURL:"/comments/",buildId:"3bcd59e5-3446-4db1-b838-99b09adecd48",buildAssetsDir:"assets",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__" data-src="/comments/getting-started/installation/_payload.json?3bcd59e5-3446-4db1-b838-99b09adecd48">[{"state":1,"once":17,"_errors":18,"serverRendered":5,"path":20,"prerenderedAt":21},["Reactive",2],{"$scolor-mode":3,"$sassistant-open":6,"$sassistant-expanded":6,"$sassistant-messages":7,"$sassistant-pending":-1,"$stoasts":8,"$ssite-config":9},{"preference":4,"value":4,"unknown":5,"forced":6},"system",true,false,[],[],{"_priority":10,"env":14,"name":15,"url":16},{"name":11,"env":12,"url":13},-3,-15,0,"production","Comments","https:\u002F\u002Frelaticle.github.io",["Set"],["ShallowReactive",19],{"navigation_docs":-1,"search_docs":-1,"-getting-started-installation":-1,"-getting-started-installation-surround":-1},"\u002Fgetting-started\u002Finstallation",1774613361120]</script></body></html> |