Making a few more page improvements

thedevdojo · May 30, 2024 · 77d5b62 · 77d5b62
1 parent 4af9f58
commit 77d5b62
Show file tree

Hide file tree

Showing 10 changed files with 304 additions and 87 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -78,4 +78,189 @@ h2 a, h3 a, h4 a {
 
 #hero-bg{
   view-transition-name: none;
+}
+
+
+
+
+
+
+.text-container {
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: 96px;
+  color: white;
+  opacity: 0.8;
+  user-select: none;
+  text-shadow: 1px 1px rgba(0,0,0,0.1);
+}
+
+:root {
+  --color-bg1: rgb(98, 98, 98);
+  --color-bg2: rgb(17, 17, 42);
+  --color1: 18, 18, 18;
+  --color2: 161, 161, 161;
+  --color3: 41, 41, 41;
+  --color4: 190, 190, 190;
+  --color5: 8, 8, 8;
+  --color-interactive: 140, 100, 255;
+  --circle-size: 80%;
+  --blending: hard-light;
+}
+
+@keyframes moveInCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moveVertical {
+  0% {
+    transform: translateY(-50%);
+  }
+  50% {
+    transform: translateY(50%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes moveHorizontal {
+  0% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+  50% {
+    transform: translateX(50%) translateY(10%);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+}
+
+
+.gradient-bg {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
+  top: 0;
+  left: 0;
+
+  svg {
+    display: none;
+  }
+
+
+  .gradients-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .g1 {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: center center;
+    animation: moveVertical 20s ease infinite;
+
+    opacity: 1;
+  }
+
+  .g2 {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: calc(50% - 400px);
+    animation: moveInCircle 10s reverse infinite;
+
+    opacity: 1;
+  }
+
+  .g3 {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2 + 200px);
+    left: calc(50% - var(--circle-size) / 2 - 500px);
+
+    transform-origin: calc(50% + 400px);
+    animation: moveInCircle 20s linear infinite;
+
+    opacity: 1;
+  }
+
+  .g4 {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: calc(50% - 200px);
+    animation: moveHorizontal 20s ease infinite;
+
+    opacity: 0.7;
+  }
+
+  .g5 {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: calc(var(--circle-size) * 2);
+    height: calc(var(--circle-size) * 2);
+    top: calc(50% - var(--circle-size));
+    left: calc(50% - var(--circle-size));
+
+    transform-origin: calc(50% - 800px) calc(50% + 200px);
+    animation: moveInCircle 10s ease infinite;
+
+    opacity: 1;
+  }
+
+  .interactive {
+    position: absolute;
+    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: 100%;
+    height: 100%;
+    top: -50%;
+    left: -50%;
+
+    opacity: 0.7;
+  }
 }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -19,8 +19,6 @@ domReadyLoop();
 
 document.addEventListener("DOMContentLoaded", function() {
 
-    document.getElementById('hero-bg').classList.remove('opacity-0');
-
     loadGsapAnimations();
     createRadialBackgrounds();
     updateTOC();
@@ -306,10 +304,28 @@ document.addEventListener('htmx:afterSettle', function(evt) {
         updateTOC();
         addHeadingsToTOC();
         renderSmoothAnchorLinks();
+
+        confirmIntroInstallLinks();
     }, 10);
 });
 
 
+function confirmIntroInstallLinks(){
+    if(window.location.href.includes('docs/install')){
+        document.getElementById('installation-docs').dispatchEvent(new CustomEvent('set-active', {}));
+    } else {
+        document.getElementById('installation-docs').dispatchEvent(new CustomEvent('set-inactive', {}));
+    }
+
+    if(window.location.href.includes('docs/getting-started')){
+        document.getElementById('introduction-docs').dispatchEvent(new CustomEvent('set-active', {}));
+    } else {
+        document.getElementById('introduction-docs').dispatchEvent(new CustomEvent('set-inactive', {}));
+    }
+
+
+}
+
 
 function updateTOC(){
     if(document.getElementById('table-of-contents')){

diff --git a/content/docs/contributing.md b/content/docs/contributing.md
@@ -44,7 +44,8 @@ ln -s packages/devdojo/auth/tests tests
 The second symlink will link our package public directory so we can see our CSS and JS changes.
 
 ```
-ln -s packages/devdojo/auth/public public/auth
+cd public
+ln -s ../packages/devdojo/auth/public auth
 ```
 
 Finally, we need to install the package dependencies and start our asset watcher.

diff --git a/content/docs/install/jetstream/index.md b/content/docs/install/jetstream/index.md
@@ -49,7 +49,7 @@ Inside of this config, located at `config/fortify.php` you'll need to set `views
 'views' => false,
 ```
 
-and you'll also need to comment out the `registration` and the `resetPassword` and `emailVerification` features since we will be relying on DevDojo Auth for those features:
+and you'll also need to comment out the `registration`, `resetPassword`, `emailVerification` and `twoFactorAuth` features since we will be relying on DevDojo Auth for this functionality:
 
 ```php
 'features' => [
@@ -58,12 +58,14 @@ and you'll also need to comment out the `registration` and the `resetPassword` a
     // Features::emailVerification(),
     Features::updateProfileInformation(),
     Features::updatePasswords(),
-    Features::twoFactorAuthentication([
-        'confirm' => true,
-        'confirmPassword' => true,
-        // 'window' => 0,
-    ]),
+    // Features::twoFactorAuthentication([
+    //     'confirm' => true,
+    //     'confirmPassword' => true,
+    //     // 'window' => 0,
+    // ]),
 ],
 ```
 
+You may also want to toggle the `Registration Include Name Field` from the `/auth/setup` settings page. This will allow the user to add their name upon registration.
+
 That's it! DevDojo Auth is now working with Jetstream. You can enable 2FA in the Auth settings page and it will enable/disable 2FA and work with the current Jetstream implementation.