feat: support provider url

src/Content/Embed/index.tsx

@@ -60,9 +60,14 @@ function Embed({ embed, images }: EmbedProps) {
     <Styles.Embed style={{ borderLeftColor: embedColor }} thin={isEmbedThin}>
       <Styles.ContentAndThumbnail hasLargeThumbnail={isThumbnailLarge}>
         <Styles.Content>
-          {embed.provider && (
-            <Styles.Provider>{embed.provider.name}</Styles.Provider>
-          )}
+          {embed.provider &&
+            (embed.provider.url ? (
+              <ExternalLink href={embed.provider.url}>
+                <Styles.Provider>{embed.provider.name}</Styles.Provider>
+              </ExternalLink>
+            ) : (
+              <Styles.Provider>{embed.provider.name}</Styles.Provider>
+            ))}
           {embed.author && (
             <Styles.Author>
               {embed.author.proxy_icon_url && (

src/ExternalLink.tsx → src/ExternalLink/index.tsx

@@ -1,15 +1,16 @@
-import type { HTMLProps } from "react";
+import type { ComponentProps } from "react";
 import React from "react";
-import { useConfig } from "./core/ConfigContext";
+import { useConfig } from "../core/ConfigContext";
+import * as Styles from "./style";
 
-function ExternalLink(
-  props: HTMLProps<HTMLAnchorElement> &
-    Required<Pick<HTMLProps<HTMLAnchorElement>, "href">>
-) {
+type Props = ComponentProps<typeof Styles.ExternalLink> &
+  Required<Pick<ComponentProps<typeof Styles.ExternalLink>, "href">>;
+
+function ExternalLink(props: Props) {
   const { externalLinkOpenRequested } = useConfig();
 
   return (
-    <a
+    <Styles.ExternalLink
       {...props}
       rel="noreferrer noopener"
       target="_blank"

src/ExternalLink/style.ts

@@ -0,0 +1,12 @@
+import { commonComponentId, styled } from "../Stitches/stitches.config";
+
+export const ExternalLink = styled.withConfig({
+  displayName: "external-link",
+  componentId: commonComponentId,
+})("a", {
+  textDecoration: "none",
+
+  "&:hover": {
+    textDecoration: "underline",
+  },
+});