[Site] LiveMemory demo

ux.symfony.com/assets/controllers.json

@@ -87,7 +87,7 @@
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,
-                "fetch": "eager"
+                "fetch": "lazy"
             },
             "mercure-turbo-stream": {
                 "enabled": true,
@@ -97,7 +97,7 @@
         "@symfony/ux-typed": {
             "typed": {
                 "enabled": true,
-                "fetch": "eager"
+                "fetch": "lazy"
             }
         },
         "@symfony/ux-vue": {

ux.symfony.com/assets/controllers/bootstrap-modal-controller.js

@@ -10,6 +10,7 @@ import { Modal } from 'bootstrap';
  * See templates/components/BootstrapModal.html.twig to see how this is
  * attached to Bootstrap modal.
  */
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     modal = null;
 

ux.symfony.com/assets/controllers/code-expander-controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = ['useStatements', 'expandCodeButton', 'codeContent'];
 

ux.symfony.com/assets/controllers/code-highlighter-controller.js

@@ -11,6 +11,8 @@ hljs.registerLanguage('twig', hljs_twig);
 // xml is the language used for HTML
 hljs.registerLanguage('xml', hljs_xml);
 
+
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = ['codeBlock'];
 

ux.symfony.com/assets/controllers/markdown-controller.js

@@ -1,6 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import snarkdown from 'snarkdown';
 
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = ['input', 'preview'];
 

ux.symfony.com/assets/controllers/theme-switcher-controller.js

@@ -8,7 +8,21 @@ export default class extends Controller {
         }
 
         const theme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        this.select(theme);
+    }
+
+    select (theme) {
+        clearTimeout(this.timeout);
+
+        this.element.setAttribute('data-switch', theme);
         localStorage.setItem('user-theme', theme);
-        document.documentElement.setAttribute('data-bs-theme', theme);
+
+        this.timeout = setTimeout(() => {
+            /**
+             * Small delay to allow CSS transitions during theme switch.
+             */
+            document.documentElement.setAttribute('data-bs-theme', theme);
+        }, 250);
     }
 }

ux.symfony.com/assets/controllers/tooltips-controller.js

@@ -1,6 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import { Tooltip } from 'bootstrap';
 
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     connect() {
         this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => {

ux.symfony.com/assets/controllers/translator-demo-controller.js

@@ -21,6 +21,7 @@ function highlight({ code, language = 'javascript' }) {
     return hljs.highlight(code, { language }).value;
 }
 
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = [
         'helloCode',

ux.symfony.com/assets/controllers/ux-clipboard-controller.js

@@ -1,5 +1,6 @@
 import Clipboard from 'stimulus-clipboard'
 
+/* stimulusFetch: 'lazy' */
 export default class extends Clipboard {
     static values = {
         source: String,

ux.symfony.com/assets/demos/live-memory.js

@@ -0,0 +1,3 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();

ux.symfony.com/assets/styles/_images.scss

@@ -15,3 +15,4 @@
         filter: invert(100%) hue-rotate(180deg);
     }
 }
+

ux.symfony.com/assets/styles/app.scss

@@ -64,6 +64,7 @@
 
 // Components
 @import "components/demo-container";
+@import "components/DemoCard";
 @import "components/DocsLink";
 @import "components/file_tree";
 @import "components/Icon";

ux.symfony.com/assets/styles/components/_DemoCard.scss

@@ -0,0 +1,103 @@
+// -----------------------------------------------------------------
+// DemoCard
+// -----------------------------------------------------------------
+
+.DemoCard {
+  --radius: .75rem;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: var(--radius);
+  border: 1px solid var(--bs-secondary-bg-subtle);
+
+  transition: color 250ms ease-in-out, transform 750ms ease-in-out, box-shadow 750ms ease-in-out;
+  transform: translateY(0);
+  box-shadow: 0 0 0 transparent;
+}
+.DemoCard:hover {
+  transition: color 250ms ease-in-out, transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
+  transform: translateY(-.25rem);
+  box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle);
+}
+
+.DemoCard__badge {
+  position: absolute;
+  right: .75rem;
+  top: .75rem;
+  color: var(--bs-body-color);
+  padding: .25rem;
+  font-size: .8rem;
+  text-transform: initial;
+  background: linear-gradient(113.84deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%);
+  background: var(--gradient);
+  border-radius: 50%;
+  animation: linear 2000s infinite alternate;
+}
+@keyframes badge--rotation {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(180deg)
+  }
+}
+
+.DemoCard__media {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  display: grid;
+  width: 100%;
+  min-height: 100px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  place-content: center;
+  background: #000;
+}
+
+.DemoCard__image {
+  max-height: 100%;
+  width: 100%;
+  display: block;
+  transition: transform 500ms linear;
+  transform: scale(1) translateY(0);
+  border-radius: .25rem;
+  transform-style: preserve-3d;
+  opacity: .80;
+}
+.DemoCard:hover .DemoCard__image {
+  opacity: .90;
+}
+
+.DemoCard__content {
+  padding: .75rem 1rem;
+  flex: 1;
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  gap: .5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.DemoCard__title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0;
+  font-family: var(--font-family-title);
+  padding: .25rem;
+}
+
+.DemoCard__description {
+  font-size: 0.9rem;
+  font-stretch: semi-condensed;
+  font-weight: 400;
+  transition: all 250ms ease-in-out;
+  opacity: .65;
+  line-height: 1.4;
+  padding: .25rem;
+  margin: 0;
+}
+.DemoCard:hover .DemoCard__description {
+    opacity: .85;
+}

ux.symfony.com/assets/styles/demos/_live-memory.scss

@@ -0,0 +1,38 @@
+// -----------------------------------------------------------------
+// LiveMemory demo custom stylesheets
+// -----------------------------------------------------------------
+
+@layer root, base, layout, component, utilities;
+
+@layer root {
+  // Reset, variables & core styles
+  @import "live-memory/app/reset";
+  @import "live-memory/app/root";
+  @import "live-memory/app/html";
+}
+
+@layer base {
+  @import "live-memory/base/header";
+}
+
+@layer components {
+  @import "../components/Icon";
+  @import "live-memory/components/Board";
+  @import "live-memory/components/Card";
+  @import "live-memory/components/Debug";
+  @import "live-memory/components/Logo";
+  @import "live-memory/components/Metric";
+  @import "live-memory/components/Overlay";
+  @import "live-memory/components/Score";
+  @import "live-memory/components/ThemeSwitch";
+  @import "live-memory/components/Timer";
+}
+
+@layer utilities {
+  @import "../utilities/background";
+  @import "../utilities/shadow";
+}
+
+@layer theme {
+  @import "live-memory/app/themes";
+}