@ably/ui 8.9.0 → 9.0.0

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/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/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);
+  }
+}

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

@@ -0,0 +1,98 @@
+import hljs from "highlight.js/lib/core";
+
+// Map certain frameworks, protocols etc to available langauage packs
+const languageToHighlightKey = (lang) => {
+  let id;
+
+  if (!lang) {
+    lang = "text";
+  }
+
+  switch (lang.toLowerCase()) {
+    case "android":
+      id = "java";
+      break;
+
+    case ".net":
+    case "net":
+    case "dotnet":
+    case "csharp":
+    case "c#":
+      id = "cs";
+      break;
+
+    case "objc":
+    case "objective c":
+      id = "objectivec";
+      break;
+
+    case "laravel":
+      id = "php";
+      break;
+
+    case "flutter":
+      id = "dart";
+      break;
+
+    case "node.js":
+    case "js":
+      id = "javascript";
+      break;
+
+    case "ts":
+      id = "typescript";
+      break;
+
+    case "shell":
+    case "fh":
+    case "sh":
+      id = "bash";
+      break;
+
+    case "https":
+    case "http":
+    case "txt":
+    case "plaintext":
+      id = "text";
+      break;
+
+    case "cmd":
+    case "bat":
+      id = "dos";
+      break;
+
+    case "yml":
+      id = "yaml";
+      break;
+
+    case "erl":
+      id = "erlang";
+      break;
+
+    case "patch":
+      id = "diff";
+      break;
+
+    case "svg":
+      id = "xml";
+      break;
+
+    default:
+      break;
+  }
+
+  return id || lang;
+};
+
+const registerDefaultLanguages = (register) => {
+  register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
+};
+
+const highlightSnippet = (languageKeyword, snippet) => {
+  const language = languageToHighlightKey(languageKeyword);
+  if (typeof snippet !== "string" || !snippet || !language) return;
+
+  return hljs.highlight(snippet, { language }).value;
+};
+
+export { highlightSnippet, languageToHighlightKey, registerDefaultLanguages };

package/core/Meganav/component.js.LICENSE.txt

@@ -1,7 +0,0 @@
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */

package/core/MeganavSearchAutocomplete/component.js.LICENSE.txt

@@ -1,7 +0,0 @@
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */

package/core/Notice/component.js.LICENSE.txt

@@ -1,9 +0,0 @@
-/*!
- * JavaScript Cookie v2.2.1
- * https://github.com/js-cookie/js-cookie
- *
- * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
- * Released under the MIT license
- */
-
-/*! @license DOMPurify | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.2.2/LICENSE */