@ably/ui 8.7.0-dev.6ce15a7 → 8.7.0-dev.80c4fae

package/src/core/DropdownMenu/component.jsx

@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import T from "prop-types";
+import Icon from "../Icon/component.jsx";
+
+const DropdownMenuContext = createContext();
+
+const DropdownMenu = ({ children }) => {
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const clickHandler = (e) => {
+      if (ref?.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("click", clickHandler);
+
+    return () => {
+      document.removeEventListener("click", clickHandler);
+    };
+  }, []);
+
+  return (
+    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>
+      <div id="dropdown-menu" className="relative" ref={ref}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+};
+
+DropdownMenu.propTypes = {
+  children: T.node,
+};
+
+const Trigger = ({ children, additionalTriggerCSS = "" }) => {
+  const { isOpen, setOpen } = useContext(DropdownMenuContext);
+
+  return (
+    <button
+      id="menu-trigger"
+      onClick={() => setOpen(!isOpen)}
+      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}
+    >
+      <span className="leading-normal">{children}</span>
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-cool-black"
+        size="1.25rem"
+        additionalCSS="transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+      />
+    </button>
+  );
+};
+
+Trigger.propTypes = {
+  children: T.node,
+  additionalTriggerCSS: T.string,
+};
+
+const Content = ({ children, anchorPosition = "right", additionalContentCSS }) => {
+  const { isOpen } = useContext(DropdownMenuContext);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const anchorPositionClasses = anchorPosition === "right" ? "right-0" : "left-0";
+
+  return (
+    <div
+      id="menu-content"
+      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}
+      style={{ minWidth: 275, top: 44 }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Content.propTypes = {
+  children: T.node,
+  anchorPosition: T.string,
+  additionalContentCSS: T.string,
+};
+
+const Link = ({ url, title, subtitle, iconName, children }) => {
+  return (
+    <a href={url} className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded">
+      <p className="mb-4">
+        {title}
+        {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
+      </p>
+      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {children}
+    </a>
+  );
+};
+
+Link.propTypes = {
+  url: T.string,
+  title: T.string,
+  subtitle: T.string,
+  iconName: T.string,
+  children: T.node,
+};
+
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Link = Link;
+export default DropdownMenu;

package/src/core/FeatureFooter/component.html.erb

@@ -46,7 +46,7 @@
           </ul>
         </span>
         <span class="flex-0">
-          <%= link_to 'Start with a free account', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
+          <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
         </span>
       </div>
     </div>

package/src/core/Flash/component.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
 import T from "prop-types";
+import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
@@ -50,30 +51,45 @@ const FLASH_TEXT_COLOR = {
 const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
-const Flash = ({ type, content }) => {
-  const ref = useRef(null);
-  const [closed, setClosed] = useState(false);
-  const [flashHeight, setFlashHeight] = useState(0);
-  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
+const useAutoHide = (type, closeFlash) => {
+  const timeoutId = useRef(null);
 
-  useEffect(() => setTriggerEntryAnimation(true), []);
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
-      setTimeout(() => {
-        // closeFlash is idempotent, we can call it even if the flash has been already closed
+      timeoutId.current = setTimeout(() => {
         closeFlash();
       }, AUTO_HIDE_TIME);
     }
-  }, [closed]);
+
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+};
+
+const Flash = ({ id, type, content, removeFlash }) => {
+  const ref = useRef(null);
+  const [closed, setClosed] = useState(false);
+  const [flashHeight, setFlashHeight] = useState(0);
+  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
 
   const closeFlash = () => {
     if (ref.current) {
       setFlashHeight(ref.current.getBoundingClientRect().height);
     }
 
-    setTimeout(() => setClosed(true), 0);
+    setClosed(true);
+
+    setTimeout(() => {
+      removeFlash(id);
+    }, 100);
   };
 
+  useEffect(() => setTriggerEntryAnimation(true), []);
+  useAutoHide(type, closeFlash);
+
   const animateEntry = triggerEntryAnimation && !closed;
 
   let style;
@@ -123,13 +139,25 @@ Flash.propTypes = {
 };
 
 const Flashes = ({ flashes }) => {
-  const items = flashes?.items || [];
+  const [flashesWithIds, setFlashesWithIds] = useState([]);
+
+  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+
+  useEffect(() => {
+    setFlashesWithIds((state) => {
+      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+    });
+  }, [flashes]);
+
+  console.log({ flashesWithIds });
 
   return (
     <div className="ui-flash" data-id={FLASH_DATA_ID}>
-      {items.map((flash) => (
-        <Flash key={flash.type} {...flash} />
-      ))}
+      {flashesWithIds
+        .filter((item) => !item.removed)
+        .map((flash) => (
+          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+        ))}
     </div>
   );
 };

package/src/core/Logo/component.html.erb

@@ -1,28 +1,3 @@
-<%= link_to logo_href, class: 'h-32' do %>
-  <%= tag.svg class: ["transition-colors", "text-cool-black"], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
-    <path
-      d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-      fill="currentColor"
-    />
-    <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#<%= gradient_id_0 %>)" />
-    <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#<%= gradient_id_1 %>)" />
-    <defs>
-      <linearGradient id="<%= gradient_id_0 %>" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF5416" />
-        <stop offset="0.2535" stop-color="#FF5115" />
-        <stop offset="0.461" stop-color="#FF4712" />
-        <stop offset="0.6523" stop-color="#FF350E" />
-        <stop offset="0.8327" stop-color="#FF1E08" />
-        <stop offset="1" stop-color="#FF0000" />
-      </linearGradient>
-      <linearGradient id="<%= gradient_id_1 %>" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF5416" />
-        <stop offset="0.2535" stop-color="#FF5115" />
-        <stop offset="0.461" stop-color="#FF4712" />
-        <stop offset="0.6523" stop-color="#FF350E" />
-        <stop offset="0.8327" stop-color="#FF1E08" />
-        <stop offset="1" stop-color="#FF0000" />
-      </linearGradient>
-    </defs>
-  <% end %>
+<%= link_to logo_href, class: 'block', style: "height: 2.125rem", data: { id: data_id }, **additional_link_attrs do %>
+  <%= tag.img src: logo_url, width: "108px", alt: "Ably logo", **additional_img_attrs %>
 <% end %>

package/src/core/Logo/component.jsx

@@ -1,46 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import T from "prop-types";
-import { nanoid } from "nanoid/non-secure";
-
-const Logo = ({ dataId, href = "/" }) => {
-  // This fixes a bug where if the logo is rendered more than once on the page, and one of the instances
-  // if it is hidden, the other instance will not show the ably shape from the logo.
-
-  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
-  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
-  const gradientIds = useMemo(() => [nanoid(), nanoid()], []);
 
+const Logo = ({ dataId, logoUrl, href = "/", additionalImgAttrs, additionalLinkAttrs }) => {
   return (
-    <a href={href} className="h-32">
-      <svg data-id={dataId} className="text-cool-black transition-colors" width="108" height="32" viewBox="0 0 108 32" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-          fill="currentColor"
-        />
-        <path
-          d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z"
-          fill={`url(#${gradientIds[0]})`}
-        />
-        <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill={`url(#${gradientIds[1]})`} />
-        <defs>
-          <linearGradient id={gradientIds[0]} x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-          <linearGradient id={gradientIds[1]} x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-        </defs>
-      </svg>
+    <a href={href} data-id={dataId} className="block" style={{ height: "2.125rem" }} {...additionalLinkAttrs}>
+      <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
     </a>
   );
 };
@@ -48,6 +12,9 @@ const Logo = ({ dataId, href = "/" }) => {
 Logo.propTypes = {
   dataId: T.string,
   href: T.string,
+  logoUrl: T.string,
+  additionalImgAttrs: T.object,
+  additionalLinkAttrs: T.object,
 };
 
 export default React.memo(Logo);

package/src/core/Logo/component.rb

@@ -5,13 +5,14 @@ module AblyUi
     class Logo < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
 
-      attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
+      attr_reader :href, :logo_url, :data_id, :additional_img_attrs, :additional_link_attrs
 
-      def initialize(data_id: '', href:)
+      def initialize(href:, logo_url:, data_id: '', additional_img_attrs: {}, additional_link_attrs: {})
         @data_id = data_id
         @href = href
-        @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
-        @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
+        @logo_url = logo_url
+        @additional_img_attrs = additional_img_attrs
+        @additional_link_attrs = additional_link_attrs
       end
 
       def logo_href

package/src/core/Meganav/component.html.erb

@@ -3,7 +3,7 @@
 
   <div class="ui-meganav ui-grid-px">
     <div className="mr-24">
-      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
     </div>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 

package/src/core/Meganav/component.jsx

@@ -86,7 +86,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
         <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} />
+          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
         </div>
 
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />

package/src/core/Meganav/component.rb

@@ -6,6 +6,7 @@ module AblyUi
     class Meganav < ViewComponent::Base
       include MeganavConfig
       include Util
+      include SharedAssets
       attr_reader :options, :login_link, :logo_link, :url_base
 
       renders_one :notice, AblyUi::Core::Notice

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -56,6 +56,15 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Integrations</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 

package/src/core/MeganavContentDevelopers/component.jsx

@@ -62,6 +62,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-integrations-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Integrations</p>
+                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 

package/src/core/MeganavContentUseCases/component.html.erb

@@ -58,7 +58,7 @@
         </li>
         <li>
           <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Fintech</p>
+            <p class="ui-meganav-media-heading">FinTech</p>
             <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
           <% end %>
         </li>

package/src/core/MeganavContentUseCases/component.jsx

@@ -64,7 +64,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Fintech</p>
+              <p className="ui-meganav-media-heading">FinTech</p>
               <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
             </a>
           </li>

package/src/core/MeganavSearchSuggestions/component.html.erb

@@ -12,7 +12,7 @@
       <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 pl-8 flex-shrink-0">
-      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+      <%= link_to 'Platform', abs_url("/platform"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
   </ul>
 

package/src/core/core.rb

@@ -30,6 +30,10 @@ module AblyUi
     end
 
     module SharedAssets
+      def ably_logo
+        asset_path 'ably_ui/core/images/ably-logo.png'
+      end
+
       def ably_stack_path
         asset_path 'ably_ui/core/images/ably-stack.svg'
       end

package/src/core/icons/github.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.4 0 0 5.41945 0 12.0432C0 17.3623 3.4 21.8785 8.2 23.4843C8.8 23.5846 9 23.1832 9 22.8821C9 22.581 9 21.8785 9 20.8749C5.7 21.5774 5 19.2692 5 19.2692C4.5 17.8641 3.7 17.4627 3.7 17.4627C2.6 16.7601 3.8 16.7602 3.8 16.7602C5 16.8605 5.6 17.9645 5.6 17.9645C6.7 19.771 8.4 19.2692 9.1 18.9681C9.2 18.1652 9.5 17.6634 9.9 17.3623C7.1 17.0612 4.3 16.0576 4.3 11.4411C4.3 10.1364 4.8 9.03242 5.5 8.22953C5.5 7.82809 5 6.62377 5.7 5.01801C5.7 5.01801 6.7 4.71693 9 6.22233C10 5.92125 11 5.82089 12 5.82089C13 5.82089 14 5.92125 15 6.22233C17.3 4.71693 18.3 5.01801 18.3 5.01801C19 6.72413 18.5 7.92845 18.4 8.22953C19.2 9.03242 19.6 10.1364 19.6 11.4411C19.6 16.0576 16.8 17.0612 14.1 17.3623C14.5 17.7638 14.9 18.4663 14.9 19.5702C14.9 21.176 14.9 22.4807 14.9 22.8821C14.9 23.1832 15.1 23.5846 15.7 23.4843C20.6 21.8785 24 17.3623 24 12.0432C24 5.41945 18.6 0 12 0Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.4 0 0 5.41945 0 12.0432C0 17.3623 3.4 21.8785 8.2 23.4843C8.8 23.5846 9 23.1832 9 22.8821C9 22.581 9 21.8785 9 20.8749C5.7 21.5774 5 19.2692 5 19.2692C4.5 17.8641 3.7 17.4627 3.7 17.4627C2.6 16.7601 3.8 16.7602 3.8 16.7602C5 16.8605 5.6 17.9645 5.6 17.9645C6.7 19.771 8.4 19.2692 9.1 18.9681C9.2 18.1652 9.5 17.6634 9.9 17.3623C7.1 17.0612 4.3 16.0576 4.3 11.4411C4.3 10.1364 4.8 9.03242 5.5 8.22953C5.5 7.82809 5 6.62377 5.7 5.01801C5.7 5.01801 6.7 4.71693 9 6.22233C10 5.92125 11 5.82089 12 5.82089C13 5.82089 14 5.92125 15 6.22233C17.3 4.71693 18.3 5.01801 18.3 5.01801C19 6.72413 18.5 7.92845 18.4 8.22953C19.2 9.03242 19.6 10.1364 19.6 11.4411C19.6 16.0576 16.8 17.0612 14.1 17.3623C14.5 17.7638 14.9 18.4663 14.9 19.5702C14.9 21.176 14.9 22.4807 14.9 22.8821C14.9 23.1832 15.1 23.5846 15.7 23.4843C20.6 21.8785 24 17.3623 24 12.0432C24 5.41945 18.6 0 12 0Z" fill="currentColor" />
 </svg>

package/src/core/icons/google.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.6483 7.36875H9.1803V10.8492H14.0178C13.8092 11.9742 13.1764 12.9258 12.2225 13.5633C11.4162 14.1023 10.3873 14.4211 9.17795 14.4211C6.83655 14.4211 4.85608 12.8391 4.14827 10.7133C3.97014 10.1742 3.86702 9.59766 3.86702 9.00469C3.86702 8.41172 3.97014 7.83516 4.14827 7.29609C4.85842 5.17266 6.83889 3.59063 9.1803 3.59063C10.4998 3.59063 11.6834 4.04531 12.6162 4.93594L15.1944 2.35547C13.6358 0.902344 11.6037 0.0117188 9.1803 0.0117188C5.66702 0.0117188 2.62717 2.02734 1.14827 4.96641C0.538892 6.18047 0.192017 7.55391 0.192017 9.00703C0.192017 10.4602 0.538892 11.8312 1.14827 13.0453C2.62717 15.9844 5.66702 18 9.1803 18C11.6084 18 13.6428 17.1938 15.1287 15.8203C16.828 14.2547 17.81 11.9484 17.81 9.20859C17.81 8.57109 17.7537 7.95937 17.6483 7.36875Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-display-integrations-col.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.69985 7.70029C3.40409 11.9961 3.18585 18.7426 7.21241 22.7692L11.9425 27.4993L27.4988 11.9429L22.7688 7.21285C18.7422 3.18629 11.9956 3.40453 7.69985 7.70029Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M45.2129 45.2131L42.3844 42.3847" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.4514 40.451C35.8956 45.0068 28.6731 45.2897 24.3219 40.9385L19.5918 36.2084C19.2989 35.9155 19.2989 35.4406 19.5918 35.1477L35.1482 19.5914C35.441 19.2985 35.9159 19.2985 36.2088 19.5914L40.9389 24.3215C45.2902 28.6727 45.0073 35.8952 40.4514 40.451Z" fill="#FF5416"/>
+<path d="M2.78647 2.78662L7.73622 7.73637" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.2925 16.2217L28.2423 21.1714" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.2215 23.2927L21.1712 28.2425" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/core/icons/stackoverflow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="currentColor"/>
+</svg>

package/src/core/icons/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1509_18255)">
+    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="currentColor"/>
+    <path d="M20.5892 11.0021L12.4766 6.2915V15.7128L20.5892 11.0021Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1509_18255">
+      <rect width="31.1667" height="22" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/core/styles/properties.css

@@ -47,6 +47,8 @@
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
     --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,

package/src/core/utils/syntax-highlighter-registry.js

@@ -0,0 +1,61 @@
+// This file can be used in the browser, but because of the weight of all the language
+// definitions, preferably it should be used on the server.
+
+import bash from "highlight.js/lib/languages/bash";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import css from "highlight.js/lib/languages/css";
+import dart from "highlight.js/lib/languages/dart";
+import dos from "highlight.js/lib/languages/dos";
+import diff from "highlight.js/lib/languages/diff";
+import erlang from "highlight.js/lib/languages/erlang";
+import elixir from "highlight.js/lib/languages/elixir";
+import plaintext from "highlight.js/lib/languages/plaintext";
+import go from "highlight.js/lib/languages/go";
+import http from "highlight.js/lib/languages/http";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import json from "highlight.js/lib/languages/json";
+import objectivec from "highlight.js/lib/languages/objectivec";
+import php from "highlight.js/lib/languages/php";
+import python from "highlight.js/lib/languages/python";
+import ruby from "highlight.js/lib/languages/ruby";
+import swift from "highlight.js/lib/languages/swift";
+import sql from "highlight.js/lib/languages/sql";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import curl from "highlightjs-curl/src/languages/curl";
+
+const registry = [
+  { label: "Text", key: "text", module: plaintext },
+  { label: "JS", key: "javascript", module: javascript },
+  { label: "TS", key: "typescript", module: typescript },
+  { label: "Java", key: "java", module: java },
+  { label: "Ruby", key: "ruby", module: ruby },
+  { label: "Python", key: "python", module: python },
+  { label: "PHP", key: "php", module: php },
+  { label: "Shell", key: "bash", module: bash },
+  { label: "C#", key: "cs", module: csharp },
+  { label: "CSS", key: "css", module: css },
+  { label: "Go", key: "go", module: go },
+  { label: "HTML", key: "xml", module: xml },
+  { label: "HTTP", key: "http", module: http },
+  { label: "C++", key: "cpp", module: cpp },
+  { label: "Dart", key: "dart", module: dart },
+  { label: "Swift", key: "swift", module: swift },
+  { label: "Objective C", key: "objectivec", module: objectivec },
+  { label: "Node.js", key: "javascript", module: javascript },
+  { label: "JSON", key: "json", module: json },
+  { label: "DOS", key: "dos", module: dos },
+  { label: "YAML", key: "yaml", module: yaml },
+  { label: "Erlang", key: "erlang", module: erlang },
+  { label: "Elixir", key: "elixir", module: elixir },
+  { label: "Diff", key: "diff", module: diff },
+  { label: "SQL", key: "sql", module: sql },
+  { label: "cURL", key: "curl", module: curl },
+  { label: "HTML", key: "html", module: xml },
+  { label: "XML", key: "xml", module: xml },
+];
+
+export default registry;

package/src/core/utils/syntax-highlighter.css

@@ -0,0 +1,69 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+}
+
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
+
+  .hljs-emphasis {
+    @apply italic;
+  }
+
+  .hljs-strong {
+    @apply font-bold;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
+
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
+
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
+
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
+
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
+
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
+}