Adding latest to main

assets/css/main.css

@@ -95,4 +95,61 @@
 
   .features-icon{
     background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="16 130.29 54.4 168 144 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="125.96 144 150.4 168 240 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
-  }
+  }
+
+
+/* https://cdn.devdojo.com/images/august2024/helm-birds-pattern.png
+https://cdn.devdojo.com/images/august2024/wave-wind-pattern.png
+https://cdn.devdojo.com/images/august2024/boat-star-pattern.png
+https://cdn.devdojo.com/images/august2024/anchor-pattern.png
+https://cdn.devdojo.com/images/august2024/helm-pattern.png
+https://cdn.devdojo.com/images/august2024/wavy-pattern.png
+https://cdn.devdojo.com/images/august2024/wavyer-pattern.png */
+
+.pattern-helm-birds{
+    background-image: url('https://cdn.devdojo.com/images/august2024/helm-birds-pattern.png');
+    background-repeat: repeat;
+    background-size: 120px auto; /* Adjust as needed */
+}
+
+.pattern-wave-wind{
+  background-image: url('https://cdn.devdojo.com/images/august2024/wave-wind-pattern.png');
+  background-repeat: repeat;
+  background-size: 10 0px auto; /* Adjust as needed */
+}
+
+.pattern-boat-star{
+  background-image: url('https://cdn.devdojo.com/images/august2024/boat-star-pattern.png');
+  background-repeat: repeat;
+  background-size: 100px auto; /* Adjust as needed */
+}
+
+.pattern-anchor{
+  background-image: url('https://cdn.devdojo.com/images/august2024/anchor-pattern.png');
+  background-repeat: repeat;
+  background-size: auto; /* Adjust as needed */
+}
+
+.pattern-helm{
+  background-image: url('https://cdn.devdojo.com/images/august2024/helm-pattern.png');
+  background-repeat: repeat;
+  background-size: 50px auto /* Adjust as needed */
+}
+
+.pattern-dots{
+  background-image: url('https://cdn.devdojo.com/assets/svg/dots.svg');
+  background-repeat: repeat;
+  background-size: 50px 50px; /* Adjust as needed */
+}
+
+.pattern-wavy{
+  background-image: url('https://cdn.devdojo.com/images/august2024/wavy-pattern.png');
+  background-repeat: repeat;
+  background-size: 60px 60px;
+}
+
+.pattern-wavyer{
+  background-image: url('https://cdn.devdojo.com/images/august2024/wavyer-pattern.png');
+  background-repeat: repeat;
+  background-size: 150px 150px; /* Adjust as needed */
+}

assets/js/main.js

