Adding latest updates

thedevdojo · May 29, 2024 · 4af9f58 · 4af9f58
1 parent 69d2859
commit 4af9f58
Show file tree

Hide file tree

Showing 28 changed files with 200 additions and 56 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -33,4 +33,49 @@ h2 a, h3 a, h4 a {
     margin-left: -5px;
     margin-right: 10px;
     color: #b4fd4f !important;
+}
+
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes slide-from-right {
+  from { 
+    transform: translateY(15px);
+    opacity:0; 
+  }
+}
+
+@keyframes slide-to-left {
+  to { transform: translateY(-0px);
+    filter: blur(0px);
+    opaity:1; }
+}
+
+/* define animations for the old and new content */
+::view-transition-old(slide-it) {
+  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+  400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+::view-transition-new(slide-it) {
+  animation: 300ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+  400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+/* tie the view transition to a given CSS class */
+/* #site-content {
+    view-transition-name: slide-it;
+} */
+
+#docs-content {
+  view-transition-name: slide-it;
+}
+
+#hero-bg{
+  view-transition-name: none;
 }
diff --git a/assets/images/auth-screens/digital-ocean.jpg b/assets/images/auth-screens/digital-ocean.jpg
diff --git a/assets/images/auth-screens/openai.jpg b/assets/images/auth-screens/openai.jpg
diff --git a/assets/images/auth-screens/openai2.jpg b/assets/images/auth-screens/openai2.jpg
diff --git a/assets/images/auth-screens/starbucks.jpg b/assets/images/auth-screens/starbucks.jpg
diff --git a/assets/images/auth-screens/starbucks2.jpg b/assets/images/auth-screens/starbucks2.jpg
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -18,14 +18,23 @@ Alpine.start()
 domReadyLoop();
 
 document.addEventListener("DOMContentLoaded", function() {
+
+    document.getElementById('hero-bg').classList.remove('opacity-0');
+
     loadGsapAnimations();
     createRadialBackgrounds();
     updateTOC();
     addHeadingsToTOC();
     renderSmoothAnchorLinks();
     window.dispatchEvent(new CustomEvent('set-route', { detail: { route: window.location.pathname } }));
+    document.startViewTransition(() => updateTheDOMSomehow(data));
+
 });
 
