Logo brand assets (#27319)

* logo brand context menu setup

* use dropdown menu

* more compact dropdown

* improve a11y

* better names

* use hero icons

apps/www/components/Nav/RightClickBrandLogo.tsx

@@ -0,0 +1,315 @@
+import React, { Fragment, MouseEvent, ReactNode, useRef, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useClickAway, useKey } from 'react-use'
+import { CheckIcon, ClipboardIcon } from '@heroicons/react/outline'
+import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+
+import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
+import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
+
+/**
+ * Right click on the Supabase logo in the website navbar
+ * for quick access to brand assets.
+ */
+const RightClickBrandLogo = () => {
+  const ref = useRef(null)
+  const router = useRouter()
+  const [open, setOpen] = useState<boolean>(false)
+  const [copied, setCopied] = useState<boolean>(false)
+
+  /**
+   * Close dropdown by clicking outside
+   */
+  useClickAway(ref, () => {
+    setOpen(false)
+  })
+
+  /**
+   * Close dropdown by using the Escape key
+   */
+  useKey('Escape', () => setOpen(false))
+
+  /**
+   * Open dropdown by right clicking on the Supabase logo
+   */
+  const handleRightClick = (e: MouseEvent) => {
+    e.preventDefault()
+
+    if (e.type === 'contextmenu' || e.nativeEvent.button === 2) {
+      setOpen(true)
+    }
+  }
+
+  /**
+   * A11y open dropdown by typing Shift+Enter when the logo is focused
+   */
+  const handleKeyboardOpen = () => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.shiftKey && e.key === 'Enter') {
+        setOpen(true)
+      }
+    }
+
+    document?.addEventListener('keydown', onKeyDown)
+    return () => {
+      document?.removeEventListener('keydown', onKeyDown)
+    }
+  }
+
+  /**
+   * Copy to clipboard logo SVG
+   */
+  const handleCopyToClipboard = (menuItem: MenuItemProps) => {
+    navigator.clipboard.writeText(menuItem.clipboard ?? '').then(() => {
+      setCopied(true)
+      setTimeout(() => {
+        setCopied(false)
+      }, 2000)
+    })
+  }
+
+  return (
+    <DropdownMenu open={open}>
+      <DropdownMenuTrigger asChild>
+        <Link
+          href="/"
+          onContextMenu={handleRightClick}
+          onFocus={handleKeyboardOpen}
+          onKeyDown={(e) => e.key === 'Enter' && router.push('/')}
+          className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
+        >
+          <Image
+            src={supabaseLogoWordmarkLight}
+            width={124}
+            height={24}
+            alt="Supabase Logo"
+            className="dark:hidden"
+            priority
+          />
+          <Image
+            src={supabaseLogoWordmarkDark}
+            width={124}
+            height={24}
+            alt="Supabase Logo"
+            className="hidden dark:block"
+            priority
+          />
+        </Link>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        autoFocus
+        ref={ref}
+        align="start"
+        side="bottom"
+        className="mt-2 p-0 w-52"
+      >
+        {menuItems.map((section, sectionIdx) => (
+          <Fragment key={`cxtMenu-section-${sectionIdx}`}>
+            {sectionIdx !== 0 && <DropdownSeperator />}
+            <div className="p-1">
+              {section.map((menuItem, i) => (
+                <DropdownMenuItem
+                  autoFocus
+                  asChild
+                  key={menuItem.label}
+                  className="w-full flex justify-between gap-2 items-center !p-2"
+                >
+                  {menuItem.type === 'download' || menuItem.type === 'link' ? (
+                    <Link
+                      href={menuItem.href ?? ''}
+                      download={menuItem.type === 'download'}
+                      className="group/menu-item w-full text-left flex justify-between gap-2 items-center"
+                    >
+                      <MenuItemContent {...menuItem} />
+                    </Link>
+                  ) : (
+                    menuItem.type === 'clipboard' && (
+                      <button
+                        className="group/menu-item w-full text-left flex justify-between gap-2 items-center"
+                        onClick={() => handleCopyToClipboard(menuItem)}
+                      >
+                        <MenuItemContent copied={copied} {...menuItem} />
+                      </button>
+                    )
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </div>
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const DropdownSeperator = () => <div className="h-px w-full bg-border" />
+
+interface MenuItemProps {
+  label: string
+  type: 'clipboard' | 'download' | 'link'
+  icon?: ReactNode
+  href?: string
+  clipboard?: string
+}
+
+/**
+ * Brand assets dropdown menu items.
+ * First array is to divide the menu by sections;
+ * Second array is the list of items inside each section.
+ */
+const menuItems: MenuItemProps[][] = [
+  [
+    {
+      label: 'Copy logo as SVG',
+      type: 'clipboard',
+      icon: (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.95127 2.53536C7.94394 2.04707 7.3269 1.83752 7.02259 2.21997L2.43035 7.99124C1.88831 8.67243 2.37446 9.67704 3.24613 9.67704H7.99525L8.05109 13.3962C8.05842 13.8844 8.67544 14.094 8.97976 13.7116L13.572 7.94026C14.114 7.25907 13.6279 6.25446 12.7562 6.25446H7.97574L7.95127 2.53536Z"
+            fill="currentColor"
+          />
+        </svg>
+      ),
+      clipboard: `<svg width="109" height="113" viewBox="0 0 109 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z" fill="url(#paint0_linear)"/>
+<path d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z" fill="url(#paint1_linear)" fill-opacity="0.2"/>
+<path d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z" fill="#3ECF8E"/>
+<defs>
+<linearGradient id="paint0_linear" x1="53.9738" y1="54.974" x2="94.1635" y2="71.8295" gradientUnits="userSpaceOnUse">
+<stop stop-color="#249361"/>
+<stop offset="1" stop-color="#3ECF8E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="36.1558" y1="30.578" x2="54.4844" y2="65.0806" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
+`,
+    },
+    {
+      label: 'Download wordmark',
+      type: 'download',
+      icon: (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M4.66669 6.66675L8.00002 10.0001L11.3334 6.66675"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8 10V2"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      href: '/supabase-wordmark.zip',
+    },
+    {
+      label: 'Download brand assets',
+      type: 'download',
+      href: '/brand-assets.zip',
+      icon: (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M4.66669 6.66675L8.00002 10.0001L11.3334 6.66675"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8 10V2"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+    },
+  ],
+  [
+    {
+      label: 'Brand Assets',
+      type: 'link',
+      href: '/brand-assets',
+    },
+  ],
+]
+
+interface MenuItemContentProps {
+  icon?: ReactNode
+  type: string
+  label: string
+  copied?: boolean
+}
+
+/**
+ * MenuItem content
+ */
+const MenuItemContent = ({ icon, type, label, copied }: MenuItemContentProps) => (
+  <>
+    {icon && <span className="text-foreground-lighter">{icon}</span>}
+    <span className="grow">{label}</span>
+    {type === 'clipboard' && (
+      <span className="w-4 opacity-0 flex items-center justify-center group-hover/menu-item:opacity-100 group-focus/menu-item:opacity-100 group-focus-visible/menu-item:opacity-100">
+        {!copied ? (
+          <ClipboardIcon
+            strokeWidth={1}
+            className={cn(
+              'h-3 transition-opacity opacity-0 duration-300',
+              !copied && 'opacity-100'
+            )}
+          />
+        ) : (
+          <CheckIcon
+            strokeWidth={1}
+            className={cn('h-3 transition-opacity opacity-0 duration-300', copied && 'opacity-100')}
+          />
+        )}
+      </span>
+    )}
+  </>
+)
+
+export default RightClickBrandLogo

apps/www/components/Nav/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
@@ -21,9 +20,7 @@ import HamburgerButton from './HamburgerMenu'
 import MobileMenu from './MobileMenu'
 import MenuItem from './MenuItem'
 import { menu } from '~/data/nav'
-
-import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
-import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
+import RightClickBrandLogo from './RightClickBrandLogo'
 
 interface Props {
   hideNavbar: boolean
@@ -92,27 +89,7 @@ const Nav = (props: Props) => {
             <div className="flex items-center px-6 lg:px-0 flex-1 sm:items-stretch justify-between">
               <div className="flex items-center">
                 <div className="flex items-center flex-shrink-0">
-                  <Link
-                    href="/"
-                    className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
-                  >
-                    <Image
-                      src={supabaseLogoWordmarkLight}
-                      width={124}
-                      height={24}
-                      alt="Supabase Logo"
-                      className="dark:hidden"
-                      priority
-                    />
-                    <Image
-                      src={supabaseLogoWordmarkDark}
-                      width={124}
-                      height={24}
-                      alt="Supabase Logo"
-                      className="hidden dark:block"
-                      priority
-                    />
-                  </Link>
+                  <RightClickBrandLogo />
 
                   {!isGAWeekSection &&
                     !isLaunchWeek11Page &&

apps/www/public/customers-rss.xml

@@ -5,119 +5,119 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Mon, 03 Jun 2024 04:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Mon, 03 Jun 2024 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
   <guid>https://supabase.com/customers/voypost</guid>
   <title>Voypost uses Supabase’s strong relational model to overcome NoSQL challenges</title>
   <link>https://supabase.com/customers/voypost</link>
   <description>Learn how Voypost leveraged Supabase to avoid NoSQL workarounds, enhance scalability, and deliver a superior user experience for Inkly, an intelligent contract negotiation platform.</description>
-  <pubDate>Mon, 03 Jun 2024 04:00:00 GMT</pubDate>
+  <pubDate>Mon, 03 Jun 2024 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/tinloof</guid>
   <title>Streamlining Success: How Tinloof Scaled Seamlessly with Supabase</title>
   <link>https://supabase.com/customers/tinloof</link>
   <description>Discover Tinloof, how a full-stack development agency, managed and scaled backend services using Supabase, without having to dedicate resources to infrastructure management.</description>
-  <pubDate>Mon, 03 Jun 2024 04:00:00 GMT</pubDate>
+  <pubDate>Mon, 03 Jun 2024 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/shotgun</guid>
   <title>Supabase migration delivers an 83% reduction in data infrastructure costs for Shotgun</title>
   <link>https://supabase.com/customers/shotgun</link>
   <description>Discover how Shotgun, an event ticketing platform with over 3 million users, reduced costs and consolidated systems through migration to Supabase.</description>
-  <pubDate>Wed, 29 Nov 2023 05:00:00 GMT</pubDate>
+  <pubDate>Wed, 29 Nov 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/next-door-lending</guid>
   <title>How Next Door Lending leveraged Supabase to become a top 10 mortgage broker</title>
   <link>https://supabase.com/customers/next-door-lending</link>
   <description>Discover how Supabase empowered NextDoorLending to move quickly and scale as required, leading to their surpassing other mortgage brokers and expanding their business.</description>
-  <pubDate>Tue, 07 Nov 2023 05:00:00 GMT</pubDate>
+  <pubDate>Tue, 07 Nov 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/good-tape</guid>
   <title>Good Tape migrates to Supabase managed Postgres and Authentication and achieves database efficiency and a 60% cost reduction.</title>
   <link>https://supabase.com/customers/good-tape</link>
   <description>Explore how Good Tape achieved remarkable database efficiency and reduced costs by 60% through their successful migration to Supabase&apos;s managed services.</description>
-  <pubDate>Mon, 30 Oct 2023 04:00:00 GMT</pubDate>
+  <pubDate>Mon, 30 Oct 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/pebblely</guid>
   <title>Scaling securely: one million users in 7 months with Supabase Auth</title>
   <link>https://supabase.com/customers/pebblely</link>
   <description>Learn how Pebblely, an AI image generation company, used Supabase Auth to handle Single Sign On for their rapidly growing user base.</description>
-  <pubDate>Thu, 28 Sep 2023 04:00:00 GMT</pubDate>
+  <pubDate>Thu, 28 Sep 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/chatbase</guid>
   <title>Bootstrapped founder builds an AI app with Supabase and scales to $1M in 5 months</title>
   <link>https://supabase.com/customers/chatbase</link>
   <description>How Yasser leveraged Supabase to build Chatbase and became one of the most successful single-founder AI products.</description>
-  <pubDate>Tue, 05 Sep 2023 04:00:00 GMT</pubDate>
+  <pubDate>Tue, 05 Sep 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/quivr</guid>
   <title>Quivr launch 5,000 Vector databases on Supabase.</title>
   <link>https://supabase.com/customers/quivr</link>
   <description>Learn how one of the most popular Generative AI projects uses Supabase as their Vector Store.</description>
-  <pubDate>Mon, 04 Sep 2023 04:00:00 GMT</pubDate>
+  <pubDate>Mon, 04 Sep 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/berriai</guid>
   <title>Berri AI boosts productivity by migrating from AWS RDS to Supabase Vector</title>
   <link>https://supabase.com/customers/berriai</link>
   <description>Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.</description>
-  <pubDate>Mon, 05 Jun 2023 04:00:00 GMT</pubDate>
+  <pubDate>Mon, 05 Jun 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/markprompt</guid>
   <title>Markprompt and Supabase - GDPR-compliant AI chatbots for docs and websites.</title>
   <link>https://supabase.com/customers/markprompt</link>
   <description>AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase&apos;s secure and privacy-focused vector database and authentication solutions.</description>
-  <pubDate>Tue, 16 May 2023 04:00:00 GMT</pubDate>
+  <pubDate>Tue, 16 May 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/mendableai</guid>
   <title>Mendable switches from Pinecone to Supabase Vector for PostgreSQL vector embeddings.</title>
   <link>https://supabase.com/customers/mendableai</link>
   <description>How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase Vector.</description>
-  <pubDate>Thu, 04 May 2023 04:00:00 GMT</pubDate>
+  <pubDate>Thu, 04 May 2023 22:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/happyteams</guid>
   <title>HappyTeams unlocks better performance and reduces cost with Supabase.</title>
   <link>https://supabase.com/customers/happyteams</link>
   <description>How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back.</description>
-  <pubDate>Wed, 15 Feb 2023 05:00:00 GMT</pubDate>
+  <pubDate>Wed, 15 Feb 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/xendit</guid>
   <title>Xendit use Supabase and create a full solution shipped to production in less than one week.</title>
   <link>https://supabase.com/customers/xendit</link>
   <description>As a payment processor, Xendit are responsible for verifying that all transactions are legal.</description>
-  <pubDate>Mon, 13 Feb 2023 05:00:00 GMT</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/replenysh</guid>
   <title>Replenysh uses Supabase to implement OTP in less than 24 hours.</title>
   <link>https://supabase.com/customers/replenysh</link>
   <description>With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.</description>
-  <pubDate>Mon, 13 Feb 2023 05:00:00 GMT</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/mobbin</guid>
   <title>How Mobbin migrated 200,000 users from Firebase for a better authentication experience.</title>
   <link>https://supabase.com/customers/mobbin</link>
   <description>Mobbin helps over 200,000 creators globally search and view the latest design patterns from well-known apps.</description>
-  <pubDate>Mon, 13 Feb 2023 05:00:00 GMT</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/customers/epsilon3</guid>
   <title>Epsilon3 digitize paper-based procedures in the space industry using telemetry data, simplifying testing and operations.</title>
   <link>https://supabase.com/customers/epsilon3</link>
   <description>Epsilon3 uses Supabase to help teams execute secure and reliable operations in an industry where project spend runs into the billions.</description>
-  <pubDate>Mon, 13 Feb 2023 05:00:00 GMT</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
 </item>
 
     </channel>