@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 function loadGsapAnimations(){
 
-
+    FeatureScroller();
 
     if(document.getElementById('radical')){
         gsap.to("#radical", {
@@ -244,37 +244,44 @@ function domReadyLoop(){
                     // start the slide down
                     const tl = gsap.timeline();
 
-                    tl.set('.slideDown', { y: 0, yPercent: -100 })
+                    tl.set('.slideDown', { y: 0, yPercent: -100, position: 'fixed' })
                                     .to('.slideDown', { duration: 2, ease: 'power3.out', yPercent: 100, force3D: true});
+
+                    // setTimeout(function(){
+                    //     document.querySelector('.slideDown').remove();
+                    // }, 300);
                 }, 150);
             }       
         }, 500);
     }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+window.markdownTOCClickFunc = function(){
     const proseLinks = document.querySelectorAll('.prose ul li a');
+    console.log('prose');
+    console.log(proseLinks);
     proseLinks.forEach(link => {
         link.addEventListener('click', function(event) {
+            console.log('clicked');
             if(link.getAttribute('href').startsWith('#')) {
                 event.preventDefault();
                 renderLinkAsTOC(link);
             }
-            //console.log(`Link clicked: ${this.href}`);
-            // Add any additional functionality as needed
         });
     });
-});
+}
 
 
 document.addEventListener("DOMContentLoaded", function() {
     hljs.highlightAll();
+    markdownTOCClickFunc();
 });
 
 document.addEventListener('htmx:afterSwap', function(evt) {
     setTimeout(function(){
         domReadyLoop();
         hljs.highlightAll();
+        markdownTOCClickFunc();
         loadGsapAnimations();
         //createRadialBackgrounds();
         window.dispatchEvent(new CustomEvent('set-route', { detail: { route: evt.detail.pathInfo.requestPath } }));
@@ -285,6 +292,7 @@ document.addEventListener('htmx:afterSwap', function(evt) {
 document.addEventListener('htmx:afterSettle', function(evt) {
     setTimeout(function(){
         updateTOC();
+        markdownTOCClickFunc();
     }, 10);
 });
 
@@ -346,6 +354,12 @@ window.renderLinkAsTOC = function(link){
 
     if (targetElement) {
         const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+        // Get the current URL without any hash
+        let currentURL = window.location.href.split('#')[0];
+        // Append the targetId to the URL
+        let newURL = currentURL + '#' + targetId;
+        // Update the URL
+        window.history.pushState({path:newURL},'',newURL);
         window.scrollTo({
             top: targetPosition - offset,
             behavior: 'smooth'
@@ -373,24 +387,25 @@ function setAllOthersToInactive(link){
     }
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-
+window.FeatureScroller = function(){
     const marquee = document.getElementById('vertical-marquee');
     const itemsContainer = document.getElementById('marquee-container');
 
     // Calculate the height of the content and the container
     const scrollHeight = itemsContainer.scrollHeight;
     const containerHeight = marquee.offsetHeight;
 
-    // Create the scroll trigger animation
-    gsap.to(itemsContainer, {
-      yPercent: -30 * (scrollHeight / containerHeight - 1),
-      ease: 'none',
-      scrollTrigger: {
-        trigger: marquee,
-        start: 'top bottom',  // Start the animation when the top of the marquee hits the bottom of the viewport
-        end: 'bottom top',    // End the animation when the bottom of the marquee hits the top of the viewport
-        scrub: true           // Link the animation to the scroll position
-      }
-    });
-  });
+    if(itemsContainer){
+        // Create the scroll trigger animation
+        gsap.to(itemsContainer, {
+        yPercent: -30 * (scrollHeight / containerHeight - 1),
+        ease: 'none',
+        scrollTrigger: {
+            trigger: marquee,
+            start: 'top bottom',  // Start the animation when the top of the marquee hits the bottom of the viewport
+            end: 'bottom top',    // End the animation when the bottom of the marquee hits the top of the viewport
+            scrub: true           // Link the animation to the scroll position
+        }
+        });
+    }
+}

content/docs/features/admin.md

@@ -0,0 +1,85 @@
+---
+title: Admin
+description: Learn how to use the Admin
+prevTitle: 'API'
+prevURL: '/docs/features/api'
+nextTitle: 'Themes'
+nextURL: '/docs/features/themes'
+---
+
+# Admin
+
+Wave has been built using the Voyager Admin, which is an all-in-one admin interface for Laravel. This means that you can leverage all the powers of Wave with the power of Voyager as well.
+
+> If you have not had a chance to check out the documentation be sure to head over to <a href="https://voyager-docs.devdojo.com" target="_blank">voyager-docs.devdojo.com</a> to learn more.
+
+- [Admin](#admin)
+    - [Admin Interface](#admin-interface)
+    - [Admin Dashboard Sections](#admin-dashboard-sections)
+
+---
+
+<a name="admin-interface"></a>
+### Admin Interface
+
+You may have noticed the UI for the Wave admin may look a little different than the default Voyager theme.
+
+![admin](https://cdn.devdojo.com/images/april2021/admin.png)
+
+The different UI will have no effect on the Voyager functionality. Everything that you enjoy with Voyager will be the same with the Wave admin.
+
+Next, let’s briefly go over each section of the Voyager admin.
+
+<a name="admin-dashboard-sections"></a>
+### Admin Dashboard Sections
+
+Inside of your admin dashboard there are 12 top-level sections which include:
+
+1. Dashboard Home
+2. Plans
+3. Roles
+4. Users
+5. Media
+6. Posts
+7. Pages
+8. Categories
+9. Announcements
+10. Tools
+11. Settings
+12. Themes
+
+**Dashboard Home**
+The Dashboard homepage is where you will land when you first login to the admin dashboard. You can view statistics on site traffic, users, posts, and many other content on your site.
+
+**Plans**
+In this section of the admin you can Add, Edit, Delete subscription plans associated with your Software as a Service.
+
+**Roles**
+In this section you can Add, Edit, Delete user roles and permissions in your application. A specific role will then be associated with a Subscription Plan above.
+
+**Users**
+You can view all the users of your application here. You can also Edit, Add, or Delete users of your application.
+
+**Media**
+This is your Media Manager where you can view all the media in your application. You can also Upload, Rename, and Delete current media.
+
+**Posts**
+This is where you can write blog posts related to your Software as a Service. you can also Edit or Delete current posts in your application.
+
+**Pages**
+You can add new pages to your application and link to them in the front-end. These pages might be an About page, Policy page, or any other page you need to add to your application.
+
+**Categories**
+You can add, edit, or delete post categories in this section. After creating a new category you can then categorize any post with this specific category in your application.
+
+**Announcements**
+In the announcements section you can add new announcements to be shown to your users. User will see the latest popup announcement when they visit your application so they can stay updated with the latest features or news related to your SAAS.
+
+**Tools**
+The tools section has a variety of tools that you can use to manage your SAAS including a Menu Builder, Bread Builder, and Database Structure.
+
+**Settings**
+In this section of you admin you can modify site-wide settings for your application including Authentication and Billing settings.
+
+**Themes**
+In this section you can view the current themes in your application, activate/deactivate themes, and edit theme settings.