New logo (#57)

* added new logo

* uploaded svg

modules/handlers.ts

@@ -20,6 +20,7 @@ export async function createMockResponse(request, context) {
   let binId = crypto.randomUUID().replaceAll("-", "");
   const storage = storageClient(context.log);
   const contentType = request.headers.get("content-type") ?? "";
+  let isOpenApi = false;
 
   try {
     let responseData;
@@ -34,6 +35,7 @@ export async function createMockResponse(request, context) {
         url,
       );
     } else if (contentType.startsWith("multipart/form-data")) {
+      isOpenApi = true;
       // Handle OpenAPI mock
       binId += "_oas";
       responseData = await handleOpenApiMock(
@@ -50,7 +52,11 @@ export async function createMockResponse(request, context) {
     }
 
     context.log.debug({ message: "bin_created", binId });
-    context.waitUntil(logAnalytics("bin_created", { binId }));
+    context.waitUntil(
+      logAnalytics(isOpenApi ? "openapi_bin_created" : "bin_created", {
+        binId,
+      }),
+    );
 
     return new Response(JSON.stringify(responseData, null, 2), {
       status: 201,

www/components/BinHeader.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
 import Image from "next/image";
-import HeaderImage from "@/public/mockbin-header-small.png";
+import HeaderImage from "@/public/mockbin-white.svg";
 import CopyButton from "@/components/CopyButton";
 import RefreshIcon from "@/components/RefreshIcon";
 import ArrowIcon from "@/components/ArrowIcon";
 import cn from "classnames";
 import Button from "@/components/Button";
-import RMOLink from "@/components/RMOLink";
 import DocsButton from "./DocsButton";
 
 const BinHeader = ({
@@ -28,7 +27,7 @@ const BinHeader = ({
       className="flex gap-1 items-center px-4 group ease-in-out flex-shrink-0"
     >
       <ArrowIcon className="rotate-180 text-[#FF00BD] group-hover:scale-125 transition-transform" />
-      <Image alt="mockbin logo" height={50} src={HeaderImage} />
+      <Image alt="mockbin logo" height={30} src={HeaderImage} />
     </Link>
     <div
       className={cn(
@@ -47,7 +46,6 @@ const BinHeader = ({
       {isOas && <DocsButton docsUrl={docsUrl} />}
     </div>
     <div className="flex gap-4 px-4 items-center">
-      <RMOLink />
       <Button as="a" tabIndex={0} className="whitespace-nowrap" href="/">
         Create Bin
       </Button>

www/components/Header.tsx

@@ -1,23 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import Image from "next/image";
 import Link from "next/link";
-import HeaderImage from "../public/mockbin-header.png";
-import RMOLink from "@/components/RMOLink";
+import HeaderImage from "../public/mockbin-white.svg";
 
 const Header = () => {
   return (
     <header className="flex flex-row w-full justify-between items-center">
       <Link href="/">
-        <Image width={360} height={132} alt="mockbin logo" src={HeaderImage} />
+        <Image
+          height={40}
+          alt="mockbin logo"
+          src={HeaderImage}
+          className="py-4"
+        />
       </Link>
       <div className="flex gap-x-2 items-center">
-        <a href="https://github.com/zuplo/mockbin" target="_blank">
-          <img
-            alt="GitHub Repo stars"
-            src="https://img.shields.io/github/stars/zuplo/mockbin?link=https%3A%2F%2Fgithub.com%2Fzuplo%2Fmockbin"
-          />
-        </a>
-        <RMOLink />
         <a
           target="_blank"
           className="hidden sm:flex items-center gap-x-1 bg-[#5865F2] h-[31px] border border-[#464ec7] hover:bg-[#464ec7] p-2 py-[4px] rounded-[4px]"

www/pages/index.tsx

@@ -173,14 +173,13 @@ const Index = () => {
 
   return (
     <Frame>
-      <div className="my-8 flex flex-col gap-4">
-        <h1 className="text-3xl">
-          Welcome to <span className="font-bold">Mockbin by Zuplo</span>
-        </h1>
+      <div className="my-8 flex flex-col gap-4 max-w-3xl pt-10">
+        <h1 className="text-4xl font-bold">Welcome to Mockbin.io</h1>
         <p className="text-gray-300">
-          This is an open-source and fully-free tool that allows you to quickly
-          mock an API endpoint, configure a fixed response and track requests to
-          your endpoint.
+          Mockbin.io is an open-source and fully-free tool that allows you to
+          quickly mock an API endpoint, configure a fixed response and track
+          requests to your endpoint. You can also upload your OpenAPI document
+          and we&apos;ll do our best to mock it using your schemas and examples.
         </p>
       </div>
       <div