Overhaul of theme

web/modules/custom/auto_alt/auto_alt.info.yml

@@ -0,0 +1,5 @@
+name: Auto Alt
+description: 'AI generated alt text on media items.'
+type: module
+package: Media
+core_version_requirement: ^10 || ^11

web/modules/custom/auto_alt/auto_alt.libraries.yml

@@ -0,0 +1,9 @@
+auto_alt:
+  css:
+    theme:
+      css/styles.css: { }
+  js:
+    js/autoAlt.js: { }
+  dependencies:
+    - core/once
+    - core/drupal

web/modules/custom/auto_alt/auto_alt.module

@@ -0,0 +1,12 @@
+<?php
+
+function auto_alt_form_alter(&$form, &$form_state, $form_id) {
+  if ($form_id !== 'media_image_edit_form') {
+    return;
+  }
+  $form['auto_alt'] = [
+    '#type' => 'markup',
+    '#markup' => '<span id="autoalt">🪄</span>'
+  ];
+  $form['#attached']['library'][] = 'auto_alt/auto_alt';
+}

web/modules/custom/auto_alt/auto_alt.routing.yml

@@ -0,0 +1,7 @@
+auto_alt.content:
+  path: '/ai/alt-text-generator'
+  defaults:
+    _controller: '\Drupal\auto_alt\Controller\AltTextGenerator::generate'
+    _title: ''
+  requirements:
+    _permission: 'access content'

web/modules/custom/auto_alt/css/styles.css

@@ -0,0 +1,19 @@
+.form-managed-file__meta-items {
+  position: relative;
+}
+
+#autoalt {
+  position: absolute;
+  top: 46px;
+  right: 3px;
+  padding: 8px;
+  background: 'whitesmoke';
+  transform: translateY(-50%);
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+  transition: background .2s ease;
+}
+
+#autoalt:hover {
+  background: lightgray;
+}

web/modules/custom/auto_alt/js/autoAlt.js

@@ -0,0 +1,32 @@
+(function (Drupal, once) {
+  Drupal.behaviors.autoAltBehavior = {
+    attach: function (context, settings) {
+      once('autoAltBehavior', '#edit-field-media-image-0-alt', context).forEach(function (element) {
+        // Move the wand to where it should be.
+        let wand = context.getElementById("autoalt");
+        let mediaMeta = context.querySelector('.form-managed-file__meta-items');
+        mediaMeta.append(wand);
+        wand.addEventListener('click', generateAltText);
+      });
+
+      async function generateAltText() {
+        let imageUrl = document.querySelector('.image-preview__img-wrapper img').src;
+        const url = "/ai/alt-text-generator?";
+        try {
+          const response = await fetch(url + new URLSearchParams({
+            image: imageUrl,
+          }).toString());
+          if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+          }
+
+          const json = await response.json();
+          let altInput = document.getElementById('edit-field-media-image-0-alt');
+          altInput.value = json;
+        } catch (error) {
+          console.error(error.message);
+        }
+      }
+    }
+  };
+})(Drupal, once);

web/modules/custom/auto_alt/src/Controller/AltTextGenerator.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\auto_alt\Controller;
+
+use \Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+/**
+ * Generate Alt Text for an image.
+ */
+class AltTextGenerator extends ControllerBase {
+
+  /**
+   * Returns a renderable array for a test page.
+   *
+   * return []
+   */
+  public function generate() {
+    // Get the url to the image from the request.
+    $image_url = \Drupal::request()->get('image');
+    if (!$image_url) {
+      throw new NotFoundHttpException();
+    }
+    $image_contents = file_get_contents($image_url);
+    $encoded_image = base64_encode($image_contents);
+    // Now send this to chat gpt / ai to generate alt text.
+
+    $response = [
+      "This is some alt text for an image.",
+      "A new string for alt text",
+      "Another string about alt text",
+    ];
+    $text_to_return = rand(0,2);
+    $json_response = new JsonResponse();
+    $json_response->headers->set('Content-Type', 'application/json');
+    $json_response->setData($response[$text_to_return]);
+    return $json_response;
+  }
+
+}

web/modules/custom/dc_components/components/ping-pong/ping-pong.css

@@ -20,6 +20,16 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
+  color: var(--site-platinum, #fff);
+  font-size: 1.5rem;
+}
+
+.ping-pong__info-text p {
+  margin-bottom: 0;
+}
+
+.ping-pong__info-text {
+  margin-bottom: 2rem;
 }
 
 .ping-pong__info-inner {
@@ -35,7 +45,10 @@
 }
 
 .ping-pong__info h2 {
+  font-size: 3rem;
+  color: var(--site-white, #fff);
   margin: 0;
+  margin-bottom: 1rem;
 }
 
 .ping-pong.right {
@@ -55,7 +68,7 @@
 }
 
 .field--name-field-ping-pong-cta a {
-  background: rgba(255, 255, 255, 0.66);
+  background: var(--site-secondary, #fff);
   padding: 10px 20px;
   border-radius: 10px;
   transition: background .5s ease;

web/modules/custom/dc_components/components/ping-pong/ping-pong.twig

@@ -31,7 +31,7 @@
       <div class="ping-pong__info-text">
         {% block body %}{% endblock %}
       </div>
-      <div class="ping-pong__info-cta">
+      <div class="ping-pong__info-cta btn-primary">
         {% block cta %}{% endblock %}
       </div>
     </div>

web/modules/custom/ufc/templates/ufc-recent-fights.html.twig

@@ -1,2 +1,2 @@
 {{ attach_library('ufc/recent_fights_react') }}
-<div id="recent-fights"></div>
+<div id="recent-fights" class="container"></div>