diff --git a/website/public/favicon-16.png b/website/public/favicon-16.png new file mode 100644 index 0000000..0fa03fa Binary files /dev/null and b/website/public/favicon-16.png differ diff --git a/website/public/favicon-32.png b/website/public/favicon-32.png new file mode 100644 index 0000000..1b164a1 Binary files /dev/null and b/website/public/favicon-32.png differ diff --git a/website/public/favicon.ico b/website/public/favicon.ico deleted file mode 100644 index 8830cf6..0000000 Binary files a/website/public/favicon.ico and /dev/null differ diff --git a/website/public/og-image.png b/website/public/og-image.png new file mode 100644 index 0000000..f531ea7 Binary files /dev/null and b/website/public/og-image.png differ diff --git a/website/src/root.tsx b/website/src/root.tsx index 7609b4d..6b3b9b2 100644 --- a/website/src/root.tsx +++ b/website/src/root.tsx @@ -1,4 +1,5 @@ import "website/src/styles/globals.css"; +import type { LinksFunction } from "react-router"; import { Route } from "./+types/root"; import { isRouteErrorResponse, @@ -9,6 +10,11 @@ import { ScrollRestoration, } from "react-router"; +export const links: LinksFunction = () => [ + { rel: "icon", type: "image/png", href: "/favicon-32.png", sizes: "32x32" }, + { rel: "icon", type: "image/png", href: "/favicon-16.png", sizes: "16x16" }, +]; + export function Layout({ children }: { children: React.ReactNode }) { return ( diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx index 0479771..dff26eb 100644 --- a/website/src/routes/liveline.tsx +++ b/website/src/routes/liveline.tsx @@ -4,6 +4,7 @@ * Styles from liveline.css and liveline-prism.css. */ +import type { MetaFunction } from "react-router"; import dedent from "string-dedent"; import "website/src/styles/liveline.css"; import "website/src/styles/liveline-prism.css"; @@ -21,19 +22,19 @@ import { Li, } from "website/src/components/markdown"; -export function meta() { +export const meta: MetaFunction = () => { const title = "Playwriter - Control your Chrome with Playwright API"; const description = "Chrome extension + CLI for browser automation. Full Playwright API on your existing browser. No new windows, no flags, no context bloat."; - const image = "https://playwriter.dev/screenshot@2x.png"; + const image = "https://playwriter.dev/og-image.png"; return [ { title }, { name: "description", content: description }, { property: "og:title", content: title }, { property: "og:description", content: description }, { property: "og:image", content: image }, - { property: "og:image:width", content: "1280" }, - { property: "og:image:height", content: "800" }, + { property: "og:image:width", content: "1200" }, + { property: "og:image:height", content: "630" }, { property: "og:type", content: "website" }, { property: "og:url", content: "https://playwriter.dev/liveline" }, { name: "twitter:card", content: "summary_large_image" }, @@ -41,7 +42,7 @@ export function meta() { { name: "twitter:description", content: description }, { name: "twitter:image", content: image }, ]; -} +}; const tocItems = [ { label: "Getting started", href: "#getting-started" },