Merge pull request #145 from ChtiJS/fix/long_url

fix(ui): support long links
ChtiJS · Dec 5, 2023 · 68107a9 · 68107a9
2 parents 696f8ab + 1c20fbb
commit 68107a9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 62 deletions.
diff --git a/src/components/a.tsx b/src/components/a.tsx
@@ -21,67 +21,77 @@ const Anchor = ({
 } & LinkProps & {
     icon?: string;
     iconPosition?: 'first' | 'last';
-  } & Exclude<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>) => (
-  <Link
-    legacyBehavior
-    {...{
-      href,
-      as,
-      replace,
-      scroll,
-      shallow,
-      passHref,
-      prefetch,
-      locale,
-    }}
-  >
-    <a
-      className={`root${className ? ' ' + className : ''}${
-        icon ? ` ${iconPosition}` : ''
-      }`}
-      {...props}
-      target={href.startsWith('http') ? '_blank' : '_self'}
+  } & Exclude<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>) => {
+  const isURLLink =
+    href.length > 30 &&
+    children instanceof Array &&
+    typeof children[0] === 'string' &&
+    href === children[0];
+
+  return (
+    <Link
+      legacyBehavior
+      {...{
+        href,
+        as,
+        replace,
+        scroll,
+        shallow,
+        passHref,
+        prefetch,
+        locale,
+      }}
     >
-      {icon ? <span className="icon" /> : null}
-      {children}
-      <style jsx>{`
-        a,
-        a:visited {
-          color: #c1a008;
-          transition: color 0.1s linear;
-          text-decoration: none;
-        }
-        a:hover,
-        a:focus {
-          color: var(--primary);
-        }
-        a.first,
-        a.last {
-          display: inline-flex;
-          flex-direction: row;
-          gap: calc(var(--gutter) / 4);
-        }
-        a.first span.icon,
-        a.last span.icon {
-          display: flex;
-          height: var(--vRythm);
-          width: calc(var(--vRythm) * 0.55);
-          background: var(--primary);
-          mask-repeat: no-repeat;
-          mask-size: calc(var(--vRythm) * 0.55);
-          -webkit-mask-size: calc(var(--vRythm) * 0.55);
-          mask-position: left bottom;
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/arrow-left.svg');
-        }
-        a.last {
-          flex-direction: row-reverse;
-        }
-        a.last span.icon {
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/arrow-right.svg');
-        }
-      `}</style>
-    </a>
-  </Link>
-);
+      <a
+        className={`root${className ? ' ' + className : ''}${
+          icon ? ` ${iconPosition}` : ''
+        }`}
+        {...props}
+        target={href.startsWith('http') ? '_blank' : '_self'}
+      >
+        {icon ? <span className="icon" /> : null}
+        {isURLLink
+          ? [href.replace(/(http|ftp)s?:\/\//, '').slice(0, 15) + '…' + href.slice(-5)]
+          : children}
+        <style jsx>{`
+          a,
+          a:visited {
+            color: #c1a008;
+            transition: color 0.1s linear;
+            text-decoration: none;
+          }
+          a:hover,
+          a:focus {
+            color: var(--primary);
+          }
+          a.first,
+          a.last {
+            display: inline-flex;
+            flex-direction: row;
+            gap: calc(var(--gutter) / 4);
+          }
+          a.first span.icon,
+          a.last span.icon {
+            display: flex;
+            height: var(--vRythm);
+            width: calc(var(--vRythm) * 0.55);
+            background: var(--primary);
+            mask-repeat: no-repeat;
+            mask-size: calc(var(--vRythm) * 0.55);
+            -webkit-mask-size: calc(var(--vRythm) * 0.55);
+            mask-position: left bottom;
+            mask-image: url('${publicRuntimeConfig.basePath}/images/icons/arrow-left.svg');
+          }
+          a.last {
+            flex-direction: row-reverse;
+          }
+          a.last span.icon {
+            mask-image: url('${publicRuntimeConfig.basePath}/images/icons/arrow-right.svg');
+          }
+        `}</style>
+      </a>
+    </Link>
+  );
+};
 
 export default Anchor;
diff --git a/src/utils/markdown.tsx b/src/utils/markdown.tsx
@@ -182,7 +182,7 @@ const headingMap: NodeToElementMapper<MarkdownHeadingNode> = (
   );
 };
 const textMap: NodeToElementMapper<MarkdownTextNode> = (context, node) => (
-  <span key={context.index}>{fixText(node.value)}</span>
+  fixText(node.value)
 );
 const boldMap: NodeToElementMapper<MarkdownEmphasisNode> = (context, node) => (
   <Strong key={context.index}>