+window.onbeforeunload = function(){
+    console.log('go');
+  };
+
 function loadGsapAnimations(){
 
     if(document.getElementById('hero')){

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
@@ -18,7 +18,7 @@ After [installation](/docs/install), visit **/auth/setup** to customize and modi
 
 <img src="{ url('/assets/images/setup-screen-bg.jpg') }" class="w-full h-auto rounded-md" />
 
-After DevDojo Auth is installed you'll be able to visit these [Authentication Pages](/docs/authentication-pages) in your application.
+After DevDojo Auth is installed you'll be able to visit these <a href="{ url('/docs/authentication-pages') }">Authentication Pages</a>.
 
 ## Why use it?
 

diff --git a/includes/button.html b/includes/button.html
@@ -1 +1 @@
-<button hx-get="{ url('/docs/getting-started') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="window.dispatchEvent(new CustomEvent('set-page-full-width', {})); window.dispatchEvent(new CustomEvent('set-page-active', { detail: { active: 'docs' }})); scrollTop(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-docs class="inline-block rounded-full bg-white hover:bg-[#a9fd02] px-8 py-4 text-center font-bold text-black transition  hover:border-black">{title}</button>
+<button hx-get="{ url('/docs/getting-started') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="outerHTML transition:true" hx-push-url="true" @click="window.dispatchEvent(new CustomEvent('set-page-full-width', {})); window.dispatchEvent(new CustomEvent('set-page-active', { detail: { active: 'docs' }})); scrollTop(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-docs class="inline-block rounded-lg bg-white hover:bg-[#a9fd02] px-8 py-4 text-center sm:w-auto w-full font-bold text-black transition  hover:border-black">{title}</button>
diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
diff --git a/includes/docs/install/back-btn.html b/includes/docs/install/back-btn.html
@@ -1,4 +1,4 @@
-<button hx-get="{ url('/docs/install') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" 
+<button hx-get="{ url('/docs/install') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" 
     class="flex relative items-center pr-3 pl-5 py-2 scale-100 hover:scale-[1.01] mb-5 space-x-3 text-xs font-medium text-white rounded-md group border-zinc-700/70 hover:border-zinc-700/80 border bg-zinc-950 hover:bg-zinc-900">
     <span class="overflow-hidden absolute left-0 w-3 h-3 transition duration-150 ease-out transform translate-x-3.5 group-hover:translate-x-3">
         <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>

diff --git a/includes/docs/install/breeze.html b/includes/docs/install/breeze.html
@@ -1,4 +1,4 @@
-<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/breeze') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
+<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/breeze') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
     <span class="flex relative items-center p-5 mx-auto space-x-5 w-full h-full font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out pointer-events-none border-zinc-700 radial-background group from-neutral-900">
         <svg class="flex-shrink-0 mt-1 w-auto h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 50" height="50" fill="none"><path fill="#fff" d="M25.03 50c13.807 0 25-11.193 25-25s-11.193-25-25-25-25 11.193-25 25 11.193 25 25 25Z"/><path fill="#FCBF24" d="M25.03 48.824c13.158 0 23.824-10.667 23.824-23.824 0-13.157-10.666-23.824-23.824-23.824C11.873 1.176 1.207 11.843 1.207 25c0 13.157 10.666 23.824 23.823 23.824Z"/><path fill="#D97707" d="M13.119 25 25.03 13.088 37.016 25 25.03 36.985 13.12 25Z"/><path fill="#FEF3C7" d="M41.942 8.162 25.03 25V13.162l4.927-4.927h11.985v-.073ZM25.03 25l16.912 16.912V30l-5-5H25.03Zm-4.926 16.912 4.926-4.927V25L8.192 41.912h11.912ZM8.192 20.074 13.12 25H25.03L8.192 8.162v11.911Z"/></svg>
         <span class="block relative tracking-tight">

diff --git a/includes/docs/install/filament.html b/includes/docs/install/filament.html
@@ -1,4 +1,4 @@
-<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/filament') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
+<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/filament') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
     <span class="flex relative items-center p-5 mx-auto space-x-5 w-full h-full font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out pointer-events-none border-zinc-700 radial-background group from-neutral-900">
         <svg class="flex-shrink-0 -mt-1 w-auto h-11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 51" fill="none"><g clip-path="url(#a)"><path fill="#F3CE49" d="M17.978 30.28c6.76 0 12.241-5.481 12.241-12.242 0-6.76-5.48-12.241-12.241-12.241-6.76 0-12.241 5.48-12.241 12.241 0 6.76 5.48 12.241 12.24 12.241Z"/><path fill="#fff" d="m18.252 18.183-.335 1.208 2.263 1.275c.122.068.198.21.196.362l-.003.046-.077.665c-.019.168-.131.299-.277.323l-1.854.312 1.707.954c.122.068.198.21.196.362l-.003.045-.077.666c-.02.167-.131.298-.277.323l-1.854.312 1.707.953c.122.068.198.21.196.362l-.003.046-.077.665c-.02.168-.132.299-.277.323l-1.854.313 1.707.953c.122.068.198.21.196.362l-.003.045-.077.666c-.02.167-.132.298-.277.323l-1.854.312 1.707.953c.122.068.198.211.196.362l-.003.046-.077.665c-.02.168-.132.299-.277.323l-2.595.493-.186 1.43-2.09.208.39-2.63c.019-.168.131-.299.277-.324l1.854-.312-1.708-.953a.408.408 0 0 1-.195-.362l.002-.046.078-.665c.019-.168.131-.299.277-.323l1.854-.313-1.708-.952a.409.409 0 0 1-.195-.363l.003-.045.077-.666c.019-.167.131-.298.277-.323l1.854-.312-1.707-.953a.409.409 0 0 1-.196-.362l.003-.046.077-.665c.02-.168.132-.299.277-.323l1.854-.313-1.707-.953a.409.409 0 0 1-.196-.362l.003-.045.077-.666c.02-.167.132-.298.277-.323l1.854-.312-1.707-.953a.408.408 0 0 1-.196-.362l.003-.046.187-1.063 2.296-.32Zm.829-7.951c.857-.086 1.52.143 1.992.685.471.542.665 1.228.581 2.059-.092.95-.414 1.617-.965 2.002-.55.385-1.26.621-2.127.708-.847.085-1.51-.106-1.989-.572-.48-.466-.673-1.179-.581-2.14.09-.874.412-1.528.969-1.962.556-.434 1.263-.694 2.12-.78Z"/><path fill="#fff" d="M11.814 50.172a.953.953 0 0 1-.945-.81.965.965 0 0 1 .646-1.064l11.281-3.723a1.024 1.024 0 0 0 .142-1.877 1.011 1.011 0 0 0-.774-.057L14.7 45.102a2.914 2.914 0 0 1-2.211-.192 2.937 2.937 0 0 1-1.44-1.699 2.954 2.954 0 0 1 .16-2.225 2.925 2.925 0 0 1 1.669-1.471l10.976-3.62c1.023-1.468 2.205-2.888 3.35-4.265 3.324-3.994 6.466-7.766 6.466-12.93 0-8.799-7.122-15.955-15.876-15.955S1.911 9.903 1.911 18.7c0 5.164 3.14 8.937 6.466 12.931 1.215 1.46 2.472 2.971 3.537 4.534a.964.964 0 0 1-.589 1.491.953.953 0 0 1-.99-.406c-1.012-1.486-2.184-2.894-3.425-4.386C3.513 28.783 0 24.564 0 18.7 0 8.843 7.98.824 17.788.824c9.81 0 17.789 8.019 17.789 17.877 0 5.863-3.513 10.082-6.91 14.164-1.24 1.491-2.413 2.9-3.426 4.386a.956.956 0 0 1-.491.37l-11.28 3.723a1.01 1.01 0 0 0-.577.51 1.024 1.024 0 0 0 .443 1.357c.236.123.511.147.765.067l7.47-2.461a2.912 2.912 0 0 1 2.21.192 2.936 2.936 0 0 1 1.441 1.7c.24.733.181 1.532-.161 2.224a2.923 2.923 0 0 1-1.669 1.471l-11.28 3.722a.93.93 0 0 1-.298.046Z"/><path fill="#fff" d="M11.123 37.67a.953.953 0 0 1-.943-.81.966.966 0 0 1 .644-1.064l4.073-1.344a.953.953 0 0 1 1.207.615.966.966 0 0 1-.61 1.212l-4.073 1.343a.961.961 0 0 1-.298.048Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .824h35.577v50H0z"/></clipPath></defs></svg>
         <span class="block relative tracking-tight">

diff --git a/includes/docs/install/genesis.html b/includes/docs/install/genesis.html
@@ -1,4 +1,4 @@
-<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/genesis') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
+<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/genesis') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border w-full">
     <span class="flex relative items-center p-5 mx-auto space-x-5 w-full h-full font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out pointer-events-none border-zinc-700 radial-background group from-neutral-900">
         <svg class="flex-shrink-0 mt-1 -ml-1 w-auto h-11 text-white"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="#3D3D3D" rx="25"/><mask id="a" width="48" height="30" x="1" y="10" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M48.044 10.521H1.956V39.48h46.088V10.52Z"/></mask><g fill="#fff" mask="url(#a)"><path d="M48.044 20.707c-15.132 2.89-30.956 5.916-46.088 8.806 1.858-.192 6.053-.545 7.91-.75l.313 1.058c2.787 8.235 12.966 12.013 20.679 8.117 2.304-3.397 5.65-8.484 8.061-12.062l9.125-5.169Zm-17.272 8.907a383.65 383.65 0 0 1-3.1 4.457c-4.64 1.923-10.86-.555-12.638-5.24-.051-.136-.08-.281-.159-.564l18.049-1.82c-.796 1.172-1.472 2.17-2.152 3.168ZM14.336 24.964l.063-1.358c.011-.084.027-.167.044-.25.823-3.823 3.071-6.436 6.82-7.523 3.855-1.118 7.412-.24 9.958 2.876.304.372 1.116 1.569 1.116 1.569s5.08-.956 4.83-1.048c-1.708-4.875-8.373-10.186-16.448-8.33-8.308 1.91-11.964 9.852-11.186 15.235 1.095-.263 3.717-.905 4.803-1.17ZM43.944 32.119c-2.694.104-3.28.69-3.384 3.384-.104-2.694-.69-3.28-3.384-3.384 2.694-.104 3.28-.69 3.384-3.384.104 2.694.69 3.28 3.384 3.384Z"/><path d="M43.944 32.119c-2.694.104-3.28.69-3.384 3.384-.104-2.694-.69-3.28-3.384-3.384 2.694-.104 3.28-.69 3.384-3.384.104 2.694.69 3.28 3.384 3.384ZM46.858 29.832c-.992.038-1.207.254-1.246 1.246-.038-.992-.254-1.208-1.245-1.246.991-.038 1.207-.254 1.245-1.246.039.992.254 1.208 1.246 1.246Z"/></g></svg>
         <span class="block relative tracking-tight">

diff --git a/includes/docs/install/jetstream.html b/includes/docs/install/jetstream.html
@@ -1,4 +1,4 @@
-<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/jetstream') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer w-full hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border">
+<button x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" hx-get="{ url('/docs/install/jetstream') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get');" class="relative cursor-pointer w-full hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-zinc-800 animate-border">
     <span class="flex relative items-center p-5 mx-auto space-x-5 w-full h-full font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out pointer-events-none border-zinc-700 radial-background group from-neutral-900">
         <svg class="flex-shrink-0 mt-1 w-auto h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 50" fill="none"><path fill="#6875F5" d="M12.119 46.208C5.064 41.798.302 33.951.302 24.956.302 11.199 11.413 0 25.17 0c5.203 0 10.317 1.587 14.55 4.674-.264 18.695-11.552 34.656-27.601 41.534Z"/><path fill="#6875F5" d="M14.94 47.795C18.116 49.206 21.642 50 25.17 50c13.756 0 24.867-11.2 24.867-24.956 0-3.615-.793-7.143-2.204-10.23C43.07 30.513 30.637 42.946 14.94 47.796Z"/></svg>
         <span class="block relative tracking-tight">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<button hx-get="{ url('/docs/getting-started') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="window.dispatchEvent(new CustomEvent('set-page-full-width', {})); window.dispatchEvent(new CustomEvent('set-page-active', { detail: { active: 'docs' }})); scrollTop(); route=$el.getAttribute('hx-get'); mobileMenu=false" data-docs class="inline-block rounded-full bg-white hover:bg-[#a9fd02] px-8 py-4 text-center font-bold text-black transition hover:border-black">{title}</button>
		<button hx-get="{ url('/docs/getting-started') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="outerHTML transition:true" hx-push-url="true" @click="window.dispatchEvent(new CustomEvent('set-page-full-width', {})); window.dispatchEvent(new CustomEvent('set-page-active', { detail: { active: 'docs' }})); scrollTop(); route=$el.getAttribute('hx-get'); mobileMenu=false" data-docs class="inline-block rounded-lg bg-white hover:bg-[#a9fd02] px-8 py-4 text-center sm:w-auto w-full font-bold text-black transition hover:border-black">{title}</button>