Update Assets and use external links class (#79)

* Add External Link Indicator * Adds CSS for ::after psuedo to use an icon to indicate external Link * Adds a controller to automatically process links to add target blank * Update event description to always use external links with target blank WIP: Flash of unstyled SVG on load - how to I fix this? * Update logo, favicon and OG share assets
toronto-ruby · Nov 18, 2024 · c82b543 · c82b543
1 parent 7f8cd91
commit c82b543
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 13 deletions.
diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico
diff --git a/app/assets/images/logo-transparent.png b/app/assets/images/logo-transparent.png
diff --git a/app/assets/images/opengraph-share.png b/app/assets/images/opengraph-share.png
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -21,3 +21,13 @@
 .coc p {
   @apply mb-2;
 }
+
+a.external-link::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: 0.25em;
+  background-size: 1em;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2Q2NDA0NSIgY2xhc3M9InNpemUtNCI+CiAgPHBhdGggZD0iTTYuMjIgOC43MmEuNzUuNzUgMCAwIDAgMS4wNiAxLjA2bDUuMjItNS4yMnYxLjY5YS43NS43NSAwIDAgMCAxLjUgMHYtMy41YS43NS43NSAwIDAgMC0uNzUtLjc1aC0zLjVhLjc1Ljc1IDAgMCAwIDAgMS41aDEuNjlMNi4yMiA4LjcyWiIgLz4KICA8cGF0aCBkPSJNMy41IDYuNzVjMC0uNjkuNTYtMS4yNSAxLjI1LTEuMjVIN0EuNzUuNzUgMCAwIDAgNyA0SDQuNzVBMi43NSAyLjc1IDAgMCAwIDIgNi43NXY0LjVBMi43NSAyLjc1IDAgMCAwIDQuNzUgMTRoNC41QTIuNzUgMi43NSAwIDAgMCAxMiAxMS4yNVY5YS43NS43NSAwIDAgMC0xLjUgMHYyLjI1YzAgLjY5LS41NiAxLjI1LTEuMjUgMS4yNWgtNC41Yy0uNjkgMC0xLjI1LS41Ni0xLjI1LTEuMjV2LTQuNVoiIC8+Cjwvc3ZnPgo=");
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -6,3 +6,6 @@ import { application } from "./application"
 
 import ClipboardController from "./clipboard_controller"
 application.register("clipboard", ClipboardController)
+
+import NewTabLinksController from "./new_tab_links_controller"
+application.register("new-tab-links", NewTabLinksController)
diff --git a/app/javascript/controllers/new_tab_links_controller.js b/app/javascript/controllers/new_tab_links_controller.js
@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['container'];
+
+  connect() {
+    console.log("Links controller connect")
+    if (this.hasContainerTarget) {
+      this.containerTarget.querySelectorAll('a').forEach((link) => {
+        link.setAttribute('target', '_blank');
+        link.classList.add('external-link')
+      });
+    }
+  }
+}
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
@@ -14,8 +14,8 @@
 
     <div class="w-full md:w-1/2 my-8 pl-1">
       <h2 class="mb-2">Agenda</h2>
-      <div class="ml-4">
-        <div class="w-4/5 mt-2">
+      <div class="ml-4" data-controller="new-tab-links">
+        <div class="w-4/5 mt-2" data-new-tab-links-target="container">
           <%= event.description %>
         </div>
       </div>

diff --git a/app/views/layouts/common/_navigation.html.erb b/app/views/layouts/common/_navigation.html.erb
@@ -1,17 +1,22 @@
 <header class="flex flex-col content-center justify-center">
   <%= image_tag "logo-transparent.png", class: "mx-auto max-w-[16rem] h-auto" %>
-  <nav class="text-center grid grid-cols-2 gap-2 text-ruby sm:flex sm:flex-row sm:justify-center sm:gap-5">
-    <%= link_to 'Home', root_path %>
-    <%= link_to 'https://github.com/toronto-ruby/talks', class: 'flex gap-1 justify-center items-center' do %>
-      Propose a talk<svg class="stroke-ruby w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+  <nav
+    class="
+      text-center grid grid-cols-2 gap-2 text-ruby sm:flex sm:flex-row
+      sm:justify-center sm:gap-5
+    "
+  >
+    <%= link_to "Home", root_path %>
+    <%= link_to 'https://github.com/toronto-ruby/talks', class: 'external-link flex gap-1 justify-center items-center' do %>
+      Propose a talk
     <% end %>
-    <%= link_to 'About', about_path %>
-    <%= link_to 'Code of Conduct', code_of_conduct_path %>
-    <%= link_to 'Calendar', calendar_path %>
-    <%= link_to 'https://www.youtube.com/@TorontoRuby', class: 'flex gap-1 justify-center items-center' do %>
-      Youtube<svg class="stroke-ruby w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+    <%= link_to "About", about_path %>
+    <%= link_to "Code of Conduct", code_of_conduct_path %>
+    <%= link_to "Calendar", calendar_path %>
+    <%= link_to 'https://www.youtube.com/@TorontoRuby', class: 'external-link flex gap-1 justify-center items-center' do %>
+      Youtube
     <% end %>
-    <%= link_to 'Chat', chat_path %>
-    <%= link_to 'Past Events', past_events_path %>
+    <%= link_to "Chat", chat_path %>
+    <%= link_to "Past Events", past_events_path %>
   </nav>
 </header>