Add support for external nav links

components/external-link.tsx

@@ -0,0 +1,12 @@
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { HTMLProps } from 'react';
+
+const ExternalLink = ({ children, ...props }: HTMLProps<HTMLAnchorElement>) => (
+  <a {...props} className="inline-flex items-center whitespace-nowrap">
+    {children}
+    <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="h-3 mb-1 ml-2" />
+  </a>
+);
+
+export default ExternalLink;

components/navigation.tsx

@@ -1,19 +1,22 @@
 import Link from 'next/link';
 import React from 'react';
 
+import ExternalLink from './external-link';
 const links = [
   <Link href="/#usage">Usage</Link>,
   <Link href="/news">News</Link>,
-  <Link href="https://highlightjs.readthedocs.io/">Docs</Link>,
   <Link href="/demo/">Demo</Link>,
   <Link href="/download/">Download</Link>,
-  <Link href="https://github.com/highlightjs/highlight.js">GitHub</Link>,
+  <ExternalLink href="https://highlightjs.readthedocs.io/">Docs</ExternalLink>,
+  <ExternalLink href="https://github.com/highlightjs/highlight.js">
+    GitHub
+  </ExternalLink>,
 ];
 
 export const Navigation = () => (
-  <header className="container py-12">
-    <nav className="md:grid grid-cols-3">
-      <div className="col-span-1 text-center sm:text-left mb-4 md:mb-0">
+  <header className="container py-8 md:py-12">
+    <nav className="md:flex items-center">
+      <div className="text-center sm:text-left mb-4 md:mb-0">
         <span className="text-4xl font-bold">
           <Link
             className="no-underline hover:text-cyan-300 focus:text-cyan-300"
@@ -23,12 +26,12 @@ export const Navigation = () => (
           </Link>
         </span>
       </div>
-      <div className="col-span-2 flex">
-        <ul className="m-auto pl-0 text-center sm:mr-0 sm:text-right">
+      <div className="ml-auto">
+        <ul className="flex flex-wrap gap-x-3 gap-y-1 justify-center pl-0">
           {links.map((link, i) => (
             <li
               key={i}
-              className="inline-block text-xl font-bold ml-4 first:ml-0"
+              className="text-xl font-bold"
             >
               {link}
             </li>