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