Added possibility to copy code from landing page examples

Author: owsiakl

web/landing/assets/app.js

@@ -3,3 +3,4 @@ import 'highlight.js/styles/github-dark.min.css';
 import '@oddbird/popover-polyfill';
 import './bootstrap.js';
 import 'htmx.org'
+import 'clipboard'

web/landing/assets/controllers/clipboard_controller.js

@@ -0,0 +1,23 @@
+import {Controller} from '@hotwired/stimulus';
+import ClipboardJS from 'clipboard';
+
+export default class extends Controller
+{
+    connect()
+    {
+        if (!ClipboardJS.isSupported()) {
+            this.element.style.display = 'none';
+
+            return;
+        }
+
+        const clipboard = new ClipboardJS(this.element);
+
+        clipboard.on('success', e => {
+            e.clearSelection();
+
+            this.element.classList.add('copied');
+            setTimeout(() => this.element.classList.remove('copied'), 2000);
+        });
+    }
+}

web/landing/assets/images/icons/copy.svg

@@ -1,5 +1,18 @@
 <?php
 
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
+ *
+ * The "importmap:require" command can be used to add new entries to this file.
+ *
+ * This file has been auto-generated by the importmap commands.
+ */
 return [
     'app' => [
         'path' => 'app.js',
@@ -28,6 +41,9 @@
     'htmx.org' => [
         'version' => '1.9.10',
     ],
+    'clipboard' => [
+        'version' => '2.0.11',
+    ],
 
     /**
      * On mobile there is a collapsible menu that uses relatively new popover attribute,

web/landing/importmap.php

@@ -9,43 +9,48 @@
 {%- endblock -%}
 
 {% block main %}
-    <div class="mx-auto max-w-screen-xl px-2 sm:px-4 relative max-lg:py-10 lg:h-[500px] flex flex-col justify-center">
+    <div class="mx-auto max-w-screen-xl px-2 sm:px-4 relative max-lg:py-10 p-[116px]">
         <h1 class="font-bold max-sm:text-5xl text-6xl tracking-wide leading-[70px] max-w-[450px] mb-8 z-10">UNIFIED DATA PROCESSING FRAMEWORK</h1>
-        <a href="https://packagist.org/packages/flow-php/etl" target="_blank" class="w-fit py-2 px-3 tracking-widest before:content-['$'] before:mr-2 bg-orange-100 rounded">composer require flow-php/etl</a>
-        <img src="{{ asset('images/elephant.svg') }}" alt="elephant" class="max-lg:hidden max-w-[720px] absolute right-0 top-2">
+        <code class="w-fit py-2 px-3 before:content-['$'] bg-orange-100 rounded">
+            <span id="command">composer require flow-php/etl</span>
+            <button class="[&.copied]:after:content-['Copied!'] after:absolute after:translate-x-6 select-none" title="copy command" data-clipboard-target="#command" {{ stimulus_controller('clipboard') }}>
+                <img src="{{ asset('images/icons/copy.svg') }}" alt="copy command" class="inline w-5">
+            </button>
+        </code>
+        <img src="{{ asset('images/elephant.svg') }}" alt="elephant" class="max-lg:hidden max-w-[720px] absolute right-0 top-0">
     </div>
 
     <div class="bg-blue-200">
-        <div class="mx-auto max-w-screen-xl flex items-center justify-center text-center max-sm:flex-col lg:pr-[550px] xl:pr-[650px]">
-            <div class="p-2 my-2 rounded basis-1/2">
+        <div class="mx-auto max-w-screen-xl flex items-center justify-center text-center max-sm:flex-col lg:pr-[550px] xl:pr-[600px]">
+            <div class="p-2 my-2 basis-1/3">
                 <img src="{{ asset('images/icons/extract.svg') }}" alt="extract" class="inline">
                 <h2 class="my-2 text-2xl font-semibold tracking-wide">Extracts</h2>
                 <p>Read from various data sources.</p>
             </div>
 
             <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" class="max-sm:rotate-90">
 
-            <div class="p-2 my-2 ml-4 rounded basis-1/2">
+            <div class="p-2 my-2 ml-4 basis-1/3">
                 <img src="{{ asset('images/icons/transform.svg') }}" alt="transform" class="inline">
                 <h2 class="my-2 text-2xl font-semibold tracking-wide">Transforms</h2>
                 <p>Shape and optimize for your needs</p>
             </div>
 
             <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" class="max-sm:rotate-90">
 
-            <div class="p-2 my-2 rounded basis-1/2">
+            <div class="p-2 my-2 basis-1/3">
                 <img src="{{ asset('images/icons/load.svg') }}" alt="load" class="inline">
                 <h2 class="my-2 text-2xl font-semibold tracking-wide">Loads</h2>
                 <p>Store and secure in one of many available data sinks.</p>
             </div>
         </div>
     </div>
 
-    <div class="relative py-10 px-2 sm:px-4 mx-auto max-w-screen-xl" data-hx-boost="true">
+    <div class="py-10 px-2 sm:px-4 mx-auto max-w-screen-xl" data-hx-boost="true">
         <nav class="font-medium text-center bg-orange-100 rounded">
             <ul class="flex whitespace-nowrap overflow-auto justify-between">
                 {% for topic in topics %}
-                    <li class="grow rounded">
+                    <li class="grow">
                         <a href="{{ path('topic', {topic: topic}) }}#example" class="{% if currentTopic == topic %}active {% elseif currentTopic is null and loop.first %}active {% endif %}inline-block leading-10 px-4 py-2 w-full [&.active]:bg-orange-300 rounded">
                             {{ topic|humanize }}
                         </a>
@@ -56,9 +61,9 @@
 
         <div class="pb-4 -mt-20 pt-20">
             <nav>
-                <ul class="flex flex-nowrap whitespace-nowrap overflow-auto py-4">
+                <ul class="flex whitespace-nowrap overflow-auto py-4">
                     {% for example in examples %}
-                        <li class="group-[:not(:has(:target))]/examples:first:bg-orange-300 rounded">
+                        <li>
                             <a href="{{ path('example', {topic: currentTopic, example: example}) }}#example" class="{% if currentExample == example %}active {% elseif currentExample is null and loop.first %}active {% endif %}w-max tracking-wide flex items-center leading-8 px-2 [&.active]:bg-orange-300 rounded">
                                 <img src="{{ asset('images/favicons/favicon-16x16.png') }}" alt="flow php icon" class="mr-2">
                                 {{ example|humanize }}
@@ -70,8 +75,11 @@
 
             <div id="example" class="-mt-36 pt-36">
                 {% 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') }}>
+                    <pre class="rounded p-4 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2 relative">
+                        <button class="absolute top-0 right-0 bg-orange-100 rounded px-4 leading-9 [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-24" title="copy code" data-clipboard-target="#code" {{ stimulus_controller('clipboard') }}>
+                            <img src="{{ asset('images/icons/copy.svg') }}" alt="copy code" class="inline w-5">
+                        </button>
+                        <code id="code" class="language-php !p-0 !bg-transparent" {{ stimulus_controller('syntax_highlight') }}>
                             {{- code | escape('html') -}}
                         </code>
                     </pre>