- update Links

jasonbahl · Apr 18, 2022 · a34e868 · a34e868 · vercel · Apr 18, 2022
1 parent 0f8df63
commit a34e868
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 127 deletions.
diff --git a/remix-run/app/styles/app.css b/remix-run/app/styles/app.css
diff --git a/remix-run/components/DocsNav/DocsNav.js b/remix-run/components/DocsNav/DocsNav.js
@@ -13,10 +13,8 @@ const getNav = () => {
             {children.map((child, i) => {
               return (
                 <li key={`${child.href}-${i}`}>
-                  <Link to={child.href}>
-                    <a className="block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
-                      {child.title}
-                    </a>
+                  <Link to={child.href} className="block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
+                    {child.title}
                   </Link>
                 </li>
               )

diff --git a/remix-run/components/HomepageCta/HomepageCta.js b/remix-run/components/HomepageCta/HomepageCta.js
@@ -1,3 +1,5 @@
+import { Link } from '@remix-run/react'
+
 /* This example requires Tailwind CSS v2.0+ */
 const HomepageCta = () => {
   return (
@@ -7,14 +9,15 @@ const HomepageCta = () => {
           <span className="block">Boost your productivity</span>
           <span className="block">Start using WPGraphQL today!</span>
         </h2>
-        <a
-          href="#"
+        <Link
+          to="/docs/introduction/"
           className="mt-8 bg-white dark:bg-slate-800 border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-sky-800 dark:text-sky-50 hover:bg-gray-100 dark:hover:bg-slate-600 hover:shadow-lg"
         >
           Get Started
-        </a>
+        </Link>
         <a
-          href="#"
+          href="https://wordpress.org/plugins/wp-graphql/"
+          target="_blank"
           className="mt-8 ml-8 bg-orange-500  border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-white hover:bg-orange-600 hover:shadow-lg"
         >
           Download the Plugin

diff --git a/remix-run/components/HomepageHero/HomepageHero.js b/remix-run/components/HomepageHero/HomepageHero.js
@@ -1,3 +1,5 @@
+import { Link } from '@remix-run/react'
+
 const HomepageHero = () => {
   return (
     <div className="bg-white dark:bg-slate-800">
@@ -12,14 +14,14 @@ const HomepageHero = () => {
                 WPGraphQL is a free, open-source WordPress plugin that provides an extendable
                 GraphQL schema and API for any WordPress site.
               </p>
-              <a
-                href="#"
+              <Link
+                to="/docs/introduction/"
                 className="mt-8 bg-white dark:bg-slate-800 border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-sky-800 dark:text-sky-50 hover:bg-gray-100 dark:hover:bg-slate-900 hover:shadow-lg"
               >
                 Get Started
-              </a>
+              </Link>
               <a
-                href="#"
+                href="https://wordpress.org/plugins/wp-graphql/"
                 className="mt-8 ml-8 bg-orange-500  border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-white hover:bg-orange-600 hover:shadow-lg"
               >
                 Download the Plugin

diff --git a/remix-run/components/PostPreview/PostPreview.js b/remix-run/components/PostPreview/PostPreview.js
@@ -55,16 +55,14 @@ const PostPreview = ({ post }) => {
         <div className="space-y-6">
           <div>
             <h2 className="text-2xl font-bold leading-8 tracking-tight">
-              <Link to={post.uri}>
-                <a className="text-gray-900 dark:text-gray-100">{post.title}</a>
+              <Link to={post.uri} className="text-gray-900 dark:text-gray-100">
+                {post.title}
               </Link>
             </h2>
             <div className="flex flex-wrap">
               {post?.categories?.nodes?.map((category, i) => (
-                <Link key={i} to={category.uri}>
-                  <a className="mr-3 text-sm font-medium uppercase text-sky-500 dark:text-sky-300 hover:text-primary-600 dark:hover:text-sky-400">
-                    {category.name}
-                  </a>
+                <Link key={i} to={category.uri} className="mr-3 text-sm font-medium uppercase text-sky-500 dark:text-sky-300 hover:text-primary-600 dark:hover:text-sky-400">
+                  {category.name}
                 </Link>
               ))}
             </div>
@@ -75,68 +73,13 @@ const PostPreview = ({ post }) => {
           />
         </div>
         <div className="text-base font-medium leading-6">
-          <Link to={post.uri}>
-            <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
+          <Link to={post.uri} className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
               Read more →
-            </a>
           </Link>
         </div>
       </div>
     </article>
 
-    // <article>
-    //   <div className="block mt-4">
-    //     <Link to={post.uri}>
-    //         <a className="inline-block">
-    //             <h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100">{post.title}</h3>
-    //         </a>
-    //     </Link>
-    //     <div
-    //       className="mt-3 text-base text-gray-500 dark:text-gray-50 prose dark:prose-invert"
-    //       dangerouslySetInnerHTML={{ __html: excerpt }}
-    //     />
-    //     <Link to={post.uri}>
-    //         <a className='bg-indigo-700 text-white rounded-md shadow-md p-2 mt-4 mb-8 inline-block'>Read More</a>
-    //     </Link>
-    //   </div>
-    //   <div className='border-t-1 border-t-slate-100'>
-    //       {post?.categories?.nodes?.map((category, i) => (
-    //         <Link to={category.uri} key={i}>
-    //             <a className="inline-block">
-    //             <span
-    //                 className={clsx(
-    //                 'bg-indigo-100 mr-1 text-indigo-800 inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium'
-    //                 )}
-    //             >
-    //                 {category.name}
-    //             </span>
-    //             </a>
-    //         </Link>
-    //       ))}
-    //   </div>
-    //   <div className="-mx-6 px-6 mt-6 -mb-6 p-6 rounded-b-md bg-slate-50 dark:bg-slate-800 flex items-center">
-    //     <div className="flex-shrink-0">
-    //       <a href={post.author.href}>
-    //         <span className="sr-only dark:text-slate-100">{post.author.node.name}</span>
-    //         <img
-    //           className="h-10 w-10 rounded-full"
-    //           src={post?.author?.node?.avatar?.url}
-    //           alt=""
-    //           width={54}
-    //           height={54}
-    //         />
-    //       </a>
-    //     </div>
-    //     <div className="ml-3">
-    //       <p className="text-sm font-medium text-gray-900 dark:text-slate-100">
-    //         <a href={post.author.href}>{post.author.node.name}</a>
-    //       </p>
-    //       <div className="flex space-x-1 text-sm text-gray-500 dark:text-sky-200">
-    //         <time dateTime={post.date}>{post.date}</time>
-    //       </div>
-    //     </div>
-    //   </div>
-    // </article>
   )
 }
 

diff --git a/remix-run/components/SiteFooter/SiteFooter.js b/remix-run/components/SiteFooter/SiteFooter.js
@@ -43,14 +43,14 @@ export default function Example() {
       <div className="max-w-7xl mx-auto pt-10 pb-28 border-t border-slate-200 sm:flex justify-between text-slate-500 dark:border-slate-200/5">
         <div className="flex justify-center space-x-6 md:order-2">
           {navigation.map((item) => (
-            <a
+            <Link
               key={item.name}
-              href={item.href}
+              to={item.href}
               className="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100"
             >
               <span className="sr-only">{item.name}</span>
               <item.icon className="h-6 w-6" aria-hidden="true" />
-            </a>
+            </Link>
           ))}
         </div>
         <div className="mt-8 md:mt-0 md:order-1 prose dark:prose-invert">

diff --git a/remix-run/components/SiteHeader/SiteHeader.js b/remix-run/components/SiteHeader/SiteHeader.js
@@ -34,24 +34,6 @@ const docs = [
     icon: 'ShieldCheckIcon',
   },
 ]
-const resources = [
-  {
-    name: 'Help Center',
-    description: 'Get all of your questions answered in our forums or contact support.',
-    href: '#',
-  },
-  {
-    name: 'Guides',
-    description: 'Learn how to maximize our platform to get the most out of it.',
-    href: '#',
-  },
-  {
-    name: 'Events',
-    description: 'See what meet-ups and other events we might be planning near you.',
-    href: '#',
-  },
-  { name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
-]
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
@@ -81,12 +63,10 @@ const SiteHeader = () => {
       <div className="max-w-8xl mx-auto flex justify-between items-center px-4 py-4 sm:px-6 md:justify-start md:space-x-10">
         <div className="flex justify-start lg:w-0 lg:flex-1">
           <Link to="/">
-            <a>
-              <span className="sr-only">WPGraphQL</span>
-              <div className="h-8 w-auto sm:h-10">
-                <SiteLogo />
-              </div>
-            </a>
+            <span className="sr-only">WPGraphQL</span>
+            <div className="h-8 w-auto sm:h-10">
+              <SiteLogo />
+            </div>
           </Link>
         </div>
         <div className="-mr-2 -my-2 md:hidden">
@@ -128,9 +108,9 @@ const SiteHeader = () => {
                     <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                       <div className="relative grid gap-6 bg-white dark:bg-slate-700 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
                         {docs.map((solution) => (
-                          <a
+                          <Link
                             key={solution.name}
-                            href={solution.href}
+                            to={solution.href}
                             className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600"
                           >
                             <div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@@ -148,12 +128,12 @@ const SiteHeader = () => {
                                 {solution.description}
                               </p>
                             </div>
-                          </a>
+                          </Link>
                         ))}
                       </div>
                       <div className="p-5 bg-gray-100 sm:p-8 dark:bg-slate-800">
-                        <a
-                          href="#"
+                        <Link
+                          to="/docs/contributing/"
                           className="-m-3 p-3 flow-root rounded-md hover:bg-gray-200 dark:hover:bg-gray-700"
                         >
                           <div className="flex items-center">
@@ -164,28 +144,22 @@ const SiteHeader = () => {
                           <p className="mt-1 text-sm text-gray-500 dark:text-gray-200">
                             Help make WPGraphQL better for everyone.
                           </p>
-                        </a>
+                        </Link>
                       </div>
                     </div>
                   </Popover.Panel>
                 </Transition>
               </>
             )}
           </Popover>
-          <Link to="/developer-reference">
-            <a className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
-              Developer Reference
-            </a>
+          <Link to="/developer-reference" className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
+            Developer Reference
           </Link>
-          <Link to="/extensions">
-            <a className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
-              Extensions
-            </a>
+          <Link to="/extensions" className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
+            Extensions
           </Link>
-          <Link to="/blog">
-            <a className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
-              Blog
-            </a>
+          <Link to="/blog" className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300">
+            Blog
           </Link>
         </Popover.Group>
         <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
@@ -211,9 +185,7 @@ const SiteHeader = () => {
               <div className="flex items-center justify-between">
                 <div className="h-8 w-auto">
                   <Link to="/">
-                    <a>
-                      <SiteLogo />
-                    </a>
+                    <SiteLogo />
                   </Link>
                 </div>
                 <div className="-mr-2">

diff --git a/remix-run/components/TableOfContents/TableOfContents.js b/remix-run/components/TableOfContents/TableOfContents.js
@@ -14,10 +14,8 @@ const TableOfContents = ({ toc }) => {
       <ul className="text-slate-700 text-sm leading-6">
         {toc.map((item, index) => (
           <li key={index} className={item.tagName === 'h3' ? 'ml-3' : ''}>
-            <Link to={`#${item.id}`}>
-              <a className="block py-1 font-medium hover:text-sky-500 dark:text-slate-400 dark:hover:text-sky-300">
-                {item.title}
-              </a>
+            <Link to={`#${item.id}`} className="block py-1 font-medium hover:text-sky-500 dark:text-slate-400 dark:hover:text-sky-300">
+              {item.title}
             </Link>
           </li>
         ))}