add libraries to home page

Author: davemooreuws

docs/index.mdx

@@ -18,7 +18,9 @@ It's what's missing between applications and infrastructure automation.
 
 Oh, and it supports basically any language, like JavaScript, TypeScript, Python, Go, you name it.
 
-<div className="">{/* <Libraries minimal /> */}</div>
+<div className="">
+  <Libraries minimal />
+</div>
 
 If you're familiar Nitric already, you might want to jump to the [Installation](/getting-started/installation), [Guides](/guides) or [Resources](/apis) sections. Otherwise, keep reading to learn more about Nitric.
 

src/components/Libraries.tsx

@@ -1,80 +1,111 @@
 import Image from 'next/image'
 
-import { Button } from '@/components/Button'
-import { Heading } from '@/components/ui/heading'
-import logoGo from '@/images/logos/go.svg'
 import logoNode from '@/images/logos/node.svg'
-import logoPhp from '@/images/logos/php.svg'
 import logoPython from '@/images/logos/python.svg'
-import logoRuby from '@/images/logos/ruby.svg'
+import logoCsharp from '@/images/logos/csharp.svg'
+import logoGo from '@/images/logos/go.svg'
+import logoJava from '@/images/logos/java.svg'
+import logoDart from '@/images/logos/dart.svg'
+import Link from 'next/link'
+import { ArrowRightIcon } from '@heroicons/react/24/outline'
+import { Heading } from './ui/heading'
 
 const libraries = [
   {
-    href: '#',
-    name: 'PHP',
-    description:
-      'A popular general-purpose scripting language that is especially suited to web development.',
-    logo: logoPhp,
-  },
-  {
-    href: '#',
-    name: 'Ruby',
-    description:
-      'A dynamic, open source programming language with a focus on simplicity and productivity.',
-    logo: logoRuby,
-  },
-  {
-    href: '#',
+    href: '/reference/nodejs',
     name: 'Node.js',
-    description:
-      'Node.js® is an open-source, cross-platform JavaScript runtime environment.',
+    description: 'View full API for Node.js',
     logo: logoNode,
   },
   {
-    href: '#',
+    href: '/reference/python',
     name: 'Python',
-    description:
-      'Python is a programming language that lets you work quickly and integrate systems more effectively.',
+    description: 'View full API for Python',
     logo: logoPython,
   },
   {
-    href: '#',
+    href: '/reference/go',
     name: 'Go',
-    description:
-      'An open-source programming language supported by Google with built-in concurrency.',
+    description: 'View full API for Go',
     logo: logoGo,
   },
+  {
+    href: '/reference/dart',
+    name: 'Dart',
+    description: 'View full API for Dart',
+    logo: logoDart,
+  },
+  {
+    href: '/reference/csharp/v0',
+    name: 'C# .NET',
+    description: 'View full API for C# .NET',
+    logo: logoCsharp,
+  },
+  {
+    href: '/reference/jvm/v0',
+    name: 'JVM',
+    description: 'View full API for JVM',
+    logo: logoJava,
+  },
 ]
 
-export function Libraries() {
+export interface LibrariesProps {
+  minimal?: boolean
+}
+
+export function Libraries({ minimal = false }: LibrariesProps) {
+  if (minimal) {
+    return (
+      <div className="flex h-fit w-fit items-center gap-2">
+        {libraries.map((library) => (
+          <Link
+            href={library.href}
+            key={library.name}
+            className="opacity-90 grayscale transition-opacity hover:opacity-100 hover:grayscale-0"
+            target="_blank"
+          >
+            <Image
+              src={library.logo}
+              alt={library.name + ' Logo'}
+              className="h-12 w-12"
+              unoptimized
+            />
+          </Link>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className="my-16 xl:max-w-none">
-      <Heading level={2} id="official-libraries">
-        Official libraries
+      <Heading level={2} id="libraries">
+        Libraries
       </Heading>
       <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3">
         {libraries.map((library) => (
-          <div key={library.name} className="flex flex-row-reverse gap-6">
+          <Link
+            href={library.href}
+            key={library.name}
+            className="group relative flex items-center gap-4 rounded-2xl bg-zinc-50 p-4 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
+          >
+            <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
+
+            <Image
+              src={library.logo}
+              alt={library.name + ' Logo'}
+              className="h-12 w-12"
+              unoptimized
+            />
             <div className="flex-auto">
-              <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
+              <h3 className="text-lg font-semibold text-zinc-900 dark:text-white">
                 {library.name}
               </h3>
               <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                 {library.description}
               </p>
-              <p className="mt-4">
-                <Button href={library.href} variant="text" arrow="right">
-                  Read more
-                </Button>
-              </p>
             </div>
-            <Image
-              src={library.logo}
-              alt=""
-              className="h-12 w-12"
-              unoptimized
-            />
-          </div>
+            <ArrowRightIcon className="h-5 w-5 -translate-x-1 transition-transform group-hover:translate-x-0" />
+          </Link>
         ))}
       </div>
     </div>

src/components/mdx.tsx

@@ -159,3 +159,5 @@ export { InstallNitric } from '@/components/InstallNitric'
 export { HomeHeader } from '@/components/HomeHeader'
 
 export { ShowIfLang } from '@/components/ShowIfLang'
+
+export { Libraries } from '@/components/Libraries'