Added stimulus & controllers to a landing page (#954)

* Added stimulus & controllers to a landing page * removed tab controller & packages json
flow-php · Feb 2, 2024 · 9cdaca9 · 9cdaca9
1 parent dd1e678
commit 9cdaca9
Show file tree

Hide file tree

Showing 11 changed files with 145 additions and 11 deletions.
diff --git a/src/web/landing/assets/app.js b/src/web/landing/assets/app.js
@@ -0,0 +1,3 @@
+import '@fontsource-variable/cabin/index.min.css';
+import 'highlight.js/styles/github-dark.min.css';
+import './bootstrap.js';
diff --git a/src/web/landing/assets/bootstrap.js b/src/web/landing/assets/bootstrap.js
@@ -0,0 +1,6 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);
diff --git a/src/web/landing/assets/controllers.json b/src/web/landing/assets/controllers.json
@@ -0,0 +1,4 @@
+{
+  "controllers": [],
+  "entrypoints": []
+}
diff --git a/src/web/landing/assets/controllers/syntax_highlight_controller.js b/src/web/landing/assets/controllers/syntax_highlight_controller.js
@@ -0,0 +1,16 @@
+import {Controller} from '@hotwired/stimulus';
+import hljs from 'highlight.js/lib/core';
+import php from 'highlight.js/lib/languages/php';
+
+export default class extends Controller
+{
+    static afterLoad(identifier, application)
+    {
+        hljs.registerLanguage('php', php);
+    }
+
+    connect()
+    {
+        hljs.highlightElement(this.element);
+    }
+}
diff --git a/src/web/landing/assets/styles/app.css b/src/web/landing/assets/styles/app.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+    font-family: "Cabin Variable", sans-serif;
+}
+
 .unset {
     inset: unset;
 }
diff --git a/src/web/landing/composer.json b/src/web/landing/composer.json
@@ -18,7 +18,8 @@
         "symfony/runtime": "^6.4",
         "symfony/console": "^6.4",
         "symfony/yaml": "^6.4",
-        "symfony/dotenv": "^6.4"
+        "symfony/dotenv": "^6.4",
+        "symfony/stimulus-bundle": "^2.14"
     },
     "require-dev": {
         "symfony/web-profiler-bundle": "^6.4",

diff --git a/src/web/landing/composer.lock b/src/web/landing/composer.lock
diff --git a/src/web/landing/config/bundles.php b/src/web/landing/config/bundles.php
@@ -6,4 +6,5 @@
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['dev' => true, 'test' => true],
     NorbertTech\StaticContentGeneratorBundle\StaticContentGeneratorBundle::class => ['dev' => true, 'test' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
 ];
diff --git a/src/web/landing/importmap.php b/src/web/landing/importmap.php
@@ -0,0 +1,28 @@
+<?php
+
+return [
+    'app' => [
+        'path' => 'app.js',
+        'entrypoint' => true,
+    ],
+    '@symfony/stimulus-bundle' => [
+        'path' => '@symfony/stimulus-bundle/loader.js',
+    ],
+    '@hotwired/stimulus' => [
+        'version' => '3.2.1',
+    ],
+    'highlight.js/lib/core' => [
+        'version' => '11.9.0',
+    ],
+    'highlight.js/lib/languages/php' => [
+        'version' => '11.9.0',
+    ],
+    'highlight.js/styles/github-dark.min.css' => [
+        'version' => '11.9.0',
+        'type' => 'css',
+    ],
+    '@fontsource-variable/cabin/index.min.css' => [
+        'version' => '5.0.17',
+        'type' => 'css',
+    ],
+];
diff --git a/src/web/landing/templates/base.html.twig b/src/web/landing/templates/base.html.twig
@@ -1,3 +1,4 @@
+<!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -9,18 +10,15 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicons/favicon-16x16.png') }}">
     <link rel="shortcut icon" href="{{ asset('images/favicons/favicon.ico') }}">
 
-    <link rel="preload" href="https://fonts.googleapis.com/css?family=Cabin" as="style">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin">
-
     {% block stylesheets %}
         <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
     {% endblock %}
 
     {% block javascripts %}
-        {{ importmap([]) }}
+        {{ importmap() }}
     {% endblock %}
 </head>
-<body class="scroll-smooth font-['Cabin'] bg-black text-white">
+<body class="scroll-smooth bg-black text-white">
     <header class="py-2 text-white bg-blue-200">
         <div class="mx-auto max-w-screen-xl px-4 flex items-center justify-between ">
             <a href="{{ url('main') }}">

diff --git a/src/web/landing/templates/main/index.html.twig b/src/web/landing/templates/main/index.html.twig
@@ -75,9 +75,13 @@
 
                 {% for example in examples %}
                     <div id="{{ topic.id }}_example_{{ example }}" class="-mt-36 pt-36 hidden target:block group-[:not(:has(:target))]/examples:first-of-type:block">
-                        <pre class="rounded p-4 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2"><code class="language-php">
-                            {{- examples.first() | escape('html') -}}
-                        </code></pre>
+                        {% apply spaceless %}
+                            <pre class="rounded p-4 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2">
+                                <code class="language-php !p-0 !bg-transparent" {{ stimulus_controller('syntax_highlight') }}>
+                                    {{- examples.first() | escape('html') -}}
+                                </code>
+                            </pre>
+                        {% endapply %}
                     </div>
                 {% endfor %}
             </div>
@@ -97,7 +101,7 @@
             <div class="grid gap-1 sm:gap-2 lg:gap-4 grid-cols-8 lg:grid-cols-12">
                 {% for contributor in contributors %}
                     <a href="{{ contributor.html_url }}" rel="nofollow">
-                        <img src="{{ contributor.avatar_url }}" alt="{{ contributor.login }}" title="{{ contributor.login }}" class="w-full max-w-14 rounded-full">
+                        <img loading="lazy" src="{{ contributor.avatar_url }}" alt="{{ contributor.login }}" title="{{ contributor.login }}" class="w-full max-w-14 rounded-full">
                     </a>
                 {% endfor %}
             </div>